From 3bcaba41edb2975d716196e26221f747907c3f3f Mon Sep 17 00:00:00 2001 From: prushfor Date: Mon, 27 Feb 2023 12:58:38 -0500 Subject: [PATCH 1/5] Add extent,input and link template custom elements --- src/map-extent.js | 80 ++++++++++++++++++++++++ src/map-input.js | 154 ++++++++++++++++++++++++++++++++++++++++++++++ src/map-link.js | 134 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 368 insertions(+) create mode 100644 src/map-extent.js create mode 100644 src/map-input.js create mode 100644 src/map-link.js diff --git a/src/map-extent.js b/src/map-extent.js new file mode 100644 index 000000000..82f5ee637 --- /dev/null +++ b/src/map-extent.js @@ -0,0 +1,80 @@ +import { MapInput } from './map-input.js'; +import { MapLink } from './map-link.js'; + +export class MapExtent extends HTMLElement { + static get observedAttributes() { + return ['units','checked','label','opacity']; + } + get units() { + return this.getAttribute('units'); + } + set units(val) { + // built in support for OSMTILE, CBMTILE, WGS84 and APSTILE + if (['OSMTILE','CBMTILE','WGS84','APSTILE'].includes(val)) { + this.setAttribute('units',val); + } + // else need to check with the mapml-viewer element if the custom projection is defined + } + get checked() { + return this.hasAttribute('checked'); + } + + set checked(val) { + if (val) { + this.setAttribute('checked', ''); + } else { + this.removeAttribute('checked'); + } + } + get label() { + return this.hasAttribute('label')?this.getAttribute('label'):''; + } + set label(val) { + if (val) { + this.setAttribute('label',val); + } + } + get opacity(){ + return this._opacity; + } + + set opacity(val) { + if(+val > 1 || +val < 0) return; + this.setAttribute('opacity', val); + } + attributeChangedCallback(name, oldValue, newValue) { + switch(name) { + case 'units': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'label': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'checked': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'opacity': + if (oldValue !== newValue) { + // handle side effects + } + break; + } + } + constructor() { + // Always call super first in constructor + super(); + } + connectedCallback() { + + } + disconnectedCallback() { + + } +}; +window.customElements.define('map-extent', MapExtent); diff --git a/src/map-input.js b/src/map-input.js new file mode 100644 index 000000000..96fc29e26 --- /dev/null +++ b/src/map-input.js @@ -0,0 +1,154 @@ +import { MapLink } from './map-link.js'; + +export class MapInput extends HTMLElement { + static get observedAttributes() { + return ['name','type','value','axis','units','position','rel','min','max','step']; + } + + get name() { + return this.getAttribute('name'); + } + set name(val) { + if (val) { + this.setAttribute('name', val); + } + } + get type() { + return this.getAttribute('type'); + } + set type(val) { + if (['location'].includes(val)) { + this.setAttribute('type', val); + } + } + get value() { + return this.getAttribute('value'); + } + set value(val) { + if (val) { + this.setAttribute('value', val); + } + } + get axis() { + return this.getAttribute('axis'); + } + set axis(val) { + if (val) { + this.setAttribute('axis', val); + } + } + get units() { + return this.getAttribute('units'); + } + set units(val) { + if (val) { + this.setAttribute('units', val); + } + } + get position() { + return this.getAttribute('position'); + } + set position(val) { + if (val) { + this.setAttribute('position', val); + } + } + get rel() { + return this.getAttribute('rel'); + } + set rel(val) { + if (val) { + this.setAttribute('rel', val); + } + } + get min() { + return this.getAttribute('min'); + } + set min(val) { + if (val) { + this.setAttribute('min', val); + } + } + get max() { + return this.getAttribute('max'); + } + set max(val) { + if (val) { + this.setAttribute('max', val); + } + } + get step() { + return this.getAttribute('step'); + } + set step(val) { + if (val) { + this.setAttribute('step', val); + } + } + attributeChangedCallback(name, oldValue, newValue) { + switch (name) { + case 'name': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'type': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'value': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'axis': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'units': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'position': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'rel': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'min': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'max': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'step': + if (oldValue !== newValue) { + // handle side effects + } + break; + } + } + constructor() { + // Always call super first in constructor + super(); + } + connectedCallback() { + + } + disconnectedCallback() { + + } +} +; +window.customElements.define('map-input', MapInput); diff --git a/src/map-link.js b/src/map-link.js new file mode 100644 index 000000000..2bf267f69 --- /dev/null +++ b/src/map-link.js @@ -0,0 +1,134 @@ +export class MapLink extends HTMLElement { + static get observedAttributes() { + return ['type','rel','title','href','hreflang','tref','tms','projection']; + } + get type() { + return this.getAttribute('type'); + } + set type(val) { + // improve this + if (val === "text/mapml" || val.startsWith('image/')) { + this.setAttribute('type', val); + } + } + get rel() { + return this.getAttribute('rel'); + } + set rel(val) { + // improve this + if (['license','alternate','self','style','tile','image','features','zoomin','zoomout','legend','query','stylesheet'].includes(val)) { + this.setAttribute('type', val); + } + } + get title() { + return this.getAttribute('title'); + } + set title(val) { + if (val) { + this.setAttribute('title', val); + } + } + get href() { + return this.getAttribute('href'); + } + set href(val) { + // improve this + if (val) { + this.setAttribute('href', val); + } + } + get hreflang() { + return this.getAttribute('hreflang'); + } + set hreflang(val) { + // improve this + if (val) { + this.setAttribute('hreflang', val); + } + } + get tref() { + return this.getAttribute('tref'); + } + set tref(val) { + // improve this + if (val) { + this.setAttribute('tref', val); + } + } + get tms() { + return this.hasAttribute('tms'); + } + set tms(val) { + // improve this + if (val) { + this.setAttribute('tms', ''); + } + } + get projection() { + return this.getAttribute('projection'); + } + set projection(val) { + // improve this + if (['OSMTILE','CBMTILE','WGS84','APSTILE'].includes(val)) { + this.setAttribute('projection', val); + } + } + + attributeChangedCallback(name, oldValue, newValue) { + //['type','rel','title','href','hreflang','tref','tms','projection']; + switch (name) { + case 'type': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'rel': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'title': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'href': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'hreflang': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'tref': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'tms': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'projection': + if (oldValue !== newValue) { + // handle side effects + } + break; + } + } + constructor() { + // Always call super first in constructor + super(); + } + connectedCallback() { + + } + disconnectedCallback() { + + } +} +; +window.customElements.define('map-link', MapLink); From c876387ad8c298e76189f4dbfdf55dfbc67e30ed Mon Sep 17 00:00:00 2001 From: yhy0217 Date: Wed, 1 Mar 2023 13:19:30 -0500 Subject: [PATCH 2/5] Add empty templates for select, meta and geometry --- src/map-geometry.js | 35 +++++++++++++++++++++++++++++++ src/map-meta.js | 51 +++++++++++++++++++++++++++++++++++++++++++++ src/map-select.js | 43 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 129 insertions(+) create mode 100644 src/map-geometry.js create mode 100644 src/map-meta.js create mode 100644 src/map-select.js diff --git a/src/map-geometry.js b/src/map-geometry.js new file mode 100644 index 000000000..2d6eebe9d --- /dev/null +++ b/src/map-geometry.js @@ -0,0 +1,35 @@ +export class MapGeometry extends HTMLElement { + static get observedAttributes() { + return ['cs']; + } + get cs() { + return this.getAttribute('cs'); + } + set cs(val) { + if (['tcrs','tilematrix','pcrs','gcrs','map','tile'].includes(val)) { + this.setAttribute('cs', val); + } + } + + attributeChangedCallback(name, oldValue, newValue) { + switch (name) { + case 'cs': { + if (oldValue !== newValue) { + // handle side effects + } + break; + } + } + } + constructor() { + // Always call super first in constructor + super(); + } + connectedCallback() { + + } + disconnectedCallback() { + + } +}; +window.customElements.define('map-geometry', MapGeometry); \ No newline at end of file diff --git a/src/map-meta.js b/src/map-meta.js new file mode 100644 index 000000000..fe0fb5404 --- /dev/null +++ b/src/map-meta.js @@ -0,0 +1,51 @@ +export class MapMeta extends HTMLElement { + static get observedAttributes() { + return ['name','content']; + } + get name() { + return this.getAttribute('name'); + } + set name(val) { + if (['projection','extent','cs','zoom'].includes(val)) { + this.setAttribute('name', val); + } + } + get content() { + return this.getAttribute('content'); + } + set content(val) { + // improve this + if (this.name === 'cs' && !['tcrs','tilematrix','pcrs','gcrs','map','tile'].includes(val)) { + return; + } + this.setAttribute('content', val); + } + + attributeChangedCallback(name, oldValue, newValue) { + switch (name) { + case 'name': { + if (oldValue !== newValue) { + // handle side effects + } + break; + } + case 'content': { + if (oldValue !== newValue) { + // handle side effects + } + break; + } + } + } + constructor() { + // Always call super first in constructor + super(); + } + connectedCallback() { + + } + disconnectedCallback() { + + } +}; +window.customElements.define('map-meta', MapMeta); \ No newline at end of file diff --git a/src/map-select.js b/src/map-select.js new file mode 100644 index 000000000..8e802c89b --- /dev/null +++ b/src/map-select.js @@ -0,0 +1,43 @@ +export class MapSelect extends HTMLElement { + static get observedAttributes() { + return ['name','id']; + } + get name() { + return this.getAttribute('name'); + } + set name(val) { + this.setAttribute('name', val); + } + get id() { + return this.getAttribute('id'); + } + set id(val) { + this.setAttribute('id', val); + } + + attributeChangedCallback(name, oldValue, newValue) { + switch (name) { + case 'name': + if (oldValue !== newValue) { + // handle side effects + } + break; + case 'id': + if (oldValue !== newValue) { + // handle side effects + } + break; + } + } + constructor() { + // Always call super first in constructor + super(); + } + connectedCallback() { + + } + disconnectedCallback() { + + } +}; +window.customElements.define('map-select', MapSelect); \ No newline at end of file From 5c16095d7c6f6e3460b7f3568b4d9326a16a44ce Mon Sep 17 00:00:00 2001 From: Jacky0299 Date: Wed, 1 Mar 2023 17:34:11 -0500 Subject: [PATCH 3/5] map-a and map-feature templates --- src/map-a.js | 74 ++++++++++++++++++++++++++++++++++++++++++++++ src/map-feature.js | 36 ++++++++++++++++++++++ 2 files changed, 110 insertions(+) create mode 100644 src/map-a.js create mode 100644 src/map-feature.js diff --git a/src/map-a.js b/src/map-a.js new file mode 100644 index 000000000..3f734b6ee --- /dev/null +++ b/src/map-a.js @@ -0,0 +1,74 @@ +export class MapA extends HTMLElement { + static get observedAttributes() { + return ['href','target','type','inplace']; + } + get href() { + return this.hasAttribute('href') ? this.getAttribute('href') : ""; + } + set href(url) { + this.href = url; + } + get target() { + return this.hasAttribute('target') ? this.getAttribute('target') : ""; + } + set target(val) { + this.setAttribute('target', val); + } + get type() { + return this.hasAttribute('type') ? this.getAttribute('type') : ""; + } + set type(val) { + this.setAttribute('type', val); + } + get inplace() { + return this.hasAttribute('inplace') ? this.getAttribute('inplace') : ""; + } + set inplace(val) { + const hasInplace = Boolean(val); + if (hasInplace) { + this.setAttribute('inpalce', ''); + } else { + this.removeAttribute('inplace'); + } + } + + + attributeChangedCallback(name, oldValue, newValue) { + switch (name) { + case 'href': { + if (oldValue !== newValue) { + // handle side effects + } + break; } + case 'target': { + if (oldValue !== newValue) { + // handle side effects + } + break; + } + case 'type': { + if (oldValue !== newValue) { + // handle side effects + } + break; + } + case 'inplace': { + if (oldValue !== newValue) { + // handle side effects + } + break; + } + } + } + constructor() { + // Always call super first in constructor + super(); + } + connectedCallback() { + + } + disconnectedCallback() { + + } + }; + window.customElements.define('map-a', MapA); \ No newline at end of file diff --git a/src/map-feature.js b/src/map-feature.js new file mode 100644 index 000000000..cc4f9540d --- /dev/null +++ b/src/map-feature.js @@ -0,0 +1,36 @@ +export class MapFeature extends HTMLElement { + static get observedAttributes() { + return ['zoom']; + } + get zoom() { + return this.hasAttribute("zoom") ? this.getAttribute("zoom") : 0; + } + set zoom(val) { + var parsedVal = parseInt(val,10); + if (!isNaN(parsedVal) && (parsedVal >= 0 && parsedVal <= 25)) { + this.setAttribute('zoom', parsedVal); + } + } + + attributeChangedCallback(name, oldValue, newValue) { + switch (name) { + case 'zoom': { + if (oldValue !== newValue) { + // handle side effects + } + break; + } + } + } + constructor() { + // Always call super first in constructor + super(); + } + connectedCallback() { + + } + disconnectedCallback() { + + } + }; + window.customElements.define('map-feature', MapFeature); \ No newline at end of file From 70cb5d56f948e3c5bb84bbb709b66730b4a152d0 Mon Sep 17 00:00:00 2001 From: Kevin Kim Date: Wed, 1 Mar 2023 17:52:56 -0500 Subject: [PATCH 4/5] add properties,span,style --- src/map-properties.js | 19 +++++++++++++++++++ src/map-span.js | 19 +++++++++++++++++++ src/map-style.js | 19 +++++++++++++++++++ 3 files changed, 57 insertions(+) create mode 100644 src/map-properties.js create mode 100644 src/map-span.js create mode 100644 src/map-style.js diff --git a/src/map-properties.js b/src/map-properties.js new file mode 100644 index 000000000..a94104def --- /dev/null +++ b/src/map-properties.js @@ -0,0 +1,19 @@ +export class MapProperties extends HTMLElement { + static get observedAttributes() { + return; + } + + attributeChangedCallback(name, oldValue, newValue) { + } + constructor() { + // Always call super first in constructor + super(); + } + connectedCallback() { + + } + disconnectedCallback() { + + } + }; + window.customElements.define('map-properties', MapProperties); \ No newline at end of file diff --git a/src/map-span.js b/src/map-span.js new file mode 100644 index 000000000..3a4b89334 --- /dev/null +++ b/src/map-span.js @@ -0,0 +1,19 @@ +export class MapSpan extends HTMLElement { + static get observedAttributes() { + return; + } + + attributeChangedCallback(name, oldValue, newValue) { + } + constructor() { + // Always call super first in constructor + super(); + } + connectedCallback() { + + } + disconnectedCallback() { + + } + }; + window.customElements.define('map-span', MapSpan); \ No newline at end of file diff --git a/src/map-style.js b/src/map-style.js new file mode 100644 index 000000000..7141a7313 --- /dev/null +++ b/src/map-style.js @@ -0,0 +1,19 @@ +export class MapStyle extends HTMLElement { + static get observedAttributes() { + return; + } + + attributeChangedCallback(name, oldValue, newValue) { + } + constructor() { + // Always call super first in constructor + super(); + } + connectedCallback() { + + } + disconnectedCallback() { + + } + }; + window.customElements.define('map-style', MapStyle); \ No newline at end of file From fd595a1e1c3d492bdd5b752f7357b6696506dc8c Mon Sep 17 00:00:00 2001 From: Peter Rushforth Date: Wed, 15 Mar 2023 15:03:55 -0400 Subject: [PATCH 5/5] Fix lint / JSHint messages --- src/map-a.js | 5 +++-- src/map-extent.js | 2 +- src/map-feature.js | 5 +++-- src/map-geometry.js | 4 ++-- src/map-input.js | 1 - src/map-link.js | 1 - src/map-meta.js | 4 ++-- src/map-properties.js | 5 +++-- src/map-select.js | 4 ++-- src/map-span.js | 5 +++-- src/map-style.js | 5 +++-- 11 files changed, 22 insertions(+), 19 deletions(-) diff --git a/src/map-a.js b/src/map-a.js index 3f734b6ee..38a1260f8 100644 --- a/src/map-a.js +++ b/src/map-a.js @@ -70,5 +70,6 @@ export class MapA extends HTMLElement { disconnectedCallback() { } - }; - window.customElements.define('map-a', MapA); \ No newline at end of file + } + window.customElements.define('map-a', MapA); + \ No newline at end of file diff --git a/src/map-extent.js b/src/map-extent.js index 82f5ee637..7e1544e9d 100644 --- a/src/map-extent.js +++ b/src/map-extent.js @@ -76,5 +76,5 @@ export class MapExtent extends HTMLElement { disconnectedCallback() { } -}; +} window.customElements.define('map-extent', MapExtent); diff --git a/src/map-feature.js b/src/map-feature.js index cc4f9540d..528f706a6 100644 --- a/src/map-feature.js +++ b/src/map-feature.js @@ -32,5 +32,6 @@ export class MapFeature extends HTMLElement { disconnectedCallback() { } - }; - window.customElements.define('map-feature', MapFeature); \ No newline at end of file + } + window.customElements.define('map-feature', MapFeature); + \ No newline at end of file diff --git a/src/map-geometry.js b/src/map-geometry.js index 2d6eebe9d..270e75d09 100644 --- a/src/map-geometry.js +++ b/src/map-geometry.js @@ -31,5 +31,5 @@ export class MapGeometry extends HTMLElement { disconnectedCallback() { } -}; -window.customElements.define('map-geometry', MapGeometry); \ No newline at end of file +} +window.customElements.define('map-geometry', MapGeometry); diff --git a/src/map-input.js b/src/map-input.js index 96fc29e26..11b3f136b 100644 --- a/src/map-input.js +++ b/src/map-input.js @@ -150,5 +150,4 @@ export class MapInput extends HTMLElement { } } -; window.customElements.define('map-input', MapInput); diff --git a/src/map-link.js b/src/map-link.js index 2bf267f69..d7883e85b 100644 --- a/src/map-link.js +++ b/src/map-link.js @@ -130,5 +130,4 @@ export class MapLink extends HTMLElement { } } -; window.customElements.define('map-link', MapLink); diff --git a/src/map-meta.js b/src/map-meta.js index fe0fb5404..108474c6b 100644 --- a/src/map-meta.js +++ b/src/map-meta.js @@ -47,5 +47,5 @@ export class MapMeta extends HTMLElement { disconnectedCallback() { } -}; -window.customElements.define('map-meta', MapMeta); \ No newline at end of file +} +window.customElements.define('map-meta', MapMeta); diff --git a/src/map-properties.js b/src/map-properties.js index a94104def..e39c32791 100644 --- a/src/map-properties.js +++ b/src/map-properties.js @@ -15,5 +15,6 @@ export class MapProperties extends HTMLElement { disconnectedCallback() { } - }; - window.customElements.define('map-properties', MapProperties); \ No newline at end of file + } + window.customElements.define('map-properties', MapProperties); + \ No newline at end of file diff --git a/src/map-select.js b/src/map-select.js index 8e802c89b..1e26e3d9c 100644 --- a/src/map-select.js +++ b/src/map-select.js @@ -39,5 +39,5 @@ export class MapSelect extends HTMLElement { disconnectedCallback() { } -}; -window.customElements.define('map-select', MapSelect); \ No newline at end of file +} +window.customElements.define('map-select', MapSelect); diff --git a/src/map-span.js b/src/map-span.js index 3a4b89334..73fc903bd 100644 --- a/src/map-span.js +++ b/src/map-span.js @@ -15,5 +15,6 @@ export class MapSpan extends HTMLElement { disconnectedCallback() { } - }; - window.customElements.define('map-span', MapSpan); \ No newline at end of file + } + window.customElements.define('map-span', MapSpan); + \ No newline at end of file diff --git a/src/map-style.js b/src/map-style.js index 7141a7313..fc4b9680b 100644 --- a/src/map-style.js +++ b/src/map-style.js @@ -15,5 +15,6 @@ export class MapStyle extends HTMLElement { disconnectedCallback() { } - }; - window.customElements.define('map-style', MapStyle); \ No newline at end of file + } + window.customElements.define('map-style', MapStyle); + \ No newline at end of file