From 315ad0319d6086fd7835b0a6b1986448b43c83ca Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Sat, 21 Nov 2020 01:49:41 +0530 Subject: [PATCH] Latest changes --- .gitattributes | 2 + components.js | 3960 ++++++++-------- corona.jpg | Bin 0 -> 148918 bytes css/main.css | 460 ++ css/main.min.css | 1 + css/main.scss | 426 ++ illustrations.ai | 2352 ++++++++++ index.html | 10892 +++------------------------------------------ loader.svg | 19 + logo.png | Bin 0 -> 2210 bytes logo.svg | 11 + morning.svg | 20 + night.svg | 38 + noon.svg | 36 + 14 files changed, 5938 insertions(+), 12279 deletions(-) create mode 100644 .gitattributes create mode 100644 corona.jpg create mode 100644 css/main.css create mode 100644 css/main.min.css create mode 100644 css/main.scss create mode 100644 illustrations.ai create mode 100644 loader.svg create mode 100644 logo.png create mode 100644 logo.svg create mode 100644 morning.svg create mode 100644 night.svg create mode 100644 noon.svg diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/components.js b/components.js index ee35e17..a983140 100644 --- a/components.js +++ b/components.js @@ -1,105 +1,118 @@ //Button const smButton = document.createElement('template') smButton.innerHTML = ` - -
- -
`; + } +} + +
+ +
`; customElements.define('sm-button', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smButton.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smButton.content.cloneNode(true)) } get disabled() { @@ -111,8 +124,7 @@ customElements.define('sm-button', this.isDisabled = true this.setAttribute('disabled', '') this.button.removeAttribute('tabindex') - } - else if (!value && this.isDisabled) { + } else if (!value && this.isDisabled) { this.isDisabled = false this.removeAttribute('disabled') } @@ -124,8 +136,7 @@ customElements.define('sm-button', bubbles: true, composed: true })) - } - else { + } else { this.dispatchEvent(new CustomEvent('clicked', { bubbles: true, composed: true @@ -151,164 +162,211 @@ customElements.define('sm-button', //Input const smInput = document.createElement('template') smInput.innerHTML = ` - -
- -
-
+} +input{ + font-size: 1rem; + border: none; + background: transparent; + outline: none; + color: rgba(var(--text-color), 1); + width: 100%; +} +.animate-label .container input { + -webkit-transform: translateY(0.6rem); + -ms-transform: translateY(0.6rem); + transform: translateY(0.6rem); + } + +.animate-label .container .label { + -webkit-transform: translateY(-0.6rem) scale(0.8); + -ms-transform: translateY(-0.6rem) scale(0.8); + transform: translateY(-0.6rem) scale(0.8); + opacity: 1; + color: var(--accent-color) +} +.feedback-text{ + font-size: 0.9rem; + width: 100%; + color: var(--error-color); + background: rgba(var(--foreground-color), 1); + padding: 0.6rem 1rem; + text-align: left; +} +.feedback-text:empty{ + padding: 0; +} +@media (any-hover: hover){ + .icon:hover{ + background: rgba(var(--text-color), 0.1); + } +} + +
+ + +
`; customElements.define('sm-input', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smInput.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smInput.content.cloneNode(true)) } static get observedAttributes() { return ['placeholder'] @@ -340,14 +398,47 @@ customElements.define('sm-input', return this.shadowRoot.querySelector('input').checkValidity() } - preventNonNumericalInput(e) { - let keyCode = e.keyCode; - if (!((keyCode > 47 && keyCode < 56) || (keyCode > 36 && keyCode < 39) || (keyCode > 95 && keyCode < 104) || keyCode === 110 || (keyCode > 7 && keyCode < 19))) { - e.preventDefault(); + get validity() { + return this.shadowRoot.querySelector('input').validity + } + + set disabled(value) { + if (value) + this.shadowRoot.querySelector('.input').classList.add('disabled') + else + this.shadowRoot.querySelector('.input').classList.remove('disabled') + } + set readOnly(value) { + if (value) { + this.shadowRoot.querySelector('input').setAttribute('readonly', '') + this.shadowRoot.querySelector('.input').classList.add('readonly') + } else { + this.shadowRoot.querySelector('input').removeAttribute('readonly') + this.shadowRoot.querySelector('.input').classList.remove('readonly') } } - fireEvent() { + setValidity = (message) => { + this.feedbackText.textContent = message + } + + showValidity = () => { + this.feedbackText.classList.remove('hide-completely') + } + + hideValidity = () => { + this.feedbackText.classList.add('hide-completely') + } + + focusIn = () => { + this.input.focus() + } + + focusOut = () => { + this.input.blur() + } + + fireEvent = () => { let event = new Event('input', { bubbles: true, cancelable: true, @@ -356,9 +447,8 @@ customElements.define('sm-input', this.dispatchEvent(event); } - checkInput() { - if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') - return; + checkInput = (e) => { + if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return; if (this.input.value !== '') { if (this.animate) this.inputParent.classList.add('animate-label') @@ -366,8 +456,7 @@ customElements.define('sm-input', this.label.classList.add('hide') if (!this.readonly) this.clearBtn.classList.remove('hide') - } - else { + } else { if (this.animate) this.inputParent.classList.remove('animate-label') else @@ -375,16 +464,6 @@ customElements.define('sm-input', if (!this.readonly) this.clearBtn.classList.add('hide') } - /*if (this.valueChanged) { - if (this.input.checkValidity()) { - this.helperText.classList.add('hide') - this.inputParent.style.boxShadow = `` - } - else { - this.helperText.classList.remove('hide') - this.inputParent.style.boxShadow = `0 0 0 0.1rem ${this.computedStyle.getPropertyValue('--error-color')}` - } - }*/ } @@ -392,49 +471,65 @@ customElements.define('sm-input', this.inputParent = this.shadowRoot.querySelector('.input') this.clearBtn = this.shadowRoot.querySelector('.clear') this.label = this.shadowRoot.querySelector('.label') - this.helperText = this.shadowRoot.querySelector('.helper-text') + this.feedbackText = this.shadowRoot.querySelector('.feedback-text') this.valueChanged = false; this.readonly = false + this.isNumeric = false + this.min + this.max this.animate = this.hasAttribute('animate') this.input = this.shadowRoot.querySelector('input') this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') if (this.hasAttribute('value')) { this.input.value = this.getAttribute('value') - this.checkInput() + this.checkInput(e) } if (this.hasAttribute('required')) { this.input.setAttribute('required', '') } + if (this.hasAttribute('min')) { + let minValue = this.getAttribute('min') + this.input.setAttribute('min', minValue) + this.min = parseInt(minValue) + } + if (this.hasAttribute('max')) { + let maxValue = this.getAttribute('max') + this.input.setAttribute('max', maxValue) + this.max = parseInt(maxValue) + } + if (this.hasAttribute('minlength')) { + let minValue = this.getAttribute('minlength') + this.input.setAttribute('minlength', minValue) + } + if (this.hasAttribute('maxlength')) { + let maxValue = this.getAttribute('maxlength') + this.input.setAttribute('maxlength', maxValue) + } + if (this.hasAttribute('pattern')) { + this.input.setAttribute('pattern', this.getAttribute('pattern')) + } if (this.hasAttribute('readonly')) { this.input.setAttribute('readonly', '') this.readonly = true } - if (this.hasAttribute('helper-text')) { - this.helperText.textContent = this.getAttribute('helper-text') + if (this.hasAttribute('disabled')) { + this.inputParent.classList.add('disabled') + } + if (this.hasAttribute('error-text')) { + this.feedbackText.textContent = this.getAttribute('error-text') } if (this.hasAttribute('type')) { if (this.getAttribute('type') === 'number') { this.input.setAttribute('inputmode', 'numeric') - } - else + this.input.setAttribute('type', 'number') + this.isNumeric = true + } else this.input.setAttribute('type', this.getAttribute('type')) - } - else + } else this.input.setAttribute('type', 'text') - this.input.addEventListener('keydown', e => { - if (this.getAttribute('type') === 'number') - this.preventNonNumericalInput(e); - }) this.input.addEventListener('input', e => { - this.checkInput() + this.checkInput(e) }) - /*this.input.addEventListener('change', e => { - this.valueChanged = true; - if (this.input.checkValidity()) - this.helperText.classList.add('hide') - else - this.helperText.classList.remove('hide') - })*/ this.clearBtn.addEventListener('click', e => { this.value = '' }) @@ -442,8 +537,10 @@ customElements.define('sm-input', attributeChangedCallback(name, oldValue, newValue) { if (oldValue !== newValue) { - if (name === 'placeholder') + if (name === 'placeholder') { this.shadowRoot.querySelector('.label').textContent = newValue; + this.setAttribute('aria-label', newValue); + } } } }) @@ -451,119 +548,149 @@ customElements.define('sm-input', //textarea const smTextarea = document.createElement('template') smTextarea.innerHTML = ` - - + opacity: .7; + font-weight: 400; + font-size: 1rem; + position: absolute; + top: 0.9rem; + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + -o-transition: transform 0.3s; + transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; + -webkit-transform-origin: left; + -ms-transform-origin: left; + transform-origin: left; + pointer-events: none; + white-space: nowrap; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + width: 100%; + will-change: transform; +} +textarea{ + font-size: 1rem; + border: none; + background: transparent; + outline: none; + color: rgba(var(--text-color), 1); + width: 100%; + font-family: inherit; + line-height: 1.6; +} +.animate-label textarea { + -webkit-transform: translateY(0.6rem); + -ms-transform: translateY(0.6rem); + transform: translateY(0.6rem); +} + +.animate-label .label { + -webkit-transform: translateY(-0.6rem) scale(0.8); + -ms-transform: translateY(-0.6rem) scale(0.8); + transform: translateY(-0.6rem) scale(0.8); + opacity: 1; + color: var(--accent-color) +} +.clear{ + -ms-flex-item-align: start; + align-self: flex-start; +} +@media (any-hover: hover){ + .icon:hover{ + background: rgba(var(--text-color), 0.1); + } +} + + `; customElements.define('sm-textarea', class extends HTMLElement { constructor() { super() - this.attachShadow({ mode: 'open' }).append(smTextarea.content.cloneNode(true)) + this.attachShadow({ + mode: 'open' + }).append(smTextarea.content.cloneNode(true)) } static get observedAttributes() { return ['placeholder'] @@ -600,20 +727,17 @@ customElements.define('sm-textarea', if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return; if (this.input.value !== '') { + this.clearBtn.classList.remove('hide') if (this.animate) this.inputParent.classList.add('animate-label') else this.label.classList.add('hide') - if (!this.readonly) - this.clearBtn.classList.remove('hide') - } - else { + } else { + this.clearBtn.classList.add('hide') if (this.animate) this.inputParent.classList.remove('animate-label') else this.label.classList.remove('hide') - if (!this.readonly) - this.clearBtn.classList.add('hide') } this.input.style.height = 'auto' @@ -625,9 +749,7 @@ customElements.define('sm-textarea', this.inputParent = this.shadowRoot.querySelector('.input') this.clearBtn = this.shadowRoot.querySelector('.clear') this.label = this.shadowRoot.querySelector('.label') - this.helperText = this.shadowRoot.querySelector('.helper-text') this.valueChanged = false; - this.readonly = false this.animate = this.hasAttribute('animate') this.input = this.shadowRoot.querySelector('textarea') this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') @@ -643,15 +765,7 @@ customElements.define('sm-textarea', } if (this.hasAttribute('readonly')) { this.input.setAttribute('readonly', '') - this.readonly = true } - if (this.hasAttribute('helper-text')) { - this.helperText.textContent = this.getAttribute('helper-text') - } - this.input.addEventListener('keydown', e => { - if (this.getAttribute('type') === 'number') - this.preventNonNumericalInput(e); - }) this.input.addEventListener('input', e => { this.checkInput() }) @@ -668,336 +782,68 @@ customElements.define('sm-textarea', } }) -const smTabs = document.createElement('template') -smTabs.innerHTML = ` - -
-
- Nothing to see here -
-
-
- Nothing to see here -
-
-`; - -customElements.define('sm-tabs', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ mode: 'open' }).append(smTabs.content.cloneNode(true)) - this.indicator = this.shadowRoot.querySelector('.indicator'); - this.tabSlot = this.shadowRoot.querySelector('slot[name="tab"]'); - this.panelSlot = this.shadowRoot.querySelector('slot[name="panel"]'); - this.tabHeader = this.shadowRoot.querySelector('.tab-header'); - } - connectedCallback() { - - //animations - let flyInLeft = [ - { - opacity: 0, - transform: 'translateX(-1rem)' - }, - { - opacity: 1, - transform: 'none' - } - ], - flyInRight = [ - { - opacity: 0, - transform: 'translateX(1rem)' - }, - { - opacity: 1, - transform: 'none' - } - ], - flyOutLeft = [ - { - opacity: 1, - transform: 'none' - }, - { - opacity: 0, - transform: 'translateX(-1rem)' - } - ], - flyOutRight = [ - { - opacity: 1, - transform: 'none' - }, - { - opacity: 0, - transform: 'translateX(1rem)' - } - ], - animationOptions = { - duration: 300, - fill: 'forwards', - easing: 'ease' - } - this.prevTab - this.allTabs - - this.shadowRoot.querySelector('slot[name="panel"]').addEventListener('slotchange', () => { - this.shadowRoot.querySelector('slot[name="panel"]').assignedElements().forEach((panel, index) => { - panel.classList.add('hide-completely') - }) - }) - this.shadowRoot.querySelector('slot[name="tab"]').addEventListener('slotchange', () => { - this.allTabs = this.shadowRoot.querySelector('slot[name="tab"]').assignedElements(); - this.shadowRoot.querySelector('slot[name="tab"]').assignedElements().forEach((panel, index) => { - panel.setAttribute('rank', index + 1) - }) - }) - this._targetBodyFlyRight = (targetBody) => { - targetBody.classList.remove('hide-completely') - targetBody.animate(flyInRight, animationOptions) - } - this._targetBodyFlyLeft = (targetBody) => { - targetBody.classList.remove('hide-completely') - targetBody.animate(flyInLeft, animationOptions) - } - this.tabSlot.addEventListener('click', e => { - if (e.target === this.prevTab || !e.target.closest('sm-tab')) - return - if (this.prevTab) - this.prevTab.classList.remove('active') - e.target.classList.add('active') - - e.target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }) - this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) - - if (this.prevTab) { - let targetBody = e.target.nextElementSibling, - currentBody = this.prevTab.nextElementSibling; - - if (this.prevTab.getAttribute('rank') < e.target.getAttribute('rank')) { - if (currentBody && !targetBody) - currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - } - else if (targetBody && !currentBody) { - this._targetBodyFlyRight(targetBody) - } - else if (currentBody && targetBody) { - currentBody.animate(flyOutLeft, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - this._targetBodyFlyRight(targetBody) - } - } - } else { - if (currentBody && !targetBody) - currentBody.animate(flyOutRight, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - } - else if (targetBody && !currentBody) { - this._targetBodyFlyLeft(targetBody) - } - else if (currentBody && targetBody) { - currentBody.animate(flyOutRight, animationOptions).onfinish = () => { - currentBody.classList.add('hide-completely') - this._targetBodyFlyLeft(targetBody) - } - } - } - } else { - e.target.nextElementSibling.classList.remove('hide-completely') - } - 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) => { - this.indicator.style.transition = 'none' - if (entry.isIntersecting) { - let activeElement = this.tabSlot.assignedElements().filter(element => { - if (element.classList.contains('active')) - return true - }) - 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)`) - } - 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.prevTab = this.tabSlot.assignedElements()[0]; - } - } - }) - }, - { threshold: 1.0 }) - observer.observe(this) - if (this.hasAttribute('enable-flick') && this.getAttribute('enable-flick') == 'true') { - let touchStartTime = 0, - touchEndTime = 0, - swipeTimeThreshold = 200, - swipeDistanceThreshold = 20, - startingPointX = 0, - endingPointX = 0, - currentIndex = 0; - this.addEventListener('touchstart', e => { - touchStartTime = e.timeStamp - startingPointX = e.changedTouches[0].clientX - }) - this.panelSlot.addEventListener('touchend', e => { - touchEndTime = e.timeStamp - endingPointX = e.changedTouches[0].clientX - if (touchEndTime - touchStartTime < swipeTimeThreshold) { - currentIndex = this.allTabs.findIndex(element => element.classList.contains('active')) - if (startingPointX > endingPointX && startingPointX - endingPointX > swipeDistanceThreshold && currentIndex < this.allTabs.length) { - this.allTabs[currentIndex + 1].click() - } - else if (startingPointX < endingPointX && endingPointX - startingPointX > swipeDistanceThreshold && currentIndex > 0) { - this.allTabs[currentIndex - 1].click() - } - } - }) - } - } -}) - // tab const smTab = document.createElement('template') smTab.innerHTML = `
- +
`; customElements.define('sm-tab', class extends HTMLElement { constructor() { super() - this.shadow = this.attachShadow({ mode: 'open' }).append(smTab.content.cloneNode(true)) + this.shadow = this.attachShadow({ + mode: 'open' + }).append(smTab.content.cloneNode(true)) } }) @@ -1006,74 +852,83 @@ customElements.define('sm-tab', class extends HTMLElement { const smCheckbox = document.createElement('template') smCheckbox.innerHTML = `