From 8c3970c9baf03d435ffa9094af5691c30a3751c6 Mon Sep 17 00:00:00 2001
From: David Arvelo <david@davidarvelo.com>
Date: Sat, 7 Jun 2014 15:07:25 -0400
Subject: [PATCH] Add shadows to PostsListView and the adjacent HTML Preview;
 Fix preview render

closes #2906
- add a utility function to add classnames to targets, retrofitted from clientold to accommodate `Ember.run.bind`
- create a content-preview view that tracks its scrolling
- add a scroll handler to the existing PostsListView
- The `posts/post` template now takes its HTML from the post model instead of using the editor's markdown component
---
 core/client/templates/posts/post.hbs          | 14 ++++++-------
 core/client/utils/set-scroll-classname.js     | 19 ++++++++++++++++++
 .../client/views/content-list-content-view.js | 10 ++++++++--
 .../views/content-preview-content-view.js     | 20 +++++++++++++++++++
 4 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 core/client/utils/set-scroll-classname.js
 create mode 100644 core/client/views/content-preview-content-view.js

diff --git a/core/client/templates/posts/post.hbs b/core/client/templates/posts/post.hbs
index 422c231da1..9a6713e93e 100644
--- a/core/client/templates/posts/post.hbs
+++ b/core/client/templates/posts/post.hbs
@@ -1,13 +1,13 @@
 {{#if title}}
 
-  {{partial "floating-header"}}
+    {{partial "floating-header"}}
 
-  <section class="content-preview-content">
-      <div class="wrapper">
-          <h1>{{{title}}}</h1>
-          {{{html}}}
-      </div>
-  </section>
+    {{#view "content-preview-content-view" tagName="section"}}
+        <div class="wrapper">
+            <h1>{{{title}}}</h1>
+            {{{html}}}
+        </div>
+    {{/view}}
 
 {{else}}
 
diff --git a/core/client/utils/set-scroll-classname.js b/core/client/utils/set-scroll-classname.js
new file mode 100644
index 0000000000..f85e679fe6
--- /dev/null
+++ b/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;
diff --git a/core/client/views/content-list-content-view.js b/core/client/views/content-list-content-view.js
index 2cd97c4ef3..0ed10f257e 100644
--- a/core/client/views/content-list-content-view.js
+++ b/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');
     }
 });
 
diff --git a/core/client/views/content-preview-content-view.js b/core/client/views/content-preview-content-view.js
new file mode 100644
index 0000000000..d2c6910614
--- /dev/null
+++ b/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;