From e322ddd168557c909ee62d4141368f7de3207691 Mon Sep 17 00:00:00 2001 From: jordi fita mas Date: Sat, 11 Nov 2023 03:32:03 +0100 Subject: [PATCH] Add custom elements polyfill MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I use customized built-in components, extended from any HTML elements (e.g., HTMLDivElement), for product search, multiselect, and tags input fields. The idea is that people that without JavaScript could still use the regular, non-customized, inputs. It turns out, this does not work so well: the CSS assumes that JavaScript is enabled, and web components supported by the browser. If one of these fails, then the controls are unusable—the multiselect is too short, and the tags field accepts invalid characters that the backend does not validate until it fails with a database error. We discovered this because Apple does not implement customized built-in components[0], hence it does not use my JavaScript code and forms, the expenses forms in particular, are almost useless. The way to fix this is to replace the regular inputs with autonomous web components, extended from HTMLElement, using JavaScript, because it would only do so with JavaScript enabled, and the CSS style would only apply to these components, not the regular input fields. However, currently i do not have time to do the proper fix, and have to use a polyfill for Safari to support customized built-in components. Shame. [0]: https://lists.w3.org/Archives/Public/public-webapps/2013OctDec/0801.html --- web/static/custom-elements@1.3.0.min.js | 2 ++ web/template/app.gohtml | 1 + 2 files changed, 3 insertions(+) create mode 100644 web/static/custom-elements@1.3.0.min.js diff --git a/web/static/custom-elements@1.3.0.min.js b/web/static/custom-elements@1.3.0.min.js new file mode 100644 index 0000000..df2faea --- /dev/null +++ b/web/static/custom-elements@1.3.0.min.js @@ -0,0 +1,2 @@ +!function(){"use strict";var e=(e,t)=>{const n=e=>{for(let t=0,{length:n}=e;t{e.attributeChangedCallback(t,n,e.getAttribute(t))};return(r,s)=>{const{observedAttributes:l}=r.constructor;return l&&e(s).then((()=>{new t(n).observe(r,{attributes:!0,attributeOldValue:!0,attributeFilter:l});for(let e=0,{length:t}=l;er in e,{filter:f}=[];var h=e=>{const h=new i,d=(t,n)=>{let o;if(n)for(let r,s=(e=>e.matches||e.webkitMatchesSelector||e.msMatchesSelector)(t),l=0,{length:c}=g;l{e.handle(t,n,o)})))},p=(e,t=!0)=>{for(let n=0,{length:o}=e;n{const c=(n,r,s,l,a,i)=>{for(const u of n)(i||o in u)&&(a?s.has(u)||(s.add(u),l.delete(u),e(u,a)):l.has(u)||(l.add(u),s.delete(u),e(u,a)),i||c(u[o](r),r,s,l,a,t))},a=new s((e=>{if(l.length){const o=l.join(","),r=new Set,s=new Set;for(const{addedNodes:l,removedNodes:a}of e)c(a,o,r,s,n,n),c(l,o,r,s,t,n)}})),{observe:i}=a;return(a.observe=e=>i.call(a,e,{subtree:t,childList:t}))(r),a})(d,m,c,g),{attachShadow:w}=l.prototype;return w&&(l.prototype.attachShadow=function(e){const t=w.call(this,e);return y.observe(t),t}),g.length&&p(m[r](g)),{drop:e=>{for(let t=0,{length:n}=e;t{const e=y.takeRecords();for(let t=0,{length:n}=e;t{const t=N(e),n=[],o=new y,{length:r}=t;for(let s=0;s{for(let s=0;s{const o=L.get(n);if(t&&!o.isPrototypeOf(e)){const t=D(e);R=C(e,o);try{new o.constructor}finally{R=null,t()}}const r=(t?"":"dis")+"connectedCallback";r in o&&e[r]()},{parse:_}=h({query:H,handle:I});let R=null;const V=e=>{if(!k.has(e)){let t,n=new Promise((e=>{t=e}));k.set(e,{$:n,_:t})}return k.get(e).$},j=e(V,g);function W(){const{constructor:e}=this;if(!$.has(e))throw new M("Illegal constructor");const t=$.get(e);if(R)return j(R,t);const n=P.call(d,t);return j(C(n,e.prototype),t)}self.customElements={define:(e,t)=>{if(x.has(e))throw new v(`the name "${e}" has already been used with this registry`);$.set(t,e),L.set(e,t.prototype),x.set(e,t),H.push(e),V(e).then((()=>{_(d.querySelectorAll(e))})),k.get(e)._(t)},get:e=>x.get(e),whenDefined:V},A(W.prototype=E.prototype,"constructor",{value:W}),self.HTMLElement=W,d.createElement=function(e,t){const n=t&&t.is,o=n?x.get(n):x.get(e);return o?new o:P.call(d,e)},"isConnected"in S.prototype||A(S.prototype,"isConnected",{configurable:!0,get(){return!(this.ownerDocument.compareDocumentPosition(this)&this.DOCUMENT_POSITION_DISCONNECTED)}})}else if(T=!self.customElements.get("extends-br"),T)try{function B(){return self.Reflect.construct(HTMLBRElement,[],B)}B.prototype=HTMLLIElement.prototype;const F="extends-br";self.customElements.define("extends-br",B,{extends:"br"}),T=d.createElement("br",{is:F}).outerHTML.indexOf(F)<0;const{get:U,whenDefined:z}=self.customElements;self.customElements.whenDefined=function(e){return z.call(this,e).then((t=>t||U.call(this,e)))}}catch(G){}if(T){const J=self.customElements,{createElement:K}=d,{define:Q,get:X,upgrade:Y}=J,{construct:Z}=O||{construct(e){return e.call(this)}},ee=new w,te=new y,ne=new p,oe=new p,re=new p,se=new p,le=[],ce=[],ae=e=>se.get(e)||X.call(J,e),ie=(e,t,n)=>{const o=re.get(n);if(t&&!o.isPrototypeOf(e)){const t=D(e);ge=C(e,o);try{new o.constructor}finally{ge=null,t()}}const r=(t?"":"dis")+"connectedCallback";r in o&&e[r]()},{parse:ue}=h({query:ce,handle:ie}),{parse:fe}=h({query:le,handle(e,t){ee.has(e)&&(t?te.add(e):te.delete(e),ce.length&&me.call(ce,e))}}),{attachShadow:he}=b.prototype;he&&(b.prototype.attachShadow=function(e){const t=he.call(this,e);return ee.set(this,t),t});const de=e=>{if(!oe.has(e)){let t,n=new Promise((e=>{t=e}));oe.set(e,{$:n,_:t})}return oe.get(e).$},pe=e(de,g);let ge=null;function me(e){const t=ee.get(e);ue(t.querySelectorAll(this),e.isConnected)}q(self).filter((e=>/^HTML.*Element$/.test(e))).forEach((e=>{const t=self[e];function n(){const{constructor:e}=this;if(!ne.has(e))throw new M("Illegal constructor");const{is:n,tag:o}=ne.get(e);if(n){if(ge)return pe(ge,n);const t=K.call(d,o);return t.setAttribute("is",n),pe(C(t,e.prototype),n)}return Z.call(this,t,[],e)}C(n,t),A(n.prototype=t.prototype,"constructor",{value:n}),A(self,e,{value:n})})),d.createElement=function(e,t){const n=t&&t.is;if(n){const t=se.get(n);if(t&&ne.get(t).tag===e)return new t}const o=K.call(d,e);return n&&o.setAttribute("is",n),o},J.get=ae,J.whenDefined=de,J.upgrade=function(e){const t=e.getAttribute("is");if(t){const n=se.get(t);if(n)return void pe(C(e,n.prototype),t)}Y.call(J,e)},J.define=function(e,t,n){if(ae(e))throw new v(`'${e}' has already been defined as a custom element`);let o;const r=n&&n.extends;ne.set(t,r?{is:e,tag:r}:{is:"",tag:e}),r?(o=`${r}[is="${e}"]`,re.set(o,t.prototype),se.set(e,t),ce.push(o)):(Q.apply(J,arguments),le.push(o=e)),de(e).then((()=>{r?(ue(d.querySelectorAll(o)),te.forEach(me,[o])):fe(d.querySelectorAll(o))})),oe.get(e)._(t)}}}(); diff --git a/web/template/app.gohtml b/web/template/app.gohtml index 546155b..170a03a 100644 --- a/web/template/app.gohtml +++ b/web/template/app.gohtml @@ -6,6 +6,7 @@ {{ template "title" . }} — Numerus +