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.
- checksums.yaml +7 -0
- data/.gitignore +20 -0
- data/Gemfile +4 -0
- data/Gemfile.lock +27 -0
- data/Procfile +1 -0
- data/README.md +24 -0
- data/Rakefile +2 -0
- data/app.json +11 -0
- data/builder/lineage_hunter.js +80 -0
- data/builder/list_item_hunter.js +106 -0
- data/builder/media_hunter.js +51 -0
- data/builder/object_factory.js +60 -0
- data/builder/parameter_hunter.js +69 -0
- data/builder/pattern_assembler.js +258 -0
- data/builder/pattern_exporter.js +43 -0
- data/builder/patternlab.js +365 -0
- data/builder/patternlab_grunt.js +38 -0
- data/builder/patternlab_gulp.js +26 -0
- data/builder/pseudopattern_hunter.js +78 -0
- data/config.json +34 -0
- data/docs/Pattern Lab Node.md +225 -0
- data/favicon.ico +0 -0
- data/gulpfile.js +148 -0
- data/index.js +20 -0
- data/lib/shibori/version.rb +3 -0
- data/lib/shibori.rb +11 -0
- data/package.json +44 -0
- data/public/data/annotations.js +109 -0
- data/public/styleguide/css/static.css +458 -0
- data/public/styleguide/css/static.scss +404 -0
- data/public/styleguide/css/styleguide-specific.css +170 -0
- data/public/styleguide/css/styleguide-specific.scss +204 -0
- data/public/styleguide/css/styleguide.css +880 -0
- data/public/styleguide/css/styleguide.scss +950 -0
- data/public/styleguide/css/vendor/prism.css +112 -0
- data/public/styleguide/css/vendor/typeahead.css +66 -0
- data/public/styleguide/fonts/icomoon.eot +0 -0
- data/public/styleguide/fonts/icomoon.svg +22 -0
- data/public/styleguide/fonts/icomoon.ttf +0 -0
- data/public/styleguide/fonts/icomoon.woff +0 -0
- data/public/styleguide/html/README +1 -0
- data/public/styleguide/images/spinner.gif +0 -0
- data/public/styleguide/js/annotations-pattern.js +308 -0
- data/public/styleguide/js/annotations-viewer.js +289 -0
- data/public/styleguide/js/code-pattern.js +120 -0
- data/public/styleguide/js/code-viewer.js +443 -0
- data/public/styleguide/js/data-saver.js +169 -0
- data/public/styleguide/js/pattern-finder.js +114 -0
- data/public/styleguide/js/postmessage.js +127 -0
- data/public/styleguide/js/styleguide.js +600 -0
- data/public/styleguide/js/url-handler.js +182 -0
- data/public/styleguide/js/vendor/classlist-polyfill.js +176 -0
- data/public/styleguide/js/vendor/jquery.js +4 -0
- data/public/styleguide/js/vendor/jwerty.js +523 -0
- data/public/styleguide/js/vendor/prism.js +7 -0
- data/public/styleguide/js/vendor/typeahead.bundle.min.js +7 -0
- data/script/bootstrap +58 -0
- data/shibori.gemspec +18 -0
- data/shibori.jpg +0 -0
- data/source/_data/annotations.js +109 -0
- data/source/_data/data.json +93 -0
- data/source/_data/listitems.json +782 -0
- data/source/_patternlab-files/README +1 -0
- data/source/_patternlab-files/index.mustache +94 -0
- data/source/_patternlab-files/partials/ishControls.mustache +64 -0
- data/source/_patternlab-files/partials/patternNav.mustache +17 -0
- data/source/_patternlab-files/partials/patternPaths.mustache +3 -0
- data/source/_patternlab-files/partials/viewAllPaths.mustache +3 -0
- data/source/_patternlab-files/pattern-header-footer/README +1 -0
- data/source/_patternlab-files/pattern-header-footer/footer.html +34 -0
- data/source/_patternlab-files/pattern-header-footer/header.html +44 -0
- data/source/_patternlab-files/styleguide.mustache +75 -0
- data/source/_patternlab-files/viewall.mustache +75 -0
- data/source/_patterns/00-atoms/00-typography/00-headings.mustache +6 -0
- data/source/_patterns/00-atoms/00-typography/01-headings-options.mustache +7 -0
- data/source/_patterns/00-atoms/00-typography/02-body.mustache +2 -0
- data/source/_patterns/00-atoms/00-typography/03-text-manipulation.mustache +12 -0
- data/source/_patterns/00-atoms/00-typography/04-blockquotes.mustache +3 -0
- data/source/_patterns/00-atoms/00-typography/05-lists.mustache +64 -0
- data/source/_patterns/00-atoms/01-colors/00-colors-monochromatic.mustache +36 -0
- data/source/_patterns/00-atoms/01-colors/01-colors-brand.mustache +26 -0
- data/source/_patterns/00-atoms/01-colors/02-colors-gradients.mustache +38 -0
- data/source/_patterns/00-atoms/02-buttons/00-btn-lg.mustache +7 -0
- data/source/_patterns/00-atoms/02-buttons/01-btn-sm.mustache +7 -0
- data/source/_patterns/00-atoms/02-buttons/02-btn-xs.mustache +7 -0
- data/source/_patterns/00-atoms/02-buttons/03-btn-block.mustache +7 -0
- data/source/_patterns/00-atoms/02-buttons/04-btn-deploy.mustache +4 -0
- data/source/_patterns/00-atoms/03-forms/00-text-fields.mustache +24 -0
- data/source/_patterns/00-atoms/03-forms/01-select-menu.mustache +6 -0
- data/source/_patterns/00-atoms/03-forms/02-checkbox.mustache +10 -0
- data/source/_patterns/00-atoms/03-forms/03-radios.mustache +10 -0
- data/source/_patterns/00-atoms/03-forms/04-validation.mustache +14 -0
- data/source/_patterns/00-atoms/04-quote/00-pullquote.mustache +7 -0
- data/source/_patterns/00-atoms/04-quote/01-quote-small.mustache +7 -0
- data/source/_patterns/00-atoms/05-code/01-pre.mustache +11 -0
- data/source/_patterns/00-atoms/06-tooltips/00-text.mustache +3 -0
- data/source/_patterns/00-atoms/06-tooltips/01-diagram-callout.mustache +1 -0
- data/source/_patterns/00-atoms/07-loader/00-spinner.mustache +5 -0
- data/source/_patterns/00-atoms/08-readmore/00-readmore.mustache +3 -0
- data/source/_patterns/00-atoms/09-slider/00-dots.mustache +8 -0
- data/source/_patterns/00-atoms/10-tables/00-tables.mustache +26 -0
- data/source/_patterns/00-atoms/12-modal/00-modal.mustache +14 -0
- data/source/_patterns/00-atoms/13-panel/00-panel.mustache +3 -0
- data/source/_patterns/00-atoms/14-users/00-avatar.mustache +3 -0
- data/source/_patterns/00-atoms/15-icons/00-icons.mustache +333 -0
- data/source/_patterns/00-atoms/15-icons/04-icon-colors.mustache +38 -0
- data/source/_patterns/00-atoms/15-icons/05-icon-sizes.mustache +31 -0
- data/source/_patterns/00-atoms/15-icons/_02-languages.mustache +0 -0
- data/source/_patterns/00-atoms/15-icons/_03-social.mustache +0 -0
- data/source/_patterns/00-atoms/15-icons/_05-icon-containers.mustache +0 -0
- data/source/_patterns/00-atoms/16-video/01-video.mustache +3 -0
- data/source/_patterns/00-atoms/16-video/_00-play-button.mustache +0 -0
- data/source/_patterns/00-atoms/17-utilities/00-visibility.mustache +8 -0
- data/source/_patterns/00-atoms/17-utilities/01-ui-elements.mustache +3 -0
- data/source/_patterns/00-atoms/18-grid/_00-grid.mustache +0 -0
- data/source/_patterns/01-molecules/00-text/00-header-groups.mustache +4 -0
- data/source/_patterns/01-molecules/00-text/01-intro-text.mustache +5 -0
- data/source/_patterns/01-molecules/01-layout/00-one-up.mustache +8 -0
- data/source/_patterns/01-molecules/01-layout/01-two-up.mustache +9 -0
- data/source/_patterns/01-molecules/01-layout/02-three-up.mustache +10 -0
- data/source/_patterns/01-molecules/01-layout/03-four-up.mustache +11 -0
- data/source/_patterns/01-molecules/01-layout/04-masonary-2.mustache +24 -0
- data/source/_patterns/01-molecules/01-layout/05-masonary-3.mustache +24 -0
- data/source/_patterns/01-molecules/02-navigation/01-subnav.mustache +21 -0
- data/source/_patterns/01-molecules/02-navigation/02-breadcrumbs.mustache +25 -0
- data/source/_patterns/01-molecules/02-navigation/03-side-nav.mustache +11 -0
- data/source/_patterns/01-molecules/02-navigation/04-side-nav-small.mustache +32 -0
- data/source/_patterns/01-molecules/02-navigation/05-pagination.mustache +0 -0
- data/source/_patterns/01-molecules/02-navigation/06-tabs.mustache +46 -0
- data/source/_patterns/01-molecules/03-forms/_00-search.mustache +0 -0
- data/source/_patterns/01-molecules/04-slider/00-slider.mustache +8 -0
- data/source/_patterns/01-molecules/05-messages/00-alert.mustache +15 -0
- data/source/_patterns/01-molecules/06-components/_00-social-share.mustache +0 -0
- data/source/_patterns/01-molecules/07-Elements/01-Addons-Card.mustache +79 -0
- data/source/_patterns/01-molecules/07-Elements/02-Buttons-Card.mustache +131 -0
- data/source/_patterns/01-molecules/07-Elements/03-Buildpack-Card.mustache +109 -0
- data/source/_patterns/01-molecules/08-vertical-tabs/01-vertical-tabs.mustache +30 -0
- data/source/_patterns/02-organisms/03-sections/00-purple.mustache +11 -0
- data/source/_patterns/02-organisms/03-sections/01-purple-dark.mustache +12 -0
- data/source/_patterns/02-organisms/03-sections/03-gray-light.mustache +12 -0
- data/source/css/hk-icon-rails.scss +13 -0
- data/source/css/scss/base/_base.scss +62 -0
- data/source/css/scss/base/_fonts.scss +12 -0
- data/source/css/scss/base/_normalize.scss +431 -0
- data/source/css/scss/base/_type.scss +128 -0
- data/source/css/scss/base/_utilities.scss +78 -0
- data/source/css/scss/components/_alert.scss +38 -0
- data/source/css/scss/components/_animate.scss +3340 -0
- data/source/css/scss/components/_animation.scss +15 -0
- data/source/css/scss/components/_buttons.scss +175 -0
- data/source/css/scss/components/_code.scss +26 -0
- data/source/css/scss/components/_forms.scss +136 -0
- data/source/css/scss/components/_hero.scss +18 -0
- data/source/css/scss/components/_hr.scss +11 -0
- data/source/css/scss/components/_icons.scss +85 -0
- data/source/css/scss/components/_lists.scss +45 -0
- data/source/css/scss/components/_logos.scss +15 -0
- data/source/css/scss/components/_masonary.scss +46 -0
- data/source/css/scss/components/_modal.scss +218 -0
- data/source/css/scss/components/_owlCarousel.scss +270 -0
- data/source/css/scss/components/_panel.scss +11 -0
- data/source/css/scss/components/_pill-box.scss +38 -0
- data/source/css/scss/components/_quote.scss +96 -0
- data/source/css/scss/components/_readmore.scss +11 -0
- data/source/css/scss/components/_slider.scss +96 -0
- data/source/css/scss/components/_spinner.scss +64 -0
- data/source/css/scss/components/_sprites.scss +3 -0
- data/source/css/scss/components/_sr-only.scss +10 -0
- data/source/css/scss/components/_tables.scss +62 -0
- data/source/css/scss/components/_tooltips.scss +93 -0
- data/source/css/scss/components/_users.scss +11 -0
- data/source/css/scss/components/_vertical-tabs.scss +129 -0
- data/source/css/scss/components/_video.scss +7 -0
- data/source/css/scss/ecosystem/_addons-card.scss +3 -0
- data/source/css/scss/ecosystem/_cards.scss +369 -0
- data/source/css/scss/ecosystem/_elements-brand.scss +32 -0
- data/source/css/scss/ecosystem/_elements.scss +4 -0
- data/source/css/scss/globals/_colors.scss +189 -0
- data/source/css/scss/globals/_mixins.scss +45 -0
- data/source/css/scss/globals/_variables.scss +87 -0
- data/source/css/scss/layout/_grid-settings.scss +13 -0
- data/source/css/scss/layout/_layout.scss +95 -0
- data/source/css/scss/page-elements/_headers.scss +3 -0
- data/source/css/scss/page-elements/_navigation.scss +254 -0
- data/source/css/scss/page-elements/_sections.scss +66 -0
- data/source/css/scss/page-elements/_sidebar.scss +34 -0
- data/source/css/shibori.scss +63 -0
- data/source/fonts/bentonsans/bentonsans-book.eot +0 -0
- data/source/fonts/bentonsans/bentonsans-book.svg +400 -0
- data/source/fonts/bentonsans/bentonsans-book.ttf +0 -0
- data/source/fonts/bentonsans/bentonsans-book.woff +0 -0
- data/source/fonts/bentonsans/bentonsans-medium.eot +0 -0
- data/source/fonts/bentonsans/bentonsans-medium.svg +416 -0
- data/source/fonts/bentonsans/bentonsans-medium.ttf +0 -0
- data/source/fonts/bentonsans/bentonsans-medium.woff +0 -0
- data/source/fonts/bentonsans/bentonsans-regular.eot +0 -0
- data/source/fonts/bentonsans/bentonsans-regular.svg +416 -0
- data/source/fonts/bentonsans/bentonsans-regular.ttf +0 -0
- data/source/fonts/bentonsans/bentonsans-regular.woff +0 -0
- data/source/fonts/hk-icon/hk-icon.eot +0 -0
- data/source/fonts/hk-icon/hk-icon.svg +261 -0
- data/source/fonts/hk-icon/hk-icon.ttf +0 -0
- data/source/fonts/hk-icon/hk-icon.woff +0 -0
- data/source/fonts/inconsolata/inconsolata-bold.eot +0 -0
- data/source/fonts/inconsolata/inconsolata-bold.svg +239 -0
- data/source/fonts/inconsolata/inconsolata-bold.ttf +0 -0
- data/source/fonts/inconsolata/inconsolata-bold.woff +0 -0
- data/source/fonts/inconsolata/inconsolata-regular.eot +0 -0
- data/source/fonts/inconsolata/inconsolata-regular.svg +239 -0
- data/source/fonts/inconsolata/inconsolata-regular.ttf +0 -0
- data/source/fonts/inconsolata/inconsolata-regular.woff +0 -0
- data/source/images/blockquote/close-sm.png +0 -0
- data/source/images/blockquote/close.png +0 -0
- data/source/images/blockquote/close@2x.png +0 -0
- data/source/images/blockquote/open-sm.png +0 -0
- data/source/images/blockquote/open.png +0 -0
- data/source/images/blockquote/open@2x.png +0 -0
- data/source/images/elements/heroku_suported.svg +32 -0
- data/source/images/forms/select-input-arrows.svg +8 -0
- data/source/js/init.js +26 -0
- data/source/js/main.js +22 -0
- data/source/js/vendor/bourbon-modal.js +17 -0
- data/source/js/vendor/fitvids.js +77 -0
- data/source/js/vendor/fixto.js +719 -0
- data/source/js/vendor/jquery-2.0.0b2.js +8690 -0
- data/source/js/vendor/modernizr.js +4 -0
- data/source/js/vendor/owl.carousel.js +3069 -0
- data/source/js/vendor/readmore.js +11 -0
- data/source/js/vendor/unslider.js +1 -0
- data/source/js/vendor/vertical-tabs.js +34 -0
- data/test/files/test.css +19 -0
- data/test/lineage_hunter_tests.js +262 -0
- data/test/list_item_hunter_tests.js +167 -0
- data/test/media_hunter_tests.js +74 -0
- data/test/object_factory_tests.js +62 -0
- data/test/parameter_hunter_tests.js +298 -0
- data/test/pattern_assembler_tests.js +43 -0
- data/test/patternlab_tests.js +8 -0
- 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);
|