ish_rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.rdoc +3 -0
- data/Rakefile +34 -0
- data/app/assets/javascripts/ish/init.js +417 -0
- data/app/assets/javascripts/ish/url-handler.js +182 -0
- data/app/assets/javascripts/jquery.js +8829 -0
- data/app/assets/javascripts/view_ports.js +3 -0
- data/app/assets/stylesheets/ish/styles.css +536 -0
- data/app/assets/stylesheets/view_ports.css +3 -0
- data/app/controllers/view_ports_controller.rb +5 -0
- data/app/helpers/view_ports_helper.rb +2 -0
- data/app/views/view_ports/index.html.erb +61 -0
- data/config/initializers/assets.rb +1 -0
- data/config/routes.rb +4 -0
- data/lib/ish_rails/engine.rb +4 -0
- data/lib/ish_rails/version.rb +3 -0
- data/lib/ish_rails.rb +4 -0
- data/lib/tasks/ish_rails_tasks.rake +4 -0
- data/test/controllers/view_ports_controller_test.rb +9 -0
- data/test/dummy/README.rdoc +28 -0
- data/test/dummy/Rakefile +6 -0
- data/test/dummy/app/assets/javascripts/application.js +13 -0
- data/test/dummy/app/assets/stylesheets/application.css +15 -0
- data/test/dummy/app/controllers/application_controller.rb +5 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/config/application.rb +23 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/database.yml +25 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +37 -0
- data/test/dummy/config/environments/production.rb +82 -0
- data/test/dummy/config/environments/test.rb +39 -0
- data/test/dummy/config/initializers/assets.rb +8 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/cookies_serializer.rb +3 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +4 -0
- data/test/dummy/config/initializers/session_store.rb +3 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/routes.rb +56 -0
- data/test/dummy/config/secrets.yml +22 -0
- data/test/dummy/config.ru +4 -0
- data/test/dummy/db/development.sqlite3 +0 -0
- data/test/dummy/log/development.log +1029 -0
- data/test/dummy/public/404.html +67 -0
- data/test/dummy/public/422.html +67 -0
- data/test/dummy/public/500.html +66 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/13fe41fee1fe35b49d145bcc06610705 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/25d2cd8d8ae6f0728b89fa77b51317f1 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/260734de5561e387a22ab1fd48fc5ae1 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/2a234d7303a062a6f022c9c3febe52d6 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/2f5173deea6c795b8fdde723bb4b63af +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/357970feca3ac29060c1e3861e2c0953 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/387970b760f48061daed7db47449c36b +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/3bb58493d395fafd3039183446159cd6 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/4a4d5eafead33783d4e864bb2a94f867 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/535879350ff819a6f56edc3a5a333db5 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/57e5a4adfe291c00682250b0dc736072 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/758a95016420bcca11057ecbffc0b51a +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/7ef971d02e44ca633b54e54ed7b6be35 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/a42b7971588b5308589ac4a43e420c65 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/a623b62b39a46544f9925b0bb9a44222 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/ae375e7fc51b4dfcdd33d42d0fdbc7d3 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/b7a2e82279ca753cf7e0d4e97cbb9b24 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/c1dcfc7f616a918fc38b2a6dff3f548a +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/cffd775d018f68ce5dba1ee0d951a994 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/d771ace226fc8215a3572e0aa35bb0d6 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/d9470b25008173c44a98f637c10158e3 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/dd19119f2ba280d054b6d293ae16dcea +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/f7cbd26ba1d28d48de824f0e94586655 +0 -0
- data/test/dummy/tmp/cache/assets/development/sprockets/f9ded07ffc25c24046e0fde8a3986ea6 +0 -0
- data/test/dummy/tmp/pids/server.pid +1 -0
- data/test/helpers/view_ports_helper_test.rb +4 -0
- data/test/integration/navigation_test.rb +10 -0
- data/test/ish_rails_test.rb +7 -0
- data/test/test_helper.rb +15 -0
- metadata +222 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 1a5459b9bf3a80f7ced0a3f530809a05f79358f4
|
4
|
+
data.tar.gz: 366b662af177bfe930bdf044c9a533d6bf19259d
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 7417477aa589661492d400a5d34634127cb67139a82adb8c063ff4ada3b75473d8c8e043dc5d1a73e5583f76cc70f36f26acfd3a92745cb68cbc6c83dad8e653
|
7
|
+
data.tar.gz: 287c6f3625ddb780c187a5b470be3ad846930096c668eee902963d7daf8681860713fe37f6867c8c2f5641f03933c7253951febfef05e1f7dd85f18963e8e4d8
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2014 YOURNAME
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.rdoc
ADDED
data/Rakefile
ADDED
@@ -0,0 +1,34 @@
|
|
1
|
+
begin
|
2
|
+
require 'bundler/setup'
|
3
|
+
rescue LoadError
|
4
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
5
|
+
end
|
6
|
+
|
7
|
+
require 'rdoc/task'
|
8
|
+
|
9
|
+
RDoc::Task.new(:rdoc) do |rdoc|
|
10
|
+
rdoc.rdoc_dir = 'rdoc'
|
11
|
+
rdoc.title = 'IshRails'
|
12
|
+
rdoc.options << '--line-numbers'
|
13
|
+
rdoc.rdoc_files.include('README.rdoc')
|
14
|
+
rdoc.rdoc_files.include('lib/**/*.rb')
|
15
|
+
end
|
16
|
+
|
17
|
+
APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
|
18
|
+
load 'rails/tasks/engine.rake'
|
19
|
+
|
20
|
+
|
21
|
+
|
22
|
+
Bundler::GemHelper.install_tasks
|
23
|
+
|
24
|
+
require 'rake/testtask'
|
25
|
+
|
26
|
+
Rake::TestTask.new(:test) do |t|
|
27
|
+
t.libs << 'lib'
|
28
|
+
t.libs << 'test'
|
29
|
+
t.pattern = 'test/**/*_test.rb'
|
30
|
+
t.verbose = false
|
31
|
+
end
|
32
|
+
|
33
|
+
|
34
|
+
task default: :test
|
@@ -0,0 +1,417 @@
|
|
1
|
+
$(document).ready(function() {
|
2
|
+
(function(w){
|
3
|
+
var sw = document.body.clientWidth, //Viewport Width
|
4
|
+
minViewportWidth = 240, //Minimum Size for Viewport
|
5
|
+
maxViewportWidth = 2600, //Maxiumum Size for Viewport
|
6
|
+
viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
|
7
|
+
$sgWrapper = $('#sg-gen-container'), //Wrapper around viewport
|
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 = 16, //Body size of the document
|
12
|
+
discoID = false,
|
13
|
+
fullMode = true,
|
14
|
+
discoMode = false,
|
15
|
+
hayMode = false,
|
16
|
+
hash = window.location.hash.replace(/^.*?#/,'');
|
17
|
+
|
18
|
+
//URL Form Submission
|
19
|
+
$('#url-form').submit(function(e) {
|
20
|
+
var urlVal = $('#url').val();
|
21
|
+
var regex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
|
22
|
+
|
23
|
+
if(regex.test(urlVal)) {
|
24
|
+
return;
|
25
|
+
} else {
|
26
|
+
var newURL = "http://"+urlVal;
|
27
|
+
$('#url').val(newURL);
|
28
|
+
return;
|
29
|
+
}
|
30
|
+
|
31
|
+
});
|
32
|
+
|
33
|
+
$(w).resize(function(){ //Update dimensions on resize
|
34
|
+
sw = document.body.clientWidth;
|
35
|
+
|
36
|
+
if(fullMode == true) {
|
37
|
+
sizeFull();
|
38
|
+
}
|
39
|
+
});
|
40
|
+
|
41
|
+
/* Nav Active State */
|
42
|
+
function changeActiveState(link) {
|
43
|
+
var $activeLink = link;
|
44
|
+
$('.sg-size-options a').removeClass('active');
|
45
|
+
|
46
|
+
if(link) {
|
47
|
+
$activeLink.addClass('active');
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
/* Pattern Lab accordion dropdown */
|
52
|
+
$('.sg-acc-handle').on("click", function(e){
|
53
|
+
var $this = $(this),
|
54
|
+
$panel = $this.next('.sg-acc-panel');
|
55
|
+
e.preventDefault();
|
56
|
+
$this.toggleClass('active');
|
57
|
+
$panel.toggleClass('active');
|
58
|
+
});
|
59
|
+
|
60
|
+
//Size Trigger
|
61
|
+
$('#sg-size-toggle').on("click", function(e){
|
62
|
+
e.preventDefault();
|
63
|
+
$(this).parents('ul').toggleClass('active');
|
64
|
+
});
|
65
|
+
|
66
|
+
//Size View Events
|
67
|
+
|
68
|
+
//Click Size Small Button
|
69
|
+
$('#sg-size-s').on("click", function(e){
|
70
|
+
e.preventDefault();
|
71
|
+
killDisco();
|
72
|
+
killHay();
|
73
|
+
fullMode = false;
|
74
|
+
window.location.hash = 's';
|
75
|
+
changeActiveState($(this));
|
76
|
+
sizeSmall();
|
77
|
+
});
|
78
|
+
|
79
|
+
//Click Size Medium Button
|
80
|
+
$('#sg-size-m').on("click", function(e){
|
81
|
+
e.preventDefault();
|
82
|
+
killDisco();
|
83
|
+
killHay();
|
84
|
+
fullMode = false;
|
85
|
+
window.location.hash = 'm';
|
86
|
+
changeActiveState($(this));
|
87
|
+
sizeMedium();
|
88
|
+
});
|
89
|
+
|
90
|
+
//Click Size Large Button
|
91
|
+
$('#sg-size-l').on("click", function(e){
|
92
|
+
e.preventDefault();
|
93
|
+
killDisco();
|
94
|
+
killHay();
|
95
|
+
fullMode = false;
|
96
|
+
window.location.hash = 'l';
|
97
|
+
changeActiveState($(this));
|
98
|
+
sizeLarge();
|
99
|
+
});
|
100
|
+
|
101
|
+
//Click Full Width Button
|
102
|
+
$('#sg-size-full').on("click", function(e){ //Resets
|
103
|
+
e.preventDefault();
|
104
|
+
killDisco();
|
105
|
+
killHay();
|
106
|
+
changeActiveState($(this));
|
107
|
+
fullMode = true;
|
108
|
+
window.location.hash = '';
|
109
|
+
sizeiframe(sw);
|
110
|
+
});
|
111
|
+
|
112
|
+
//Click Random Size Button
|
113
|
+
$('#sg-size-random').on("click", function(e){
|
114
|
+
e.preventDefault();
|
115
|
+
fullMode = false;
|
116
|
+
sizeRandom();
|
117
|
+
window.location.hash = 'random';
|
118
|
+
});
|
119
|
+
|
120
|
+
//Size Small
|
121
|
+
function sizeSmall() {
|
122
|
+
sizeiframe(getRandom(minViewportWidth,500));
|
123
|
+
}
|
124
|
+
|
125
|
+
//Size Medium
|
126
|
+
function sizeMedium() {
|
127
|
+
sizeiframe(getRandom(500,800));
|
128
|
+
}
|
129
|
+
|
130
|
+
//Size Large
|
131
|
+
function sizeLarge() {
|
132
|
+
sizeiframe(getRandom(800,1200));
|
133
|
+
}
|
134
|
+
|
135
|
+
//Size Random Size
|
136
|
+
function sizeRandom() {
|
137
|
+
killDisco();
|
138
|
+
killHay();
|
139
|
+
fullMode = false;
|
140
|
+
changeActiveState($('#sg-size-random'));
|
141
|
+
sizeiframe(getRandom(minViewportWidth,sw));
|
142
|
+
}
|
143
|
+
|
144
|
+
//Size Full
|
145
|
+
function sizeFull() {
|
146
|
+
sizeiframe(sw, false);
|
147
|
+
updateSizeReading(sw);
|
148
|
+
}
|
149
|
+
|
150
|
+
//Click for Disco Mode, which resizes the viewport randomly
|
151
|
+
$('#sg-size-disco').on("click", function(e){
|
152
|
+
e.preventDefault();
|
153
|
+
killHay();
|
154
|
+
fullMode = false;
|
155
|
+
|
156
|
+
if (discoMode) {
|
157
|
+
killDisco();
|
158
|
+
changeActiveState();
|
159
|
+
window.location.hash = '';
|
160
|
+
|
161
|
+
} else {
|
162
|
+
startDisco();
|
163
|
+
changeActiveState($(this));
|
164
|
+
window.location.hash = 'disco';
|
165
|
+
}
|
166
|
+
});
|
167
|
+
|
168
|
+
/* Disco Mode */
|
169
|
+
function disco() {
|
170
|
+
sizeiframe(getRandom(minViewportWidth,sw));
|
171
|
+
}
|
172
|
+
|
173
|
+
function killDisco() {
|
174
|
+
discoMode = false;
|
175
|
+
clearInterval(discoID);
|
176
|
+
discoID = false;
|
177
|
+
}
|
178
|
+
|
179
|
+
function startDisco() {
|
180
|
+
discoMode = true;
|
181
|
+
discoID = setInterval(disco, 800);
|
182
|
+
}
|
183
|
+
|
184
|
+
//Stephen Hay Mode - "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!"
|
185
|
+
$('#sg-size-hay').on("click", function(e){
|
186
|
+
e.preventDefault();
|
187
|
+
killDisco();
|
188
|
+
|
189
|
+
if (hayMode) {
|
190
|
+
killHay();
|
191
|
+
changeActiveState();
|
192
|
+
window.location.hash = '';
|
193
|
+
} else {
|
194
|
+
startHay();
|
195
|
+
changeActiveState($(this));
|
196
|
+
window.location.hash = 'hay';
|
197
|
+
}
|
198
|
+
});
|
199
|
+
|
200
|
+
//Stop Hay! Mode
|
201
|
+
function killHay() {
|
202
|
+
var currentWidth = $sgViewport.width();
|
203
|
+
hayMode = false;
|
204
|
+
$sgViewport.removeClass('hay-mode');
|
205
|
+
$sgWrapper.removeClass('hay-mode');
|
206
|
+
sizeiframe(Math.floor(currentWidth));
|
207
|
+
}
|
208
|
+
|
209
|
+
// start Hay! mode
|
210
|
+
function startHay() {
|
211
|
+
hayMode = true;
|
212
|
+
$sgWrapper.removeClass("vp-animate").width(minViewportWidth+viewportResizeHandleWidth);
|
213
|
+
$sgViewport.removeClass("vp-animate").width(minViewportWidth);
|
214
|
+
|
215
|
+
window.setTimeout(function(){
|
216
|
+
$sgWrapper.addClass('hay-mode').width(maxViewportWidth+viewportResizeHandleWidth);
|
217
|
+
$sgViewport.addClass('hay-mode').width(maxViewportWidth);
|
218
|
+
|
219
|
+
setInterval(function(){ var vpSize = $sgViewport.width(); updateSizeReading(vpSize); },100);
|
220
|
+
}, 200);
|
221
|
+
}
|
222
|
+
|
223
|
+
//Pixel input
|
224
|
+
$sizePx.on('keydown', function(e){
|
225
|
+
var val = Math.floor($(this).val());
|
226
|
+
|
227
|
+
if(e.keyCode === 38) { //If the up arrow key is hit
|
228
|
+
val++;
|
229
|
+
sizeiframe(val,false);
|
230
|
+
window.location.hash = val;
|
231
|
+
} else if(e.keyCode === 40) { //If the down arrow key is hit
|
232
|
+
val--;
|
233
|
+
sizeiframe(val,false);
|
234
|
+
window.location.hash = val;
|
235
|
+
} else if(e.keyCode === 13) { //If the Enter key is hit
|
236
|
+
e.preventDefault();
|
237
|
+
sizeiframe(val); //Size Iframe to value of text box
|
238
|
+
window.location.hash = val;
|
239
|
+
$(this).blur();
|
240
|
+
}
|
241
|
+
changeActiveState();
|
242
|
+
});
|
243
|
+
|
244
|
+
$sizePx.on('keyup', function(){
|
245
|
+
var val = Math.floor($(this).val());
|
246
|
+
updateSizeReading(val,'px','updateEmInput');
|
247
|
+
});
|
248
|
+
|
249
|
+
//Em input
|
250
|
+
$sizeEms.on('keydown', function(e){
|
251
|
+
var val = parseFloat($(this).val());
|
252
|
+
|
253
|
+
if(e.keyCode === 38) { //If the up arrow key is hit
|
254
|
+
val++;
|
255
|
+
sizeiframe(Math.floor(val*$bodySize),false);
|
256
|
+
} else if(e.keyCode === 40) { //If the down arrow key is hit
|
257
|
+
val--;
|
258
|
+
sizeiframe(Math.floor(val*$bodySize),false);
|
259
|
+
} else if(e.keyCode === 13) { //If the Enter key is hit
|
260
|
+
e.preventDefault();
|
261
|
+
sizeiframe(Math.floor(val*$bodySize)); //Size Iframe to value of text box
|
262
|
+
}
|
263
|
+
changeActiveState();
|
264
|
+
|
265
|
+
window.location.hash = parseInt(val*$bodySize);
|
266
|
+
});
|
267
|
+
|
268
|
+
$sizeEms.on('keyup', function(){
|
269
|
+
var val = parseFloat($(this).val());
|
270
|
+
updateSizeReading(val,'em','updatePxInput');
|
271
|
+
});
|
272
|
+
|
273
|
+
// handle the MQ click
|
274
|
+
$('#sg-mq a').on("click", function(e){
|
275
|
+
e.preventDefault();
|
276
|
+
var val = $(this).html();
|
277
|
+
var type = (val.indexOf("px") !== -1) ? "px" : "em";
|
278
|
+
val = val.replace(type,"");
|
279
|
+
var width = (type === "px") ? val*1 : val*$bodySize;
|
280
|
+
sizeiframe(width,true);
|
281
|
+
});
|
282
|
+
|
283
|
+
//Resize the viewport
|
284
|
+
//'size' is the target size of the viewport
|
285
|
+
//'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
|
286
|
+
function sizeiframe(size,animate) {
|
287
|
+
var theSize;
|
288
|
+
|
289
|
+
if(size>maxViewportWidth) { //If the entered size is larger than the max allowed viewport size, cap value at max vp size
|
290
|
+
theSize = maxViewportWidth;
|
291
|
+
} else if(size<minViewportWidth) { //If the entered size is less than the minimum allowed viewport size, cap value at min vp size
|
292
|
+
theSize = minViewportWidth;
|
293
|
+
} else {
|
294
|
+
theSize = size;
|
295
|
+
}
|
296
|
+
|
297
|
+
//Conditionally remove CSS animation class from viewport
|
298
|
+
if(animate===false) {
|
299
|
+
$sgWrapper.removeClass("vp-animate");
|
300
|
+
$sgViewport.removeClass("vp-animate"); //If aninate is set to false, remove animate class from viewport
|
301
|
+
} else {
|
302
|
+
$sgWrapper.addClass("vp-animate");
|
303
|
+
$sgViewport.addClass("vp-animate");
|
304
|
+
}
|
305
|
+
|
306
|
+
$sgWrapper.width(theSize+viewportResizeHandleWidth); //Resize viewport wrapper to desired size + size of drag resize handler
|
307
|
+
$sgViewport.width(theSize); //Resize viewport to desired size
|
308
|
+
|
309
|
+
updateSizeReading(theSize); //Update values in toolbar
|
310
|
+
}
|
311
|
+
|
312
|
+
|
313
|
+
|
314
|
+
|
315
|
+
//Update Pixel and Em inputs
|
316
|
+
//'size' is the input number
|
317
|
+
//'unit' is the type of unit: either px or em. Default is px. Accepted values are 'px' and 'em'
|
318
|
+
//'target' is what inputs to update. Defaults to both
|
319
|
+
function updateSizeReading(size,unit,target) {
|
320
|
+
if(unit=='em') { //If size value is in em units
|
321
|
+
emSize = size;
|
322
|
+
pxSize = Math.floor(size*$bodySize);
|
323
|
+
} else { //If value is px or absent
|
324
|
+
pxSize = size;
|
325
|
+
emSize = size/$bodySize;
|
326
|
+
}
|
327
|
+
|
328
|
+
if (target == 'updatePxInput') {
|
329
|
+
$sizePx.val(pxSize);
|
330
|
+
} else if (target == 'updateEmInput') {
|
331
|
+
$sizeEms.val(emSize.toFixed(2));
|
332
|
+
} else {
|
333
|
+
$sizeEms.val(emSize.toFixed(2));
|
334
|
+
$sizePx.val(pxSize);
|
335
|
+
}
|
336
|
+
}
|
337
|
+
|
338
|
+
/* Returns a random number between min and max */
|
339
|
+
function getRandom (min, max) {
|
340
|
+
var num = Math.random() * (max - min) + min;
|
341
|
+
|
342
|
+
return parseInt(num);
|
343
|
+
}
|
344
|
+
|
345
|
+
function updateViewportWidth(size) {
|
346
|
+
$sgViewport.width(size);
|
347
|
+
$sgWrapper.width(size*1 + 14);
|
348
|
+
|
349
|
+
updateSizeReading(size);
|
350
|
+
}
|
351
|
+
|
352
|
+
// handles widening the "viewport"
|
353
|
+
// 1. on "mousedown" store the click location
|
354
|
+
// 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
|
355
|
+
// 3. on "mousemove" calculate the math, save the results to a cookie, and update the viewport
|
356
|
+
$('#sg-rightpull').mousedown(function(event) {
|
357
|
+
|
358
|
+
// capture default data
|
359
|
+
var origClientX = event.clientX;
|
360
|
+
var origViewportWidth = $sgViewport.width();
|
361
|
+
|
362
|
+
fullMode = false;
|
363
|
+
|
364
|
+
// show the cover
|
365
|
+
$("#sg-cover").css("display","block");
|
366
|
+
|
367
|
+
// add the mouse move event and capture data. also update the viewport width
|
368
|
+
$('#sg-cover').mousemove(function(event) {
|
369
|
+
|
370
|
+
viewportWidth = (origClientX > event.clientX) ? origViewportWidth - ((origClientX - event.clientX)*2) : origViewportWidth + ((event.clientX - origClientX)*2);
|
371
|
+
|
372
|
+
if (viewportWidth > minViewportWidth) {
|
373
|
+
|
374
|
+
|
375
|
+
window.location.hash = viewportWidth;
|
376
|
+
sizeiframe(viewportWidth,false);
|
377
|
+
}
|
378
|
+
});
|
379
|
+
});
|
380
|
+
|
381
|
+
// on "mouseup" we unbind the "mousemove" event and hide the cover again
|
382
|
+
$('body').mouseup(function(event) {
|
383
|
+
$('#sg-cover').unbind('mousemove');
|
384
|
+
$('#sg-cover').css("display","none");
|
385
|
+
});
|
386
|
+
|
387
|
+
// capture the viewport width that was loaded and modify it so it fits with the pull bar
|
388
|
+
var origViewportWidth = $sgViewport.width();
|
389
|
+
$sgWrapper.width(origViewportWidth);
|
390
|
+
$sgViewport.width(origViewportWidth - 14);
|
391
|
+
updateSizeReading($sgViewport.width());
|
392
|
+
|
393
|
+
|
394
|
+
|
395
|
+
//Read Hash In URL
|
396
|
+
if(hash === 'hay') {
|
397
|
+
startHay(); ///Start Hay mode if hash says 'hay'
|
398
|
+
} else if(hash === 'disco') {
|
399
|
+
startDisco(); //Start disco mode if hash says 'disco'
|
400
|
+
} else if(hash === 'random') {
|
401
|
+
sizeRandom(); ///Random screen size if hash says 'random'
|
402
|
+
} else if(hash === 'l') {
|
403
|
+
sizeLarge();
|
404
|
+
} else if(hash === 'm') {
|
405
|
+
sizeMedium();
|
406
|
+
} else if(hash === 's') {
|
407
|
+
sizeSmall();
|
408
|
+
} else if(!isNaN(hash) && hash !== '') { //if screen size is a number
|
409
|
+
sizeiframe(parseInt(hash));
|
410
|
+
console.log('this is a number');
|
411
|
+
} else {
|
412
|
+
sizeFull();
|
413
|
+
console.log('this is not a number');
|
414
|
+
}
|
415
|
+
|
416
|
+
})(this);
|
417
|
+
});
|
@@ -0,0 +1,182 @@
|
|
1
|
+
/*!
|
2
|
+
* URL Handler - v0.1
|
3
|
+
*
|
4
|
+
* Copyright (c) 2013 Dave Olsen, http://dmolsen.com
|
5
|
+
* Licensed under the MIT license
|
6
|
+
*
|
7
|
+
* Helps handle the initial iFrame source. Parses a string to see if it matches
|
8
|
+
* an expected pattern in Pattern Lab. Supports Pattern Labs fuzzy pattern partial
|
9
|
+
* matching style.
|
10
|
+
*
|
11
|
+
*/
|
12
|
+
|
13
|
+
var urlHandler = {
|
14
|
+
|
15
|
+
// set-up some default vars
|
16
|
+
skipBack: false,
|
17
|
+
targetOrigin: (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host,
|
18
|
+
|
19
|
+
/**
|
20
|
+
* get the real file name for a given pattern name
|
21
|
+
* @param {String} the shorthand partials syntax for a given pattern
|
22
|
+
*
|
23
|
+
* @return {String} the real file path
|
24
|
+
*/
|
25
|
+
getFileName: function (name) {
|
26
|
+
|
27
|
+
var baseDir = "patterns";
|
28
|
+
var fileName = "";
|
29
|
+
|
30
|
+
if (name == undefined) {
|
31
|
+
return fileName;
|
32
|
+
}
|
33
|
+
|
34
|
+
if (name == "all") {
|
35
|
+
return "styleguide/html/styleguide.html";
|
36
|
+
}
|
37
|
+
|
38
|
+
var paths = (name.indexOf("viewall-") != -1) ? viewAllPaths : patternPaths;
|
39
|
+
nameClean = name.replace("viewall-","");
|
40
|
+
|
41
|
+
// look at this as a regular pattern
|
42
|
+
var bits = this.getPatternInfo(nameClean, paths);
|
43
|
+
var patternType = bits[0];
|
44
|
+
var pattern = bits[1];
|
45
|
+
|
46
|
+
if ((paths[patternType] != undefined) && (paths[patternType][pattern] != undefined)) {
|
47
|
+
|
48
|
+
fileName = paths[patternType][pattern];
|
49
|
+
|
50
|
+
} else if (paths[patternType] != undefined) {
|
51
|
+
|
52
|
+
for (patternMatchKey in paths[patternType]) {
|
53
|
+
if (patternMatchKey.indexOf(pattern) != -1) {
|
54
|
+
fileName = paths[patternType][patternMatchKey];
|
55
|
+
break;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
}
|
60
|
+
|
61
|
+
if (fileName == "") {
|
62
|
+
return fileName;
|
63
|
+
}
|
64
|
+
|
65
|
+
var regex = /\//g;
|
66
|
+
if ((name.indexOf("viewall-") != -1) && (fileName != "")) {
|
67
|
+
fileName = baseDir+"/"+fileName.replace(regex,"-")+"/index.html";
|
68
|
+
} else if (fileName != "") {
|
69
|
+
fileName = baseDir+"/"+fileName.replace(regex,"-")+"/"+fileName.replace(regex,"-")+".html";
|
70
|
+
}
|
71
|
+
|
72
|
+
return fileName;
|
73
|
+
},
|
74
|
+
|
75
|
+
/**
|
76
|
+
* break up a pattern into its parts, pattern type and pattern name
|
77
|
+
* @param {String} the shorthand partials syntax for a given pattern
|
78
|
+
* @param {Object} the paths to be compared
|
79
|
+
*
|
80
|
+
* @return {Array} the pattern type and pattern name
|
81
|
+
*/
|
82
|
+
getPatternInfo: function (name, paths) {
|
83
|
+
|
84
|
+
var patternBits = name.split("-");
|
85
|
+
|
86
|
+
var i = 1;
|
87
|
+
var c = patternBits.length;
|
88
|
+
|
89
|
+
var patternType = patternBits[0];
|
90
|
+
while ((paths[patternType] == undefined) && (i < c)) {
|
91
|
+
patternType += "-"+patternBits[i];
|
92
|
+
i++;
|
93
|
+
}
|
94
|
+
|
95
|
+
pattern = name.slice(patternType.length+1,name.length);
|
96
|
+
|
97
|
+
return [patternType, pattern];
|
98
|
+
|
99
|
+
},
|
100
|
+
|
101
|
+
/**
|
102
|
+
* search the request vars for a particular item
|
103
|
+
*
|
104
|
+
* @return {Object} a search of the window.location.search vars
|
105
|
+
*/
|
106
|
+
getRequestVars: function() {
|
107
|
+
|
108
|
+
// the following is taken from https://developer.mozilla.org/en-US/docs/Web/API/window.location
|
109
|
+
var oGetVars = new (function (sSearch) {
|
110
|
+
if (sSearch.length > 1) {
|
111
|
+
for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) {
|
112
|
+
aItKey = aCouples[nKeyId].split("=");
|
113
|
+
this[unescape(aItKey[0])] = aItKey.length > 1 ? unescape(aItKey[1]) : "";
|
114
|
+
}
|
115
|
+
}
|
116
|
+
})(window.location.search);
|
117
|
+
|
118
|
+
return oGetVars;
|
119
|
+
|
120
|
+
},
|
121
|
+
|
122
|
+
/**
|
123
|
+
* push a pattern onto the current history based on a click
|
124
|
+
* @param {String} the shorthand partials syntax for a given pattern
|
125
|
+
* @param {String} the path given by the loaded iframe
|
126
|
+
*/
|
127
|
+
pushPattern: function (pattern, givenPath) {
|
128
|
+
var data = { "pattern": pattern };
|
129
|
+
var fileName = urlHandler.getFileName(pattern);
|
130
|
+
var expectedPath = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("public/index.html","public/")+fileName;
|
131
|
+
if (givenPath != expectedPath) {
|
132
|
+
// make sure to update the iframe because there was a click
|
133
|
+
document.getElementById("sg-viewport").contentWindow.postMessage( { "path": fileName }, urlHandler.targetOrigin);
|
134
|
+
} else {
|
135
|
+
// add to the history
|
136
|
+
var addressReplacement = (window.location.protocol == "file:") ? null : window.location.protocol+"//"+window.location.host+window.location.pathname.replace("index.html","")+"?p="+pattern;
|
137
|
+
history.pushState(data, null, addressReplacement);
|
138
|
+
document.getElementById("title").innerHTML = "Pattern Lab - "+pattern;
|
139
|
+
document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(pattern));
|
140
|
+
}
|
141
|
+
},
|
142
|
+
|
143
|
+
/**
|
144
|
+
* based on a click forward or backward modify the url and iframe source
|
145
|
+
* @param {Object} event info like state and properties set in pushState()
|
146
|
+
*/
|
147
|
+
popPattern: function (e) {
|
148
|
+
|
149
|
+
var state = e.state;
|
150
|
+
|
151
|
+
if (state == null) {
|
152
|
+
this.skipBack = false;
|
153
|
+
return;
|
154
|
+
} else if (state != null) {
|
155
|
+
var patternName = state.pattern;
|
156
|
+
}
|
157
|
+
|
158
|
+
var iFramePath = "";
|
159
|
+
iFramePath = this.getFileName(patternName);
|
160
|
+
if (iFramePath == "") {
|
161
|
+
iFramePath = "styleguide/html/styleguide.html";
|
162
|
+
}
|
163
|
+
|
164
|
+
document.getElementById("sg-viewport").contentWindow.postMessage( { "path": iFramePath }, urlHandler.targetOrigin);
|
165
|
+
document.getElementById("title").innerHTML = "Pattern Lab - "+patternName;
|
166
|
+
document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(patternName));
|
167
|
+
|
168
|
+
if (wsnConnected) {
|
169
|
+
wsn.send( '{"url": "'+iFramePath+'", "patternpartial": "'+patternName+'" }' );
|
170
|
+
}
|
171
|
+
|
172
|
+
}
|
173
|
+
|
174
|
+
}
|
175
|
+
|
176
|
+
/**
|
177
|
+
* handle the onpopstate event
|
178
|
+
*/
|
179
|
+
window.onpopstate = function (event) {
|
180
|
+
urlHandler.skipBack = true;
|
181
|
+
urlHandler.popPattern(event);
|
182
|
+
}
|