Merge pull request #15 from elwayman02/collapsible

Collapsible Posts

README.md

@@ -86,6 +86,50 @@ export default Ember.Route.extend({
 {{tumblr-post-text post=model}}
 ```
 
+### Collapsible Posts
+
+Ember-Tumblr supports collapsible posts, via class styles you can implement. To activate this feature, set `collapsible` to true (defaults to false).
+
+```handlebars
+<!-- templates/blog.hbs -->
+{{tumblr-blog
+  posts=model
+  collapsible=true}}
+```
+
+This will add a `.tumblr-post-collapsed` class to all posts by default, and a button at the bottom of the post that allows users to toggle the collapse (removing the class). 
+To implement styles for the collapse, you could add something like this to your project:
+
+```
+<!-- styles/blog.scss -->
+.tumblr-post {
+  &.tumblr-post-collapsed {
+    .tumblr-body {
+      max-height: 300px;
+      overflow: hidden;
+    }
+  }
+}
+```
+
+If you want posts to be expanded by default but still be collapsible, just set `collapseByDefault` to false (defaults to true, only used if `collapsible` is also true).
+
+```handlebars
+<!-- templates/blog.hbs -->
+{{tumblr-blog
+  posts=model
+  collapsible=true
+  collapseByDefault=false}}
+```
+
+If you are using the `tumblr-post` component (or any of its derivatives) and want it to be `collapsible`, you can set the property there, too.
+
+```handlebars
+{{tumblr-post
+  post=model
+  collapsible=true <!-- allows the post to be collapsed -->
+  collapsed=false}} <!-- overrides the default to make it expanded when rendered -->
+
 ## Contributing To Ember-Tumblr
 
 ### Installation

addon/components/tumblr-blog.js

@@ -2,5 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   classNames: ['tumblr-blog'],
-  postsRoute: null
+  postsRoute: null,
+  collapsible: false,
+  collapseByDefault: true
 });

addon/components/tumblr-post.js

@@ -2,5 +2,25 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   classNames: ['tumblr-post'],
-  postsRoute: null
+  classNameBindings: ['isCollapsed:tumblr-post-collapsed'],
+  postsRoute: null,
+  collapsible: false,
+  collapsed: true,
+
+  collapsedText: 'View More',
+  expandedText: 'Collapse Post',
+
+  isCollapsed: Ember.computed('collapsible', 'collapsed', function () {
+    return this.get('collapsible') && this.get('collapsed');
+  }),
+
+  expandButtonText: Ember.computed('isCollapsed', 'collapsedText', 'expandedText', function () {
+    return this.get('isCollapsed') ? this.get('collapsedText') : this.get('expandedText');
+  }),
+
+  actions: {
+    expand() {
+      this.toggleProperty('collapsed');
+    }
+  }
 });

app/templates/components/tumblr-blog.hbs

