Skip to content

Commit d7bc445

Browse files
bolt-botbolt-bot
committed
refactor: clean up and split apart the original controls component / template into smaller standalone pieces
1 parent b33d0cd commit d7bc445

File tree

7 files changed

+220
-85
lines changed

7 files changed

+220
-85
lines changed

‎packages/uikit-workshop/src/html/partials/controls.html

Lines changed: 0 additions & 85 deletions
This file was deleted.

‎packages/uikit-workshop/src/scripts/components/pl-controls/pl-controls.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { define, props } from 'skatejs';
2+
import { h } from 'preact';
3+
const classNames = require('classnames');
4+
import { urlHandler, patternName } from '../../utils';
5+
6+
import { store } from '../../store.js'; // connect to redux
7+
import { BaseComponent } from '../base-component.js';
8+
9+
import { ViewportSize } from '../pl-viewport-size/pl-viewport-size';
10+
import { ViewportSizeList } from '../pl-viewport-size-list/pl-viewport-size-list';
11+
12+
@define
13+
class Controls extends BaseComponent {
14+
static is = 'pl-controls';
15+
16+
constructor(self) {
17+
self = super(self);
18+
this.useShadow = false;
19+
return self;
20+
}
21+
22+
_stateChanged(state) {}
23+
24+
render() {
25+
const { ishControlsHide } = window.ishControls;
26+
27+
return (
28+
<div className="pl-c-controls">
29+
<ViewportSize />
30+
<ViewportSizeList {...ishControlsHide} />
31+
<pl-tools-menu />
32+
</div>
33+
);
34+
}
35+
}
36+
37+
export { Controls };

‎packages/uikit-workshop/src/scripts/components/pl-tools-menu/pl-tools-menu.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { define, props } from 'skatejs';
2+
import { BaseComponent } from '../base-component.js';
3+
import { urlHandler, patternName } from '../../utils';
4+
import { h } from 'preact';
5+
6+
@define
7+
class ToolsMenu extends BaseComponent {
8+
static is = 'pl-tools-menu';
9+
10+
_stateChanged(state) {}
11+
12+
constructor() {
13+
super();
14+
this.handleClick = this.handleClick.bind(this);
15+
}
16+
17+
connecting() {
18+
const { ishControlsHide } = window.ishControls;
19+
this.ishControlsHide = ishControlsHide;
20+
}
21+
22+
handleClick(e) {
23+
const elem = e.target.closest('.pl-js-acc-handle');
24+
const panel = elem.nextSibling;
25+
26+
// Activate selected panel
27+
elem.classList.toggle('pl-is-active');
28+
panel.classList.toggle('pl-is-active');
29+
}
30+
31+
render() {
32+
const patternPath = urlHandler.getFileName(patternName);
33+
34+
return (
35+
<div class="pl-c-tools">
36+
<button
37+
class="pl-c-tools__toggle pl-js-acc-handle"
38+
title="Tools"
39+
onClick={this.handleClick}
40+
>
41+
<svg
42+
class="pl-c-tools__toggle-icon"
43+
version="1.1"
44+
xmlns="http://www.w3.org/2000/svg"
45+
width="14"
46+
height="14"
47+
viewBox="0 0 14 14"
48+
>
49+
<title>Pattern Lab Tools</title>
50+
<path
51+
fill="currentColor"
52+
d="M12.767 8.343c-0.735-1.272-0.293-2.903 0.986-3.643l-1.376-2.383c-0.393 0.23-0.85 0.363-1.338 0.363-1.47 0-2.662-1.2-2.662-2.68h-2.752c0.004 0.457-0.11 0.92-0.355 1.343-0.735 1.272-2.367 1.705-3.649 0.967l-1.376 2.383c0.396 0.225 0.739 0.555 0.983 0.977 0.733 1.27 0.294 2.897-0.98 3.64l1.376 2.383c0.392-0.228 0.847-0.359 1.332-0.359 1.466 0 2.654 1.192 2.662 2.665h2.752c-0.001-0.452 0.113-0.91 0.355-1.329 0.733-1.27 2.362-1.703 3.642-0.971l1.376-2.383c-0.393-0.225-0.734-0.554-0.977-0.974zM7 9.835c-1.566 0-2.835-1.269-2.835-2.835s1.269-2.835 2.835-2.835c1.566 0 2.835 1.269 2.835 2.835s-1.269 2.835-2.835 2.835z"
53+
/>
54+
</svg>
55+
</button>
56+
<ul class="pl-c-tools__list pl-js-acc-panel">
57+
<li class="pl-c-tools__item">
58+
<pl-toggle-info />
59+
</li>
60+
<li class="pl-c-tools__item">
61+
<pl-toggle-layout text="Switch Layout" />
62+
</li>
63+
<li class="pl-c-tools__item">
64+
<pl-toggle-theme />
65+
</li>
66+
67+
{!this.ishControlsHide['views-new'] && (
68+
<li class="pl-c-tools__item">
69+
<a
70+
href={patternPath}
71+
class="pl-c-tools__action pl-js-open-new-window"
72+
target="_blank"
73+
>
74+
Open In New Tab
75+
</a>
76+
</li>
77+
)}
78+
79+
{!this.ishControlsHide['tools-docs'] && (
80+
<li class="pl-c-tools__item">
81+
<a
82+
href="http://patternlab.io/docs/"
83+
class="pl-c-tools__action"
84+
target="_blank"
85+
>
86+
Pattern Lab Docs
87+
</a>
88+
</li>
89+
)}
90+
</ul>
91+
</div>
92+
);
93+
}
94+
}

