Skip to content

Commit 366c29f

Browse files
djthorpedjthorpe
committed
Updated controller
1 parent ea6e934 commit 366c29f

File tree

6 files changed

+119
-121
lines changed

6 files changed

+119
-121
lines changed

‎src/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ <h1>Code</h1>
6767
<div class="container">
6868
<h1>Tab & View Group</h1>
6969
<div style="background-color: #fcfcfc; padding: 5px;">
70-
<wc-tab-group id="controller" backgroundColor="light">
70+
<wc-tab-group id="tab-group" 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>
@@ -77,7 +77,7 @@ <h1>Tab & View Group</h1>
7777
<wc-tab name="tab-badges">Badges</wc-tab>
7878
<wc-tab name="tab-icons">Icons</wc-tab>
7979
</wc-tab-group>
80-
<wc-view-group controller="wc-tab-group#controller" backgroundColor="light">
80+
<wc-view-group id="view-group" backgroundColor="light">
8181
<wc-view name="tab-tables">
8282
TABLES CONTENT
8383
</wc-view>

‎src/nav/TabGroupElement.js

Lines changed: 12 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import {
2-
LitElement, html, css, nothing,
3-
} from 'lit';
4-
import { TabElement } from './TabElement';
1+
import { LitElement, html, css, nothing } from 'lit';
2+
import { Event } from '../core/Event';
53

