From df1c04b8d84b6fe5a937c99627421221e4212419 Mon Sep 17 00:00:00 2001 From: Matt Enlow Date: Sat, 13 Jun 2015 10:53:43 -0700 Subject: [PATCH] Remove legacy mobile view logic No issue - Move editor-base-view mixin into editor/edit view - Also deletes mobile views and modifies files that were using it - Helps pave the way for Ember 2.0, where views do not exist --- core/client/app/mixins/editor-base-view.js | 60 ------------------ core/client/app/styles/layouts/content.css | 8 --- core/client/app/templates/posts.hbs | 2 + core/client/app/views/editor/edit.js | 61 +++++++++++++++++-- core/client/app/views/editor/new.js | 9 +-- core/client/app/views/mobile/content-view.js | 16 ----- core/client/app/views/mobile/index-view.js | 13 ---- core/client/app/views/mobile/parent-view.js | 34 ----------- core/client/app/views/posts.js | 19 ------ core/client/app/views/posts/index.js | 4 +- core/client/app/views/posts/post.js | 5 -- .../client/app/views/settings/content-base.js | 13 ++-- core/test/functional/client/content_test.js | 2 +- core/test/functional/client/settings_test.js | 2 +- 14 files changed, 70 insertions(+), 178 deletions(-) delete mode 100644 core/client/app/mixins/editor-base-view.js delete mode 100644 core/client/app/views/mobile/content-view.js delete mode 100644 core/client/app/views/mobile/index-view.js delete mode 100644 core/client/app/views/mobile/parent-view.js delete mode 100644 core/client/app/views/posts.js delete mode 100644 core/client/app/views/posts/post.js diff --git a/core/client/app/mixins/editor-base-view.js b/core/client/app/mixins/editor-base-view.js deleted file mode 100644 index 1a241c0c20a6..000000000000 --- a/core/client/app/mixins/editor-base-view.js +++ /dev/null @@ -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; diff --git a/core/client/app/styles/layouts/content.css b/core/client/app/styles/layouts/content.css index 5116c9d8338f..f2ab80b1b10d 100644 --- a/core/client/app/styles/layouts/content.css +++ b/core/client/app/styles/layouts/content.css @@ -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? /* ---------------------------------------------------------- */ diff --git a/core/client/app/templates/posts.hbs b/core/client/app/templates/posts.hbs index 6d6201a7eb3b..c011baf4faa1 100644 --- a/core/client/app/templates/posts.hbs +++ b/core/client/app/templates/posts.hbs @@ -1,3 +1,4 @@ +

Content

@@ -40,3 +41,4 @@ {{outlet}}
+
diff --git a/core/client/app/views/editor/edit.js b/core/client/app/views/editor/edit.js index 906fad10a827..386eb40a7aac 100644 --- a/core/client/app/views/editor/edit.js +++ b/core/client/app/views/editor/edit.js @@ -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; diff --git a/core/client/app/views/editor/new.js b/core/client/app/views/editor/new.js index 7d90aa60c016..b91e38d8b660 100644 --- a/core/client/app/views/editor/new.js +++ b/core/client/app/views/editor/new.js @@ -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; diff --git a/core/client/app/views/mobile/content-view.js b/core/client/app/views/mobile/content-view.js deleted file mode 100644 index 3ca4eba90659..000000000000 --- a/core/client/app/views/mobile/content-view.js +++ /dev/null @@ -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; diff --git a/core/client/app/views/mobile/index-view.js b/core/client/app/views/mobile/index-view.js deleted file mode 100644 index 82392e850bcd..000000000000 --- a/core/client/app/views/mobile/index-view.js +++ /dev/null @@ -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; diff --git a/core/client/app/views/mobile/parent-view.js b/core/client/app/views/mobile/parent-view.js deleted file mode 100644 index a46a436c9bee..000000000000 --- a/core/client/app/views/mobile/parent-view.js +++ /dev/null @@ -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; diff --git a/core/client/app/views/posts.js b/core/client/app/views/posts.js deleted file mode 100644 index 2bcbb6cee77e..000000000000 --- a/core/client/app/views/posts.js +++ /dev/null @@ -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; diff --git a/core/client/app/views/posts/index.js b/core/client/app/views/posts/index.js index 9f8dd9e36a45..8226f8b32ddf 100644 --- a/core/client/app/views/posts/index.js +++ b/core/client/app/views/posts/index.js @@ -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'] }); diff --git a/core/client/app/views/posts/post.js b/core/client/app/views/posts/post.js deleted file mode 100644 index 97a9eba085b9..000000000000 --- a/core/client/app/views/posts/post.js +++ /dev/null @@ -1,5 +0,0 @@ -import MobileContentView from 'ghost/views/mobile/content-view'; - -var PostsPostView = MobileContentView.extend(); - -export default PostsPostView; diff --git a/core/client/app/views/settings/content-base.js b/core/client/app/views/settings/content-base.js index 47112bad1d59..8dcc80b5ff5b 100644 --- a/core/client/app/views/settings/content-base.js +++ b/core/client/app/views/settings/content-base.js @@ -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; diff --git a/core/test/functional/client/content_test.js b/core/test/functional/client/content_test.js index 5cddcea53c03..994de07e487f 100644 --- a/core/test/functional/client/content_test.js +++ b/core/test/functional/client/content_test.js @@ -14,7 +14,7 @@ CasperTest.begin('Content screen is correct', 15, function suite(test) { }); casper.then(function testViews() { - test.assertExists('.content-view-container', 'Content main view is present'); + test.assertExists('.gh-main .gh-view', 'Content main view is present'); test.assertExists('.content-list-content', 'Content list view is present'); test.assertExists('.gh-nav-main-editor', 'add new post button exists'); test.assertEquals( diff --git a/core/test/functional/client/settings_test.js b/core/test/functional/client/settings_test.js index 31646eeecd4b..6540fc391586 100644 --- a/core/test/functional/client/settings_test.js +++ b/core/test/functional/client/settings_test.js @@ -15,7 +15,7 @@ CasperTest.begin('Settings screen is correct', 9, function suite(test) { }); casper.then(function testViews() { - test.assertExists('.js-settings-content', 'Settings content view is present'); + test.assertExists('.gh-main .gh-view', 'Settings content view is present'); test.assertExists(generalTabDetector, 'Form is present'); test.assertSelectorHasText('.view-title', 'General', 'Title is "General"'); });