mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
fce4aa9176
no issue
- add `{{aspect-ratio-box}}` to make it easier to adjust box sizes at a fixed ratio based on container height which isn't possible with CSS directly
- used `{{gh-uploader}}` to add upload facility to the icon shown on the integration screen
52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
import Component from '@ember/component';
|
|
import {assert} from '@ember/debug';
|
|
import {debounce, run} from '@ember/runloop';
|
|
|
|
export default Component.extend({
|
|
ratio: '1/1',
|
|
base: 'height',
|
|
isResizing: true,
|
|
|
|
_ratio: 1,
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
this._onResizeHandler = () => {
|
|
debounce(this, this._resize, 200);
|
|
};
|
|
},
|
|
|
|
didReceiveAttrs() {
|
|
assert(
|
|
'{{aspect-ratio-box}} requires a `ratio` property in the format `"16/9"`',
|
|
this.ratio.match(/\d+\/\d+/)
|
|
);
|
|
this._ratio = this.ratio.split('/').reduce((prev, curr) => prev / curr);
|
|
},
|
|
|
|
didInsertElement() {
|
|
this._resize();
|
|
window.addEventListener('resize', this._onResizeHandler);
|
|
},
|
|
|
|
willDestroyElement() {
|
|
this._super(...arguments);
|
|
window.removeEventListener('resize', this._onResizeHandler);
|
|
},
|
|
|
|
_resize() {
|
|
this.set('isResizing', true);
|
|
|
|
run.schedule('afterRender', this, function () {
|
|
if (this.base === 'height') {
|
|
this.element.style.width = `${this.element.clientHeight * this._ratio}px`;
|
|
} else {
|
|
this.element.style.height = `${this.element.clientWidth * this._ratio}px`;
|
|
}
|
|
|
|
this.set('isResizing', false);
|
|
});
|
|
}
|
|
|
|
});
|