64
/**
75
* TabGroupElement
@@ -133,21 +131,18 @@ export class TabGroupElement extends LitElement {
133131

134132
render() {
135133
return html`
136-
<ul class=${this.className || nothing}><slot></slot></ul>
134+
<ul class=${this.className || nothing} @click=${this.onClick}><slot></slot></ul>
137135
`;
138136
}
139137

140-
firstUpdated() {
141-
this.addEventListener(Event.EVENT_CLICK, (evt) => this.onClick(evt));
142-
}
143-
144138
/**
145139
* Select a tab by name, and deselect all other tabs
146140
* @param {String} name: The name of the tab to select
147141
* @returns The node that was selected, or null
148142
*/
149-
select(name) {
143+
select(target) {
150144
const tabs = this.querySelectorAll('wc-tab');
145+
const name = target.name || target.textContent;
151146
let selectedNode = null;
152147
tabs.forEach((tab) => {
153148
if (tab.name === name && !tab.selected) {
@@ -161,23 +156,13 @@ export class TabGroupElement extends LitElement {
161156
}
162157

163158
onClick(event) {
164-
if (event.target && event.target.name) {
165-
const selected = this.select(event.target.name);
166-
if (selected) {
167-
this.dispatchEvent(new CustomEvent(Event.EVENT_CLICK, {
168-
bubbles: true,
169-
composed: true,
170-
detail: selected.name || selected.textContent,
171-
}));
172-
}
159+
const selected = this.select(event.target);
160+
if (selected) {
161+
this.dispatchEvent(new CustomEvent(Event.EVENT_CLICK, {
162+
bubbles: true,
163+
composed: true,
164+
detail: selected.name || selected.textContent,
165+
}));
173166
}
174167
}
175-
176-
hostConnected() {
177-
console.log("hostConnected", this.host);
178-
}
179-
180-
hostDisconnected() {
181-
console.log("hostDiscnnected", this.host);
182-
}
183168
}

‎src/nav/ViewController.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { LitElement } from 'lit';
2+
import { Event } from '../core/Event';
3+
4+
/**
5+
* ViewController
6+
* This class is used to reflect changes in hosts to keep them
7+
* in sync with each other.
8+
*/
9+
export class ViewController {
10+
#hosts = [];
11+
12+
constructor(...hosts) {
13+
// Add the hosts
14+
hosts.forEach((host) => {
15+
if (host instanceof LitElement) {
16+
console.log('ViewController', host);
17+
this.#hosts.push(host);
18+
host.addController(this);
19+
20+
// Listen for events
21+
host.addEventListener(Event.EVENT_CLICK, (event) => {
22+
this.select(event.target, event.detail);
23+
});
24+
}
25+
});
26+
}
27+
28+
select(sender, name) {
29+
this.#hosts.forEach((host) => {
30+
if (host !== sender && host.select) {
31+
host.select(name);
32+
}
33+
});
34+
}
35+
}

‎src/nav/ViewGroupElement.js

Lines changed: 4 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,8 @@ export class ViewGroupElement extends LitElement {
2121
return 'wc-view-group';
2222
}
2323

24-
constructor() {
25-
super();
26-
this.controller = null;
27-
}
28-
2924
static get properties() {
30-
return {
31-
/**
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
37-
*/
38-
controller: {},
39-
};
25+
return {};
4026
}
4127

4228
static get styles() {
@@ -55,23 +41,8 @@ export class ViewGroupElement extends LitElement {
5541
`;
5642
}
5743

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-
}
44+
select(name) {
45+
// TODO
46+
console.log('select', this, name);
7647
}
7748
}

‎src/nav/nav.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// CSS
22
import './nav.css';
33

4-
// Web Components
4+
// Classes
55
import { NavBarElement } from './NavBarElement';
66
import { NavElement } from './NavElement';
77
import { NavItemElement } from './NavItemElement';
@@ -13,6 +13,7 @@ import { TabElement } from './TabElement';
1313
import { TabGroupElement } from './TabGroupElement';
1414
import { ViewElement } from './ViewElement';
1515
import { ViewGroupElement } from './ViewGroupElement';
16+
import { ViewController } from './ViewController';
1617

1718
// Web Components
1819
customElements.define(NavBarElement.localName, NavBarElement); // wc-navbar

‎src/test.js

Lines changed: 64 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,78 @@
1-
2-
31
// Core
42
import Provider from './core/Provider';
53
import { Event } from './core/Event';
4+
import { ViewController } from './nav/ViewController.js';
65

76
// Test
87
window.addEventListener('load', () => {
9-
// Button Group
10-
document.querySelector('wc-button-group').addEventListener(Event.EVENT_CLICK, (evt) => {
11-
console.log("Button Group Click", evt.detail);
12-
});
8+
// Tab View Controller
9+
// eslint-disable-next-line no-new
10+
new ViewController(
11+
document.querySelector('wc-tab-group#tab-group'),
12+
document.querySelector('wc-view-group#view-group'),
13+
);
1314

14-
// Card
15-
document.querySelector('.wc-card').addEventListener(Event.EVENT_CLICK, (evt) => {
16-
console.log("Card Click", evt.detail);
17-
});
15+
// Button Group
16+
document.querySelector('wc-button-group').addEventListener(Event.EVENT_CLICK, (evt) => {
17+
console.log("Button Group Click", evt.detail);
18+
});
1819

19-
// Provider
20-
var p = new Provider("http://localhost:8000/");
21-
p.addEventListener(Event.EVENT_ERROR, (evt) => {
22-
console.log("Got error:", evt);
23-
});
24-
p.addEventListener(Event.EVENT_START, (evt) => {
25-
console.log("START", evt.detail);
26-
});
27-
p.addEventListener(Event.EVENT_DONE, (evt) => {
28-
console.log("DONE", evt.detail);
29-
});
30-
p.fetch("/", {});
20+
// Card
21+
document.querySelector('.wc-card').addEventListener(Event.EVENT_CLICK, (evt) => {
22+
console.log("Card Click", evt.detail);
23+
});
3124

32-
// Buttons
33-
document.querySelectorAll('wc-button').forEach((button) => {
34-
button.addEventListener(Event.EVENT_CLICK, (evt) => {
35-
switch (evt.detail) {
36-
case "modal":
37-
document.querySelector('wc-modal').toggle();
38-
break;
39-
default:
40-
console.log("Button Click", evt.detail);
41-
}
42-
});
43-
});
25+
// Provider
26+
var p = new Provider("http://localhost:8000/");
27+
p.addEventListener(Event.EVENT_ERROR, (evt) => {
28+
console.log("Got error:", evt);
29+
});
30+
p.addEventListener(Event.EVENT_START, (evt) => {
31+
console.log("START", evt.detail);
32+
});
33+
p.addEventListener(Event.EVENT_DONE, (evt) => {
34+
console.log("DONE", evt.detail);
35+
});
36+
p.fetch("/", {});
4437

45-
// Close Modal
46-
document.querySelector('wc-modal').addEventListener(Event.EVENT_CLICK, (evt) => {
47-
if (evt.detail == "modal-close") {
48-
document.querySelector('wc-modal').hide();
49-
}
50-
});
51-
document.querySelector('wc-sidemodal').addEventListener(Event.EVENT_CLICK, (evt) => {
52-
if (evt.detail == "modal-close") {
53-
document.querySelector('wc-sidemodal').hide();
54-
}
38+
// Buttons
39+
document.querySelectorAll('wc-button').forEach((button) => {
40+
button.addEventListener(Event.EVENT_CLICK, (evt) => {
41+
switch (evt.detail) {
42+
case "modal":
43+
document.querySelector('wc-modal').toggle();
44+
break;
45+
default:
46+
console.log("Button Click", evt.detail);
47+
}
5548
});
49+
});
50+
51+
// Close Modal
52+
document.querySelector('wc-modal').addEventListener(Event.EVENT_CLICK, (evt) => {
53+
if (evt.detail == "modal-close") {
54+
document.querySelector('wc-modal').hide();
55+
}
56+
});
57+
document.querySelector('wc-sidemodal').addEventListener(Event.EVENT_CLICK, (evt) => {
58+
if (evt.detail == "modal-close") {
59+
document.querySelector('wc-sidemodal').hide();
60+
}
61+
});
5662

57-
// NavItem
58-
document.querySelectorAll('wc-nav-item').forEach((navitem) => {
59-
navitem.addEventListener(Event.EVENT_CLICK, (evt) => {
60-
switch (evt.detail) {
61-
case "menu":
62-
document.querySelector('wc-sidemodal').toggle();
63-
break;
64-
case 'help':
65-
document.querySelector('wc-sidemodal').toggle();
66-
break;
67-
default:
68-
console.log("NavItem Click", evt.detail);
69-
}
70-
});
63+
// NavItem
64+
document.querySelectorAll('wc-nav-item').forEach((navitem) => {
65+
navitem.addEventListener(Event.EVENT_CLICK, (evt) => {
66+
switch (evt.detail) {
67+
case "menu":
68+
document.querySelector('wc-sidemodal').toggle();
69+
break;
70+
case 'help':
71+
document.querySelector('wc-sidemodal').toggle();
72+
break;
73+
default:
74+
console.log("NavItem Click", evt.detail);
75+
}
7176
});
77+
});
7278
});

0 commit comments

Comments
 (0)