├── public ├── css │ ├── test.css │ ├── style.css │ └── pattern-scaffolding.css ├── annotations │ └── annotations.js ├── favicon.ico ├── README.md ├── styleguide │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.ttf │ │ ├── icomoon.woff │ │ └── icomoon.svg │ ├── bower_components │ │ ├── script.min.js │ │ ├── classList.min.js │ │ ├── EventEmitter.min.js │ │ ├── jwerty.min.js │ │ ├── hogan-3.0.2.min.js │ │ └── prism.min.js │ ├── css │ │ ├── prism-typeahead.min.css │ │ ├── prism-typeahead.css │ │ └── styleguide.min.css │ ├── data │ │ └── patternlab-data.js │ ├── js │ │ ├── patternlab-pattern.min.js │ │ ├── patternlab-pattern.js │ │ └── patternlab-viewer.min.js │ └── html │ │ └── styleguide.html ├── js │ └── init.js ├── patterns │ ├── 00-atoms-01-angular-tooltip │ │ ├── 00-atoms-01-angular-tooltip.markup-only.html │ │ ├── 00-atoms-01-angular-tooltip.mustache │ │ └── 00-atoms-01-angular-tooltip.rendered.html │ ├── 00-atoms │ │ └── index.html │ └── 00-atoms-01-angular │ │ └── index.html └── index.html ├── source ├── css │ └── style.css ├── favicon.ico ├── _meta │ ├── _01-foot.mustache │ └── _00-head.mustache ├── _patterns │ └── 00-atoms │ │ └── 01-angular │ │ ├── tooltip.md │ │ └── tooltip.mustache ├── js │ └── init.js └── _data │ └── data.json ├── .gitignore ├── patternlab-angular.gif ├── .editorconfig ├── package.json ├── README.md ├── LICENSE ├── patternlab-config.json ├── .eslintrc └── gulpfile.js /public/css/test.css: -------------------------------------------------------------------------------- 1 | * { 2 | color: red; } 3 | -------------------------------------------------------------------------------- /public/annotations/annotations.js: -------------------------------------------------------------------------------- 1 | var comments = { "comments" : []}; -------------------------------------------------------------------------------- /public/css/style.css: -------------------------------------------------------------------------------- 1 | //check ./source/_meta/_00-head.mustache 2 | -------------------------------------------------------------------------------- /source/css/style.css: -------------------------------------------------------------------------------- 1 | //check ./source/_meta/_00-head.mustache 2 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bmuenzenmeyer/patternlab-node-angular-example/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /source/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bmuenzenmeyer/patternlab-node-angular-example/HEAD/source/favicon.ico -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | patternlab.json 4 | .sass-cache/* 5 | /sass-cache 6 | Thumbs.db 7 | .idea/ 8 | -------------------------------------------------------------------------------- /patternlab-angular.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bmuenzenmeyer/patternlab-node-angular-example/HEAD/patternlab-angular.gif -------------------------------------------------------------------------------- /public/README.md: -------------------------------------------------------------------------------- 1 | This directory is the default target for pattern and site generation, as dictated by `patternlab-config.json`. 2 | -------------------------------------------------------------------------------- /public/styleguide/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bmuenzenmeyer/patternlab-node-angular-example/HEAD/public/styleguide/fonts/icomoon.eot -------------------------------------------------------------------------------- /public/styleguide/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bmuenzenmeyer/patternlab-node-angular-example/HEAD/public/styleguide/fonts/icomoon.ttf -------------------------------------------------------------------------------- /public/styleguide/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bmuenzenmeyer/patternlab-node-angular-example/HEAD/public/styleguide/fonts/icomoon.woff -------------------------------------------------------------------------------- /source/_meta/_01-foot.mustache: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{{ patternLabFoot }}} 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /source/_patterns/00-atoms/01-angular/tooltip.md: -------------------------------------------------------------------------------- 1 | # Angular Tooltip 2 | 3 | This code is a near-exact copy of the code demoed at [https://material.angularjs.org/latest/demo/tooltip](https://material.angularjs.org/latest/demo/tooltip). 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | tab_width = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | -------------------------------------------------------------------------------- /public/js/init.js: -------------------------------------------------------------------------------- 1 | angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 2 | .controller('AppCtrl', function($scope) { 3 | $scope.demo = { 4 | showTooltip : false, 5 | tipDirection : '' 6 | }; 7 | 8 | $scope.demo.delayTooltip = undefined; 9 | $scope.$watch('demo.delayTooltip',function(val) { 10 | $scope.demo.delayTooltip = parseInt(val, 10) || 0; 11 | }); 12 | 13 | $scope.$watch('demo.tipDirection',function(val) { 14 | if (val && val.length ) { 15 | $scope.demo.showTooltip = true; 16 | } 17 | }) 18 | }); 19 | 20 | 21 | /** 22 | Copyright 2016 Google Inc. All Rights Reserved. 23 | Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license. 24 | **/ 25 | -------------------------------------------------------------------------------- /source/js/init.js: -------------------------------------------------------------------------------- 1 | angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 2 | .controller('AppCtrl', function($scope) { 3 | $scope.demo = { 4 | showTooltip : false, 5 | tipDirection : '' 6 | }; 7 | 8 | $scope.demo.delayTooltip = undefined; 9 | $scope.$watch('demo.delayTooltip',function(val) { 10 | $scope.demo.delayTooltip = parseInt(val, 10) || 0; 11 | }); 12 | 13 | $scope.$watch('demo.tipDirection',function(val) { 14 | if (val && val.length ) { 15 | $scope.demo.showTooltip = true; 16 | } 17 | }) 18 | }); 19 | 20 | 21 | /** 22 | Copyright 2016 Google Inc. All Rights Reserved. 23 | Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license. 24 | **/ 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "patternlab-node-angular-example", 3 | "description": "An example of Pattern Lab Node running Angular Components", 4 | "version": "0.0.1", 5 | "dependencies": { 6 | "browser-sync": "^2.11.2", 7 | "gulp": "gulpjs/gulp#4.0", 8 | "minimist": "^1.2.0", 9 | "patternlab-node": "^2.0.0", 10 | "styleguidekit-assets-default": "^3.0.0", 11 | "styleguidekit-mustache-default": "^3.0.0" 12 | }, 13 | "keywords": [ 14 | "Pattern Lab", 15 | "Atomic Web Design", 16 | "Node", 17 | "Gulp", 18 | "Javascript", 19 | "Angular" 20 | ], 21 | "repository": { 22 | "type": "git", 23 | "url": "git://github.com/bmuenzenmeyer/patternlab-node-angular-example.git" 24 | }, 25 | "author": "Brian Muenzenmeyer", 26 | "license": "MIT", 27 | "engines": { 28 | "node": ">=5.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pattern Lab Node - Angular Example 2 | 3 | Answering the question, ["does Pattern Lab “not mix well” with Angular?"](http://stackoverflow.com/questions/39515130/does-pattern-lab-not-mix-well-with-angular) 4 | 5 | :fire: :fire: :fire: [Live Demo](http://www.brianmuenzenmeyer.com/patternlab-node-angular-example/public/index.html) :fire: :fire: :fire: 6 | 7 | ![](https://github.com/bmuenzenmeyer/patternlab-node-angular-example/blob/master/patternlab-angular.gif) 8 | 9 | Yes this example is a bit contrived and reductive, but it is aimed to demonstrate that the two technologies are not wholesale blanket do-you-speak-to-your-mother-with-that-mouth incompatible. 10 | 11 | To View the example: 12 | 13 | 1. Download or Clone 14 | 2. `npm install` 15 | 3. `gulp patternlab:serve` 16 | 17 | For best instructions, I suggest you read through the [gulp edition docs](https://github.com/pattern-lab/edition-node-gulp/). 18 | 19 | This repo is not maintained and is for demo purposes only. 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Brian Muenzenmeyer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /public/css/pattern-scaffolding.css: -------------------------------------------------------------------------------- 1 | /** 2 | * This stylesheet is for styles you want to include only when displaying demo 3 | * styles for grids, animations, color swatches, etc. 4 | * These styles will not be your production CSS. 5 | */ 6 | #sg-patterns { 7 | -webkit-box-sizing: border-box !important; 8 | box-sizing: border-box !important; 9 | max-width: 100%; 10 | padding: 0 0.5em; 11 | } 12 | 13 | .demo-animate { 14 | background: #ddd; 15 | padding: 1em; 16 | margin-bottom: 1em; 17 | text-align: center; 18 | border-radius: 8px; 19 | cursor: pointer; 20 | } 21 | 22 | .sg-colors { 23 | display: -webkit-box; 24 | display: -ms-flexbox; 25 | display: flex; 26 | -ms-flex-wrap: wrap; 27 | flex-wrap: wrap; 28 | list-style: none !important; 29 | padding: 0 !important; 30 | margin: 0 !important; 31 | } 32 | .sg-colors li { 33 | -webkit-box-flex: 1; 34 | -ms-flex: auto; 35 | flex: auto; 36 | padding: 0.3em; 37 | margin: 0 0.5em 0.5em 0; 38 | min-width: 5em; 39 | max-width: 14em; 40 | border: 1px solid #ddd; 41 | border-radius: 8px; 42 | } 43 | 44 | .sg-swatch { 45 | display: block; 46 | height: 4em; 47 | margin-bottom: 0.3em; 48 | border-radius: 5px; 49 | } 50 | 51 | .sg-label { 52 | font-size: 90%; 53 | line-height: 1; 54 | } 55 | -------------------------------------------------------------------------------- /source/_meta/_00-head.mustache: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ title }} 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | {{{ patternLabHead }}} 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /public/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;ecode[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre.line-numbers>code{position:relative}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.token a{color:inherit} -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "node": true, 4 | "builtin": true 5 | }, 6 | "globals": {}, 7 | "rules": { 8 | "block-scoped-var": 0, 9 | "camelcase": 0, 10 | "comma-spacing": [1, {"before": false, "after": true}], 11 | "consistent-return": 2, 12 | "curly": [2, "all"], 13 | "dot-notation": [1, { "allowKeywords": true }], 14 | "eqeqeq": [2, "allow-null"], 15 | "global-strict": [0, "never"], 16 | "guard-for-in": 2, 17 | "indent": [1, 2, {"SwitchCase": 1, "VariableDeclarator": 1}], 18 | "lines-around-comment": [1, { 19 | "beforeBlockComment": true, 20 | "beforeLineComment": true, 21 | "allowBlockStart": true, 22 | "allowObjectStart": true, 23 | "allowArrayStart": true 24 | }], 25 | "key-spacing": 0, 26 | "keyword-spacing": 1, 27 | "new-cap": 0, 28 | "no-alert": 2, 29 | "no-bitwise": 2, 30 | "no-caller": 2, 31 | "no-cond-assign": [2, "except-parens"], 32 | "no-debugger": 2, 33 | "no-dupe-args": 2, 34 | "no-dupe-keys": 2, 35 | "no-empty": 2, 36 | "no-eval": 2, 37 | "no-extend-native": 2, 38 | "no-extra-bind": 2, 39 | "no-extra-parens": 0, 40 | "no-extra-semi": 2, 41 | "no-func-assign": 2, 42 | "no-implied-eval": 2, 43 | "no-invalid-regexp": 2, 44 | "no-irregular-whitespace": 1, 45 | "no-iterator": 2, 46 | "no-loop-func": 2, 47 | "no-mixed-requires": 0, 48 | "no-multi-str": 2, 49 | "no-multi-spaces": 1, 50 | "no-native-reassign": 2, 51 | "no-new": 2, 52 | "no-param-reassign": 1, 53 | "no-proto": 2, 54 | "no-redeclare": 0, 55 | "no-script-url": 2, 56 | "no-self-assign": 2, 57 | "no-self-compare": 2, 58 | "no-sequences": 2, 59 | "no-shadow": 2, 60 | "no-undef": 2, 61 | "no-underscore-dangle": 0, 62 | "no-unreachable": 1, 63 | "no-unused-vars": 1, 64 | "no-use-before-define": 1, 65 | "no-useless-call": 2, 66 | "no-useless-concat": 2, 67 | "no-with": 2, 68 | "quotes": [0, "single"], 69 | "radix": 2, 70 | "semi": [0, "never"], 71 | "strict": 0, 72 | "space-before-blocks": 1, 73 | "space-before-function-paren": [1, { 74 | "anonymous": "always", 75 | "named": "never" 76 | }], 77 | "space-in-parens": [1, "never"], 78 | "space-infix-ops": 1, 79 | "valid-typeof": 2, 80 | "vars-on-top": 0, 81 | "wrap-iife": [2, "inside"] 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /public/styleguide/data/patternlab-data.js: -------------------------------------------------------------------------------- 1 | var config = {"paths":{"source":{"root":"./source/","patterns":"./source/_patterns/","data":"./source/_data/","meta":"./source/_meta/","annotations":"./source/_annotations/","styleguide":"./node_modules/styleguidekit-assets-default/dist/","patternlabFiles":"./node_modules/styleguidekit-mustache-default/views/","js":"./source/js","images":"./source/images","fonts":"./source/fonts","css":"./source/css/"},"public":{"root":"./public/","patterns":"./public/patterns/","data":"./public/styleguide/data/","annotations":"./public/annotations/","styleguide":"./public/styleguide/","js":"./public/js","images":"./public/images","fonts":"./public/fonts","css":"./public/css"}},"styleGuideExcludes":["molecules"],"defaultPattern":"all","defaultShowPatternInfo":false,"cleanPublic":true,"patternExtension":"mustache","ignored-extensions":["scss","DS_Store","less"],"ignored-directories":["scss"],"debug":false,"ishControlsHide":{"s":false,"m":false,"l":false,"full":false,"random":false,"disco":false,"hay":true,"mqs":false,"find":false,"views-all":false,"views-annotations":false,"views-code":false,"views-new":false,"tools-all":false,"tools-docs":false},"ishMinimum":"240","ishMaximum":"2600","patternStateCascade":["inprogress","inreview","complete"],"patternStates":{},"patternExportPatternPartials":[],"patternExportDirectory":"./pattern_exports/","cacheBust":true,"starterkitSubDir":"dist","outputFileSuffixes":{"rendered":".rendered","rawTemplate":"","markupOnly":".markup-only"}}; 2 | var ishControls = {"ishControlsHide":{"s":false,"m":false,"l":false,"full":false,"random":false,"disco":false,"hay":true,"mqs":false,"find":false,"views-all":false,"views-annotations":false,"views-code":false,"views-new":false,"tools-all":false,"tools-docs":false}}; 3 | var navItems = {"patternTypes": [{"patternTypeLC":"atoms","patternTypeUC":"Atoms","patternType":"00-atoms","patternTypeDash":"atoms","patternTypeItems":[{"patternSubtypeLC":"angular","patternSubtypeUC":"Angular","patternSubtype":"01-angular","patternSubtypeDash":"angular","patternSubtypeItems":[{"patternPartial":"viewall-atoms-angular","patternName":"View All","patternPath":"00-atoms-01-angular/index.html","patternType":"00-atoms"},{"patternPartial":"atoms-tooltip","patternName":"Tooltip","patternState":"","patternSrcPath":"00-atoms%5C01-angular/tooltip","patternPath":"00-atoms-01-angular/00-atoms-01-angular.html"}]}],"patternItems":[{"patternPartial":"viewall-atoms-all","patternName":"View All","patternPath":"00-atoms/index.html"}]}]}; 4 | var patternPaths = {"atoms":{"tooltip":"00-atoms-01-angular-tooltip"}}; 5 | var viewAllPaths = {"atoms":{"angular":"00-atoms-01-angular","all":"00-atoms"}}; 6 | var plugins = []; 7 | var defaultShowPatternInfo = false; 8 | var defaultPattern = "all"; 9 | -------------------------------------------------------------------------------- /public/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;t7}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;t 2 | 3 | 4 |

