shibori 1.0.0.beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (239) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +20 -0
  3. data/Gemfile +4 -0
  4. data/Gemfile.lock +27 -0
  5. data/Procfile +1 -0
  6. data/README.md +24 -0
  7. data/Rakefile +2 -0
  8. data/app.json +11 -0
  9. data/builder/lineage_hunter.js +80 -0
  10. data/builder/list_item_hunter.js +106 -0
  11. data/builder/media_hunter.js +51 -0
  12. data/builder/object_factory.js +60 -0
  13. data/builder/parameter_hunter.js +69 -0
  14. data/builder/pattern_assembler.js +258 -0
  15. data/builder/pattern_exporter.js +43 -0
  16. data/builder/patternlab.js +365 -0
  17. data/builder/patternlab_grunt.js +38 -0
  18. data/builder/patternlab_gulp.js +26 -0
  19. data/builder/pseudopattern_hunter.js +78 -0
  20. data/config.json +34 -0
  21. data/docs/Pattern Lab Node.md +225 -0
  22. data/favicon.ico +0 -0
  23. data/gulpfile.js +148 -0
  24. data/index.js +20 -0
  25. data/lib/shibori/version.rb +3 -0
  26. data/lib/shibori.rb +11 -0
  27. data/package.json +44 -0
  28. data/public/data/annotations.js +109 -0
  29. data/public/styleguide/css/static.css +458 -0
  30. data/public/styleguide/css/static.scss +404 -0
  31. data/public/styleguide/css/styleguide-specific.css +170 -0
  32. data/public/styleguide/css/styleguide-specific.scss +204 -0
  33. data/public/styleguide/css/styleguide.css +880 -0
  34. data/public/styleguide/css/styleguide.scss +950 -0
  35. data/public/styleguide/css/vendor/prism.css +112 -0
  36. data/public/styleguide/css/vendor/typeahead.css +66 -0
  37. data/public/styleguide/fonts/icomoon.eot +0 -0
  38. data/public/styleguide/fonts/icomoon.svg +22 -0
  39. data/public/styleguide/fonts/icomoon.ttf +0 -0
  40. data/public/styleguide/fonts/icomoon.woff +0 -0
  41. data/public/styleguide/html/README +1 -0
  42. data/public/styleguide/images/spinner.gif +0 -0
  43. data/public/styleguide/js/annotations-pattern.js +308 -0
  44. data/public/styleguide/js/annotations-viewer.js +289 -0
  45. data/public/styleguide/js/code-pattern.js +120 -0
  46. data/public/styleguide/js/code-viewer.js +443 -0
  47. data/public/styleguide/js/data-saver.js +169 -0
  48. data/public/styleguide/js/pattern-finder.js +114 -0
  49. data/public/styleguide/js/postmessage.js +127 -0
  50. data/public/styleguide/js/styleguide.js +600 -0
  51. data/public/styleguide/js/url-handler.js +182 -0
  52. data/public/styleguide/js/vendor/classlist-polyfill.js +176 -0
  53. data/public/styleguide/js/vendor/jquery.js +4 -0
  54. data/public/styleguide/js/vendor/jwerty.js +523 -0
  55. data/public/styleguide/js/vendor/prism.js +7 -0
  56. data/public/styleguide/js/vendor/typeahead.bundle.min.js +7 -0
  57. data/script/bootstrap +58 -0
  58. data/shibori.gemspec +18 -0
  59. data/shibori.jpg +0 -0
  60. data/source/_data/annotations.js +109 -0
  61. data/source/_data/data.json +93 -0
  62. data/source/_data/listitems.json +782 -0
  63. data/source/_patternlab-files/README +1 -0
  64. data/source/_patternlab-files/index.mustache +94 -0
  65. data/source/_patternlab-files/partials/ishControls.mustache +64 -0
  66. data/source/_patternlab-files/partials/patternNav.mustache +17 -0
  67. data/source/_patternlab-files/partials/patternPaths.mustache +3 -0
  68. data/source/_patternlab-files/partials/viewAllPaths.mustache +3 -0
  69. data/source/_patternlab-files/pattern-header-footer/README +1 -0
  70. data/source/_patternlab-files/pattern-header-footer/footer.html +34 -0
  71. data/source/_patternlab-files/pattern-header-footer/header.html +44 -0
  72. data/source/_patternlab-files/styleguide.mustache +75 -0
  73. data/source/_patternlab-files/viewall.mustache +75 -0
  74. data/source/_patterns/00-atoms/00-typography/00-headings.mustache +6 -0
  75. data/source/_patterns/00-atoms/00-typography/01-headings-options.mustache +7 -0
  76. data/source/_patterns/00-atoms/00-typography/02-body.mustache +2 -0
  77. data/source/_patterns/00-atoms/00-typography/03-text-manipulation.mustache +12 -0
  78. data/source/_patterns/00-atoms/00-typography/04-blockquotes.mustache +3 -0
  79. data/source/_patterns/00-atoms/00-typography/05-lists.mustache +64 -0
  80. data/source/_patterns/00-atoms/01-colors/00-colors-monochromatic.mustache +36 -0
  81. data/source/_patterns/00-atoms/01-colors/01-colors-brand.mustache +26 -0
  82. data/source/_patterns/00-atoms/01-colors/02-colors-gradients.mustache +38 -0
  83. data/source/_patterns/00-atoms/02-buttons/00-btn-lg.mustache +7 -0
  84. data/source/_patterns/00-atoms/02-buttons/01-btn-sm.mustache +7 -0
  85. data/source/_patterns/00-atoms/02-buttons/02-btn-xs.mustache +7 -0
  86. data/source/_patterns/00-atoms/02-buttons/03-btn-block.mustache +7 -0
  87. data/source/_patterns/00-atoms/02-buttons/04-btn-deploy.mustache +4 -0
  88. data/source/_patterns/00-atoms/03-forms/00-text-fields.mustache +24 -0
  89. data/source/_patterns/00-atoms/03-forms/01-select-menu.mustache +6 -0
  90. data/source/_patterns/00-atoms/03-forms/02-checkbox.mustache +10 -0
  91. data/source/_patterns/00-atoms/03-forms/03-radios.mustache +10 -0
  92. data/source/_patterns/00-atoms/03-forms/04-validation.mustache +14 -0
  93. data/source/_patterns/00-atoms/04-quote/00-pullquote.mustache +7 -0
  94. data/source/_patterns/00-atoms/04-quote/01-quote-small.mustache +7 -0
  95. data/source/_patterns/00-atoms/05-code/01-pre.mustache +11 -0
  96. data/source/_patterns/00-atoms/06-tooltips/00-text.mustache +3 -0
  97. data/source/_patterns/00-atoms/06-tooltips/01-diagram-callout.mustache +1 -0
  98. data/source/_patterns/00-atoms/07-loader/00-spinner.mustache +5 -0
  99. data/source/_patterns/00-atoms/08-readmore/00-readmore.mustache +3 -0
  100. data/source/_patterns/00-atoms/09-slider/00-dots.mustache +8 -0
  101. data/source/_patterns/00-atoms/10-tables/00-tables.mustache +26 -0
  102. data/source/_patterns/00-atoms/12-modal/00-modal.mustache +14 -0
  103. data/source/_patterns/00-atoms/13-panel/00-panel.mustache +3 -0
  104. data/source/_patterns/00-atoms/14-users/00-avatar.mustache +3 -0
  105. data/source/_patterns/00-atoms/15-icons/00-icons.mustache +333 -0
  106. data/source/_patterns/00-atoms/15-icons/04-icon-colors.mustache +38 -0
  107. data/source/_patterns/00-atoms/15-icons/05-icon-sizes.mustache +31 -0
  108. data/source/_patterns/00-atoms/15-icons/_02-languages.mustache +0 -0
  109. data/source/_patterns/00-atoms/15-icons/_03-social.mustache +0 -0
  110. data/source/_patterns/00-atoms/15-icons/_05-icon-containers.mustache +0 -0
  111. data/source/_patterns/00-atoms/16-video/01-video.mustache +3 -0
  112. data/source/_patterns/00-atoms/16-video/_00-play-button.mustache +0 -0
  113. data/source/_patterns/00-atoms/17-utilities/00-visibility.mustache +8 -0
  114. data/source/_patterns/00-atoms/17-utilities/01-ui-elements.mustache +3 -0
  115. data/source/_patterns/00-atoms/18-grid/_00-grid.mustache +0 -0
  116. data/source/_patterns/01-molecules/00-text/00-header-groups.mustache +4 -0
  117. data/source/_patterns/01-molecules/00-text/01-intro-text.mustache +5 -0
  118. data/source/_patterns/01-molecules/01-layout/00-one-up.mustache +8 -0
  119. data/source/_patterns/01-molecules/01-layout/01-two-up.mustache +9 -0
  120. data/source/_patterns/01-molecules/01-layout/02-three-up.mustache +10 -0
  121. data/source/_patterns/01-molecules/01-layout/03-four-up.mustache +11 -0
  122. data/source/_patterns/01-molecules/01-layout/04-masonary-2.mustache +24 -0
  123. data/source/_patterns/01-molecules/01-layout/05-masonary-3.mustache +24 -0
  124. data/source/_patterns/01-molecules/02-navigation/01-subnav.mustache +21 -0
  125. data/source/_patterns/01-molecules/02-navigation/02-breadcrumbs.mustache +25 -0
  126. data/source/_patterns/01-molecules/02-navigation/03-side-nav.mustache +11 -0
  127. data/source/_patterns/01-molecules/02-navigation/04-side-nav-small.mustache +32 -0
  128. data/source/_patterns/01-molecules/02-navigation/05-pagination.mustache +0 -0
  129. data/source/_patterns/01-molecules/02-navigation/06-tabs.mustache +46 -0
  130. data/source/_patterns/01-molecules/03-forms/_00-search.mustache +0 -0
  131. data/source/_patterns/01-molecules/04-slider/00-slider.mustache +8 -0
  132. data/source/_patterns/01-molecules/05-messages/00-alert.mustache +15 -0
  133. data/source/_patterns/01-molecules/06-components/_00-social-share.mustache +0 -0
  134. data/source/_patterns/01-molecules/07-Elements/01-Addons-Card.mustache +79 -0
  135. data/source/_patterns/01-molecules/07-Elements/02-Buttons-Card.mustache +131 -0
  136. data/source/_patterns/01-molecules/07-Elements/03-Buildpack-Card.mustache +109 -0
  137. data/source/_patterns/01-molecules/08-vertical-tabs/01-vertical-tabs.mustache +30 -0
  138. data/source/_patterns/02-organisms/03-sections/00-purple.mustache +11 -0
  139. data/source/_patterns/02-organisms/03-sections/01-purple-dark.mustache +12 -0
  140. data/source/_patterns/02-organisms/03-sections/03-gray-light.mustache +12 -0
  141. data/source/css/hk-icon-rails.scss +13 -0
  142. data/source/css/scss/base/_base.scss +62 -0
  143. data/source/css/scss/base/_fonts.scss +12 -0
  144. data/source/css/scss/base/_normalize.scss +431 -0
  145. data/source/css/scss/base/_type.scss +128 -0
  146. data/source/css/scss/base/_utilities.scss +78 -0
  147. data/source/css/scss/components/_alert.scss +38 -0
  148. data/source/css/scss/components/_animate.scss +3340 -0
  149. data/source/css/scss/components/_animation.scss +15 -0
  150. data/source/css/scss/components/_buttons.scss +175 -0
  151. data/source/css/scss/components/_code.scss +26 -0
  152. data/source/css/scss/components/_forms.scss +136 -0
  153. data/source/css/scss/components/_hero.scss +18 -0
  154. data/source/css/scss/components/_hr.scss +11 -0
  155. data/source/css/scss/components/_icons.scss +85 -0
  156. data/source/css/scss/components/_lists.scss +45 -0
  157. data/source/css/scss/components/_logos.scss +15 -0
  158. data/source/css/scss/components/_masonary.scss +46 -0
  159. data/source/css/scss/components/_modal.scss +218 -0
  160. data/source/css/scss/components/_owlCarousel.scss +270 -0
  161. data/source/css/scss/components/_panel.scss +11 -0
  162. data/source/css/scss/components/_pill-box.scss +38 -0
  163. data/source/css/scss/components/_quote.scss +96 -0
  164. data/source/css/scss/components/_readmore.scss +11 -0
  165. data/source/css/scss/components/_slider.scss +96 -0
  166. data/source/css/scss/components/_spinner.scss +64 -0
  167. data/source/css/scss/components/_sprites.scss +3 -0
  168. data/source/css/scss/components/_sr-only.scss +10 -0
  169. data/source/css/scss/components/_tables.scss +62 -0
  170. data/source/css/scss/components/_tooltips.scss +93 -0
  171. data/source/css/scss/components/_users.scss +11 -0
  172. data/source/css/scss/components/_vertical-tabs.scss +129 -0
  173. data/source/css/scss/components/_video.scss +7 -0
  174. data/source/css/scss/ecosystem/_addons-card.scss +3 -0
  175. data/source/css/scss/ecosystem/_cards.scss +369 -0
  176. data/source/css/scss/ecosystem/_elements-brand.scss +32 -0
  177. data/source/css/scss/ecosystem/_elements.scss +4 -0
  178. data/source/css/scss/globals/_colors.scss +189 -0
  179. data/source/css/scss/globals/_mixins.scss +45 -0
  180. data/source/css/scss/globals/_variables.scss +87 -0
  181. data/source/css/scss/layout/_grid-settings.scss +13 -0
  182. data/source/css/scss/layout/_layout.scss +95 -0
  183. data/source/css/scss/page-elements/_headers.scss +3 -0
  184. data/source/css/scss/page-elements/_navigation.scss +254 -0
  185. data/source/css/scss/page-elements/_sections.scss +66 -0
  186. data/source/css/scss/page-elements/_sidebar.scss +34 -0
  187. data/source/css/shibori.scss +63 -0
  188. data/source/fonts/bentonsans/bentonsans-book.eot +0 -0
  189. data/source/fonts/bentonsans/bentonsans-book.svg +400 -0
  190. data/source/fonts/bentonsans/bentonsans-book.ttf +0 -0
  191. data/source/fonts/bentonsans/bentonsans-book.woff +0 -0
  192. data/source/fonts/bentonsans/bentonsans-medium.eot +0 -0
  193. data/source/fonts/bentonsans/bentonsans-medium.svg +416 -0
  194. data/source/fonts/bentonsans/bentonsans-medium.ttf +0 -0
  195. data/source/fonts/bentonsans/bentonsans-medium.woff +0 -0
  196. data/source/fonts/bentonsans/bentonsans-regular.eot +0 -0
  197. data/source/fonts/bentonsans/bentonsans-regular.svg +416 -0
  198. data/source/fonts/bentonsans/bentonsans-regular.ttf +0 -0
  199. data/source/fonts/bentonsans/bentonsans-regular.woff +0 -0
  200. data/source/fonts/hk-icon/hk-icon.eot +0 -0
  201. data/source/fonts/hk-icon/hk-icon.svg +261 -0
  202. data/source/fonts/hk-icon/hk-icon.ttf +0 -0
  203. data/source/fonts/hk-icon/hk-icon.woff +0 -0
  204. data/source/fonts/inconsolata/inconsolata-bold.eot +0 -0
  205. data/source/fonts/inconsolata/inconsolata-bold.svg +239 -0
  206. data/source/fonts/inconsolata/inconsolata-bold.ttf +0 -0
  207. data/source/fonts/inconsolata/inconsolata-bold.woff +0 -0
  208. data/source/fonts/inconsolata/inconsolata-regular.eot +0 -0
  209. data/source/fonts/inconsolata/inconsolata-regular.svg +239 -0
  210. data/source/fonts/inconsolata/inconsolata-regular.ttf +0 -0
  211. data/source/fonts/inconsolata/inconsolata-regular.woff +0 -0
  212. data/source/images/blockquote/close-sm.png +0 -0
  213. data/source/images/blockquote/close.png +0 -0
  214. data/source/images/blockquote/close@2x.png +0 -0
  215. data/source/images/blockquote/open-sm.png +0 -0
  216. data/source/images/blockquote/open.png +0 -0
  217. data/source/images/blockquote/open@2x.png +0 -0
  218. data/source/images/elements/heroku_suported.svg +32 -0
  219. data/source/images/forms/select-input-arrows.svg +8 -0
  220. data/source/js/init.js +26 -0
  221. data/source/js/main.js +22 -0
  222. data/source/js/vendor/bourbon-modal.js +17 -0
  223. data/source/js/vendor/fitvids.js +77 -0
  224. data/source/js/vendor/fixto.js +719 -0
  225. data/source/js/vendor/jquery-2.0.0b2.js +8690 -0
  226. data/source/js/vendor/modernizr.js +4 -0
  227. data/source/js/vendor/owl.carousel.js +3069 -0
  228. data/source/js/vendor/readmore.js +11 -0
  229. data/source/js/vendor/unslider.js +1 -0
  230. data/source/js/vendor/vertical-tabs.js +34 -0
  231. data/test/files/test.css +19 -0
  232. data/test/lineage_hunter_tests.js +262 -0
  233. data/test/list_item_hunter_tests.js +167 -0
  234. data/test/media_hunter_tests.js +74 -0
  235. data/test/object_factory_tests.js +62 -0
  236. data/test/parameter_hunter_tests.js +298 -0
  237. data/test/pattern_assembler_tests.js +43 -0
  238. data/test/patternlab_tests.js +8 -0
  239. metadata +320 -0
