turbo_boost-elements 0.0.10 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|