5 | Awesome Md App 6 | 7 | 8 | Refresh 9 | 10 | 11 | 12 | 13 |

14 | 15 | 16 |
17 | 18 |

19 | The tooltip is visible when the button is hovered, focused, or touched. 20 |

21 | 22 |
23 | 24 | 25 | 26 | Insert Drive 27 | 28 | 29 | 30 | 31 | Photos 32 | 33 | 34 | 35 |
36 | 37 | 38 |
39 |

md-direction attribute can used to dynamically change the direction of the tooltip.
40 | Note: the direction default value is 'bottom'.

41 |
42 | 43 | Left 44 | Top 45 | Bottom 46 | Right 47 | 48 |
49 |
50 | 51 | 52 |
53 |

54 | Additionally, the Tooltip's md-visible attribute can use data-binding to 55 | programmatically show/hide itself. Toggle the checkbox below... 56 |

57 |
58 | 59 | Insert Drive 60 | 61 |
62 |
63 | 64 |
65 |

66 | Additionally, the Tooltip's md-delay attribute can use to delay the 67 | show animation. The default values is 0 mSecs... 68 |

69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | Photos with Tooltip Delay msecs 79 | 80 | 81 | 82 |
83 |
84 | 85 |
86 | 87 | 88 | 89 | 93 | -------------------------------------------------------------------------------- /source/_patterns/00-atoms/01-angular/tooltip.mustache: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |

5 | Awesome Md App 6 | 7 | 8 | Refresh 9 | 10 | 11 | 12 | 13 |

14 | 15 | 16 |
17 | 18 |

19 | The tooltip is visible when the button is hovered, focused, or touched. 20 |

21 | 22 |
23 | 24 | 25 | 26 | Insert Drive 27 | 28 | 29 | 30 | 31 | Photos 32 | 33 | 34 | 35 |
36 | 37 | 38 |
39 |

md-direction attribute can used to dynamically change the direction of the tooltip.
40 | Note: the direction default value is 'bottom'.

41 |
42 | 43 | Left 44 | Top 45 | Bottom 46 | Right 47 | 48 |
49 |
50 | 51 | 52 |
53 |

54 | Additionally, the Tooltip's md-visible attribute can use data-binding to 55 | programmatically show/hide itself. Toggle the checkbox below... 56 |

57 |
58 | 59 | Insert Drive 60 | 61 |
62 |
63 | 64 |
65 |

66 | Additionally, the Tooltip's md-delay attribute can use to delay the 67 | show animation. The default values is 0 mSecs... 68 |

69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | Photos with Tooltip Delay {{demo.delayTooltip}} msecs 79 | 80 | 81 | 82 |
83 |
84 | 85 |
86 | 87 |
88 | 89 | 93 | -------------------------------------------------------------------------------- /public/patterns/00-atoms-01-angular-tooltip/00-atoms-01-angular-tooltip.mustache: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |

5 | Awesome Md App 6 | 7 | 8 | Refresh 9 | 10 | 11 | 12 | 13 |

14 | 15 | 16 |
17 | 18 |

19 | The tooltip is visible when the button is hovered, focused, or touched. 20 |

21 | 22 |
23 | 24 | 25 | 26 | Insert Drive 27 | 28 | 29 | 30 | 31 | Photos 32 | 33 | 34 | 35 |
36 | 37 | 38 |
39 |

md-direction attribute can used to dynamically change the direction of the tooltip.
40 | Note: the direction default value is 'bottom'.

41 |
42 | 43 | Left 44 | Top 45 | Bottom 46 | Right 47 | 48 |
49 |
50 | 51 | 52 |
53 |

54 | Additionally, the Tooltip's md-visible attribute can use data-binding to 55 | programmatically show/hide itself. Toggle the checkbox below... 56 |

57 |
58 | 59 | Insert Drive 60 | 61 |
62 |
63 | 64 |
65 |

66 | Additionally, the Tooltip's md-delay attribute can use to delay the 67 | show animation. The default values is 0 mSecs... 68 |

