Skip to content

Commit d580797

Browse files
prushforthprushforyhy0217Jacky0299kevinkim31
authored
Add ce boilerplate (#799)
* Add extent,input and link template custom elements * Add empty templates for select, meta and geometry * map-a and map-feature templates * add properties,span,style * Fix lint / JSHint messages --------- Co-authored-by: prushfor <[email protected]> Co-authored-by: yhy0217 <[email protected]> Co-authored-by: Jacky0299 <[email protected]> Co-authored-by: Kevin Kim <[email protected]>
1 parent c3cc162 commit d580797

File tree

11 files changed

+667
-0
lines changed

11 files changed

+667
-0
lines changed

‎src/map-a.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
export class MapA extends HTMLElement {
2+
static get observedAttributes() {
3+
return ['href','target','type','inplace'];
4+
}
5+
get href() {
6+
return this.hasAttribute('href') ? this.getAttribute('href') : "";
7+
}
8+
set href(url) {
9+
this.href = url;
10+
}
11+
get target() {
12+
return this.hasAttribute('target') ? this.getAttribute('target') : "";
13+
}
14+
set target(val) {
15+
this.setAttribute('target', val);
16+
}
17+
get type() {
18+
return this.hasAttribute('type') ? this.getAttribute('type') : "";
19+
}
20+
set type(val) {
21+
this.setAttribute('type', val);
22+
}
23+
get inplace() {
24+
return this.hasAttribute('inplace') ? this.getAttribute('inplace') : "";
25+
}
26+
set inplace(val) {
27+
const hasInplace = Boolean(val);
28+
if (hasInplace) {
29+
this.setAttribute('inpalce', '');
30+
} else {
31+
this.removeAttribute('inplace');
32+
}
33+
}
34+
35+
36+
attributeChangedCallback(name, oldValue, newValue) {
37+
switch (name) {
38+
case 'href': {
39+
if (oldValue !== newValue) {
40+
// handle side effects
41+
}
42+
break; }
43+
case 'target': {
44+
if (oldValue !== newValue) {
45+
// handle side effects
46+
}
47+
break;
48+
}
49+
case 'type': {
50+
if (oldValue !== newValue) {
51+
// handle side effects
52+
}
53+
break;
54+
}
55+
case 'inplace': {
56+
if (oldValue !== newValue) {
57+
// handle side effects
58+
}
59+
break;
60+
}
61+
}
62+
}
63+
constructor() {
64+
// Always call super first in constructor
65+
super();
66+
}
67+
connectedCallback() {
68+
69+
}
70+
disconnectedCallback() {
71+
72+
}
73+
}
74+
window.customElements.define('map-a', MapA);
75+

‎src/map-extent.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { MapInput } from './map-input.js';
2+
import { MapLink } from './map-link.js';
3+
4+
export class MapExtent extends HTMLElement {
5+
static get observedAttributes() {
6+
return ['units','checked','label','opacity'];
7+
}
8+
get units() {
9+
return this.getAttribute('units');
10+
}
11+
set units(val) {
12+
// built in support for OSMTILE, CBMTILE, WGS84 and APSTILE
13+
if (['OSMTILE','CBMTILE','WGS84','APSTILE'].includes(val)) {
14+
this.setAttribute('units',val);
15+
}
16+
// else need to check with the mapml-viewer element if the custom projection is defined
17+
}
18+
get checked() {
19+
return this.hasAttribute('checked');
20+
}
21+
22+
set checked(val) {
23+
if (val) {
24+
this.setAttribute('checked', '');
25+
} else {
26+
this.removeAttribute('checked');
27+
}
28+
}
29+
get label() {
30+
return this.hasAttribute('label')?this.getAttribute('label'):'';
31+
}
32+
set label(val) {
33+
if (val) {
34+
this.setAttribute('label',val);
35+
}
36+
}
37+
get opacity(){
38+
return this._opacity;
39+
}
40+
41+
set opacity(val) {
42+
if(+val > 1 || +val < 0) return;
43+
this.setAttribute('opacity', val);
44+
}
45+
attributeChangedCallback(name, oldValue, newValue) {
46+
switch(name) {
47+
case 'units':
48+
if (oldValue !== newValue) {
49+
// handle side effects
50+
}
51+
break;
52+
case 'label':
53+
if (oldValue !== newValue) {
54+
// handle side effects
55+
}
56+
break;
57+
case 'checked':
58+
if (oldValue !== newValue) {
59+
// handle side effects
60+
}
61+
break;
62+
case 'opacity':
63+
if (oldValue !== newValue) {
64+
// handle side effects
65+
}
66+
break;
67+
}
68+
}
69+
constructor() {
70+
// Always call super first in constructor
71+
super();
72+
}
73+
connectedCallback() {
74+
75+
}
76+
disconnectedCallback() {
77+
78+
}
79+
}
80+
window.customElements.define('map-extent', MapExtent);

‎src/map-feature.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
export class MapFeature extends HTMLElement {
2+
static get observedAttributes() {
3+
return ['zoom'];
4+
}
5+
get zoom() {
6+
return this.hasAttribute("zoom") ? this.getAttribute("zoom") : 0;
7+
}
8+
set zoom(val) {
9+
var parsedVal = parseInt(val,10);
10+
if (!isNaN(parsedVal) && (parsedVal >= 0 && parsedVal <= 25)) {
11+
this.setAttribute('zoom', parsedVal);
12+
}
13+
}
14+
15+
attributeChangedCallback(name, oldValue, newValue) {
16+
switch (name) {
17+
case 'zoom': {
18+
if (oldValue !== newValue) {
19+
// handle side effects
20+
}
21+
break;
22+
}
23+
}
24+
}
25+
constructor() {
26+
// Always call super first in constructor
27+
super();
28+
}
29+
connectedCallback() {
30+
31+
}
32+
disconnectedCallback() {
33+
34+
}
35+
}
36+
window.customElements.define('map-feature', MapFeature);
37+

‎src/map-geometry.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export class MapGeometry extends HTMLElement {
2+
static get observedAttributes() {
3+
return ['cs'];
4+
}
5+
get cs() {
6+
return this.getAttribute('cs');
7+
}
8+
set cs(val) {
9+
if (['tcrs','tilematrix','pcrs','gcrs','map','tile'].includes(val)) {
10+
this.setAttribute('cs', val);
11+
}
12+
}
13+
14+
attributeChangedCallback(name, oldValue, newValue) {
15+
switch (name) {
16+
case 'cs': {
17+
if (oldValue !== newValue) {
18+
// handle side effects
19+
}
20+
break;
21+
}
22+
}
23+
}
24+
constructor() {
25+
// Always call super first in constructor
26+
super();
27+
}
28+
connectedCallback() {
29+
30+
}
31+
disconnectedCallback() {
32+
33+
}
34+
}
35+
window.customElements.define('map-geometry', MapGeometry);

‎src/map-input.js‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import { MapLink } from './map-link.js';
2+
3+
export class MapInput extends HTMLElement {
4+
static get observedAttributes() {
5+
return ['name','type','value','axis','units','position','rel','min','max','step'];
6+
}
7+
8+
get name() {
9+
return this.getAttribute('name');
10+
}
11+
set name(val) {
12+
if (val) {
13+
this.setAttribute('name', val);
14+
}
15+
}
16+
get type() {
17+
return this.getAttribute('type');
18+
}
19+
set type(val) {
20+
if (['location'].includes(val)) {
21+
this.setAttribute('type', val);
22+
}
23+
}
24+
get value() {
25+
return this.getAttribute('value');
26+
}
27+
set value(val) {
28+
if (val) {
29+
this.setAttribute('value', val);
30+
}
31+
}
32+
get axis() {
33+
return this.getAttribute('axis');
34+
}
35+
set axis(val) {
36+
if (val) {
37+
this.setAttribute('axis', val);
38+
}
39+
}
40+
get units() {
41+
return this.getAttribute('units');
42+
}
43+
set units(val) {
44+
if (val) {
45+
this.setAttribute('units', val);
46+
}
47+
}
48+
get position() {
49+
return this.getAttribute('position');
50+
}
51+
set position(val) {
52+
if (val) {
53+
this.setAttribute('position', val);
54+
}
55+
}
56+
get rel() {
57+
return this.getAttribute('rel');
58+
}
59+
set rel(val) {
60+
if (val) {
61+
this.setAttribute('rel', val);
62+
}
63+
}
64+
get min() {
65+
return this.getAttribute('min');
66+
}
67+
set min(val) {
68+
if (val) {
69+
this.setAttribute('min', val);
70+
}
71+
}
72+
get max() {
73+
return this.getAttribute('max');
74+
}
75+
set max(val) {
76+
if (val) {
77+
this.setAttribute('max', val);
78+
}
79+
}
80+
get step() {
81+
return this.getAttribute('step');
82+
}
83+
set step(val) {
84+
if (val) {
85+
this.setAttribute('step', val);
86+
}
87+
}
88+
attributeChangedCallback(name, oldValue, newValue) {
89+
switch (name) {
90+
case 'name':
91+
if (oldValue !== newValue) {
92+
// handle side effects
93+
}
94+
break;
95+
case 'type':
96+
if (oldValue !== newValue) {
97+
// handle side effects
98+
}
99+
break;
100+
case 'value':
101+
if (oldValue !== newValue) {
102+
// handle side effects
103+
}
104+
break;
105+
case 'axis':
106+
if (oldValue !== newValue) {
107+
// handle side effects
108+
}
109+
break;
110+
case 'units':
111+
if (oldValue !== newValue) {
112+
// handle side effects
113+
}
114+
break;
115+
case 'position':
116+
if (oldValue !== newValue) {
117+
// handle side effects
118+
}
119+
break;
120+
case 'rel':
121+
if (oldValue !== newValue) {
122+
// handle side effects
123+
}
124+
break;
125+
case 'min':
126+
if (oldValue !== newValue) {
127+
// handle side effects
128+
}
129+
break;
130+
case 'max':
131+
if (oldValue !== newValue) {
132+
// handle side effects
133+
}
134+
break;
135+
case 'step':
136+
if (oldValue !== newValue) {
137+
// handle side effects
138+
}
139+
break;
140+
}
141+
}
142+
constructor() {
143+
// Always call super first in constructor
144+
super();
145+
}
146+
connectedCallback() {
147+
148+
}
149+
disconnectedCallback() {
150+
151+
}
152+
}
153+
window.customElements.define('map-input', MapInput);

0 commit comments

Comments
 (0)