├── .bowerrc ├── .editorconfig ├── .github └── CONTRIBUTING.md ├── .gitignore ├── .jshintrc ├── LICENSE ├── README.md ├── bower.json ├── composer.json ├── dist ├── index.html └── styleguide │ ├── bower_components │ ├── EventEmitter.min.js │ ├── hogan-3.0.2.min.js │ ├── jquery.min.js │ ├── jwerty.min.js │ ├── prism.min.js │ ├── script.min.js │ └── typeahead.bundle.min.js │ ├── css │ └── pattern-lab.css │ └── js │ ├── patternlab-pattern.js │ ├── patternlab-pattern.min.js │ ├── patternlab-viewer.js │ └── patternlab-viewer.min.js ├── gulpfile.js ├── package.json └── src ├── css └── prism-okaidia.css ├── html ├── index.html └── partials │ ├── base-template.html │ ├── controls.html │ ├── header.html │ ├── iframe.html │ ├── modal.html │ ├── panel-code-template.html │ └── pattern-nav.html ├── js ├── clipboard.min.js ├── data-saver.js ├── layout.js ├── modal-styleguide.js ├── modal-viewer.js ├── panels-util.js ├── panels-viewer.js ├── panels.js ├── pattern-finder.js ├── plugin-loader.js ├── postmessage.js ├── prism-languages.js ├── styleguide.js └── url-handler.js └── sass ├── pattern-lab.scss └── scss ├── abstracts ├── _mixins.scss └── _variables.scss ├── base ├── _body.scss └── _reset.scss ├── components ├── _annotations.scss ├── _breadcrumbs.scss ├── _controls.scss ├── _header.scss ├── _ish-sizing.scss ├── _logo.scss ├── _modal.scss ├── _navigation.scss ├── _pattern-category.scss ├── _pattern-info.scss ├── _pattern-lineage.scss ├── _pattern-states.scss ├── _pattern.scss ├── _tabs.scss ├── _text-passage.scss ├── _tools.scss └── _viewport.scss ├── themes ├── _density-theme.scss ├── _light-theme.scss └── _sidebar-theme.scss ├── utilities └── _visibility.scss └── vendor ├── _prism.scss └── _typeahead.scss /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "src/bower_components" 3 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = tab 6 | indent_size = 4 7 | trim_trailing_whitespace = false 8 | end_of_line = lf 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Pattern Lab Shared Front End 2 | If you'd like to contribute to the shared frontend for Pattern Lab Node and PHP, please do so! There is always a lot of ground to cover and something for your wheelhouse. 3 | 4 | ## Developing Locally 5 | 6 | The best way to make changes to this repo and test them is through your existing edition. 7 | 8 | ### Node 9 | 10 | * Fork this repository on Github. 11 | * Create a new branch in your fork and push your changes in that fork. 12 | * `npm install` 13 | * `npm link` 14 | * `cd /path/to/your/edition` 15 | * `npm link @pattern-lab/styleguidekit-assets-default` 16 | 17 | ### PHP 18 | 19 | Once you've installed the requirements do the following to set-up for development: 20 | 21 | 1. `cd /path/to/dev-edition/packages/pattern-lab/styleguidekit-assets-default` 22 | 2. `git config branch.dev.remote origin` 23 | 3. `npm install` 24 | 4. `bower install` 25 | 26 | ## Making Changes 27 | 28 | To make changes **always edit files in `src/`**. To make sure that these changes are reflected in the front-end and `dist/` folder run the following: 29 | 30 | gulp --copy-dist=../../../public 31 | 32 | To watch for changes you can use: 33 | 34 | gulp --watch --copy-dist=../../../public 35 | 36 | At this point changes to the static assets should compile to the correct locations in the project as well as `dist/`. 37 | 38 | ## Guidelines 39 | 40 | * Pattern Lab uses a standard [git flow model](http://nvie.com/posts/a-successful-git-branching-model/) unless otherwise noted in a repository. The `develop` branch is not considered stable. Tags and releases are cut from the `master` branch 41 | * _USUALLY_ submit pull requests against the [develop branch](https://github.com/pattern-lab/styleguidekit-assets-default/tree/dev). If you have a major feature to stabilize over time, open an issue about making a dedicated `feature-branch` off of `develop` 42 | * Please keep your pull requests concise and limited to **ONE** substantive change at a time. This makes reviewing and testing so much easier. 43 | * Commits should reference the issue you are adressing. 44 | * Large enhancements should begin with opening an issue. This will result in a more systematic way for us to review your contribution and determine if a [specifcation discussion](https://github.com/pattern-lab/the-spec/issues) needs to occur. 45 | 46 | ## Coding style 47 | 48 | * The `.editorconfig` controls spaces / tabs within supported editors. Check out their [site](http://editorconfig.org/). 49 | 50 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | src/bower_components/* 3 | .sass-cache/* 4 | .DS_Store 5 | /.eslintignore 6 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "loopfunc": true, 3 | "sub": true 4 | } 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Brad Frost, http://bradfrostweb.com & Dave Olsen, http://dmolsen.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![license](https://img.shields.io/github/license/pattern-lab/styleguidekit-assets-default.svg) ![current release](https://img.shields.io/npm/v/@pattern-lab/styleguidekit-assets-default.svg) 2 | [![Packagist](https://img.shields.io/packagist/v/pattern-lab/styleguidekit-assets-default.svg)](https://packagist.org/packages/pattern-lab/styleguidekit-assets-default) [![Gitter](https://img.shields.io/gitter/room/pattern-lab/frontend-viewer.svg)](https://gitter.im/pattern-lab/frontend-viewer) 3 | 4 | # Static Assets for the Default StyleguideKit 5 | 6 | This code is responsible for creating Pattern Lab's UI look, feel, and functionality. These assets are are meant to be used in conjunction with the default [Mustache](https://github.com/pattern-lab/styleguidekit-mustache-default) and [Twig](https://github.com/pattern-lab/styleguidekit-twig-default) StyleguideKits, which control Pattern Lab-specific UI _inside_ the iframe. 7 | 8 | ## Installation 9 | 10 | ### Node 11 | Pattern Lab Node uses [npm](https://www.npmjs.com/) to manage project dependencies. To install the default static assets run: 12 | 13 | npm install @pattern-lab/styleguidekit-assets-default 14 | 15 | 16 | ### PHP 17 | 18 | Pattern Lab PHP uses [Composer](https://getcomposer.org/) to manage project dependencies. To install the default static assets run: 19 | 20 | composer require pattern-lab/styleguidekit-assets-default 21 | 22 | ## Development Requirements 23 | 24 | In order to modify these assets you need to install the following: 25 | 26 | * the [Development Edition of Pattern Lab](https://github.com/pattern-lab/edition-php-development) 27 | * [Node.js](http://nodejs.org) and NPM 28 | * [Bower](http://bower.io) 29 | * [Ruby Sass](http://sass-lang.com/install) 30 | 31 | ## Development Set-up 32 | 33 | Read the [contribution guidelines](https://github.com/pattern-lab/styleguidekit-assets-default/blob/master/.github/CONTRIBUTING.md) 34 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styleguidekit-assets-default", 3 | "version": "0.1.0", 4 | "homepage": "https://github.com/pattern-lab/styleguidekit-assets-default", 5 | "authors": [ 6 | "Dave Olsen " 7 | ], 8 | "license": "MIT", 9 | "private": true, 10 | "dependencies": { 11 | "jquery": "~2.1.1", 12 | "jwerty": "~0.3.2", 13 | "prism": "gh-pages", 14 | "typeahead.js": "~0.10.4", 15 | "hogan": "~3.0.2", 16 | "script.js": "~2.5.7", 17 | "eventEmitter": "~4.2.7" 18 | }, 19 | "overrides": { 20 | "hogan": { 21 | "main": "web/builds/3.0.2/hogan-3.0.2.js" 22 | }, 23 | "script.js": { 24 | "main": "dist/script.js" 25 | }, 26 | "jwerty": { 27 | "main": "jwerty.js" 28 | }, 29 | "prism": { 30 | "main": "prism.js" 31 | } 32 | }, 33 | "devDependencies": {} 34 | } 35 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pattern-lab/styleguidekit-assets-default", 3 | "description": "The assets for the default StyleguideKit for Pattern Lab. Contains styles and mark-up for Pattern Lab's front-end.", 4 | "keywords": ["mustache", "pattern lab", "styleguide"], 5 | "homepage": "http://patternlab.io", 6 | "license": "MIT", 7 | "type": "patternlab-styleguidekit", 8 | "authors": [ 9 | { 10 | "name": "Dave Olsen", 11 | "email": "dmolsen@gmail.com", 12 | "homepage": "http://dmolsen.com", 13 | "role": "Lead Developer" 14 | }, 15 | { 16 | "name": "Brad Frost", 17 | "homepage": "http://bradfrostweb.com", 18 | "role": "Creator" 19 | } 20 | ], 21 | "support": { 22 | "issues": "https://github.com/pattern-lab/styleguidekit-assets-default/issues", 23 | "wiki": "http://patternlab.io/docs/", 24 | "source": "https://github.com/pattern-lab/styleguidekit-assets-default/releases" 25 | }, 26 | "extra": { 27 | "patternlab": { 28 | "dist": { 29 | "publicDir": [ 30 | { "*": "*" } 31 | ] 32 | }, 33 | "config": { 34 | "ishMinimum": "240", 35 | "ishMaximum": "2600", 36 | "ishControlsHide": ["hay"] 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pattern Lab 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 32 | 33 | 34 |
35 | 36 |
37 | 38 |
39 | 40 | 41 | 42 |
43 | 44 |
45 | 46 |
47 | 48 |
49 | 50 |
51 | 52 |
53 |
54 |
55 |
56 | 62 |
63 | 64 |
65 | 66 |
67 | 68 | 69 | 70 | 132 | 133 | 215 | 216 | 217 | 341 | 342 | 343 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | -------------------------------------------------------------------------------- /dist/styleguide/bower_components/EventEmitter.min.js: -------------------------------------------------------------------------------- 1 | (function(){"use strict";function e(){}function t(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var r=e.prototype,i=this,s=i.EventEmitter;r.getListeners=function(e){var t,n,r=this._getEvents();if(e instanceof RegExp){t={};for(n in r)r.hasOwnProperty(n)&&e.test(n)&&(t[n]=r[n])}else t=r[e]||(r[e]=[]);return t},r.flattenListeners=function(e){var t,n=[];for(t=0;t=0;c--)if(a=e[c],s=n(t,a,u),void 0!==s){o=!0;break}return o?(r||"function"!=typeof s||(s=this.mv(s,e,i)),s):!r&&""},ls:function(t,n,e,r,s){var a=this.options.delimiters;return this.options.delimiters=s,this.b(this.ct(i(t.call(n,r)),n,e)),this.options.delimiters=a,!1},ct:function(t,n,e){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(t,this.options).render(n,e)},b:function(t){this.buf+=t},fl:function(){var t=this.buf;return this.buf="",t},ms:function(t,n,e,i,r,s,a){var o,u=n[n.length-1],c=t.call(u);return"function"==typeof c?!!i||(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(c,u,e,o.substring(r,s),a)):c},mv:function(t,n,e){var r=n[n.length-1],s=t.call(r);return"function"==typeof s?this.ct(i(s.call(r)),r,e):s},sub:function(t,n,e,i){var r=this.subs[t];r&&(this.activeSub=t,r(n,e,this,i),this.activeSub=!1)}};var s=/&/g,a=//g,u=/\'/g,c=/\"/g,l=/[&<>\"\']/,f=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}("undefined"!=typeof exports?exports:Hogan),function(t){function n(t){"}"===t.n.substr(t.n.length-1)&&(t.n=t.n.substring(0,t.n.length-1))}function e(t){return t.trim?t.trim():t.replace(/^\s*|\s*$/g,"")}function i(t,n,e){if(n.charAt(e)!=t.charAt(0))return!1;for(var i=1,r=t.length;i0;){if(f=n.shift(),l&&"<"==l.tag&&!(f.tag in k))throw new Error("Illegal content in < super tag.");if(t.tags[f.tag]<=t.tags.$||s(f,o))i.push(f),f.nodes=r(n,f.tag,i,o);else{if("/"==f.tag){if(0===i.length)throw new Error("Closing tag without opener: /"+f.n);if(c=i.pop(),f.n!=c.n&&!a(f.n,c.n,o))throw new Error("Nesting error: "+c.n+" vs. "+f.n);return c.end=f.i,u}"\n"==f.tag&&(f.last=0==n.length||"\n"==n[0].tag)}u.push(f)}if(i.length>0)throw new Error("missing closing tag: "+i.pop().n);return u}function s(t,n){for(var e=0,i=n.length;e":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(r,s){function a(){m.length>0&&(x.push({tag:"_t",text:new String(m)}),m="")}function o(){for(var n=!0,e=y;e"==e.tag&&(e.indent=x[i].text.toString()),x.splice(i,1));else n||x.push({tag:"\n"});w=!1,y=x.length}function c(t,n){var i="="+S,r=t.indexOf(i,n),s=e(t.substring(t.indexOf("=",n)+1,r)).split(" ");return T=s[0],S=s[s.length-1],r+i.length-1}var l=r.length,f=0,h=1,p=2,v=f,b=null,d=null,m="",x=[],w=!1,k=0,y=0,T="{{",S="}}";for(s&&(s=s.split(" "),T=s[0],S=s[1]),k=0;k":f,"<":function(n,e){var i={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,i);var r=e.partials[f(n,e)];r.subs=i.subs,r.partials=i.partials},$:function(n,e){var i={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,i),e.subs[n.n]=i.code,e.inPartial||(e.code+='t.sub("'+c(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=p('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+l(t.n)+'("'+c(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=p('"'+c(t.text)+'"')},"{":h,"&":h},t.walk=function(n,e){for(var i,r=0,s=n.length;r7}function o(e){var t,n,a,i,s,u,f,y,d;if(e instanceof o)return e;for(r(e,"array")||(e=String(e).replace(/\s/g,"").toLowerCase().match(/(?:\+,|[^,])+/g)),t=0,n=e.length;te.length)return;if(!(P instanceof o)){p.lastIndex=0;var w=p.exec(P),x=1;if(!w&&h&&v!=t.length-1){if(p.lastIndex=k,w=p.exec(e),!w)break;for(var S=w.index+(d?w[1].length:0),A=w.index+w[0].length,j=v,_=k,C=t.length;j=_&&(++v,k=_);if(t[v]instanceof o||t[j-1].greedy)continue;x=j-v,P=e.slice(k,_),w.index-=k}if(w){d&&(f=w[1].length);var S=w.index+f,w=w[0].slice(f),A=S+w.length,N=P.slice(0,S),O=P.slice(A),E=[v,x];N&&(++v,k+=N.length,E.push(N));var F=new o(u,m?a.tokenize(w,m):w,y,w,h);if(E.push(F),O&&E.push(O),Array.prototype.splice.apply(t,E),1!=x&&a.matchGrammar(e,t,n,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,n){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return a.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var n=a.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=a.hooks.all[e];if(n&&n.length)for(var r,i=0;r=n[i++];)r(t)}}},n=a.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(n.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===a.util.type(e))return e.map(function(a){return n.stringify(a,t,e)}).join("");var i={type:e.type,content:n.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var s="Array"===a.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}a.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),n=t.language,r=t.code,i=t.immediateClose;_self.postMessage(a.highlight(r,a.languages[n],n)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(a.filename=r.src,a.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(a.highlightAll):window.setTimeout(a.highlightAll,16):document.addEventListener("DOMContentLoaded",a.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism),Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\s\S])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\s\S]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)),Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript,function(){"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var a,n=t.getAttribute("data-src"),r=t,i=/\blang(?:uage)?-(?!\*)(\w+)\b/i;r&&!i.test(r.className);)r=r.parentNode;if(r&&(a=(t.className.match(i)||[,""])[1]),!a){var s=(n.match(/\.(\w+)$/)||[,""])[1];a=e[s]||s}var l=document.createElement("code");l.className="language-"+a,t.textContent="",l.textContent="Loading…",t.appendChild(l);var o=new XMLHttpRequest;o.open("GET",n,!0),o.onreadystatechange=function(){4==o.readyState&&(o.status<400&&o.responseText?(l.textContent=o.responseText,Prism.highlightElement(l)):o.status>=400?l.textContent="✖ Error "+o.status+" while fetching file: "+o.statusText:l.textContent="✖ Error: File does not exist or is empty")},o.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight))}(); -------------------------------------------------------------------------------- /dist/styleguide/bower_components/script.min.js: -------------------------------------------------------------------------------- 1 | !function(n,t){"undefined"!=typeof module&&module.exports?module.exports=t():"function"==typeof define&&define.amd?define(t):this[n]=t()}("$script",function(){function n(n,t){for(var e=0,o=n.length;e code[class*="language-"], 57 | pre[class*="language-"] { 58 | background: #f5f2f0; 59 | } 60 | 61 | /* Inline code */ 62 | :not(pre) > code[class*="language-"] { 63 | padding: .1em; 64 | border-radius: .3em; 65 | } 66 | 67 | .token.comment, 68 | .token.prolog, 69 | .token.doctype, 70 | .token.cdata { 71 | color: slategray; 72 | } 73 | 74 | .token.punctuation { 75 | color: #999; 76 | } 77 | 78 | .namespace { 79 | opacity: .7; 80 | } 81 | 82 | .token.property, 83 | .token.tag, 84 | .token.boolean, 85 | .token.number, 86 | .token.constant, 87 | .token.symbol, 88 | .token.deleted { 89 | color: #905; 90 | } 91 | 92 | .token.selector, 93 | .token.attr-name, 94 | .token.string, 95 | .token.char, 96 | .token.builtin, 97 | .token.inserted { 98 | color: #690; 99 | } 100 | 101 | .token.operator, 102 | .token.entity, 103 | .token.url, 104 | .language-css .token.string, 105 | .style .token.string { 106 | color: #a67f59; 107 | background: hsla(0, 0%, 100%, .5); 108 | } 109 | 110 | .token.atrule, 111 | .token.attr-value, 112 | .token.keyword { 113 | color: #07a; 114 | } 115 | 116 | .token.function { 117 | color: #DD4A68; 118 | } 119 | 120 | .token.regex, 121 | .token.important, 122 | .token.variable { 123 | color: #e90; 124 | } 125 | 126 | .token.important, 127 | .token.bold { 128 | font-weight: bold; 129 | } 130 | .token.italic { 131 | font-style: italic; 132 | } 133 | 134 | .token.entity { 135 | cursor: help; 136 | } 137 | 138 | pre.line-numbers { 139 | position: relative; 140 | padding-left: 3.8em; 141 | counter-reset: linenumber; 142 | } 143 | 144 | pre.line-numbers > code { 145 | position: relative; 146 | } 147 | 148 | .line-numbers .line-numbers-rows { 149 | position: absolute; 150 | pointer-events: none; 151 | top: 0; 152 | font-size: 100%; 153 | left: -3.8em; 154 | width: 3em; /* works for line-numbers below 1000 lines */ 155 | letter-spacing: -1px; 156 | border-right: 1px solid #999; 157 | 158 | -webkit-user-select: none; 159 | -moz-user-select: none; 160 | -ms-user-select: none; 161 | user-select: none; 162 | 163 | } 164 | 165 | .line-numbers-rows > span { 166 | pointer-events: none; 167 | display: block; 168 | counter-increment: linenumber; 169 | } 170 | 171 | .line-numbers-rows > span:before { 172 | content: counter(linenumber); 173 | color: #999; 174 | display: block; 175 | padding-right: 0.8em; 176 | text-align: right; 177 | } 178 | .token a { 179 | color: inherit; 180 | } -------------------------------------------------------------------------------- /src/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pattern Lab 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | @@include('./partials/header.html') 14 | 15 | @@include('./partials/iframe.html') 16 | 17 | @@include('./partials/modal.html') 18 | 19 | 20 | 23 | 24 | 27 | 28 | 29 | 32 | 33 | 34 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /src/html/partials/base-template.html: -------------------------------------------------------------------------------- 1 | 2 | {{# descBlockExists }} 3 | 4 |
5 | 6 | {{# isPatternView }} 7 | 8 |
9 | 10 |
    11 | 12 | {{# patternBreadcrumb }} 13 | 14 |
  • {{ patternType }}
    • 15 | 16 | {{# patternSubtype }} 17 |
  • {{ patternSubtype }}
    • 18 | {{/ patternSubtype }} 19 | 20 | {{/ patternBreadcrumb }} 21 | 22 |
23 | 24 |

25 | {{ patternName }} 26 | 27 | {{# patternState }} 28 | 29 | {{/ patternState }} 30 |

31 | 32 |
33 | {{/ isPatternView }} 34 | 35 | {{# patternDescExists }} 36 |
37 | {{{ patternDesc }}} {{# patternDescAdditions }} {{{ patternDescAdditions }}} {{/ patternDescAdditions }} 38 |
39 | {{/ patternDescExists }} 40 | 41 | {{# lineageExists }} 42 |

43 | The {{ patternName }} pattern contains the following patterns: 44 | {{# lineage }} 45 | 46 | {{ lineagePattern }} 47 | {{# lineageState }}{{/ lineageState }} 48 | 49 | {{# hasComma }}, {{/ hasComma }} 50 | {{/ lineage }} 51 | 52 |

53 | {{/ lineageExists }} 54 | 55 | {{# lineageRExists }} 56 |

57 | The {{ patternName }} pattern is included in the following patterns: 58 | {{# lineageR }} 59 | 60 | {{ lineagePattern }} 61 | {{# lineageState }}{{/ lineageState }} 62 | 63 | {{# hasComma }}, {{/ hasComma }} 64 | {{/ lineageR }} 65 |

66 | {{/ lineageRExists }} 67 | 68 | {{# annotationExists }} 69 |
70 |

Annotations

71 |
    72 | 73 | {{# annotations }} 74 |
  1. 75 | 76 |

    {{ title }}

    77 | 78 |
    79 | {{{ comment }}} 80 |
    81 | 82 |
    2. 83 | {{/ annotations }} 84 | 85 |
86 | 87 |
88 | {{/ annotationExists }} 89 | 90 |
91 | {{/ descBlockExists }} 92 | 93 |
94 | 95 |
96 |
97 |
    98 | {{# panels }} 99 |
  • 100 | {{ name }} 102 |
    • 103 | {{/ panels }} 104 |
105 |
106 | 107 |
108 | 109 | {{# panels }} 110 |
111 | 112 | 113 | {{{ content }}} 114 |
115 | {{/ panels }} 116 | 117 |
118 | 119 |
120 | 121 |
122 | -------------------------------------------------------------------------------- /src/html/partials/controls.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 |
6 | 7 |
    8 | {{^ ishControlsHide.s }} 9 |
  • 10 | 11 |
    • 12 | {{/ ishControlsHide.s }} 13 | 14 | {{^ ishControlsHide.m }} 15 |
  • 16 | 17 |
    • 18 | {{/ ishControlsHide.m }} 19 | 20 | {{^ ishControlsHide.l }} 21 |
  • 22 | 23 |
    • 24 | {{/ ishControlsHide.l }} 25 | 26 | {{^ ishControlsHide.full }} 27 |
  • 28 | 29 |
    • 30 | {{/ ishControlsHide.full }} 31 | 32 | {{^ ishControlsHide.random }} 33 |
  • 34 | 35 |
    • 36 | {{/ ishControlsHide.random }} 37 | 38 | {{^ ishControlsHide.disco }} 39 |
  • 40 | 41 |
    • 42 | {{/ ishControlsHide.disco }} 43 | 44 | {{^ ishControlsHide.hay }} 45 |
  • 46 | 47 |
    • 48 | {{/ ishControlsHide.hay }} 49 |
50 | 51 | {{^ ishControlsHide.tools-all }} 52 |
53 | 61 | 62 |
    63 |
  • 64 | 65 |
    • 66 | {{^ ishControlsHide.views-new }} 67 |
  • 68 | Open In New Window 69 |
    • 70 | {{/ ishControlsHide.views-new }} 71 | 72 | {{^ ishControlsHide.tools-docs }} 73 |
  • 74 | Pattern Lab Docs 75 |
    • 76 | {{/ ishControlsHide.tools-docs }} 77 | 78 |
79 |
80 | {{/ ishControlsHide.tools-all }} -------------------------------------------------------------------------------- /src/html/partials/header.html: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /src/html/partials/iframe.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
6 | 7 | 8 | 9 |
10 | 11 |
12 | 13 |
14 | 15 |
16 | 17 |
-------------------------------------------------------------------------------- /src/html/partials/modal.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 11 |
12 | 13 |
14 | 15 |
16 | -------------------------------------------------------------------------------- /src/html/partials/panel-code-template.html: -------------------------------------------------------------------------------- 1 | 
2 | 	{{{ code }}}
3 |
4 | -------------------------------------------------------------------------------- /src/html/partials/pattern-nav.html: -------------------------------------------------------------------------------- 1 | {{# patternTypes }} 2 |
  • 3 | 4 | {{ patternTypeUC }} 5 | 6 |
      7 | 8 | {{# patternTypeItems }} 9 |
    1. 10 | 11 | {{ patternSubtypeUC }} 12 | 13 |
        14 | 15 | {{# patternSubtypeItems }} 16 |
      1. 17 | 18 | 19 | {{ patternName }} 20 | 21 | {{# patternState }} 22 | 23 | {{/ patternState }} 24 | 25 | 26 | 27 |
        2. 28 | {{/ patternSubtypeItems }} 29 | 30 |
      31 | 32 |
      2. 33 | {{/ patternTypeItems }} 34 | {{# patternItems }} 35 |
    2. 36 | 37 | 38 | {{ patternName }} 39 | 40 | {{# patternState }} 41 | 42 | {{/ patternState }} 43 | 44 | 45 | 46 |
      3. 47 | {{/ patternItems }} 48 | 49 |
    50 | 51 |
    • 52 | {{/ patternTypes }} 53 | 54 |
  • 55 | 56 | All 57 | 58 |
    • 59 | 60 | -------------------------------------------------------------------------------- /src/js/clipboard.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * clipboard.js v1.7.1 3 | * https://zenorocha.github.io/clipboard.js 4 | * 5 | * Licensed MIT © Zeno Rocha 6 | */ 7 | !function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.Clipboard=t()}}(function(){var t,e,n;return function t(e,n,o){function i(a,c){if(!n[a]){if(!e[a]){var l="function"==typeof require&&require;if(!c&&l)return l(a,!0);if(r)return r(a,!0);var s=new Error("Cannot find module '"+a+"'");throw s.code="MODULE_NOT_FOUND",s}var u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var n=e[a][1][t];return i(n||t)},u,u.exports,t,e,n,o)}return n[a].exports}for(var r="function"==typeof require&&require,a=0;a0&&void 0!==arguments[0]?arguments[0]:{};this.action=e.action,this.container=e.container,this.emitter=e.emitter,this.target=e.target,this.text=e.text,this.trigger=e.trigger,this.selectedText=""}},{key:"initSelection",value:function t(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function t(){var e=this,n="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return e.removeFake()},this.fakeHandler=this.container.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[n?"right":"left"]="-9999px";var o=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.style.top=o+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,this.container.appendChild(this.fakeElem),this.selectedText=(0,i.default)(this.fakeElem),this.copyText()}},{key:"removeFake",value:function t(){this.fakeHandler&&(this.container.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(this.container.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function t(){this.selectedText=(0,i.default)(this.target),this.copyText()}},{key:"copyText",value:function t(){var e=void 0;try{e=document.execCommand(this.action)}catch(t){e=!1}this.handleResult(e)}},{key:"handleResult",value:function t(e){this.emitter.emit(e?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function t(){this.trigger&&this.trigger.focus(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function t(){this.removeFake()}},{key:"action",set:function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function t(){return this._action}},{key:"target",set:function t(e){if(void 0!==e){if(!e||"object"!==(void 0===e?"undefined":r(e))||1!==e.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&e.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(e.hasAttribute("readonly")||e.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=e}},get:function t(){return this._target}}]),t}();t.exports=c})},{select:5}],8:[function(e,n,o){!function(i,r){if("function"==typeof t&&t.amd)t(["module","./clipboard-action","tiny-emitter","good-listener"],r);else if(void 0!==o)r(n,e("./clipboard-action"),e("tiny-emitter"),e("good-listener"));else{var a={exports:{}};r(a,i.clipboardAction,i.tinyEmitter,i.goodListener),i.clipboard=a.exports}}(this,function(t,e,n,o){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function c(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function l(t,e){var n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}var s=i(e),u=i(n),f=i(o),d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},h=function(){function t(t,e){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText,this.container="object"===d(e.container)?e.container:document.body}},{key:"listenClick",value:function t(e){var n=this;this.listener=(0,f.default)(e,"click",function(t){return n.onClick(t)})}},{key:"onClick",value:function t(e){var n=e.delegateTarget||e.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new s.default({action:this.action(n),target:this.target(n),text:this.text(n),container:this.container,trigger:n,emitter:this})}},{key:"defaultAction",value:function t(e){return l("action",e)}},{key:"defaultTarget",value:function t(e){var n=l("target",e);if(n)return document.querySelector(n)}},{key:"defaultText",value:function t(e){return l("text",e)}},{key:"destroy",value:function t(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}],[{key:"isSupported",value:function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:["copy","cut"],n="string"==typeof e?[e]:e,o=!!document.queryCommandSupported;return n.forEach(function(t){o=o&&!!document.queryCommandSupported(t)}),o}}]),e}(u.default);t.exports=p})},{"./clipboard-action":7,"good-listener":4,"tiny-emitter":6}]},{},[8])(8)}); 8 | -------------------------------------------------------------------------------- /src/js/data-saver.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery Cookie Plugin v1.3 3 | * https://github.com/carhartl/jquery-cookie 4 | * 5 | * Copyright 2011, Klaus Hartl 6 | * Dual licensed under the MIT or GPL Version 2 licenses. 7 | * http://www.opensource.org/licenses/mit-license.php 8 | * http://www.opensource.org/licenses/GPL-2.0 9 | */ 10 | (function ($, document, undefined) { 11 | 12 | var pluses = /\+/g; 13 | 14 | function raw(s) { 15 | return s; 16 | } 17 | 18 | function decoded(s) { 19 | return decodeURIComponent(s.replace(pluses, ' ')); 20 | } 21 | 22 | var config = $.cookie = function (key, value, options) { 23 | 24 | // write 25 | if (value !== undefined) { 26 | options = $.extend({}, config.defaults, options); 27 | 28 | if (value === null) { 29 | options.expires = -1; 30 | } 31 | 32 | if (typeof options.expires === 'number') { 33 | var days = options.expires, t = options.expires = new Date(); 34 | t.setDate(t.getDate() + days); 35 | } 36 | 37 | value = config.json ? JSON.stringify(value) : String(value); 38 | 39 | return (document.cookie = [ 40 | encodeURIComponent(key), '=', config.raw ? value : encodeURIComponent(value), 41 | options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE 42 | options.path ? '; path=' + options.path : '', 43 | options.domain ? '; domain=' + options.domain : '', 44 | options.secure ? '; secure' : '' 45 | ].join('')); 46 | } 47 | 48 | // read 49 | var decode = config.raw ? raw : decoded; 50 | var cookies = document.cookie.split('; '); 51 | for (var i = 0, l = cookies.length; i < l; i++) { 52 | var parts = cookies[i].split('='); 53 | if (decode(parts.shift()) === key) { 54 | var cookie = decode(parts.join('=')); 55 | return config.json ? JSON.parse(cookie) : cookie; 56 | } 57 | } 58 | 59 | return null; 60 | }; 61 | 62 | config.defaults = {}; 63 | 64 | $.removeCookie = function (key, options) { 65 | if ($.cookie(key) !== null) { 66 | $.cookie(key, null, options); 67 | return true; 68 | } 69 | return false; 70 | }; 71 | 72 | })(jQuery, document); 73 | 74 | /*! 75 | * Data Saver 76 | * 77 | * Copyright (c) 2013-2014 Dave Olsen, http://dmolsen.com 78 | * Licensed under the MIT license 79 | */ 80 | 81 | var DataSaver = { 82 | 83 | // the name of the cookie to store the data in 84 | cookieName: "patternlab", 85 | 86 | /** 87 | * Add a given value to the cookie 88 | * @param {String} the name of the key 89 | * @param {String} the value 90 | */ 91 | addValue: function (name,val) { 92 | var cookieVal = $.cookie(this.cookieName); 93 | cookieVal = ((cookieVal === null) || (cookieVal === "")) ? name+"~"+val : cookieVal+"|"+name+"~"+val; 94 | $.cookie(this.cookieName,cookieVal); 95 | }, 96 | 97 | /** 98 | * Update a value found in the cookie. If the key doesn't exist add the value 99 | * @param {String} the name of the key 100 | * @param {String} the value 101 | */ 102 | updateValue: function (name,val) { 103 | if (this.findValue(name)) { 104 | var updateCookieVals = ""; 105 | var cookieVals = $.cookie(this.cookieName).split("|"); 106 | for (var i = 0; i < cookieVals.length; i++) { 107 | var fieldVals = cookieVals[i].split("~"); 108 | if (fieldVals[0] == name) { 109 | fieldVals[1] = val; 110 | } 111 | updateCookieVals += (i > 0) ? "|"+fieldVals[0]+"~"+fieldVals[1] : fieldVals[0]+"~"+fieldVals[1]; 112 | } 113 | $.cookie(this.cookieName,updateCookieVals); 114 | } else { 115 | this.addValue(name,val); 116 | } 117 | }, 118 | 119 | /** 120 | * Remove the given key 121 | * @param {String} the name of the key 122 | */ 123 | removeValue: function (name) { 124 | var updateCookieVals = ""; 125 | var cookieVals = $.cookie(this.cookieName).split("|"); 126 | var k = 0; 127 | for (var i = 0; i < cookieVals.length; i++) { 128 | var fieldVals = cookieVals[i].split("~"); 129 | if (fieldVals[0] != name) { 130 | updateCookieVals += (k === 0) ? fieldVals[0]+"~"+fieldVals[1] : "|"+fieldVals[0]+"~"+fieldVals[1]; 131 | k++; 132 | } 133 | } 134 | $.cookie(this.cookieName,updateCookieVals); 135 | }, 136 | 137 | /** 138 | * Find the value using the given key 139 | * @param {String} the name of the key 140 | * 141 | * @return {String} the value of the key or false if the value isn't found 142 | */ 143 | findValue: function (name) { 144 | if ($.cookie(this.cookieName)) { 145 | var cookieVals = $.cookie(this.cookieName).split("|"); 146 | for (var i = 0; i < cookieVals.length; i++) { 147 | var fieldVals = cookieVals[i].split("~"); 148 | if (fieldVals[0] == name) { 149 | return fieldVals[1]; 150 | } 151 | } 152 | } 153 | return false; 154 | } 155 | 156 | }; 157 | -------------------------------------------------------------------------------- /src/js/layout.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Simple Layout Rendering for Pattern Lab 3 | * 4 | * Copyright (c) 2014 Dave Olsen, http://dmolsen.com 5 | * Licensed under the MIT license 6 | */ 7 | 8 | try { 9 | 10 | /* load pattern nav */ 11 | var template = document.querySelector(".pl-js-pattern-nav-template"); 12 | var templateCompiled = Hogan.compile(template.innerHTML); 13 | var templateRendered = templateCompiled.render(navItems); 14 | document.querySelector(".pl-js-pattern-nav-target").innerHTML = templateRendered; 15 | 16 | /* load ish controls */ 17 | var template = document.querySelector(".pl-js-ish-controls-template"); 18 | var templateCompiled = Hogan.compile(template.innerHTML); 19 | var templateRendered = templateCompiled.render(ishControls); 20 | document.querySelector(".pl-js-controls").innerHTML = templateRendered; 21 | 22 | } catch(e) { 23 | 24 | var message = "

    Please generate your site before trying to view it.

    "; 25 | document.querySelector(".pl-js-pattern-nav-target").innerHTML = message; 26 | 27 | } 28 | -------------------------------------------------------------------------------- /src/js/modal-styleguide.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Modal for the Styleguide Layer 3 | * For both annotations and code/info 4 | * 5 | * Copyright (c) 2016 Dave Olsen, http://dmolsen.com 6 | * Licensed under the MIT license 7 | * 8 | * @requires panels-util.js 9 | * @requires url-handler.js 10 | * 11 | */ 12 | 13 | var modalStyleguide = { 14 | 15 | // set up some defaults 16 | active: [], 17 | targetOrigin: (window.location.protocol === 'file:') ? '*' : window.location.protocol + '//' + window.location.host, 18 | 19 | /** 20 | * initialize the modal window 21 | */ 22 | onReady: function () { 23 | 24 | // go through the panel toggles and add click event to the pattern extra toggle button 25 | var els = document.querySelectorAll('.pl-js-pattern-extra-toggle'); 26 | for (var i = 0; i < els.length; ++i) { 27 | els[i].onclick = (function (e) { 28 | var patternPartial = this.getAttribute('data-patternpartial'); 29 | modalStyleguide.toggle(patternPartial); 30 | }); 31 | } 32 | 33 | }, 34 | 35 | /** 36 | * toggle the modal window open and closed based on clicking the pip 37 | * @param {String} the patternPartial that identifies what needs to be toggled 38 | */ 39 | toggle: function (patternPartial) { 40 | if ((modalStyleguide.active[patternPartial] === undefined) || !modalStyleguide.active[patternPartial]) { 41 | var el = document.getElementById('pl-pattern-data-' + patternPartial); 42 | modalStyleguide.collectAndSend(el, true, false); 43 | } else { 44 | modalStyleguide.highlightsHide(); 45 | modalStyleguide.close(patternPartial); 46 | } 47 | 48 | }, 49 | 50 | /** 51 | * open the modal window for a view-all entry 52 | * @param {String} the patternPartial that identifies what needs to be opened 53 | * @param {String} the content that should be inserted 54 | */ 55 | open: function (patternPartial, content) { 56 | 57 | // make sure templateRendered is modified to be an HTML element 58 | var div = document.createElement('div'); 59 | div.innerHTML = content; 60 | content = document.createElement('div').appendChild(div).querySelector('div'); 61 | 62 | // add click events 63 | content = panelsUtil.addClickEvents(content, patternPartial); 64 | 65 | // make sure the modal viewer and other options are off just in case 66 | modalStyleguide.close(patternPartial); 67 | 68 | // note it's turned on in the viewer 69 | modalStyleguide.active[patternPartial] = true; 70 | 71 | // make sure there's no content 72 | div = document.getElementById('pl-pattern-extra-' + patternPartial); 73 | if (div.childNodes.length > 0) { 74 | div.removeChild(div.childNodes[0]); 75 | } 76 | 77 | // add the content 78 | document.getElementById('pl-pattern-extra-' + patternPartial).appendChild(content); 79 | 80 | // show the modal 81 | document.getElementById('pl-pattern-extra-toggle-' + patternPartial).classList.add('pl-is-active'); 82 | document.getElementById('pl-pattern-extra-' + patternPartial).classList.add('pl-is-active'); 83 | 84 | }, 85 | 86 | /** 87 | * close the modal window for a view-all entry 88 | * @param {String} the patternPartial that identifies what needs to be closed 89 | */ 90 | close: function (patternPartial) { 91 | 92 | // note that the modal viewer is no longer active 93 | modalStyleguide.active[patternPartial] = false; 94 | 95 | // hide the modal, look at info-panel.js 96 | document.getElementById('pl-pattern-extra-toggle-' + patternPartial).classList.remove('pl-is-active'); 97 | document.getElementById('pl-pattern-extra-' + patternPartial).classList.remove('pl-is-active'); 98 | 99 | }, 100 | 101 | /** 102 | * get the data that needs to be send to the viewer for rendering 103 | * @param {Element} the identifier for the element that needs to be collected 104 | * @param {Boolean} if the refresh is of a view-all view and the content should be sent back 105 | * @param {Boolean} if the text in the dropdown should be switched 106 | */ 107 | collectAndSend: function (el, iframePassback, switchText) { 108 | var patternData = JSON.parse(el.innerHTML); 109 | if (patternData.patternName !== undefined) { 110 | patternMarkupEl = document.querySelector('#' + patternData.patternPartial + ' > .pl-js-pattern-example'); 111 | patternData.patternMarkup = (patternMarkupEl !== null) ? patternMarkupEl.innerHTML : document.querySelector('body').innerHTML; 112 | modalStyleguide.patternQueryInfo(patternData, iframePassback, switchText); 113 | } 114 | }, 115 | 116 | /** 117 | * hide the annotation highlights 118 | */ 119 | highlightsHide: function (patternPartial) { 120 | var patternPartialSelector = (patternPartial !== undefined) ? '#' + patternPartial + " > " : ""; 121 | elsToHide = document.querySelectorAll(patternPartialSelector + '.pl-has-annotation'); 122 | for (i = 0; i < elsToHide.length; i++) { 123 | elsToHide[i].classList.remove('pl-has-annotation'); 124 | } 125 | elsToHide = document.querySelectorAll(patternPartialSelector + '.pl-c-annotation-tip'); 126 | for (i = 0; i < elsToHide.length; i++) { 127 | elsToHide[i].style.display = 'none'; 128 | } 129 | }, 130 | 131 | /** 132 | * return the pattern info to the top level 133 | * @param {Object} the content that will be sent to the viewer for rendering 134 | * @param {Boolean} if the refresh is of a view-all view and the content should be sent back 135 | * @param {Boolean} if the text in the dropdown should be switched 136 | */ 137 | patternQueryInfo: function (patternData, iframePassback, switchText) { 138 | 139 | // send a message to the pattern 140 | try { 141 | var obj = JSON.stringify({ 142 | 'event': 'patternLab.patternQueryInfo', 143 | 'patternData': patternData, 144 | 'iframePassback': iframePassback, 145 | 'switchText': switchText 146 | }); 147 | parent.postMessage(obj, modalStyleguide.targetOrigin); 148 | } catch (e) {} 149 | 150 | }, 151 | 152 | /** 153 | * toggle the comment pop-up based on a user clicking on the pattern 154 | * based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage 155 | * @param {Object} event info 156 | */ 157 | receiveIframeMessage: function (event) { 158 | 159 | var i; 160 | 161 | // does the origin sending the message match the current host? if not dev/null the request 162 | if ((window.location.protocol !== 'file:') && (event.origin !== window.location.protocol + '//' + window.location.host)) { 163 | return; 164 | } 165 | 166 | var data = {}; 167 | try { 168 | data = (typeof event.data !== 'string') ? event.data : JSON.parse(event.data); 169 | } catch (e) {} 170 | 171 | // see if it got a path to replace 172 | if ((data.event !== undefined) && (data.event == 'patternLab.patternQuery')) { 173 | 174 | var els, iframePassback, patternData, patternMarkupEl; 175 | 176 | // find all elements related to pattern info 177 | els = document.querySelectorAll('.pl-js-pattern-data'); 178 | iframePassback = (els.length > 1); 179 | 180 | // send each up to the parent to be read and compiled into panels 181 | for (i = 0; i < els.length; i++) { 182 | modalStyleguide.collectAndSend(els[i], iframePassback, data.switchText); 183 | } 184 | 185 | } else if ((data.event !== undefined) && (data.event == 'patternLab.patternModalInsert')) { 186 | 187 | // insert the previously rendered content being passed from the iframe 188 | modalStyleguide.open(data.patternPartial, data.modalContent); 189 | 190 | } else if ((data.event !== undefined) && (data.event == 'patternLab.annotationsHighlightShow')) { 191 | 192 | var elsToHighlight, j, item, span; 193 | 194 | // go over the supplied annotations 195 | for (i = 0; i < data.annotations.length; i++) { 196 | 197 | item = data.annotations[i]; 198 | elsToHighlight = document.querySelectorAll(item.el); 199 | 200 | if (elsToHighlight.length > 0) { 201 | 202 | for (j = 0; j < elsToHighlight.length; j++) { 203 | 204 | elsToHighlight[j].classList.add('pl-has-annotation'); 205 | 206 | span = document.createElement('span'); 207 | span.innerHTML = item.displayNumber; 208 | span.classList.add('pl-c-annotation-tip'); 209 | 210 | if (window.getComputedStyle(elsToHighlight[j], null).getPropertyValue('max-height') == '0px') { 211 | span.style.display = 'none'; 212 | } 213 | 214 | annotationTip = document.querySelector(item.el + ' > span.pl-c-annotation-tip'); 215 | if (annotationTip === null) { 216 | elsToHighlight[j].insertBefore(span, elsToHighlight[j].firstChild); 217 | } else { 218 | annotationTip.style.display = 'inline'; 219 | } 220 | 221 | elsToHighlight[j].onclick = (function (item) { 222 | return function (e) { 223 | e.preventDefault(); 224 | e.stopPropagation(); 225 | var obj = JSON.stringify({ 226 | 'event': 'patternLab.annotationNumberClicked', 227 | 'displayNumber': item.displayNumber 228 | }); 229 | parent.postMessage(obj, modalStyleguide.targetOrigin); 230 | }; 231 | })(item); 232 | 233 | } 234 | 235 | } 236 | 237 | } 238 | 239 | } else if ((data.event !== undefined) && (data.event == 'patternLab.annotationsHighlightHide')) { 240 | 241 | modalStyleguide.highlightsHide(); 242 | 243 | } else if ((data.event !== undefined) && (data.event == 'patternLab.patternModalClose')) { 244 | 245 | var keys = []; 246 | for (var k in modalStyleguide.active) { 247 | keys.push(k); 248 | } 249 | for (i = 0; i < keys.length; i++) { 250 | var patternPartial = keys[i]; 251 | if (modalStyleguide.active[patternPartial]) { 252 | modalStyleguide.close(patternPartial); 253 | } 254 | } 255 | 256 | } 257 | 258 | } 259 | 260 | }; 261 | 262 | // when the document is ready make sure the modal is ready 263 | modalStyleguide.onReady(); 264 | window.addEventListener('message', modalStyleguide.receiveIframeMessage, false); 265 | 266 | // Copy to clipboard functionality 267 | var clipboard = new Clipboard('.pl-js-code-copy-btn'); 268 | clipboard.on('success', function(e) { 269 | var copyButton = document.querySelectorAll(".pl-js-code-copy-btn"); 270 | for (i=0; i