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/lineage_hunter.js b/core/lib/lineage_hunter.js index b79dd8c92..a030d05dc 100644 --- a/core/lib/lineage_hunter.js +++ b/core/lib/lineage_hunter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.3.0 - 2016 - * +/* + * patternlab-node - v1.3.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/core/lib/list_item_hunter.js b/core/lib/list_item_hunter.js index c3131876d..e13549143 100644 --- a/core/lib/list_item_hunter.js +++ b/core/lib/list_item_hunter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.3.0 - 2016 - * +/* + * patternlab-node - v1.3.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/core/lib/media_hunter.js b/core/lib/media_hunter.js index c5da7d980..fca2a5626 100644 --- a/core/lib/media_hunter.js +++ b/core/lib/media_hunter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.3.0 - 2016 - * +/* + * patternlab-node - v1.3.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/core/lib/object_factory.js b/core/lib/object_factory.js index 1206e0bd0..b3c0fb708 100644 --- a/core/lib/object_factory.js +++ b/core/lib/object_factory.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.3.0 - 2016 - * +/* + * patternlab-node - v1.3.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/core/lib/parameter_hunter.js b/core/lib/parameter_hunter.js index 45f111a67..0f5b6fdbe 100644 --- a/core/lib/parameter_hunter.js +++ b/core/lib/parameter_hunter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.3.0 - 2016 - * +/* + * patternlab-node - v1.3.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ @@ -159,7 +159,7 @@ var parameter_hunter = function () { values.push(paramString.match(regex)[0].trim()); //truncate the beginning from paramString and continue either - //looking for a key, or returning + //looking for a key, or returning paramString = paramString.replace(regex, '').trim(); //exit do while if the final char is '}' diff --git a/core/lib/pattern_assembler.js b/core/lib/pattern_assembler.js index d9136af33..21ad3dc71 100644 --- a/core/lib/pattern_assembler.js +++ b/core/lib/pattern_assembler.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.3.0 - 2016 - * +/* + * patternlab-node - v1.3.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ @@ -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/pattern_exporter.js b/core/lib/pattern_exporter.js index 46ba93d0c..5ff05e09c 100644 --- a/core/lib/pattern_exporter.js +++ b/core/lib/pattern_exporter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.3.0 - 2016 - * +/* + * patternlab-node - v1.3.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/core/lib/patternlab.js b/core/lib/patternlab.js index b0192c8dd..1c4656aa3 100644 --- a/core/lib/patternlab.js +++ b/core/lib/patternlab.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.3.0 - 2016 - * +/* + * patternlab-node - v1.3.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ @@ -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/lib/patternlab_grunt.js b/core/lib/patternlab_grunt.js index adc88f56b..31967435a 100644 --- a/core/lib/patternlab_grunt.js +++ b/core/lib/patternlab_grunt.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.3.0 - 2016 - * +/* + * patternlab-node - v1.3.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/core/lib/patternlab_gulp.js b/core/lib/patternlab_gulp.js index 62f4e2eeb..75340380f 100644 --- a/core/lib/patternlab_gulp.js +++ b/core/lib/patternlab_gulp.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.3.0 - 2016 - * +/* + * patternlab-node - v1.3.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/core/lib/pseudopattern_hunter.js b/core/lib/pseudopattern_hunter.js index 5254c12fb..d4d1cafe8 100644 --- a/core/lib/pseudopattern_hunter.js +++ b/core/lib/pseudopattern_hunter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.3.0 - 2016 - * +/* + * patternlab-node - v1.3.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/core/lib/style_modifier_hunter.js b/core/lib/style_modifier_hunter.js index 99d258337..fb18063c9 100644 --- a/core/lib/style_modifier_hunter.js +++ b/core/lib/style_modifier_hunter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.3.0 - 2016 - * +/* + * patternlab-node - v1.3.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ 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");