mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-20 22:42:53 -05:00
Mobile Interactions
closes #3018 - split clientold mobile interactions into their respective Ember routes/views - create PostsView and SettingsView with mobile interactions - place interactions for the publish bar into ApplicationRoute on init
This commit is contained in:
David Arvelo
parent
e0587ed79b
commit
d236d0a7c3
6 changed files with 181 additions and 61 deletions
|
|
@ -1,9 +1,24 @@
|
|||
import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
|
||||
import mobileUtils from 'ghost/utils/mobile-utils';
|
||||
|
||||
var ApplicationRoute = Ember.Route.extend(ShortcutsRoute, {
|
||||
shortcuts: {
|
||||
'esc': 'closePopups'
|
||||
},
|
||||
|
||||
mobileInteractions: function () {
|
||||
var responsiveAction = mobileUtils.responsiveAction;
|
||||
|
||||
Ember.run.scheduleOnce('afterRender', document, function () {
|
||||
// ### Toggle the sidebar menu
|
||||
$('[data-off-canvas]').on('click', function (event) {
|
||||
responsiveAction(event, '(max-width: 650px)', function () {
|
||||
$('body').toggleClass('off-canvas');
|
||||
});
|
||||
});
|
||||
});
|
||||
}.on('init'),
|
||||
|
||||
actions: {
|
||||
closePopups: function () {
|
||||
this.get('popover').closePopovers();
|
||||
|
|
|
|||
|
|
@ -1,37 +1,35 @@
|
|||
<section class="content-view-container">
|
||||
<section class="content-list js-content-list">
|
||||
<header class="floatingheader">
|
||||
<section class="content-filter">
|
||||
<small>All Posts</small>
|
||||
</section>
|
||||
{{#link-to "editor.new" class="button button-add" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
|
||||
</header>
|
||||
{{#view "content-list-content-view" tagName="section"}}
|
||||
<ol class="posts-list">
|
||||
{{#each itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
|
||||
{{#link-to "posts.post" this class="permalink" title="Edit this post"}}
|
||||
<h3 class="entry-title">{{title}}</h3>
|
||||
<section class="entry-meta">
|
||||
<span class="status">
|
||||
{{#if isPublished}}
|
||||
{{#if page}}
|
||||
<span class="page">Page</span>
|
||||
{{else}}
|
||||
<time datetime="{{unbound published_at}}" class="date published">
|
||||
Published {{gh-format-timeago published_at}}
|
||||
</time>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<span class="draft">Draft</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
</section>
|
||||
{{/link-to}}
|
||||
{{/each}}
|
||||
</ol>
|
||||
{{/view}}
|
||||
</section>
|
||||
<section class="content-preview js-content-preview">
|
||||
{{outlet}}
|
||||
</section>
|
||||
<section class="content-list js-content-list">
|
||||
<header class="floatingheader">
|
||||
<section class="content-filter">
|
||||
<small>All Posts</small>
|
||||
</section>
|
||||
{{#link-to "editor.new" class="button button-add" title="New Post"}}<span class="hidden">New Post</span>{{/link-to}}
|
||||
</header>
|
||||
{{#view "content-list-content-view" tagName="section"}}
|
||||
<ol class="posts-list">
|
||||
{{#each itemController="posts/post" itemView="post-item-view" itemTagName="li"}}
|
||||
{{#link-to "posts.post" this class="permalink" title="Edit this post"}}
|
||||
<h3 class="entry-title">{{title}}</h3>
|
||||
<section class="entry-meta">
|
||||
<span class="status">
|
||||
{{#if isPublished}}
|
||||
{{#if page}}
|
||||
<span class="page">Page</span>
|
||||
{{else}}
|
||||
<time datetime="{{unbound published_at}}" class="date published">
|
||||
Published {{gh-format-timeago published_at}}
|
||||
</time>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<span class="draft">Draft</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
</section>
|
||||
{{/link-to}}
|
||||
{{/each}}
|
||||
</ol>
|
||||
{{/view}}
|
||||
</section>
|
||||
<section class="content-preview js-content-preview">
|
||||
{{outlet}}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,26 @@
|
|||
<div class="wrapper">
|
||||
<aside class="settings-sidebar" role="complementary">
|
||||
<header>
|
||||
<h1 class="title">Settings</h1>
|
||||
</header>
|
||||
<nav class="settings-menu">
|
||||
<ul>
|
||||
{{#view "item-view" tagName="li" class="general"}}
|
||||
{{#link-to "settings.general"}}General{{/link-to}}
|
||||
{{/view}}
|
||||
<aside class="settings-sidebar" role="complementary">
|
||||
<header>
|
||||
<h1 class="title">Settings</h1>
|
||||
</header>
|
||||
<nav class="settings-menu">
|
||||
<ul>
|
||||
{{#view "item-view" tagName="li" class="general"}}
|
||||
{{#link-to "settings.general"}}General{{/link-to}}
|
||||
{{/view}}
|
||||
|
||||
{{#view "item-view" tagName="li" class="users"}}
|
||||
{{#link-to "settings.user"}}User{{/link-to}}
|
||||
{{/view}}
|
||||
{{#view "item-view" tagName="li" class="users"}}
|
||||
{{#link-to "settings.user"}}User{{/link-to}}
|
||||
{{/view}}
|
||||
|
||||
{{#if showApps}}
|
||||
{{#view "item-view" tagName="li" class="apps"}}
|
||||
{{#link-to "settings.apps"}}Apps{{/link-to}}
|
||||
{{/view}}
|
||||
{{/if}}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
{{#if showApps}}
|
||||
{{#view "item-view" tagName="li" class="apps"}}
|
||||
{{#link-to "settings.apps"}}Apps{{/link-to}}
|
||||
{{/view}}
|
||||
{{/if}}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<section class="settings-content active">
|
||||
{{outlet}}
|
||||
</section>
|
||||
</div>
|
||||
<section class="settings-content active">
|
||||
{{outlet}}
|
||||
</section>
|
||||
|
|
|
|||
48
core/client/utils/mobile-utils.js
Normal file
48
core/client/utils/mobile-utils.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/*global DocumentTouch,FastClick*/
|
||||
var hasTouchScreen,
|
||||
smallScreen,
|
||||
initFastClick,
|
||||
responsiveAction;
|
||||
|
||||
// Taken from "Responsive design & the Guardian" with thanks to Matt Andrews
|
||||
// Added !window._phantom so that the functional tests run as though this is not a touch screen.
|
||||
// In future we can do something more advanced here for testing both touch and non touch
|
||||
hasTouchScreen = function () {
|
||||
return !window._phantom &&
|
||||
(
|
||||
('ontouchstart' in window) ||
|
||||
(window.DocumentTouch && document instanceof DocumentTouch)
|
||||
);
|
||||
};
|
||||
|
||||
smallScreen = function () {
|
||||
if (window.matchMedia('(max-width: 1000px)').matches) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
initFastClick = function () {
|
||||
Ember.run.scheduleOnce('afterRender', null, function () {
|
||||
FastClick.attach(document.body);
|
||||
});
|
||||
};
|
||||
|
||||
responsiveAction = function responsiveAction(event, mediaCondition, cb) {
|
||||
if (!window.matchMedia(mediaCondition).matches) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
cb();
|
||||
};
|
||||
|
||||
export { hasTouchScreen, smallScreen };
|
||||
export default {
|
||||
hasTouchScreen: hasTouchScreen,
|
||||
smallScreen: smallScreen,
|
||||
initFastClick: initFastClick,
|
||||
responsiveAction: responsiveAction
|
||||
};
|
||||
30
core/client/views/posts.js
Normal file
30
core/client/views/posts.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import mobileUtils from 'ghost/utils/mobile-utils';
|
||||
|
||||
var PostsView = Ember.View.extend({
|
||||
classNames: ['content-view-container'],
|
||||
tagName: 'section',
|
||||
|
||||
mobileInteractions: function () {
|
||||
var responsiveAction = mobileUtils.responsiveAction;
|
||||
|
||||
Ember.run.scheduleOnce('afterRender', this, function () {
|
||||
// ### Show content preview when swiping left on content list
|
||||
$('.manage').on('click', '.content-list ol li', function (event) {
|
||||
responsiveAction(event, '(max-width: 800px)', function () {
|
||||
$('.content-list').animate({right: '100%', left: '-100%', 'margin-right': '15px'}, 300);
|
||||
$('.content-preview').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
|
||||
});
|
||||
});
|
||||
|
||||
// ### Hide content preview
|
||||
$('.manage').on('click', '.content-preview .button-back', function (event) {
|
||||
responsiveAction(event, '(max-width: 800px)', function () {
|
||||
$('.content-list').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
|
||||
$('.content-preview').animate({right: '-100%', left: '100%', 'margin-left': '15px'}, 300);
|
||||
});
|
||||
});
|
||||
});
|
||||
}.on('didInsertElement'),
|
||||
});
|
||||
|
||||
export default PostsView;
|
||||
31
core/client/views/settings.js
Normal file
31
core/client/views/settings.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import mobileUtils from 'ghost/utils/mobile-utils';
|
||||
|
||||
var SettingsView = Ember.View.extend({
|
||||
classNames: ['wrapper'],
|
||||
|
||||
mobileInteractions: function () {
|
||||
var responsiveAction = mobileUtils.responsiveAction;
|
||||
|
||||
Ember.run.scheduleOnce('afterRender', this, function () {
|
||||
// ### Show settings options page when swiping left on settings menu link
|
||||
$('.settings').on('click', '.settings-menu li', function (event) {
|
||||
responsiveAction(event, '(max-width: 800px)', function () {
|
||||
$('.settings-sidebar').animate({right: '100%', left: '-102%', 'margin-right': '15px'}, 300);
|
||||
$('.settings-content').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
|
||||
$('.settings-content .button-back, .settings-content .button-save').css('display', 'inline-block');
|
||||
});
|
||||
});
|
||||
|
||||
// ### Hide settings options page
|
||||
$('.settings').on('click', '.settings-content .button-back', function (event) {
|
||||
responsiveAction(event, '(max-width: 800px)', function () {
|
||||
$('.settings-sidebar').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
|
||||
$('.settings-content').animate({right: '-100%', left: '100%', 'margin-left': '15'}, 300);
|
||||
$('.settings-content .button-back, .settings-content .button-save').css('display', 'none');
|
||||
});
|
||||
});
|
||||
});
|
||||
}.on('didInsertElement')
|
||||
});
|
||||
|
||||
export default SettingsView;
|
||||
Loading…
Add table
Reference in a new issue