diff --git a/components/dist/notifications.js b/components/dist/notifications.js index 79f20ee..bb81795 100644 --- a/components/dist/notifications.js +++ b/components/dist/notifications.js @@ -11,8 +11,8 @@ smNotifications.innerHTML = ` display: -webkit-box; display: -ms-flexbox; display: flex; - --icon-height: 2rem; - --icon-width: 2rem; + --icon-height: 1.5rem; + --icon-width: 1.5rem; } .hide{ opacity: 0 !important; @@ -147,7 +147,7 @@ customElements.define('sm-notifications', class extends HTMLElement { this.animationOptions = { duration: 300, fill: "forwards", - easing: "ease" + easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)" } this.push = this.push.bind(this) @@ -200,7 +200,7 @@ customElements.define('sm-notifications', class extends HTMLElement { opacity: '1' }, { - transform: `translateY(1rem)`, + transform: `translateY(0.5rem)`, opacity: '0' } ], this.animationOptions).onfinish = () => { diff --git a/components/dist/notifications.min.js b/components/dist/notifications.min.js index 4e4552d..151c9af 100644 --- a/components/dist/notifications.min.js +++ b/components/dist/notifications.min.js @@ -1 +1 @@ -const smNotifications=document.createElement("template");smNotifications.innerHTML='\n\n
\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"ease"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}createNotification(n,t){const{pinned:i=!1,icon:o=""}=t,e=document.createElement("div");e.classList.add("notification");let a="";return a+=`\n
${o}
\n

${n}

\n `,i&&(e.classList.add("pinned"),a+='\n \n '),e.innerHTML=a,e}push(n,t={}){const i=this.createNotification(n,t);this.notificationPanel.append(i),i.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions)}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(1rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}}); \ No newline at end of file +const smNotifications=document.createElement("template");smNotifications.innerHTML='\n\n
\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}createNotification(n,t){const{pinned:i=!1,icon:o=""}=t,e=document.createElement("div");e.classList.add("notification");let a="";return a+=`\n
${o}
\n

${n}

