Merge pull request emberjs#9 from serenaf/serena/add-toc

Adding a table of contents component

app/components/table-of-contents.js

@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+import { get, computed } from '@ember/object';
+
+export default Component.extend({
+    elementId: 'toc-list',
+    tagName: 'ol',
+    tocLevel: computed('level', function() {
+      return `level-${get(this, 'level')}`;
+    }),
+    level: '1',
+    sortDefinition: ['since'],
+    sortedGroupedResults: computed.sort('groupedResults', 'sortDefinition')
+});

app/controllers/v2.js

@@ -0,0 +1,21 @@
+import Controller from '@ember/controller';
+import EmberObject, { computed } from '@ember/object';
+
+export default Controller.extend({
+  groupedResults: computed('sortedResults.[]', function() {
+    let result = [];
+    this.get('content').forEach(function(item) {
+      let since = result.findBy('since', item.get('since'));
+      if(!since) {
+         result.pushObject(EmberObject.create({
+            since: item.get('since'),
+            contents: []
+         }));
+      }
+      result.findBy('since', item.get('since')).get('contents').pushObject(item);
+    });
+    return result;
+  }),
+  sortDefinition: ['since'],
+  sortedResults: computed.sort('content.[]', 'sortDefinition')
+});

app/models/content.js

@@ -3,4 +3,6 @@ import DS from 'ember-data';
 export default DS.Model.extend({
   content: DS.attr('string'),
   title: DS.attr('string'),
+  until: DS.attr('string'),
+  since: DS.attr('number')
 });

app/styles/_table_of_content.scss

@@ -0,0 +1,10 @@
+#sidebar ol#toc-list li.level-1 {
+    text-transform: uppercase;
+}
+
+#sidebar ol#toc-list li {
+  font-size: 12px;
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+}

app/templates/application.hbs

@@ -26,15 +26,7 @@
 </header>
 
 <div id="content-wrapper">
-    <div id="sidebar">
-          <ol id='toc-list'>
-</ol>
-
-      <div id="back-to-top"><a id="back-top-top" href="#">&#11014; Back to Top</a></div>
-    </div>
-  <div class="has-sidebar" id="content">
-    {{outlet}}
-  </div>
+  {{outlet}}
 </div>
 
 <div class="footer">

app/templates/components/deprecation-article.hbs

@@ -1,6 +1,6 @@
 <h4>{{model.title}}</h4>
-{{!-- <h6>until: <%= resource.data.until %></h6>
-    <h6>id: <%= resource.data.id %></h6> --}}
+<h6>UNTIL: {{model.until}}</h6>
+<h6>SINCE: {{model.since}}</h6>
 <p>
   {{markdown-to-html model.content}}
 </p>

app/templates/components/table-of-contents.hbs