69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | Photos with Tooltip Delay {{demo.delayTooltip}} msecs 79 | 80 | 81 | 82 |
83 |
84 | 85 |
86 | 87 |
88 | 89 | 93 | -------------------------------------------------------------------------------- /public/styleguide/css/prism-typeahead.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+handlebars+php+php-extras+twig&plugins=line-numbers+autolinker */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | text-shadow: 0 1px white; 12 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 13 | direction: ltr; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | line-height: 1.5; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | } 29 | 30 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 31 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 32 | text-shadow: none; 33 | background: #b3d4fc; 34 | } 35 | 36 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 37 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 38 | text-shadow: none; 39 | background: #b3d4fc; 40 | } 41 | 42 | @media print { 43 | code[class*="language-"], 44 | pre[class*="language-"] { 45 | text-shadow: none; 46 | } 47 | } 48 | 49 | /* Code blocks */ 50 | pre[class*="language-"] { 51 | padding: 1em; 52 | margin: .5em 0; 53 | overflow: auto; 54 | } 55 | 56 | :not(pre) > 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 | } -------------------------------------------------------------------------------- /public/styleguide/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /****************************************************** 2 | * PATTERN LAB NODE 3 | * EDITION-NODE-GULP 4 | * The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets. 5 | ******************************************************/ 6 | var gulp = require('gulp'), 7 | path = require('path'), 8 | browserSync = require('browser-sync').create(), 9 | argv = require('minimist')(process.argv.slice(2)); 10 | 11 | /****************************************************** 12 | * COPY TASKS - stream assets from source to destination 13 | ******************************************************/ 14 | // JS copy 15 | gulp.task('pl-copy:js', function(){ 16 | return gulp.src('**/*.js', {cwd: path.resolve(paths().source.js)} ) 17 | .pipe(gulp.dest(path.resolve(paths().public.js))); 18 | }); 19 | 20 | // Images copy 21 | gulp.task('pl-copy:img', function(){ 22 | return gulp.src('**/*.*',{cwd: path.resolve(paths().source.images)} ) 23 | .pipe(gulp.dest(path.resolve(paths().public.images))); 24 | }); 25 | 26 | // Favicon copy 27 | gulp.task('pl-copy:favicon', function(){ 28 | return gulp.src('favicon.ico', {cwd: path.resolve(paths().source.root)} ) 29 | .pipe(gulp.dest(path.resolve(paths().public.root))); 30 | }); 31 | 32 | // Fonts copy 33 | gulp.task('pl-copy:font', function(){ 34 | return gulp.src('*', {cwd: path.resolve(paths().source.fonts)}) 35 | .pipe(gulp.dest(path.resolve(paths().public.fonts))); 36 | }); 37 | 38 | // CSS Copy 39 | gulp.task('pl-copy:css', function(){ 40 | return gulp.src(path.resolve(paths().source.css, '*.css')) 41 | .pipe(gulp.dest(path.resolve(paths().public.css))) 42 | .pipe(browserSync.stream()); 43 | }); 44 | 45 | // Styleguide Copy everything but css 46 | gulp.task('pl-copy:styleguide', function(){ 47 | return gulp.src(path.resolve(paths().source.styleguide, '**/!(*.css)')) 48 | .pipe(gulp.dest(path.resolve(paths().public.root))) 49 | .pipe(browserSync.stream()); 50 | }); 51 | 52 | // Styleguide Copy and flatten css 53 | gulp.task('pl-copy:styleguide-css', function(){ 54 | return gulp.src(path.resolve(paths().source.styleguide, '**/*.css')) 55 | .pipe(gulp.dest(function(file){ 56 | //flatten anything inside the styleguide into a single output dir per http://stackoverflow.com/a/34317320/1790362 57 | file.path = path.join(file.base, path.basename(file.path)); 58 | return path.resolve(path.join(paths().public.styleguide, 'css')); 59 | })) 60 | .pipe(browserSync.stream()); 61 | }); 62 | 63 | /****************************************************** 64 | * PATTERN LAB CONFIGURATION - API with core library 65 | ******************************************************/ 66 | //read all paths from our namespaced config file 67 | var config = require('./patternlab-config.json'), 68 | patternlab = require('patternlab-node')(config); 69 | 70 | function paths() { 71 | return config.paths; 72 | } 73 | 74 | function getConfiguredCleanOption() { 75 | return config.cleanPublic; 76 | } 77 | 78 | function build(done) { 79 | patternlab.build(done, getConfiguredCleanOption()); 80 | } 81 | 82 | gulp.task('pl-assets', gulp.series( 83 | gulp.parallel( 84 | 'pl-copy:js', 85 | 'pl-copy:img', 86 | 'pl-copy:favicon', 87 | 'pl-copy:font', 88 | 'pl-copy:css', 89 | 'pl-copy:styleguide', 90 | 'pl-copy:styleguide-css' 91 | ), 92 | function(done){ 93 | done(); 94 | }) 95 | ); 96 | 97 | gulp.task('patternlab:version', function (done) { 98 | patternlab.version(); 99 | done(); 100 | }); 101 | 102 | gulp.task('patternlab:help', function (done) { 103 | patternlab.help(); 104 | done(); 105 | }); 106 | 107 | gulp.task('patternlab:patternsonly', function (done) { 108 | patternlab.patternsonly(done, getConfiguredCleanOption()); 109 | }); 110 | 111 | gulp.task('patternlab:liststarterkits', function (done) { 112 | patternlab.liststarterkits(); 113 | done(); 114 | }); 115 | 116 | gulp.task('patternlab:loadstarterkit', function (done) { 117 | patternlab.loadstarterkit(argv.kit, argv.clean); 118 | done(); 119 | }); 120 | 121 | gulp.task('patternlab:build', gulp.series('pl-assets', build, function(done){ 122 | done(); 123 | })); 124 | 125 | /****************************************************** 126 | * SERVER AND WATCH TASKS 127 | ******************************************************/ 128 | // watch task utility functions 129 | function getSupportedTemplateExtensions() { 130 | var engines = require('./node_modules/patternlab-node/core/lib/pattern_engines'); 131 | return engines.getSupportedFileExtensions(); 132 | } 133 | function getTemplateWatches() { 134 | return getSupportedTemplateExtensions().map(function (dotExtension) { 135 | return path.resolve(paths().source.patterns, '**/*' + dotExtension); 136 | }); 137 | } 138 | 139 | function reload() { 140 | browserSync.reload(); 141 | } 142 | 143 | function watch() { 144 | gulp.watch(path.resolve(paths().source.css, '**/*.css')).on('change', gulp.series('pl-copy:css', reload)); 145 | gulp.watch(path.resolve(paths().source.styleguide, '**/*.*')).on('change', gulp.series('pl-copy:styleguide', 'pl-copy:styleguide-css', reload)); 146 | 147 | var patternWatches = [ 148 | path.resolve(paths().source.patterns, '**/*.json'), 149 | path.resolve(paths().source.patterns, '**/*.md'), 150 | path.resolve(paths().source.data, '*.json'), 151 | path.resolve(paths().source.fonts + '/*'), 152 | path.resolve(paths().source.images + '/*'), 153 | path.resolve(paths().source.meta, '*'), 154 | path.resolve(paths().source.annotations + '/*') 155 | ].concat(getTemplateWatches()); 156 | 157 | gulp.watch(patternWatches).on('change', gulp.series(build, reload)); 158 | } 159 | 160 | gulp.task('patternlab:connect', gulp.series(function(done) { 161 | browserSync.init({ 162 | server: { 163 | baseDir: path.resolve(paths().public.root) 164 | }, 165 | snippetOptions: { 166 | // Ignore all HTML files within the templates folder 167 | blacklist: ['/index.html', '/', '/?*'] 168 | }, 169 | notify: { 170 | styles: [ 171 | 'display: none', 172 | 'padding: 15px', 173 | 'font-family: sans-serif', 174 | 'position: fixed', 175 | 'font-size: 1em', 176 | 'z-index: 9999', 177 | 'bottom: 0px', 178 | 'right: 0px', 179 | 'border-top-left-radius: 5px', 180 | 'background-color: #1B2032', 181 | 'opacity: 0.4', 182 | 'margin: 0', 183 | 'color: white', 184 | 'text-align: center' 185 | ] 186 | } 187 | }, function(){ 188 | console.log('PATTERN LAB NODE WATCHING FOR CHANGES'); 189 | }); 190 | done(); 191 | })); 192 | 193 | /****************************************************** 194 | * COMPOUND TASKS 195 | ******************************************************/ 196 | gulp.task('default', gulp.series('patternlab:build')); 197 | gulp.task('patternlab:watch', gulp.series('patternlab:build', watch)); 198 | gulp.task('patternlab:serve', gulp.series('patternlab:build', 'patternlab:connect', watch)); 199 | -------------------------------------------------------------------------------- /public/styleguide/bower_components/hogan-3.0.2.min.js: -------------------------------------------------------------------------------- 1 | var Hogan={};!function(t){function n(t,n,e){var i;return n&&"object"==typeof n&&(void 0!==n[t]?i=n[t]:e&&n.get&&"function"==typeof n.get&&(i=n.get(t))),i}function e(t,n,e,i,r,s){function a(){}function o(){}a.prototype=t,o.prototype=t.subs;var u,c=new a;c.subs=new o,c.subsText={},c.buf="",i=i||{},c.stackSubs=i,c.subsText=s;for(u in n)i[u]||(i[u]=n[u]);for(u in i)c.subs[u]=i[u];r=r||{},c.stackPartials=r;for(u in e)r[u]||(r[u]=e[u]);for(u in r)c.partials[u]=r[u];return c}function i(t){return String(null===t||void 0===t?"":t)}function r(t){return t=i(t),l.test(t)?t.replace(s,"&").replace(a,"<").replace(o,">").replace(u,"'").replace(c,"""):t}t.Template=function(t,n,e,i){t=t||{},this.r=t.code||this.r,this.c=e,this.options=i||{},this.text=n||"",this.partials=t.partials||{},this.subs=t.subs||{},this.buf=""},t.Template.prototype={r:function(t,n,e){return""},v:r,t:i,render:function(t,n,e){return this.ri([t],n||{},e)},ri:function(t,n,e){return this.r(t,n,e)},ep:function(t,n){var i=this.partials[t],r=n[i.name];if(i.instance&&i.base==r)return i.instance;if("string"==typeof r){if(!this.c)throw new Error("No compiler available.");r=this.c.compile(r,this.options)}if(!r)return null;if(this.partials[t].base=r,i.subs){n.stackText||(n.stackText={});for(key in i.subs)n.stackText[key]||(n.stackText[key]=void 0!==this.activeSub&&n.stackText[this.activeSub]?n.stackText[this.activeSub]:this.text);r=e(r,i.subs,i.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=r,r},rp:function(t,n,e,i){var r=this.ep(t,e);return r?r.ri(n,e,i):""},rs:function(t,n,e){var i=t[t.length-1];if(!f(i))return void e(t,n,this);for(var r=0;r=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;r 2 | 3 | 4 | Pattern Lab 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 | 38 | 39 |

40 | Awesome Md App 41 | 42 | 43 | Refresh 44 | 45 | 46 | 47 | 48 |

49 | 50 | 51 |
52 | 53 |

54 | The tooltip is visible when the button is hovered, focused, or touched. 55 |

56 | 57 |
58 | 59 | 60 | 61 | Insert Drive 62 | 63 | 64 | 65 | 66 | Photos 67 | 68 | 69 | 70 |
71 | 72 | 73 |
74 |

md-direction attribute can used to dynamically change the direction of the tooltip.
75 | Note: the direction default value is 'bottom'.

76 |
77 | 78 | Left 79 | Top 80 | Bottom 81 | Right 82 | 83 |
84 |
85 | 86 | 87 |
88 |

89 | Additionally, the Tooltip's md-visible attribute can use data-binding to 90 | programmatically show/hide itself. Toggle the checkbox below... 91 |

92 |
93 | 94 | Insert Drive 95 | 96 |
97 |
98 | 99 |
100 |

101 | Additionally, the Tooltip's md-delay attribute can use to delay the 102 | show animation. The default values is 0 mSecs... 103 |

