From e89ef8b5a72d59331e93b42cb00747a6eeef7db8 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Wed, 5 Aug 2020 03:03:37 +0530 Subject: [PATCH] Added context menu component --- Standard UI Components/components.js | 353 ++++++++++++++++++++++++--- 1 file changed, 324 insertions(+), 29 deletions(-) diff --git a/Standard UI Components/components.js b/Standard UI Components/components.js index b97cad5..0d2514d 100644 --- a/Standard UI Components/components.js +++ b/Standard UI Components/components.js @@ -404,14 +404,22 @@ smTabs.innerHTML = ` display: flex; } .tabs{ + position: relative; + display: grid; + grid-template-rows: auto 1fr; +} +.panel-container{ + position: relative; display: flex; flex-direction: column; width: 100%; - position: relative; overflow: hidden auto; } .tab-header{ - display: flex; + display: grid; + grid-auto-flow: column; + justify-content: flex-start; + gap: 1rem; position: relative; overflow: auto hidden; max-width: 100%; @@ -460,11 +468,13 @@ slot[name="panel"]::slotted(.hide-completely){ }
-
+
Nothing to see here
- Nothing to see here +
+ Nothing to see here +
`; @@ -595,6 +605,15 @@ customElements.define('sm-tabs', class extends HTMLElement { } this.prevTab = e.target; }) + let resizeObserver = new ResizeObserver(entries => { + entries.forEach((entry) => { + if (this.prevTab) { + let tabDimensions = this.prevTab.getBoundingClientRect(); + this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) + } + }) + }) + resizeObserver.observe(this) let observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { @@ -604,21 +623,21 @@ customElements.define('sm-tabs', class extends HTMLElement { }) if (activeElement.length) { let tabDimensions = activeElement[0].getBoundingClientRect(); - this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) + this.indicator.setAttribute('style', `transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) } else { this.tabSlot.assignedElements()[0].classList.add('active') this.panelSlot.assignedElements()[0].classList.remove('hide-completely') let tabDimensions = this.tabSlot.assignedElements()[0].getBoundingClientRect(); - this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) + this.indicator.setAttribute('style', `transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) this.prevTab = this.tabSlot.assignedElements()[0]; } } }) }, { threshold: 1.0 }) - observer.observe(this.tabHeader) - if (this.hasAttribute('enable-swipe') && this.getAttribute('enable-swipe') == 'true') { + observer.observe(this) + if (this.hasAttribute('enable-flick') && this.getAttribute('enable-flick') == 'true') { let touchStartTime = 0, touchEndTime = 0, swipeTimeThreshold = 200, @@ -1264,7 +1283,7 @@ smSelect.innerHTML = ` .icon{ margin-left: 1rem; } - :host([align-select="right"]) .options{ + :host([align-select="left"]) .options{ left: 0; } :host([align-select="right"]) .options{ @@ -1414,7 +1433,7 @@ customElements.define('sm-select', class extends HTMLElement { } }); document.addEventListener('mousedown', e => { - if (!this.contains(e.target)) { + if (!this.contains(e.target) && this.open) { this.collapse() } }) @@ -2073,32 +2092,32 @@ smCarousel.innerHTML = ` width: 2.6rem; border-radius: 3rem; padding: 0.9rem; - stroke: rgba(var(--text-color), 0.7); - stroke-width: 10; + stroke: rgba(var(--foreground-color), 0.8); + stroke-width: 14; overflow: visible; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; min-width: 0; z-index: 1; - background: rgba(var(--foreground-color), 1); - box-shadow: 0 0.2rem 0.2rem #00000020, + background: rgba(var(--text-color), 1); + box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040; -webkit-tap-highlight-color: transparent; - transition: transform 0.3s; + transform: scale(0) } .hide{ pointer-events: none; opacity: 0; } - .shrink{ - transform: scale(0) + .expand{ + transform: scale(1) } .previous-item{ - left: -1.3rem; + left: 1rem; } .next-item{ - right: -1.3rem; + right: 1rem; } .left,.right{ position: absolute; @@ -2120,7 +2139,8 @@ smCarousel.innerHTML = ` align-items: center; } .carousel{ - display: flex; + display: grid; + grid-auto-flow: column; max-width: 100%; overflow: auto hidden; scroll-snap-type: x mandatory; @@ -2136,9 +2156,6 @@ smCarousel.innerHTML = ` } :host([align-items="end"]) slot::slotted(*){ scroll-snap-align: end; - } - @media screen and (min-width: 640px){ - } @media (hover: hover){ .carousel{ @@ -2170,14 +2187,14 @@ smCarousel.innerHTML = `
- + Previous
- + Next @@ -2219,11 +2236,11 @@ customElements.define('sm-carousel', class extends HTMLElement{ this.scrollDistance = this.carouselContainer.getBoundingClientRect().width/3 const firstElementObserver = new IntersectionObserver(entries => { if (entries[0].isIntersecting){ - this.previousArrow.classList.add('hide', 'shrink') + this.previousArrow.classList.remove('expand') this.previousGradient.classList.add('hide') } else { - this.previousArrow.classList.remove('hide', 'shrink') + this.previousArrow.classList.add('expand') this.previousGradient.classList.remove('hide') } }, { @@ -2232,11 +2249,11 @@ customElements.define('sm-carousel', class extends HTMLElement{ }) const lastElementObserver = new IntersectionObserver(entries => { if (entries[0].isIntersecting){ - this.nextArrow.classList.add('hide', 'shrink') + this.nextArrow.classList.remove('expand') this.nextGradient.classList.add('hide') } else{ - this.nextArrow.classList.remove('hide', 'shrink') + this.nextArrow.classList.add('expand') this.nextGradient.classList.remove('hide') } }, { @@ -2597,4 +2614,282 @@ customElements.define('sm-notifications', class extends HTMLElement{ subtree: true }) } +}) +// sm-menu +const smMenu = document.createElement('template') +smMenu.innerHTML = ` + +
+
+ + options + + + + +
+
+ +
+
`; +customElements.define('sm-menu', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ mode: 'open' }).append(smMenu.content.cloneNode(true)) + } + static get observedAttributes() { + return ['value'] + } + get value() { + return this.getAttribute('value') + } + set value(val) { + this.setAttribute('value', val) + } + expand = () => { + if (!this.open) { + if (this.containerDimensions.left > this.containerDimensions.width) { + this.optionList.style.right = 0 + } + else { + this.optionList.style.right = 'auto' + } + this.optionList.classList.remove('hide') + this.optionList.classList.add('no-transformations') + this.open = true + this.icon.classList.add('focused') + } + } + collapse = () => { + if (this.open) { + this.open = false + this.icon.classList.remove('focused') + this.optionList.classList.add('hide') + this.optionList.classList.remove('no-transformations') + } + } + connectedCallback() { + this.availableOptions + this.containerDimensions + this.optionList = this.shadowRoot.querySelector('.options') + let slot = this.shadowRoot.querySelector('.options slot'), + menu = this.shadowRoot.querySelector('.menu') + this.icon = this.shadowRoot.querySelector('.icon') + this.open = false; + menu.addEventListener('click', e => { + if (!this.open) { + this.expand() + } else { + this.collapse() + } + }) + menu.addEventListener('keydown', e => { + if (e.code === 'ArrowDown' || e.code === 'ArrowRight') { + e.preventDefault() + this.availableOptions[0].focus() + } + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + if (!this.open) { + this.expand() + } else { + this.collapse() + } + } + }) + this.optionList.addEventListener('keydown', e => { + if (e.code === 'ArrowUp' || e.code === 'ArrowRight') { + e.preventDefault() + if (document.activeElement.previousElementSibling) { + document.activeElement.previousElementSibling.focus() + } + } + if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { + e.preventDefault() + if (document.activeElement.nextElementSibling) + document.activeElement.nextElementSibling.focus() + } + }) + this.optionList.addEventListener('click', e => { + this.collapse() + }) + slot.addEventListener('slotchange', e => { + this.availableOptions = slot.assignedElements() + this.containerDimensions = this.optionList.getBoundingClientRect() + this.menuDimensions = menu.getBoundingClientRect() + }); + window.addEventListener('mousedown', e => { + if (!this.contains(e.target) && e.button !== 2) { + this.collapse() + } + }) + if (this.hasAttribute('set-context') && this.getAttribute('set-context') === 'true'){ + this.parentNode.addEventListener('mouseup', e => { + if (e.button === 2) { + this.expand() + } + }) + } + const intersectionObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (!entry.isIntersecting && this.open) { + if(window.innerHeight - entry.intersectionRect.top < this.containerDimensions.height) + this.optionList.classList.add('moveUp') + else + this.optionList.classList.remove('moveUp') + if (entry.intersectionRect.left > this.containerDimensions.width) { + this.optionList.style.right = 0 + } + else { + this.optionList.style.right = 'auto' + } + } + }) + }, { + threshold: 1 + }) + intersectionObserver.observe(this.optionList) + } +}) + +// option +const smMenuOption = document.createElement('template') +smMenuOption.innerHTML = ` + +
+ +
`; +customElements.define('sm-menu-option', class extends HTMLElement { + constructor() { + super() + this.attachShadow({ mode: 'open' }).append(smMenuOption.content.cloneNode(true)) + } + + connectedCallback() { + this.addEventListener('keyup', e => { + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault() + this.click() + } + }) + this.setAttribute('tabindex', '0') + } }) \ No newline at end of file