@@ -0,0 +1,600 @@
1
+ (function(w){
2
+
3
+ var sw = document.body.clientWidth, //Viewport Width
4
+ sh = $(document).height(), //Viewport Height
5
+ minViewportWidth = 240, //Minimum Size for Viewport
6
+ maxViewportWidth = 2600, //Maxiumum Size for Viewport
7
+ viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
8
+ $sgViewport = $('#sg-viewport'), //Viewport element
9
+ $sizePx = $('.sg-size-px'), //Px size input element in toolbar
10
+ $sizeEms = $('.sg-size-em'), //Em size input element in toolbar
11
+ $bodySize = parseInt($('body').css('font-size')), //Body size of the document
12
+ $headerHeight = $('.sg-header').height(),
13
+ discoID = false,
14
+ discoMode = false,
15
+ fullMode = true,
16
+ hayMode = false;
17
+
18
+ $(w).resize(function(){ //Update dimensions on resize
19
+ sw = document.body.clientWidth;
20
+ sh = $(document).height();
21
+
22
+ setAccordionHeight();
23
+
24
+ if(fullMode === true) {
25
+ sizeiframe(sw, false);
26
+ };
27
+
28
+ });
29
+
30
+ /* Pattern Lab accordion dropdown */
31
+ // Accordion dropdown
32
+ $('.sg-acc-handle').on("click", function(e){
33
+ e.preventDefault();
34
+
35
+ var $this = $(this),
36
+ $panel = $this.next('.sg-acc-panel'),
37
+ subnav = $this.parent().parent().hasClass('sg-acc-panel');
38
+
39
+ //Close other panels if link isn't a subnavigation item
40
+ if (!subnav) {
41
+ $('.sg-acc-handle').not($this).removeClass('active');
42
+ $('.sg-acc-panel').not($panel).removeClass('active');
43
+ }
44
+
45
+ //Activate selected panel
46
+ $this.toggleClass('active');
47
+ $panel.toggleClass('active');
48
+ setAccordionHeight();
49
+ });
50
+
51
+ //Accordion Height
52
+ function setAccordionHeight() {
53
+ var $activeAccordion = $('.sg-acc-panel.active').first(),
54
+ accordionHeight = $activeAccordion.height(),
55
+ availableHeight = sh-$headerHeight; //Screen height minus the height of the header
56
+
57
+ $activeAccordion.height(availableHeight); //Set height of accordion to the available height
58
+ }
59
+
60
+ $('.sg-nav-toggle').on("click", function(e){
61
+ e.preventDefault();
62
+ $('.sg-nav-container').toggleClass('active');
63
+ });
64
+
65
+ //"View (containing clean, code, raw, etc options) Trigger
66
+ $('#sg-t-toggle').on("click", function(e){
67
+ e.preventDefault();
68
+ $(this).parents('ul').toggleClass('active');
69
+ });
70
+
71
+ //Size Trigger
72
+ $('#sg-size-toggle').on("click", function(e){
73
+ e.preventDefault();
74
+ $(this).parents('ul').toggleClass('active');
75
+ });
76
+
77
+ //Phase View Events
78
+ $('.sg-size[data-size]').on("click", function(e){
79
+ e.preventDefault();
80
+ killDisco();
81
+ killHay();
82
+ fullMode = false;
83
+
84
+ var val = $(this).attr('data-size');
85
+
86
+ if (val.indexOf('px') > -1) {
87
+ $bodySize = 1;
88
+ }
89
+
90
+ val = val.replace(/[^\d.-]/g,'')
91
+ sizeiframe(Math.floor(val*$bodySize));
92
+ });
93
+
94
+ //Size View Events
95
+
96
+ // handle small button
97
+ function goSmall() {
98
+ killDisco();
99
+ killHay();
100
+ fullMode = false;
101
+ sizeiframe(getRandom(minViewportWidth,500));
102
+ }
103
+
104
+ $('#sg-size-s').on("click", function(e){
105
+ e.preventDefault();
106
+ goSmall();
107
+ });
108
+
109
+ jwerty.key('ctrl+shift+s', function(e) {
110
+ goSmall();
111
+ return false;
112
+ });
113
+
114
+ // handle medium button
115
+ function goMedium() {
116
+ killDisco();
117
+ killHay();
118
+ fullMode = false;
119
+ sizeiframe(getRandom(500,800));
120
+ }
121
+
122
+ $('#sg-size-m').on("click", function(e){
123
+ e.preventDefault();
124
+ goMedium();
125
+ });
126
+
127
+ jwerty.key('ctrl+shift+m', function(e) {
128
+ goMedium();
129
+ return false;
130
+ });
131
+
132
+ // handle large button
133
+ function goLarge() {
134
+ killDisco();
135
+ killHay();
136
+ fullMode = false;
137
+ sizeiframe(getRandom(800,1200));
138
+ }
139
+
140
+ $('#sg-size-l').on("click", function(e){
141
+ e.preventDefault();
142
+ goLarge();
143
+ });
144
+
145
+ jwerty.key('ctrl+shift+l', function(e) {
146
+ goLarge();
147
+ return false;
148
+ });
149
+
150
+ //Click Full Width Button
151
+ $('#sg-size-full').on("click", function(e){ //Resets
152
+ e.preventDefault();
153
+ killDisco();
154
+ killHay();
155
+ fullMode = true;
156
+ sizeiframe(sw);
157
+ });
158
+
159
+ //Click Random Size Button
160
+ $('#sg-size-random').on("click", function(e){
161
+ e.preventDefault();
162
+ killDisco();
163
+ killHay();
164
+ sizeiframe(getRandom(minViewportWidth,sw));
165
+ });
166
+
167
+ //Click for Disco Mode, which resizes the viewport randomly
168
+ $('#sg-size-disco').on("click", function(e){
169
+ e.preventDefault();
170
+ killHay();
171
+ fullMode = false;
172
+
173
+ if (discoMode) {
174
+ killDisco();
175
+
176
+ } else {
177
+ startDisco();
178
+ }
179
+ });
180
+
181
+ /* Disco Mode */
182
+ function disco() {
183
+ sizeiframe(getRandom(minViewportWidth,sw));
184
+ }
185
+
186
+ function killDisco() {
187
+ discoMode = false;
188
+ clearInterval(discoID);
189
+ discoID = false;
190
+ }
191
+
192
+ function startDisco() {
193
+ killHay();
194
+ discoMode = true;
195
+ discoID = setInterval(disco, 800);
196
+ }
197
+
198
+ jwerty.key('ctrl+shift+d', function(e) {
199
+ if (!discoMode) {
200
+ startDisco();
201
+ } else {
202
+ killDisco();
203
+ }
204
+ return false;
205
+ });
206
+
207
+ //Stephen Hay Mode - "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!"
208
+ $('#sg-size-hay').on("click", function(e){
209
+ e.preventDefault();
210
+ killDisco();
211
+ if (hayMode) {
212
+ killHay();
213
+ } else {
214
+ startHay();
215
+ }
216
+ });
217
+
218
+ //Stop Hay! Mode
219
+ function killHay() {
220
+ var currentWidth = $sgViewport.width();
221
+ hayMode = false;
222
+ $sgViewport.removeClass('hay-mode');
223
+ $('#sg-gen-container').removeClass('hay-mode');
224
+ sizeiframe(Math.floor(currentWidth));
225
+ }
226
+
227
+ // start Hay! mode
228
+ function startHay() {
229
+ killDisco();
230
+ hayMode = true;
231
+ $('#sg-gen-container').removeClass("vp-animate").width(minViewportWidth+viewportResizeHandleWidth);
232
+ $sgViewport.removeClass("vp-animate").width(minViewportWidth);
233
+
234
+ var timeoutID = window.setTimeout(function(){
235
+ $('#sg-gen-container').addClass('hay-mode').width(maxViewportWidth+viewportResizeHandleWidth);
236
+ $sgViewport.addClass('hay-mode').width(maxViewportWidth);
237
+
238
+ setInterval(function(){ var vpSize = $sgViewport.width(); updateSizeReading(vpSize); },100);
239
+ }, 200);
240
+ }
241
+
242
+ // start hay from a keyboard shortcut
243
+ jwerty.key('ctrl+shift+h', function(e) {
244
+ if (hayMode) {
245
+ killHay();
246
+ } else {
247
+ startHay();
248
+ }
249
+ return false;
250
+ });
251
+
252
+ //Pixel input
253
+ $sizePx.on('keydown', function(e){
254
+ var val = Math.floor($(this).val());
255
+
256
+ if(e.keyCode === 38) { //If the up arrow key is hit
257
+ val++;
258
+ sizeiframe(val,false);
259
+ } else if(e.keyCode === 40) { //If the down arrow key is hit
260
+ val--;
261
+ sizeiframe(val,false);
262
+ } else if(e.keyCode === 13) { //If the Enter key is hit
263
+ e.preventDefault();
264
+ sizeiframe(val); //Size Iframe to value of text box
265
+ $(this).blur();
266
+ }
267
+ });
268
+
269
+ $sizePx.on('keyup', function(){
270
+ var val = Math.floor($(this).val());
271
+ updateSizeReading(val,'px','updateEmInput');
272
+ });
273
+
274
+ //Em input
275
+ $sizeEms.on('keydown', function(e){
276
+ var val = parseFloat($(this).val());
277
+
278
+ if(e.keyCode === 38) { //If the up arrow key is hit
279
+ val++;
280
+ sizeiframe(Math.floor(val*$bodySize),false);
281
+ } else if(e.keyCode === 40) { //If the down arrow key is hit
282
+ val--;
283
+ sizeiframe(Math.floor(val*$bodySize),false);
284
+ } else if(e.keyCode === 13) { //If the Enter key is hit
285
+ e.preventDefault();
286
+ sizeiframe(Math.floor(val*$bodySize)); //Size Iframe to value of text box
287
+ }
288
+ });
289
+
290
+ $sizeEms.on('keyup', function(){
291
+ var val = parseFloat($(this).val());
292
+ updateSizeReading(val,'em','updatePxInput');
293
+ });
294
+
295
+ // set 0 to 320px as a default
296
+ jwerty.key('ctrl+shift+0', function(e) {
297
+ e.preventDefault();
298
+ sizeiframe(320,true);
299
+ return false;
300
+ });
301
+
302
+ // handle the MQ click
303
+ var mqs = [];
304
+ $('#sg-mq a').each(function(i) {
305
+
306
+ mqs.push($(this).html());
307
+
308
+ // bind the click
309
+ $(this).on("click", function(i,k) {
310
+ return function(e) {
311
+ e.preventDefault();
312
+ var val = $(k).html();
313
+ var type = (val.indexOf("px") !== -1) ? "px" : "em";
314
+ val = val.replace(type,"");
315
+ var width = (type === "px") ? val*1 : val*$bodySize;
316
+ sizeiframe(width,true);
317
+ }
318
+ }(i,this));
319
+
320
+ // bind the keyboard shortcut. can't use cmd on a mac because 3 & 4 are for screenshots
321
+ jwerty.key('ctrl+shift+'+(i+1), function (k) {
322
+ return function(e) {
323
+ var val = $(k).html();
324
+ var type = (val.indexOf("px") !== -1) ? "px" : "em";
325
+ val = val.replace(type,"");
326
+ var width = (type === "px") ? val*1 : val*$bodySize;
327
+ sizeiframe(width,true);
328
+ return false;
329
+ }
330
+ }(this));
331
+
332
+ });
333
+
334
+ //Resize the viewport
335
+ //'size' is the target size of the viewport
336
+ //'animate' is a boolean for switching the CSS animation on or off. 'animate' is true by default, but can be set to false for things like nudging and dragging
337
+ function sizeiframe(size,animate) {
338
+ var theSize;
339
+
340
+ if(size>maxViewportWidth) { //If the entered size is larger than the max allowed viewport size, cap value at max vp size
341
+ theSize = maxViewportWidth;
342
+ } else if(size<minViewportWidth) { //If the entered size is less than the minimum allowed viewport size, cap value at min vp size
343
+ theSize = minViewportWidth;
344
+ } else {
345
+ theSize = size;
346
+ }
347
+
348
+ //Conditionally remove CSS animation class from viewport
349
+ if(animate==false) {
350
+ $('#sg-gen-container,#sg-viewport').removeClass("vp-animate"); //If aninate is set to false, remove animate class from viewport
351
+ } else {
352
+ $('#sg-gen-container,#sg-viewport').addClass("vp-animate");
353
+ }
354
+
355
+ $('#sg-gen-container').width(theSize+viewportResizeHandleWidth); //Resize viewport wrapper to desired size + size of drag resize handler
356
+ $sgViewport.width(theSize); //Resize viewport to desired size
357
+
358
+ updateSizeReading(theSize); //Update values in toolbar
359
+ saveSize(theSize); //Save current viewport to cookie
360
+ }
361
+
362
+ function saveSize(size) {
363
+ if (!DataSaver.findValue('vpWidth')) {
364
+ DataSaver.addValue("vpWidth",size);
365
+ } else {
366
+ DataSaver.updateValue("vpWidth",size);
367
+ }
368
+ }
369
+
370
+
371
+ //Update Pixel and Em inputs
372
+ //'size' is the input number
373
+ //'unit' is the type of unit: either px or em. Default is px. Accepted values are 'px' and 'em'
374
+ //'target' is what inputs to update. Defaults to both
375
+ function updateSizeReading(size,unit,target) {
376
+ if(unit=='em') { //If size value is in em units
377
+ emSize = size;
378
+ pxSize = Math.floor(size*$bodySize);
379
+ } else { //If value is px or absent
380
+ pxSize = size;
381
+ emSize = size/$bodySize;
382
+ }
383
+
384
+ if (target == 'updatePxInput') {
385
+ $sizePx.val(pxSize);
386
+ } else if (target == 'updateEmInput') {
387
+ $sizeEms.val(emSize.toFixed(2));
388
+ } else {
389
+ $sizeEms.val(emSize.toFixed(2));
390
+ $sizePx.val(pxSize);
391
+ }
392
+ }
393
+
394
+ /* Returns a random number between min and max */
395
+ function getRandom (min, max) {
396
+ return Math.random() * (max - min) + min;
397
+ }
398
+
399
+ function updateViewportWidth(size) {
400
+
401
+ $("#sg-viewport").width(size);
402
+ $("#sg-gen-container").width(size*1 + 14);
403
+
404
+ updateSizeReading(size);
405
+ }
406
+
407
+ // handles widening the "viewport"
408
+ // 1. on "mousedown" store the click location
409
+ // 2. make a hidden div visible so that it can track mouse movements and make sure the pointer doesn't get lost in the iframe
410
+ // 3. on "mousemove" calculate the math, save the results to a cookie, and update the viewport
411
+ $('#sg-rightpull').mousedown(function(event) {
412
+
413
+ // capture default data
414
+ var origClientX = event.clientX;
415
+ var origViewportWidth = $sgViewport.width();
416
+
417
+ fullMode = false;
418
+
419
+ // show the cover
420
+ $("#sg-cover").css("display","block");
421
+
422
+ // add the mouse move event and capture data. also update the viewport width
423
+ $('#sg-cover').mousemove(function(event) {
424
+
425
+ viewportWidth = (origClientX > event.clientX) ? origViewportWidth - ((origClientX - event.clientX)*2) : origViewportWidth + ((event.clientX - origClientX)*2);
426
+
427
+ if (viewportWidth > minViewportWidth) {
428
+
429
+ if (!DataSaver.findValue('vpWidth')) {
430
+ DataSaver.addValue("vpWidth",viewportWidth);
431
+ } else {
432
+ DataSaver.updateValue("vpWidth",viewportWidth);
433
+ }
434
+
435
+ sizeiframe(viewportWidth,false);
436
+ }
437
+ });
438
+ });
439
+
440
+ // on "mouseup" we unbind the "mousemove" event and hide the cover again
441
+ $('body').mouseup(function(event) {
442
+ $('#sg-cover').unbind('mousemove');
443
+ $('#sg-cover').css("display","none");
444
+ });
445
+
446
+ // capture the viewport width that was loaded and modify it so it fits with the pull bar
447
+ var origViewportWidth = $("#sg-viewport").width();
448
+ $("#sg-gen-container").width(origViewportWidth);
449
+ $("#sg-viewport").width(origViewportWidth - 14);
450
+ updateSizeReading($("#sg-viewport").width());
451
+
452
+ // get the request vars
453
+ var oGetVars = urlHandler.getRequestVars();
454
+
455
+ // pre-load the viewport width
456
+ var vpWidth = 0;
457
+ var trackViewportWidth = true; // can toggle this feature on & off
458
+ if ((oGetVars.h != undefined) || (oGetVars.hay != undefined)) {
459
+ startHay();
460
+ } else if ((oGetVars.d != undefined) || (oGetVars.disco != undefined)) {
461
+ startDisco();
462
+ } else if ((oGetVars.w != undefined) || (oGetVars.width != undefined)) {
463
+ vpWidth = (oGetVars.w != undefined) ? oGetVars.w : oGetVars.width;
464
+ vpWidth = (vpWidth.indexOf("em") != -1) ? Math.floor(Math.floor(vpWidth.replace("em",""))*$bodySize) : Math.floor(vpWidth.replace("px",""));
465
+ DataSaver.updateValue("vpWidth",vpWidth);
466
+ updateViewportWidth(vpWidth);
467
+ } else if (trackViewportWidth && (vpWidth = DataSaver.findValue("vpWidth"))) {
468
+ updateViewportWidth(vpWidth);
469
+ }
470
+
471
+ // load the iframe source
472
+ var patternName = "all";
473
+ var patternPath = "";
474
+ var iFramePath = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"styleguide/html/styleguide.html";
475
+ if ((oGetVars.p != undefined) || (oGetVars.pattern != undefined)) {
476
+ patternName = (oGetVars.p != undefined) ? oGetVars.p : oGetVars.pattern;
477
+ patternPath = urlHandler.getFileName(patternName);
478
+ iFramePath = (patternPath != "") ? window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+patternPath : iFramePath;
479
+ }
480
+
481
+ if (patternName != "all") {
482
+ document.getElementById("title").innerHTML = "Pattern Lab - "+patternName;
483
+ history.replaceState({ "pattern": patternName }, null, null);
484
+ }
485
+
486
+ document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(patternName));
487
+
488
+ urlHandler.skipBack = true;
489
+ document.getElementById("sg-viewport").contentWindow.location.replace(iFramePath);
490
+
491
+ //IFrame functionality
492
+
493
+
494
+
495
+ // update the iframe with the source from clicked element in pull down menu. also close the menu
496
+ // having it outside fixes an auto-close bug i ran into
497
+ $('.sg-nav a').not('.sg-acc-handle').on("click", function(e){
498
+
499
+ e.preventDefault();
500
+
501
+ // update the iframe via the history api handler
502
+ document.getElementById("sg-viewport").contentWindow.postMessage( { "path": urlHandler.getFileName($(this).attr("data-patternpartial")) }, urlHandler.targetOrigin);
503
+
504
+ // close up the menu
505
+ $(this).parents('.sg-acc-panel').toggleClass('active');
506
+ $(this).parents('.sg-acc-panel').siblings('.sg-acc-handle').toggleClass('active');
507
+
508
+ return false;
509
+
510
+ });
511
+
512
+ // handle when someone clicks on the grey area of the viewport so it auto-closes the nav
513
+ function closePanels() {
514
+ // close up the menu
515
+ $('.sg-acc-panel').each(function() {
516
+ if ($(this).hasClass('active')) {
517
+ $(this).toggleClass('active');
518
+ }
519
+ });
520
+
521
+ $('.sg-acc-handle').each(function() {
522
+ if ($(this).hasClass('active')) {
523
+ $(this).toggleClass('active');
524
+ }
525
+ });
526
+ }
527
+
528
+ $('#sg-vp-wrap').click(function(e) {
529
+
530
+ closePanels();
531
+
532
+ });
533
+
534
+ // watch the iframe source so that it can be sent back to everyone else.
535
+ // based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
536
+ function receiveIframeMessage(event) {
537
+
538
+ var data = (typeof event.data !== "string") ? event.data : JSON.parse(event.data);
539
+
540
+ // does the origin sending the message match the current host? if not dev/null the request
541
+ if ((window.location.protocol !== "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
542
+ return;
543
+ }
544
+
545
+ if (data.bodyclick !== undefined) {
546
+
547
+ closePanels();
548
+
549
+ } else if (data.patternpartial !== undefined) {
550
+
551
+ if (!urlHandler.skipBack) {
552
+
553
+ if ((history.state === undefined) || (history.state === null) || (history.state.pattern !== data.patternpartial)) {
554
+ urlHandler.pushPattern(data.patternpartial, data.path);
555
+ }
556
+
557
+ if (this.wsnConnected) {
558
+ var iFramePath = urlHandler.getFileName(data.patternpartial);
559
+ wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+event.data.patternpartial+'" }' );
560
+ }
561
+ }
562
+
563
+ // reset the defaults
564
+ urlHandler.skipBack = false;
565
+
566
+ } else if (data.keyPress !== undefined) {
567
+ if (data.keyPress == 'ctrl+shift+s') {
568
+ goSmall();
569
+ } else if (data.keyPress == 'ctrl+shift+m') {
570
+ goMedium();
571
+ } else if (data.keyPress == 'ctrl+shift+l') {
572
+ goLarge();
573
+ } else if (data.keyPress == 'ctrl+shift+d') {
574
+ if (!discoMode) {
575
+ startDisco();
576
+ } else {
577
+ killDisco();
578
+ }
579
+ } else if (data.keyPress == 'ctrl+shift+h') {
580
+ if (!hayMode) {
581
+ startHay();
582
+ } else {
583
+ killHay();
584
+ }
585
+ } else if (data.keyPress == 'ctrl+shift+0') {
586
+ sizeiframe(320,true);
587
+ } else if (found == data.keyPress.match(/ctrl\+shift\+([1-9])/)) {
588
+ var val = mqs[(found[1]-1)];
589
+ var type = (val.indexOf("px") !== -1) ? "px" : "em";
590
+ val = val.replace(type,"");
591
+ var width = (type === "px") ? val*1 : val*$bodySize;
592
+ sizeiframe(width,true);
593
+ }
594
+ return false;
595
+ }
596
+ }
597
+
598
+ window.addEventListener("message", receiveIframeMessage, false);
599
+
600
+ })(this);