104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | Photos with Tooltip Delay msecs 114 | 115 | 116 | 117 |
118 |
119 | 120 |
121 | 122 |
123 | 124 | 128 | 129 | 130 | 133 | 134 | 166 | 167 | 179 | 180 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /public/styleguide/js/patternlab-pattern.min.js: -------------------------------------------------------------------------------- 1 | function receiveIframeMessage(e){if("file:"==window.location.protocol||e.origin===window.location.protocol+"//"+window.location.host){var t,a={};try{a="string"!=typeof e.data?e.data:JSON.parse(e.data)}catch(n){}if(void 0!==a.event&&"patternLab.updatePath"==a.event)if(void 0!==patternData.patternPartial){var i=/(patterns|snapshots)\/(.*)$/;t=window.location.protocol+"//"+window.location.host+window.location.pathname.replace(i,"")+a.path+"?"+Date.now(),window.location.replace(t)}else t=window.location.protocol+"//"+window.location.host+window.location.pathname.replace("styleguide/html/styleguide.html","")+a.path+"?"+Date.now(),window.location.replace(t);else void 0!==a.event&&"patternLab.reload"==a.event&&window.location.reload()}}if(self!=top){var path=window.location.toString(),parts=path.split("?"),options={event:"patternLab.pageLoad",path:parts[0]};patternData=document.getElementById("sg-pattern-data-footer").innerHTML,patternData=JSON.parse(patternData),options.patternpartial=void 0!==patternData.patternPartial?patternData.patternPartial:"all",""!==patternData.lineage&&(options.lineage=patternData.lineage);var targetOrigin="file:"==window.location.protocol?"*":window.location.protocol+"//"+window.location.host;parent.postMessage(options,targetOrigin);for(var aTags=document.getElementsByTagName("a"),i=0;i1)for(var t,a=0,n=e.substr(1).split("&");a1?unescape(t[1]):""}(window.location.search);return e},pushPattern:function(e,t){var a={pattern:e},n=urlHandler.getFileName(e),i=window.location.pathname;i="file"===window.location.protocol?i.replace("/public/index.html","public/"):i.replace(/\/index\.html/,"/");var o=window.location.protocol+"//"+window.location.host+i+n;if(t!=o){var l=JSON.stringify({event:"patternLab.updatePath",path:n});document.getElementById("sg-viewport").contentWindow.postMessage(l,urlHandler.targetOrigin)}else{var r="file:"==window.location.protocol?null:window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"?p="+e;void 0!==history.pushState&&history.pushState(a,null,r),document.getElementById("title").innerHTML="Pattern Lab - "+e,void 0!==document.getElementById("sg-raw")&&document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(e))}},popPattern:function(e){var t,a=e.state;if(null===a)return void(this.skipBack=!1);null!==a&&(t=a.pattern);var n="";n=this.getFileName(t),""===n&&(n="styleguide/html/styleguide.html");var i=JSON.stringify({event:"patternLab.updatePath",path:n});document.getElementById("sg-viewport").contentWindow.postMessage(i,urlHandler.targetOrigin),document.getElementById("title").innerHTML="Pattern Lab - "+t,document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(t))}};window.onpopstate=function(e){urlHandler.skipBack=!0,urlHandler.popPattern(e)};var panelsUtil={addClickEvents:function(e,t){for(var a=e.querySelectorAll("#sg-"+t+"-tabs li"),n=0;n0&&a.removeChild(a.childNodes[0]),document.getElementById("sg-pattern-extra-"+e).appendChild(t),document.getElementById("sg-pattern-extra-toggle-"+e).classList.add("active"),document.getElementById("sg-pattern-extra-"+e).classList.add("active")},close:function(e){modalStyleguide.active[e]=!1,document.getElementById("sg-pattern-extra-toggle-"+e).classList.remove("active"),document.getElementById("sg-pattern-extra-"+e).classList.remove("active")},collectAndSend:function(e,t,a){var n=JSON.parse(e.innerHTML);void 0!==n.patternName&&(patternMarkupEl=document.querySelector("#"+n.patternPartial+" > .sg-pattern-example"),n.patternMarkup=null!==patternMarkupEl?patternMarkupEl.innerHTML:document.querySelector("body").innerHTML,modalStyleguide.patternQueryInfo(n,t,a))},highlightsHide:function(e){var t=void 0!==e?"#"+e+" > ":"";for(elsToHide=document.querySelectorAll(t+".has-annotation"),i=0;i1,t=0;t0)for(r=0;r span.annotation-tip"),null===annotationTip?l[r].insertBefore(s,l[r].firstChild):annotationTip.style.display="inline",l[r].onclick=function(e){return function(t){t.preventDefault(),t.stopPropagation();var a=JSON.stringify({event:"patternLab.annotationNumberClicked",displayNumber:e.displayNumber});parent.postMessage(a,modalStyleguide.targetOrigin)}}(d)}else if(void 0!==a.event&&"patternLab.annotationsHighlightHide"==a.event)modalStyleguide.highlightsHide();else if(void 0!==a.event&&"patternLab.patternModalClose"==a.event){var c=[];for(var p in modalStyleguide.active)c.push(p);for(t=0;t 2 | 3 | 4 | Pattern Lab 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 | 39 | 40 |
41 |
42 |

angular

43 | 44 |
45 | 46 |
47 | 48 |
49 |
50 |
51 |

52 | 53 | Tooltip 54 | 55 |

56 |
57 | ▼ 58 |
59 |
60 | 61 |
62 |
63 |
64 | 65 | 66 |

67 | Awesome Md App 68 | 69 | 70 | Refresh 71 | 72 | 73 | 74 | 75 |

76 | 77 | 78 |
79 | 80 |

81 | The tooltip is visible when the button is hovered, focused, or touched. 82 |

83 | 84 |
85 | 86 | 87 | 88 | Insert Drive 89 | 90 | 91 | 92 | 93 | Photos 94 | 95 | 96 | 97 |
98 | 99 | 100 |
101 |

md-direction attribute can used to dynamically change the direction of the tooltip.
102 | Note: the direction default value is 'bottom'.

103 |
104 | 105 | Left 106 | Top 107 | Bottom 108 | Right 109 | 110 |
111 |
112 | 113 | 114 |
115 |

116 | Additionally, the Tooltip's md-visible attribute can use data-binding to 117 | programmatically show/hide itself. Toggle the checkbox below... 118 |

119 |
120 | 121 | Insert Drive 122 | 123 |
124 |
125 | 126 |
127 |

128 | Additionally, the Tooltip's md-delay attribute can use to delay the 129 | show animation. The default values is 0 mSecs... 130 |

131 |
132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | Photos with Tooltip Delay msecs 141 | 142 | 143 | 144 |
145 |
146 | 147 |
148 | 149 |
150 | 151 | 155 | 156 |
157 | 160 |
161 |
162 | 163 |
164 | 165 | 166 | 169 | 170 | 202 | 203 | 215 | 216 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | -------------------------------------------------------------------------------- /public/patterns/00-atoms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Pattern Lab 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 | 39 | 40 |
41 |
42 |

angular

43 | 44 |
45 | 46 |
47 | 48 |
49 |
50 |
51 |

52 | 53 | Tooltip 54 | 55 |

56 |
57 | ▼ 58 |
59 |
60 | 61 |
62 |
63 |
64 | 65 | 66 |

67 | Awesome Md App 68 | 69 | 70 | Refresh 71 | 72 | 73 | 74 | 75 |

76 | 77 | 78 |
79 | 80 |

81 | The tooltip is visible when the button is hovered, focused, or touched. 82 |

83 | 84 |
85 | 86 | 87 | 88 | Insert Drive 89 | 90 | 91 | 92 | 93 | Photos 94 | 95 | 96 | 97 |
98 | 99 | 100 |
101 |

md-direction attribute can used to dynamically change the direction of the tooltip.
102 | Note: the direction default value is 'bottom'.

103 |
104 | 105 | Left 106 | Top 107 | Bottom 108 | Right 109 | 110 |
111 |
112 | 113 | 114 |
115 |

116 | Additionally, the Tooltip's md-visible attribute can use data-binding to 117 | programmatically show/hide itself. Toggle the checkbox below... 118 |

119 |
120 | 121 | Insert Drive 122 | 123 |
124 |
125 | 126 |
127 |

128 | Additionally, the Tooltip's md-delay attribute can use to delay the 129 | show animation. The default values is 0 mSecs... 130 |

131 |
132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | Photos with Tooltip Delay msecs 141 | 142 | 143 | 144 |
145 |
146 | 147 |
148 | 149 |
150 | 151 | 155 | 156 |
157 | 160 |
161 |
162 | 163 |
164 | 165 | 166 | 169 | 170 | 202 | 203 | 215 | 216 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | -------------------------------------------------------------------------------- /public/patterns/00-atoms-01-angular/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Pattern Lab 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 | 39 | 40 |
41 |
42 |

angular

43 | 44 |
45 | 46 |
47 | 48 |
49 |
50 |
51 |

52 | 53 | Tooltip 54 | 55 |

56 |
57 | ▼ 58 |
59 |
60 | 61 |
62 |
63 |
64 | 65 | 66 |

67 | Awesome Md App 68 | 69 | 70 | Refresh 71 | 72 | 73 | 74 | 75 |

76 | 77 | 78 |
79 | 80 |

81 | The tooltip is visible when the button is hovered, focused, or touched. 82 |

83 | 84 |
85 | 86 | 87 | 88 | Insert Drive 89 | 90 | 91 | 92 | 93 | Photos 94 | 95 | 96 | 97 |
98 | 99 | 100 |
101 |

md-direction attribute can used to dynamically change the direction of the tooltip.
102 | Note: the direction default value is 'bottom'.

103 |
104 | 105 | Left 106 | Top 107 | Bottom 108 | Right 109 | 110 |
111 |
112 | 113 | 114 |
115 |

116 | Additionally, the Tooltip's md-visible attribute can use data-binding to 117 | programmatically show/hide itself. Toggle the checkbox below... 118 |

119 |
120 | 121 | Insert Drive 122 | 123 |
124 |
125 | 126 |
127 |

128 | Additionally, the Tooltip's md-delay attribute can use to delay the 129 | show animation. The default values is 0 mSecs... 130 |

131 |
132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | Photos with Tooltip Delay msecs 141 | 142 | 143 | 144 |
145 |
146 | 147 |
148 | 149 |
150 | 151 | 155 | 156 |
157 | 160 |
161 |
162 | 163 |
164 | 165 | 166 | 169 | 170 | 202 | 203 | 215 | 216 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | -------------------------------------------------------------------------------- /public/styleguide/bower_components/prism.min.js: -------------------------------------------------------------------------------- 1 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,a=_self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,a.util.encode(e.content),e.alias):"Array"===a.util.type(e)?e.map(a.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(v instanceof r)){c.lastIndex=0;var k=c.exec(v),w=1;if(!k&&d&&y!=i.length-1){if(c.lastIndex=b,k=c.exec(e),!k)break;for(var P=k.index+(p?k[1].length:0),x=k.index+k[0].length,A=y,j=b,S=i.length;A=j&&(++y,b=j);if(i[y]instanceof r||i[A-1].greedy)continue;w=A-y,v=e.slice(b,j),k.index-=b}if(k){p&&(m=k[1].length);var P=k.index+m,k=k[0].slice(m),x=P+k.length,_=v.slice(0,P),C=v.slice(x),E=[y,w];_&&E.push(_);var N=new r(l,g?a.tokenize(k,g):k,f,k,d);E.push(N),C&&E.push(C),Array.prototype.splice.apply(i,E)}}}}}return i},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.matchedStr=n||null,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="";for(var o in i.attributes)l+=(l?" ":"")+o+'="'+(i.attributes[o]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+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,document.addEventListener&&!r.hasAttribute("data-manual")&&("loading"!==document.readyState?requestAnimationFrame(a.highlightAll,0):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:/<\?[\w\W]+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=.$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},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:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,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:/()[\w\W]*?(?=<\/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:/(^|[^\\])\/\*[\w\W]*?\*\//,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-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\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:/()[\w\W]*?(?=<\/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.forEach&&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))}(); -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pattern Lab 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 33 | 34 | 35 | 36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 |
44 |
45 | 46 | 47 | 48 |
49 | 50 | 51 | 57 | 58 |
59 | 60 |
61 | 62 | 63 | 64 | 82 | 83 | 144 | 145 | 146 | 246 | 247 | 248 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | -------------------------------------------------------------------------------- /public/styleguide/css/styleguide.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";*{-webkit-box-sizing:border-box;box-sizing:border-box}.is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}#patternlab-body,#patternlab-html{margin:0;padding:0;background:#ddd;-webkit-text-size-adjust:100%}.sg-header{background:#000;color:#fff;font-family:HelveticaNeue,Helvetica,Arial,sans-serif;text-transform:uppercase;position:fixed;top:0;left:0;z-index:4;width:100%}.sg-header ul{padding:0;margin:0;list-style:none}.sg-header a{font-size:70%;color:grey;text-decoration:none;line-height:1;padding:1em .7em;-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.sg-header a.active,.sg-header a:focus,.sg-header a:hover{color:#fff;background:#222}.sg-nav-toggle{display:inline-block;position:relative;text-transform:uppercase;z-index:2}@media all and (min-width:42em){.sg-nav-toggle{display:none}}@media all and (max-width:42em){.sg-nav-container{overflow:hidden;max-height:0;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.sg-nav-container.active{max-height:50em}}.sg-nav{z-index:1;margin:0;padding:0;list-style:none}.sg-nav>li{cursor:pointer}@media all and (min-width:42em){.sg-nav>li{border-bottom:0;float:left;position:relative}.sg-nav>li>ol{position:absolute;top:2em;left:0}}.sg-nav a{display:block}.sg-acc-handle:after{content:'▼';color:rgba(255,255,255,.25);display:inline-block;font-size:7px;position:relative;top:-1px;right:-2px;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}@media all and (min-width:42em){.sg-acc-handle:after{float:none}}.sg-acc-handle:focus:after,.sg-acc-handle:hover:after{color:grey}.sg-acc-handle.active{color:#fff;background:#222}.sg-acc-handle.active:after{top:-2px;color:grey;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sg-acc-panel{overflow:hidden;max-height:0;margin:0;padding:0;list-style:none;min-width:10em;-webkit-transition:max-height .1s ease-out;transition:max-height .1s ease-out}.sg-acc-panel li{background:#222}.sg-acc-panel li:last-child,.sg-acc-panel li:last-child a{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.sg-acc-panel a{display:block}.sg-acc-panel.active{max-height:120em;overflow:auto}.sg-acc-panel.sg-right{position:absolute;left:auto;right:0}.sg-sub-nav{list-style:none}.sg-sub-nav a{text-transform:none;padding-left:1rem}.sg-controls{border:0;position:absolute;top:0;right:0;z-index:2}.sg-control>li{float:left}.sg-size{width:135px}@media all and (min-width:42em){.sg-size{width:auto}}.sg-current-size{font-size:70%;color:grey;padding:.85em .7em}@media all and (min-width:53em){.sg-current-size{float:left}}#sg-form{margin:0;border:0;padding:0}.sg-input{margin:-2px 0 0;padding:.1em;border:0;border-radius:3px;background:#000;color:grey;width:25px;text-align:right;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.sg-input:hover{color:#fff;background:#222}.sg-input:active,.sg-input:focus{outline:0;background:grey;color:#fff}@media all and (min-width:42em){.sg-input{width:35px}.sg-input.sg-size-px{width:30px}}.sg-size-options{display:none}.sg-size-options a{display:block}@media all and (min-width:53em){.sg-size-options{display:block;float:left;position:static}.sg-size-options>li{float:left}}.sg-tools-toggle{font-size:70%;background:#000;color:grey;text-decoration:none;line-height:1;border:0;cursor:pointer;padding:.9em .7em .6em}.sg-tools-toggle:after{display:none;content:""}.sg-find{position:relative}.twitter-typeahead{width:100%}.typeahead{border:0;background:#222;color:grey;width:100%;right:0;padding:.8em;text-transform:lowercase}.typeahead:focus{background:grey;color:#fff}.tt-input{background:grey;color:#fff;text-transform:uppercase}.tt-input:focus{text-transform:lowercase}.tt-hint{text-transform:lowercase;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.tt-dropdown-menu{text-transform:lowercase;background-color:grey;width:100%;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.tt-suggestion{color:#eee;font-size:75%;padding:.8em}.tt-suggestion.tt-cursor{color:#fff;background:rgba(255,255,255,.25)}.tt-suggestion p{margin:0}.sg-pattern-state{text-transform:none!important}.sg-pattern-state:before{content:"\2022";margin-right:4px;font-size:18px;vertical-align:bottom;display:inline-block;text-decoration:none}.sg-pattern-lineage .sg-pattern-state:before{font-size:12px}#sg-patterns .sg-pattern-state:before{font-size:14px}#sg-patterns .sg-pattern-state{color:#666}.sg-nav .sg-pattern-state:before{margin-top:-4px;margin-bottom:0;margin-left:-4px;height:20px;display:block;float:left}.inprogress:before{color:#FF4136!important}.inreview:before{color:#FC0!important}.complete:before{color:#2ECC40!important}#sg-vp-wrap{text-align:center;width:100%;position:fixed;top:2em;bottom:0;left:0;right:0;z-index:0}#sg-cover{width:100%;height:100%;display:none;position:absolute;z-index:20;cursor:col-resize}#sg-gen-container{height:100%;position:relative;text-align:center;margin:0 auto;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden}#sg-gen-container.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}#sg-viewport{position:absolute;height:100%;width:100%;border:0;padding:0;margin:0;top:0;bottom:0;left:0;right:0;background-color:#fff}#sg-viewport.hay-mode{-webkit-transition:all 40s linear;transition:all 40s linear}#sg-rightpull-container{width:14px;float:right;margin:0;height:100%;cursor:col-resize}#sg-rightpull{margin:0;width:100%;height:100%;background:#c2c2c2;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}#sg-rightpull:hover{background:grey}#sg-rightpull:active{cursor:col-resize;background:#666}.vp-animate{-webkit-transition:width .8s ease-out;transition:width .8s ease-out}.sg-pattern{margin-bottom:2em;position:relative;clear:both}.sg-pattern-head{position:relative;padding:.5rem 0 0;line-height:1.3;font-size:90%;color:grey}.sg-pattern-head:empty{padding:0}.sg-pattern-title{font-family:HelveticaNeue,Helvetica,Arial,sans-serif!important;font-size:.85rem!important;line-height:1!important;font-weight:700!important;margin:0!important;padding:0!important;text-transform:capitalize!important}.sg-pattern-title a{display:inline-block;padding:1em 0 .3rem;color:grey!important;text-decoration:none;cursor:pointer;font-weight:700}.sg-pattern-title a:focus,.sg-pattern-title a:hover{color:#000!important}.sg-pattern-title .sg-pattern-state{font-size:80%;font-weight:400;color:#ccc}.sg-pattern-extra-toggle{font-size:9px;position:absolute;bottom:-1px;right:0;z-index:1;padding:.65em;line-height:1;color:grey;font-weight:400;border:1px solid #ddd;border-top-left-radius:6px;border-top-right-radius:6px;-webkit-transition:background .1s ease-out;transition:background .1s ease-out}.sg-pattern-extra-toggle span{display:inline-block}.sg-pattern-extra-toggle.active,.sg-pattern-extra-toggle:focus,.sg-pattern-extra-toggle:hover{background:#eee;color:#000}.sg-pattern-extra-toggle.active{border-bottom-color:#eee}.sg-pattern-extra-toggle.active span{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sg-pattern-extra{background:#eee;border-top:1px solid #ddd;margin-bottom:1em;overflow:hidden;max-height:1px;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.sg-pattern-extra a{text-decoration:underline;color:#222}.sg-pattern-extra a:focus,.sg-pattern-extra a:hover{color:grey}.sg-pattern-extra.active{border:1px solid #ddd;border-radius:6px 0 6px 6px;max-height:50em}@media all and (min-width:42em){.sg-pattern-extra-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}}.sg-pattern-extra-info{padding:.5rem .5rem 0;line-height:1.4;font-size:90%;color:grey;overflow:auto;-webkit-overflow-scrolling:touch}.sg-pattern-extra-info:empty{padding:0}@media all and (min-width:42em){.sg-pattern-extra-info{padding:1em;width:40%}}.sg-pattern-desc{margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid #ccc}.sg-pattern-desc p:last-child{margin:0}.sg-pattern-lineage{font-size:90%;font-style:italic}.sg-pattern-extra-code{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:90%;padding:.5rem;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.sg-pattern-extra-code pre{overflow:scroll!important;-webkit-overflow-scrolling:touch;padding:0 .5rem .5rem!important;margin:0!important;line-height:1!important;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;border-radius:0 6px 6px!important;position:absolute;top:0;bottom:0;left:0;right:0}.sg-pattern-extra-code code{display:block;-moz-tab-size:2!important;-o-tab-size:2!important;tab-size:2!important}@media all and (min-width:42em){.sg-pattern-extra-code{width:60%;padding:1em}}.sg-pattern-category{margin-top:6rem;font:HelveticaNeue,Helvetica,Arial,sans-serif!important}.sg-pattern-category:first-of-type{margin-top:2rem}.sg-pattern-category-title{font-size:1.4rem!important;color:#222!important;margin:0 0 .2rem;text-transform:capitalize}.sg-pattern-category-title a{-webkit-transition:color .1s ease-out;transition:color .1s ease-out}.sg-pattern-category-body{font-size:80%;line-height:1.3}.sg-pattern-category-body:empty{display:none}.sg-tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font:HelveticaNeue,Helvetica,Arial,sans-serif!important}.sg-tabs-list{overflow:hidden;position:relative;bottom:-1px;list-style:none;margin:0;padding:0}.sg-tabs-list li{float:left;margin-right:3px}.sg-tabs-list a{display:block;font-size:90%;font-weight:700;line-height:1;padding:.5em 1em;background:#eee;border:1px solid #ccc;border-bottom:0;color:grey;border-top-right-radius:6px;border-top-left-radius:6px;text-decoration:none;text-transform:capitalize}.sg-tabs-list a:hover{color:#222}.sg-tab-title-active a{background:#f5f2f0;color:#222}.sg-tab-title-active a:focus,.sg-tab-title-active a:hover{color:#222}.sg-tabs-content{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border:1px solid #ccc;border-radius:0 6px 6px;overflow:hidden}.sg-tabs-panel{display:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;min-height:12em}@media all and (min-width:42em){.sg-tabs-panel{min-height:7em}}.sg-modal{font-family:HelveticaNeue,Helvetica,Arial,sans-serif;line-height:1.4;font-size:90%;background:#000;color:#ccc;position:fixed;top:auto;bottom:0;left:0;z-index:2;width:100%;height:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.sg-modal.anim-ready{-webkit-transition:bottom .3s ease-out;transition:bottom .3s ease-out}.sg-modal .sg-pattern-breadcrumb{font-size:70%;color:grey;margin-bottom:.5rem}.sg-modal .sg-pattern-head{margin-bottom:.5rem}.sg-modal .sg-pattern-title{font-size:1.4rem!important;color:#eee}.sg-modal .sg-pattern-extra{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;max-height:none;padding:0}.sg-modal .sg-pattern-extra.active{max-height:none}.sg-modal .sg-pattern-extra-info a{color:#ccc}.sg-modal .sg-pattern-extra-info a:focus,.sg-modal .sg-pattern-extra-info a:hover{color:#eee}.sg-modal .sg-pattern-desc{border-bottom-color:grey}.sg-modal .sg-annotations{border-top-color:grey}.sg-modal .sg-tabs-content{border:0}.sg-modal-close-btn{font-size:70%;background:#000;color:grey;border:0;border-radius:6px 6px 0 0;display:inline-block;padding:.9em .7em .1em;text-transform:uppercase;text-decoration:none;cursor:pointer;position:absolute;right:0;top:1rem;-webkit-transition:all .1s ease-out;transition:all .1s ease-out}.sg-modal.active .sg-modal-close-btn{top:-1.5rem}.sg-modal-close-btn:focus,.sg-modal-close-btn:hover{background:#222;color:#eee}.sg-modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;overflow-x:hidden}.sg-modal-content-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.has-annotation{cursor:help!important;-webkit-box-shadow:0 0 10px grey;box-shadow:0 0 10px grey}.has-annotation a,.has-annotation input{cursor:help!important}.has-annotation:hover{-webkit-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000}.has-annotation.active{-webkit-box-shadow:inset 0 0 20px grey;box-shadow:inset 0 0 20px grey}.annotation-tip{display:block;position:absolute;margin-top:-10px!important;margin-left:-10px!important;width:25px!important;height:25px!important;border-radius:13px!important;text-align:center!important;background:#444!important;color:#fff!important;font-weight:700!important;font-size:16px!important;z-index:100}.sg-annotations{margin:1rem 0;border-top:1px solid #ddd;padding-top:.5rem}.sg-annotations-title{font-size:1rem!important;margin:0 0 .5rem}.sg-annotations-list{padding:0;margin:0;list-style:none;counter-reset:the-count}.sg-annotations-list>li{position:relative;padding-left:1.5rem;margin-bottom:1rem;border-radius:6px;-webkit-transition:background .1s ease;transition:background .1s ease}.sg-annotations-list>li:before{content:counter(the-count);counter-increment:the-count;font-size:85%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:14px;height:14px;border-radius:50%;padding:2px;text-align:center;background:#ccc;color:#222;position:absolute;top:1px;left:0}.sg-annotations-list>li.active{background:rgba(255,255,255,.15)}.sg-annotations-list-title{display:inline;font-size:100%}.sg-annotations-list-title:after{content:"—"}#sg-comments-container{max-width:60em;margin:0 auto}.sg-comment-container{padding-bottom:2em;margin-bottom:1em;border-bottom:1px solid rgba(255,255,255,.25)}.sg-comment-container p:last-child{margin-bottom:0}.sg-comment-container h2{margin-bottom:.25em} -------------------------------------------------------------------------------- /public/styleguide/js/patternlab-pattern.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Basic postMessage Support 3 | * 4 | * Copyright (c) 2013-2016 Dave Olsen, http://dmolsen.com 5 | * Licensed under the MIT license 6 | * 7 | * Handles the postMessage stuff in the pattern, view-all, and style guide templates. 8 | * 9 | */ 10 | 11 | // alert the iframe parent that the pattern has loaded assuming this view was loaded in an iframe 12 | if (self != top) { 13 | 14 | // handle the options that could be sent to the parent window 15 | // - all get path 16 | // - pattern & view all get a pattern partial, styleguide gets all 17 | // - pattern shares lineage 18 | var path = window.location.toString(); 19 | var parts = path.split("?"); 20 | var options = { "event": "patternLab.pageLoad", "path": parts[0] }; 21 | 22 | patternData = document.getElementById('sg-pattern-data-footer').innerHTML; 23 | patternData = JSON.parse(patternData); 24 | options.patternpartial = (patternData.patternPartial !== undefined) ? patternData.patternPartial : "all"; 25 | if (patternData.lineage !== "") { 26 | options.lineage = patternData.lineage; 27 | } 28 | 29 | var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; 30 | parent.postMessage(options, targetOrigin); 31 | 32 | // find all links and add an onclick handler for replacing the iframe address so the history works 33 | var aTags = document.getElementsByTagName('a'); 34 | for (var i = 0; i < aTags.length; i++) { 35 | aTags[i].onclick = function(e) { 36 | var href = this.getAttribute("href"); 37 | var target = this.getAttribute("target"); 38 | if ((target !== undefined) && ((target == "_parent") || (target == "_blank"))) { 39 | // just do normal stuff 40 | } else if (href && href !== "#") { 41 | e.preventDefault(); 42 | window.location.replace(href); 43 | } else { 44 | e.preventDefault(); 45 | return false; 46 | } 47 | }; 48 | } 49 | 50 | } 51 | 52 | // watch the iframe source so that it can be sent back to everyone else. 53 | function receiveIframeMessage(event) { 54 | 55 | // does the origin sending the message match the current host? if not dev/null the request 56 | if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) { 57 | return; 58 | } 59 | 60 | var path; 61 | var data = {}; 62 | try { 63 | data = (typeof event.data !== 'string') ? event.data : JSON.parse(event.data); 64 | } catch(e) {} 65 | 66 | if ((data.event !== undefined) && (data.event == "patternLab.updatePath")) { 67 | 68 | if (patternData.patternPartial !== undefined) { 69 | 70 | // handle patterns and the view all page 71 | var re = /(patterns|snapshots)\/(.*)$/; 72 | path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+data.path+'?'+Date.now(); 73 | window.location.replace(path); 74 | 75 | } else { 76 | 77 | // handle the style guide 78 | path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("styleguide\/html\/styleguide.html","")+data.path+'?'+Date.now(); 79 | window.location.replace(path); 80 | 81 | } 82 | 83 | } else if ((data.event !== undefined) && (data.event == "patternLab.reload")) { 84 | 85 | // reload the location if there was a message to do so 86 | window.location.reload(); 87 | 88 | } 89 | 90 | } 91 | window.addEventListener("message", receiveIframeMessage, false); 92 | 93 | /*! 94 | * URL Handler 95 | * 96 | * Copyright (c) 2013-2014 Dave Olsen, http://dmolsen.com 97 | * Licensed under the MIT license 98 | * 99 | * Helps handle the initial iFrame source. Parses a string to see if it matches 100 | * an expected pattern in Pattern Lab. Supports Pattern Labs fuzzy pattern partial 101 | * matching style. 102 | * 103 | */ 104 | 105 | var urlHandler = { 106 | 107 | // set-up some default vars 108 | skipBack: false, 109 | targetOrigin: (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host, 110 | 111 | /** 112 | * get the real file name for a given pattern name 113 | * @param {String} the shorthand partials syntax for a given pattern 114 | * @param {Boolean} with the file name should be returned with the full rendered suffix or not 115 | * 116 | * @return {String} the real file path 117 | */ 118 | getFileName: function (name, withRenderedSuffix) { 119 | 120 | var baseDir = "patterns"; 121 | var fileName = ""; 122 | 123 | if (name === undefined) { 124 | return fileName; 125 | } 126 | 127 | if (withRenderedSuffix === undefined) { 128 | withRenderedSuffix = true; 129 | } 130 | 131 | if (name == "all") { 132 | return "styleguide/html/styleguide.html"; 133 | } else if (name == "snapshots") { 134 | return "snapshots/index.html"; 135 | } 136 | 137 | var paths = (name.indexOf("viewall-") != -1) ? viewAllPaths : patternPaths; 138 | var nameClean = name.replace("viewall-",""); 139 | 140 | // look at this as a regular pattern 141 | var bits = this.getPatternInfo(nameClean, paths); 142 | var patternType = bits[0]; 143 | var pattern = bits[1]; 144 | 145 | if ((paths[patternType] !== undefined) && (paths[patternType][pattern] !== undefined)) { 146 | 147 | fileName = paths[patternType][pattern]; 148 | 149 | } else if (paths[patternType] !== undefined) { 150 | 151 | for (var patternMatchKey in paths[patternType]) { 152 | if (patternMatchKey.indexOf(pattern) != -1) { 153 | fileName = paths[patternType][patternMatchKey]; 154 | break; 155 | } 156 | } 157 | 158 | } 159 | 160 | if (fileName === "") { 161 | return fileName; 162 | } 163 | 164 | var regex = /\//g; 165 | if ((name.indexOf("viewall-") !== -1) && (name.indexOf("viewall-") === 0) && (fileName !== "")) { 166 | fileName = baseDir+"/"+fileName.replace(regex,"-")+"/index.html"; 167 | } else if (fileName !== "") { 168 | fileName = baseDir+"/"+fileName.replace(regex,"-")+"/"+fileName.replace(regex,"-"); 169 | if (withRenderedSuffix) { 170 | var fileSuffixRendered = ((config.outputFileSuffixes !== undefined) && (config.outputFileSuffixes.rendered !== undefined)) ? config.outputFileSuffixes.rendered : ''; 171 | fileName = fileName+fileSuffixRendered+".html"; 172 | } 173 | } 174 | 175 | return fileName; 176 | 177 | }, 178 | 179 | /** 180 | * break up a pattern into its parts, pattern type and pattern name 181 | * @param {String} the shorthand partials syntax for a given pattern 182 | * @param {Object} the paths to be compared 183 | * 184 | * @return {Array} the pattern type and pattern name 185 | */ 186 | getPatternInfo: function (name, paths) { 187 | 188 | var patternBits = name.split("-"); 189 | 190 | var i = 1; 191 | var c = patternBits.length; 192 | 193 | var patternType = patternBits[0]; 194 | while ((paths[patternType] === undefined) && (i < c)) { 195 | patternType += "-"+patternBits[i]; 196 | i++; 197 | } 198 | 199 | var pattern = name.slice(patternType.length+1,name.length); 200 | 201 | return [patternType, pattern]; 202 | 203 | }, 204 | 205 | /** 206 | * search the request vars for a particular item 207 | * 208 | * @return {Object} a search of the window.location.search vars 209 | */ 210 | getRequestVars: function() { 211 | 212 | // the following is taken from https://developer.mozilla.org/en-US/docs/Web/API/window.location 213 | var oGetVars = new (function (sSearch) { 214 | if (sSearch.length > 1) { 215 | for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) { 216 | aItKey = aCouples[nKeyId].split("="); 217 | this[unescape(aItKey[0])] = aItKey.length > 1 ? unescape(aItKey[1]) : ""; 218 | } 219 | } 220 | })(window.location.search); 221 | 222 | return oGetVars; 223 | 224 | }, 225 | 226 | /** 227 | * push a pattern onto the current history based on a click 228 | * @param {String} the shorthand partials syntax for a given pattern 229 | * @param {String} the path given by the loaded iframe 230 | */ 231 | pushPattern: function (pattern, givenPath) { 232 | var data = { "pattern": pattern }; 233 | var fileName = urlHandler.getFileName(pattern); 234 | var path = window.location.pathname; 235 | path = (window.location.protocol === "file") ? path.replace("/public/index.html","public/") : path.replace(/\/index\.html/,"/"); 236 | var expectedPath = window.location.protocol+"//"+window.location.host+path+fileName; 237 | if (givenPath != expectedPath) { 238 | // make sure to update the iframe because there was a click 239 | var obj = JSON.stringify({ "event": "patternLab.updatePath", "path": fileName }); 240 | document.getElementById("sg-viewport").contentWindow.postMessage(obj, urlHandler.targetOrigin); 241 | } else { 242 | // add to the history 243 | var addressReplacement = (window.location.protocol == "file:") ? null : window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"?p="+pattern; 244 | if (history.pushState !== undefined) { 245 | history.pushState(data, null, addressReplacement); 246 | } 247 | document.getElementById("title").innerHTML = "Pattern Lab - "+pattern; 248 | if (document.getElementById("sg-raw") !== undefined) { 249 | document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(pattern)); 250 | } 251 | } 252 | }, 253 | 254 | /** 255 | * based on a click forward or backward modify the url and iframe source 256 | * @param {Object} event info like state and properties set in pushState() 257 | */ 258 | popPattern: function (e) { 259 | 260 | var patternName; 261 | var state = e.state; 262 | 263 | if (state === null) { 264 | this.skipBack = false; 265 | return; 266 | } else if (state !== null) { 267 | patternName = state.pattern; 268 | } 269 | 270 | var iFramePath = ""; 271 | iFramePath = this.getFileName(patternName); 272 | if (iFramePath === "") { 273 | iFramePath = "styleguide/html/styleguide.html"; 274 | } 275 | 276 | var obj = JSON.stringify({ "event": "patternLab.updatePath", "path": iFramePath }); 277 | document.getElementById("sg-viewport").contentWindow.postMessage( obj, urlHandler.targetOrigin); 278 | document.getElementById("title").innerHTML = "Pattern Lab - "+patternName; 279 | document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(patternName)); 280 | 281 | /* 282 | if (wsnConnected !== undefined) { 283 | wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+patternName+'" }' ); 284 | } 285 | */ 286 | 287 | } 288 | 289 | }; 290 | 291 | /** 292 | * handle the onpopstate event 293 | */ 294 | window.onpopstate = function (event) { 295 | urlHandler.skipBack = true; 296 | urlHandler.popPattern(event); 297 | }; 298 | 299 | /*! 300 | * Panels Util 301 | * For both styleguide and viewer 302 | * 303 | * Copyright (c) 2013-16 Brad Frost, http://bradfrostweb.com & Dave Olsen, http://dmolsen.com 304 | * Licensed under the MIT license 305 | * 306 | * @requires url-handler.js 307 | * 308 | */ 309 | 310 | var panelsUtil = { 311 | 312 | /** 313 | * Add click events to the template that was rendered 314 | * @param {String} the rendered template for the modal 315 | * @param {String} the pattern partial for the modal 316 | */ 317 | addClickEvents: function(templateRendered, patternPartial) { 318 | 319 | var els = templateRendered.querySelectorAll('#sg-'+patternPartial+'-tabs li'); 320 | for (var i = 0; i < els.length; ++i) { 321 | els[i].onclick = function(e) { 322 | e.preventDefault(); 323 | var patternPartial = this.getAttribute('data-patternpartial'); 324 | var panelID = this.getAttribute('data-panelid'); 325 | panelsUtil.show(patternPartial, panelID); 326 | }; 327 | } 328 | 329 | return templateRendered; 330 | 331 | }, 332 | 333 | /** 334 | * Show a specific modal 335 | * @param {String} the pattern partial for the modal 336 | * @param {String} the ID of the panel to be shown 337 | */ 338 | show: function(patternPartial, panelID) { 339 | 340 | var els; 341 | 342 | // turn off all of the active tabs 343 | els = document.querySelectorAll('#sg-'+patternPartial+'-tabs li'); 344 | for (i = 0; i < els.length; ++i) { 345 | els[i].classList.remove('sg-tab-title-active'); 346 | } 347 | 348 | // hide all of the panels 349 | els = document.querySelectorAll('#sg-'+patternPartial+'-panels div.sg-tabs-panel'); 350 | for (i = 0; i < els.length; ++i) { 351 | els[i].style.display = 'none'; 352 | } 353 | 354 | // add active tab class 355 | document.getElementById('sg-'+patternPartial+'-'+panelID+'-tab').classList.add('sg-tab-title-active'); 356 | 357 | // show the panel 358 | document.getElementById('sg-'+patternPartial+'-'+panelID+'-panel').style.display = 'flex'; 359 | 360 | } 361 | 362 | }; 363 | 364 | /*! 365 | * Modal for the Styleguide Layer 366 | * For both annotations and code/info 367 | * 368 | * Copyright (c) 2016 Dave Olsen, http://dmolsen.com 369 | * Licensed under the MIT license 370 | * 371 | * @requires panels-util.js 372 | * @requires url-handler.js 373 | * 374 | */ 375 | 376 | var modalStyleguide = { 377 | 378 | // set up some defaults 379 | active: [ ], 380 | targetOrigin: (window.location.protocol === 'file:') ? '*' : window.location.protocol+'//'+window.location.host, 381 | 382 | /** 383 | * initialize the modal window 384 | */ 385 | onReady: function() { 386 | 387 | // go through the panel toggles and add click event 388 | var els = document.querySelectorAll('.sg-pattern-extra-toggle'); 389 | for (var i = 0; i < els.length; ++i) { 390 | els[i].onclick = (function(e) { 391 | e.preventDefault(); 392 | var patternPartial = this.getAttribute('data-patternpartial'); 393 | modalStyleguide.toggle(patternPartial); 394 | }); 395 | } 396 | 397 | }, 398 | 399 | /** 400 | * toggle the modal window open and closed based on clicking the pip 401 | * @param {String} the patternPartial that identifies what needs to be toggled 402 | */ 403 | toggle: function(patternPartial) { 404 | if ((modalStyleguide.active[patternPartial] === undefined) || !modalStyleguide.active[patternPartial]) { 405 | var el = document.getElementById('sg-pattern-data-'+patternPartial); 406 | modalStyleguide.collectAndSend(el, true, false); 407 | } else { 408 | modalStyleguide.highlightsHide(); 409 | modalStyleguide.close(patternPartial); 410 | } 411 | 412 | }, 413 | 414 | /** 415 | * open the modal window for a view-all entry 416 | * @param {String} the patternPartial that identifies what needs to be opened 417 | * @param {String} the content that should be inserted 418 | */ 419 | open: function(patternPartial, content) { 420 | 421 | // make sure templateRendered is modified to be an HTML element 422 | var div = document.createElement('div'); 423 | div.innerHTML = content; 424 | content = document.createElement('div').appendChild(div).querySelector('div'); 425 | 426 | // add click events 427 | content = panelsUtil.addClickEvents(content, patternPartial); 428 | 429 | // make sure the modal viewer and other options are off just in case 430 | modalStyleguide.close(patternPartial); 431 | 432 | // note it's turned on in the viewer 433 | modalStyleguide.active[patternPartial] = true; 434 | 435 | // make sure there's no content 436 | div = document.getElementById('sg-pattern-extra-'+patternPartial); 437 | if (div.childNodes.length > 0) { 438 | div.removeChild(div.childNodes[0]); 439 | } 440 | 441 | // add the content 442 | document.getElementById('sg-pattern-extra-'+patternPartial).appendChild(content); 443 | 444 | // show the modal 445 | document.getElementById('sg-pattern-extra-toggle-'+patternPartial).classList.add('active'); 446 | document.getElementById('sg-pattern-extra-'+patternPartial).classList.add('active'); 447 | 448 | }, 449 | 450 | /** 451 | * close the modal window for a view-all entry 452 | * @param {String} the patternPartial that identifies what needs to be closed 453 | */ 454 | close: function(patternPartial) { 455 | 456 | // not that the modal viewer is no longer active 457 | modalStyleguide.active[patternPartial] = false; 458 | 459 | // hide the modal, look at info-panel.js 460 | document.getElementById('sg-pattern-extra-toggle-'+patternPartial).classList.remove('active'); 461 | document.getElementById('sg-pattern-extra-'+patternPartial).classList.remove('active'); 462 | 463 | }, 464 | 465 | /** 466 | * get the data that needs to be send to the viewer for rendering 467 | * @param {Element} the identifier for the element that needs to be collected 468 | * @param {Boolean} if the refresh is of a view-all view and the content should be sent back 469 | * @param {Boolean} if the text in the dropdown should be switched 470 | */ 471 | collectAndSend: function(el, iframePassback, switchText) { 472 | var patternData = JSON.parse(el.innerHTML); 473 | if (patternData.patternName !== undefined) { 474 | patternMarkupEl = document.querySelector('#'+patternData.patternPartial+' > .sg-pattern-example'); 475 | patternData.patternMarkup = (patternMarkupEl !== null) ? patternMarkupEl.innerHTML : document.querySelector('body').innerHTML; 476 | modalStyleguide.patternQueryInfo(patternData, iframePassback, switchText); 477 | } 478 | }, 479 | 480 | /** 481 | * hide the highlights 482 | */ 483 | highlightsHide: function(patternPartial) { 484 | var patternPartialSelector = (patternPartial !== undefined) ? '#'+patternPartial+" > " : ""; 485 | elsToHide = document.querySelectorAll(patternPartialSelector+'.has-annotation'); 486 | for (i = 0; i < elsToHide.length; i++) { 487 | elsToHide[i].classList.remove('has-annotation'); 488 | } 489 | elsToHide = document.querySelectorAll(patternPartialSelector+'.annotation-tip'); 490 | for (i = 0; i < elsToHide.length; i++) { 491 | elsToHide[i].style.display = 'none'; 492 | } 493 | }, 494 | 495 | /** 496 | * return the pattern info to the top level 497 | * @param {Object} the content that will be sent to the viewer for rendering 498 | * @param {Boolean} if the refresh is of a view-all view and the content should be sent back 499 | * @param {Boolean} if the text in the dropdown should be switched 500 | */ 501 | patternQueryInfo: function(patternData, iframePassback, switchText) { 502 | 503 | // send a message to the pattern 504 | try { 505 | var obj = JSON.stringify({ 'event': 'patternLab.patternQueryInfo', 'patternData': patternData, 'iframePassback': iframePassback, 'switchText': switchText}); 506 | parent.postMessage(obj, modalStyleguide.targetOrigin); 507 | } catch(e) {} 508 | 509 | }, 510 | 511 | /** 512 | * toggle the comment pop-up based on a user clicking on the pattern 513 | * based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage 514 | * @param {Object} event info 515 | */ 516 | receiveIframeMessage: function(event) { 517 | 518 | var i; 519 | 520 | // does the origin sending the message match the current host? if not dev/null the request 521 | if ((window.location.protocol !== 'file:') && (event.origin !== window.location.protocol+'//'+window.location.host)) { 522 | return; 523 | } 524 | 525 | var data = {}; 526 | try { 527 | data = (typeof event.data !== 'string') ? event.data : JSON.parse(event.data); 528 | } catch(e) {} 529 | 530 | // see if it got a path to replace 531 | if ((data.event !== undefined) && (data.event == 'patternLab.patternQuery')) { 532 | 533 | var els, iframePassback, patternData, patternMarkupEl; 534 | 535 | // find all elements related to pattern info 536 | els = document.querySelectorAll('.sg-pattern-data'); 537 | iframePassback = (els.length > 1); 538 | 539 | // send each up to the parent to be read and compiled into panels 540 | for (i = 0; i < els.length; i++) { 541 | modalStyleguide.collectAndSend(els[i], iframePassback, data.switchText); 542 | } 543 | 544 | } else if ((data.event !== undefined) && (data.event == 'patternLab.patternModalInsert')) { 545 | 546 | // insert the previously rendered content being passed from the iframe 547 | modalStyleguide.open(data.patternPartial, data.modalContent); 548 | 549 | } else if ((data.event !== undefined) && (data.event == 'patternLab.annotationsHighlightShow')) { 550 | 551 | var elsToHighlight, j, item, span; 552 | 553 | // go over the supplied annotations 554 | for (i = 0; i < data.annotations.length; i++) { 555 | 556 | item = data.annotations[i]; 557 | elsToHighlight = document.querySelectorAll(item.el); 558 | 559 | if (elsToHighlight.length > 0) { 560 | 561 | for (j = 0; j < elsToHighlight.length; j++) { 562 | 563 | elsToHighlight[j].classList.add('has-annotation'); 564 | 565 | span = document.createElement('span'); 566 | span.innerHTML = item.displayNumber; 567 | span.classList.add('annotation-tip'); 568 | 569 | if (window.getComputedStyle(elsToHighlight[j],null).getPropertyValue('max-height') == '0px') { 570 | span.style.display = 'none'; 571 | } 572 | 573 | annotationTip = document.querySelector(item.el+' > span.annotation-tip'); 574 | if (annotationTip === null) { 575 | elsToHighlight[j].insertBefore(span,elsToHighlight[j].firstChild); 576 | } else { 577 | annotationTip.style.display = 'inline'; 578 | } 579 | 580 | elsToHighlight[j].onclick = (function(item) { 581 | return function(e) { 582 | e.preventDefault(); 583 | e.stopPropagation(); 584 | var obj = JSON.stringify({'event': 'patternLab.annotationNumberClicked', 'displayNumber': item.displayNumber }); 585 | parent.postMessage(obj, modalStyleguide.targetOrigin); 586 | }; 587 | })(item); 588 | 589 | } 590 | 591 | } 592 | 593 | } 594 | 595 | } else if ((data.event !== undefined) && (data.event == 'patternLab.annotationsHighlightHide')) { 596 | 597 | modalStyleguide.highlightsHide(); 598 | 599 | } else if ((data.event !== undefined) && (data.event == 'patternLab.patternModalClose')) { 600 | 601 | var keys = []; 602 | for (var k in modalStyleguide.active) { 603 | keys.push(k); 604 | } 605 | for (i = 0; i < keys.length; i++) { 606 | var patternPartial = keys[i]; 607 | if (modalStyleguide.active[patternPartial]) { 608 | modalStyleguide.close(patternPartial); 609 | } 610 | } 611 | 612 | } 613 | 614 | } 615 | 616 | }; 617 | 618 | // when the document is ready make sure the modal is ready 619 | modalStyleguide.onReady(); 620 | window.addEventListener('message', modalStyleguide.receiveIframeMessage, false); 621 | -------------------------------------------------------------------------------- /public/styleguide/js/patternlab-viewer.min.js: -------------------------------------------------------------------------------- 1 | function receiveIframeMessage(e){if("file:"==window.location.protocol||e.origin===window.location.protocol+"//"+window.location.host){var t,n={};try{n="string"!=typeof e.data?e.data:JSON.parse(e.data)}catch(a){}if(void 0!==n.event&&"patternLab.updatePath"==n.event)if(void 0!==patternData.patternPartial){var i=/(patterns|snapshots)\/(.*)$/;t=window.location.protocol+"//"+window.location.host+window.location.pathname.replace(i,"")+n.path+"?"+Date.now(),window.location.replace(t)}else t=window.location.protocol+"//"+window.location.host+window.location.pathname.replace("styleguide/html/styleguide.html","")+n.path+"?"+Date.now(),window.location.replace(t);else void 0!==n.event&&"patternLab.reload"==n.event&&window.location.reload()}}!function(e,t,n){function a(e){return e}function i(e){return decodeURIComponent(e.replace(o," "))}var o=/\+/g,r=e.cookie=function(o,l,s){if(l!==n){if(s=e.extend({},r.defaults,s),null===l&&(s.expires=-1),"number"==typeof s.expires){var d=s.expires,c=s.expires=new Date;c.setDate(c.getDate()+d)}return l=r.json?JSON.stringify(l):String(l),t.cookie=[encodeURIComponent(o),"=",r.raw?l:encodeURIComponent(l),s.expires?"; expires="+s.expires.toUTCString():"",s.path?"; path="+s.path:"",s.domain?"; domain="+s.domain:"",s.secure?"; secure":""].join("")}for(var p=r.raw?a:i,u=t.cookie.split("; "),g=0,f=u.length;f>g;g++){var h=u[g].split("=");if(p(h.shift())===o){var m=p(h.join("="));return r.json?JSON.parse(m):m}}return null};r.defaults={},e.removeCookie=function(t,n){return null!==e.cookie(t)?(e.cookie(t,null,n),!0):!1}}(jQuery,document);var DataSaver={cookieName:"patternlab",addValue:function(e,t){var n=$.cookie(this.cookieName);n=null===n||""===n?e+"~"+t:n+"|"+e+"~"+t,$.cookie(this.cookieName,n)},updateValue:function(e,t){if(this.findValue(e)){for(var n="",a=$.cookie(this.cookieName).split("|"),i=0;i0?"|"+o[0]+"~"+o[1]:o[0]+"~"+o[1]}$.cookie(this.cookieName,n)}else this.addValue(e,t)},removeValue:function(e){for(var t="",n=$.cookie(this.cookieName).split("|"),a=0,i=0;ia;)o+="-"+n[a],a++;var r=e.slice(o.length+1,e.length);return[o,r]},getRequestVars:function(){var e=new function(e){if(e.length>1)for(var t,n=0,a=e.substr(1).split("&");n1?unescape(t[1]):""}(window.location.search);return e},pushPattern:function(e,t){var n={pattern:e},a=urlHandler.getFileName(e),i=window.location.pathname;i="file"===window.location.protocol?i.replace("/public/index.html","public/"):i.replace(/\/index\.html/,"/");var o=window.location.protocol+"//"+window.location.host+i+a;if(t!=o){var r=JSON.stringify({event:"patternLab.updatePath",path:a});document.getElementById("sg-viewport").contentWindow.postMessage(r,urlHandler.targetOrigin)}else{var l="file:"==window.location.protocol?null:window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"?p="+e;void 0!==history.pushState&&history.pushState(n,null,l),document.getElementById("title").innerHTML="Pattern Lab - "+e,void 0!==document.getElementById("sg-raw")&&document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(e))}},popPattern:function(e){var t,n=e.state;if(null===n)return void(this.skipBack=!1);null!==n&&(t=n.pattern);var a="";a=this.getFileName(t),""===a&&(a="styleguide/html/styleguide.html");var i=JSON.stringify({event:"patternLab.updatePath",path:a});document.getElementById("sg-viewport").contentWindow.postMessage(i,urlHandler.targetOrigin),document.getElementById("title").innerHTML="Pattern Lab - "+t,document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(t))}};window.onpopstate=function(e){urlHandler.skipBack=!0,urlHandler.popPattern(e)};var modalViewer={active:!1,switchText:!0,template:"info",patternData:{},targetOrigin:"file:"===window.location.protocol?"*":window.location.protocol+"//"+window.location.host,onReady:function(){Dispatcher.addListener("insertPanels",modalViewer.insert),$(window).on("resize",function(){"false"===DataSaver.findValue("modalActive")&&modalViewer.slide($("#sg-modal-container").outerHeight())}),$("#sg-t-patterninfo").click(function(e){e.preventDefault(),$("#sg-tools-toggle").removeClass("active"),$(this).parents("ul").removeClass("active"),modalViewer.toggle()}),$("#sg-modal-close-btn").on("click",function(e){e.preventDefault(),obj=JSON.stringify({event:"patternLab.annotationsHighlightHide"}),document.getElementById("sg-viewport").contentWindow.postMessage(obj,modalViewer.targetOrigin),modalViewer.close()}),"true"===DataSaver.findValue("modalActive")&&(modalViewer.active=!0,$("#sg-t-patterninfo").html("Hide Pattern Info")),modalViewer.hide();var e=urlHandler.getRequestVars();void 0===e.view||"code"!==e.view&&"c"!==e.view||modalViewer.queryPattern(),void 0===e.view||"annotations"!==e.view&&"a"!==e.view||modalViewer.queryPattern()},toggle:function(){modalViewer.active===!1?modalViewer.queryPattern():(obj=JSON.stringify({event:"patternLab.annotationsHighlightHide"}),document.getElementById("sg-viewport").contentWindow.postMessage(obj,modalViewer.targetOrigin),modalViewer.close())},open:function(){modalViewer.close(),DataSaver.updateValue("modalActive","true"),modalViewer.active=!0,$("#sg-t-"+modalViewer.template+" .sg-checkbox").addClass("active"),$("#sg-modal-container").addClass("active"),modalViewer.show()},close:function(){var e;DataSaver.updateValue("modalActive","false"),modalViewer.active=!1,$("#sg-modal-container").removeClass("active"),$(".sg-checkbox").removeClass("active"),modalViewer.hide(),$("#sg-t-patterninfo").html("Show Pattern Info"),e=JSON.stringify({event:"patternLab.patternModalClose"}),document.getElementById("sg-viewport").contentWindow.postMessage(e,modalViewer.targetOrigin)},hide:function(){modalViewer.slide($("#sg-modal-container").outerHeight()+30)},insert:function(e,t,n,a){if(n){var i=JSON.stringify({event:"patternLab.patternModalInsert",patternPartial:t,modalContent:e.outerHTML});document.getElementById("sg-viewport").contentWindow.postMessage(i,modalViewer.targetOrigin)}else $("#sg-modal-content").html(e),modalViewer.open();a===!0&&$("#sg-t-patterninfo").html("Hide Pattern Info")},refresh:function(e,t,n){t&&modalViewer.hide(),panelsViewer.gatherPanels(e,t,n)},slide:function(e){e=0===e?0:-e,$("#sg-modal-container").css("bottom",e)},slideToAnnotation:function(e){for(els=document.querySelectorAll("#sg-annotations > .sg-annotations-list > li"),i=0;i0&&(l={displayNumber:s,el:p.el,title:p.title,comment:p.comment},t.annotations.push(l),s++);if(t.annotations.length>0){var h=JSON.stringify({event:"patternLab.annotationsHighlightShow",annotations:t.annotations});document.getElementById("sg-viewport").contentWindow.postMessage(h,panelsViewer.targetOrigin)}if(t.lineage.length>0)for(g=0;g0)for(g=0;g0||void 0!==t.patternDescAdditions&&t.patternDescAdditions.length>0,t.lineageExists=0!==t.lineage.length,t.lineageRExists=0!==t.lineageR.length,t.patternStateExists=t.patternState.length>0,t.annotationExists=t.annotations.length>0,t.descBlockExists=t.patternDescExists||t.lineageExists||t.lineageRExists||t.patternStateExists||t.annotationExists,t.isPatternView=n===!1,i=document.getElementById("pl-panel-template-base"),o=Hogan.compile(i.innerHTML),r=o.render(t),d=document.createElement("div"),d.className="sg-modal-content-inner",d.innerHTML=r,r=d,r=panelsUtil.addClickEvents(r,f),g=0;gk?k:y>e?y:e,t===!1?$("#sg-gen-container,#sg-viewport").removeClass("vp-animate"):$("#sg-gen-container,#sg-viewport").addClass("vp-animate"),$("#sg-gen-container").width(n+P),x.width(n);var a="file:"===window.location.protocol?"*":window.location.protocol+"//"+window.location.host,i=JSON.stringify({event:"patternLab.resize",resize:"true"});document.getElementById("sg-viewport").contentWindow.postMessage(i,a),u(n),p(n)}function p(e){DataSaver.findValue("vpWidth")?DataSaver.updateValue("vpWidth",e):DataSaver.addValue("vpWidth",e)}function u(e,t,n){var a,i;"em"===t?(a=e,i=Math.floor(e*D)):(i=e,a=e/D),"updatePxInput"===n?b.val(i):"updateEmInput"===n?S.val(a.toFixed(2)):(S.val(a.toFixed(2)),b.val(i))}function g(e,t){return Math.floor(Math.random()*(t-e)+e)}function f(e){$("#sg-viewport").width(e),$("#sg-gen-container").width(1*e+14),u(e)}function h(){$(".sg-nav-container, .sg-nav-toggle, .sg-acc-handle, .sg-acc-panel").removeClass("active"),patternFinder.closeFinder()}function m(e){if("file:"===window.location.protocol||e.origin===window.location.protocol+"//"+window.location.host){var t={};try{t="string"!=typeof e.data?e.data:JSON.parse(e.data)}catch(o){}if(void 0!==t.event)if("patternLab.pageLoad"==t.event)urlHandler.skipBack||void 0!==history.state&&null!==history.state&&history.state.pattern===t.patternpartial||urlHandler.pushPattern(t.patternpartial,t.path),urlHandler.skipBack=!1;else if("patternLab.keyPress"==t.event){if("ctrl+shift+s"==t.keyPress)n();else if("ctrl+shift+m"==t.keyPress)a();else if("ctrl+shift+l"==t.keyPress)i();else if("ctrl+shift+d"==t.keyPress)V?r():l();else if("ctrl+shift+h"==t.keyPress)M?s():d();else if("ctrl+shift+0"==t.keyPress)c(320,!0);else if(found==t.keyPress.match(/ctrl\+shift\+([1-9])/)){var p=C[found[1]-1],u=-1!==p.indexOf("px")?"px":"em";p=p.replace(u,"");var g="px"===u?1*p:p*D;c(g,!0)}return!1}}}var v=document.body.clientWidth,w=$(document).height(),y=parseInt(config.ishMinimum),k=parseInt(config.ishMaximum),P=14,x=$("#sg-viewport"),b=$(".sg-size-px"),S=$(".sg-size-em"),D=void 0!==config.ishFontSize?parseInt(config.ishFontSize):parseInt($("body").css("font-size")),I=$(".sg-header").height(),E=!1,V=!1,L=!0,M=!1;$(e).resize(function(){v=document.body.clientWidth,w=$(document).height(),t(),L===!0&&c(v,!1)}),$(".sg-acc-handle").on("click",function(e){e.preventDefault();var n=$(this),a=n.next(".sg-acc-panel"),i=n.parent().parent().hasClass("sg-acc-panel");i||($(".sg-acc-handle").not(n).removeClass("active"),$(".sg-acc-panel").not(a).removeClass("active")),n.toggleClass("active"),a.toggleClass("active"),t()}),$(".sg-nav-toggle").on("click",function(e){e.preventDefault(),$(".sg-nav-container").toggleClass("active")}),$("#sg-t-toggle").on("click",function(e){e.preventDefault(),$(this).parents("ul").toggleClass("active")}),$("#sg-size-toggle").on("click",function(e){e.preventDefault(),$(this).parents("ul").toggleClass("active")}),$(".sg-size[data-size]").on("click",function(e){e.preventDefault(),r(),s(),L=!1;var t=$(this).attr("data-size");t.indexOf("px")>-1&&(D=1),t=t.replace(/[^\d.-]/g,""),c(Math.floor(t*D))}),$("#sg-size-s").on("click",function(e){e.preventDefault(),n()}),jwerty.key("ctrl+shift+s",function(e){return n(),!1}),$("#sg-size-m").on("click",function(e){e.preventDefault(),a()}),jwerty.key("ctrl+shift+m",function(e){return i(),!1}),$("#sg-size-l").on("click",function(e){e.preventDefault(),i()}),jwerty.key("ctrl+shift+l",function(e){return i(),!1}),$("#sg-size-full").on("click",function(e){e.preventDefault(),r(),s(),L=!0,c(v)}),$("#sg-size-random").on("click",function(e){e.preventDefault(),r(),s(),L=!1,c(g(y,v))}),$("#sg-size-disco").on("click",function(e){e.preventDefault(),s(),L=!1,V?r():l()}),jwerty.key("ctrl+shift+d",function(e){return V?r():l(),!1}),$("#sg-size-hay").on("click",function(e){e.preventDefault(),r(),M?s():d()}),jwerty.key("ctrl+shift+h",function(e){M?s():d()}),b.on("keydown",function(e){var t=Math.floor($(this).val());38===e.keyCode?(t++,c(t,!1)):40===e.keyCode?(t--,c(t,!1)):13===e.keyCode&&(e.preventDefault(),c(t),$(this).blur())}),b.on("keyup",function(){var e=Math.floor($(this).val());u(e,"px","updateEmInput")}),S.on("keydown",function(e){var t=parseFloat($(this).val());38===e.keyCode?(t++,c(Math.floor(t*D),!1)):40===e.keyCode?(t--,c(Math.floor(t*D),!1)):13===e.keyCode&&(e.preventDefault(),c(Math.floor(t*D)))}),S.on("keyup",function(){var e=parseFloat($(this).val());u(e,"em","updatePxInput")}),jwerty.key("ctrl+shift+0",function(e){return e.preventDefault(),c(320,!0),!1});var C=[];$("#sg-mq a").each(function(e){C.push($(this).html()),$(this).on("click",function(e,t){return function(e){e.preventDefault();var n=$(t).html(),a=-1!==n.indexOf("px")?"px":"em";n=n.replace(a,"");var i="px"===a?1*n:n*D;c(i,!0)}}(e,this)),jwerty.key("ctrl+shift+"+(e+1),function(e){return function(t){var n=$(e).html(),a=-1!==n.indexOf("px")?"px":"em";n=n.replace(a,"");var i="px"===a?1*n:n*D;return c(i,!0),!1}}(this))}),$("#sg-gen-container").on("transitionend webkitTransitionEnd",function(e){var t="file:"===window.location.protocol?"*":window.location.protocol+"//"+window.location.host,n=JSON.stringify({event:"patternLab.resize",resize:"true"});document.getElementById("sg-viewport").contentWindow.postMessage(n,t)}),$("#sg-gen-container").on("touchstart",function(e){}),$("#sg-rightpull").mousedown(function(e){var t=e.clientX,n=x.width();return L=!1,$("#sg-cover").css("display","block"),$("#sg-cover").mousemove(function(e){var a;a=n+2*(e.clientX-t),a>y&&(DataSaver.findValue("vpWidth")?DataSaver.updateValue("vpWidth",a):DataSaver.addValue("vpWidth",a),c(a,!1))}),!1}),$("body").mouseup(function(){$("#sg-cover").unbind("mousemove"),$("#sg-cover").css("display","none")});var H=$("#sg-viewport").width();$("#sg-gen-container").width(H);var N=screen.width;void 0!==window.orientation&&(N=0===window.orientation?screen.width:screen.height),$(window).width()==N&&"ontouchstart"in document.documentElement&&$(window).width()<=1024?$("#sg-rightpull-container").width(0):$("#sg-viewport").width(H-14),u($("#sg-viewport").width());var F=urlHandler.getRequestVars(),O=0,B=!0;void 0!==F.h||void 0!==F.hay?d():void 0!==F.d||void 0!==F.disco?l():void 0!==F.w||void 0!==F.width?(O=void 0!==F.w?F.w:F.width,O=-1!==O.indexOf("em")?Math.floor(Math.floor(O.replace("em",""))*D):Math.floor(O.replace("px","")),DataSaver.updateValue("vpWidth",O),f(O)):B&&(O=DataSaver.findValue("vpWidth"))&&f(O);var T=window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html",""),R=void 0!==config.defaultPattern&&"string"==typeof config.defaultPattern&&config.defaultPattern.trim().length>0?config.defaultPattern:"all",q=T+"styleguide/html/styleguide.html?"+Date.now();if(void 0===F.p&&void 0===F.pattern||(R=void 0!==F.p?F.p:F.pattern),"all"!==R&&(patternPath=urlHandler.getFileName(R),q=""!==patternPath?T+patternPath+"?"+Date.now():q,document.getElementById("title").innerHTML="Pattern Lab - "+R,history.replaceState({pattern:R},null,null)),void 0!==document.getElementById("sg-raw")&&document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(R)),urlHandler.skipBack=!0,document.getElementById("sg-viewport").contentWindow.location.replace(q),$("a[data-patternpartial]").on("click",function(e){e.preventDefault();var t=JSON.stringify({event:"patternLab.updatePath",path:urlHandler.getFileName($(this).attr("data-patternpartial"))});document.getElementById("sg-viewport").contentWindow.postMessage(t,urlHandler.targetOrigin),h()}),$("#sg-vp-wrap").click(function(){h()}),void 0!==window.orientation){var z=window.orientation;window.addEventListener("orientationchange",function(){window.orientation!=z&&($("#sg-gen-container").width($(window).width()),$("#sg-viewport").width($(window).width()),u($(window).width()),z=window.orientation)},!1)}window.addEventListener("message",m,!1)}(this);var pluginLoader={init:function(){for(var s,t,l,c,n,i=0;i