Skip to content
This repository has been archived by the owner on May 5, 2021. It is now read-only.

Commit

Permalink
Merge pull request #60 from LukeAskew/master
Browse files Browse the repository at this point in the history 
Various fixes; update to 0.5.0
  • Loading branch information
@LukeAskew
LukeAskew committed Jul 17, 2014
2 parents 3f7e64c + a3671c1 commit 4d87fc7
Show file tree
Hide file tree
Showing 15 changed files with 143 additions and 105 deletions.
36 changes: 21 additions & 15 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ var config = {
fabricator: './src/fabricator/styles/fabricator.scss',
toolkit: './src/toolkit/assets/styles/toolkit.scss'
},
images: './src/toolkit/assets/images/**/*',
images: 'src/toolkit/assets/images/**/*',
templates: './src/toolkit/views/*.html',
materials: [
'components',
Expand Down Expand Up @@ -144,7 +144,7 @@ gulp.task('collate', function () {
});

// templates
gulp.task('template', function () {
gulp.task('templates:fabricator', function () {
var opts = {
data: config.dest + '/fabricator/data/data.json',
prototype: false
Expand All @@ -156,18 +156,22 @@ gulp.task('template', function () {
.pipe(gulpif(config.dev, connect.reload()));
});

gulp.task('prototypes', function () {
gulp.task('templates:prototypes', function () {
var opts = {
data: config.dest + '/fabricator/data/data.json',
prototype: true
};
return gulp.src('./src/toolkit/prototypes/*.html')
.pipe(template(opts))
.pipe(gulp.dest(config.dest + '/prototypes'));
.pipe(rename({
prefix: 'prototype-'
}))
.pipe(gulp.dest(config.dest))
.pipe(gulpif(config.dev, connect.reload()));
});

gulp.task('templates', ['collate'], function () {
gulp.start('template', 'prototypes');
gulp.start('templates:fabricator', 'templates:prototypes');
});


Expand All @@ -178,20 +182,22 @@ gulp.task('build', ['clean'], function () {


// server
gulp.task('connect', connect.server({
root: [config.dest],
port: 9000,
livereload: config.dev ? { port:(Math.floor(Math.random() * (35729 - 35720 + 1) + 35720)) } : false
}));
gulp.task('connect', function () {
connect.server({
root: [config.dest],
port: 9000,
livereload: config.dev ? { port:(Math.floor(Math.random() * (35729 - 35720 + 1) + 35720)) } : false
});
});


// watch
gulp.task('watch', ['connect'], function () {
gulp.watch('./src/toolkit/{components,structures,prototypes,documentation,views}/*.{html,md}', ['templates']);
gulp.watch('./src/fabricator/styles/**/*.scss', ['styles:fabricator']);
gulp.watch('./src/toolkit/assets/styles/**/*.scss', ['styles:toolkit']);
gulp.watch('./src/fabricator/scripts/**/*.js', ['scripts:fabricator']);
gulp.watch('./src/toolkit/assets/scripts/**/*.js', ['scripts:toolkit']);
gulp.watch('src/toolkit/{components,structures,prototypes,documentation,views}/**/*.{html,md}', ['templates']);
gulp.watch('src/fabricator/styles/**/*.scss', ['styles:fabricator']);
gulp.watch('src/toolkit/assets/styles/**/*.scss', ['styles:toolkit']);
gulp.watch('src/fabricator/scripts/**/*.js', ['scripts:fabricator']);
gulp.watch('src/toolkit/assets/scripts/**/*.js', ['scripts:toolkit']);
gulp.watch(config.src.images, ['images']);
});

Expand Down
51 changes: 25 additions & 26 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
{
"name": "fabricator",
"version": "0.4.0",
"version": "0.5.0",
"description": "Fabricator is a tool for creating modular website toolkits",
"homepage": "http://resource.github.io/fabricator/",
"main": "README.md",
"scripts": {
"gulp": "gulp",
"dev": "npm install && gulp dev",
"prod": "npm install && gulp"
},
Expand All @@ -30,36 +31,34 @@
"node": ">=0.10.0"
},
"dependencies": {
"gulp": "~3.8.5"
"gulp": "~3.8.6"
},
"devDependencies": {
"marked": "~0.2.10",
"mkdirp": "~0.3.5",
"handlebars": "~1.3.0",
"cheerio": "~0.13.1",
"browserify": "~4.2.1",
"change-case": "~1.0.6",
"js-beautify": "~1.4.2",
"mkpath": "~0.1.0",
"gulp-util": "~2.2.19",
"gulp-uglify": "~0.2.1",
"gulp-jshint": "~1.3.4",
"gulp-autoprefixer": "0.0.6",
"gulp-imagemin": "~0.2.0",
"gulp-connect": "~1.0.10",
"gulp-csso": "~0.2.6",
"gulp-serve": "~0.1.1",
"cheerio": "~0.17.0",
"gulp-autoprefixer": "0.0.8",
"gulp-clean": "~0.2.4",
"gulp-concat": "~2.3.3",
"gulp-connect": "~2.0.6",
"gulp-csso": "~0.2.9",
"gulp-if": "~1.2.2",
"gulp-imagemin": "~0.6.1",
"gulp-plumber": "~0.6.3",
"gulp-rename": "~1.2.0",
"gulp-sass": "~0.7.2",
"through2": "~0.4.2",
"gulp-plumber": "~0.5.6",
"vinyl-map": "~1.0.0",
"gulp-concat": "~2.1.7",
"gulp-rename": "~1.0.0",
"gulp-if": "0.0.5",
"q": "~1.0.1",
"vinyl-source-stream": "~0.1.1",
"browserify": "~3.38.1",
"gulp-streamify": "0.0.5",
"junk": "~0.3.0"
"gulp-uglify": "~0.3.1",
"gulp-util": "~2.2.20",
"handlebars": "~2.0.0-alpha.4",
"js-beautify": "~1.5.1",
"junk": "~0.3.0",
"marked": "~0.2.10",
"mkdirp": "~0.5.0",
"mkpath": "~0.1.0",
"q": "~1.0.1",
"through2": "~0.5.1",
"vinyl-map": "~1.0.1",
"vinyl-source-stream": "~0.1.1"
}
}
94 changes: 47 additions & 47 deletions src/fabricator/scripts/fabricator.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
"use strict";
'use strict';

/**
* Global `fabricator` object
Expand All @@ -14,6 +14,7 @@ var fabricator = window.fabricator = {};
fabricator.options = {
toggles: {
details: true,
notes: true,
code: false
}
};
Expand All @@ -26,7 +27,7 @@ fabricator.test = {};

// test for localstorage
fabricator.test.localStorage = (function () {
var test = "_f";
var test = '_f';
try {
localStorage.setItem(test, test);
localStorage.removeItem(test);
Expand All @@ -47,9 +48,9 @@ if (fabricator.test.localStorage) {
* @type {Object}
*/
fabricator.dom = {
primaryMenu: document.querySelector(".f-menu"),
menuItems: document.querySelectorAll(".f-menu li a"),
menuToggle: document.querySelector(".f-menu-toggle")
primaryMenu: document.querySelector('.f-menu'),
menuItems: document.querySelectorAll('.f-menu li a'),
menuToggle: document.querySelector('.f-menu-toggle')
};


Expand All @@ -58,11 +59,11 @@ fabricator.dom = {
*/
fabricator.buildColorChips = function () {

var chips = document.querySelectorAll(".f-color-chip"),
var chips = document.querySelectorAll('.f-color-chip'),
color;

for (var i = chips.length - 1; i >= 0; i--) {
color = chips[i].querySelector(".f-color-chip__color").innerHTML;
color = chips[i].querySelector('.f-color-chip__color').innerHTML;
chips[i].style.borderTopColor = color;
}

Expand All @@ -77,7 +78,7 @@ fabricator.buildColorChips = function () {
fabricator.setActiveItem = function () {

/**
* @return {Array} Sorted array of menu item "ids"
* @return {Array} Sorted array of menu item 'ids'
*/
var parsedItems = function () {

Expand All @@ -87,16 +88,16 @@ fabricator.setActiveItem = function () {
for (var i = fabricator.dom.menuItems.length - 1; i >= 0; i--) {

// remove active class from items
fabricator.dom.menuItems[i].classList.remove("f-active");
fabricator.dom.menuItems[i].classList.remove('f-active');

// get item href
href = fabricator.dom.menuItems[i].getAttribute("href");
href = fabricator.dom.menuItems[i].getAttribute('href');

// get id
if (href.indexOf("#") > -1) {
id = href.split("#").pop();
if (href.indexOf('#') > -1) {
id = href.split('#').pop();
} else {
id = href.split("/").pop().replace(/\.[^/.]+$/, "");
id = href.split('/').pop().replace(/\.[^/.]+$/, '');
}

items.push(id);
Expand All @@ -109,30 +110,30 @@ fabricator.setActiveItem = function () {


/**
* Match the "id" in the window location with the menu item, set menu item as active
* Match the 'id' in the window location with the menu item, set menu item as active
*/
var setActive = function () {

var href = window.location.href,
items = parsedItems(),
id, index;

// get window "id"
if (href.indexOf("#") > -1) {
id = window.location.hash.replace("#", "");
// get window 'id'
if (href.indexOf('#') > -1) {
id = window.location.hash.replace('#', '');
} else {
id = window.location.pathname.split("/").pop().replace(/\.[^/.]+$/, "");
id = window.location.pathname.split('/').pop().replace(/\.[^/.]+$/, '');
}

// find the window id in the items array
index = (items.indexOf(id) > -1) ? items.indexOf(id) : 0;

// set the matched item as active
fabricator.dom.menuItems[index].classList.add("f-active");
fabricator.dom.menuItems[index].classList.add('f-active');

};

window.addEventListener("hashchange", setActive);
window.addEventListener('hashchange', setActive);

setActive();

Expand All @@ -152,13 +153,13 @@ fabricator.primaryMenuControls = function () {

// toggle classes on certain elements
var toggleClasses = function () {
document.querySelector("html").classList.toggle("state--menu-active");
fabricator.dom.menuToggle.classList.toggle("f-icon-menu");
fabricator.dom.menuToggle.classList.toggle("f-icon-close");
document.querySelector('html').classList.toggle('state--menu-active');
fabricator.dom.menuToggle.classList.toggle('f-icon-menu');
fabricator.dom.menuToggle.classList.toggle('f-icon-close');
};

// toggle classes on click
toggle.addEventListener("click", function () {
toggle.addEventListener('click', function () {
toggleClasses();
});

Expand All @@ -168,7 +169,7 @@ fabricator.primaryMenuControls = function () {
};

for (var i = 0; i < fabricator.dom.menuItems.length; i++) {
fabricator.dom.menuItems[i].addEventListener("click", closeMenu);
fabricator.dom.menuItems[i].addEventListener('click', closeMenu);
}

return this;
Expand All @@ -182,53 +183,52 @@ fabricator.primaryMenuControls = function () {
fabricator.allItemsToggles = function () {

var items = {
details: document.querySelectorAll("[data-toggle=\"details\"]"),
code: document.querySelectorAll("[data-toggle=\"code\"]")
details: document.querySelectorAll('[data-toggle="details"]'),
notes: document.querySelectorAll('[data-toggle="notes"]'),
code: document.querySelectorAll('[data-toggle="code"]')
};

var toggleAllControls = document.querySelectorAll(".f-controls [data-toggle-control]");

var toggleAllControls = document.querySelectorAll('.f-controls [data-toggle-control]');

var options = (fabricator.test.localStorage) ? JSON.parse(localStorage.fabricator) : fabricator.options;


// toggle all
var toggleAllItems = function (type, value) {

var button = document.querySelector(".f-controls [data-toggle-control=" + type + "]"),
var button = document.querySelector('.f-controls [data-toggle-control=' + type + ']'),
_items = items[type];

for (var i = 0; i < _items.length; i++) {
if (value) {
_items[i].classList.remove("f-item-hidden");
_items[i].classList.remove('f-item-hidden');
} else {
_items[i].classList.add("f-item-hidden");
_items[i].classList.add('f-item-hidden');
}
}

// toggle styles
if (value) {
button.classList.add("f-active");
button.classList.add('f-active');
} else {
button.classList.remove("f-active");
button.classList.remove('f-active');
}

// update options
options.toggles[type] = value;

if (fabricator.test.localStorage) {
localStorage.setItem("fabricator", JSON.stringify(options));
localStorage.setItem('fabricator', JSON.stringify(options));
}

};

for (var ii = 0; ii < toggleAllControls.length; ii++) {
for (var i = 0; i < toggleAllControls.length; i++) {

toggleAllControls[ii].addEventListener("click", function (e) {
toggleAllControls[i].addEventListener('click', function (e) {

// extract info from target node
var type = e.target.getAttribute("data-toggle-control"),
value = e.target.className.indexOf("f-active") < 0;
var type = e.target.getAttribute('data-toggle-control'),
value = e.target.className.indexOf('f-active') < 0;

// toggle the items
toggleAllItems(type, value);
Expand All @@ -251,20 +251,20 @@ fabricator.allItemsToggles = function () {
/**
* Handler for single item code toggling
*/
fabricator.singleItemCodeToggle = function () {
fabricator.singleItemToggle = function () {

var itemToggleSingle = document.querySelectorAll(".f-toggle");
var itemToggleSingle = document.querySelectorAll('.f-toggle');

// toggle single
var toggleSingleItemCode = function () {
var toggleSingleItemCode = function (e) {
var group = this.parentNode.parentNode.parentNode,
toggle = this.attributes["data-toggle-control"].value;
type = e.target.getAttribute('data-toggle-control');

group.querySelector("[data-toggle=\"code\"]").classList.toggle("f-item-hidden");
group.querySelector('[data-toggle=' + type + ']').classList.toggle('f-item-hidden');
};

for (var i = 0; i < itemToggleSingle.length; i++) {
itemToggleSingle[i].addEventListener("click", toggleSingleItemCode);
itemToggleSingle[i].addEventListener('click', toggleSingleItemCode);
}

return this;
Expand All @@ -281,7 +281,7 @@ fabricator.singleItemCodeToggle = function () {
fabricator
.primaryMenuControls()
.allItemsToggles()
.singleItemCodeToggle()
.singleItemToggle()
.buildColorChips()
.setActiveItem();

Expand Down
Loading

0 comments on commit 4d87fc7

Please sign in to comment.