Add collection lists

Author: jgthms

_includes/collections/animations-list.html

@@ -0,0 +1 @@
+<li><a href="{{site.url}}/#animation-delay" data-property-name="animation-delay">animation-delay</a></li><li><a href="{{site.url}}/#animation-direction" data-property-name="animation-direction">animation-direction</a></li><li><a href="{{site.url}}/#animation-duration" data-property-name="animation-duration">animation-duration</a></li><li><a href="{{site.url}}/#animation-fill-mode" data-property-name="animation-fill-mode">animation-fill-mode</a></li><li><a href="{{site.url}}/#animation-iteration-count" data-property-name="animation-iteration-count">animation-iteration-count</a></li><li><a href="{{site.url}}/#animation-name" data-property-name="animation-name">animation-name</a></li><li><a href="{{site.url}}/#animation-play-state" data-property-name="animation-play-state">animation-play-state</a></li><li><a href="{{site.url}}/#animation-timing-function" data-property-name="animation-timing-function">animation-timing-function</a></li><li><a href="{{site.url}}/#animation" data-property-name="animation">animation</a></li>

_includes/collections/box-model-list.html

@@ -0,0 +1 @@
+<li><a href="{{site.url}}/#border-bottom-width" data-property-name="border-bottom-width">border-bottom-width</a></li><li><a href="{{site.url}}/#border-left-width" data-property-name="border-left-width">border-left-width</a></li><li><a href="{{site.url}}/#border-right-width" data-property-name="border-right-width">border-right-width</a></li><li><a href="{{site.url}}/#border-top-width" data-property-name="border-top-width">border-top-width</a></li><li><a href="{{site.url}}/#border-width" data-property-name="border-width">border-width</a></li><li><a href="{{site.url}}/#box-sizing" data-property-name="box-sizing">box-sizing</a></li><li><a href="{{site.url}}/#height" data-property-name="height">height</a></li><li><a href="{{site.url}}/#line-height" data-property-name="line-height">line-height</a></li><li><a href="{{site.url}}/#margin-bottom" data-property-name="margin-bottom">margin-bottom</a></li><li><a href="{{site.url}}/#margin-left" data-property-name="margin-left">margin-left</a></li><li><a href="{{site.url}}/#margin-right" data-property-name="margin-right">margin-right</a></li><li><a href="{{site.url}}/#margin-top" data-property-name="margin-top">margin-top</a></li><li><a href="{{site.url}}/#margin" data-property-name="margin">margin</a></li><li><a href="{{site.url}}/#max-height" data-property-name="max-height">max-height</a></li><li><a href="{{site.url}}/#max-width" data-property-name="max-width">max-width</a></li><li><a href="{{site.url}}/#min-height" data-property-name="min-height">min-height</a></li><li><a href="{{site.url}}/#min-width" data-property-name="min-width">min-width</a></li><li><a href="{{site.url}}/#padding-bottom" data-property-name="padding-bottom">padding-bottom</a></li><li><a href="{{site.url}}/#padding-left" data-property-name="padding-left">padding-left</a></li><li><a href="{{site.url}}/#padding-right" data-property-name="padding-right">padding-right</a></li><li><a href="{{site.url}}/#padding-top" data-property-name="padding-top">padding-top</a></li><li><a href="{{site.url}}/#padding" data-property-name="padding">padding</a></li><li><a href="{{site.url}}/#width" data-property-name="width">width</a></li>

_includes/collections/flexbox-list.html

@@ -0,0 +1 @@
+<li><a href="{{site.url}}/#align-content" data-property-name="align-content">align-content</a></li><li><a href="{{site.url}}/#align-items" data-property-name="align-items">align-items</a></li><li><a href="{{site.url}}/#align-self" data-property-name="align-self">align-self</a></li><li><a href="{{site.url}}/#flex-basis" data-property-name="flex-basis">flex-basis</a></li><li><a href="{{site.url}}/#flex-direction" data-property-name="flex-direction">flex-direction</a></li><li><a href="{{site.url}}/#flex-flow" data-property-name="flex-flow">flex-flow</a></li><li><a href="{{site.url}}/#flex-grow" data-property-name="flex-grow">flex-grow</a></li><li><a href="{{site.url}}/#flex-shrink" data-property-name="flex-shrink">flex-shrink</a></li><li><a href="{{site.url}}/#flex-wrap" data-property-name="flex-wrap">flex-wrap</a></li><li><a href="{{site.url}}/#justify-content" data-property-name="justify-content">justify-content</a></li><li><a href="{{site.url}}/#order" data-property-name="order">order</a></li>

_includes/collections/positioning-list.html

@@ -0,0 +1 @@
+<li><a href="{{site.url}}/#bottom" data-property-name="bottom">bottom</a></li><li><a href="{{site.url}}/#left" data-property-name="left">left</a></li><li><a href="{{site.url}}/#position" data-property-name="position">position</a></li><li><a href="{{site.url}}/#right" data-property-name="right">right</a></li><li><a href="{{site.url}}/#top" data-property-name="top">top</a></li><li><a href="{{site.url}}/#z-index" data-property-name="z-index">z-index</a></li>

_includes/collections/transitions-list.html

