Fix -navbar events attachment

Closes #3623
- Move hamburger logic to action with terrible name, "toggleSidebarOrGoHome"
- Move ".js-close-sidebar" events to a document.on(event, *selector*, f) to make sure they attach even when the js-close-sidebars aren't on page (ie, hidenav)
This commit is contained in:
Matt Enlow 2014-08-10 14:50:25 -06:00
parent 90fc933f08
commit d61e37e799
4 changed files with 22 additions and 23 deletions

View File

@ -1,7 +1,7 @@
<header id="global-header" class="navbar"> <header id="global-header" class="navbar">
<a class="ghost-logo" data-off-canvas="left"> <button {{action "toggleSidebarOrGoHome" target="view"}} class="ghost-logo">
<span class="hidden">Ghost</span> <span class="hidden">Ghost</span>
</a> </button>
<nav id="global-nav" role="navigation"> <nav id="global-nav" role="navigation">
<ul id="main-menu" > <ul id="main-menu" >
{{gh-activating-list-item route="posts" title="Content" classNames="content js-close-sidebar"}} {{gh-activating-list-item route="posts" title="Content" classNames="content js-close-sidebar"}}

View File

@ -1,21 +1,23 @@
import {responsiveAction} from 'ghost/utils/mobile';
var ApplicationView = Ember.View.extend({ var ApplicationView = Ember.View.extend({
setupCloseSidebar: function () {
mobileInteractions: function () {
var body = $('body');
// ### Toggle the mobile sidebar menu
$('[data-off-canvas]').on('click', function (event) {
responsiveAction(event, '(max-width: 650px)', function () {
body.toggleClass('off-canvas');
});
});
$('[data-off-canvas]').attr('href', this.get('controller.ghostPaths.blogRoot'));
// #### Navigating within the sidebar closes it. // #### Navigating within the sidebar closes it.
$('.js-close-sidebar').on('click', function () { $(document).on('click', '.js-close-sidebar', function () {
body.removeClass('off-canvas'); $('body').removeClass('off-canvas');
}); });
}.on('didInsertElement') }.on('didInsertElement'),
actions: {
//Sends the user to the front if they're not on mobile,
//otherwise toggles the sidebar.
toggleSidebarOrGoHome: function () {
if (window.matchMedia('(max-width: 650px)').matches) {
$('body').toggleClass('off-canvas');
}
else {
window.location = this.get('controller.ghostPaths').blogRoot;
}
}
}
}); });
export default ApplicationView; export default ApplicationView;

View File

@ -28,7 +28,6 @@ var PostsView = Ember.View.extend({
self.send('hideContentPreview'); self.send('hideContentPreview');
}); });
}); });
$('[data-off-canvas]').attr('href', this.get('controller.ghostPaths.blogRoot'));
}); });
}.on('didInsertElement'), }.on('didInsertElement'),
}); });

View File

@ -3,21 +3,19 @@
/*globals CasperTest, casper */ /*globals CasperTest, casper */
CasperTest.begin('Admin navigation bar is correct', 28, function suite(test) { CasperTest.begin('Admin navigation bar is correct', 27, function suite(test) {
casper.thenOpenAndWaitForPageLoad('root', function testTitleAndUrl() { casper.thenOpenAndWaitForPageLoad('root', function testTitleAndUrl() {
test.assertTitle('Ghost Admin', 'Ghost admin has no title'); test.assertTitle('Ghost Admin', 'Ghost admin has no title');
test.assertUrlMatch(/ghost\/\d+\/$/, 'Landed on the correct URL'); test.assertUrlMatch(/ghost\/\d+\/$/, 'Landed on the correct URL');
}); });
casper.then(function testNavItems() { casper.then(function testNavItems() {
var logoHref = this.getElementAttribute('a.ghost-logo', 'href'), var contentHref = this.getElementAttribute('#main-menu li.content a', 'href'),
contentHref = this.getElementAttribute('#main-menu li.content a', 'href'),
editorHref = this.getElementAttribute('#main-menu li.editor a', 'href'), editorHref = this.getElementAttribute('#main-menu li.editor a', 'href'),
settingsHref = this.getElementAttribute('#main-menu li.settings a', 'href'); settingsHref = this.getElementAttribute('#main-menu li.settings a', 'href');
// Logo // Logo
test.assertExists('a.ghost-logo', 'Ghost logo home page link exists'); test.assertExists('button.ghost-logo', 'Ghost logo home page button exists');
test.assertEquals(logoHref, '/', 'Ghost logo href is correct');
// Content // Content
test.assertExists('#main-menu li.content a', 'Content nav item exists'); test.assertExists('#main-menu li.content a', 'Content nav item exists');