Merge pull request #2907 from appleYaks/shadows

Add shadows to PostsListView and the adjacent HTML Preview; Fix preview

core/client/templates/posts/post.hbs

@@ -1,13 +1,13 @@
 {{#if title}}
 
-  {{partial "floating-header"}}
+    {{partial "floating-header"}}
 
-  <section class="content-preview-content">
+    {{#view "content-preview-content-view" tagName="section"}}
-      <div class="wrapper">
+        <div class="wrapper">
-          <h1>{{{title}}}</h1>
+            <h1>{{{title}}}</h1>
-          {{{html}}}
+            {{{html}}}
-      </div>
+        </div>
-  </section>
+    {{/view}}
 
 {{else}}
 

core/client/utils/set-scroll-classname.js

@@ -0,0 +1,19 @@
+// ## scrollShadow
+// This adds a 'scroll' class to the targeted element when the element is scrolled
+// `this` is expected to be a jQuery-wrapped element
+// **target:** The element in which the class is applied. Defaults to scrolled element.
+// **class-name:** The class which is applied.
+// **offset:** How far the user has to scroll before the class is applied.
+var setScrollClassName = function (options) {
+    var $target = options.target || this,
+        offset = options.offset,
+        className = options.className || 'scrolling';
+
+    if (this.scrollTop() > offset) {
+        $target.addClass(className);
+    } else {
+        $target.removeClass(className);
+    }
+};
+
+export default setScrollClassName;

core/client/views/content-list-content-view.js

@@ -1,3 +1,5 @@
+import setScrollClassName from 'ghost/utils/set-scroll-classname';
+
 var PostsListView = Ember.View.extend({
     classNames: ['content-list-content'],
 
@@ -17,12 +19,16 @@ var PostsListView = Ember.View.extend({
 
     didInsertElement: function () {
         var el = this.$();
-        el.bind('scroll', Ember.run.bind(this, this.checkScroll));
+        el.on('scroll', Ember.run.bind(this, this.checkScroll));
+        el.on('scroll', Ember.run.bind(el, setScrollClassName, {
+            target: el.closest('.content-list'),
+            offset: 10
+        }));
     },
 
     willDestroyElement: function () {
         var el = this.$();
-        el.unbind('scroll');
+        el.off('scroll');
     }
 });
 

core/client/views/content-preview-content-view.js

@@ -0,0 +1,20 @@
+import setScrollClassName from 'ghost/utils/set-scroll-classname';
+
+var PostContentView = Ember.View.extend({
+    classNames: ['content-preview-content'],
+
+    didInsertElement: function () {
+        var el = this.$();
+        el.on('scroll', Ember.run.bind(el, setScrollClassName, {
+            target: el.closest('.content-preview'),
+            offset: 10
+        }));
+    },
+
+    willDestroyElement: function () {
+        var el = this.$();
+        el.off('scroll');
+    }
+});
+
+export default PostContentView;