‎packages/uikit-workshop/src/scripts/components/pl-tools-menu/pl-tools-menu.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
#TOOLS
33
\*------------------------------------*/
44

5+
pl-tools-menu {
6+
display: flex;
7+
}
8+
59
/**
610
* The tools dropdown contains more utilities such as show/hide
711
* pattern info and pattern search, and also links to open in a

‎packages/uikit-workshop/src/scripts/components/pl-viewport-size-list/pl-viewport-size-list.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { h } from 'preact';
2+
3+
export const ViewportSizeList = ishControlsHide => {
4+
return (
5+
<ul class="pl-c-size-list">
6+
{!ishControlsHide.s && (
7+
<li class="pl-c-size-list__item">
8+
<button class="pl-c-size-list__action" id="pl-size-s">
9+
S
10+
</button>
11+
</li>
12+
)}
13+
{!ishControlsHide.m && (
14+
<li class="pl-c-size-list__item">
15+
<button class="pl-c-size-list__action" id="pl-size-m">
16+
M
17+
</button>
18+
</li>
19+
)}
20+
{!ishControlsHide.l && (
21+
<li class="pl-c-size-list__item">
22+
<button class="pl-c-size-list__action" id="pl-size-l">
23+
L
24+
</button>
25+
</li>
26+
)}
27+
{!ishControlsHide.full && (
28+
<li class="pl-c-size-list__item">
29+
<button class="pl-c-size-list__action" id="pl-size-full">
30+
Full
31+
</button>
32+
</li>
33+
)}
34+
{!ishControlsHide.random && (
35+
<li class="pl-c-size-list__item">
36+
<button class="pl-c-size-list__action" id="pl-size-random">
37+
Rand
38+
</button>
39+
</li>
40+
)}
41+
{!ishControlsHide.disco && (
42+
<li class="pl-c-size-list__item">
43+
<button class="pl-c-size-list__action mode-link" id="pl-size-disco">
44+
Disco
45+
</button>
46+
</li>
47+
)}
48+
{!ishControlsHide.hay && (
49+
<li class="pl-c-size-list__item">
50+
<button class="pl-c-size-list__action mode-link" id="pl-size-hay">
51+
Hay!
52+
</button>
53+
</li>
54+
)}
55+
</ul>
56+
);
57+
};

‎packages/uikit-workshop/src/scripts/components/pl-viewport-size/pl-viewport-size.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { h } from 'preact';
2+
3+
export const ViewportSize = ishControlsHide => {
4+
return (
5+
<form className="pl-c-viewport-size" method="post" action="#">
6+
<input
7+
type="text"
8+
className="pl-c-viewport-size__input"
9+
id="pl-size-px"
10+
value="---"
11+
/>
12+
<label for="pl-size-px" className="pl-c-viewport-size__label">
13+
px /
14+
</label>
15+
<input
16+
type="text"
17+
className="pl-c-viewport-size__input"
18+
id="pl-size-em"
19+
value="---"
20+
/>
21+
<label for="pl-size-em" className="pl-c-viewport-size__label">
22+
em
23+
</label>
24+
</form>
25+
);
26+
};

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@ loadPolyfills.then(res => {
99
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-modal-viewer' */ './components/modal-viewer');
1010
}
1111
);
12+
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-controls' */ './components/pl-controls/pl-controls');
1213
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-header' */ './components/pl-header/pl-header');
1314
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-nav' */ './components/pl-nav/pl-nav');
1415
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-search' */ './components/pl-search/pl-search');
1516
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-info' */ './components/pl-toggle-info/pl-toggle-info');
1617
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-layout' */ './components/pl-toggle-layout/pl-toggle-layout');
1718
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-toggle-theme' */ './components/pl-toggle-theme/pl-toggle-theme');
19+
import(/* webpackMode: 'lazy', webpackChunkName: 'pl-tools-menu' */ './components/pl-tools-menu/pl-tools-menu');
1820
});
1921

2022
import './components/panels';

0 commit comments

Comments
 (0)