discourse/app/assets/javascripts/discourse/components/popup-menu.js.es6
2016-06-20 10:12:01 +08:00

51 lines
1.3 KiB
JavaScript

import { on } from 'ember-addons/ember-computed-decorators';
export default Ember.Component.extend({
classNameBindings: ["visible::hidden", ":popup-menu", "extraClasses"],
@on('didInsertElement')
_setup() {
this.appEvents.on("popup-menu:open", this, "_changeLocation");
$('html').on(`keydown.popup-menu-${this.get('elementId')}`, () => {
this.sendAction('hide');
});
$('html').on(`mouseup.popup-menu-${this.get('elementId')}`, (e) => {
const $target = $(e.target);
if ($target.is("button") || this.$().has($target).length === 0) {
this.sendAction('hide');
}
});
},
@on('willDestroyElement')
_cleanup() {
$('html').off(`mouseup.popup-menu-${this.get('elementId')}`);
$('html').off(`keydown.popup-menu-${this.get('elementId')}`);
this.appEvents.off("popup-menu:open", this, "_changeLocation");
},
_changeLocation(location) {
const $this = this.$();
switch (location.position) {
case "absolute": {
$this.css({
position: "absolute",
top: location.top - $this.innerHeight() + 5,
left: location.left,
});
break;
}
case "fixed": {
$this.css({
position: "fixed",
top: location.top,
left: location.left - $this.innerWidth(),
});
break;
}
}
}
});