mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-23 22:11:09 +03:00
Merge pull request #5408 from novaugust/cleanup-mobile-views
Remove legacy mobile view code
This commit is contained in:
Jason Williams
commit
3448dcc8c5
@ -1,60 +0,0 @@
|
||||
import Ember from 'ember';
|
||||
import setScrollClassName from 'ghost/utils/set-scroll-classname';
|
||||
|
||||
var EditorViewMixin = Ember.Mixin.create({
|
||||
// create a hook for jQuery logic that will run after
|
||||
// a view and all child views have been rendered,
|
||||
// since didInsertElement runs only when the view's el
|
||||
// has rendered, and not necessarily all child views.
|
||||
//
|
||||
// http://mavilein.github.io/javascript/2013/08/01/Ember-JS-After-Render-Event/
|
||||
// http://emberjs.com/api/classes/Ember.run.html#method_next
|
||||
scheduleAfterRender: function () {
|
||||
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
|
||||
}.on('didInsertElement'),
|
||||
|
||||
// all child views will have rendered when this fires
|
||||
afterRenderEvent: function () {
|
||||
var $previewViewPort = this.$('.js-entry-preview-content');
|
||||
|
||||
// cache these elements for use in other methods
|
||||
this.set('$previewViewPort', $previewViewPort);
|
||||
this.set('$previewContent', this.$('.js-rendered-markdown'));
|
||||
|
||||
$previewViewPort.on('scroll', Ember.run.bind($previewViewPort, setScrollClassName, {
|
||||
target: this.$('.js-entry-preview'),
|
||||
offset: 10
|
||||
}));
|
||||
},
|
||||
|
||||
removeScrollHandlers: function () {
|
||||
this.get('$previewViewPort').off('scroll');
|
||||
}.on('willDestroyElement'),
|
||||
|
||||
// updated when gh-ed-editor component scrolls
|
||||
editorScrollInfo: null,
|
||||
// updated when markdown is rendered
|
||||
height: null,
|
||||
|
||||
// HTML Preview listens to scrollPosition and updates its scrollTop value
|
||||
// This property receives scrollInfo from the textEditor, and height from the preview pane, and will update the
|
||||
// scrollPosition value such that when either scrolling or typing-at-the-end of the text editor the preview pane
|
||||
// stays in sync
|
||||
scrollPosition: Ember.computed('editorScrollInfo', 'height', function () {
|
||||
if (!this.get('editorScrollInfo')) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
var scrollInfo = this.get('editorScrollInfo'),
|
||||
previewHeight = this.get('$previewContent').height() - this.get('$previewViewPort').height(),
|
||||
previewPosition,
|
||||
ratio;
|
||||
|
||||
ratio = previewHeight / scrollInfo.diff;
|
||||
previewPosition = scrollInfo.top * ratio;
|
||||
|
||||
return previewPosition;
|
||||
})
|
||||
});
|
||||
|
||||
export default EditorViewMixin;
|
||||
@ -1,12 +1,4 @@
|
||||
/* Content /ghost/
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.content-view-container {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Show/Hide on Mobile // TODO: What the fuck does that mean?
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
<section class="gh-view content-view-container">
|
||||
<header class="view-header">
|
||||
{{#gh-view-title openMobileMenu="openMobileMenu"}}Content{{/gh-view-title}}
|
||||
<section class="view-actions">
|
||||
@ -40,3 +41,4 @@
|
||||
{{outlet}}
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,9 +1,62 @@
|
||||
import Ember from 'ember';
|
||||
import EditorViewMixin from 'ghost/mixins/editor-base-view';
|
||||
import setScrollClassName from 'ghost/utils/set-scroll-classname';
|
||||
|
||||
var EditorView = Ember.View.extend(EditorViewMixin, {
|
||||
var EditorViewMixin = Ember.View.extend({
|
||||
tagName: 'section',
|
||||
classNames: ['gh-view']
|
||||
classNames: ['gh-view'],
|
||||
// create a hook for jQuery logic that will run after
|
||||
// a view and all child views have been rendered,
|
||||
// since didInsertElement runs only when the view's el
|
||||
// has rendered, and not necessarily all child views.
|
||||
//
|
||||
// http://mavilein.github.io/javascript/2013/08/01/Ember-JS-After-Render-Event/
|
||||
// http://emberjs.com/api/classes/Ember.run.html#method_next
|
||||
scheduleAfterRender: function () {
|
||||
Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
|
||||
}.on('didInsertElement'),
|
||||
|
||||
// all child views will have rendered when this fires
|
||||
afterRenderEvent: function () {
|
||||
var $previewViewPort = this.$('.js-entry-preview-content');
|
||||
|
||||
// cache these elements for use in other methods
|
||||
this.set('$previewViewPort', $previewViewPort);
|
||||
this.set('$previewContent', this.$('.js-rendered-markdown'));
|
||||
|
||||
$previewViewPort.on('scroll', Ember.run.bind($previewViewPort, setScrollClassName, {
|
||||
target: this.$('.js-entry-preview'),
|
||||
offset: 10
|
||||
}));
|
||||
},
|
||||
|
||||
removeScrollHandlers: function () {
|
||||
this.get('$previewViewPort').off('scroll');
|
||||
}.on('willDestroyElement'),
|
||||
|
||||
// updated when gh-ed-editor component scrolls
|
||||
editorScrollInfo: null,
|
||||
// updated when markdown is rendered
|
||||
height: null,
|
||||
|
||||
// HTML Preview listens to scrollPosition and updates its scrollTop value
|
||||
// This property receives scrollInfo from the textEditor, and height from the preview pane, and will update the
|
||||
// scrollPosition value such that when either scrolling or typing-at-the-end of the text editor the preview pane
|
||||
// stays in sync
|
||||
scrollPosition: Ember.computed('editorScrollInfo', 'height', function () {
|
||||
if (!this.get('editorScrollInfo')) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
var scrollInfo = this.get('editorScrollInfo'),
|
||||
previewHeight = this.get('$previewContent').height() - this.get('$previewViewPort').height(),
|
||||
previewPosition,
|
||||
ratio;
|
||||
|
||||
ratio = previewHeight / scrollInfo.diff;
|
||||
previewPosition = scrollInfo.top * ratio;
|
||||
|
||||
return previewPosition;
|
||||
})
|
||||
});
|
||||
|
||||
export default EditorView;
|
||||
export default EditorViewMixin;
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
import Ember from 'ember';
|
||||
import EditorViewMixin from 'ghost/mixins/editor-base-view';
|
||||
import EditorView from 'ghost/views/editor/edit';
|
||||
|
||||
var EditorNewView = Ember.View.extend(EditorViewMixin, {
|
||||
tagName: 'section',
|
||||
templateName: 'editor/edit',
|
||||
classNames: ['gh-view']
|
||||
var EditorNewView = EditorView.extend({
|
||||
templateName: 'editor/edit'
|
||||
});
|
||||
|
||||
export default EditorNewView;
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
import Ember from 'ember';
|
||||
import mobileQuery from 'ghost/utils/mobile';
|
||||
|
||||
var MobileContentView = Ember.View.extend({
|
||||
// Ensure that loading this view brings it into view on mobile
|
||||
showContent: function () {
|
||||
if (mobileQuery.matches) {
|
||||
var parent = this.get('parentView');
|
||||
if (parent.showContent) {
|
||||
parent.showContent();
|
||||
}
|
||||
}
|
||||
}.on('didInsertElement')
|
||||
});
|
||||
|
||||
export default MobileContentView;
|
||||
@ -1,13 +0,0 @@
|
||||
import Ember from 'ember';
|
||||
import mobileQuery from 'ghost/utils/mobile';
|
||||
|
||||
var MobileIndexView = Ember.View.extend({
|
||||
// Ensure that going to the index brings the menu into view on mobile.
|
||||
showMenu: function () {
|
||||
if (mobileQuery.matches) {
|
||||
this.get('parentView').showMenu();
|
||||
}
|
||||
}.on('didInsertElement')
|
||||
});
|
||||
|
||||
export default MobileIndexView;
|
||||
@ -1,34 +0,0 @@
|
||||
import Ember from 'ember';
|
||||
import mobileQuery from 'ghost/utils/mobile';
|
||||
|
||||
// A mobile parent view needs to implement three methods,
|
||||
// showContent, showAll, and showMenu
|
||||
// Which are called by MobileIndex and MobileContent views
|
||||
var MobileParentView = Ember.View.extend({
|
||||
showContent: Ember.K,
|
||||
showMenu: Ember.K,
|
||||
showAll: Ember.K,
|
||||
|
||||
setChangeLayout: function () {
|
||||
var self = this;
|
||||
this.set('changeLayout', function changeLayout() {
|
||||
if (mobileQuery.matches) {
|
||||
// transitioned to mobile layout, so show content
|
||||
self.showContent();
|
||||
} else {
|
||||
// went from mobile to desktop
|
||||
self.showAll();
|
||||
}
|
||||
});
|
||||
}.on('init'),
|
||||
|
||||
attachChangeLayout: function () {
|
||||
mobileQuery.addListener(this.changeLayout);
|
||||
}.on('didInsertElement'),
|
||||
|
||||
detachChangeLayout: function () {
|
||||
mobileQuery.removeListener(this.changeLayout);
|
||||
}.on('willDestroyElement')
|
||||
});
|
||||
|
||||
export default MobileParentView;
|
||||
@ -1,19 +0,0 @@
|
||||
import MobileParentView from 'ghost/views/mobile/parent-view';
|
||||
|
||||
var PostsView = MobileParentView.extend({
|
||||
classNames: ['content-view-container'],
|
||||
tagName: 'section',
|
||||
|
||||
// Mobile parent view callbacks
|
||||
showMenu: function () {
|
||||
$('.js-content-list, .js-content-preview').addClass('show-menu').removeClass('show-content');
|
||||
},
|
||||
showContent: function () {
|
||||
$('.js-content-list, .js-content-preview').addClass('show-content').removeClass('show-menu');
|
||||
},
|
||||
showAll: function () {
|
||||
$('.js-content-list, .js-content-preview').removeClass('show-menu show-content');
|
||||
}
|
||||
});
|
||||
|
||||
export default PostsView;
|
||||
@ -1,6 +1,6 @@
|
||||
import MobileIndexView from 'ghost/views/mobile/index-view';
|
||||
import Ember from 'ember';
|
||||
|
||||
var PostsIndexView = MobileIndexView.extend({
|
||||
var PostsIndexView = Ember.View.extend({
|
||||
classNames: ['no-posts-box']
|
||||
});
|
||||
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
import MobileContentView from 'ghost/views/mobile/content-view';
|
||||
|
||||
var PostsPostView = MobileContentView.extend();
|
||||
|
||||
export default PostsPostView;
|
||||
@ -1,13 +1,8 @@
|
||||
import MobileContentView from 'ghost/views/mobile/content-view';
|
||||
/**
|
||||
* All settings views other than the index should inherit from this base class.
|
||||
* It ensures that the correct screen is showing when a mobile user navigates
|
||||
* to a `settings.someRouteThatIsntIndex` route.
|
||||
*/
|
||||
import Ember from 'ember';
|
||||
|
||||
var SettingsContentBaseView = MobileContentView.extend({
|
||||
var SettingsView = Ember.View.extend({
|
||||
tagName: 'section',
|
||||
classNames: ['gh-view', 'js-settings-content']
|
||||
classNames: ['gh-view']
|
||||
});
|
||||
|
||||
export default SettingsContentBaseView;
|
||||
export default SettingsView;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user