Add grouping & accordion functionality to the menu list

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 .sass-cache
+.DS_Store

package.json

@@ -34,7 +34,7 @@
     "babel-loader": "5.0.0",
     "browser-sync": "^2.7.1",
     "del": "^1.1.1",
-    "fabricator-assemble": "^1.1.7",
+    "fabricator-assemble": "https://github.com/jaredshaunsmith/fabricator-assemble/tarball/master",
     "gulp": "^3.8.11",
     "gulp-autoprefixer": "^2.2.0",
     "gulp-csso": "^1.0.0",
@@ -47,6 +47,11 @@
     "imports-loader": "^0.6.3",
     "run-sequence": "^1.0.2",
     "script-loader": "^0.6.1",
-    "webpack": "^1.8.11"
+    "webpack": "^1.8.11",
+    "requirejs" : "~2.1.20",
+    "inherits": "^2.0.1",
+    "jquery": "^2.1.3",
+    "simpler-extend": "^1.1.0",
+    "underscore": "^1.8.1"
   }
 }

src/assets/fabricator/scripts/fabricator.js

@@ -17,7 +17,9 @@ fabricator.options = {
 	toggles: {
 		labels: true,
 		notes: true,
-		code: false
+		markup: false,
+		css: false,
+		js: false
 	},
 	menu: false,
 	mq: '(min-width: 60em)'
@@ -58,7 +60,8 @@ fabricator.dom = {
 	root: document.querySelector('html'),
 	primaryMenu: document.querySelector('.f-menu'),
 	menuItems: document.querySelectorAll('.f-menu li a'),
-	menuToggle: document.querySelector('.f-menu-toggle')
+	menuToggle: document.querySelector('.f-menu-toggle'),
+	menuAccordions: document.querySelectorAll('.f-menu_accordion_toggle')
 };
 
 
@@ -89,7 +92,6 @@ fabricator.buildColorChips = function () {
 
 };
 
-
 /**
  * Add `f-active` class to active menu item
  */
@@ -154,6 +156,16 @@ fabricator.setActiveItem = function () {
 		// set the matched item as active
 		fabricator.dom.menuItems[index].classList.add('f-active');
 
+		//modify other accordions
+		for(var i = 0; i < fabricator.dom.menuAccordions.length; i++) {
+			var thisID = fabricator.dom.menuAccordions[i].getAttribute('href').split('#').pop();
+
+			// if it is the same item - i.e. the window loaded on a hash
+			if(id.indexOf(thisID) > -1 && fabricator.dom.menuAccordions[i]) {
+				fabricator.dom.menuAccordions[i].parentNode.classList.add('is-open');
+			}
+		}
+
 	};
 
 	window.addEventListener('hashchange', setActive);
@@ -216,7 +228,9 @@ fabricator.allItemsToggles = function () {
 	var items = {
 		labels: document.querySelectorAll('[data-f-toggle="labels"]'),
 		notes: document.querySelectorAll('[data-f-toggle="notes"]'),
-		code: document.querySelectorAll('[data-f-toggle="code"]')
+		markup: document.querySelectorAll('[data-f-toggle="markup"]'),
+		css: document.querySelectorAll('[data-f-toggle="css"]'),
+		js: document.querySelectorAll('[data-f-toggle="js"]')
 	};
 
 	var toggleAllControls = document.querySelectorAll('.f-controls [data-f-toggle-control]');
@@ -357,6 +371,37 @@ fabricator.setInitialMenuState = function () {
 
 };
 
+/** 
+ * Open/Close menu accordions on click
+ */
+fabricator.accordions = function() {
+
+	for(var i = 0; i < fabricator.dom.menuAccordions.length; i++) {
+
+		fabricator.dom.menuAccordions[i].addEventListener('click', function (e) {
+			setActiveAccordion(e);
+		});
+		fabricator.dom.menuAccordions[i].parentNode.querySelectorAll('.control')[0].addEventListener('click', function(e) {
+			setActiveAccordion(e);
+		});
+	}
+
+	var setActiveAccordion = function(which) {
+		var classList = which.currentTarget.parentNode.classList;
+
+		if(classList.toString().indexOf('is-open') > 0) {
+			which.currentTarget.parentNode.classList.remove('is-open');
+		} else {
+			for(var a = 0; a < fabricator.dom.menuAccordions.length; a++) {
+				fabricator.dom.menuAccordions[a].parentNode.classList.remove('is-open');
+			}
+			which.currentTarget.parentNode.classList.add('is-open');
+		}
+	};
+
+	return this;
+};
+
 
 /**
  * Initialization
@@ -365,6 +410,7 @@ fabricator.setInitialMenuState = function () {
 
 	// invoke
 	fabricator
+		.accordions()
 		.setInitialMenuState()
 		.menuToggle()
 		.allItemsToggles()

src/assets/fabricator/styles/partials/_controls.scss

@@ -10,6 +10,10 @@
 		margin: 0;
 		padding: 1rem 0;
 
+		&.hidden {
+			display: none;
+		}
+
 		&.f-active {
 			box-shadow: inset 0 3px 0 0 map-get($colors, accent);
 

src/assets/fabricator/styles/partials/_menu.scss

@@ -34,6 +34,7 @@
 	}
 
 	li {
+		position: relative;
 		list-style-type: none;
 		margin-top: 0;
 		margin-bottom: 0;
@@ -67,4 +68,44 @@
 			color: map-get($colors, normal);
 		}
 	}
+
+	.f-menu_accordion {
+		li a {
+			padding-left: 2.7rem;
+			box-sizing: border-box
+		}
+		max-height: 0px;
+		overflow: hidden;
+		transition: max-height 0.3s ease;
+		-webkit-backface-visibility: hidden;
+	}
+
+	.f-menu_accordion_group {
+		.control {
+			position: absolute;
+			left: 10px;
+			top: 8px;
+			cursor: pointer;
+			width: 10px;
+			height: 10px;
+			&:after {
+				font-size: .75rem;
+				font-weight: bold;
+				content: '+';
+				display: block;
+				color: map-get($colors, menu-text) !important;
+			}
+		}
+		&.is-open {
+			.control {
+				left: 12px;
+				&:after {
+					content: '-';
+				}
+			}
+			.f-menu_accordion {
+				max-height: 1200px;
+			}
+		}
+	}
 }

src/assets/toolkit/scripts/modules/accordion.js

@@ -0,0 +1,34 @@
+var $, jQuery = require('jQuery');
+var _ = require('Underscore');
+
+var Accordion = (function($, _) {
+    'use strict';
+
+    var def = function($el) {
+        this.$el = $el;
+        this.$toggle = $('.accordion-preview', $el);
+
+        this.states = {
+            active : 'is-active'
+        };
+
+        init.call(this);
+    };
+
+    var init = function() {
+        this.bind();
+    };
+
+    def.prototype = {
+        bind : function() {
+            this.$toggle.on('click', _.bind(this.toggle, this));
+        },
+        toggle : function() {
+            this.$el.toggleClass(this.states.active);
+        }
+    };
+
+    return def;
+}).call(this, jQuery, _);
+
+module.exports = Accordion;

src/assets/toolkit/scripts/toolkit.js

@@ -2,4 +2,14 @@
  * Toolkit JavaScript
  */
 
-'use strict';
+// 'use strict';
+var $ = require('jQuery'),
+		_ = require('Underscore'),
+		accordion = require('./modules/accordion');
+
+
+if($('.accordion').length) {
+	$('.accordion').each(function() {
+		new accordion($(this));
+	})
+}

src/assets/toolkit/styles/components/_accordion.scss

@@ -0,0 +1,25 @@
+.accordion {
+
+  .accordion-content {
+    display: none;
+  }
+
+  &.is-active {
+    .accordion-preview {
+    }
+    .accordion-content {
+      display: block;
+      margin-bottom: 40px;
+    }
+    .accordion-control {
+    	transform: rotate(90deg);
+    }
+  }
+
+  .accordion-control, .title {
+    display: inline-block;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    cursor: pointer;
+  }
+}

src/assets/toolkit/styles/toolkit.scss

@@ -6,3 +6,5 @@
 body {
 	font-family: sans-serif;
 }
+
+@import "components/accordion";

src/data/demo.yml

@@ -0,0 +1,8 @@
+---
+  accordions: 
+    - 
+      title: "1 accordion"
+      content: "i am a cute little accordion"
+    - 
+      title: "2 accordion"
+      content: "2 accordions walk into a bar...."

src/data/toolkit.yml

@@ -6,3 +6,4 @@ colors:
     Red: "rgb(201, 55, 6)"
     Yellow: "rgb(252, 207, 80)"
     Blue: "rgb(39, 102, 143)"
+

src/materials/base/forms/radio.html

@@ -0,0 +1,11 @@
+<label>
+    <input type="radio" name="groupName" id="radio1" /> Radio 1
+</label>
+
+<label>
+    <input type="radio" name="groupName" id="radio2" /> Radio 2
+</label>
+
+<label>
+    <input type="radio" name="groupName" id="radio3" /> Radio 3
+</label>

src/materials/components/accordion.html

@@ -0,0 +1,22 @@
+---
+notes: |
+  JavaScript dependant componenet
+  Instantiate with `new Accordion($el)`
+---
+
+<!-- need to implement self-calling include for demo purposes as I did on juniper.net redesign -->
+{{#if fabricator}}
+	{{#each demo.accordions}}
+		{{> accordion this}}
+	{{/each}}
+{{else}}
+	<div class="accordion">
+		<div class="accordion-preview">
+			<div class="title">{{title}}</div>
+			<div class="accordion-control">˅</div>
+		</div>
+		<div class="accordion-content">
+			{{content}}
+		</div>
+	</div>
+{{/if}}

src/materials/structures/form.html

@@ -1,6 +1,8 @@
 <form action="">
 	<div>
-		{{> text-input}}
+		{{> forms.[text-input]}}
 	</div>
 	{{> button}}
+
+    {{> forms.[radio] }}
 </form>

src/views/base.html

@@ -0,0 +1,11 @@
+---
+fabricator: true
+---
+
+<h1 data-f-toggle="labels">Base HTML Items</h1>
+
+{{#each materials.base.items}}
+
+{{> f-item this}}
+
+{{/each}}

src/views/layouts/includes/f-controls.html

@@ -9,9 +9,21 @@
 			<use xlink:href="#f-icon-notes" />
 		</svg>
 	</div>
-	<div class="f-control f-global-control" data-f-toggle-control="code" title="Toggle Code">
+	<div class="f-control f-global-control" data-f-toggle-control="markup" title="Toggle Markup">
 		<svg>
 			<use xlink:href="#f-icon-code" />
 		</svg>
 	</div>
+
+	<div class="f-control f-global-control hidden" data-f-toggle-control="css" title="Toggle CSS">
+		<svg>
+			<use xlink:href="#f-icon-css" />
+		</svg>
+	</div>
+
+	<div class="f-control f-global-control hidden" data-f-toggle-control="js" title="Toggle JavaScript">
+		<svg style="width: 19px; height: 27px; top: -4px; position: relative;">
+			<use xlink:href="#f-icon-js" />
+		</svg>
+	</div>
 </div>

src/views/layouts/includes/f-icons.html

@@ -15,5 +15,12 @@
 	<symbol id="f-icon-settings" viewBox="0 0 512 512">
 		<path d="M256 377.3c-67.5 0-121.6-53.9-121.6-121.3s54-121.3 121.6-121.3S377.6 188.6 377.6 256 323.5 377.3 256 377.3zm0-215.6c-52.7 0-94.6 41.8-94.6 94.3s41.9 94.3 94.6 94.3 94.6-41.8 94.6-94.3-41.9-94.3-94.6-94.3zM293.2 512h-72.9L200 450c-13.5-4-27-9.4-39.2-16.2l-59.4 29.6L50 412.3 79.7 353c-6.8-12.1-12.2-25.6-16.2-39.1L0 292.4v-72.8l62.1-20.2c4.1-13.5 9.5-26.9 16.2-39.1L48.6 101 100 49.9l59.4 29.6c12.2-6.7 25.7-12.1 39.2-16.2L220.2 0h72.9l20.3 62c13.5 4 27 9.4 39.2 16.2L412 48.5l51.3 51.2-29.7 59.3c6.8 12.1 12.2 25.6 16.2 39.1l62.1 20.2V291l-62.1 20.2c-4.1 13.5-9.5 26.9-16.2 39.1l29.7 59.3-51.3 51.2-59.4-29.6c-12.2 6.7-25.7 12.1-39.2 16.2L293.2 512zm-54.1-26.9h35.1l18.9-57.9 6.8-1.3c16.2-4 31.1-10.8 45.9-18.9l6.8-4 54 26.9 24.3-24.3-27-53.9 4.1-6.7c8.1-13.5 14.9-29.6 18.9-45.8l1.4-6.7 58.1-18.9v-35l-58.1-18.9-1.4-6.7c-4.1-16.2-10.8-31-18.9-45.8l-4.1-6.7 27-53.9-24.3-24.3-54 26.9-6.8-4c-14.8-8.2-29.7-14.9-45.9-19l-6.8-1.3L274.2 27h-35.1l-18.9 57.9-6.8 1.3c-16.2 4-31.1 10.8-45.9 18.9l-6.8 4-54-26.9-24.3 24.3 27 53.9-4.1 6.7c-8.1 13.5-14.9 29.6-18.9 45.8l-1.4 6.7-58 18.9v35l58.1 18.9 1.4 6.7c4.1 16.2 10.8 31 18.9 45.8l4.1 6.7-27 53.9 24.3 24.3 54-26.9 6.8 4c14.9 8.1 29.7 14.8 45.9 18.9l6.8 1.3 18.8 58z"/>
 	</symbol>
+	<symbol id="f-icon-js" viewBox="0 0 100 125">
+		<path d="M33.73 34.106v5.15c0 0.314-0.199 0.587-0.492 0.702c-3.484 1.37-5.876 4.491-5.876 9.756c0 5.265 2.392 8.386 5.876 9.756 c0.292 0.115 0.492 0.388 0.492 0.702v5.15c0 0.502-0.483 0.858-0.967 0.724c-7.336-2.043-11.859-8.15-11.859-16.332 c0-8.182 4.523-14.289 11.859-16.332C33.247 33.248 33.73 33.604 33.73 34.106z M55.333 49.714c0 8.182-4.523 14.289-11.859 16.332 c-0.484 0.135-0.967-0.221-0.967-0.724v-5.15c0-0.314 0.199-0.587 0.492-0.702c3.484-1.37 5.876-4.491 5.876-9.756 c0-5.265-2.392-8.386-5.876-9.756c-0.292-0.115-0.492-0.388-0.492-0.702v-5.15c0-0.502 0.483-0.858 0.967-0.724 C50.81 35.426 55.333 41.533 55.333 49.714z M17.334 64.062V53.223c0-0.708-0.574-1.283-1.283-1.283H5.212 c-0.708 0-1.283 0.574-1.283 1.283v10.839c0 0.708 0.574 1.283 1.283 1.283h10.839C16.76 65.345 17.334 64.771 17.334 64.062z M68.065 60.261c0 0.794 0.643 1.437 1.437 1.437h3.778c0.404 0 0.731 0.327 0.731 0.731v3.84c0 0.404-0.327 0.731-0.731 0.731 H68.66c-3.766 0-6.392-2.626-6.392-6.442v-7.631c0-0.794-0.643-1.437-1.437-1.437h-1.598c-0.404 0-0.731-0.327-0.731-0.731v-3.89 c0-0.404 0.327-0.731 0.731-0.731h1.598c0.794 0 1.437-0.643 1.437-1.437V37.07c0-3.815 2.626-6.441 6.392-6.441h4.621 c0.404 0 0.731 0.327 0.731 0.731v3.839c0 0.404-0.327 0.731-0.731 0.731h-3.778c-0.794 0-1.437 0.643-1.437 1.437v7.334 c0 2.131-1.04 3.32-2.328 4.113c1.288 0.793 2.328 1.982 2.328 4.113V60.261z M87.104 52.927c0-2.131 1.04-3.32 2.328-4.113 c-1.288-0.793-2.328-1.982-2.328-4.113v-7.333c0-0.794-0.644-1.438-1.438-1.438h-3.778c-0.404 0-0.731-0.327-0.731-0.731V31.36 c0-0.404 0.327-0.731 0.731-0.731h4.621c3.766 0 6.392 2.626 6.392 6.441v7.631c0 0.794 0.644 1.438 1.438 1.438h1.597 c0.404 0 0.731 0.327 0.731 0.731v3.89c0 0.404-0.327 0.731-0.731 0.731h-1.598c-0.794 0-1.437 0.643-1.437 1.437v7.631 c0 3.816-2.626 6.442-6.392 6.442h-4.621c-0.404 0-0.731-0.327-0.731-0.731v-3.84c0-0.404 0.327-0.731 0.731-0.731h3.778 c0.794 0 1.437-0.643 1.437-1.437V52.927z"/>
+	</symbol>
+	<symbol id="f-icon-css" viewBox="0 4.867 100 110.93875">
+		<path d="M33.923 93.617H23.51c-7.043 0-12.798-4.2-12.798-14.593V61.835c0-6.204-8.241-6.898-10.712-6.898V43.54 c2.471 0 10.712-0.695 10.712-6.893V19.358c0-10.391 5.462-14.491 12.798-14.491h10.413v11.392h-4.858 c-6.048 0-6.458 3.695-6.458 6.394v16.095c-0.085 9.298-5.742 9.991-9.913 10.397v0.19c4.169 0.308 9.828 1.009 9.913 10.307 v16.186c0 2.7 0.41 6.394 6.458 6.394h4.858V93.617z"/>
+		<path d="M66.064 4.867h10.712c6.744 0 12.5 4.206 12.5 14.59v17.19c0 6.197 7.94 6.893 10.724 6.893v11.398 c-2.783 0-10.724 0.693-10.724 6.899v17.288c0 10.391-5.456 14.493-12.792 14.493h-10.42V82.225h4.861 c6.055 0 6.449-3.694 6.449-6.394V59.732c0.098-9.294 5.75-9.989 9.924-10.396v-0.19c-4.175-0.308-9.826-1.008-9.924-10.304V22.654 c0-2.699-0.395-6.394-6.449-6.394h-4.861V4.867z"/>
+	</symbol>
 </svg>
 <!-- /fabricator icons -->