From e5b45c8d7655fc2f5628e7575bc7a02f74cf9d68 Mon Sep 17 00:00:00 2001 From: Paul Adam Davis Date: Sun, 28 Sep 2014 16:39:25 +0100 Subject: [PATCH] Rename popovers to dropdowns --- core/client/components/gh-dropdown-button.js | 14 +++++++++ .../{gh-popover.js => gh-dropdown.js} | 28 ++++++++--------- core/client/components/gh-popover-button.js | 14 --------- core/client/controllers/modals/delete-post.js | 2 +- .../controllers/modals/transfer-owner.js | 2 +- core/client/initializers/dropdown.js | 30 +++++++++++++++++++ core/client/initializers/popover.js | 30 ------------------- .../{popover-mixin.js => dropdown-mixin.js} | 6 ++-- core/client/routes/application.js | 4 +-- core/client/templates/-navbar.hbs | 8 ++--- core/client/templates/editor-save-button.hbs | 8 ++--- core/client/templates/settings/users/user.hbs | 8 ++--- core/client/views/application.js | 6 ++-- 13 files changed, 80 insertions(+), 80 deletions(-) create mode 100644 core/client/components/gh-dropdown-button.js rename core/client/components/{gh-popover.js => gh-dropdown.js} (69%) delete mode 100644 core/client/components/gh-popover-button.js create mode 100644 core/client/initializers/dropdown.js delete mode 100644 core/client/initializers/popover.js rename core/client/mixins/{popover-mixin.js => dropdown-mixin.js} (53%) diff --git a/core/client/components/gh-dropdown-button.js b/core/client/components/gh-dropdown-button.js new file mode 100644 index 0000000000..66222842c5 --- /dev/null +++ b/core/client/components/gh-dropdown-button.js @@ -0,0 +1,14 @@ +import DropdownMixin from 'ghost/mixins/dropdown-mixin'; + +var DropdownButton = Ember.Component.extend(DropdownMixin, { + tagName: 'button', + /*matches with the dropdown this button toggles*/ + dropdownName: null, + /*Notify dropdown service this dropdown should be toggled*/ + click: function (event) { + this._super(event); + this.get('dropdown').toggleDropdown(this.get('dropdownName'), this); + } +}); + +export default DropdownButton; \ No newline at end of file diff --git a/core/client/components/gh-popover.js b/core/client/components/gh-dropdown.js similarity index 69% rename from core/client/components/gh-popover.js rename to core/client/components/gh-dropdown.js index 75f9a9abbc..3d4c55862e 100644 --- a/core/client/components/gh-popover.js +++ b/core/client/components/gh-dropdown.js @@ -1,12 +1,12 @@ -import PopoverMixin from 'ghost/mixins/popover-mixin'; +import DropdownMixin from 'ghost/mixins/dropdown-mixin'; -var GhostPopover = Ember.Component.extend(PopoverMixin, { - classNames: 'ghost-popover', +var GhostDropdown = Ember.Component.extend(DropdownMixin, { + classNames: 'ghost-dropdown', name: null, closeOnClick: false, //Helps track the user re-opening the menu while it's fading out. closing: false, - //Helps track whether the popover is open or closes, or in a transition to either + //Helps track whether the dropdown is open or closes, or in a transition to either isOpen: false, //Managed the toggle between the fade-in and fade-out classes fadeIn: Ember.computed('isOpen', 'closing', function () { @@ -35,15 +35,15 @@ var GhostPopover = Ember.Component.extend(PopoverMixin, { } }); }, - //Called by the popover service when any popover button is clicked. + //Called by the dropdown service when any dropdown button is clicked. toggle: function (options) { var isClosing = this.get('closing'), isOpen = this.get('isOpen'), name = this.get('name'), button = this.get('button'), - targetPopoverName = options.target; + targetDropdownName = options.target; - if (name === targetPopoverName && (!isOpen || isClosing)) { + if (name === targetDropdownName && (!isOpen || isClosing)) { if (!button) { button = options.button; this.set('button', button); @@ -63,18 +63,18 @@ var GhostPopover = Ember.Component.extend(PopoverMixin, { didInsertElement: function () { this._super(); - var popoverService = this.get('popover'); + var dropdownService = this.get('dropdown'); - popoverService.on('close', this, this.close); - popoverService.on('toggle', this, this.toggle); + dropdownService.on('close', this, this.close); + dropdownService.on('toggle', this, this.toggle); }, willDestroyElement: function () { this._super(); - var popoverService = this.get('popover'); + var dropdownService = this.get('dropdown'); - popoverService.off('close', this, this.close); - popoverService.off('toggle', this, this.toggle); + dropdownService.off('close', this, this.close); + dropdownService.off('toggle', this, this.toggle); } }); -export default GhostPopover; \ No newline at end of file +export default GhostDropdown; \ No newline at end of file diff --git a/core/client/components/gh-popover-button.js b/core/client/components/gh-popover-button.js deleted file mode 100644 index d0a1c6b785..0000000000 --- a/core/client/components/gh-popover-button.js +++ /dev/null @@ -1,14 +0,0 @@ -import PopoverMixin from 'ghost/mixins/popover-mixin'; - -var PopoverButton = Ember.Component.extend(PopoverMixin, { - tagName: 'button', - /*matches with the popover this button toggles*/ - popoverName: null, - /*Notify popover service this popover should be toggled*/ - click: function (event) { - this._super(event); - this.get('popover').togglePopover(this.get('popoverName'), this); - } -}); - -export default PopoverButton; \ No newline at end of file diff --git a/core/client/controllers/modals/delete-post.js b/core/client/controllers/modals/delete-post.js index c19316dc2e..684696137c 100644 --- a/core/client/controllers/modals/delete-post.js +++ b/core/client/controllers/modals/delete-post.js @@ -8,7 +8,7 @@ var DeletePostController = Ember.Controller.extend({ model.updateTags(); model.destroyRecord().then(function () { - self.get('popover').closePopovers(); + self.get('dropdown').closeDropdowns(); self.transitionToRoute('posts.index'); self.notifications.showSuccess('Your post has been deleted.', { delayed: true }); }, function () { diff --git a/core/client/controllers/modals/transfer-owner.js b/core/client/controllers/modals/transfer-owner.js index fbb4d3dc19..87b2dae9c4 100644 --- a/core/client/controllers/modals/transfer-owner.js +++ b/core/client/controllers/modals/transfer-owner.js @@ -5,7 +5,7 @@ var TransferOwnerController = Ember.Controller.extend({ url = this.get('ghostPaths.url').api('users', 'owner'), self = this; - self.get('popover').closePopovers(); + self.get('dropdown').closeDropdowns(); ic.ajax.request(url, { type: 'PUT', diff --git a/core/client/initializers/dropdown.js b/core/client/initializers/dropdown.js new file mode 100644 index 0000000000..034691b996 --- /dev/null +++ b/core/client/initializers/dropdown.js @@ -0,0 +1,30 @@ +import BodyEventListener from 'ghost/mixins/body-event-listener'; + +var DropdownService = Ember.Object.extend(Ember.Evented, BodyEventListener, { + bodyClick: function (event) { + /*jshint unused:false */ + this.closeDropdowns(); + }, + closeDropdowns: function () { + this.trigger('close'); + }, + toggleDropdown: function (dropdownName, dropdownButton) { + this.trigger('toggle', {target: dropdownName, button: dropdownButton}); + } +}); + +var dropdownInitializer = { + name: 'dropdown', + + initialize: function (container, application) { + application.register('dropdown:service', DropdownService); + + application.inject('component:gh-dropdown', 'dropdown', 'dropdown:service'); + application.inject('component:gh-dropdown-button', 'dropdown', 'dropdown:service'); + application.inject('controller:modals.delete-post', 'dropdown', 'dropdown:service'); + application.inject('controller:modals.transfer-owner', 'dropdown', 'dropdown:service'); + application.inject('route:application', 'dropdown', 'dropdown:service'); + } +}; + +export default dropdownInitializer; diff --git a/core/client/initializers/popover.js b/core/client/initializers/popover.js deleted file mode 100644 index f9aeacd44b..0000000000 --- a/core/client/initializers/popover.js +++ /dev/null @@ -1,30 +0,0 @@ -import BodyEventListener from 'ghost/mixins/body-event-listener'; - -var PopoverService = Ember.Object.extend(Ember.Evented, BodyEventListener, { - bodyClick: function (event) { - /*jshint unused:false */ - this.closePopovers(); - }, - closePopovers: function () { - this.trigger('close'); - }, - togglePopover: function (popoverName, popoverButton) { - this.trigger('toggle', {target: popoverName, button: popoverButton}); - } -}); - -var popoverInitializer = { - name: 'popover', - - initialize: function (container, application) { - application.register('popover:service', PopoverService); - - application.inject('component:gh-popover', 'popover', 'popover:service'); - application.inject('component:gh-popover-button', 'popover', 'popover:service'); - application.inject('controller:modals.delete-post', 'popover', 'popover:service'); - application.inject('controller:modals.transfer-owner', 'popover', 'popover:service'); - application.inject('route:application', 'popover', 'popover:service'); - } -}; - -export default popoverInitializer; diff --git a/core/client/mixins/popover-mixin.js b/core/client/mixins/dropdown-mixin.js similarity index 53% rename from core/client/mixins/popover-mixin.js rename to core/client/mixins/dropdown-mixin.js index 369584e877..cb70c04c67 100644 --- a/core/client/mixins/popover-mixin.js +++ b/core/client/mixins/dropdown-mixin.js @@ -1,7 +1,7 @@ /* - Popovers and their buttons are evented and do not propagate clicks. + Dropdowns and their buttons are evented and do not propagate clicks. */ -var PopoverMixin = Ember.Mixin.create(Ember.Evented, { +var DropdownMixin = Ember.Mixin.create(Ember.Evented, { classNameBindings: ['isOpen:open:closed'], isOpen: false, click: function (event) { @@ -10,4 +10,4 @@ var PopoverMixin = Ember.Mixin.create(Ember.Evented, { } }); -export default PopoverMixin; \ No newline at end of file +export default DropdownMixin; \ No newline at end of file diff --git a/core/client/routes/application.js b/core/client/routes/application.js index 0f0f44c26a..d47628b24a 100644 --- a/core/client/routes/application.js +++ b/core/client/routes/application.js @@ -37,7 +37,7 @@ var ApplicationRoute = Ember.Route.extend(SimpleAuth.ApplicationRouteMixin, Shor }, closePopups: function () { - this.get('popover').closePopovers(); + this.get('dropdown').closeDropdowns(); this.get('notifications').closeAll(); // Close right outlet if open @@ -78,7 +78,7 @@ var ApplicationRoute = Ember.Route.extend(SimpleAuth.ApplicationRouteMixin, Shor }, openModal: function (modalName, model, type) { - this.get('popover').closePopovers(); + this.get('dropdown').closeDropdowns(); modalName = 'modals/' + modalName; // We don't always require a modal to have a controller // so we're skipping asserting if one exists diff --git a/core/client/templates/-navbar.hbs b/core/client/templates/-navbar.hbs index e264d7efa4..88aef1f104 100644 --- a/core/client/templates/-navbar.hbs +++ b/core/client/templates/-navbar.hbs @@ -30,7 +30,7 @@ }}
- {{#gh-popover-button popoverName="user-menu" tagName="div" classNames="nav-label clearfix"}} + {{#gh-dropdown-button dropdownName="user-menu" tagName="div" classNames="nav-label clearfix"}} {{#if session.user.image}}
{{session.user.name}}'s profile picture
{{else}} @@ -40,15 +40,15 @@ {{session.user.name}} Profile & Settings
- {{/gh-popover-button}} - {{#gh-popover tagName="div" classNames="dropdown" name="user-menu" closeOnClick="true"}} + {{/gh-dropdown-button}} + {{#gh-dropdown tagName="div" classNames="dropdown" name="user-menu" closeOnClick="true"}} - {{/gh-popover}} + {{/gh-dropdown}} {{! .user-menu }} {{! .global-nav }} diff --git a/core/client/templates/editor-save-button.hbs b/core/client/templates/editor-save-button.hbs index 0726fe178c..5053ee3944 100644 --- a/core/client/templates/editor-save-button.hbs +++ b/core/client/templates/editor-save-button.hbs @@ -1,9 +1,9 @@ -{{#gh-popover-button popoverName="post-save-menu" classNameBindings=":btn :btn-sm view.isDangerous:btn-red:btn-blue btnopen:active :dropdown-toggle :up"}} +{{#gh-dropdown-button dropdownName="post-save-menu" classNameBindings=":btn :btn-sm view.isDangerous:btn-red:btn-blue btnopen:active :dropdown-toggle :up"}} Toggle Settings Menu -{{/gh-popover-button}} -{{#gh-popover name="post-save-menu" closeOnClick="true" tagName="div" classNames="dropdown editor-options"}} +{{/gh-dropdown-button}} +{{#gh-dropdown name="post-save-menu" closeOnClick="true" tagName="div" classNames="dropdown editor-options"}} -{{/gh-popover}} \ No newline at end of file +{{/gh-dropdown}} \ No newline at end of file diff --git a/core/client/templates/settings/users/user.hbs b/core/client/templates/settings/users/user.hbs index 1b5c257775..b7fe39ad78 100644 --- a/core/client/templates/settings/users/user.hbs +++ b/core/client/templates/settings/users/user.hbs @@ -6,13 +6,13 @@
{{#if view.userActionsAreVisible}} - {{#gh-popover-button popoverName="user-actions-menu" classNames="btn btn-default only-has-icon user-actions-cog" title="User Actions"}} + {{#gh-dropdown-button dropdownName="user-actions-menu" classNames="btn btn-default only-has-icon user-actions-cog" title="User Actions"}} - {{/gh-popover-button}} - {{#gh-popover name="user-actions-menu" tagName="ul" classNames="user-actions-menu dropdown-menu dropdown-triangle-top-right"}} + {{/gh-dropdown-button}} + {{#gh-dropdown name="user-actions-menu" tagName="ul" classNames="user-actions-menu dropdown-menu dropdown-triangle-top-right"}} {{partial "user-actions-menu"}} - {{/gh-popover}} + {{/gh-dropdown}} {{/if}} diff --git a/core/client/views/application.js b/core/client/views/application.js index 0b87934bd5..a64ef37856 100644 --- a/core/client/views/application.js +++ b/core/client/views/application.js @@ -23,12 +23,12 @@ var ApplicationView = Ember.View.extend({ }); // #### Listen to the viewport and change user-menu dropdown triangle classes accordingly - mobileQuery.addListener(this.swapUserMenuPopoverTriangleClasses); - this.swapUserMenuPopoverTriangleClasses(mobileQuery); + mobileQuery.addListener(this.swapUserMenuDropdownTriangleClasses); + this.swapUserMenuDropdownTriangleClasses(mobileQuery); }.on('didInsertElement'), - swapUserMenuPopoverTriangleClasses: function (mq) { + swapUserMenuDropdownTriangleClasses: function (mq) { if (mq.matches) { $('.js-user-menu-dropdown-menu').removeClass('dropdown-triangle-top-right ').addClass('dropdown-triangle-bottom'); } else {