Skip to content

Commit ea6e934

Browse files
djthorpedjthorpe
committed
Updated events
1 parent e636d62 commit ea6e934

File tree

10 files changed

+114
-79
lines changed

10 files changed

+114
-79
lines changed

‎src/component/button/ButtonElement.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
import { LitElement, html, css } from 'lit';
3-
import Event from '../../core/Event';
3+
import { Event } from '../../core/Event';
44

55
/**
66
* A button element

‎src/component/button/CloseButtonElement.js

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,35 @@
1-
21
import { LitElement, html, css } from 'lit';
3-
import Event from '../../core/Event';
2+
import { Event } from '../../core/Event';
43

54
/**
65
* CloseButtonElement
76
*/
87
export class CloseButtonElement extends LitElement {
9-
constructor() {
10-
super();
11-
// Default properties
12-
this.name = 'wc-close';
13-
this.disabled = false;
14-
}
15-
static get properties() {
16-
return {
17-
/**
18-
* Name of the button to use when firing the EVENT_CLICK event
19-
* @type {String}
20-
*/
21-
name: { type: String },
8+
constructor() {
9+
super();
10+
// Default properties
11+
this.name = 'wc-close';
12+
this.disabled = false;
13+
}
14+
15+
static get properties() {
16+
return {
17+
/**
18+
* Name of the button to use when firing the EVENT_CLICK event
19+
* @type {String}
20+
*/
21+
name: { type: String },
22+
23+
/**
24+
* Whether the button is disabled
25+
* @type {Boolean}
26+
*/
27+
disabled: { type: Boolean },
28+
};
29+
}
2230

23-
/**
24-
* Whether the button is disabled
25-
* @type {Boolean}
26-
*/
27-
disabled: { type: Boolean },
28-
};
29-
}
30-
static get styles() {
31-
return css`
31+
static get styles() {
32+
return css`
3233
button {
3334
position: absolute;
3435
top: 0;
@@ -56,23 +57,23 @@ export class CloseButtonElement extends LitElement {
5657
color: var(--button-close-color-disabled);
5758
}
5859
`;
59-
}
60-
render() {
61-
return html`
60+
}
61+
62+
render() {
63+
return html`
6264
<button role="button" ?disabled="${this.disabled}" @click=${this.onClick}>
6365
<wc-icon name="x-lg"></wc-icon>
6466
</button>
6567
`;
66-
}
67-
onClick() {
68-
this.dispatchEvent(new CustomEvent(
69-
Event.EVENT_CLICK, {
70-
bubbles: true,
71-
composed: true,
72-
detail: this.name
73-
},
74-
));
75-
}
68+
}
69+
70+
onClick() {
71+
this.dispatchEvent(new CustomEvent(Event.EVENT_CLICK, {
72+
bubbles: true,
73+
composed: true,
74+
detail: this.name,
75+
}));
76+
}
7677
}
7778

7879
customElements.define('wc-close', CloseButtonElement);