@@ -1,5 +1,21 @@
 {{#each posts as |post|}}
-  {{tumblr-post
+  {{#if collapsible}}
+    {{#if collapseByDefault}}
+      {{tumblr-post
+      post=post
+      postsRoute=postsRoute
+      collapsible=true
+      collapsed=true}}
+    {{else}}
+      {{tumblr-post
+      post=post
+      postsRoute=postsRoute
+      collapsible=true
+      collapsed=false}}
+    {{/if}}
+  {{else}}
+    {{tumblr-post
     post=post
     postsRoute=postsRoute}}
+  {{/if}}
 {{/each}}

app/templates/components/tumblr-post-text.hbs

@@ -12,4 +12,8 @@
 
 <div class="tumblr-body">
   {{{post.body}}}
-</div>
+</div>
+
+{{#if collapsible}}
+  <button {{action 'expand'}} class="tumblr-expand-button">{{expandButtonText}}</button>
+{{/if}}

app/templates/components/tumblr-post.hbs

@@ -1,3 +1,5 @@
 {{tumblr-post-text
   post=post
-  postsRoute=postsRoute}}
+  postsRoute=postsRoute
+  collapsible=collapsible
+  collapsed=collapsed}}

tests/dummy/app/router.js

@@ -9,6 +9,8 @@ Router.map(function() {
   this.route('index', { path: '/' });
   this.route('blog');
   this.route('linked-blog');
+  this.route('collapsed-blog');
+  this.route('uncollapsed-blog');
   this.route('post', { path: '/posts/:post_id' });
 });
 

tests/dummy/app/routes/collapsed-blog.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model() {
+    return this.store.find('tumblr-post-text');
+  }
+});

tests/dummy/app/routes/uncollapsed-blog.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model() {
+    return this.store.find('tumblr-post-text');
+  }
+});

tests/dummy/app/styles/app.css

@@ -0,0 +1,10 @@
+.index button {
+  display: block;
+  padding: 10px;
+  margin-bottom: 5px;
+}
+
+.tumblr-post.tumblr-post-collapsed .tumblr-body {
+  max-height: 300px;
+  overflow: hidden;
+}

tests/dummy/app/templates/collapsed-blog.hbs

@@ -0,0 +1,6 @@
+<h1>Welcome to my blog!</h1>
+
+{{tumblr-blog
+  posts=model.content
+  postsRoute='post'
+  collapsible=true}}

tests/dummy/app/templates/index.hbs

@@ -1,5 +1,8 @@
 <h1>Ember-Tumblr Demo App</h1>
 
-<div><button>{{#link-to 'blog'}}Click to View Blog{{/link-to}}</button></div>
-<div><button>{{#link-to 'linked-blog'}}Click to View Blog With Links{{/link-to}}</button></div>
-
+<div class="index">
+  {{#link-to 'blog'}}<button>View Blog</button>{{/link-to}}
+  {{#link-to 'linked-blog'}}<button>View Blog With Links</button>{{/link-to}}
+  {{#link-to 'collapsed-blog'}}<button>View Blog With Collapsible Posts (Already Collapsed)</button>{{/link-to}}
+  {{#link-to 'uncollapsed-blog'}}<button>View Blog With Collapsible Posts (Uncollapsed by Default)</button>{{/link-to}}
+</div>

tests/dummy/app/templates/uncollapsed-blog.hbs

@@ -0,0 +1,7 @@
+<h1>Welcome to my blog!</h1>
+
+{{tumblr-blog
+  posts=model.content
+  postsRoute='post'
+  collapsible=true
+  collapseByDefault=false}}

tests/unit/components/tumblr-blog-test.js

@@ -0,0 +1,27 @@
+import Ember from 'ember';
+import { moduleForComponent, test } from 'ember-qunit';
+
+moduleForComponent('tumblr-blog', 'Unit | Component | tumblr blog', {
+  needs: ['component:tumblr-post'],
+  unit: true
+});
+
+test('it renders', function (assert) {
+  assert.expect(2);
+
+  // Creates the component instance
+  const component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // Renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});
+
+test('defaults', function (assert) {
+  const component = this.subject();
+
+  assert.ok(!Ember.isPresent(component.get('postsRoute')), 'postsRoute is not defined by default');
+  assert.ok(!component.get('collapsible'), 'blog is not collapsible by default');
+  assert.ok(component.get('collapseByDefault'), 'blog is set to collapse by default if collapsible');
+});

tests/unit/components/tumblr-post-test.js

@@ -1,20 +1,52 @@
+import Ember from 'ember';
 import { moduleForComponent, test } from 'ember-qunit';
 
 moduleForComponent('tumblr-post', 'Unit | Component | tumblr post', {
-  // Specify the other units that are required for this test
-  // needs: ['component:foo', 'helper:bar'],
   needs: ['component:tumblr-post-text'],
   unit: true
 });
 
-test('it renders', function(assert) {
+test('it renders', function (assert) {
   assert.expect(2);
 
   // Creates the component instance
-  var component = this.subject();
+  const component = this.subject();
   assert.equal(component._state, 'preRender');
 
   // Renders the component to the page
   this.render();
   assert.equal(component._state, 'inDOM');
 });
+
+test('defaults', function (assert) {
+  const component = this.subject();
+
+  assert.ok(!Ember.isPresent(component.get('postsRoute')), 'postsRoute is not defined by default');
+  assert.ok(!component.get('collapsible'), 'post is not collapsible by default');
+  assert.ok(component.get('collapsed'), 'post is set to collapse by default if collapsible');
+  assert.ok(!component.get('isCollapsed'), 'post will not collapse by default, because it is not collapsible');
+});
+
+test('isCollapsed', function (assert) {
+  const component = this.subject();
+
+  component.set('collapsible', true);
+  assert.ok(component.get('isCollapsed'), 'post is collapsed by default when collapsible');
+
+  component.set('collapsed', false);
+  assert.ok(!component.get('isCollapsed'), 'post is not collapsed');
+});
+
+test('expandButtonText', function (assert) {
+  const collapsedText = 'foo';
+  const expandedText = 'bar';
+  const component = this.subject({
+    collapsedText,
+    expandedText
+  });
+
+  assert.equal(component.get('expandButtonText'), expandedText, 'expandedText is displayed by default');
+
+  component.set('collapsible', true);
+  assert.equal(component.get('expandButtonText'), collapsedText, 'collapsedText is displayed when collapsed');
+});