diff --git a/Gruntfile.js b/Gruntfile.js index 0a9791dd4..2a050e452 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -62,6 +62,8 @@ module.exports = function(grunt) { sass: { build: { options: { + sourcemap: 'none', + trace: true, style: 'expanded', precision: 8 }, @@ -94,7 +96,7 @@ module.exports = function(grunt) { grunt.task.loadTasks('./builder/'); //if you choose to use scss, or any preprocessor, you can add it here - grunt.registerTask('default', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy']); + grunt.registerTask('default', ['clean', 'concat', 'patternlab', 'sass', 'copy']); //travis CI task grunt.registerTask('travis', ['clean', 'concat', 'patternlab', /*'sass',*/ 'copy', 'nodeunit']); diff --git a/builder/patternlab.js b/builder/patternlab.js index 37d75805b..a765df683 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -8,347 +8,458 @@ * */ -var patternlab_engine = function(){ - var path = require('path'), - fs = require('fs-extra'), - diveSync = require('diveSync'), - mustache = require('mustache'), - of = require('./object_factory'), - pa = require('./pattern_assembler'), - patternlab = {}; - - patternlab.package =fs.readJSONSync('./package.json'); - patternlab.config = fs.readJSONSync('./config.json'); - - function getVersion() { - console.log(patternlab.package.version); - } - - function help(){ - console.log('Patternlab Node Help'); - console.log('==============================='); - console.log('Command Line Arguments'); - console.log('patternlab:only_patterns'); - console.log(' > Compiles the patterns only, outputting to ./public/patterns'); - console.log('patternlab:v'); - console.log(' > Retrieve the version of patternlab-node you have installed'); - console.log('patternlab:help'); - console.log(' > Get more information about patternlab-node, pattern lab in general, and where to report issues.'); - console.log('==============================='); - console.log('Visit http://patternlab.io/docs/index.html for general help on pattern-lab'); - console.log('Visit https://github.com/pattern-lab/patternlab-node/issues to open a bug.'); - } - - function printDebug() { - //debug file can be written by setting flag on config.json - if(patternlab.config.debug){ - console.log('writing patternlab debug file to ./patternlab.json'); - fs.outputFileSync('./patternlab.json', JSON.stringify(patternlab, null, 3)); - } - } - - function buildPatterns(callback){ - patternlab.data = fs.readJSONSync('./source/_data/data.json'); - patternlab.listitems = fs.readJSONSync('./source/_data/listitems.json'); - patternlab.header = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/header.html', 'utf8'); - patternlab.footer = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/footer.html', 'utf8'); - patternlab.patterns = []; - patternlab.patternIndex = []; - patternlab.partials = {}; - - diveSync('./source/_patterns', function(err, file){ - - //log any errors - if(err){ - console.log(err); - return; - } - - //extract some information - var abspath = file.substring(2); - var subdir = path.dirname(path.relative('./source/_patterns', file)); - var filename = path.basename(file); - - //check if the pattern already exists. - var patternName = filename.substring(0, filename.indexOf('.')), - patternIndex = patternlab.patternIndex.indexOf(subdir + '-' + patternName), - currentPattern, - flatPatternPath; - - //ignore _underscored patterns, json, and dotfiles - if(filename.charAt(0) === '_' || path.extname(filename) === '.json' || filename.charAt(0) === '.'){ - return; - } - - //make a new Pattern Object - var flatPatternName = subdir.replace(/\\/g, '-') + '-' + patternName; - - flatPatternName = flatPatternName.replace(/\\/g, '-'); - currentPattern = new of.oPattern(flatPatternName, subdir, filename, {}); - currentPattern.patternName = patternName.substring(patternName.indexOf('-') + 1); - currentPattern.data = null; - - //see if this file has a state - if(patternlab.config.patternStates[currentPattern.patternName]){ - currentPattern.patternState = patternlab.config.patternStates[currentPattern.patternName]; - } - - //look for a json file for this template - try { - var jsonFilename = abspath.substr(0, abspath.lastIndexOf(".")) + ".json"; - currentPattern.data = fs.readJSONSync(jsonFilename); - } - catch(e) { - - } - - currentPattern.template = fs.readFileSync(abspath, 'utf8'); - - //render the pattern. pass partials object just in case. - if(currentPattern.data) { // Pass JSON as data - currentPattern.patternPartial = renderPattern(currentPattern.template, currentPattern.data, patternlab.partials); - }else{ // Pass global patternlab data - currentPattern.patternPartial = renderPattern(currentPattern.template, patternlab.data, patternlab.partials); - } - - //write the compiled template to the public patterns directory - flatPatternPath = currentPattern.name + '/' + currentPattern.name + '.html'; - - //add footer info before writing - var currentPatternFooter = renderPattern(patternlab.footer, currentPattern); - - fs.outputFileSync('./public/patterns/' + flatPatternPath, patternlab.header + currentPattern.patternPartial + currentPatternFooter); - currentPattern.patternLink = flatPatternPath; - - //add as a partial in case this is referenced later. convert to syntax needed by existing patterns - var sub = subdir.substring(subdir.indexOf('-') + 1); - var folderIndex = sub.indexOf('/'); //THIS IS MOST LIKELY WINDOWS ONLY. path.sep not working yet - var cleanSub = sub.substring(0, folderIndex); - - //add any templates found to an object of partials, so downstream templates may use them too - //exclude the template patterns - we don't need them as partials because pages will just swap data - if(cleanSub !== ''){ - var partialname = cleanSub + '-' + patternName.substring(patternName.indexOf('-') + 1); - - patternlab.partials[partialname] = currentPattern.template; - - //done - } - - //add to patternlab arrays so we can look these up later. this could probably just be an object. - patternlab.patternIndex.push(currentPattern.name); - patternlab.patterns.push(currentPattern); - }); - - } - - function buildFrontEnd(){ - patternlab.buckets = []; - patternlab.bucketIndex = []; - patternlab.patternPaths = {}; - patternlab.viewAllPaths = {}; - - //build the styleguide - var styleguideTemplate = fs.readFileSync('./source/_patternlab-files/styleguide.mustache', 'utf8'); - var styleguideHtml = renderPattern(styleguideTemplate, {partials: patternlab.patterns}); - fs.outputFileSync('./public/styleguide/html/styleguide.html', styleguideHtml); - - //build the patternlab website - var patternlabSiteTemplate = fs.readFileSync('./source/_patternlab-files/index.mustache', 'utf8'); - - //loop through all patterns. deciding to do this separate from the recursion, even at a performance hit, to attempt to separate the tasks of styleguide creation versus site menu creation - for(var i = 0; i < patternlab.patterns.length; i++){ - var pattern = patternlab.patterns[i]; - var bucketName = pattern.name.replace(/\\/g, '-').split('-')[1]; - - //check if the bucket already exists - var bucketIndex = patternlab.bucketIndex.indexOf(bucketName); - if(bucketIndex === -1){ - //add the bucket - var bucket = new of.oBucket(bucketName); - - //add paternPath - patternlab.patternPaths[bucketName] = {}; - - //get the navItem - var navItemName = pattern.subdir.split('-').pop(); - - //get the navSubItem - var navSubItemName = pattern.patternName.replace(/-/g, ' '); - - //test whether the pattern struture is flat or not - usually due to a template or page - var flatPatternItem = false; - if(navItemName === bucketName){ - flatPatternItem = true; - } - - //assume the navItem does not exist. - var navItem = new of.oNavItem(navItemName); - - //assume the navSubItem does not exist. - var navSubItem = new of.oNavSubItem(navSubItemName); - navSubItem.patternPath = pattern.patternLink; - navSubItem.patternPartial = bucketName + "-" + pattern.patternName; //add the hyphenated name - - //add the patternState if it exists - if(pattern.patternState){ - navSubItem.patternState = pattern.patternState; - } - - //if it is flat - we should not add the pattern to patternPaths - if(flatPatternItem){ - - bucket.patternItems.push(navSubItem); - - //add to patternPaths - addToPatternPaths(bucketName, pattern); - - } else{ - - bucket.navItems.push(navItem); - bucket.navItemsIndex.push(navItemName); - navItem.navSubItems.push(navSubItem); - navItem.navSubItemsIndex.push(navSubItemName); - - //add to patternPaths - addToPatternPaths(bucketName, pattern); - - } - - //add the bucket. - patternlab.buckets.push(bucket); - patternlab.bucketIndex.push(bucketName); - - //done - - } else{ - //find the bucket - var bucket = patternlab.buckets[bucketIndex]; - - //get the navItem - var navItemName = pattern.subdir.split('-').pop(); - - //get the navSubItem - var navSubItemName = pattern.patternName.replace(/-/g, ' '); - - //assume the navSubItem does not exist. - var navSubItem = new of.oNavSubItem(navSubItemName); - navSubItem.patternPath = pattern.patternLink; - navSubItem.patternPartial = bucketName + "-" + pattern.patternName; //add the hyphenated name - - //add the patternState if it exists - if(pattern.patternState){ - navSubItem.patternState = pattern.patternState; - } - - //test whether the pattern struture is flat or not - usually due to a template or page - var flatPatternItem = false; - if(navItemName === bucketName){ - flatPatternItem = true; - } - - //if it is flat - we should not add the pattern to patternPaths - if(flatPatternItem){ - - //add the navItem to patternItems - bucket.patternItems.push(navSubItem); - - //add to patternPaths - addToPatternPaths(bucketName, pattern); - - } else{ - //check to see if navItem exists - var navItemIndex = bucket.navItemsIndex.indexOf(navItemName); - if(navItemIndex === -1){ - - var navItem = new of.oNavItem(navItemName); - - //add the navItem and navSubItem - navItem.navSubItems.push(navSubItem); - navItem.navSubItemsIndex.push(navSubItemName); - bucket.navItems.push(navItem); - bucket.navItemsIndex.push(navItemName); - - } else{ - //add the navSubItem - var navItem = bucket.navItems[navItemIndex]; - navItem.navSubItems.push(navSubItem); - navItem.navSubItemsIndex.push(navSubItemName); - } - - // just add to patternPaths - addToPatternPaths(bucketName, pattern); - } - - } - - } - - //the patternlab site requires a lot of partials to be rendered. - //patternNav - var patternNavTemplate = fs.readFileSync('./source/_patternlab-files/partials/patternNav.mustache', 'utf8'); - var patternNavPartialHtml = renderPattern(patternNavTemplate, patternlab); - - //ishControls - var ishControlsTemplate = fs.readFileSync('./source/_patternlab-files/partials/ishControls.mustache', 'utf8'); - var ishControlsPartialHtml = renderPattern(ishControlsTemplate, patternlab.config); - - //patternPaths - var patternPathsTemplate = fs.readFileSync('./source/_patternlab-files/partials/patternPaths.mustache', 'utf8'); - var patternPathsPartialHtml = renderPattern(patternPathsTemplate, {'patternPaths': JSON.stringify(patternlab.patternPaths)}); - - //viewAllPaths - var viewAllPathsTemplate = fs.readFileSync('./source/_patternlab-files/partials/viewAllPaths.mustache', 'utf8'); - var viewAllPathersPartialHtml = renderPattern(viewAllPathsTemplate, {'viewallpaths': JSON.stringify(patternlab.viewAllPaths)}); - - //websockets - var websocketsTemplate = fs.readFileSync('./source/_patternlab-files/partials/websockets.mustache', 'utf8'); - patternlab.contentsyncport = patternlab.config.contentSyncPort; - patternlab.navsyncport = patternlab.config.navSyncPort; - - var websocketsPartialHtml = renderPattern(websocketsTemplate, patternlab); - - //render the patternlab template, with all partials - var patternlabSiteHtml = renderPattern(patternlabSiteTemplate, {}, { - 'ishControls': ishControlsPartialHtml, - 'patternNav': patternNavPartialHtml, - 'patternPaths': patternPathsPartialHtml, - 'websockets': websocketsPartialHtml, - 'viewAllPaths': viewAllPathersPartialHtml - }); - fs.outputFileSync('./public/index.html', patternlabSiteHtml); - } - - function renderPattern(name, data, partials) { - if(partials) { - return mustache.render(name, data, partials); - }else{ - return mustache.render(name, data); - } - } - - function addToPatternPaths(bucketName, pattern){ - //this is messy, could use a refactor. - patternlab.patternPaths[bucketName][pattern.patternName] = pattern.subdir.replace(/\\/g, '/') + "/" + pattern.filename.substring(0, pattern.filename.indexOf('.')); - } - - return { - version: function(){ - return getVersion(); - }, - build: function(){ - buildPatterns(); - buildFrontEnd(); - printDebug(); - }, - help: function(){ - help(); - }, - build_patterns_only: function(){ - buildPatterns(); - printDebug(); - } - }; +/* + * patternlab-node - v0.1.3 - 2014 + * + * Brian Muenzenmeyer, and the web community. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * + */ + +/* + * patternlab-node - v0.1.3 - 2014 + * + * Brian Muenzenmeyer, and the web community. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * + */ + +/* + * patternlab-node - v0.1.3 - 2014 + * + * Brian Muenzenmeyer, and the web community. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * + */ + +/* + * patternlab-node - v0.1.3 - 2014 + * + * Brian Muenzenmeyer, and the web community. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * + */ + +/*jslint indent:4*/ + +var patternlab_engine = function () { + var path = require('path'), + fs = require('fs-extra'), + diveSync = require('diveSync'), + of = require('./object_factory'), + //pa = require('./pattern_assembler'), + markdown = require('markdown').markdown, + patternlab = {}, + renderEngines = {}, + templates = {}; + + patternlab.package = fs.readJSONSync('./package.json'); + patternlab.config = fs.readJSONSync('./config.json'); + + // add rendering engines + if (!patternlab.config['rendering-engines']) { + throw new Error('Missing "rendering-engines" in config'); + } + Object.keys(patternlab.config['rendering-engines']).every(function (engine) { + renderEngines[engine] = require(patternlab.config['rendering-engines'][engine]); + }); + + function getVersion() { + console.log(patternlab.package.version); + } + + function help() { + console.log('Patternlab Node Help'); + console.log('==============================='); + console.log('Command Line Arguments'); + console.log('patternlab:only_patterns'); + console.log(' > Compiles the patterns only, outputting to ./public/patterns'); + console.log('patternlab:v'); + console.log(' > Retrieve the version of patternlab-node you have installed'); + console.log('patternlab:help'); + console.log(' > Get more information about patternlab-node, pattern lab in general, and where to report issues.'); + console.log('==============================='); + console.log('Visit http://patternlab.io/docs/index.html for general help on pattern-lab'); + console.log('Visit https://github.com/pattern-lab/patternlab-node/issues to open a bug.'); + } + + function printDebug() { + //debug file can be written by setting flag on config.json + if (patternlab.config.debug) { + console.log('writing patternlab debug file to ./patternlab.json'); + fs.outputFileSync('./patternlab.json', JSON.stringify(patternlab, null, 3)); + } + } + + function _getExtension(filename) { + var ext = filename.split('.'); + return ext[ext.length - 1]; + } + + function _renderTemplate(name, data, partials) { + var template = templates[name] || false; + + if (!template) { + console.log('Template ' + name + ' not found'); + return ''; + } + + if (!renderEngines[template.type]) { + throw new Error('Missing rendering engine for "' + templates.type + '"-templates'); + } + if (partials) { + return renderEngines[template.type].render(template.template, data, partials); + } + return renderEngines[template.type].render(template.template, data); + } + + function _readTemplate(src, type) { + var name = src; + if (arguments.length === 1) { + if (typeof src === 'object') { + name = src.name || src.src; + type = src.type || _getExtension(src.src); + src = src.src; + } else { + type = _getExtension(src); + } + } + var template = fs.readFileSync(src, 'utf8'); + + templates[name] = { + template: template, + type : type + }; + return { + render: function (data, partials) { + return _renderTemplate(name, data, partials); + } + }; + } + + function buildPatterns() { // removed callback variable - not used + patternlab.data = fs.readJSONSync('./source/_data/data.json'); + patternlab.listitems = fs.readJSONSync('./source/_data/listitems.json'); + + // Read header and footers + patternlab.header = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/header.html', 'utf8'); + patternlab.footer = _readTemplate({ + src : './source/_patternlab-files/pattern-header-footer/footer.html', + name : 'footer', + type : 'mustache' + }); + patternlab.readme = _readTemplate({ + src : './source/_patternlab-files/pattern-header-footer/readme.html', + name : 'readme', + type : 'mustache' + }); + + patternlab.patterns = []; + patternlab.patternIndex = []; + patternlab.partials = {}; + + diveSync(patternlab.config.patterns.source, function (err, file) { + //log any errors + if (err) { + console.log(err); + return; + } + + //extract some information + var abspath = file.substring(2), + subdir = path.dirname(path.relative('./source/_patterns', file)), + filename = path.basename(file); + + //check if the pattern already exists. + var patternName = filename.substring(0, filename.indexOf('.')), + //patternIndex = patternlab.patternIndex.indexOf(subdir + '-' + patternName), + currentPattern, + flatPatternPath; + + //Get file extension + var fileType = path.extname(file); + + //ignore _underscored patterns, json, and dotfiles + if (filename.charAt(0) === '_' || fileType === '.json' || fileType === '.md' || filename.charAt(0) === '.') { + return; + } + + //make a new Pattern Object + var flatPatternName = subdir.replace(/[\\\/]/g, '-') + '-' + patternName; + flatPatternName = flatPatternName.replace(/\\/g, '-'); + currentPattern = new of.oPattern(flatPatternName, subdir, filename, {}); + currentPattern.patternName = patternName.substring(patternName.indexOf('-') + 1); + currentPattern.data = null; + + //see if this file has a state + if (patternlab.config.patternStates[currentPattern.patternName]) { + currentPattern.patternState = patternlab.config.patternStates[currentPattern.patternName]; + } + + //look for a json file for this template + try { + var jsonFilename = abspath.substr(0, abspath.lastIndexOf(".")) + ".json"; + currentPattern.data = fs.readJSONSync(jsonFilename); + } catch (ignore) {} + + currentPattern.template = fs.readFileSync(abspath, 'utf8'); + + //render the pattern. pass partials object just in case. + if (currentPattern.data) { // Pass JSON as data + currentPattern.patternPartial = _readTemplate(abspath).render(currentPattern.data, patternlab.partials); + } else { // Pass global patternlab data + currentPattern.patternPartial = _readTemplate(abspath).render(patternlab.data, patternlab.partials); + } + + // Add readme docs + var readme = ''; + try { + var doc = abspath.substr(0, abspath.lastIndexOf('.')) + '.md'; + readme = patternlab.readme.render({ + readme: markdown.toHTML(fs.readFileSync(doc, {encoding: 'utf8'})) + }); + console.log(readme); + } catch (ignore) {} + + //write the compiled template to the public patterns directory + flatPatternPath = currentPattern.name + '/' + currentPattern.name + '.html'; + + //add footer info before writing + var currentPatternFooter = patternlab.footer.render(currentPattern); + + fs.outputFileSync('./public/patterns/' + flatPatternPath, patternlab.header + currentPattern.patternPartial + readme + currentPatternFooter); + currentPattern.patternLink = flatPatternPath; + + //add as a partial in case this is referenced later. convert to syntax needed by existing patterns + var sub = subdir.substring(subdir.indexOf('-') + 1); + var folderIndex = sub.indexOf('/'); //THIS IS MOST LIKELY WINDOWS ONLY. path.sep not working yet + var cleanSub = sub.substring(0, folderIndex); + + //add any templates found to an object of partials, so downstream templates may use them too + //exclude the template patterns - we don't need them as partials because pages will just swap data + if (cleanSub !== '') { + var partialname = cleanSub + '-' + patternName.substring(patternName.indexOf('-') + 1); + + patternlab.partials[partialname] = currentPattern.template; + + //done + } + + //add to patternlab arrays so we can look these up later. this could probably just be an object. + //patternlab.patternIndex.push(currentPattern.name); + patternlab.patterns.push(currentPattern); + }); + + } + + function addToPatternPaths(bucketName, pattern) { + //this is messy, could use a refactor. + patternlab.patternPaths[bucketName][pattern.patternName] = pattern.subdir.replace(/\\/g, '/') + "/" + pattern.filename.substring(0, pattern.filename.indexOf('.')); + } + + function buildFrontEnd() { + patternlab.buckets = []; + patternlab.bucketIndex = []; + patternlab.patternPaths = {}; + patternlab.viewAllPaths = {}; + + var styleguideHtml, + i, + l, + pattern, + bucket, + bucketName, + bucketIndex, + navItem, + navSubItem, + navSubItemName, + navItemName, + navItemIndex, + flatPatternItem; + + //build the styleguide + styleguideHtml = _readTemplate('./source/_patternlab-files/styleguide.mustache', 'mustache').render({partials: patternlab.patterns}); + fs.outputFileSync('./public/styleguide/html/styleguide.html', styleguideHtml); + + //loop through all patterns. deciding to do this separate from the recursion, even at a performance hit, to attempt to separate the tasks of styleguide creation versus site menu creation + for (i = 0, l = patternlab.patterns.length; i < l; i++) { + pattern = patternlab.patterns[i]; + bucketName = pattern.name.replace(/\\/g, '-').split('-')[1]; + + //check if the bucket already exists + bucketIndex = patternlab.bucketIndex.indexOf(bucketName); + if (bucketIndex === -1) { + //add the bucket + bucket = new of.oBucket(bucketName); + + //add paternPath + patternlab.patternPaths[bucketName] = {}; + + //get the navItem + navItemName = pattern.subdir.split('-').pop(); + + //get the navSubItem + navSubItemName = pattern.patternName.replace(/-/g, ' '); + + //test whether the pattern struture is flat or not - usually due to a template or page + flatPatternItem = false; + if (navItemName === bucketName) { + flatPatternItem = true; + } + + //assume the navItem does not exist. + navItem = new of.oNavItem(navItemName); + + //assume the navSubItem does not exist. + navSubItem = new of.oNavSubItem(navSubItemName); + navSubItem.patternPath = pattern.patternLink; + navSubItem.patternPartial = bucketName + "-" + pattern.patternName; //add the hyphenated name + + //add the patternState if it exists + if (pattern.patternState) { + navSubItem.patternState = pattern.patternState; + } + + //if it is flat - we should not add the pattern to patternPaths + if (flatPatternItem) { + bucket.patternItems.push(navSubItem); + + //add to patternPaths + addToPatternPaths(bucketName, pattern); + } else { + bucket.navItems.push(navItem); + bucket.navItemsIndex.push(navItemName); + navItem.navSubItems.push(navSubItem); + navItem.navSubItemsIndex.push(navSubItemName); + + //add to patternPaths + addToPatternPaths(bucketName, pattern); + } + + //add the bucket. + patternlab.buckets.push(bucket); + patternlab.bucketIndex.push(bucketName); + + //done + + } else { + //find the bucket + bucket = patternlab.buckets[bucketIndex]; + + //get the navItem + navItemName = pattern.subdir.split('-').pop(); + + //get the navSubItem + navSubItemName = pattern.patternName.replace(/-/g, ' '); + + //assume the navSubItem does not exist. + navSubItem = new of.oNavSubItem(navSubItemName); + navSubItem.patternPath = pattern.patternLink; + navSubItem.patternPartial = bucketName + "-" + pattern.patternName; //add the hyphenated name + + //add the patternState if it exists + if (pattern.patternState) { + navSubItem.patternState = pattern.patternState; + } + + //test whether the pattern struture is flat or not - usually due to a template or page + flatPatternItem = false; + if (navItemName === bucketName) { + flatPatternItem = true; + } + + //if it is flat - we should not add the pattern to patternPaths + if (flatPatternItem) { + + //add the navItem to patternItems + bucket.patternItems.push(navSubItem); + + //add to patternPaths + addToPatternPaths(bucketName, pattern); + + } else { + //check to see if navItem exists + navItemIndex = bucket.navItemsIndex.indexOf(navItemName); + if (navItemIndex === -1) { + + navItem = new of.oNavItem(navItemName); + + //add the navItem and navSubItem + navItem.navSubItems.push(navSubItem); + navItem.navSubItemsIndex.push(navSubItemName); + bucket.navItems.push(navItem); + bucket.navItemsIndex.push(navItemName); + + } else { + //add the navSubItem + navItem = bucket.navItems[navItemIndex]; + navItem.navSubItems.push(navSubItem); + navItem.navSubItemsIndex.push(navSubItemName); + } + + // just add to patternPaths + addToPatternPaths(bucketName, pattern); + } + + } + + } + + //the patternlab site requires a lot of partials to be rendered. + //patternNav + var patternNavPartialHtml = _readTemplate('./source/_patternlab-files/partials/patternNav.mustache').render(patternlab); + + //ishControls + var ishControlsPartialHtml = _readTemplate('./source/_patternlab-files/partials/ishControls.mustache').render(patternlab.config); + + //patternPaths + var patternPathsPartialHtml = _readTemplate('./source/_patternlab-files/partials/patternPaths.mustache').render({'patternPaths': JSON.stringify(patternlab.patternPaths)}); + + //viewAllPaths + var viewAllPathersPartialHtml = _readTemplate('./source/_patternlab-files/partials/viewAllPaths.mustache').render({'viewallpaths': JSON.stringify(patternlab.viewAllPaths)}); + + //websockets + patternlab.contentsyncport = patternlab.config.contentSyncPort; + patternlab.navsyncport = patternlab.config.navSyncPort; + + var websocketsPartialHtml = _readTemplate('./source/_patternlab-files/partials/websockets.mustache').render(patternlab); + + //render the patternlab template, with all partials + var patternlabSiteHtml = _readTemplate('./source/_patternlab-files/index.mustache').render({}, { + 'ishControls': ishControlsPartialHtml, + 'patternNav': patternNavPartialHtml, + 'patternPaths': patternPathsPartialHtml, + 'websockets': websocketsPartialHtml, + 'viewAllPaths': viewAllPathersPartialHtml + }); + fs.outputFileSync('./public/index.html', patternlabSiteHtml); + } + + return { + version: function () { + return getVersion(); + }, + build: function () { + buildPatterns(); + buildFrontEnd(); + printDebug(); + }, + help: function () { + help(); + }, + build_patterns_only: function () { + buildPatterns(); + printDebug(); + } + }; }; diff --git a/config.json b/config.json index 65a6e56fa..b094156fe 100644 --- a/config.json +++ b/config.json @@ -1,33 +1,36 @@ - { - "patterns" : { - "source" : "./source/_patterns/", - "public" : "./public/patterns/" - }, - "ignored-extensions" : ["scss", "DS_Store", "less"], - "ignored-directories" : ["scss"], - "contentSyncPort" : 8002, - "navSyncPort" : 8003, - "debug": false, - "ishControlsVisible": { - "s": true, - "m": true, - "l": true, - "full": true, - "ranndom": true, - "disco": true, - "hay": true, - "mqs": false, - "find": false, - "views-all": true, - "views-annotations": true, - "views-code": true, - "views-new": true, - "tools-all": true, - "tools-follow": false, - "tools-reload": false, - "tools-shortcuts": false, - "tools-docs": true - }, - "patternStates": { - } - } \ No newline at end of file +{ + "patterns" : { + "source" : "./source/_patterns/", + "public" : "./public/patterns/" + }, + "ignored-extensions" : ["scss", "DS_Store", "less"], + "ignored-directories" : ["scss"], + "rendering-engines": { + "mustache": "../lib/render_engines/mustache.js" + }, + "contentSyncPort" : 8002, + "navSyncPort" : 8003, + "debug": false, + "ishControlsVisible": { + "s": true, + "m": true, + "l": true, + "full": true, + "ranndom": true, + "disco": true, + "hay": true, + "mqs": false, + "find": false, + "views-all": true, + "views-annotations": true, + "views-code": true, + "views-new": true, + "tools-all": true, + "tools-follow": false, + "tools-reload": false, + "tools-shortcuts": false, + "tools-docs": true + }, + "patternStates": { + } +} \ No newline at end of file diff --git a/lib/render_engines/mustache.js b/lib/render_engines/mustache.js new file mode 100644 index 000000000..832e37ba0 --- /dev/null +++ b/lib/render_engines/mustache.js @@ -0,0 +1,14 @@ +/*jslint indent:4*/ +'use strict'; +var mustache = require('mustache'); + +function render(name, data, partials) { + if (partials) { + return mustache.render(name, data, partials); + } + return mustache.render(name, data); +} + +module.exports = { + render: render +}; \ No newline at end of file diff --git a/package.json b/package.json index 6d8487426..b660d96db 100644 --- a/package.json +++ b/package.json @@ -3,19 +3,19 @@ "description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).", "version": "0.1.3", "devDependencies": { + "diveSync": "^0.2.1", + "fs-extra": "^0.10.0", "grunt": "~0.4.0", - "grunt-contrib-watch": "~0.2.0", - "grunt-contrib-sass": "~0.2.2", - "grunt-contrib-copy": "~0.4.0", - "grunt-contrib-jshint": "~0.4.0", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-concat": "~0.3.0", - "grunt-contrib-nodeunit": "~0.3.0", "grunt-contrib-connect": "^0.8.0", - "mustache": "~0.8.1", + "grunt-contrib-copy": "~0.4.0", + "grunt-contrib-jshint": "~0.4.0", + "grunt-contrib-nodeunit": "~0.3.0", + "grunt-contrib-sass": "^0.8.1", + "grunt-contrib-watch": "~0.2.0", "matchdep": "~0.3.0", - "fs-extra": "^0.10.0", - "diveSync": "^0.2.1" + "mustache": "~0.8.1" }, "keywords": [ "Pattern Lab", @@ -35,5 +35,8 @@ }, "engines": { "node": ">=0.1" + }, + "dependencies": { + "markdown": "^0.5.0" } } diff --git a/public/listeners/synclisteners.js b/public/listeners/synclisteners.js index a76ee4921..94edfec35 100644 --- a/public/listeners/synclisteners.js +++ b/public/listeners/synclisteners.js @@ -18,7 +18,7 @@ var wsnConnected = false; var wsc; var wscConnected = false; var dataPrevious = 0; -var host = (window.location.host != "") ? window.location.host : "127.0.0.1"; +var host = (window.location.host !== '') ? window.location.hostname : '127.0.0.1'; // handle page updates from one browser to another function connectNavSync() { @@ -26,6 +26,7 @@ function connectNavSync() { if ('WebSocket' in window && window.WebSocket.CLOSING === 2) { var navSyncCopy = "Page Follow"; + wsn = new WebSocket("ws://"+host+":"+navSyncPort+"/navsync"); // when trying to open a connection to WebSocket update the pattern lab nav bar diff --git a/public/styleguide/css/static.css b/public/styleguide/css/static.css index e69de29bb..ba6048be1 100644 --- a/public/styleguide/css/static.css +++ b/public/styleguide/css/static.css @@ -0,0 +1,457 @@ +@charset "UTF-8"; +/* +colors +red: $orange; rgb(229,24,55) +gray: #808080; +*/ +/************Reset**************/ +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html, body, div, object, iframe, fieldset { + margin: 0; + padding: 0; + border: 0; +} + +ol, ul { + list-style: none; + margin: 0; + padding: 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +header, footer, nav, section, article, hgroup, figure { + display: block; +} + +legend { + display: none; +} + +/************End Reset**************/ +/************Global**************/ +body { + background: #fff; + color: #000; + font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif; + padding: 0; + -webkit-text-size-adjust: 100%; + border-top: 20px solid #000; + border-bottom: 20px solid #000; +} + +a { + color: #808080; + text-decoration: none; +} + +a:hover, a:focus { + color: #bededf; +} + +p { + margin: 0 0 1em; +} + +img, object, video { + max-width: 100%; + border: 0; +} + +a img { + border: 0; + outline: 0; +} + +h1 { + font-size: 3em; + line-height: 1; + letter-spacing: -0.02em; + margin-bottom: 0.2em; +} + +h2 { + font-size: 2em; + line-height: 1.1; + margin-bottom: 0.2em; +} + +h3 { + font-weight: normal; + line-height: 1.1; + padding-bottom: 0.4em; + border-bottom: 1px solid #ccc; +} + +h1 a, h2 a, h3 a { + display: block; + color: #000; +} + +h1 a:hover, h2 a:hover, h3 a:hover { + color: #bededf; +} + +blockquote { + border-left: 0.5em solid #ddd; + padding-left: 1em; + margin-left: 1em; +} + +small { + color: #bededf; +} + +input[type=search] { + -webkit-appearance: none; + border-radius: 0; +} + +::-webkit-input-placeholder { + color: #808080; +} + +:-moz-placeholder { + color: #808080; +} + +/************End Global**************/ +/************Classes**************/ +.inactive { + color: #ddd; +} + +/************End Classes**************/ +/************Structure**************/ +.container { + max-width: 60em; + margin: 0 auto; + padding: 0 1em; + overflow: hidden; +} + +[role=main] { + padding-bottom: 1em; +} + +/*Footer*/ +[role=contentinfo] { + color: #fff; + background: #000; + margin: 0 -1em; + position: relative; + z-index: 2; +} +[role=contentinfo] > div { + max-width: 60em; + padding: 0 1em; + margin: 0 auto; + overflow: hidden; +} + +/*End Footer*/ +/*Grid*/ +.grid { + margin: 0 -1em; + overflow: hidden; +} + +.grid:target { + -webkit-animation: fadeout 5s 1 ease-out; + -moz-animation: fadeout 5s 1 ease-out; + -o-animation: fadeout 5s 1 ease-out; + animation: fadeout 5s 1 ease-out; +} + +.grid > h2 { + margin-left: 0.45em; +} + +.grid > section { + padding: 1em 1em 0.5em; +} + +.grid > section:target { + -webkit-animation: fadeout 5s 1 ease-out; + -moz-animation: fadeout 5s 1 ease-out; + -o-animation: fadeout 5s 1 ease-out; + animation: fadeout 5s 1 ease-out; +} + +.grid ul { + overflow: hidden; +} + +.grid ul li { + margin-bottom: 0.3em; +} + +.featured:after { + content: "*"; + color: #bededf; +} + +/*Fluid*/ +.fluid { + display: block; + margin: 0 auto; + max-width: 40em; +} + +/*Homepage*/ +.home h1 { + margin-bottom: 0.2em; +} + +.intro { + font-size: 1.8em; + line-height: 1.2; + margin: 0 auto; +} + +.intro a:hover, .intro a:focus { + color: #000; + border-bottom-color: #000; +} + +.ani { + position: relative; + height: 15em; + margin: 1em 0 0; + width: 100%; + z-index: 0; +} + +.ani div { + width: 100%; +} + +.ani div b { + display: block; + position: absolute; + top: 5%; + right: 5%; + bottom: 5%; + left: 5%; + background: rgba(229, 24, 55, 0.22); +} + +/*Patterns*/ +.mod { + padding: 1em; +} + +.pattern { + background: #f7f7f7; + border-bottom: 1px solid #808080; + margin-bottom: 1em; + overflow: hidden; +} + +.pattern-description h1 { + font-size: 3.4em; + margin-bottom: 0.5em; +} + +.pattern-description { + max-width: 40em; + margin: 0 auto; +} + +.pattern-description ul, .pattern-description ol { + margin-bottom: 2em; +} + +.pattern-description li { + margin-bottom: 1em; +} + +/*Blog*/ +/*Blog Header*/ +.blog .container { + max-width: 62em; +} + +.blog header[role=banner] { + overflow: hidden; + margin-bottom: 2em; + padding: 2em 0 1em; + border-bottom: 1px solid #000; +} + +.blog-logo { + font-weight: normal; + font-size: 1.2em; + margin: 0 0 1em; +} + +.blog-logo img { + width: 3.3em; +} + +.blog-logo a { + color: #000; +} + +.search-form { + width: 100%; + margin-bottom: 1em; +} + +.search-field { + width: 100%; + padding: 0.5em 0; + border: 0; + border-bottom: 1px solid #808080; + outline: none; +} + +.search-field:focus { + background: #bededf; + color: #fff; +} + +.search-field:focus::-webkit-input-placeholder { + color: #fff; +} + +.search-field:focus :-moz-placeholder { + color: #fff; +} + +.blog .nav { + clear: both; +} + +.blog .nav a { + display: block; + font-weight: bold; + color: #000; +} + +.blog .nav a:hover { + color: #bededf; +} + +/*Posts*/ +.posts ol > li { + padding-bottom: 1em; + border-bottom: 1px solid #ccc; + margin-bottom: 1em; + overflow: hidden; +} + +.posts h2 { + font-size: 1.4em; + margin: 0.28em 0 0.1em; + font-weight: normal; +} + +.posts h2 a { + color: #000; +} + +.posts h2 a:hover, .posts h2 a:focus { + color: #bededf; +} + +.permalink { + display: block; + font-size: 0.8em; + margin-bottom: 1.2em; +} + +.post-body a { + border-bottom: 1px solid #ccc; +} + +.posts blockquote { + margin: 0 0 1em; + color: #666; + border-left: 0.25em solid #ccc; + padding-left: 1em; +} + +.tags { + float: left; +} + +.tags li { + display: inline-block; + font-size: 0.8em; + margin-right: 0.5em; +} + +.posts ol > li .tags a, .permalink { + color: #ccc; + -webkit-transition: color 0.3s ease-out; + -moz-transition: color 0.3s ease-out; + -ms-transition: color 0.3s ease-out; + -o-transition: color 0.3s ease-out; + transition: color 0.3s ease-out; +} + +.posts ol > li:hover .tags a, .posts ol > li:hover .permalink { + color: #808080; +} + +.blog-nav { + text-align: center; + overflow: hidden; + padding: 1em 0; +} + +.posts .blog-nav a { + border: 0; +} + +.nav-next { + float: right; +} + +.nav-prev { + float: left; +} + +/* Sidebar */ +.sidebar { + font-size: 0.8em; + padding-bottom: 1.4em; +} + +.sidebar div { + margin-bottom: 2em; +} + +.sidebar h3 { + font-weight: bold; + font-size: 0.9em; + line-height: 1; + border-bottom: 1px solid #000; +} + +.sidebar a { + color: #808080; +} + +.sidebar a:hover, .sidebar a:focus { + color: #bededf; +} + +.top { + clear: both; + display: block; + padding: 1em 0; +} + +.top:before { + content: '▲'; +} diff --git a/public/styleguide/css/static.css.map b/public/styleguide/css/static.css.map new file mode 100644 index 000000000..ba4ca1494 --- /dev/null +++ b/public/styleguide/css/static.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["file:///Users/tor/projects/patternlab-node/public/styleguide/css/static.scss"], +"names": [], +"file": "static.css" +} diff --git a/public/styleguide/css/styleguide.css b/public/styleguide/css/styleguide.css index 459a602d7..7c097b592 100644 --- a/public/styleguide/css/styleguide.css +++ b/public/styleguide/css/styleguide.css @@ -52,12 +52,14 @@ #patternlab-html, #patternlab-body { margin: 0; padding: 0; - background: #dddddd; - -webkit-text-size-adjust: 100%; } + background: #ddd; + -webkit-text-size-adjust: 100%; +} .sg-nav-wrapper { overflow: hidden; - background: #dddddd; } + background: #ddd; +} .is-vishidden { position: absolute !important; @@ -66,78 +68,93 @@ height: 1px; padding: 0; border: 0; - clip: rect(1px, 1px, 1px, 1px); } + clip: rect(1px, 1px, 1px, 1px); +} .sg-cf, .sg-pattern { - /**zoom: 1;*/ } - .sg-cf:before, .sg-pattern:before, .sg-cf:after, .sg-pattern:after { - content: " "; - display: table; } - .sg-cf:after, .sg-pattern:after { - clear: both; } + /**zoom: 1;*/ +} +.sg-cf:before, .sg-pattern:before, .sg-cf:after, .sg-pattern:after { + content: " "; + display: table; +} +.sg-cf:after, .sg-pattern:after { + clear: both; +} /*------------------------------------*\ $PATTERN LAB HEADER \*------------------------------------*/ /* Header */ .sg-header { - background: #222222; - color: white; + background: #222; + color: #fff; font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif; text-transform: uppercase; position: fixed; top: 0; left: 0; z-index: 2; - width: 100%; } - .sg-header * { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; } - .sg-header ul, .sg-header ol { - padding: 0; - margin: 0; } - .sg-header li { - list-style: none; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); } - .sg-header a { - font-size: 70%; - color: gray; - text-decoration: none; - display: block; - line-height: 1; - padding: 1em; - -webkit-transition: background 0.15s ease-out; - -moz-transition: background 0.15s ease-out; - -ms-transition: background 0.15s ease-out; - -o-transition: background 0.15s ease-out; - transition: background 0.15s ease-out; - -webkit-transition: color 0.15s ease-out; - -moz-transition: color 0.15s ease-out; - -ms-transition: color 0.15s ease-out; - -o-transition: color 0.15s ease-out; - transition: color 0.15s ease-out; } - .sg-header a:hover, .sg-header a:focus, .sg-header a.active { - color: white; - background: rgba(255, 255, 255, 0.05); } - .sg-header ol ol ol a { - padding-left: 2em; - text-transform: none; } + width: 100%; +} +.sg-header * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +.sg-header ul, .sg-header ol { + padding: 0; + margin: 0; +} +.sg-header li { + list-style: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} +.sg-header a { + font-size: 70%; + color: #808080; + text-decoration: none; + display: block; + line-height: 1; + padding: 1em; + -webkit-transition: background 0.15s ease-out; + -moz-transition: background 0.15s ease-out; + -ms-transition: background 0.15s ease-out; + -o-transition: background 0.15s ease-out; + transition: background 0.15s ease-out; + -webkit-transition: color 0.15s ease-out; + -moz-transition: color 0.15s ease-out; + -ms-transition: color 0.15s ease-out; + -o-transition: color 0.15s ease-out; + transition: color 0.15s ease-out; +} +.sg-header a:hover, .sg-header a:focus, .sg-header a.active { + color: #fff; + background: rgba(255, 255, 255, 0.05); +} +.sg-header ol ol ol a { + padding-left: 2em; + text-transform: none; +} /* Navigation */ .sg-header .sg-nav-toggle { display: inline-block; padding: 0.9em 1em; - border-bottom: 1px solid rgba(0, 0, 0, 0); + border-bottom: 1px solid transparent; position: relative; text-transform: uppercase; - z-index: 2; } - .sg-header .sg-nav-toggle span { - display: inline-block; - padding-right: 0.2em; } - @media all and (min-width: 48em) { - .sg-header .sg-nav-toggle { - display: none; } } + z-index: 2; +} +.sg-header .sg-nav-toggle span { + display: inline-block; + padding-right: 0.2em; +} +@media all and (min-width: 48em) { + .sg-header .sg-nav-toggle { + display: none; + } +} @media all and (max-width: 48em) { .sg-nav-container { @@ -147,48 +164,63 @@ -moz-transition: max-height 0.1s ease-out; -ms-transition: max-height 0.1s ease-out; -o-transition: max-height 0.1s ease-out; - transition: max-height 0.1s ease-out; } - .sg-nav-container.active { - max-height: 50em; } } + transition: max-height 0.1s ease-out; + } + .sg-nav-container.active { + max-height: 50em; + } +} .sg-nav { z-index: 1; margin: 0; padding: 0; - list-style: none; } + list-style: none; +} +.sg-nav > li { + cursor: pointer; +} +@media all and (min-width: 48em) { .sg-nav > li { - cursor: pointer; } - @media all and (min-width: 48em) { - .sg-nav > li { - border-bottom: 0; - border-right: 1px solid rgba(255, 255, 255, 0.05); - float: left; - position: relative; } - .sg-nav > li > ol { - position: absolute; - top: 2em; - left: 0; } } + border-bottom: 0; + border-right: 1px solid rgba(255, 255, 255, 0.05); + float: left; + position: relative; + } + .sg-nav > li > ol { + position: absolute; + top: 2em; + left: 0; + } +} /* Accordion */ .sg-acc-handle:after { content: ' +'; float: right; - font-size: 70%; } - @media all and (min-width: 48em) { - .sg-acc-handle:after { - float: none; } } + font-size: 70%; +} +@media all and (min-width: 48em) { + .sg-acc-handle:after { + float: none; + } +} .sg-acc-handle.active { - color: white; - background: rgba(255, 255, 255, 0.05); } - .sg-acc-handle.active:after { - content: ' -'; } + color: #fff; + background: rgba(255, 255, 255, 0.05); +} +.sg-acc-handle.active:after { + content: ' -'; +} .sg-acc-handle.sg-icon:after { - content: ""; } + content: ""; +} .sg-header .sg-icon { width: auto; font-size: 1rem; - padding: 0.5rem 1rem; } + padding: 0.5rem 1rem; +} .sg-acc-panel { overflow: hidden; @@ -198,22 +230,28 @@ -moz-transition: max-height 0.1s ease-out; -ms-transition: max-height 0.1s ease-out; -o-transition: max-height 0.1s ease-out; - transition: max-height 0.1s ease-out; } - .sg-acc-panel li { - background: #222222; } - .sg-acc-panel.active { - max-height: 120em; - overflow: auto; } - .sg-acc-panel.sg-right { - position: absolute; - left: auto; - right: 0; } - .sg-acc-panel.sg-left { - position: absolute; - left: auto; } - .sg-acc-panel [class^="sg-icon-"]:before { - display: inline-block; - margin-right: 0.4em; } + transition: max-height 0.1s ease-out; +} +.sg-acc-panel li { + background: #222; +} +.sg-acc-panel.active { + max-height: 120em; + overflow: auto; +} +.sg-acc-panel.sg-right { + position: absolute; + left: auto; + right: 0; +} +.sg-acc-panel.sg-left { + position: absolute; + left: auto; +} +.sg-acc-panel [class^="sg-icon-"]:before { + display: inline-block; + margin-right: 0.4em; +} /* Controls (sizing, view mode) */ .sg-controls { @@ -221,74 +259,99 @@ position: absolute; top: 0; right: 0; - z-index: 2; } + z-index: 2; +} .sg-control-trigger { - border-bottom: 1px solid rgba(255, 255, 255, 0.05); } - @media all and (min-width: 48em) { - .sg-control-trigger { - border: 0; } } - @media all and (min-width: 72em) { - .sg-control-trigger { - float: left; - width: 6em; } } + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} +@media all and (min-width: 48em) { + .sg-control-trigger { + border: 0; + } +} +@media all and (min-width: 72em) { + .sg-control-trigger { + float: left; + width: 6em; + } +} .sg-control > li { - float: left; } - @media all and (min-width: 48em) { - .sg-control > li { - border-bottom: 0; - border-left: 1px solid rgba(255, 255, 255, 0.05); } } + float: left; +} +@media all and (min-width: 48em) { + .sg-control > li { + border-bottom: 0; + border-left: 1px solid rgba(255, 255, 255, 0.05); + } +} .sg-control .sg-input { padding: 0.1em; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; - transition: all 0.2s ease-out; } - .sg-control .sg-input:active, .sg-control .sg-input:focus { - outline: 0; - background: #999999; - color: #000; } + transition: all 0.2s ease-out; +} +.sg-control .sg-input:active, .sg-control .sg-input:focus { + outline: 0; + background: #999; + color: #000; +} .sg-current-size { font-size: 70%; - color: gray; - padding: 0.85em 0.7em; } - .sg-current-size:hover .sg-input { - background: #999999; - color: #000; } - @media all and (min-width: 72em) { - .sg-current-size { - float: left; } } + color: #808080; + padding: 0.85em 0.7em; +} +.sg-current-size:hover .sg-input { + background: #999; + color: #000; +} +@media all and (min-width: 72em) { + .sg-current-size { + float: left; + } +} .sg-size { - width: 135px; } - @media all and (min-width: 48em) { - .sg-size { - width: auto; } } + width: 135px; +} +@media all and (min-width: 48em) { + .sg-size { + width: auto; + } +} @media all and (min-width: 72em) { .sg-size-options { float: left; position: static; max-height: none; - max-width: none; } - .sg-size-options > li { - float: left; - border: 0; - border-left: 1px solid rgba(255, 255, 255, 0.05); } } + max-width: none; + } + .sg-size-options > li { + float: left; + border: 0; + border-left: 1px solid rgba(255, 255, 255, 0.05); + } +} #sg-size-mq { - display: none; } - @media all and (min-width: 72em) { - #sg-size-mq { - display: block; } } + display: none; +} +@media all and (min-width: 72em) { + #sg-size-mq { + display: block; + } +} #sg-form { margin: 0; border: 0; - padding: 0; } + padding: 0; +} .sg-input { margin: -2px 0 0 0; @@ -297,25 +360,32 @@ background-color: #222; color: gray; width: 25px; - text-align: right; } - @media all and (min-width: 48em) { - .sg-input { - width: 35px; } } + text-align: right; +} +@media all and (min-width: 48em) { + .sg-input { + width: 35px; + } +} .sg-input-active { background-color: #fff; - color: #000; } + color: #000; +} .sg-view { - position: relative; } - .sg-view > ul { - position: absolute; - top: 2em; - left: 0; } + position: relative; +} +.sg-view > ul { + position: absolute; + top: 2em; + left: 0; +} .sg-checkbox:before { display: inline-block; - margin-right: 0.4em; } + margin-right: 0.4em; +} /* basic styling */ .sg-pattern-state:before { @@ -324,7 +394,8 @@ display: inline-block; margin-bottom: -4px; font-size: 18px; - vertical-align: bottom; } + vertical-align: bottom; +} /* nav styling */ .sg-nav .sg-pattern-state:before { @@ -333,29 +404,36 @@ margin-left: -4px; height: 20px; display: block; - float: left; } + float: left; +} .sg-sub-nav .sg-pattern-state:before { margin-left: -11px; - margin-right: 4px; } + margin-right: 4px; +} /* call out for pattern's pattern state */ span.sg-pattern-state { - color: #999; } + color: #999; +} span.sg-pattern-state:before { margin-bottom: -3px; - margin-left: 4px; } + margin-left: 4px; +} /* pattern states */ .inprogress:before { - color: #FF4136 !important; } + color: #FF4136 !important; +} .inreview:before { - color: #FFCC00 !important; } + color: #FFCC00 !important; +} .complete:before { - color: #2ECC40 !important; } + color: #2ECC40 !important; +} /*------------------------------------*\ $PATTERN LAB VIEWPORT @@ -369,13 +447,15 @@ span.sg-pattern-state:before { bottom: 0; left: 0; right: 0; - z-index: 0; } - #sg-vp-wrap.wrap-animate { - -webkit-transition: left 0.3s ease-out; - -moz-transition: left 0.3s ease-out; - -ms-transition: left 0.3s ease-out; - -o-transition: left 0.3s ease-out; - transition: left 0.3s ease-out; } + z-index: 0; +} +#sg-vp-wrap.wrap-animate { + -webkit-transition: left 0.3s ease-out; + -moz-transition: left 0.3s ease-out; + -ms-transition: left 0.3s ease-out; + -o-transition: left 0.3s ease-out; + transition: left 0.3s ease-out; +} #sg-viewport { position: absolute; @@ -388,18 +468,22 @@ span.sg-pattern-state:before { bottom: 0; left: 0; right: 0; - background-color: white; } - #sg-viewport.hay-mode { - -webkit-transition: all 40s linear; - -moz-transition: all 40s linear; - -ms-transition: all 40s linear; - -o-transition: all 40s linear; - transition: all 40s linear; } + background-color: white; +} +#sg-viewport.hay-mode { + -webkit-transition: all 40s linear; + -moz-transition: all 40s linear; + -ms-transition: all 40s linear; + -o-transition: all 40s linear; + transition: all 40s linear; +} .no-resize #sg-cover, .no-resize #sg-rightpull-container { - display: none; } + display: none; +} .no-resize #sg-viewport { - overflow: hidden !important; } + overflow: hidden !important; +} #sg-cover { width: 100%; @@ -407,7 +491,8 @@ span.sg-pattern-state:before { display: none; position: absolute; z-index: 20; - cursor: col-resize; } + cursor: col-resize; +} #sg-gen-container { height: 100%; @@ -416,20 +501,23 @@ span.sg-pattern-state:before { margin: 0 auto; -webkit-overflow-scrolling: touch; overflow-y: auto; - overflow-x: hidden; } - #sg-gen-container.hay-mode { - -webkit-transition: all 40s linear; - -moz-transition: all 40s linear; - -ms-transition: all 40s linear; - -o-transition: all 40s linear; - transition: all 40s linear; } + overflow-x: hidden; +} +#sg-gen-container.hay-mode { + -webkit-transition: all 40s linear; + -moz-transition: all 40s linear; + -ms-transition: all 40s linear; + -o-transition: all 40s linear; + transition: all 40s linear; +} #sg-rightpull-container { width: 14px; float: right; margin: 0; height: 100%; - cursor: col-resize; } + cursor: col-resize; +} #sg-rightpull { margin: 0; @@ -440,19 +528,23 @@ span.sg-pattern-state:before { -moz-transition: background 0.2s ease-out; -ms-transition: background 0.2s ease-out; -o-transition: background 0.2s ease-out; - transition: background 0.2s ease-out; } - #sg-rightpull:hover { - background: #666; } - #sg-rightpull:active { - cursor: col-resize; - background: #444; } + transition: background 0.2s ease-out; +} +#sg-rightpull:hover { + background: #666; +} +#sg-rightpull:active { + cursor: col-resize; + background: #444; +} .vp-animate { -webkit-transition: width 0.8s ease-out; -moz-transition: width 0.8s ease-out; -ms-transition: width 0.8s ease-out; -o-transition: width 0.8s ease-out; - transition: width 0.8s ease-out; } + transition: width 0.8s ease-out; +} /*------------------------------------*\ $PATTERN LAB CONTENT @@ -460,7 +552,8 @@ span.sg-pattern-state:before { /* Section Pattern */ .sg-pattern { margin-bottom: 2em; - position: relative; } + position: relative; +} /* Section Head */ .sg-pattern-head { @@ -469,14 +562,17 @@ span.sg-pattern-state:before { font-size: 70%; font-weight: normal; padding: 1em 0; - border-bottom: 1px solid gray; } - .sg-pattern-head a { - display: block; - color: gray; - text-decoration: none; - cursor: pointer; } - .sg-pattern-head a:hover { - color: #222222; } + border-bottom: 1px solid #808080; +} +.sg-pattern-head a { + display: block; + color: #808080; + text-decoration: none; + cursor: pointer; +} +.sg-pattern-head a:hover { + color: #222; +} .sg-view-container { -moz-box-sizing: border-box; @@ -485,8 +581,8 @@ span.sg-pattern-state:before { font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif; line-height: 1.4; font-size: 90%; - background: #222222; - color: gray; + background: #222; + color: #808080; position: fixed; top: auto; padding: 1em; @@ -496,39 +592,49 @@ span.sg-pattern-state:before { width: 100%; height: 50%; overflow-y: auto; - overflow-x: hidden; } - .sg-view-container a { - color: #999999; } - .sg-view-container pre { - padding: 0 1em; } - .sg-view-container.anim-ready { - -webkit-transition: bottom 0.3s ease-out; - -moz-transition: bottom 0.3s ease-out; - -webkit-transition: bottom 0.3s ease-out; - -ms-transition: bottom 0.3s ease-out; - -o-transition: bottom 0.3s ease-out; - transition: bottom 0.3s ease-out; } + overflow-x: hidden; +} +.sg-view-container a { + color: #999; +} +.sg-view-container pre { + padding: 0 1em; +} +.sg-view-container.anim-ready { + -webkit-transition: bottom 0.3s ease-out; + -moz-transition: bottom 0.3s ease-out; + -webkit-transition: bottom 0.3s ease-out; + -ms-transition: bottom 0.3s ease-out; + -o-transition: bottom 0.3s ease-out; + transition: bottom 0.3s ease-out; +} .sg-view-close { width: 100%; - margin-bottom: -10px; } + margin-bottom: -10px; +} .sg-view-close-btn { color: #fff; text-transform: uppercase; text-decoration: none; text-align: right; - display: block; } + display: block; +} .has-annotation { cursor: help !important; - box-shadow: 0 0 10px gray; } - .has-annotation a, .has-annotation input { - cursor: help !important; } - .has-annotation:hover { - box-shadow: 0 0 10px #222222; } - .has-annotation.active { - box-shadow: inset 0 0 20px gray; } + box-shadow: 0 0 10px #808080; +} +.has-annotation a, .has-annotation input { + cursor: help !important; +} +.has-annotation:hover { + box-shadow: 0 0 10px #222; +} +.has-annotation.active { + box-shadow: inset 0 0 20px #808080; +} .annotation-tip { display: block; @@ -543,29 +649,36 @@ span.sg-pattern-state:before { color: #fff !important; font-weight: bold !important; font-size: 16px !important; - z-index: 100; } + z-index: 100; +} #sg-comments-container { max-width: 60em; - margin: 0 auto; } + margin: 0 auto; +} .sg-comment-container { padding-bottom: 2em; margin-bottom: 1em; - border-bottom: 1px solid rgba(255, 255, 255, 0.25); } - .sg-comment-container p:last-child { - margin-bottom: 0; } - .sg-comment-container h2 { - margin-bottom: 0.25em; } + border-bottom: 1px solid rgba(255, 255, 255, 0.25); +} +.sg-comment-container p:last-child { + margin-bottom: 0; +} +.sg-comment-container h2 { + margin-bottom: 0.25em; +} .sg-code, .sg-annotations { clear: both; - background: #dddddd; - color: #222222; + background: #ddd; + color: #222; padding: 1em 0.5em; - margin: 1em 0; } - .sg-code a, .sg-annotations a { - text-decoration: underline; } + margin: 1em 0; +} +.sg-code a, .sg-annotations a { + text-decoration: underline; +} .sg-code pre { white-space: -moz-pre-line; @@ -574,30 +687,36 @@ span.sg-pattern-state:before { word-wrap: break-word; white-space: pre-line; border: 1px solid rgba(0, 0, 0, 0.1); - padding: 0.5em; } + padding: 0.5em; +} .sg-code-contains { margin-bottom: 1rem; font-size: 85%; - color: gray; } - .sg-code-contains code { - padding: 0.2em; - background: rgba(0, 0, 0, 0.3); - color: #999999; - position: relative; - top: -2px; } + color: #808080; +} +.sg-code-contains code { + padding: 0.2em; + background: rgba(0, 0, 0, 0.3); + color: #999; + position: relative; + top: -2px; +} .sg-code-head { - color: gray; - font-size: 1em; } + color: #808080; + font-size: 1em; +} #sg-code-markup { - padding-top: 10px; } + padding-top: 10px; +} #sg-code-tabs { list-style: none; margin: 0; - padding: 0; } + padding: 0; +} #sg-code-tabs li { float: left; @@ -607,17 +726,21 @@ span.sg-pattern-state:before { padding: 5px 15px; border-top: 2px solid #666; margin-right: 2px; - cursor: pointer; } + cursor: pointer; +} .sg-code-title-active { color: #bbb; - background-color: #272822 !important; } + background-color: #272822 !important; +} div.clear { - clear: both; } + clear: both; +} .sg-code-patternname { - color: #aaa; } + color: #aaa; +} #sg-code-loader { display: none; @@ -629,7 +752,8 @@ div.clear { text-align: center; border-radius: 10px; background-color: #000; - z-index: 100; } + z-index: 100; +} .spinner { height: 30px; @@ -640,16 +764,17 @@ div.clear { background-repeat: no-repeat; background: url("../images/spinner.gif"); border-radius: 50%; - opacity: .7; } + opacity: .7; +} /* Pattern Lab icon fonts */ @font-face { font-family: 'icomoon'; - src: url("../fonts/icomoon.eot"); - src: url("../fonts/icomoon.eot") format("embedded-opentype"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype"), url("../fonts/icomoon.svg") format("svg"); + src: url("../fonts/icomoon.eot?srsv7g"); + src: url("../fonts/icomoon.eot?#iefixsrsv7g") format("embedded-opentype"), url("../fonts/icomoon.woff?srsv7g") format("woff"), url("../fonts/icomoon.ttf?srsv7g") format("truetype"), url("../fonts/icomoon.svg?srsv7g#icomoon") format("svg"); font-weight: normal; - font-style: normal; } - + font-style: normal; +} .sg-icon-search, .sg-icon-cog, .sg-icon-minus, .sg-icon-plus, .sg-icon-menu, .sg-icon-radio-checked, .sg-checkbox.active, .sg-icon-radio-unchecked, .sg-checkbox, .sg-icon-file, .sg-icon-link, .sg-icon-keyboard, .sg-icon-qrcode, .sg-icon-eye, .sg-checkbox { font-family: 'icomoon'; speak: none; @@ -660,44 +785,65 @@ div.clear { line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } + -moz-osx-font-smoothing: grayscale; +} .sg-icon-search:before { content: "\e600"; - font-size: 85%; } + font-size: 85%; +} .sg-icon-cog:before { - content: "\e601"; } + content: "\e601"; +} .sg-icon-minus:before { - content: "\e602"; } + content: "\e602"; +} .sg-icon-plus:before { - content: "\e603"; } + content: "\e603"; +} .sg-icon-menu:before { - content: "\e604"; } + content: "\e604"; +} .sg-icon-radio-checked:before, .sg-checkbox.active:before, .sg-checkbox.active:before { - content: "\e605"; } + content: "\e605"; +} .sg-icon-radio-unchecked:before, .sg-checkbox:before, .sg-checkbox:before { - content: "\e606"; } + content: "\e606"; +} .sg-icon-file:before { - content: "\e607"; } + content: "\e607"; +} .sg-icon-link:before { - content: "\e608"; } + content: "\e608"; +} .sg-icon-keyboard:before { - content: "\e609"; } + content: "\e609"; +} .sg-icon-qrcode:before { - content: "\e60a"; } + content: "\e60a"; +} .sg-icon-eye:before { - content: "\e60b"; } + content: "\e60b"; +} + +/* Readme docs */ +.sg-pattern-doc { + background: rgba(0, 0, 0, 0.05); + font-size: 70%; + margin: 1em; + padding: 10px; +} /******************************************************************/ -/* End Pattern Lab Interface code */ \ No newline at end of file +/* End Pattern Lab Interface code */ diff --git a/public/styleguide/css/styleguide.css.map b/public/styleguide/css/styleguide.css.map new file mode 100644 index 000000000..47bc625dd --- /dev/null +++ b/public/styleguide/css/styleguide.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["file:///Users/tor/projects/patternlab-node/public/styleguide/css/styleguide.scss"], +"names": [], +"file": "styleguide.css" +} diff --git a/public/styleguide/css/styleguide.scss b/public/styleguide/css/styleguide.scss index b0b38c0f7..44daa03dc 100644 --- a/public/styleguide/css/styleguide.scss +++ b/public/styleguide/css/styleguide.scss @@ -57,6 +57,7 @@ $sg-tint : rgba(255,255,255,0.05); $sg-tint-2 : rgba(255,255,255,0.25); $sg-tone : rgba(0,0,0,0.1); $sg-tone-2 : rgba(0,0,0,0.3); +$sg-tone-3 : rgba(0,0,0,0.05); /* Typography */ $sg-font-size-norm : 100%; @@ -949,5 +950,14 @@ div.clear { content: "\e60b"; } + +/* Readme docs */ +.sg-pattern-doc { + background: $sg-tone-3; + font-size: $sg-font-size-sm; + margin: $sg-space; + padding: 10px; +} + /******************************************************************/ /* End Pattern Lab Interface code */ \ No newline at end of file diff --git a/public/styleguide/js/.jshintrc b/public/styleguide/js/.jshintrc new file mode 100644 index 000000000..f5d93d99c --- /dev/null +++ b/public/styleguide/js/.jshintrc @@ -0,0 +1,3 @@ +{ + "predef": ["module"] +} \ No newline at end of file diff --git a/public/styleguide/js/code-viewer.js b/public/styleguide/js/code-viewer.js index 05c4a6fcd..5fe86cc97 100644 --- a/public/styleguide/js/code-viewer.js +++ b/public/styleguide/js/code-viewer.js @@ -202,7 +202,7 @@ var codeViewer = { * if the encoded tab is the current active tab it adds the content to the default code container */ saveEncoded: function() { - codeViewer.encoded = this.responseText; + codeViewer.encoded = this.responseText.replace('<', '<').replace('>', '>'); if (codeViewer.tabActive == "e") { codeViewer.activateDefaultTab("e",this.responseText); } @@ -318,7 +318,7 @@ var codeViewer = { // request the encoded markup version of the pattern var e = new XMLHttpRequest(); e.onload = this.saveEncoded; - e.open("GET", fileName.replace(/\.html/,".escaped.html") + "?" + (new Date()).getTime(), true); + e.open("GET", fileName /*.replace(/\.escaped.html/,".html")*/ + "?" + (new Date()).getTime(), true); e.send(); // request the mustache markup version of the pattern diff --git a/public/styleguide/js/config.js b/public/styleguide/js/config.js new file mode 100644 index 000000000..8a35b7540 --- /dev/null +++ b/public/styleguide/js/config.js @@ -0,0 +1,8 @@ +module.exports = { + minViewportWidth : 240, //Minimum Size for Viewport + maxViewportWidth : 2600, //Maxiumum Size for Viewport + viewportResizeHandleWidth : 14, //Width of the viewport drag-to-resize handle + bodySize : parseInt(window.getComputedStyle(document.body).getPropertyValue('font-size')), + sw : document.body.clientWidth, //Viewport Width + sh : document.body.clientHeight //Viewport Height +} \ No newline at end of file diff --git a/public/styleguide/js/cookie.js b/public/styleguide/js/cookie.js new file mode 100644 index 000000000..d3ea753c4 --- /dev/null +++ b/public/styleguide/js/cookie.js @@ -0,0 +1,83 @@ +/*jslint indent: 4*/ +/*global window*/ +'use strict'; + +var pluses = /\+/g; + +function raw(s) { + return s; +} + +function decoded(s) { + return decodeURIComponent(s.replace(pluses, ' ')); +} + +function Cookie(options) { + this.options = options || {}; +} + +Cookie.prototype.write = function (key, value, options) { + var c; + options = options || {}; + + Object.keys(this.options).every(function (key) { + if (!options.hasOwnProperty(key)) { + options[key] = this.options[key]; + } + return true; + }); + + if (value === null) { + options.expires = -1; + } + + if (typeof options.expires === 'number') { + var days = options.expires, + t; + + t = options.expires = new Date(); + t.setDate(t.getDate() + days); + } + + value = options.json ? JSON.stringify(value) : String(value); + + c = [ + encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), + options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE + options.path ? '; path=' + options.path : '', + options.domain ? '; domain=' + options.domain : '', + options.secure ? '; secure' : '' + ].join(''); + document.cookie = c; + return c; +}; + +Cookie.prototype.read = function (key) { + // read + var decode = this.options.raw ? raw : decoded, + cookies = document.cookie.split('; '), + i, + l, + parts, + cookie; + + for (i = 0, l = cookies.length; i < l; i++) { + parts = cookies[i].split('='); + if (decode(parts.shift()) === key) { + cookie = decode(parts.join('=')); + return this.options.json ? JSON.parse(cookie) : cookie; + } + } + + return null; +}; + +Cookie.prototype.remove = function (key, options) { + if (this.read(key) !== null) { + this.write(key, null, options); + return true; + } + return false; +}; + +module.exports = Cookie; \ No newline at end of file diff --git a/public/styleguide/js/data-saver.js b/public/styleguide/js/data-saver.js index e354e1e79..e347a3c10 100644 --- a/public/styleguide/js/data-saver.js +++ b/public/styleguide/js/data-saver.js @@ -1,75 +1,8 @@ -/*! - * jQuery Cookie Plugin v1.3 - * https://github.com/carhartl/jquery-cookie - * - * Copyright 2011, Klaus Hartl - * Dual licensed under the MIT or GPL Version 2 licenses. - * http://www.opensource.org/licenses/mit-license.php - * http://www.opensource.org/licenses/GPL-2.0 - */ -(function ($, document, undefined) { - - var pluses = /\+/g; - - function raw(s) { - return s; - } - - function decoded(s) { - return decodeURIComponent(s.replace(pluses, ' ')); - } - - var config = $.cookie = function (key, value, options) { - - // write - if (value !== undefined) { - options = $.extend({}, config.defaults, options); - - if (value === null) { - options.expires = -1; - } - - if (typeof options.expires === 'number') { - var days = options.expires, t = options.expires = new Date(); - t.setDate(t.getDate() + days); - } - - value = config.json ? JSON.stringify(value) : String(value); - - return (document.cookie = [ - encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value), - options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE - options.path ? '; path=' + options.path : '', - options.domain ? '; domain=' + options.domain : '', - options.secure ? '; secure' : '' - ].join('')); - } - - // read - var decode = config.raw ? raw : decoded; - var cookies = document.cookie.split('; '); - for (var i = 0, l = cookies.length; i < l; i++) { - var parts = cookies[i].split('='); - if (decode(parts.shift()) === key) { - var cookie = decode(parts.join('=')); - return config.json ? JSON.parse(cookie) : cookie; - } - } - - return null; - }; - - config.defaults = {}; - - $.removeCookie = function (key, options) { - if ($.cookie(key) !== null) { - $.cookie(key, null, options); - return true; - } - return false; - }; - -})(jQuery, document); +/*jslint indent: 4*/ +/*global window*/ +'use strict'; +var Cookie = require('./cookie'), + cookie = new Cookie(); /*! * Data Saver - v0.1 @@ -79,91 +12,100 @@ */ var DataSaver = { - - // the name of the cookie to store the data in - cookieName: "patternlab", - - /** - * Add a given value to the cookie - * @param {String} the name of the key - * @param {String} the value - */ - addValue: function (name,val) { - var cookieVal = $.cookie(this.cookieName); - if ((cookieVal == null) || (cookieVal == "")) { - cookieVal = name+"~"+val; - } else { - cookieVal = cookieVal+"|"+name+"~"+val; - } - $.cookie(this.cookieName,cookieVal); - }, - - /** - * Update a value found in the cookie. If the key doesn't exist add the value - * @param {String} the name of the key - * @param {String} the value - */ - updateValue: function (name,val) { - if (this.findValue(name)) { - var updateCookieVals = ""; - var cookieVals = $.cookie(this.cookieName).split("|"); - for (var i = 0; i < cookieVals.length; i++) { - var fieldVals = cookieVals[i].split("~"); - if (fieldVals[0] == name) { - fieldVals[1] = val; - } - if (i > 0) { - updateCookieVals += "|"+fieldVals[0]+"~"+fieldVals[1]; - } else { - updateCookieVals += fieldVals[0]+"~"+fieldVals[1]; - } - } - $.cookie(this.cookieName,updateCookieVals); - } else { - this.addValue(name,val); - } - }, - - /** - * Remove the given key - * @param {String} the name of the key - */ - removeValue: function (name) { - var updateCookieVals = ""; - var cookieVals = $.cookie(this.cookieName).split("|"); - var k = 0; - for (var i = 0; i < cookieVals.length; i++) { - var fieldVals = cookieVals[i].split("~"); - if (fieldVals[0] != name) { - if (k == 0) { - updateCookieVals += fieldVals[0]+"~"+fieldVals[1]; - } else { - updateCookieVals += "|"+fieldVals[0]+"~"+fieldVals[1]; - } - k++; - } - } - $.cookie(this.cookieName,updateCookieVals); - }, - - /** - * Find the value using the given key - * @param {String} the name of the key - * - * @return {String} the value of the key or false if the value isn't found - */ - findValue: function (name) { - if ($.cookie(this.cookieName)) { - var cookieVals = $.cookie(this.cookieName).split("|"); - var k = 0; - for (var i = 0; i < cookieVals.length; i++) { - var fieldVals = cookieVals[i].split("~"); - if (fieldVals[0] == name) { - return fieldVals[1]; - } - } - } - return false; - } - + + // the name of the cookie to store the data in + cookieName: "patternlab", + + /** + * Add a given value to the cookie + * @param {String} the name of the key + * @param {String} the value + */ + addValue: function (name, val) { + var cookieVal = cookie.read(this.cookieName); + if ((cookieVal === null) || (cookieVal === "")) { + cookieVal = name + "~" + val; + } else { + cookieVal = cookieVal + "|" + name + "~" + val; + } + cookie.write(this.cookieName, cookieVal); + }, + + /** + * Update a value found in the cookie. If the key doesn't exist add the value + * @param {String} the name of the key + * @param {String} the value + */ + updateValue: function (name, val) { + if (this.findValue(name)) { + var updateCookieVals = "", + cookieVals = cookie.read(this.cookieName).split("|"), + i, + l, + fieldVals; + for (i = 0, l = cookieVals.length; i < l; i++) { + fieldVals = cookieVals[i].split("~"); + if (fieldVals[0] === name) { + fieldVals[1] = val; + } + if (i > 0) { + updateCookieVals += "|" + fieldVals[0] + "~" + fieldVals[1]; + } else { + updateCookieVals += fieldVals[0] + "~" + fieldVals[1]; + } + } + cookie.write(this.cookieName, updateCookieVals); + } else { + this.addValue(name, val); + } + }, + + /** + * Remove the given key + * @param {String} the name of the key + */ + removeValue: function (name) { + var updateCookieVals = "", + cookieVals = cookie.read(this.cookieName).split("|"), + k = 0, + i, + l, + fieldVals; + for (i = 0, l = cookieVals.length; i < l; i++) { + fieldVals = cookieVals[i].split("~"); + if (fieldVals[0] !== name) { + if (k === 0) { + updateCookieVals += fieldVals[0] + "~" + fieldVals[1]; + } else { + updateCookieVals += "|" + fieldVals[0] + "~" + fieldVals[1]; + } + k++; + } + } + cookie.write(this.cookieName, updateCookieVals); + }, + + /** + * Find the value using the given key + * @param {String} the name of the key + * + * @return {String} the value of the key or false if the value isn't found + */ + findValue: function (name) { + if (cookie.read(this.cookieName)) { + var cookieVals = cookie.read(this.cookieName).split("|"), + i, + l, + fieldVals; + for (i = 0, l = cookieVals.length; i < l; i++) { + fieldVals = cookieVals[i].split("~"); + if (fieldVals[0] === name) { + return fieldVals[1]; + } + } + } + return false; + } }; + +module.exports = DataSaver; \ No newline at end of file diff --git a/public/styleguide/js/eventDelegator/eventDelegator.js b/public/styleguide/js/eventDelegator/eventDelegator.js new file mode 100644 index 000000000..4ff04b58f --- /dev/null +++ b/public/styleguide/js/eventDelegator/eventDelegator.js @@ -0,0 +1,108 @@ +/*jslint indent: 4*/ +/*global window*/ +'use strict'; +var WM = require('./weakMapSet').WeakMap, + delegators = new WM(); + +require('./matches.js'); + +function EventDelegator(element) { + var delegator = delegators.get(element); + + if (delegator) { + return delegator; + } + + this.events = {}; + this.element = element; + this.handlers = {}; + delegators.set(element, this); +} + +EventDelegator.prototype._match = function (selectors, e) { + var target = e.target, + selector; + + function _runCallback(selector) { + var i, + l; + for (i = 0, l = selectors[selector].length; i < l; i++) { + selectors[selector][i](e); + } + } + while (target !== this.element) { + for (selector in selectors) { + if (selectors.hasOwnProperty(selector) && target.matches(selector)) { + _runCallback(selector); + } + } + if (!target.parentNode) { + return; + } + target = target.parentNode; + } +}; + +EventDelegator.prototype.on = function (type, selector, cb) { + //todo support elements as selector + + var _this = this; + + function handler(e) { + _this._match(_this.events[type], e); + } + + if (!this.events[type]) { + this.events[type] = {}; + + this.handlers[type] = handler; + this.element.addEventListener(type, handler, false); + } + + this.events[type][selector] = this.events[type][selector] || []; + + if (this.events[type][selector].indexOf(cb) === -1) { + this.events[type][selector].push(cb); + } + return this; +}; + +EventDelegator.prototype.off = function (type, selector, cb) { + if (type === undefined) { + Object.keys(this.events).every(function (evtType) { + this.element.removeEventListener(evtType, this.handlers[evtType]); + return true; + }); + this.events = {}; + } else if (selector === undefined) { + //remove all of one type + if (this.events[type]) { + this.element.removeEventListener(type, this.handlers[type]); + delete this.events[type]; + delete this.handlers[type]; + } + } else if (cb === undefined) { + // remove all handlers + if (this.events[type] && this.events[type][selector]) { + delete this.events[type][selector]; + // Remove eventlistener if no selectors are present + if (Object.keys(this.events[type]).length === 0) { + this.off(type); + } + } + } else { + // remove specific handler + var i = this.events[type][selector].indexOf(cb); + + if (i !== -1) { + this.events[type][selector].splice(i, 1); + } + } + return this; +}; + +EventDelegator.prototype.toString = function () { + return 'EventDelegator'; +}; + +module.exports = EventDelegator; \ No newline at end of file diff --git a/public/styleguide/js/eventDelegator/matches.js b/public/styleguide/js/eventDelegator/matches.js new file mode 100644 index 000000000..69fe093a6 --- /dev/null +++ b/public/styleguide/js/eventDelegator/matches.js @@ -0,0 +1,35 @@ +/*jslint indent: 4*/ +/*global window*/ +/** + * Polyfill for Element.matches + **/ +function addPolyfill(ElementPrototype) { + 'use strict'; + + if (ElementPrototype.matches !== undefined) { + return; + } + + ElementPrototype.matches = ElementPrototype.matchesSelector || + ElementPrototype.mozMatchesSelector || + ElementPrototype.msMatchesSelector || + ElementPrototype.oMatchesSelector || + ElementPrototype.webkitMatchesSelector || + function (selector) { + var node = this, + nodes = (node.parentNode || node.document).querySelectorAll(selector), + i = -1; + + while (nodes[i] && nodes[i] !== node) { + ++i; + } + + return !!nodes[i]; + }; +} + +if (module && module.exports) { + module.exports = addPolyfill; +} else { + addPolyfill(window.Element.prototype); +} \ No newline at end of file diff --git a/public/styleguide/js/eventDelegator/package.json b/public/styleguide/js/eventDelegator/package.json new file mode 100644 index 000000000..ffb4b8bee --- /dev/null +++ b/public/styleguide/js/eventDelegator/package.json @@ -0,0 +1,26 @@ +{ + "name": "eventDelegator", + "version": "0.0.1", + "description": "Event delegation module", + "main": "eventDelegator.js", + "directories": { + "test": "test" + }, + "scripts": { + "test": "./node_modules/.bin/mocha --reporter spec --ui bdd", + "build": "browserify eventDelegator.js -o eventDelegator.min.js", + "watch": "watchify eventDelegator.js -o eventDelegator.min.js --debug --verbose" + }, + "keywords": [ + "events", + "delegation", + "dom" + ], + "author": "Tor Brekke Skjøtskift", + "license": "ISC", + "devDependencies": { + "expect.js": "^0.3.1", + "jsdom": "^1.0.0-pre.6", + "mocha": "^1.21.4" + } +} diff --git a/public/styleguide/js/eventDelegator/test/index.js b/public/styleguide/js/eventDelegator/test/index.js new file mode 100644 index 000000000..4bd676d15 --- /dev/null +++ b/public/styleguide/js/eventDelegator/test/index.js @@ -0,0 +1,93 @@ +var expect = require('expect.js'), + jsdom = require('jsdom').jsdom, + EventDelegator = require('../eventDelegator'), + matches = require('../matches'); + +function captureStream(stream){ + var oldWrite = stream.write; + var buf = ''; + stream.write = function(chunk, encoding, callback){ + buf += chunk.toString(); // chunk is a String or Buffer + oldWrite.apply(stream, arguments); + } + + return { + unhook: function unhook(){ + stream.write = oldWrite; + }, + captured: function(){ + return buf; + } + }; +} + +describe('eventDelegator', function () { + var document = jsdom('
'), + window = document.parentWindow, + el = document.getElementById('test'); + + // Add polyfill + matches(window.HTMLElement.prototype); + + var hook; + + beforeEach(function(){ + hook = captureStream(process.stdout); + }); + afterEach(function(){ + hook.unhook(); + }); + + it('should create a eventDelegator object', function () { + var delegator = new EventDelegator(el); + expect(delegator.toString()).to.equal('EventDelegator'); + }); + + it('should return the first object if two eventDelegators are created on the same element', function() { + var delegator = new EventDelegator(el), + delegator2 = new EventDelegator(el); + + expect(delegator).to.equal(delegator2); + }); + + it('should capture a click', function (done) { + var delegator = new EventDelegator(el); + delegator.on('click', '#handler', function (e) { + expect(e.target.id).to.equal('handler'); + done(); + }); + + var e = window.document.createEvent('MouseEvent'); + e.initEvent('click', true, true); + document.getElementById('handler').dispatchEvent(e); + //console.log(hook.captured()); + }); + + it('should remove all events', function () { + var delegator = new EventDelegator(el); + + delegator.off('click'); + + expect(typeof delegator.events.click).to.equal('undefined'); + }) + + it('should remove an event', function (done) { + var delegator = new EventDelegator(el), + clicked = false; + + /*delegator.on('click', function (e) { + clicked = true; + });*/ + + delegator.off('click'); + + var e = window.document.createEvent('MouseEvent'); + e.initEvent('click', true, true); + //document.getElementById('handler').dispatchEvent(e); + + setTimeout(function() { + expect(clicked).to.equal(false); + done(); + },300); + }) +}); \ No newline at end of file diff --git a/public/styleguide/js/eventDelegator/weakMapSet.js b/public/styleguide/js/eventDelegator/weakMapSet.js new file mode 100644 index 000000000..ebd74e53e --- /dev/null +++ b/public/styleguide/js/eventDelegator/weakMapSet.js @@ -0,0 +1,271 @@ +"WeakMap" in this || (function (module) {"use strict"; + + //!(C) WebReflection - Mit Style License + // size and performances oriented polyfill for ES6 + // WeakMap, Map, and Set + // compatible with node.js, Rhino, any browser + // does not implement default vaule during wm.get() + // since ES.next won't probably do that + // use wm.has(o) ? wm.get(o) : d3fault; instead + + // WeakMap(void):WeakMap + function WeakMap() { + + // private references holders + var + keys = [], + values = [] + ; + + // returns freshly new created + // instanceof WeakMap in any case + return create(WeakMapPrototype, { + // WeakMap#delete(key:void*):boolean + "delete": {value: bind.call(sharedDel, NULL, TRUE, keys, values)}, + //:was WeakMap#get(key:void*[, d3fault:void*]):void* + // WeakMap#get(key:void*):void* + get: {value: bind.call(sharedGet, NULL, TRUE, keys, values)}, + // WeakMap#has(key:void*):boolean + has: {value: bind.call(sharedHas, NULL, TRUE, keys, values)}, + // WeakMap#set(key:void*, value:void*):void + set: {value: bind.call(sharedSet, NULL, TRUE, keys, values)} + }); + + } + + // Map(void):Map + function Map() { + + // private references holders + var + keys = [], + values = [] + ; + + // returns freshly new created + // instanceof WeakMap in any case + return create(MapPrototype, { + // Map#delete(key:void*):boolean + "delete": {value: bind.call(sharedDel, NULL, FALSE, keys, values)}, + //:was Map#get(key:void*[, d3fault:void*]):void* + // Map#get(key:void*):void* + get: {value: bind.call(sharedGet, NULL, FALSE, keys, values)}, + // Map#has(key:void*):boolean + has: {value: bind.call(sharedHas, NULL, FALSE, keys, values)}, + // Map#set(key:void*, value:void*):void + set: {value: bind.call(sharedSet, NULL, FALSE, keys, values)} + /*, + // Map#size(void):number === Mozilla only so far + size: {value: bind.call(sharedSize, NULL, keys)}, + // Map#keys(void):Array === not in specs + keys: {value: boundSlice(keys)}, + // Map#values(void):Array === not in specs + values: {value: boundSlice(values)}, + // Map#iterate(callback:Function, context:void*):void ==> callback.call(context, key, value, index) === not in specs + iterate: {value: bind.call(sharedIterate, NULL, FALSE, keys, values)} + //*/ + }); + + } + + // Set(void):Set + /** + * to be really honest, I would rather pollute Array.prototype + * in order to have Set like behavior + * Object.defineProperties(Array.prototype, { + * add: {value: function add(value) { + * return -1 < this.indexOf(value) && !!this.push(value); + * }} + * has: {value: function has(value) { + * return -1 < this.indexOf(value); + * }} + * delete: {value: function delete(value) { + * var i = this.indexOf(value); + * return -1 < i && !!this.splice(i, 1); + * }} + * }); + * ... anyway ... + */ + function Set() { + var + keys = [], // placeholder used simply to recycle functions + values = [],// real storage + has = bind.call(sharedHas, NULL, FALSE, values, keys) + ; + return create(SetPrototype, { + // Set#delete(value:void*):boolean + "delete": {value: bind.call(sharedDel, NULL, FALSE, values, keys)}, + // Set#has(value:void*):boolean + has: {value: has}, + // Set#add(value:void*):boolean + add: {value: bind.call(Set_add, NULL, FALSE, has, values)} + /*, + // Map#size(void):number === Mozilla only + size: {value: bind.call(sharedSize, NULL, values)}, + // Set#values(void):Array === not in specs + values: {value: boundSlice(values)}, + // Set#iterate(callback:Function, context:void*):void ==> callback.call(context, value, index) === not in specs + iterate: {value: bind.call(Set_iterate, NULL, FALSE, NULL, values)} + //*/ + }); + } + + // common shared method recycled for all shims through bind + function sharedDel(objectOnly, keys, values, key) { + if (sharedHas(objectOnly, keys, values, key)) { + keys.splice(i, 1); + values.splice(i, 1); + } + // Aurora here does it while Canary doesn't + return -1 < i; + } + + function sharedGet(objectOnly, keys, values, key/*, d3fault*/) { + return sharedHas(objectOnly, keys, values, key) ? values[i] : undefined; //d3fault; + } + + function sharedHas(objectOnly, keys, values, key) { + if (objectOnly && key !== Object(key)) { + console.log(key); + throw new TypeError("not a non-null object"); + } + i = betterIndexOf.call(keys, key); + return -1 < i; + } + + function sharedSet(objectOnly, keys, values, key, value) { + /* return */sharedHas(objectOnly, keys, values, key) ? + values[i] = value + : + values[keys.push(key) - 1] = value + ; + } + + /* keys, values, and iterate related methods + function boundSlice(values) { + return function () { + return slice.call(values); + }; + } + + function sharedSize(keys) { + return keys.length; + } + + function sharedIterate(objectOnly, keys, values, callback, context) { + for (var + k = slice.call(keys), v = slice.call(values), + i = 0, length = k.length; + i < length; callback.call(context, k[i], v[i], i++) + ); + } + + function Set_iterate(objectOnly, keys, values, callback, context) { + for (var + v = slice.call(values), + i = 0, length = v.length; + i < length; callback.call(context, v[i], i++) + ); + } + //*/ + + // Set#add recycled through bind per each instanceof Set + function Set_add(objectOnly, has, values, value) { + /*return */(!has(value) && !!values.push(value)); + } + + // a more reliable indexOf + function betterIndexOf(value) { + if (value != value || value === 0) { + for (i = this.length; i-- && !is(this[i], value);); + } else { + i = indexOf.call(this, value); + } + return i; + } + + // need for an empty constructor ... + function Constructor(){} // GC'ed if !!Object.create + // ... so that new WeakMapInstance and new WeakMap + // produces both an instanceof WeakMap + + var + // shortcuts and ... + NULL = null, TRUE = true, FALSE = false, + notInNode = module == "undefined", + window = notInNode ? this : global, + module = notInNode ? {} : exports, + Object = window.Object, + WeakMapPrototype = WeakMap.prototype, + MapPrototype = Map.prototype, + SetPrototype = Set.prototype, + defineProperty = Object.defineProperty, + slice = [].slice, + + // Object.is(a, b) shim + is = Object.is || function (a, b) { + return a === b ? + a !== 0 || 1 / a == 1 / b : + a != a && b != b + ; + }, + + // partial polyfill for this aim only + bind = WeakMap.bind || function bind(context, objectOnly, keys, values) { + // partial fast ad-hoc Function#bind polyfill if not available + var callback = this; + return function bound(key, value) { + if (!!key === false) { + console.log(arguments.caller.callee); + }; + return callback.call(context, objectOnly, keys, values, key, value); + }; + }, + + create = Object.create || function create(proto, descriptor) { + // partial ad-hoc Object.create shim if not available + Constructor.prototype = proto; + var object = new Constructor(), key; + for (key in descriptor) { + object[key] = descriptor[key].value; + } + return object; + }, + + indexOf = [].indexOf || function indexOf(value) { + // partial fast Array#indexOf polyfill if not available + for (i = this.length; i-- && this[i] !== value;); + return i; + }, + + undefined, + i // recycle ALL the variables ! + ; + + // ~indexOf.call([NaN], NaN) as future possible feature detection + + // used to follow FF behavior where WeakMap.prototype is a WeakMap itself + WeakMap.prototype = WeakMapPrototype = WeakMap(); + Map.prototype = MapPrototype = Map(); + Set.prototype = SetPrototype = Set(); + + // assign it to the global context + // if already there, e.g. in node, export native + window.WeakMap = module.WeakMap = window.WeakMap || WeakMap; + window.Map = module.Map = window.Map || Map; + window.Set = module.Set = window.Set || Set; + + /* probably not needed, add a slash to ensure non configurable and non writable + if (defineProperty) { + defineProperty(window, "WeakMap", {value: WeakMap}); + defineProperty(window, "Map", {value: Map}); + defineProperty(window, "Set", {value: Set}); + } + //*/ + + // that's pretty much it + +}.call( + this, + typeof exports +)); \ No newline at end of file diff --git a/public/styleguide/js/gui.js b/public/styleguide/js/gui.js new file mode 100644 index 000000000..09d724c35 --- /dev/null +++ b/public/styleguide/js/gui.js @@ -0,0 +1,219 @@ +/*jslint indent: 4*/ +/*global window*/ +'use strict'; +var config = require('./config'), + dataSaver = require('./data-saver'), + urlHandler = require('./url-handler'), + elGenContainer = document.getElementById('sg-gen-container'), + elViewport = document.getElementById('sg-viewport'), + elSizePx = document.querySelector('.sg-size-px'), //Px size input element in toolbar + elSizeEms = document.querySelector('.sg-size-em'), //Em size input element in toolbar; + discoID = false, + discoMode = false, + hayMode = false; + +//Update Pixel and Em inputs +//'size' is the input number +//'unit' is the type of unit: either px or em. Default is px. Accepted values are 'px' and 'em' +//'target' is what inputs to update. Defaults to both +function updateSizeReading(size, unit, target) { + var emSize = (unit === 'em' ? Math.floor(size * config.bodySize) : size), + pxSize = (unit === 'em' ? size / config.bodySize : size); + + if (target === 'updatePxInput') { + elSizePx.value = pxSize; + } else if (target === 'updateEmInput') { + elSizeEms.value = emSize; + } else { + elSizeEms.value = emSize; + elSizePx.value = pxSize; + } +} + +function saveSize(size) { + if (!dataSaver.findValue('vpWidth')) { + dataSaver.addValue('vpWidth', size); + } else { + dataSaver.updateValue('vpWidth', size); + } +} + +/* Returns a random number between min and max */ +function getRandom(min, max) { + return Math.random() * (max - min) + min; +} + +//Resize the viewport +//'size' is the target size of the viewport +//'animate' is a boolean for switching the CSS animation on or off. 'animate' is true by default, but can be set to false for things like nudging and dragging +function sizeiframe(size, animate) { + var theSize; + + if (size > config.maxViewportWidth) { //If the entered size is larger than the max allowed viewport size, cap value at max vp size + theSize = config.maxViewportWidth; + } else if (size < config.minViewportWidth) { //If the entered size is less than the minimum allowed viewport size, cap value at min vp size + theSize = config.minViewportWidth; + } else { + theSize = size; + } + + //Conditionally remove CSS animation class from viewport + elGenContainer.classList.remove('vp-animate', animate); + elViewport.classList.remove('vp-animate', animate); + + elGenContainer.style.width = (theSize + config.viewportResizeHandleWidth) + 'px'; //Resize viewport wrapper to desired size + size of drag resize handler + elViewport.style.width = theSize + 'px'; //Resize viewport to desired size + + updateSizeReading(theSize); //Update values in toolbar + saveSize(theSize); //Save current viewport to cookie +} + +function updateViewportWidth(size) { + size = parseInt(size, 10); + elViewport.style.width = parseInt(size, 10) + 'px'; + elGenContainer.style.width = (size + 14) + 'px'; + + updateSizeReading(size); +} + +/* Disco Mode */ +function disco() { + sizeiframe(getRandom(config.minViewportWidth, config.sw)); +} + +function killDisco() { + discoMode = false; + clearInterval(discoID); + discoID = false; +} + +function startDisco() { + discoMode = true; + discoID = setInterval(disco, 800); +} + +function toggleDisco() { + if (!discoMode) { + startDisco(); + } else { + killDisco(); + } +} + +//Stop Hay! Mode +function killHay() { + var currentWidth = elViewport.offsetWidth; + hayMode = false; + elViewport.classList.remove('hay-mode'); + elGenContainer.classList.remove('hay-mode'); + sizeiframe(Math.floor(currentWidth)); +} + +// start Hay! mode +function startHay() { + hayMode = true; + elGenContainer.classList.remove('vp-animate'); + elGenContainer.style.width = (config.minViewportWidth + config.viewportResizeHandleWidth) + 'px'; + elViewport.classList.remove('vp-animate'); + elViewport.style.width = config.minViewportWidth + 'px'; + + window.setTimeout(function () { + elGenContainer.classList.add('hay-mode'); + elGenContainer.style.width = (config.maxViewportWidth + config.viewportResizeHandleWidth) + 'px'; + elViewport.classList.add('hay-mode'); + elViewport.style.width = config.maxViewportWidth + 'px'; + + //todo this is not removed + setInterval(function () { + var vpSize = elViewport.offsetWidth; + updateSizeReading(vpSize); + }, 100); + }, 200); +} + +function toggleHay() { + if (!hayMode) { + startHay(); + } else { + killHay(); + } +} + +// handle when someone clicks on the grey area of the viewport so it auto-closes the nav +function closePanels() { + // close up the menu + var panels = document.querySelectorAll('.sg-acc-panel'), + handles = document.querySelectorAll('.sg-acc-handle'); + + [].forEach.call(panels, function (panel) { + panel.classList.remove('active'); + }); + + + [].forEach.call(handles, function (handle) { + handle.classList.remove('active'); + }); +} + +function init() { + var origViewportWidth = elViewport.offsetWidth, + oGetVars = urlHandler.getRequestVars(), // get the request vars + vpWidth = 0, + trackViewportWidth = true, // can toggle this feature on & off + patternName = 'all', + patternPath = '', + iFramePath = window.location.protocol + '//' + window.location.host + window.location.pathname.replace('index.html', '') + 'styleguide/html/styleguide.html'; + + // capture the viewport width that was loaded and modify it so it fits with the pull bar + elGenContainer.style.width = origViewportWidth + 'px'; + elViewport.style.width = (origViewportWidth - 14) + 'px'; + updateSizeReading(origViewportWidth - 14); + + // pre-load the viewport width + if (oGetVars.h || oGetVars.hay) { + startHay(); + } else if (oGetVars.d || oGetVars.disco) { + startDisco(); + } else if (oGetVars.w || oGetVars.width) { + vpWidth = oGetVars.w || oGetVars.width; + vpWidth = vpWidth.indexOf('em') !== -1 ? Math.floor(Math.floor(vpWidth.replace('em', '')) * config.bodySize) : Math.floor(vpWidth.replace('px', '')); + + dataSaver.updateValue('vpWidth', vpWidth); + updateViewportWidth(vpWidth); + } else if (trackViewportWidth && dataSaver.findValue('vpWidth')) { + updateViewportWidth(dataSaver.findValue('vpWidth')); + } + + // load the iframe source + if (oGetVars.p || oGetVars.pattern) { + patternName = oGetVars.p || oGetVars.pattern; + patternPath = urlHandler.getFileName(patternName); + iFramePath = (patternPath !== '') ? window.location.protocol + '//' + window.location.host + window.location.pathname.replace('index.html', '') + patternPath : iFramePath; + } + + if (patternName !== 'all') { + document.getElementById('title').innerHTML = 'Pattern Lab - ' + patternName; + window.history.replaceState({ 'pattern': patternName }, null, null); + } + + document.getElementById('sg-raw').setAttribute('href', urlHandler.getFileName(patternName)); + + urlHandler.skipBack = true; + document.getElementById('sg-viewport').contentWindow.location.replace(iFramePath); +} + +module.exports = { + sizeiframe : sizeiframe, + getRandom : getRandom, + updateViewportWidth : updateViewportWidth, + disco : disco, + killDisco : killDisco, + startDisco : startDisco, + startHay : startHay, + killHay : killHay, + toggleDisco : toggleDisco, + toggleHay : toggleHay, + updateSizeReading : updateSizeReading, + closePanels : closePanels, + init : init +}; \ No newline at end of file diff --git a/public/styleguide/js/handlers.js b/public/styleguide/js/handlers.js new file mode 100644 index 000000000..a226da4b9 --- /dev/null +++ b/public/styleguide/js/handlers.js @@ -0,0 +1,290 @@ +/*jslint indent: 4, regexp: true*/ +/*global window*/ +var EventDelegator = require('./eventDelegator/eventDelegator'), + config = require('./config'), + dataSaver = require('./data-saver'), + gui = require('./gui'), + urlHandler = require('./url-handler'), + delegator = new EventDelegator(document.documentElement), + elViewport = document.getElementById('sg-viewport'), + elCover = document.getElementById('sg-cover'); + +function _parents(element, selector, cb) { + var target = element.parentNode; + + while (target && target !== document.documentElement) { + if (target.matches(selector)) { + cb(target); + } + target = target.parentNode; + } +} + +function _siblings(element, selector, cb) { + var target = element.parentNode.children[0]; + + while (target) { + if (target.matches(selector)) { + cb(target); + } + target = target.nextSibling; + } +} + +function _toggleUL(e) { + e.preventDefault(); + var target = e.target.parentNode; + + _parents(target, 'ul', function (el) { + el.classList.toggle('active'); + }); +} + +function _size(num) { + gui.killDisco(); + gui.killHay(); + gui.sizeiframe(num); +} + +delegator + // handles widening the "viewport" + // 1. on "mousedown" store the click location + // 2. make a hidden div visible so that it can track mouse movements and make sure the pointer doesn't get lost in the iframe + // 3. on "mousemove" calculate the math, save the results to a cookie, and update the viewport + .on('mousedown', '#sg-rightpull', function (e) { + // capture default data + var origClientX = e.clientX, + origViewportWidth = elViewport.offsetWidth; + + // show the cover + elCover.style.display = 'block'; + + // add the mouse move event and capture data. also update the viewport width + delegator.on('mousemove', '#sg-cover', function (e) { + var viewportWidth = (origClientX > e.clientX) ? + origViewportWidth - ((origClientX - e.clientX) * 2) : + origViewportWidth + ((e.clientX - origClientX) * 2); + + if (viewportWidth > config.minViewportWidth) { + if (!dataSaver.findValue('vpWidth')) { + dataSaver.addValue('vpWidth', viewportWidth); + } else { + dataSaver.updateValue('vpWidth', viewportWidth); + } + + gui.sizeiframe(viewportWidth, false); + } + }); + }) + + // on "mouseup" we unbind the "mousemove" event and hide the cover again + .on('mouseup', 'body', function () { + delegator.off('mousemove', '#sg-cover'); + elCover.style.display = 'none'; + }) + + /* Pattern Lab accordion dropdown */ + .on('click', '.sg-acc-handle', function (e) { + var next = e.target; + + while (next && (next.nodeType !== 1 || !next.matches('.sg-acc-panel'))) { + next = next.nextSibling; + } + + e.preventDefault(); + + e.target.classList.toggle('active'); + if (next) { + next.classList.toggle('active'); + } + }) + + .on('click', '.sg-nav-toggle', function (e) { + e.preventDefault(); + document.querySelector('.sg-nav-container').classList.toggle('active'); + }) + + //View (containing clean, code, raw, etc options) Trigger + .on('click', '#sg-t-toggle', _toggleUL) + + //Size Trigger + .on('click', '#sg-size-toggle', _toggleUL) + + //Phase View Events + .on('click', '.sg-size[data-size]', function (e) { + e.preventDefault(); + gui.killDisco(); + gui.killHay(); + + var val = e.target.getAttribute('data-size'); + + if (val.indexOf('px') > -1) { + config.bodySize = 1; + } + + val = val.replace(/[^\d.\-]/g, ''); + gui.sizeiframe(Math.floor(val * config.bodySize)); + }) + + //Size View Events + + //Click Size Small Button + .on('click', '#sg-size-s', function (e) { + e.preventDefault(); + _size(gui.getRandom(config.minViewportWidth, 500)); + }) + + //Click Size Medium Button + .on('click', '#sg-size-m', function (e) { + e.preventDefault(); + _size(gui.getRandom(500, 800)); + }) + + //Click Size Large Button + .on('click', '#sg-size-l', function (e) { + e.preventDefault(); + _size(gui.getRandom(800, 1200)); + }) + + //Click Full Width Button + .on('click', '#sg-size-full', function (e) { //Resets + e.preventDefault(); + _size(config.sw); + }) + + //Click Random Size Button + .on('click', '#sg-size-random', function (e) { + e.preventDefault(); + _size(gui.getRandom(config.minViewportWidth, config.sw)); + }) + + //Click for Disco Mode, which resizes the viewport randomly + .on('click', '#sg-size-disco', function (e) { + e.preventDefault(); + gui.killHay(); + gui.toggleDisco(); + }) + + //Stephen Hay Mode - "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!" + .on('click', '#sg-size-hay', function (e) { + e.preventDefault(); + gui.killDisco(); + gui.toggleHay(); + }) + + //Pixel input + .on('keydown', '.sg-size-px', function (e) { + var val = parseInt(e.target.value, 10); + + if (e.keyCode === 38) { //If the up arrow key is hit + val++; + gui.sizeiframe(val, false); + } else if (e.keyCode === 40) { //If the down arrow key is hit + val--; + gui.sizeiframe(val, false); + } else if (e.keyCode === 13) { //If the Enter key is hit + e.preventDefault(); + gui.sizeiframe(val); //Size Iframe to value of text box + e.target.blur(); + } + }) + + .on('keyup', '.sg-size-px', function (e) { + var val = parseInt(e.target.value, 10); + gui.updateSizeReading(val, 'px', 'updateEmInput'); + }) + + //Em input + .on('keydown', '.sg-size-em', function (e) { + var val = parseFloat(e.target.value); + + if (e.keyCode === 38) { //If the up arrow key is hit + val++; + gui.sizeiframe(Math.floor(val * config.bodySize), false); + } else if (e.keyCode === 40) { //If the down arrow key is hit + val--; + gui.sizeiframe(Math.floor(val * config.bodySize), false); + } else if (e.keyCode === 13) { //If the Enter key is hit + e.preventDefault(); + gui.sizeiframe(Math.floor(val * config.bodySize)); //Size Iframe to value of text box + } + }) + + .on('keyup', '.sg-size-em', function (e) { + var val = parseFloat(e.target.value); + gui.updateSizeReading(val, 'em', 'updatePxInput'); + }) + + // handle the MQ click + .on('click', '#sg-mq a', function (e) { + e.preventDefault(); + var val = e.target.innerHTML, + type = parseInt((val.indexOf('px') !== -1 ? 'px' : 'em'), 10); + + val = val.replace(type, ''); + + gui.sizeiframe((type === 'px' ? val : val * config.bodySize), true); + }) + + // update the iframe with the source from clicked element in pull down menu. also close the menu + // having it outside fixes an auto-close bug i ran into + .on('click', '.sg-nav a', function (e) { + if (e.target.matches('.sg-acc-handle')) { + return; + } + e.preventDefault(); + + // update the iframe via the history api handler + document.getElementById('sg-viewport').contentWindow.postMessage( + { + 'path': urlHandler.getFileName(e.target.getAttribute('data-patternpartial')) + }, + urlHandler.targetOrigin + ); + + // close up the menu + _parents(e.target, '.sg-acc-panel', function (el) { + el.classList.toggle('active'); + _siblings(el, '.sg-acc-handle', function (el) { + el.classList.toggle('active'); + }); + }); + return false; + }) + + .on('click', '#sg-vp-wrap', function () { + gui.closePanels(); + }); + +window.addEventListener('resize', function () { + config.sw = document.body.clientWidth; + config.sh = document.body.clientHeight; +}, false); + +window.addEventListener('message', function receiveIframeMessage(event) { + // does the origin sending the message match the current host? if not dev/null the request + if ((window.location.protocol !== 'file:') && (event.origin !== window.location.protocol + '//' + window.location.host)) { + return; + } + + if (event.data.bodyclick !== undefined) { + gui.closePanels(); + } else if (event.data.patternpartial !== undefined) { + if (!urlHandler.skipBack) { + if (window.history.state === null || window.history.state.pattern !== event.data.patternpartial) { + urlHandler.pushPattern(event.data.patternpartial, event.data.path); + } + if (window.wsnConnected) { + console.log('wsn'); + var iFramePath = urlHandler.getFileName(event.data.patternpartial); + window.wsn.send('{"url": "' + iFramePath + '", "patternpartial": "' + event.data.patternpartial + '" }'); + } + } + + // for testing purposes + //console.log(event.data.lineage); + + // reset the defaults + urlHandler.skipBack = false; + } +}, false); \ No newline at end of file diff --git a/public/styleguide/js/main.js b/public/styleguide/js/main.js new file mode 100644 index 000000000..07108fcf5 --- /dev/null +++ b/public/styleguide/js/main.js @@ -0,0 +1,5 @@ +var gui = require('./gui'); + +require('./handlers'); + +gui.init(); \ No newline at end of file diff --git a/public/styleguide/js/package.json b/public/styleguide/js/package.json new file mode 100644 index 000000000..02c902022 --- /dev/null +++ b/public/styleguide/js/package.json @@ -0,0 +1,13 @@ +{ + "name": "patternLabStyleguideJS", + "version": "0.1.0", + "description": "", + "main": "main.js", + "scripts": { + "test": "test", + "build": "browserify main.js -o styleguide.js", + "watch": "watchify main.js -o styleguide.js --debug --verbose" + }, + "author": "", + "license": "ISC" +} diff --git a/public/styleguide/js/postmessage.js b/public/styleguide/js/postmessage.js index cac192e3a..038a723ad 100644 --- a/public/styleguide/js/postmessage.js +++ b/public/styleguide/js/postmessage.js @@ -1,78 +1,114 @@ /*! * Basic postMessage Support - v0.1 * - * Copyright (c) 2013 Dave Olsen, http://dmolsen.com + * Copyright (c) 2013-2014 Dave Olsen, http://dmolsen.com * Licensed under the MIT license * * Handles the postMessage stuff in the pattern, view-all, and style guide templates. * */ +/*jslint indent:4*/ +/*global window*/ + +function _jwertyCb(k, t) { + return function () { + var obj = JSON.stringify({ "keyPress": "ctrl+shift+" + k }); + window.parent.postMessage(obj, t); + return false; + }; +} + +function _aClick(e) { + e.preventDefault(); + var href = this.getAttribute("href"); + if (href !== "#") { + window.location.replace(href); + } +} + // alert the iframe parent that the pattern has loaded assuming this view was loaded in an iframe -if (self != top) { - - // handle the options that could be sent to the parent window - // - all get path - // - pattern & view all get a pattern partial, styleguide gets all - // - pattern shares lineage - var options = { "path": window.location.toString() }; - options.patternpartial = (patternPartial != "") ? patternPartial : "all"; - if (lineage != "") { - options.lineage = lineage; - } - - var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; - parent.postMessage(options, targetOrigin); - - // find all links and add an onclick handler for replacing the iframe address so the history works - var aTags = document.getElementsByTagName('a'); - for (a in aTags) { - aTags[a].onclick = function(e) { - e.preventDefault(); - window.location.replace(this.getAttribute("href")); - }; - } - +if (window.self !== window.top) { + // handle the options that could be sent to the parent window + // - all get path + // - pattern & view all get a pattern partial, styleguide gets all + // - pattern shares lineage + var path = window.location.toString(), + parts = path.split('?'), + options = {'path': parts[0]}, + i; + + options.patternpartial = (window.patternPartial !== '') ? window.patternPartial : 'all'; + if (window.lineage !== '') { + options.lineage = window.lineage; + } + + var targetOrigin = (window.location.protocol === 'file:') ? '*' : window.location.protocol + '//' + window.location.host; + window.parent.postMessage(options, targetOrigin); + + // find all links and add an onclick handler for replacing the iframe address so the history works + var aTags = document.getElementsByTagName('a'); + for (i = 0; i < aTags.length; i++) { + aTags[i].onclick = _aClick; + } + + // bind the keyboard shortcuts for various viewport resizings + pattern search + var keys = [ "s", "m", "l", "d", "h", "f" ]; + for (i = 0; i < keys.length; i++) { + window.jwerty.key('ctrl+shift+' + keys[i], _jwertyCb(keys[i], targetOrigin)); + } + + // bind the keyboard shortcuts for mqs + var i = 0; + while (i < 10) { + window.jwerty.key('ctrl+shift+' + i, _jwertyCb(i, targetOrigin)); + i++; + } } // if there are clicks on the iframe make sure the nav in the iframe parent closes var body = document.getElementsByTagName('body'); -body[0].onclick = function() { - var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; - parent.postMessage( { "bodyclick": "bodyclick" }, targetOrigin) +body[0].onclick = function () { + var targetOrigin = (window.location.protocol === "file:") ? "*" : window.location.protocol + "//" + window.location.host; + var obj = JSON.stringify({ "bodyclick": "bodyclick" }); + window.parent.postMessage(obj, targetOrigin); }; // watch the iframe source so that it can be sent back to everyone else. function receiveIframeMessage(event) { - - // does the origin sending the message match the current host? if not dev/null the request - if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) { - return; - } - - // see if it got a path to replace - if (event.data.path != undefined) { - - if (patternPartial != "") { - - // handle patterns and the view all page - var re = /patterns\/(.*)$/; - var path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+event.data.path; - window.location.replace(path); - - } else { - - // handle the style guide - var path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("styleguide\/html\/styleguide.html","")+event.data.path; - window.location.replace(path); - - } - - } else if (event.data.reload != undefined) { - - // reload the location if there was a message to do so - window.location.reload(); - } - + var data = (typeof event.data !== "string") ? event.data : JSON.parse(event.data), + path; + + // does the origin sending the message match the current host? if not dev/null the request + if ((window.location.protocol !== "file:") && (event.origin !== window.location.protocol + "//" + window.location.host)) { + return; + } + + // see if it got a path to replace + if (data.path !== undefined) { + + if (window.patternPartial !== '') { + + // handle patterns and the view all page + /*jslint regexp:true*/ + var re = /patterns\/(.*)$/; + path = window.location.protocol + "//" + window.location.host + window.location.pathname.replace(re, '') + data.path + '?' + Date.now(); + window.location.replace(path); + + } else { + + // handle the style guide + path = window.location.protocol + "//" + window.location.host + window.location.pathname.replace("styleguide\/html\/styleguide.html", "") + data.path + '?' + Date.now(); + window.location.replace(path); + + } + + } else if (data.reload !== undefined) { + + // reload the location if there was a message to do so + window.location.reload(); + + } + } -window.addEventListener("message", receiveIframeMessage, false); +window.addEventListener("message", receiveIframeMessage, false); \ No newline at end of file diff --git a/public/styleguide/js/styleguide.js b/public/styleguide/js/styleguide.js index e3b860fba..a62db93c9 100644 --- a/public/styleguide/js/styleguide.js +++ b/public/styleguide/js/styleguide.js @@ -1,461 +1,1327 @@ -(function(w){ - - var sw = document.body.clientWidth, //Viewport Width - sh = document.body.clientHeight, //Viewport Height - minViewportWidth = 240, //Minimum Size for Viewport - maxViewportWidth = 2600, //Maxiumum Size for Viewport - viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle - $sgViewport = $('#sg-viewport'), //Viewport element - $sizePx = $('.sg-size-px'), //Px size input element in toolbar - $sizeEms = $('.sg-size-em'), //Em size input element in toolbar - $bodySize = parseInt($('body').css('font-size')), //Body size of the document - $vp = Object, - $sgPattern = Object, - discoID = false, - discoMode = false, - hayMode = false; - - - $(w).resize(function(){ //Update dimensions on resize - sw = document.body.clientWidth; - sh = document.body.clientHeight; - }); - - /* Pattern Lab accordion dropdown */ - $('.sg-acc-handle').on("click", function(e){ - var $this = $(this), - $panel = $this.next('.sg-acc-panel'); - e.preventDefault(); - $this.toggleClass('active'); - $panel.toggleClass('active'); - }); - - $('.sg-nav-toggle').on("click", function(e){ - e.preventDefault(); - $('.sg-nav-container').toggleClass('active'); - }); - - //"View (containing clean, code, raw, etc options) Trigger - $('#sg-t-toggle').on("click", function(e){ - e.preventDefault(); - $(this).parents('ul').toggleClass('active'); - }); - - //Size Trigger - $('#sg-size-toggle').on("click", function(e){ - e.preventDefault(); - $(this).parents('ul').toggleClass('active'); - }); - - //Phase View Events - $('.sg-size[data-size]').on("click", function(e){ - e.preventDefault(); - killDisco(); - killHay(); - - var val = $(this).attr('data-size'); - - if (val.indexOf('px') > -1) { - $bodySize = 1; - } - - val = val.replace(/[^\d.-]/g,'') - sizeiframe(Math.floor(val*$bodySize)); - }); - - //Size View Events - - //Click Size Small Button - $('#sg-size-s').on("click", function(e){ - e.preventDefault(); - killDisco(); - killHay(); - sizeiframe(getRandom(minViewportWidth,500)); - }); - - //Click Size Medium Button - $('#sg-size-m').on("click", function(e){ - e.preventDefault(); - killDisco(); - killHay(); - sizeiframe(getRandom(500,800)); - }); - - //Click Size Large Button - $('#sg-size-l').on("click", function(e){ - e.preventDefault(); - killDisco(); - killHay(); - sizeiframe(getRandom(800,1200)); - }); - - //Click Full Width Button - $('#sg-size-full').on("click", function(e){ //Resets - e.preventDefault(); - killDisco(); - killHay(); - sizeiframe(sw); - }); - - //Click Random Size Button - $('#sg-size-random').on("click", function(e){ - e.preventDefault(); - killDisco(); - killHay(); - sizeiframe(getRandom(minViewportWidth,sw)); - }); - - //Click for Disco Mode, which resizes the viewport randomly - $('#sg-size-disco').on("click", function(e){ - e.preventDefault(); - killHay(); - - if (discoMode) { - killDisco(); - - } else { - startDisco(); - } - }); - - /* Disco Mode */ - function disco() { - sizeiframe(getRandom(minViewportWidth,sw)); - } - - function killDisco() { - discoMode = false; - clearInterval(discoID); - discoID = false; - } - - function startDisco() { - discoMode = true; - discoID = setInterval(disco, 800); - } - - //Stephen Hay Mode - "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!" - $('#sg-size-hay').on("click", function(e){ - e.preventDefault(); - killDisco(); - - if (hayMode) { - killHay(); - } else { - startHay(); - } - }); - - //Stop Hay! Mode - function killHay() { - var currentWidth = $sgViewport.width(); - hayMode = false; - $sgViewport.removeClass('hay-mode'); - $('#sg-gen-container').removeClass('hay-mode'); - sizeiframe(Math.floor(currentWidth)); - } - - // start Hay! mode - function startHay() { - hayMode = true; - $('#sg-gen-container').removeClass("vp-animate").width(minViewportWidth+viewportResizeHandleWidth); - $sgViewport.removeClass("vp-animate").width(minViewportWidth); - - var timeoutID = window.setTimeout(function(){ - $('#sg-gen-container').addClass('hay-mode').width(maxViewportWidth+viewportResizeHandleWidth); - $sgViewport.addClass('hay-mode').width(maxViewportWidth); - - setInterval(function(){ var vpSize = $sgViewport.width(); updateSizeReading(vpSize); },100); - }, 200); - } - - //Pixel input - $sizePx.on('keydown', function(e){ - var val = Math.floor($(this).val()); - - if(e.keyCode == 38) { //If the up arrow key is hit - val++; - sizeiframe(val,false); - } else if(e.keyCode == 40) { //If the down arrow key is hit - val--; - sizeiframe(val,false); - } else if(e.keyCode == 13) { //If the Enter key is hit - e.preventDefault(); - sizeiframe(val); //Size Iframe to value of text box - $(this).blur(); - } - - }); - - $sizePx.on('keyup', function(e){ - var val = Math.floor($(this).val()); - updateSizeReading(val,'px','updateEmInput'); - }); - - //Em input - $sizeEms.on('keydown', function(e){ - var val = parseFloat($(this).val()); - - if(e.keyCode == 38) { //If the up arrow key is hit - val++; - sizeiframe(Math.floor(val*$bodySize),false); - } else if(e.keyCode == 40) { //If the down arrow key is hit - val--; - sizeiframe(Math.floor(val*$bodySize),false); - } else if(e.keyCode == 13) { //If the Enter key is hit - e.preventDefault(); - sizeiframe(Math.floor(val*$bodySize)); //Size Iframe to value of text box - } - }); - - $sizeEms.on('keyup', function(e){ - var val = parseFloat($(this).val()); - updateSizeReading(val,'em','updatePxInput'); - }); - - // handle the MQ click - $('#sg-mq a').on("click", function(e){ - e.preventDefault(); - var val = $(this).html(); - var type = (val.indexOf("px") != -1) ? "px" : "em"; - val = val.replace(type,""); - var width = (type == "px") ? val*1 : val*$bodySize; - sizeiframe(width,true); - }); - - //Resize the viewport - //'size' is the target size of the viewport - //'animate' is a boolean for switching the CSS animation on or off. 'animate' is true by default, but can be set to false for things like nudging and dragging - function sizeiframe(size,animate) { - var theSize; - - if(size>maxViewportWidth) { //If the entered size is larger than the max allowed viewport size, cap value at max vp size - theSize = maxViewportWidth; - } else if(size