‎src/core/Event.js

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
// Define events used by web components
2-
const EVENT_CLICK = 'js-click';
3-
const EVENT_HOVER = 'js-hover';
4-
const EVENT_START = 'js-start';
5-
const EVENT_DONE = 'js-done';
6-
const EVENT_ERROR = 'js-error';
7-
8-
export default {
9-
EVENT_CLICK, EVENT_HOVER, EVENT_START, EVENT_DONE, EVENT_ERROR,
2+
export const Event = {
3+
EVENT_CLICK: 'ws-click',
4+
EVENT_HOVER: 'ws-hover',
5+
EVENT_START: 'ws-start',
6+
EVENT_DONE: 'ws-done',
7+
EVENT_ERROR: 'ws-error',
108
};

‎src/core/Provider.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Event from './Event';
1+
import { Event } from './Event';
22

33
/**
44
* Provider of data. In general, add provider to the controller using

‎src/esbuild.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
21
window.addEventListener('load', () => {
3-
console.log('esbuild');
4-
new EventSource('/esbuild').addEventListener('change', () => location.reload());
2+
new EventSource('/esbuild').addEventListener('change', () => location.reload());
53
});

‎src/index.html

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,16 +65,32 @@ <h1>Code</h1>
6565
<hr>
6666

6767
<div class="container">
68-
<h1>Tab Group</h1>
68+
<h1>Tab & View Group</h1>
6969
<div style="background-color: #fcfcfc; padding: 5px;">
70-
<wc-tab-group backgroundColor="light">
70+
<wc-tab-group id="controller" backgroundColor="light">
7171
<wc-tab name="tab-tables" selected><wc-icon name="table" size="medium"></wc-icon> Tables</wc-tab>
7272
<wc-tab name="tab-buttons">Buttons</wc-tab>
7373
<wc-tab name="tab-badges">Badges</wc-tab>
7474
<wc-tab name="tab-icons">Icons</wc-tab>
75-
<wc-tab name="tab-disabled" disabled><wc-icon name="person-circle" size="medium"></wc-icon>
76-
Disabled</wc-tab>
75+
<wc-tab name="tab-disabled" disabled><wc-icon name="person-circle" size="medium"></wc-icon> Disabled</wc-tab>
76+
<wc-tab name="tab-buttons">Buttons</wc-tab>
77+
<wc-tab name="tab-badges">Badges</wc-tab>
78+
<wc-tab name="tab-icons">Icons</wc-tab>
7779
</wc-tab-group>
80+
<wc-view-group controller="wc-tab-group#controller" backgroundColor="light">
81+
<wc-view name="tab-tables">
82+
TABLES CONTENT
83+
</wc-view>
84+
<wc-view name="tab-buttons">
85+
BUTTONS CONTENT
86+
</wc-view>
87+
<wc-view name="tab-badges">
88+
BADGES CONTENT
89+
</wc-view>
90+
<wc-view name="tab-icons">
91+
ICONS CONTENT
92+
</wc-view>
93+
</wc-view-group>
7894
</div>
7995
</div>
8096
<hr>

‎src/nav/NavItemElement.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { LitElement, html, css } from 'lit';
2-
import Event from '../core/Event';
2+
import { Event } from '../core/Event';
33

44
/**
55
* NavItemElement

‎src/nav/TabGroupElement.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,4 +172,12 @@ export class TabGroupElement extends LitElement {
172172
}
173173
}
174174
}
175+
176+
hostConnected() {
177+
console.log("hostConnected", this.host);
178+
}
179+
180+
hostDisconnected() {
181+
console.log("hostDiscnnected", this.host);
182+
}
175183
}

‎src/nav/ViewGroupElement.js

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import {
2-
LitElement, html, css, nothing,
3-
} from 'lit';
1+
import { LitElement, html, css, nothing } from 'lit';
2+
import { Event } from '../core/Event';
43

54
/**
65
* ViewGroupElement
@@ -10,7 +9,7 @@ import {
109
* between visible views.
1110
*
1211
* @example
13-
* <wc-view-group>
12+
* <wc-view-group controller="#tabgroup">
1413
* <wc-view name="view1" selected>View1</wc-tab>
1514
* <wc-view name="view2">View2</wc-tab>
1615
* <wc-view name="view3">View3</wc-tab>
@@ -22,42 +21,57 @@ export class ViewGroupElement extends LitElement {
2221
return 'wc-view-group';
2322
}
2423

24+
constructor() {
25+
super();
26+
this.controller = null;
27+
}
28+
2529
static get properties() {
2630
return {
2731
/**
28-
* Whether the tab is selected. Only one tab within a group should
29-
* be selected at a time.
30-
* @type {Boolean}
31-
* @default false
32-
* @memberof TabElement
32+
* The controller selector for the view group.
33+
* This can either be a string selector or a reference to the
34+
* controller element.
35+
* @type {Object}
36+
* @memberof ViewGroupElement
3337
*/
34-
selected: { type: Boolean },
35-
36-
/**
37-
* The name of the tab, for click events.
38-
* @type {String}
39-
* @default ''
40-
* @memberof TabElement
41-
*/
42-
name: { type: String },
38+
controller: {},
4339
};
4440
}
4541

4642
static get styles() {
4743
return css``;
4844
}
4945

46+
// eslint-disable-next-line class-methods-use-this
5047
get className() {
5148
const classes = [];
52-
if (this.selected) {
53-
classes.push('selected');
54-
}
5549
return classes.join(' ');
5650
}
5751

5852
render() {
5953
return html`
60-
<div class=${this.className || nothing}><slot></slot></div>
61-
`;
54+
<div class=${this.className || nothing}><slot></slot></div>
55+
`;
56+
}
57+
58+
// Connect the controller
59+
connectedCallback() {
60+
super.connectedCallback();
61+
62+
if (typeof this.controller === 'string' && this.controller) {
63+
this.controller = this.parentElement.querySelector(this.controller);
64+
}
65+
if (typeof this.controller === 'object') {
66+
this.addController(this.controller);
67+
}
68+
}
69+
70+
// Disconnect the controller
71+
disconnectedCallback() {
72+
super.disconnectedCallback();
73+
if (this.controller) {
74+
this.removeController(this.controller);
75+
}
6276
}
6377
}

‎src/test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
// Core
44
import Provider from './core/Provider';
5-
import Event from './core/Event';
5+
import { Event } from './core/Event';
66

77
// Test
88
window.addEventListener('load', () => {

0 commit comments

Comments
 (0)