Skip to content

Commit 8e6d824

Browse files
sghowerisghoweri
committed
refactor: cleanup and refactor 1st half of styleguide.js
1 parent a796787 commit 8e6d824

1 file changed

Lines changed: 66 additions & 67 deletions

File tree

‎packages/uikit-workshop/src/scripts/components/styleguide.js‎

Lines changed: 66 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -8,50 +8,48 @@ import { urlHandler, DataSaver } from '../utils';
88
import { patternFinder } from './pattern-finder';
99

1010
(function(w) {
11-
var sw = document.body.clientWidth, //Viewport Width
12-
sh = $(document).height(); //Viewport Height
11+
let sw = document.body.clientWidth; //Viewport Width
1312

14-
var minViewportWidth = 240;
15-
var maxViewportWidth = 2600;
13+
let minViewportWidth = 240;
14+
let maxViewportWidth = 2600;
1615

1716
//set minimum and maximum viewport based on confg
18-
if (config.ishMinimum !== undefined) {
19-
minViewportWidth = parseInt(config.ishMinimum); //Minimum Size for Viewport
17+
if (window.config.ishMinimum !== undefined) {
18+
minViewportWidth = parseInt(window.config.ishMinimum, 10); //Minimum Size for Viewport
2019
}
21-
if (config.ishMaximum !== undefined) {
22-
maxViewportWidth = parseInt(config.ishMaximum); //Maxiumum Size for Viewport
20+
if (window.config.ishMaximum !== undefined) {
21+
maxViewportWidth = parseInt(window.config.ishMaximum, 10); //Maxiumum Size for Viewport
2322
}
2423

2524
//alternatively, use the ishViewportRange object
26-
if (config.ishViewportRange !== undefined) {
27-
minViewportWidth = config.ishViewportRange.s[0];
28-
maxViewportWidth = config.ishViewportRange.l[1];
25+
if (window.config.ishViewportRange !== undefined) {
26+
minViewportWidth = window.config.ishViewportRange.s[0];
27+
maxViewportWidth = window.config.ishViewportRange.l[1];
2928
}
3029

3130
//if both are set, then let's use the larger one.
32-
if (config.ishViewportRange && config.ishMaximum) {
33-
var largeRange = parseInt(config.ishViewportRange.l[1]);
34-
var ishMaximum = parseInt(config.ishMaximum);
31+
if (window.config.ishViewportRange && window.config.ishMaximum) {
32+
const largeRange = parseInt(window.config.ishViewportRange.l[1], 10);
33+
const ishMaximum = parseInt(window.config.ishMaximum, 10);
3534
maxViewportWidth = largeRange > ishMaximum ? largeRange : ishMaximum;
3635
}
3736

38-
var viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
39-
$sgIframe = $('.pl-js-iframe'), //Viewport element
40-
$sizePx = $('#pl-size-px'), //Px size input element in toolbar
41-
$sizeEms = $('#pl-size-em'), //Em size input element in toolbar
42-
$bodySize =
43-
config.ishFontSize !== undefined
44-
? parseInt(config.ishFontSize)
45-
: parseInt($('body').css('font-size')), //Body size of the document
46-
discoID = false,
47-
discoMode = false,
48-
fullMode = true,
49-
hayMode = false;
37+
const viewportResizeHandleWidth = 14; //Width of the viewport drag-to-resize handle
38+
const $sgIframe = $('.pl-js-iframe'); //Viewport element
39+
const $sizePx = $('#pl-size-px'); //Px size input element in toolbar
40+
const $sizeEms = $('#pl-size-em'); //Em size input element in toolbar
41+
const $bodySize =
42+
window.config.ishFontSize !== undefined
43+
? parseInt(window.config.ishFontSize, 10)
44+
: parseInt($('body').css('font-size'), 10); //Body size of the document
45+
let discoID = false;
46+
let discoMode = false;
47+
let fullMode = true;
48+
let hayMode = false;
5049

5150
//Update dimensions on resize
5251
$(w).resize(function() {
5352
sw = document.body.clientWidth;
54-
sh = $(document).height();
5553

5654
if (fullMode === true) {
5755
sizeiframe(sw, false);
@@ -68,12 +66,12 @@ import { patternFinder } from './pattern-finder';
6866
$('.pl-js-acc-handle').on('click', function(e) {
6967
e.preventDefault();
7068

71-
var $this = $(this),
72-
$panel = $this.next('.pl-js-acc-panel'),
73-
subnav = $this
74-
.parent()
75-
.parent()
76-
.hasClass('pl-js-acc-panel');
69+
const $this = $(this);
70+
const $panel = $this.next('.pl-js-acc-panel');
71+
const subnav = $this
72+
.parent()
73+
.parent()
74+
.hasClass('pl-js-acc-panel');
7775

7876
//Close other panels if link isn't a subnavigation item
7977
if (!subnav) {
@@ -100,8 +98,8 @@ import { patternFinder } from './pattern-finder';
10098
sizeiframe(
10199
getRandom(
102100
minViewportWidth,
103-
config.ishViewportRange !== undefined
104-
? parseInt(config.ishViewportRange.s[1])
101+
window.config.ishViewportRange !== undefined
102+
? parseInt(window.config.ishViewportRange.s[1], 10)
105103
: 500
106104
)
107105
);
@@ -124,11 +122,11 @@ import { patternFinder } from './pattern-finder';
124122
fullMode = false;
125123
sizeiframe(
126124
getRandom(
127-
config.ishViewportRange !== undefined
128-
? parseInt(config.ishViewportRange.m[0])
125+
window.config.ishViewportRange !== undefined
126+
? parseInt(window.config.ishViewportRange.m[0], 10)
129127
: 500,
130-
config.ishViewportRange !== undefined
131-
? parseInt(config.ishViewportRange.m[1])
128+
window.config.ishViewportRange !== undefined
129+
? parseInt(window.config.ishViewportRange.m[1], 10)
132130
: 800
133131
)
134132
);
@@ -151,8 +149,8 @@ import { patternFinder } from './pattern-finder';
151149
fullMode = false;
152150
sizeiframe(
153151
getRandom(
154-
config.ishViewportRange !== undefined
155-
? parseInt(config.ishViewportRange.l[0])
152+
window.config.ishViewportRange !== undefined
153+
? parseInt(window.config.ishViewportRange.l[0], 10)
156154
: 800,
157155
maxViewportWidth
158156
)
@@ -239,7 +237,7 @@ import { patternFinder } from './pattern-finder';
239237

240238
//Stop Hay! Mode
241239
function killHay() {
242-
var currentWidth = $sgIframe.width();
240+
const currentWidth = $sgIframe.width();
243241
hayMode = false;
244242
$sgIframe.removeClass('hay-mode');
245243
$('.pl-js-vp-iframe-container').removeClass('hay-mode');
@@ -254,14 +252,14 @@ import { patternFinder } from './pattern-finder';
254252
.width(minViewportWidth + viewportResizeHandleWidth);
255253
$sgIframe.removeClass('vp-animate').width(minViewportWidth);
256254

257-
var timeoutID = window.setTimeout(function() {
255+
const timeoutID = window.setTimeout(function() {
258256
$('.pl-js-vp-iframe-container')
259257
.addClass('hay-mode')
260258
.width(maxViewportWidth + viewportResizeHandleWidth);
261259
$sgIframe.addClass('hay-mode').width(maxViewportWidth);
262260

263261
setInterval(function() {
264-
var vpSize = $sgIframe.width();
262+
const vpSize = $sgIframe.width();
265263
updateSizeReading(vpSize);
266264
}, 100);
267265
}, 200);
@@ -278,7 +276,7 @@ import { patternFinder } from './pattern-finder';
278276

279277
//Pixel input
280278
$sizePx.on('keydown', function(e) {
281-
var val = Math.floor($(this).val());
279+
let val = Math.floor($(this).val());
282280

283281
if (e.keyCode === 38) {
284282
//If the up arrow key is hit
@@ -297,13 +295,13 @@ import { patternFinder } from './pattern-finder';
297295
});
298296

299297
$sizePx.on('keyup', function() {
300-
var val = Math.floor($(this).val());
298+
const val = Math.floor($(this).val());
301299
updateSizeReading(val, 'px', 'updateEmInput');
302300
});
303301

304302
//Em input
305303
$sizeEms.on('keydown', function(e) {
306-
var val = parseFloat($(this).val());
304+
let val = parseFloat($(this).val());
307305

308306
if (e.keyCode === 38) {
309307
//If the up arrow key is hit
@@ -321,7 +319,7 @@ import { patternFinder } from './pattern-finder';
321319
});
322320

323321
$sizeEms.on('keyup', function() {
324-
var val = parseFloat($(this).val());
322+
const val = parseFloat($(this).val());
325323
updateSizeReading(val, 'em', 'updatePxInput');
326324
});
327325

@@ -485,9 +483,10 @@ import { patternFinder } from './pattern-finder';
485483
var origViewportWidth = $('.pl-js-iframe').width();
486484
$('.pl-js-vp-iframe-container').width(origViewportWidth);
487485

488-
var testWidth = screen.width;
486+
var testWidth = window.screen.width;
489487
if (window.orientation !== undefined) {
490-
testWidth = window.orientation === 0 ? screen.width : screen.height;
488+
testWidth =
489+
window.orientation === 0 ? window.screen.width : window.screen.height;
491490
}
492491
if (
493492
$(window).width() == testWidth &&
@@ -530,10 +529,10 @@ import { patternFinder } from './pattern-finder';
530529
window.location.host +
531530
window.location.pathname.replace('index.html', '');
532531
var patternName =
533-
config.defaultPattern !== undefined &&
534-
typeof config.defaultPattern === 'string' &&
535-
config.defaultPattern.trim().length > 0
536-
? config.defaultPattern
532+
window.config.defaultPattern !== undefined &&
533+
typeof window.config.defaultPattern === 'string' &&
534+
window.config.defaultPattern.trim().length > 0
535+
? window.config.defaultPattern
537536
: 'all';
538537
var iFramePath =
539538
baseIframePath + 'styleguide/html/styleguide.html?' + Date.now();
@@ -548,7 +547,7 @@ import { patternFinder } from './pattern-finder';
548547
? baseIframePath + patternPath + '?' + Date.now()
549548
: iFramePath;
550549
document.getElementById('title').innerHTML = 'Pattern Lab - ' + patternName;
551-
history.replaceState(
550+
window.history.replaceState(
552551
{
553552
pattern: patternName,
554553
},
@@ -604,7 +603,7 @@ import { patternFinder } from './pattern-finder';
604603
window.addEventListener(
605604
'orientationchange',
606605
function() {
607-
if (window.orientation != origOrientation) {
606+
if (window.orientation !== origOrientation) {
608607
$('.pl-js-vp-iframe-container').width($(window).width());
609608
$('.pl-js-iframe').width($(window).width());
610609
updateSizeReading($(window).width());
@@ -633,12 +632,12 @@ import { patternFinder } from './pattern-finder';
633632
} catch (e) {}
634633

635634
if (data.event !== undefined) {
636-
if (data.event == 'patternLab.pageLoad') {
635+
if (data.event === 'patternLab.pageLoad') {
637636
if (!urlHandler.skipBack) {
638637
if (
639-
history.state === undefined ||
640-
history.state === null ||
641-
history.state.pattern !== data.patternpartial
638+
window.history.state === undefined ||
639+
window.history.state === null ||
640+
window.history.state.pattern !== data.patternpartial
642641
) {
643642
urlHandler.pushPattern(data.patternpartial, data.path);
644643
}
@@ -653,26 +652,26 @@ import { patternFinder } from './pattern-finder';
653652

654653
// reset the defaults
655654
urlHandler.skipBack = false;
656-
} else if (data.event == 'patternLab.keyPress') {
657-
if (data.keyPress == 'ctrl+shift+s') {
655+
} else if (data.event === 'patternLab.keyPress') {
656+
if (data.keyPress === 'ctrl+shift+s') {
658657
goSmall();
659-
} else if (data.keyPress == 'ctrl+shift+m') {
658+
} else if (data.keyPress === 'ctrl+shift+m') {
660659
goMedium();
661-
} else if (data.keyPress == 'ctrl+shift+l') {
660+
} else if (data.keyPress === 'ctrl+shift+l') {
662661
goLarge();
663-
} else if (data.keyPress == 'ctrl+shift+d') {
662+
} else if (data.keyPress === 'ctrl+shift+d') {
664663
if (!discoMode) {
665664
startDisco();
666665
} else {
667666
killDisco();
668667
}
669-
} else if (data.keyPress == 'ctrl+shift+h') {
668+
} else if (data.keyPress === 'ctrl+shift+h') {
670669
if (!hayMode) {
671670
startHay();
672671
} else {
673672
killHay();
674673
}
675-
} else if (data.keyPress == 'ctrl+shift+0') {
674+
} else if (data.keyPress === 'ctrl+shift+0') {
676675
sizeiframe(320, true);
677676
} else if (found == data.keyPress.match(/ctrl\+shift\+([1-9])/)) {
678677
var val = mqs[found[1] - 1];

0 commit comments

Comments
 (0)