Rename popovers to dropdowns

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;

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;
+export default GhostDropdown;

core/client/components/gh-popover-button.js

@@ -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;

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 () {

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',

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;

core/client/initializers/popover.js

@@ -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;

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;
+export default DropdownMixin;

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

core/client/templates/-navbar.hbs

@@ -30,7 +30,7 @@
     }}
 
     <div class="nav-item user-menu" data-href="#">
-        {{#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}}
             <div class="image"><img {{bind-attr src="session.user.image"}} alt="{{session.user.name}}'s profile picture" /></div>
             {{else}}
@@ -40,15 +40,15 @@
                 {{session.user.name}} <i class="icon-chevron-down"></i>
                 <small>Profile &amp; Settings</small>
             </div>
-        {{/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"}}
             <ul class="dropdown-menu dropdown-triangle-top-right js-user-menu-dropdown-menu" role="menu">
                 <li role="presentation">{{#link-to "settings.users.user" session.user.slug classNames="dropdown-item user-menu-profile js-nav-item" role="menuitem" tabindex="-1"}}<i class="icon-user"></i> Your Profile{{/link-to}}</li>
                 <li role="presentation"><a class="dropdown-item user-menu-support" role="menuitem" tabindex="-1" href="http://support.ghost.org/"><i class="icon-support"></i> Help / Support</a></li>
                 <li class="divider"></li>
                 <li role="presentation">{{#link-to "signout" classNames="dropdown-item user-menu-signout" role="menuitem" tabindex="-1"}}<i class="icon-power"></i> Sign Out{{/link-to}}</li>
             </ul>
-        {{/gh-popover}}
+        {{/gh-dropdown}}
     </div>{{! .user-menu }}
 
 </nav>{{! .global-nav }}

core/client/templates/editor-save-button.hbs

@@ -1,9 +1,9 @@
 <button type="button" {{action "save"}} {{bind-attr class=":btn :btn-sm view.isDangerous:btn-red:btn-blue :js-publish-button" }}>{{view.saveText}}</button>
-{{#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"}}
     <i class="options"></i>
     <span class="sr-only">Toggle Settings Menu</span>
-{{/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"}}
     <ul class="dropdown-menu dropdown-triangle-bottom-right">
         <li class="post-save-publish" {{bind-attr class="willPublish:active"}}>
             <a {{action "setSaveType" "publish"}} href="#">{{view.publishText}}</a>
@@ -16,4 +16,4 @@
             <a {{action "openModal" "delete-post" this}} href="#">Delete Post</a>
         </li>
     </ul>
-{{/gh-popover}}
+{{/gh-dropdown}}

core/client/templates/settings/users/user.hbs

@@ -6,13 +6,13 @@
     <section class="page-actions">
         {{#if view.userActionsAreVisible}}
             <span class="dropdown">
-                {{#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"}}
                     <i class="icon-settings"></i>
                     <span class="hidden">User Settings</span>
-                {{/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}}
             </span>
         {{/if}}
 

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 {