@@ -0,0 +1 @@
+<li><a href="{{site.url}}/#transition-delay" data-property-name="transition-delay">transition-delay</a></li><li><a href="{{site.url}}/#transition-duration" data-property-name="transition-duration">transition-duration</a></li><li><a href="{{site.url}}/#transition-property" data-property-name="transition-property">transition-property</a></li><li><a href="{{site.url}}/#transition-timing-function" data-property-name="transition-timing-function">transition-timing-function</a></li><li><a href="{{site.url}}/#transition" data-property-name="transition">transition</a></li>

_includes/collections/typography-list.html

@@ -0,0 +1 @@
+<li><a href="{{site.url}}/#color" data-property-name="color">color</a></li><li><a href="{{site.url}}/#font-family" data-property-name="font-family">font-family</a></li><li><a href="{{site.url}}/#font-size" data-property-name="font-size">font-size</a></li><li><a href="{{site.url}}/#font-style" data-property-name="font-style">font-style</a></li><li><a href="{{site.url}}/#font-variant" data-property-name="font-variant">font-variant</a></li><li><a href="{{site.url}}/#font-weight" data-property-name="font-weight">font-weight</a></li><li><a href="{{site.url}}/#font" data-property-name="font">font</a></li><li><a href="{{site.url}}/#letter-spacing" data-property-name="letter-spacing">letter-spacing</a></li><li><a href="{{site.url}}/#line-height" data-property-name="line-height">line-height</a></li><li><a href="{{site.url}}/#text-align" data-property-name="text-align">text-align</a></li><li><a href="{{site.url}}/#text-decoration" data-property-name="text-decoration">text-decoration</a></li><li><a href="{{site.url}}/#text-indent" data-property-name="text-indent">text-indent</a></li><li><a href="{{site.url}}/#text-overflow" data-property-name="text-overflow">text-overflow</a></li><li><a href="{{site.url}}/#text-shadow" data-property-name="text-shadow">text-shadow</a></li><li><a href="{{site.url}}/#text-transform" data-property-name="text-transform">text-transform</a></li><li><a href="{{site.url}}/#white-space" data-property-name="white-space">white-space</a></li><li><a href="{{site.url}}/#word-break" data-property-name="word-break">word-break</a></li><li><a href="{{site.url}}/#word-spacing" data-property-name="word-spacing">word-spacing</a></li>

_includes/menu.html

@@ -51,7 +51,11 @@
     </div>
     <div id="menu-list" class="menu-list">
       <ul id="menu-list-ul" class="menu-list-ul">
-        {% include lists/menu-list.html %}
+        {% if page.menu_list && page.layout == "collection" %}
+          {% include collections/{{page.menu_list}}.html %}
+        {% else %}
+          {% include lists/menu-list.html %}
+        {% endif %}
       </ul>
       <i id="menu-shadow-top" class="menu-list-shadow is-top"></i>
       <i id="menu-shadow-bottom" class="menu-list-shadow is-bottom"></i>

_layouts/collection.html

@@ -43,6 +43,7 @@ <h1 class="heading-title">
     {% include google-fonts.html %}
     <script src="{{site.url}}/javascript/clipboard.min.js"></script>
     <script src="{{site.url}}/javascript/main.js"></script>
+    <script src="{{site.url}}/javascript/collection.js"></script>
     {% include noscript.html %}
   </body>
 </html>

animations.html

@@ -1,6 +1,7 @@
 ---
 layout: collection
 collection_name: "Animations"
+menu_list: "animations-list"
 description: "animate almost any other property"
 ---
 

box-model.html

@@ -1,6 +1,7 @@
 ---
 layout: collection
 collection_name: "Box model"
+menu_list: "box-model-list"
 description: "define the size and behavior of the HTML element"
 ---
 

flexbox.html

@@ -1,6 +1,7 @@
 ---
 layout: collection
 collection_name: "Flexbox"
+menu_list: "flexbox-list"
 description: "use the CSS3 Flexbox capabilities"
 ---
 

javascript/collection.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // Hashes
+  var $hashes = document.querySelectorAll('.hash, .menu-list-ul li a');
+
+  Array.prototype.forEach.call($hashes, function($el) {
+    $el.addEventListener('click', function(event) {
+      event.preventDefault();
+      var propertyName = $el.dataset.propertyName;
+      var $target = document.getElementById($el.dataset.propertyName);
+      history.replaceState('', document.title, '#' + propertyName);
+
+      if ($target) {
+        $target.scrollIntoView();
+      }
+    });
+  });
+});

positioning.html

@@ -1,6 +1,7 @@
 ---
 layout: collection
 collection_name: "Positioning"
+menu_list: "positioning-list"
 description: "position elements manually in HTML"
 ---
 

transitions.html

@@ -1,6 +1,7 @@
 ---
 layout: collection
 collection_name: "Transitions"
+menu_list: "transitions-list"
 description: "define how an HTML element transitions between states"
 ---
 

typography.html

@@ -1,6 +1,7 @@
 ---
 layout: collection
 collection_name: "Typography"
+menu_list: "typography-list"
 description: "define the color, size, spacing, and shape of text"
 ---