Skip to content

Commit d8efd9d

Browse files
bolt-botbolt-bot
committed
chore: remove old UI logic moved into new nav component; update main index.html file to remove old templates no longer used + update to use latest web component tags
1 parent 8555509 commit d8efd9d

File tree

3 files changed

+53
-99
lines changed

3 files changed

+53
-99
lines changed

‎packages/uikit-workshop/src/html/index.html

Lines changed: 48 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,50 @@
11
<!DOCTYPE html>
22
<html class="pl-c-html">
3-
4-
<head>
5-
<title id="title">Pattern Lab</title>
6-
<meta charset="UTF-8">
7-
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
8-
<meta name="theme-color" content="#ababab" />
9-
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
10-
11-
</head>
12-
13-
<body class="pl-c-body">
14-
15-
<pl-layout>
16-
<pl-header></pl-header>
17-
18-
<!-- wrapper so the iframe + modal can switch flex directions in vertical vs horizontal layouts -->
19-
<div class="pl-c-viewport-modal-wrapper">
20-
${require('./partials/iframe.html') }
21-
<pl-drawer></pl-drawer>
22-
</div>
23-
</pl-layout>
24-
25-
26-
27-
<script type="text/mustache" class="pl-js-ish-controls-template">
28-
${require('./partials/controls.html') }
29-
</script>
30-
31-
<!-- the template for the modal slider -->
32-
<script type="text/mustache" class="pl-js-panel-template-base">
33-
${require('./partials/base-template.html') }
34-
</script>
35-
36-
<!-- the template for code-related tabs in the code view slider -->
37-
<script type="text/mustache" id="pl-panel-template-code">
38-
${require('./partials/panel-code-template.html') }
39-
</script>
40-
41-
<!-- load Pattern Lab data -->
42-
<script src="styleguide/data/patternlab-data.js" defer></script>
43-
<script src="annotations/annotations.js" defer></script>
44-
<script src="styleguide/js/patternlab-viewer.js" defer></script>
45-
46-
<script>
47-
// Check that service workers are registered
48-
// @todo: uncomment once cache-busting strategy is in place
49-
// if ('serviceWorker' in navigator) {
50-
// // Use the window load event to keep the page load performant
51-
// window.addEventListener('load', () => {
52-
// navigator.serviceWorker.register('/sw.js');
53-
// });
54-
// }
55-
</script>
56-
57-
58-
</body>
59-
60-
</html>
3+
<head>
4+
<title id="title">Pattern Lab</title>
5+
<meta charset="UTF-8" />
6+
<meta
7+
name="viewport"
8+
content="initial-scale=1, width=device-width, viewport-fit=cover"
9+
/>
10+
<meta name="theme-color" content="#ababab" />
11+
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
12+
</head>
13+
14+
<body class="pl-c-body">
15+
<pl-layout>
16+
<pl-header></pl-header>
17+
18+
<div class="pl-c-viewport-modal-wrapper">
19+
<pl-iframe></pl-iframe>
20+
<pl-drawer></pl-drawer>
21+
</div>
22+
</pl-layout>
23+
24+
<!-- the template for the modal slider -->
25+
<script type="text/mustache" class="pl-js-panel-template-base">
26+
${require('./partials/base-template.html') }
27+
</script>
28+
29+
<!-- the template for code-related tabs in the code view slider -->
30+
<script type="text/mustache" id="pl-panel-template-code">
31+
${require('./partials/panel-code-template.html') }
32+
</script>
33+
34+
<!-- load Pattern Lab data -->
35+
<script src="styleguide/data/patternlab-data.js" defer></script>
36+
<script src="annotations/annotations.js" defer></script>
37+
<script src="styleguide/js/patternlab-viewer.js" defer></script>
38+
39+
<script>
40+
// Check that service workers are registered
41+
// @todo: uncomment once cache-busting strategy is in place
42+
// if ('serviceWorker' in navigator) {
43+
// // Use the window load event to keep the page load performant
44+
// window.addEventListener('load', () => {
45+
// navigator.serviceWorker.register('/sw.js');
46+
// });
47+
// }
48+
</script>
49+
</body>
50+
</html>

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

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -55,31 +55,6 @@ import { urlHandler, DataSaver, patternName } from '../utils';
5555
}
5656
});
5757

58-
59-
// Accordion dropdown
60-
$('.pl-js-acc-handle').on('click', function(e) {
61-
const $this = $(this);
62-
const $panel = $this.next('.pl-js-acc-panel');
63-
const subnav = $this
64-
.parent()
65-
.parent()
66-
.hasClass('pl-js-acc-panel');
67-
68-
//Close other panels if link isn't a subnavigation item
69-
if (!subnav) {
70-
$('.pl-js-acc-handle')
71-
.not($this)
72-
.removeClass('pl-is-active');
73-
$('.pl-js-acc-panel')
74-
.not($panel)
75-
.removeClass('pl-is-active');
76-
}
77-
78-
//Activate selected panel
79-
$this.toggleClass('pl-is-active');
80-
$panel.toggleClass('pl-is-active');
81-
});
82-
8358
//Size View Events
8459

8560
// handle small button
@@ -537,14 +512,6 @@ import { urlHandler, DataSaver, patternName } from '../utils';
537512
);
538513
}
539514

540-
// Open in new window link
541-
if (document.querySelector('.pl-js-open-new-window')) {
542-
// Set value of href to the path to the pattern
543-
document
544-
.querySelector('.pl-js-open-new-window')
545-
.setAttribute('href', urlHandler.getFileName(patternName));
546-
}
547-
548515
urlHandler.skipBack = true;
549516
document
550517
.querySelector('.pl-js-iframe')

‎packages/uikit-workshop/src/scripts/patternlab-viewer.js

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
11
import { loadPolyfills } from './utils/polyfills';
22

33
loadPolyfills.then(res => {
4-
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-layout' */ './components/pl-layout/pl-layout').then(
5-
() => {
6-
// this ensures that the old-school way the styleguide JS binds to the page isn't thrown off by the <pl-layout> component rendering -- temp workaround till the logic in styleguide.js gets broken down and refactored.
7-
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-styleguide' */ './components/styleguide');
8-
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-drawer' */ './components/pl-drawer/pl-drawer');
9-
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-modal-viewer' */ './components/modal-viewer');
10-
}
11-
);
4+
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-layout' */ './components/pl-layout/pl-layout');
125
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-controls' */ './components/pl-controls/pl-controls');
6+
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-drawer' */ './components/pl-drawer/pl-drawer');
137
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-header' */ './components/pl-header/pl-header');
8+
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-iframe' */ './components/pl-viewport/pl-viewport');
149
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-nav' */ './components/pl-nav/pl-nav');
1510
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-search' */ './components/pl-search/pl-search');
1611
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-info' */ './components/pl-toggle-info/pl-toggle-info');
1712
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-layout' */ './components/pl-toggle-layout/pl-toggle-layout');
1813
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-theme' */ './components/pl-toggle-theme/pl-toggle-theme');
1914
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-tools-menu' */ './components/pl-tools-menu/pl-tools-menu');
15+
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-styleguide' */ './components/styleguide');
16+
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-modal-viewer' */ './components/modal-viewer');
2017
});
2118

2219
import './components/panels';

0 commit comments

Comments
 (0)