@@ -0,0 +1,7 @@
+{{#each sortedGroupedResults as |result|}}
+  <li class="level-1">
+    <a class="slide-widget-head" href="#toc toc_deprecations-added-in-ember-2-x">
+      Deprecations added in {{result.since}}
+    </a>
+  </li>
+{{/each}}

app/templates/v2.hbs

@@ -1,8 +1,16 @@
-<h2 class="anchorable-toc" id="toc_deprecations-added-in-ember-2-x"><a class="toc-anchor" href="#toc_deprecations-added-in-ember-2-x"></a>Deprecations Added in Ember 2.x</h2>
-<p>What follows is a list of deprecations introduced to Ember.js during the 2.x
-cycle.</p>
-<p>For more information on deprecations in Ember, see the <a href="/deprecations">main deprecations page</a>.</p>
+<div id="sidebar">
+  {{table-of-contents groupedResults=groupedResults}}
+  <div id="back-to-top"><a id="back-top-top" href="#">&#11014; Back to Top</a></div>
+</div>
 
-{{#each model as |deprecation|}}
-  {{deprecation-article model=deprecation}}
-{{/each}}
+<div class="has-sidebar" id="content">
+
+  <h2 class="anchorable-toc" id="toc_deprecations-added-in-ember-2-x"><a class="toc-anchor" href="#toc_deprecations-added-in-ember-2-x"></a>Deprecations Added in Ember 2.x</h2>
+  <p>What follows is a list of deprecations introduced to Ember.js during the 2.x
+  cycle.</p>
+  <p>For more information on deprecations in Ember, see the <a href="/deprecations">main deprecations page</a>.</p>
+
+  {{#each sortedResults as |deprecation|}}
+    {{deprecation-article model=deprecation}}
+  {{/each}}
+</div>

content/ember/v2/application-instance-container.md

@@ -1,6 +1,6 @@
 ---
 id: ember-application.app-instance-container
-name: Ember.ApplicationInstance#container
+title: Ember.ApplicationInstance#container
 until: 3.0.0
 since: 2.1
 ---

content/ember/v2/application-registry.md

@@ -1,6 +1,6 @@
 ---
 id: ember-application.app-instance-registry
-name: Ember.Application#registry / Ember.ApplicationInstance#registry
+title: Ember.Application#registry / Ember.ApplicationInstance#registry
 until: 3.0.0
 since: 2.1
 ---

content/ember/v2/current-state.md

@@ -1,6 +1,6 @@
 ---
 id: ember-view.current-state
-name: Ember.Component#currentState
+title: Ember.Component#currentState
 until: 2.3.0
 since: 2.1
 ---

content/ember/v2/debug-function-options.md

@@ -1,6 +1,6 @@
 ---
 id: ember-debug.deprecate-options-missing, ember-debug.deprecate-id-missing, ember-debug.deprecate-until-missing, ember-debug.warn-options-missing, ember-debug.warn-id-missing
-name: Ember debug function options
+title: Ember debug function options
 until: 3.0.0
 since: 2.1
 ---

content/ember/v2/default-layout.md

@@ -1,6 +1,6 @@
 ---
 id: ember-views.component.defaultLayout
-name: Ember.Component#defaultLayout
+title: Ember.Component#defaultLayout
 until: 3.0.0
 since: 2.1
 ---

content/ember/v2/ember-backburner.md

@@ -1,6 +1,6 @@
 ---
 id: ember-metal.ember-backburner
-name: Ember.Backburner
+title: Ember.Backburner
 until: 2.8.0
 since: 2.7
 ---

content/ember/v2/ember-binding.md

@@ -1,6 +1,6 @@
 ---
 id: ember-metal.binding
-name: Ember.Binding
+title: Ember.Binding
 until: 3.0.0
 since: 2.7
 ---

content/ember/v2/enumerable-contains.md

@@ -1,6 +1,6 @@
 ---
 id: ember-runtime.enumerable-contains
-name: Enumerable#contains
+title: Enumerable#contains
 until: 3.0.0
 since: 2.8
 ---

content/ember/v2/html-safe.md

@@ -1,6 +1,6 @@
 ---
 id: ember-htmlbars.ember-handlebars-safestring
-name: Use Ember.String.htmlSafe over Ember.Handlebars.SafeString
+title: Use Ember.String.htmlSafe over Ember.Handlebars.SafeString
 until: 3.0.0
 since: 2.8
 ---

content/ember/v2/init-attrs.md

@@ -1,6 +1,6 @@
 ---
 id: ember-views.did-init-attrs
-name: Ember.Component#didInitAttrs
+title: Ember.Component#didInitAttrs
 until: 3.0.0
 since: 2.6
 ---

content/ember/v2/injected-container-access.md

@@ -1,6 +1,6 @@
 ---
 id: ember-application.injected-container
-name: Injected container access
+title: Injected container access
 until: 3.0.0
 since: 2.3
 ---

content/ember/v2/model-params-render.md

@@ -1,6 +1,6 @@
 ---
 id: ember-template-compiler.deprecate-render-model
-name: Model param in render helper
+title: Model param in render helper
 until: 3.0.0
 since: 2.6
 ---

content/ember/v2/render-helper.md

@@ -1,6 +1,6 @@
 ---
 id: ember-template-compiler.deprecate-render-block
-name: render helper with block
+title: render helper with block
 until: 2.4.0
 since: 2.4
 ---

content/ember/v2/test-as-function.md

@@ -1,6 +1,6 @@
 ---
 id: ember-debug.deprecate-test-as-function
-name: Function as test in Ember.deprecate, Ember.warn, Ember.assert
+title: Function as test in Ember.deprecate, Ember.warn, Ember.assert
 until: 2.5.0
 since: 2.2
 ---

tests/integration/components/table-of-contents-test.js

@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('table-of-contents', 'Integration | Component | table of contents', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{table-of-contents}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#table-of-contents}}
+      template block text
+    {{/table-of-contents}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/unit/controllers/v2-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:v2', 'Unit | Controller | v2', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});