turbo_boost-elements 0.0.10 → 0.0.12
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/app/assets/builds/@turbo-boost/elements.js +2 -2
- data/app/assets/builds/@turbo-boost/elements.js.map +3 -3
- data/app/javascript/elements/toggle_elements/target_element/focus.js +3 -4
- data/app/javascript/elements/toggle_elements/target_element/index.js +3 -11
- data/app/javascript/elements/toggle_elements/trigger_element/index.js +7 -3
- data/lib/turbo_boost/elements/tag_builders/toggle_tags_builder.rb +4 -3
- data/lib/turbo_boost/elements/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 93f80e75d3ebe1a72d37f04d05d3b04a8dd7893ef2348f489168dd00b0b1743a
|
4
|
+
data.tar.gz: 6f0498b69981ceb0dcb5ab38d9b0705eaaa7cf49b4ca34a9ec42d1c4287fcc89
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8c607f3fe437dca97c4fc41b3a4c30542998e0ae76efec85422bf43efc6c69342d4d93651e8e258e01e72d7bf823ea2ab24b73f7becc2d13483dddf9e22b0b14
|
7
|
+
data.tar.gz: dd8c2115b7be8b7921c9c483a1b1515cc53848270a60e770b75be3d71dac9364279500ad610869778987d8d11997282eb8a2b5ec7d106efa504973e4ef5f4249
|
data/README.md
CHANGED
@@ -4,7 +4,7 @@
|
|
4
4
|
</h1>
|
5
5
|
<p align="center">
|
6
6
|
<a href="http://blog.codinghorror.com/the-best-code-is-no-code-at-all/">
|
7
|
-
<img alt="Lines of Code" src="https://img.shields.io/badge/loc-
|
7
|
+
<img alt="Lines of Code" src="https://img.shields.io/badge/loc-1389-47d299.svg" />
|
8
8
|
</a>
|
9
9
|
<a href="https://codeclimate.com/github/hopsoft/turbo_boost-elements/maintainability">
|
10
10
|
<img src="https://api.codeclimate.com/v1/badges/7aac6daed3e4032e292e/maintainability" />
|
@@ -7,7 +7,7 @@ ${n?'Expression: "'+n+`"
|
|
7
7
|
<slot name="busy" hidden></slot>
|
8
8
|
<slot></slot>
|
9
9
|
</turbo-boost>
|
10
|
-
`,_o=100,Tn=400,de=class extends ce{constructor(){super(Nl)}showBusyElement(){clearTimeout(this.showBusyElementTimeout),clearTimeout(this.hideBusyElementTimeout),this.busyElement&&(this.busyStartedAt=Date.now()+_o,this.showBusyElementTimeout=setTimeout(()=>{this.busySlotElement.hidden=!1,this.defaultSlotElement.hidden=!0},_o))}hideBusyElement(){if(clearTimeout(this.showBusyElementTimeout),clearTimeout(this.hideBusyElementTimeout),!this.busyElement)return;let t=Tn-(Date.now()-this.busyStartedAt);t<0&&(t=0),delete this.busyStartedAt,this.hideBusyElementTimeout=setTimeout(()=>{this.busySlotElement.hidden=!0,this.defaultSlotElement.hidden=!1},t)}get busyElement(){return this.querySelector(':scope > [slot="busy"]')}get busySlotElement(){return this.shadowRoot.querySelector('slot[name="busy"]')}get defaultSlotElement(){return this.shadowRoot.querySelector("slot:not([name])")}get busy(){return this.getAttribute("busy")==="true"}set busy(t){t=!!t,this.busy!==t&&(this.setAttribute("busy",t),t?this.showBusyElement():this.hideBusyElement())}get busyStartedAt(){return this.dataset.busyStartedAt?Number(this.dataset.busyStartedAt):0}set busyStartedAt(t){this.dataset.busyStartedAt=t}};function Bl(e){["bold","bullet","code","heading1","href","italic","number","quote","strike"].forEach(n=>e.deactivateAttribute(n))}function Ml(e){if(e.value.length===0)return;let t=e.editor,n=[];for(;n[0]!==t.getSelectedRange()[0]&&n[1]!==t.getSelectedRange()[1];)n=t.getSelectedRange(),t.moveCursorInDirection("forward");t.insertString(" "),t.moveCursorInDirection("forward"),t.setSelectedRange([n[1],t.getSelectedRange()[1]]),Bl(t),t.setSelectedRange([t.getSelectedRange()[1],t.getSelectedRange()[1]])}function Rl(e){return e.
|
10
|
+
`,_o=100,Tn=400,de=class extends ce{constructor(){super(Nl)}showBusyElement(){clearTimeout(this.showBusyElementTimeout),clearTimeout(this.hideBusyElementTimeout),this.busyElement&&(this.busyStartedAt=Date.now()+_o,this.showBusyElementTimeout=setTimeout(()=>{this.busySlotElement.hidden=!1,this.defaultSlotElement.hidden=!0},_o))}hideBusyElement(){if(clearTimeout(this.showBusyElementTimeout),clearTimeout(this.hideBusyElementTimeout),!this.busyElement)return;let t=Tn-(Date.now()-this.busyStartedAt);t<0&&(t=0),delete this.busyStartedAt,this.hideBusyElementTimeout=setTimeout(()=>{this.busySlotElement.hidden=!0,this.defaultSlotElement.hidden=!1},t)}get busyElement(){return this.querySelector(':scope > [slot="busy"]')}get busySlotElement(){return this.shadowRoot.querySelector('slot[name="busy"]')}get defaultSlotElement(){return this.shadowRoot.querySelector("slot:not([name])")}get busy(){return this.getAttribute("busy")==="true"}set busy(t){t=!!t,this.busy!==t&&(this.setAttribute("busy",t),t?this.showBusyElement():this.hideBusyElement())}get busyStartedAt(){return this.dataset.busyStartedAt?Number(this.dataset.busyStartedAt):0}set busyStartedAt(t){this.dataset.busyStartedAt=t}};function Bl(e){["bold","bullet","code","heading1","href","italic","number","quote","strike"].forEach(n=>e.deactivateAttribute(n))}function Ml(e){if(e.value.length===0)return;let t=e.editor,n=[];for(;n[0]!==t.getSelectedRange()[0]&&n[1]!==t.getSelectedRange()[1];)n=t.getSelectedRange(),t.moveCursorInDirection("forward");t.insertString(" "),t.moveCursorInDirection("forward"),t.setSelectedRange([n[1],t.getSelectedRange()[1]]),Bl(t),t.setSelectedRange([t.getSelectedRange()[1],t.getSelectedRange()[1]])}function Rl(e){return e.tagName.match(/^input|textarea|trix-editor$/i)?!!(e.closest("turbo-boost-toggle-target")||{}).focusElement:!1}function Dl(e){let t=e.closest("trix-editor");try{t?Ml(t):e.selectionStart=e.selectionEnd=e.value.length}catch(n){}finally{setTimeout(()=>e.scrollIntoView({block:"center",behavior:"smooth"}),100)}}addEventListener("focus",e=>{Rl(document.activeElement)&&Dl(document.activeElement)},!0);var We=class extends de{connectedCallback(){super.connectedCallback(),this.mouseenterHandler=this.onMouseenter.bind(this),this.addEventListener("mouseenter",this.mouseenterHandler),this.collapseHandler=this.collapse.bind(this),this.collapseNowHandler=this.collapseNow.bind(this),this.collapseOn.forEach(t=>{let n=t.split("@"),r=n[0];n.length>1?(n[1].match(/^self|window$/)?self:self[n[1]]).addEventListener(r,this.collapseNowHandler):this.addEventListener(r,this.collapseHandler)})}disconnectedCallback(){this.removeEventListener("mouseenter",this.mouseenterHandler),this.collapseOn.forEach(t=>{let n=t.split("@"),r=n[0];n.length>1?(n[1].match(/^self|window$/)?self:self[n[1]]).removeEventListener(r,this.collapseNowHandler):this.removeEventListener(r,this.collapseHandler)})}cacheHTML(){}renderCachedHTML(){}onMouseenter(){clearTimeout(this.collapseTimeout)}collapse(t=250){if(clearTimeout(this.collapseTimeout),typeof t!="number"&&(t=250),t>0)return this.collapseTimeout=setTimeout(()=>this.collapse(0),t);this.innerHTML="";try{this.expanded=!1,this.triggerElement.hideDevtool()}catch(n){}}collapseNow(t){t.target.closest("turbo-boost-devtool-tooltip")||this.collapse(0)}collapseMatches(){document.querySelectorAll(this.collapseSelector).forEach(t=>{t!==this&&t.collapse&&t.collapse(0)})}get collapseSelector(){return this.triggerElement.collapseSelector||this.getAttribute("collapse-selector")}applyFocus(){this.focusElement&&this.focusElement.focus()}get focusSelector(){let t=this.getAttribute("focus-selector");return this.triggerElement&&(t=this.triggerElement.getAttribute("focus-selector")||t),t}get focusElement(){return this.querySelector(this.focusSelector)}get triggerElement(){return document.getElementById(this.labeledBy)}get labeledBy(){return this.getAttribute("aria-labeledby")}get collapseOn(){let t=this.getAttribute("collapse-on");return t?JSON.parse(t):[]}get expanded(){return this.triggerElement.expanded}set expanded(t){return this.triggerElement.expanded=t}};function Pl(e){let t=document.createElement("template");return t.innerHTML=e,t}function Ve(e,t){t=t||document.body;let r=Pl(e).content.cloneNode(!0).querySelector("*");return t.appendChild(r)}function St(e,t={}){if(!e)return;At(e);let{outline:n,outlineOffset:r}=t;n=n||"dashed 3px red",r=r||"0px",e.originalStyles=e.originalStyles||{display:e.style.display,minHeight:e.style.minHeight,minWidth:e.style.minWidth,outline:e.style.outline,outlineOffset:e.style.outlineOffset},getComputedStyle(e).display.match(/^inline$/i)&&e.offsetWidth===0&&e.offsetHeight===0&&(e.style.display="inline-block",e.style.minHeight="2px",e.style.minWidth="2px"),e.style.outline=n,e.style.outlineOffset=r,e.dataset.turboBoostHighlight=!0}function At(e){if(e){if(e.originalStyles){for(let[t,n]of Object.entries(e.originalStyles))n?e.style[t]=n:e.style[t]="";delete e.originalStyles}delete e.dataset.turboBoostHighlight}}function Ct(e){if(!e)return{};let t=e.getBoundingClientRect(),n=e.offsetWidth,r=e.offsetHeight,o=t.top+window.scrollY,i=t.left+window.scrollX,s=i+n,l=o+r;return{top:o,left:i,right:s,bottom:l,width:n,height:r}}function ke(e){try{e()}catch(t){}}var Ue=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=this.html,this.labelElement.addEventListener("click",t=>{t.preventDefault(),this.toggle()}),this.checkboxElement.addEventListener("change",t=>this.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}toggle(){this.checked?this.uncheck():this.check()}check(){this.checkboxElement.checked=!0,this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}uncheck(){this.checkboxElement.checked=!1,this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}get name(){return this.getAttribute("name")}get checked(){return this.checkboxElement.checked}get checkboxElement(){return this.shadowRoot.querySelector("input")}get labelElement(){return this.shadowRoot.querySelector("label")}get html(){return`
|
11
11
|
<style>${this.stylesheet}</style>
|
12
12
|
<div>
|
13
13
|
<input name="checkbox" type="checkbox">
|
@@ -238,5 +238,5 @@ ${n?'Expression: "'+n+`"
|
|
238
238
|
<b>View Stack</b>
|
239
239
|
</div>
|
240
240
|
${i}
|
241
|
-
`;let s=Cn(r,o,i,{backgroundColor:"lavender",color:"blueviolet"}),l=Ct(this.triggerElement),a=Math.ceil(l.top-s.offsetHeight*2),u=Math.ceil(l.left+l.width+s.offsetWidth/3);return s.style.top=`${a}px`,s.style.left=`${u}px`,s.line=new LeaderLine(this.triggerElement,s,K(J({},this.leaderLineOptions),{color:"blueviolet"})),t&&(s.lineToTarget=new LeaderLine(s,t,K(J({},this.leaderLineOptions),{color:"blueviolet",middleLabel:"toggles",size:2.1})),t.drag.onMove=()=>{t.line.position(),s.lineToTarget.position(),s.lineToRendering.position()}),n&&(s.lineToRendering=new LeaderLine(s,n,K(J({},this.leaderLineOptions),{color:"blueviolet",middleLabel:"renders & morphs",size:2.1})),n.drag.onMove=()=>{n.line.position(),s.lineToTarget&&s.lineToTarget.position(),s.lineToRendering.position()}),s.drag=new PlainDraggable(s),s.drag.onMove=()=>{s.line.position(),s.lineToTarget&&s.lineToTarget.position(),s.lineToRendering&&s.lineToRendering.position()},s}get leaderLineOptions(){return{dash:{animation:!0},dropShadow:{opacity:.3},endPlug:"arrow3",endPlugSize:1.7,size:3,startPlug:"disc",startPlugSize:1}}};var Ye=class extends de{connectedCallback(){super.connectedCallback(),this.targetElement&&this.targetElement.setAttribute("aria-labeledby",this.id);let{start:t}=TurboBoost.Commands.events;this.commandStartHandler=this.onCommandStart.bind(this),this.addEventListener(t,this.commandStartHandler);let{before:n}=TurboBoost.Streams.invokeEvents;this.beforeInvokeHandler=this.onBeforeInvoke.bind(this),addEventListener(n,this.beforeInvokeHandler),this.initializeDevtool()}disconnectedCallback(){let{start:t}=TurboBoost.Commands.events;this.removeEventListener(t,this.commandStartHandler);let{before:n}=TurboBoost.Streams.invokeEvents;removeEventListener(n,this.beforeInvokeHandler),this.devtool.hide({active:!1}),this.devtool.unregisterEventListeners(),delete this.devtool}initializeDevtool(){let t=()=>this.devtool.show();addEventListener("turbo-boost:devtools-start",()=>{this.devtool=new Ze(this),this.addEventListener("mouseenter",t)}),addEventListener("turbo-boost:devtools-stop",()=>{this.removeEventListener("mouseenter",t),this.devtool.hide({active:!1}),this.devtool.unregisterEventListeners(),delete this.devtool}),this.dispatchEvent(new CustomEvent("turbo-boost:devtools-connect",{bubbles:!0}))}hideDevtool(){this.devtool&&this.devtool.hide({active:!1})}onCommandStart(t){this.targetElement.setAttribute("aria-labeledby",this.id),this.targetElement.collapseMatches(),this.targetElement.busy=!0,this.busy=!0}onBeforeInvoke(t){if(t.detail.method!=="morph"||t.target.id!==this.morphs)return;let n=Date.now()-this.busyStartedAt,
|
241
|
+
`;let s=Cn(r,o,i,{backgroundColor:"lavender",color:"blueviolet"}),l=Ct(this.triggerElement),a=Math.ceil(l.top-s.offsetHeight*2),u=Math.ceil(l.left+l.width+s.offsetWidth/3);return s.style.top=`${a}px`,s.style.left=`${u}px`,s.line=new LeaderLine(this.triggerElement,s,K(J({},this.leaderLineOptions),{color:"blueviolet"})),t&&(s.lineToTarget=new LeaderLine(s,t,K(J({},this.leaderLineOptions),{color:"blueviolet",middleLabel:"toggles",size:2.1})),t.drag.onMove=()=>{t.line.position(),s.lineToTarget.position(),s.lineToRendering.position()}),n&&(s.lineToRendering=new LeaderLine(s,n,K(J({},this.leaderLineOptions),{color:"blueviolet",middleLabel:"renders & morphs",size:2.1})),n.drag.onMove=()=>{n.line.position(),s.lineToTarget&&s.lineToTarget.position(),s.lineToRendering.position()}),s.drag=new PlainDraggable(s),s.drag.onMove=()=>{s.line.position(),s.lineToTarget&&s.lineToTarget.position(),s.lineToRendering&&s.lineToRendering.position()},s}get leaderLineOptions(){return{dash:{animation:!0},dropShadow:{opacity:.3},endPlug:"arrow3",endPlugSize:1.7,size:3,startPlug:"disc",startPlugSize:1}}};var Ye=class extends de{connectedCallback(){super.connectedCallback(),this.targetElement&&this.targetElement.setAttribute("aria-labeledby",this.id);let{start:t}=TurboBoost.Commands.events;this.commandStartHandler=this.onCommandStart.bind(this),this.addEventListener(t,this.commandStartHandler);let{before:n}=TurboBoost.Streams.invokeEvents;this.beforeInvokeHandler=this.onBeforeInvoke.bind(this),addEventListener(n,this.beforeInvokeHandler),this.initializeDevtool()}disconnectedCallback(){let{start:t}=TurboBoost.Commands.events;this.removeEventListener(t,this.commandStartHandler);let{before:n}=TurboBoost.Streams.invokeEvents;removeEventListener(n,this.beforeInvokeHandler),this.devtool.hide({active:!1}),this.devtool.unregisterEventListeners(),delete this.devtool}initializeDevtool(){let t=()=>this.devtool.show();addEventListener("turbo-boost:devtools-start",()=>{this.devtool=new Ze(this),this.addEventListener("mouseenter",t)}),addEventListener("turbo-boost:devtools-stop",()=>{this.removeEventListener("mouseenter",t),this.devtool.hide({active:!1}),this.devtool.unregisterEventListeners(),delete this.devtool}),this.dispatchEvent(new CustomEvent("turbo-boost:devtools-connect",{bubbles:!0}))}hideDevtool(){this.devtool&&this.devtool.hide({active:!1})}onCommandStart(t){this.targetElement.setAttribute("aria-labeledby",this.id),this.targetElement.collapseMatches(),this.targetElement.busy=!0,this.busy=!0}onBeforeInvoke(t){if(t.detail.method!=="morph"||t.target.id!==this.morphs)return;let n=`turbo-boost-toggle-target[aria-labeledby="${this.id}"]`;if(!t.target.querySelector(n))return;let r=Date.now()-this.busyStartedAt,o=Tn-r;o<10&&(o=10),t.detail.invoke={delay:o},setTimeout(()=>{this.busy=!1,this.targetElement.busy=!1,this.morphToggleElements.forEach(i=>i.busy=!1)},o-10),setTimeout(()=>{this.targetElement.setAttribute("aria-labeledby",this.id),this.targetElement.applyFocus()},o+100)}get sharedViews(){if(!this.targetElement)return[];if(!this.targetElement.viewStack)return[];let t=(n,r)=>(this.targetElement.viewStack.includes(r)&&n.push(r),n);return this.viewStack.reduce(t.bind(this),[])}get renders(){return this.getAttribute("renders")}get morphs(){return this.getAttribute("morphs")}get morphElement(){return this.morphs?document.getElementById(this.morphs):null}get morphToggleElements(){return Array.from(this.morphElement.querySelectorAll("turbo-boost-toggle-trigger,turbo-boost-toggle-target"))}get controls(){return this.getAttribute("aria-controls")}get targetElement(){return this.controls?document.getElementById(this.controls):null}get collapseSelector(){return this.getAttribute("collapse-selector")}get focusSelector(){return this.getAttribute("focus-selector")||this.targetElement.getAttribute("focus-selector")}get remember(){return this.getAttribute("remember")==="true"}set remember(t){return this.setAttribute("remember",!!t)}get expanded(){return this.getAttribute("aria-expanded")==="true"}set expanded(t){this.setAttribute("aria-expanded",!!t)}get collapsed(){return!this.expanded}};customElements.define("turbo-boost",ce);customElements.define("turbo-boost-toggle-target",We);customElements.define("turbo-boost-toggle-trigger",Ye);var{restart:Ul,start:Jl,stop:Kl}=Ge,So={restart:Ul,start:Jl,stop:Kl};self.TurboBoost=self.TurboBoost||{};self.TurboBoost.devtools=So;self.TurboBoost.Elements={};var Wa=self.TurboBoost.Elements;export{Wa as default};
|
242
242
|
//# sourceMappingURL=elements.js.map
|