From c2bf904e52d3e036e11b5ab0f992b9b5ffca2c07 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Mon, 4 Apr 2016 21:45:16 -0500 Subject: [PATCH 1/2] Pattern Lab 1.2.2 * Underscored Patterns are being built on the UI if styleguide excludes was missing or empty closes #300 * bumping version for 1.2.2 --- core/lib/lineage_hunter.js | 2 +- core/lib/list_item_hunter.js | 2 +- core/lib/media_hunter.js | 2 +- core/lib/object_factory.js | 2 +- core/lib/parameter_hunter.js | 2 +- core/lib/pattern_assembler.js | 2 +- core/lib/pattern_exporter.js | 2 +- core/lib/patternlab.js | 13 +++++++++++-- core/lib/patternlab_grunt.js | 2 +- core/lib/patternlab_gulp.js | 2 +- core/lib/pseudopattern_hunter.js | 2 +- core/lib/style_modifier_hunter.js | 2 +- package.gulp.json | 2 +- package.json | 2 +- 14 files changed, 24 insertions(+), 15 deletions(-) diff --git a/core/lib/lineage_hunter.js b/core/lib/lineage_hunter.js index da51b8266..d251321b3 100644 --- a/core/lib/lineage_hunter.js +++ b/core/lib/lineage_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.2.1 - 2016 + * patternlab-node - v1.2.2 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/core/lib/list_item_hunter.js b/core/lib/list_item_hunter.js index acab107ac..838851aec 100644 --- a/core/lib/list_item_hunter.js +++ b/core/lib/list_item_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.2.1 - 2016 + * patternlab-node - v1.2.2 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/core/lib/media_hunter.js b/core/lib/media_hunter.js index 9d7720013..1e4d07acd 100644 --- a/core/lib/media_hunter.js +++ b/core/lib/media_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.2.1 - 2016 + * patternlab-node - v1.2.2 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/core/lib/object_factory.js b/core/lib/object_factory.js index b4bccb21a..edd7b76a4 100644 --- a/core/lib/object_factory.js +++ b/core/lib/object_factory.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.2.1 - 2016 + * patternlab-node - v1.2.2 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/core/lib/parameter_hunter.js b/core/lib/parameter_hunter.js index 29f4ecc98..f9f7cfca5 100644 --- a/core/lib/parameter_hunter.js +++ b/core/lib/parameter_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.2.1 - 2016 + * patternlab-node - v1.2.2 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/core/lib/pattern_assembler.js b/core/lib/pattern_assembler.js index e66d4dd69..989b58d3d 100644 --- a/core/lib/pattern_assembler.js +++ b/core/lib/pattern_assembler.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.2.1 - 2016 + * patternlab-node - v1.2.2 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/core/lib/pattern_exporter.js b/core/lib/pattern_exporter.js index fdafed9da..0e76a3aef 100644 --- a/core/lib/pattern_exporter.js +++ b/core/lib/pattern_exporter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.2.1 - 2016 + * patternlab-node - v1.2.2 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/core/lib/patternlab.js b/core/lib/patternlab.js index 6513c4a42..8dc40732f 100644 --- a/core/lib/patternlab.js +++ b/core/lib/patternlab.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.2.1 - 2016 + * patternlab-node - v1.2.2 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. @@ -281,7 +281,16 @@ var patternlab_engine = function (config) { } } } else { - styleguidePatterns = patternlab.patterns; + for (i = 0; i < patternlab.patterns.length; i++) { + // skip underscore-prefixed files + if (isPatternExcluded(patternlab.patterns[i])) { + if (patternlab.config.debug) { + console.log('Omitting ' + patternlab.patterns[i].key + " from styleguide pattern exclusion."); + } + continue; + } + styleguidePatterns.push(patternlab.patterns[i]); + } } //also add the cachebuster value. slight chance this could collide with a user that has defined cacheBuster as a value diff --git a/core/lib/patternlab_grunt.js b/core/lib/patternlab_grunt.js index 9a0c575e8..b0ba34252 100644 --- a/core/lib/patternlab_grunt.js +++ b/core/lib/patternlab_grunt.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.2.1 - 2016 + * patternlab-node - v1.2.2 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/core/lib/patternlab_gulp.js b/core/lib/patternlab_gulp.js index 1b1d8d62c..9dad3bb8d 100644 --- a/core/lib/patternlab_gulp.js +++ b/core/lib/patternlab_gulp.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.2.1 - 2016 + * patternlab-node - v1.2.2 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/core/lib/pseudopattern_hunter.js b/core/lib/pseudopattern_hunter.js index 19625f179..35e14d1cc 100644 --- a/core/lib/pseudopattern_hunter.js +++ b/core/lib/pseudopattern_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.2.1 - 2016 + * patternlab-node - v1.2.2 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/core/lib/style_modifier_hunter.js b/core/lib/style_modifier_hunter.js index 3222fdedc..79e8a067e 100644 --- a/core/lib/style_modifier_hunter.js +++ b/core/lib/style_modifier_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.2.1 - 2016 + * patternlab-node - v1.2.2 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/package.gulp.json b/package.gulp.json index d5ce052a2..18aef38d1 100644 --- a/package.gulp.json +++ b/package.gulp.json @@ -1,7 +1,7 @@ { "name": "patternlab-node", "description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).", - "version": "1.2.1", + "version": "1.2.2", "main": "./core/lib/patternlab.js", "dependencies": { "del": "^2.2.0", diff --git a/package.json b/package.json index 06541e240..2254aef16 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "patternlab-node", "description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).", - "version": "1.2.1", + "version": "1.2.2", "main": "./core/lib/patternlab.js", "dependencies": { "diveSync": "^0.3.0", From a08e344a1062811da21a7ce6a5728ce7cfee66c9 Mon Sep 17 00:00:00 2001 From: Serg Gospodarets Date: Sat, 21 May 2016 15:36:47 +0100 Subject: [PATCH 2/2] Show "CSS" and "JS" tabs in code sections --- Gruntfile.js | 2 + core/lib/pattern_assembler.js | 25 ++++- core/lib/patternlab.js | 10 ++ core/styleguide/js/code-pattern.js | 4 +- core/styleguide/js/code-viewer.js | 96 +++++++++++++++++-- core/templates/index.mustache | 1 + .../pattern-header-footer/footer-pattern.html | 3 +- core/templates/styleguide.mustache | 14 ++- core/templates/viewall.mustache | 14 ++- gulpfile.js | 2 + .../00-atoms/01-global/00-colors.css | 1 + .../_patterns/00-atoms/01-global/00-colors.js | 1 + 12 files changed, 153 insertions(+), 20 deletions(-) create mode 100644 source/_patterns/00-atoms/01-global/00-colors.css create mode 100644 source/_patterns/00-atoms/01-global/00-colors.js diff --git a/Gruntfile.js b/Gruntfile.js index 2fbe7d31f..d2ef315bb 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -86,6 +86,8 @@ module.exports = function (grunt) { path.resolve(paths().source.styleguide + 'css/*.css'), path.resolve(paths().source.patterns + '**/*.mustache'), path.resolve(paths().source.patterns + '**/*.json'), + path.resolve(paths().source.patterns + '**/*.css'), + path.resolve(paths().source.patterns + '**/*.js'), path.resolve(paths().source.fonts + '/*'), path.resolve(paths().source.images + '/*'), path.resolve(paths().source.data + '*.json'), diff --git a/core/lib/pattern_assembler.js b/core/lib/pattern_assembler.js index 8ab0e9c0a..21ad3dc71 100644 --- a/core/lib/pattern_assembler.js +++ b/core/lib/pattern_assembler.js @@ -149,8 +149,11 @@ var pattern_assembler = function () { var filename = path.basename(file); var ext = path.extname(filename); - //ignore dotfiles, underscored files, and non-variant .json files - if (filename.charAt(0) === '.' || (ext === '.json' && filename.indexOf('~') === -1)) { + //ignore dotfiles, underscored files, non-variant .json files, css and js files + if (filename.charAt(0) === '.' || + (ext === '.json' && filename.indexOf('~') === -1) || + ext === '.css' || ext === '.js' + ) { return; } @@ -199,6 +202,24 @@ var pattern_assembler = function () { //add the raw template to memory currentPattern.template = fs.readFileSync(file, 'utf8'); + //look for a css file for this template + var cssPath = currentPattern.abspath.substr(0, currentPattern.abspath.lastIndexOf(".")) + ".css"; + var cssExists = fs.existsSync(cssPath); + + if (cssExists) { + currentPattern.cssExists = true; + currentPattern.css = fs.readFileSync(cssPath, 'utf8'); + } + + //look for a js file for this template + var jsPath = currentPattern.abspath.substr(0, currentPattern.abspath.lastIndexOf(".")) + ".js"; + var jsExists = fs.existsSync(jsPath); + + if (jsExists) { + currentPattern.jsExists = true; + currentPattern.js = fs.readFileSync(jsPath, 'utf8'); + } + //find any stylemodifiers that may be in the current pattern currentPattern.stylePartials = findPartialsWithStyleModifiers(currentPattern); diff --git a/core/lib/patternlab.js b/core/lib/patternlab.js index 7bd7ebcbc..1c4656aa3 100644 --- a/core/lib/patternlab.js +++ b/core/lib/patternlab.js @@ -227,6 +227,16 @@ var patternlab_engine = function (config) { //write the encoded version too fs.outputFileSync(paths.public.patterns + pattern.patternLink.replace('.html', '.escaped.html'), entity_encoder.encode(pattern.patternPartial)); + + //write the css file too + if(pattern.cssExists){ + fs.outputFileSync(paths.public.patterns + pattern.patternLink.replace('.html', '.css'), pattern.css); + } + + //write the js file too + if(pattern.jsExists){ + fs.outputFileSync(paths.public.patterns + pattern.patternLink.replace('.html', '.js'), pattern.js); + } }); //export patterns if necessary diff --git a/core/styleguide/js/code-pattern.js b/core/styleguide/js/code-pattern.js index f8a949519..430ca9a77 100644 --- a/core/styleguide/js/code-pattern.js +++ b/core/styleguide/js/code-pattern.js @@ -52,7 +52,7 @@ var codePattern = { // if comments overlay is turned on add the has-comment class and pointer if (codePattern.codeOverlayActive) { - var obj = JSON.stringify({ "codeOverlay": "on", "lineage": lineage, "lineageR": lineageR, "patternPartial": patternPartial, "patternState": patternState, "cssEnabled": cssEnabled }); + var obj = JSON.stringify({ "codeOverlay": "on", "lineage": lineage, "lineageR": lineageR, "patternPartial": patternPartial, "patternState": patternState, "cssEnabled": cssEnabled, "jsEnabled": jsEnabled }); parent.postMessage(obj,codePattern.targetOrigin); } else if (codePattern.codeEmbeddedActive) { @@ -115,4 +115,4 @@ jwerty.key('esc', function (e) { var obj = JSON.stringify({ "keyPress": "esc" }); parent.postMessage(obj,codePattern.targetOrigin); return false; -}); \ No newline at end of file +}); diff --git a/core/styleguide/js/code-viewer.js b/core/styleguide/js/code-viewer.js index ede15941f..3aa850a43 100644 --- a/core/styleguide/js/code-viewer.js +++ b/core/styleguide/js/code-viewer.js @@ -14,7 +14,7 @@ var codeViewer = { encoded: "", mustache: "", css: "", - ids: { "e": "#sg-code-title-html", "m": "#sg-code-title-mustache", "c": "#sg-code-title-css" }, + ids: { "e": "#sg-code-title-html", "m": "#sg-code-title-mustache", "c": "#sg-code-title-css", "j": "#sg-code-title-js" }, targetOrigin: (window.location.protocol === "file:") ? "*" : window.location.protocol+"//"+window.location.host, copyOnInit: false, @@ -138,7 +138,11 @@ var codeViewer = { $(codeViewer.ids["c"]).click(function() { codeViewer.swapCode("c"); }); - + + // make sure the click events are handled on the JS tab + $(codeViewer.ids["j"]).click(function() { + codeViewer.swapCode("j"); + }); }, /** @@ -148,7 +152,18 @@ var codeViewer = { codeViewer.clearSelection(); var fill = ""; - var className = (type == "c") ? "css" : "markup"; + var className; + switch(type){ + case "css": + className = "css"; + break; + case "js": + className = "js"; + break; + default: + className = "markup"; + break; + } $("#sg-code-fill").removeClass().addClass("language-"+className); if (type == "m") { fill = codeViewer.mustache; @@ -156,6 +171,8 @@ var codeViewer = { fill = codeViewer.encoded; } else if (type == "c") { fill = codeViewer.css; + } else if (type == "j") { + fill = codeViewer.js; } $("#sg-code-fill").html(fill).text(); codeViewer.tabActive = type; @@ -230,19 +247,68 @@ var codeViewer = { codeViewer.activateDefaultTab("c",this.responseText); } }, - + + /** + * if the CSS is not provided for the pattern- hides the CSS tab + * if the CSS tab is the current active tab function changes it to the HTML + */ + cleanCss: function() { + $('#sg-code-title-css').css("display","none"); + codeViewer.css = ""; + if (codeViewer.tabActive == "c") { + codeViewer.tabActive = "e"; + } + }, + + /** + * once the AJAX request for the js mark-up is finished this runs. if this function is running then js has been enabled + * if the js tab is the current active tab it adds the content to the default code container + */ + saveJS: function() { + $('#sg-code-title-js').css("display","block"); + codeViewer.js = this.responseText; + if (codeViewer.tabActive == "j") { + codeViewer.activateDefaultTab("j",this.responseText); + } + }, + + /** + * if the JS is not provided for the pattern- hides the JS tab + * if the JS tab is the current active tab function changes it to the HTML + */ + cleanJs: function() { + $('#sg-code-title-js').css("display","none"); + codeViewer.js = ""; + if (codeViewer.tabActive == "j") { + codeViewer.tabActive = "e"; + } + }, + /** * when loading the code view make sure the active tab is highlighted and filled in appropriately */ activateDefaultTab: function(type,code) { var typeName = ""; - var className = (type == "c") ? "css" : "markup"; + var className; + switch(type){ + case "css": + className = "css"; + break; + case "js": + className = "js"; + break; + default: + className = "markup"; + break; + } if (type == "m") { typeName = "mustache"; } else if (type == "e") { typeName = "html"; } else if (type == "c") { typeName = "css"; + } else if (type == "j") { + typeName = "js"; } $('.sg-code-title-active').removeClass('sg-code-title-active'); $('#sg-code-title-'+typeName).addClass('sg-code-title-active'); @@ -259,8 +325,8 @@ var codeViewer = { * when turning on or switching between patterns with code view on make sure we get * the code from from the pattern via post message */ - updateCode: function(lineage,lineageR,patternPartial,patternState,cssEnabled) { - + updateCode: function(lineage,lineageR,patternPartial,patternState,cssEnabled, jsEnabled) { + // clear any selections that might have been made codeViewer.clearSelection(); @@ -333,6 +399,18 @@ var codeViewer = { c.onload = this.saveCSS; c.open("GET", fileName.replace(/\.html/,".css") + "?" + (new Date()).getTime(), true); c.send(); + } else{ + this.cleanCss(); + } + + // if js is enabled request the js for the pattern + if (jsEnabled) { + var j = new XMLHttpRequest(); + j.onload = this.saveJS; + j.open("GET", fileName.replace(/\.html/,".js") + "?" + (new Date()).getTime(), true); + j.send(); + } else{ + this.cleanJs(); } // move the code into view @@ -359,7 +437,7 @@ var codeViewer = { // switch based on stuff related to the postmessage if (data.codeOverlay !== undefined) { if (data.codeOverlay === "on") { - codeViewer.updateCode(data.lineage,data.lineageR,data.patternPartial,data.patternState,data.cssEnabled); + codeViewer.updateCode(data.lineage,data.lineageR,data.patternPartial,data.patternState,data.cssEnabled, data.jsEnabled); } else { codeViewer.slideCode($('#sg-code-container').outerHeight()); } @@ -438,4 +516,4 @@ jwerty.key('esc', function (e) { codeViewer.closeCode(); return false; } -}); \ No newline at end of file +}); diff --git a/core/templates/index.mustache b/core/templates/index.mustache index 6ca1b5a12..17b1802ec 100644 --- a/core/templates/index.mustache +++ b/core/templates/index.mustache @@ -72,6 +72,7 @@
  • HTML
  • Mustache
    • +
    diff --git a/core/templates/pattern-header-footer/footer-pattern.html b/core/templates/pattern-header-footer/footer-pattern.html index 20caf0102..9130f40ae 100644 --- a/core/templates/pattern-header-footer/footer-pattern.html +++ b/core/templates/pattern-header-footer/footer-pattern.html @@ -7,7 +7,8 @@ var lineageR = [{{{ lineageR }}}]; var patternState = "{{patternState}}"; var baseurl = "{{{baseurl}}}"; - var cssEnabled = false; //TODO + var cssEnabled = ("{{cssExists}}" === "true"); + var jsEnabled = ("{{jsExists}}" === "true");