\n `,i&&(e.classList.add("pinned"),a+='\n \n '),e.innerHTML=a,e}push(n,t={}){const i=this.createNotification(n,t);this.notificationPanel.append(i),i.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions)}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(0.5rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}}); \ No newline at end of file diff --git a/components/dist/sm-spinner.js b/components/dist/sm-spinner.js new file mode 100644 index 0000000..28f659a --- /dev/null +++ b/components/dist/sm-spinner.js @@ -0,0 +1,48 @@ +const spinner = document.createElement('template') +spinner.innerHTML = ` + + + +` +class SquareLoader extends HTMLElement { + constructor() { + super(); + this.attachShadow({ + mode: 'open' + }).append(spinner.content.cloneNode(true)) + } +} + +window.customElements.define('sm-spinner', SquareLoader); \ No newline at end of file diff --git a/components/dist/sm-spinner.min.js b/components/dist/sm-spinner.min.js new file mode 100644 index 0000000..9f3ec1d --- /dev/null +++ b/components/dist/sm-spinner.min.js @@ -0,0 +1 @@ +const spinner=document.createElement("template");spinner.innerHTML='\n\n\n\n';class SquareLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SquareLoader); \ No newline at end of file diff --git a/components/dist/text-field.js b/components/dist/text-field.js new file mode 100644 index 0000000..49c7d68 --- /dev/null +++ b/components/dist/text-field.js @@ -0,0 +1,233 @@ +const textField = document.createElement('template') +textField.innerHTML = ` + +
+
+
+ + Edit + + + + Save + + +
+
+` + +customElements.define('text-field', class extends HTMLElement{ + constructor(){ + super() + this.attachShadow({ + mode: 'open' + }).append(textField.content.cloneNode(true)) + + this.textField = this.shadowRoot.querySelector('.text-field') + this.textContainer = this.textField.children[0] + this.iconsContainer = this.textField.children[1] + this.editButton = this.textField.querySelector('.edit-button') + this.saveButton = this.textField.querySelector('.save-button') + this.isTextEditable = false + this.isDisabled = false + + this.fireEvent = this.fireEvent.bind(this) + this.setEditable = this.setEditable.bind(this) + this.setNonEditable = this.setNonEditable.bind(this) + this.revert = this.revert.bind(this) + } + + static get observedAttributes(){ + return ['disable'] + } + + get value(){ + return this.text + } + set value(val) { + this.text = val + this.textContainer.textContent = val + this.setAttribute('value', val) + } + set disabled(val) { + this.isDisabled = val + if(this.isDisabled) + this.setAttribute('disable', '') + else + this.removeAttribute('disable') + } + fireEvent(value){ + let event = new CustomEvent('contentchanged', { + bubbles: true, + cancelable: true, + composed: true, + detail: { + value + } + }); + this.dispatchEvent(event); + } + + setEditable(){ + if(this.isTextEditable) return + this.textContainer.contentEditable = true + this.textContainer.classList.add('editable') + this.textContainer.focus() + document.execCommand('selectAll', false, null); + this.editButton.animate(this.rotateOut, this.animOptions).onfinish = () => { + this.editButton.classList.add('hide') + } + setTimeout(() => { + this.saveButton.classList.remove('hide') + this.saveButton.animate(this.rotateIn, this.animOptions) + }, 100); + this.isTextEditable = true + } + setNonEditable(){ + if (!this.isTextEditable) return + this.textContainer.contentEditable = false + this.textContainer.classList.remove('editable') + + if (this.text !== this.textContainer.textContent.trim()) { + this.setAttribute('value', this.textContainer.textContent) + this.text = this.textContainer.textContent.trim() + this.fireEvent(this.text) + } + this.saveButton.animate(this.rotateOut, this.animOptions).onfinish = () => { + this.saveButton.classList.add('hide') + } + setTimeout(() => { + this.editButton.classList.remove('hide') + this.editButton.animate(this.rotateIn, this.animOptions) + }, 100); + this.isTextEditable = false + } + + revert(){ + if (this.textContainer.isContentEditable) { + this.value = this.text + this.setNonEditable() + } + } + + connectedCallback(){ + this.text + if (this.hasAttribute('value')) { + this.text = this.getAttribute('value') + this.textContainer.textContent = this.text + } + if(this.hasAttribute('disable')) + this.isDisabled = true + else + this.isDisabled = false + + this.rotateOut = [ + { + transform: 'rotate(0)', + opacity: 1 + }, + { + transform: 'rotate(90deg)', + opacity: 0 + }, + ] + this.rotateIn = [ + { + transform: 'rotate(-90deg)', + opacity: 0 + }, + { + transform: 'rotate(0)', + opacity: 1 + }, + ] + this.animOptions = { + duration: 300, + easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)', + fill: 'forwards' + } + if (!this.isDisabled) { + this.iconsContainer.classList.remove('hide') + this.textContainer.addEventListener('dblclick', this.setEditable) + this.editButton.addEventListener('click', this.setEditable) + this.saveButton.addEventListener('click', this.setNonEditable) + } + } + attributeChangedCallback(name) { + if (name === 'disable') { + if (this.hasAttribute('disable')) { + this.iconsContainer.classList.add('hide') + this.textContainer.removeEventListener('dblclick', this.setEditable) + this.editButton.removeEventListener('click', this.setEditable) + this.saveButton.removeEventListener('click', this.setNonEditable) + this.revert() + } + else { + this.iconsContainer.classList.remove('hide') + this.textContainer.addEventListener('dblclick', this.setEditable) + this.editButton.addEventListener('click', this.setEditable) + this.saveButton.addEventListener('click', this.setNonEditable) + } + } + } + disconnectedCallback() { + this.textContainer.removeEventListener('dblclick', this.setEditable) + this.editButton.removeEventListener('click', this.setEditable) + this.saveButton.removeEventListener('click', this.setNonEditable) + } +}) \ No newline at end of file diff --git a/components/dist/text-field.min.js b/components/dist/text-field.min.js new file mode 100644 index 0000000..6b1e732 --- /dev/null +++ b/components/dist/text-field.min.js @@ -0,0 +1 @@ +const textField=document.createElement("template");textField.innerHTML='\n\n
\n
\n
\n \n Edit\n \n \n \n Save\n \n \n
\n
\n',customElements.define("text-field",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(textField.content.cloneNode(!0)),this.textField=this.shadowRoot.querySelector(".text-field"),this.textContainer=this.textField.children[0],this.iconsContainer=this.textField.children[1],this.editButton=this.textField.querySelector(".edit-button"),this.saveButton=this.textField.querySelector(".save-button"),this.isTextEditable=!1,this.isDisabled=!1,this.fireEvent=this.fireEvent.bind(this),this.setEditable=this.setEditable.bind(this),this.setNonEditable=this.setNonEditable.bind(this),this.revert=this.revert.bind(this)}static get observedAttributes(){return["disable"]}get value(){return this.text}set value(t){this.text=t,this.textContainer.textContent=t,this.setAttribute("value",t)}set disabled(t){this.isDisabled=t,this.isDisabled?this.setAttribute("disable",""):this.removeAttribute("disable")}fireEvent(t){let e=new CustomEvent("contentchanged",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:t}});this.dispatchEvent(e)}setEditable(){this.isTextEditable||(this.textContainer.contentEditable=!0,this.textContainer.classList.add("editable"),this.textContainer.focus(),document.execCommand("selectAll",!1,null),this.editButton.animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.editButton.classList.add("hide")}),setTimeout(()=>{this.saveButton.classList.remove("hide"),this.saveButton.animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!0)}setNonEditable(){this.isTextEditable&&(this.textContainer.contentEditable=!1,this.textContainer.classList.remove("editable"),this.text!==this.textContainer.textContent.trim()&&(this.setAttribute("value",this.textContainer.textContent),this.text=this.textContainer.textContent.trim(),this.fireEvent(this.text)),this.saveButton.animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.saveButton.classList.add("hide")}),setTimeout(()=>{this.editButton.classList.remove("hide"),this.editButton.animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!1)}revert(){this.textContainer.isContentEditable&&(this.value=this.text,this.setNonEditable())}connectedCallback(){this.text,this.hasAttribute("value")&&(this.text=this.getAttribute("value"),this.textContainer.textContent=this.text),this.hasAttribute("disable")?this.isDisabled=!0:this.isDisabled=!1,this.rotateOut=[{transform:"rotate(0)",opacity:1},{transform:"rotate(90deg)",opacity:0}],this.rotateIn=[{transform:"rotate(-90deg)",opacity:0},{transform:"rotate(0)",opacity:1}],this.animOptions={duration:300,easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)",fill:"forwards"},this.isDisabled||(this.iconsContainer.classList.remove("hide"),this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.setEditable),this.saveButton.addEventListener("click",this.setNonEditable))}attributeChangedCallback(t){"disable"===t&&(this.hasAttribute("disable")?(this.iconsContainer.classList.add("hide"),this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.setEditable),this.saveButton.removeEventListener("click",this.setNonEditable),this.revert()):(this.iconsContainer.classList.remove("hide"),this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.setEditable),this.saveButton.addEventListener("click",this.setNonEditable)))}disconnectedCallback(){this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.setEditable),this.saveButton.removeEventListener("click",this.setNonEditable)}}); \ No newline at end of file diff --git a/components/index.html b/components/index.html index 3d3c96d..d77b3d7 100644 --- a/components/index.html +++ b/components/index.html @@ -309,6 +309,14 @@ option3 +
+

Spinner

+

+ <sm-select> is very similar to starndatd HTML5 select and it's markup stucture is + also identical. +

+ +

Strip select

@@ -375,6 +383,13 @@

+
+

Text field

+

+ To start using SM Components +

+ +