diff --git a/README.md b/README.md index e3d3ed07..94e96168 100644 --- a/README.md +++ b/README.md @@ -11,19 +11,19 @@ ## List of Elements: -| Elements | Description | Size | Test | +| Elements | Description | Size | Test | | :------------------------------------------------------ | :------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :-----------------------------------------------: | | [sifrr-stater](./elements/sifrr-stater) | State manager for sifrr elements, save them to storage, replay state changes, travel to past state | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-stater/dist/sifrrstater.min.js?compression=gzip&maxAge=60)](./elements/sifrr-stater/dist/sifrrstater.min.js) | [WIP] | -| [sifrr-tab-container](./elements/sifrr-tab-container) | Scrollable tabs container | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-tab-container/dist/sifrrtabcontainer.min.js?compression=gzip&maxAge=60)](./elements/sifrr-tab-container/dist/sifrrtabcontainer.min.js) | [OK](./elements/sifrr-tab-container/test/public) | +| [sifrr-tab-container](./elements/sifrr-tab-container) | Scrollable tabs container | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-tab-container/dist/sifrrtabcontainer.min.js?compression=gzip&maxAge=60)](./elements/sifrr-tab-container/dist/sifrrtabcontainer.min.js) | [OK](./elements/sifrr-tab-container/test/public) | | [sifrr-tab-header](./elements/sifrr-tab-header) | Scrollable tabs header that can be used with container | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-tab-header/dist/sifrrtabheader.min.js?compression=gzip&maxAge=60)](./elements/sifrr-tab-header/dist/sifrrtabheader.min.js) | [OK](./elements/sifrr-tab-header/test/public) | -| [sifrr-carousel](./elements/sifrr-carousel) | Simple carousel with preview using tabs | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-carousel/dist/sifrrcarousel.min.js?compression=gzip&maxAge=60)](./elements/sifrr-carousel/dist/sifrrcarousel.min.js) | [WIP](./elements/sifrr-carousel/test/public) | +| [sifrr-carousel](./elements/sifrr-carousel) | Simple carousel with preview using tabs | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-carousel/dist/sifrrcarousel.min.js?compression=gzip&maxAge=60)](./elements/sifrr-carousel/dist/sifrrcarousel.min.js) | [WIP](./elements/sifrr-carousel/test/public) | | [sifrr-lazy-picture](./elements/sifrr-lazy-picture) | Lazy loading pictures when in view | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-lazy-picture/dist/sifrrlazypicture.min.js?compression=gzip&maxAge=60)](./elements/sifrr-lazy-picture/dist/sifrrlazypicture.min.js) | [OK](./elements/sifrr-lazy-picture/test/public) | | [sifrr-lazy-img](./elements/sifrr-lazy-img) | Lazy loading images when in view | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-lazy-img/dist/sifrrlazyimg.min.js?compression=gzip&maxAge=60)](./elements/sifrr-lazy-img/dist/sifrrlazyimg.min.js) | [OK](./elements/sifrr-lazy-img/test/public) | | [sifrr-progress-round](./elements/sifrr-progress-round) | Circular progress circle | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-progress-round/dist/sifrrprogressround.min.js?compression=gzip&maxAge=60)](./elements/sifrr-progress-round/dist/sifrrprogressround.min.js) | [OK](./elements/sifrr-progress-round/test/public) | | [sifrr-code-editor](./elements/sifrr-code-editor) | Code editor with syntax highlighting using highlight.js | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-code-editor/dist/sifrrcodeeditor.min.js?compression=gzip&maxAge=60)](./elements/sifrr-code-editor/dist/sifrrcodeeditor.min.js) | [WIP] | | [sifrr-showcase](./elements/sifrr-showcase) | Showcase sifrr-dom elements | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-showcase/dist/sifrrshowcase.min.js?compression=gzip&maxAge=60)](./elements/sifrr-showcase/dist/sifrrshowcase.min.js) | [WIP] | -| [sifrr-include](./elements/sifrr-include) | Async include html/js/css with url | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-include/dist/sifrrinclude.min.js?compression=gzip&maxAge=60)](./elements/sifrr-include/dist/sifrrinclude.min.js) | [OK](./elements/sifrr-include/test/public) | -| [sifrr-shimmer](./elements/sifrr-shimmer) | Facebook like Shimmer used as loading screen | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-shimmer/dist/sifrrshimmer.min.js?compression=gzip&maxAge=60)](./elements/sifrr-shimmer/dist/sifrrshimmer.min.js) | [WIP](./elements/sifrr-shimmer/test/public) | +| [sifrr-include](./elements/sifrr-include) | Async include html/js/css with url | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-include/dist/sifrrinclude.min.js?compression=gzip&maxAge=60)](./elements/sifrr-include/dist/sifrrinclude.min.js) | [OK](./elements/sifrr-include/test/public) | +| [sifrr-shimmer](./elements/sifrr-shimmer) | Facebook like Shimmer used as loading screen | [![Minified + Gzipped](https://img.badgesize.io/sifrr/sifrr-elements/master/elements/sifrr-shimmer/dist/sifrrshimmer.min.js?compression=gzip&maxAge=60)](./elements/sifrr-shimmer/dist/sifrrshimmer.min.js) | [WIP](./elements/sifrr-shimmer/test/public) | ## View examples @@ -49,16 +49,25 @@ Examples as showcase: (only d ```html // load sifrr-dom - + // load element you want to add - + // for v0.0.3, version = 0.0.3 ``` #### Sifrr.Dom.load ```js -Sifrr.Dom.load('element-name', { url: "https://unpkg.com/@sifrr/elements@{version}/elements/element-name/dist/elementname.min.js" }) +Sifrr.Dom.load('element-name', { + url: + 'https://unpkg.com/@sifrr/elements@{version}/elements/element-name/dist/elementname.min.js' +}); ``` ### NPM module @@ -94,7 +103,9 @@ usage: import { LazyLoader } from '@sifrr/elements'; -const lazyLoader = new LazyLoader(rootMargin /* same as mutation observer's rootMargin, default: '0px 0px 0px 0px' */); +const lazyLoader = new LazyLoader( + rootMargin /* same as mutation observer's rootMargin, default: '0px 0px 0px 0px' */ +); lazyLoader.observe(document.querySelector('.lazy')); diff --git a/babel.config.js b/babel.config.js index 01d5fedc..126bc4c7 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,10 +1,13 @@ -module.exports = function (api) { +module.exports = function(api) { api.cache(true); const presets = [ - ['@babel/env', { - modules: false, - targets: require('./package.json').browserslist - }] + [ + '@babel/env', + { + modules: false, + targets: require('./package.json').browserslist + } + ] ]; return { diff --git a/elements/sifrr-carousel/src/sifrrcarousel.js b/elements/sifrr-carousel/src/sifrrcarousel.js index 66831560..d1ac493f 100644 --- a/elements/sifrr-carousel/src/sifrrcarousel.js +++ b/elements/sifrr-carousel/src/sifrrcarousel.js @@ -48,16 +48,26 @@ class SifrrCarousel extends SifrrDom.Element { // refresh when images are loaded this._rel = this._rel || this.refresh.bind(this); - Array.from(this.$$('img', false)).forEach(img => img.addEventListener('load', this._rel)); + Array.from(this.$$('img', false)).forEach(img => + img.addEventListener('load', this._rel) + ); SifrrDom.Event.addListener('click', this, (e, t) => { - if ((t.matches('[slot=content]') || t.matches('[slot=content] *')) && !t.matches('.fullscreen *')) this.fullScreen(true); + if ( + (t.matches('[slot=content]') || t.matches('[slot=content] *')) && + !t.matches('.fullscreen *') + ) + this.fullScreen(true); else if (t.matches('#bg') || t.matches('#bg *')) this.fullScreen(false); - else if (t.matches('.arrow.l') || t.matches('.arrow.l span')) this.container.prev(); - else if (t.matches('.arrow.r') || t.matches('.arrow.r span')) this.container.next(); + else if (t.matches('.arrow.l') || t.matches('.arrow.l span')) + this.container.prev(); + else if (t.matches('.arrow.r') || t.matches('.arrow.r span')) + this.container.next(); }); this.container._update = () => { - this.$('#count').textContent = `${this.container.active + 1}/${this.container.total}`; + this.$('#count').textContent = `${this.container.active + 1}/${ + this.container.total + }`; }; } diff --git a/elements/sifrr-carousel/src/style.scss b/elements/sifrr-carousel/src/style.scss index cab74f08..77996c3f 100644 --- a/elements/sifrr-carousel/src/style.scss +++ b/elements/sifrr-carousel/src/style.scss @@ -3,7 +3,8 @@ width: 100%; } -#preview, #content { +#preview, +#content { position: relative; } @@ -19,14 +20,14 @@ #count { bottom: 6px; right: 6px; - background: rgba(255,255,255,0.7); + background: rgba(255, 255, 255, 0.7); border-radius: 10px; font-size: 14px; padding: 4px 6px; } #bg { - background: rgba(255,255,255,0.9); + background: rgba(255, 255, 255, 0.9); display: none; height: 100%; width: 100%; @@ -83,7 +84,8 @@ } /* drop shadow */ -.arrow > *, #cross { +.arrow > *, +#cross { filter: drop-shadow(-1px -1px 3px #000); user-select: none; color: white; @@ -91,12 +93,12 @@ } /* slot elements css */ -slot[name=preview]::slotted(*) { +slot[name='preview']::slotted(*) { height: 64px; opacity: 0.5; } -slot[name=preview]::slotted(*.active) { +slot[name='preview']::slotted(*.active) { border: 1px solid white; opacity: 1; } @@ -119,7 +121,8 @@ sifrr-tab-header { z-index: 1; } - #preview, #content { + #preview, + #content { position: absolute; left: 0; right: 0; diff --git a/elements/sifrr-code-editor/src/sifrrcodeeditor.js b/elements/sifrr-code-editor/src/sifrrcodeeditor.js index 308e1e65..fd16aa85 100644 --- a/elements/sifrr-code-editor/src/sifrrcodeeditor.js +++ b/elements/sifrr-code-editor/src/sifrrcodeeditor.js @@ -25,7 +25,11 @@ class SifrrCodeEditor extends SifrrDom.Element { } static cm() { - this._cm = this._cm || SifrrDom.Loader.executeJS(`https://cdn.jsdelivr.net/npm/codemirror@${CM_VERSION}/lib/codemirror.js`); + this._cm = + this._cm || + SifrrDom.Loader.executeJS( + `https://cdn.jsdelivr.net/npm/codemirror@${CM_VERSION}/lib/codemirror.js` + ); return this._cm; } @@ -46,20 +50,23 @@ class SifrrCodeEditor extends SifrrDom.Element { } cmLoaded() { - SifrrDom.Loader.executeJS(`https://cdn.jsdelivr.net/npm/codemirror@${CM_VERSION}/mode/${this.lang}/${this.lang}.js`) - .then(() => { - this.cm = window.CodeMirror.fromTextArea(this.$('textarea'), { - value: this.$('textarea').value, - mode: this.lang, - htmlMode: true, - theme: this.getTheme(), - indentUnit: 2, - tabSize: 2, - lineNumbers: true - }); - this.cm.on('change', this.input.bind(this)); - this._cmLoaded = true; + SifrrDom.Loader.executeJS( + `https://cdn.jsdelivr.net/npm/codemirror@${CM_VERSION}/mode/${ + this.lang + }/${this.lang}.js` + ).then(() => { + this.cm = window.CodeMirror.fromTextArea(this.$('textarea'), { + value: this.$('textarea').value, + mode: this.lang, + htmlMode: true, + theme: this.getTheme(), + indentUnit: 2, + tabSize: 2, + lineNumbers: true }); + this.cm.on('change', this.input.bind(this)); + this._cmLoaded = true; + }); } getTheme() { diff --git a/elements/sifrr-code-editor/src/style.scss b/elements/sifrr-code-editor/src/style.scss index d5b10d8e..33732ae4 100644 --- a/elements/sifrr-code-editor/src/style.scss +++ b/elements/sifrr-code-editor/src/style.scss @@ -12,7 +12,8 @@ textarea { border: none; } -textarea, .CodeMirror { +textarea, +.CodeMirror { height: 100%; width: 100%; } diff --git a/elements/sifrr-include/src/sifrrinclude.js b/elements/sifrr-include/src/sifrrinclude.js index e67f0037..df9898bc 100644 --- a/elements/sifrr-include/src/sifrrinclude.js +++ b/elements/sifrr-include/src/sifrrinclude.js @@ -6,7 +6,8 @@ class SifrrInclude extends SifrrDom.Element { } onConnect() { - let preffix = '', suffix = ''; + let preffix = '', + suffix = ''; if (this.type === 'js') { preffix = ''; @@ -16,9 +17,11 @@ class SifrrInclude extends SifrrDom.Element { } if (this.url) { - fetch(this.url).then(r => r.text()).then(text => { - this.innerHTML = preffix + text + suffix; - }); + fetch(this.url) + .then(r => r.text()) + .then(text => { + this.innerHTML = preffix + text + suffix; + }); } } } diff --git a/elements/sifrr-progress-round/src/sifrrprogressround.js b/elements/sifrr-progress-round/src/sifrrprogressround.js index 7d8d5eab..3e3ff10c 100644 --- a/elements/sifrr-progress-round/src/sifrrprogressround.js +++ b/elements/sifrr-progress-round/src/sifrrprogressround.js @@ -13,11 +13,16 @@ class SifrrProgressRound extends SifrrDom.Element { } onAttributeChange(n, _, v) { - if (n === 'progress' || n === 'stroke' || n === 'stroke-width') this.state = { [n]: Number(v) }; + if (n === 'progress' || n === 'stroke' || n === 'stroke-width') + this.state = { [n]: Number(v) }; } } -SifrrProgressRound.defaultState = { progress: 0, 'stroke-width': 2, stroke: '#fff' }; +SifrrProgressRound.defaultState = { + progress: 0, + 'stroke-width': 2, + stroke: '#fff' +}; SifrrDom.register(SifrrProgressRound); export default SifrrProgressRound; diff --git a/elements/sifrr-progress-round/src/template.html b/elements/sifrr-progress-round/src/template.html index db2a671e..35072af5 100644 --- a/elements/sifrr-progress-round/src/template.html +++ b/elements/sifrr-progress-round/src/template.html @@ -1,4 +1,27 @@ - - - - \ No newline at end of file + + + + diff --git a/elements/sifrr-shimmer/src/sifrrshimmer.js b/elements/sifrr-shimmer/src/sifrrshimmer.js index eac9ea4b..5947d4a9 100644 --- a/elements/sifrr-shimmer/src/sifrrshimmer.js +++ b/elements/sifrr-shimmer/src/sifrrshimmer.js @@ -5,19 +5,28 @@ import style from './style.css'; const properStyle = style.replace(/"(\${[^"]*})"/g, '$1'); function rgbToHsl(r = 0, g = 0, b = 0) { - r /= 255, g /= 255, b /= 255; - let max = Math.max(r, g, b), min = Math.min(r, g, b); - let h, s, l = (max + min) / 2; + (r /= 255), (g /= 255), (b /= 255); + let max = Math.max(r, g, b), + min = Math.min(r, g, b); + let h, + s, + l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { let d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - switch(max) { - case r: h = (g - b) / d + (g < b ? 6 : 0); break; - case g: h = (b - r) / d + 2; break; - case b: h = (r - g) / d + 4; break; + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; } h /= 6; } @@ -43,7 +52,12 @@ class SifrrShimmer extends SifrrDom.Element { } colora(point) { - const hsl = rgbToHsl(...(this.color || '170, 170, 170').replace(/ /g, '').split(',').map(Number)); + const hsl = rgbToHsl( + ...(this.color || '170, 170, 170') + .replace(/ /g, '') + .split(',') + .map(Number) + ); const l = Math.min(hsl[2] + (this.isLight() ? point : -1 * point), 1); return `hsl(${hsl[0] * 359}, ${hsl[1] * 100}%, ${l * 100}%)`; } diff --git a/elements/sifrr-shimmer/src/style.css b/elements/sifrr-shimmer/src/style.css index bdd1c121..06c849c0 100644 --- a/elements/sifrr-shimmer/src/style.css +++ b/elements/sifrr-shimmer/src/style.css @@ -1,10 +1,19 @@ :host { - background: linear-gradient(to right, "${this.bgColor}" 4%, "${this.fgColor}" 25%, "${this.bgColor}" 36%); + background: linear-gradient( + to right, + '${this.bgColor}' 4%, + '${this.fgColor}' 25%, + '${this.bgColor}' 36% + ); display: inline-block; animation: shimmer 2.5s linear 0s infinite; background-size: 2000px 100%; } -@keyframes shimmer{ - 0% { background-position: -2000px 0 } - 100% { background-position: 2000px 0 } +@keyframes shimmer { + 0% { + background-position: -2000px 0; + } + 100% { + background-position: 2000px 0; + } } diff --git a/elements/sifrr-showcase/src/sifrrshowcase.js b/elements/sifrr-showcase/src/sifrrshowcase.js index d0ed329e..6d2cf878 100644 --- a/elements/sifrr-showcase/src/sifrrshowcase.js +++ b/elements/sifrr-showcase/src/sifrrshowcase.js @@ -49,15 +49,17 @@ class SifrrShowcase extends SifrrDom.Element { onConnect() { SifrrDom.Event.addListener('click', '.showcase', (e, el) => { if (el.matches('.showcase')) this.switchShowcase(this.getChildIndex(el)); - if (el.matches('.showcase span')) this.deleteShowcase(this.getChildIndex(el.parentNode)); + if (el.matches('.showcase span')) + this.deleteShowcase(this.getChildIndex(el.parentNode)); }); this.loadUrl(); if (window.Sortable) { const me = this; new window.Sortable(this.$('#showcases'), { draggable: 'li', - onEnd: (e) => { - const o = e.oldIndex, n = e.newIndex; + onEnd: e => { + const o = e.oldIndex, + n = e.newIndex; const old = me.state.showcases[o]; me.state.showcases[o] = me.state.showcases[n]; me.state.showcases[n] = old; @@ -70,7 +72,7 @@ class SifrrShowcase extends SifrrDom.Element { getChildIndex(el) { let i = 0; - while((el = el.previousElementSibling) != null) i++; + while ((el = el.previousElementSibling) != null) i++; return i; } @@ -92,7 +94,9 @@ class SifrrShowcase extends SifrrDom.Element { switchShowcase(i) { i = Number(i); this.current = i; - this.$('#showcases').children[this.state.current].classList.remove('current'); + this.$('#showcases').children[this.state.current].classList.remove( + 'current' + ); if (!this.state.showcases[i]) i = this.state.showcases.length - 1; this.state = { current: i, currentSC: this.state.showcases[i] }; this.$('#showcases').children[i].classList.add('current'); @@ -100,25 +104,33 @@ class SifrrShowcase extends SifrrDom.Element { } onStateChange() { - if (this.state.current !== this.current) this.switchShowcase(this.state.current); + if (this.state.current !== this.current) + this.switchShowcase(this.state.current); } saveShowcase() { - this.state.showcases[this.state.current] = Object.assign(this.state.showcases[this.state.current], this.state.currentSC); + this.state.showcases[this.state.current] = Object.assign( + this.state.showcases[this.state.current], + this.state.currentSC + ); if (this._loaded) { this.$('#status').textContent = 'saving locally!'; if (this._timeout) clearTimeout(this._timeout); this._timeout = setTimeout(() => { this._timeout = null; - storage.set({ showcases: this.state.showcases, current: this.state.current }).then(() => { - this.$('#status').textContent = 'saved locally!'; - }); + storage + .set({ showcases: this.state.showcases, current: this.state.current }) + .then(() => { + this.$('#status').textContent = 'saved locally!'; + }); }, 500); } } changeName() { - this.state.showcases[this.state.current].name = this.$('#showcaseName').value; + this.state.showcases[this.state.current].name = this.$( + '#showcaseName' + ).value; this.update(); } @@ -139,21 +151,32 @@ class SifrrShowcase extends SifrrDom.Element { loadUrl() { this._url = getParam('url') || this.$('#url').value; - window.fetch(this._url).then((resp) => resp.json()).then(v => { - this.state.showcases = v.showcases; - this.switchShowcase(getParam('showcase') === undefined ? v.current : getParam('showcase')); - this.$('#status').textContent = 'loaded from url!'; - }).catch((e) => { - this.$('#status').textContent = e.message; - storage.all().then(v => { - this.$('#status').textContent = 'failed to load from url, loaded from storage!'; - this._loaded = true; - if (Array.isArray(v.showcases)) { - this.state.showcases = v.showcases; - this.switchShowcase(getParam('showcase') === undefined ? v.current : getParam('showcase')); - } + window + .fetch(this._url) + .then(resp => resp.json()) + .then(v => { + this.state.showcases = v.showcases; + this.switchShowcase( + getParam('showcase') === undefined ? v.current : getParam('showcase') + ); + this.$('#status').textContent = 'loaded from url!'; + }) + .catch(e => { + this.$('#status').textContent = e.message; + storage.all().then(v => { + this.$('#status').textContent = + 'failed to load from url, loaded from storage!'; + this._loaded = true; + if (Array.isArray(v.showcases)) { + this.state.showcases = v.showcases; + this.switchShowcase( + getParam('showcase') === undefined + ? v.current + : getParam('showcase') + ); + } + }); }); - }); } saveFile() { @@ -181,9 +204,11 @@ class SifrrShowcase extends SifrrDom.Element { SifrrShowcase.defaultState = { current: 0, - showcases: [{ - name: 'new' - }] + showcases: [ + { + name: 'new' + } + ] }; SifrrDom.register(SifrrShowcase); diff --git a/elements/sifrr-showcase/src/singleshowcase.js b/elements/sifrr-showcase/src/singleshowcase.js index c3846456..8c5de578 100644 --- a/elements/sifrr-showcase/src/singleshowcase.js +++ b/elements/sifrr-showcase/src/singleshowcase.js @@ -49,18 +49,25 @@ class SifrrSingleShowcase extends SifrrDom.Element { this.switchVariant(getParam('variant')); SifrrDom.Event.addListener('click', '.variant', (e, el) => { if (el.matches('.variant')) this.switchVariant(el.dataset.variantId); - if (el.matches('.variant span')) this.deleteVariant(el.parentNode.dataset.variantId); + if (el.matches('.variant span')) + this.deleteVariant(el.parentNode.dataset.variantId); }); } beforeUpdate() { this.saveVariant(); if (!this.state.element) return; - if (this._element !== this.state.element || this._js !== this.state.isjs || this._url !== this.state.elementUrl) { + if ( + this._element !== this.state.element || + this._js !== this.state.isjs || + this._url !== this.state.elementUrl + ) { SifrrDom.load(this.state.element, { js: this.state.isjs == 'true', url: this.state.elementUrl ? this.state.elementUrl : undefined - }).then(() => this.$('#error').innerText = '').catch(e => this.$('#error').innerText = e.message); + }) + .then(() => (this.$('#error').innerText = '')) + .catch(e => (this.$('#error').innerText = e.message)); this._js = this.state.isjs; this._element = this.state.element; this._url = this.state.elementUrl; @@ -76,8 +83,15 @@ class SifrrSingleShowcase extends SifrrDom.Element { let state; try { state = new Function(this.$('#elState').value).call(this.element()); - } catch (e) { window.console.warn(e); } - if (state && this.element() && this.element().isSifrr && this.element().state !== state) { + } catch (e) { + window.console.warn(e); + } + if ( + state && + this.element() && + this.element().isSifrr && + this.element().state !== state + ) { this.element().state = state; } } @@ -88,14 +102,23 @@ class SifrrSingleShowcase extends SifrrDom.Element { createNewVariant() { const id = Math.max(...this.state.variants.map(s => s.variantId), 0) + 1; - const cid = this.state.variants.findIndex(v => v.variantId == this.state.variantId) + 1 || 1; - this.state.variants.splice(cid, 0, Object.assign({}, { - variantId: id, - variantName: this.state.variantName, - style: this.state.style || '', - code: this.state.code || '', - elState: this.state.elState || '' - })); + const cid = + this.state.variants.findIndex(v => v.variantId == this.state.variantId) + + 1 || 1; + this.state.variants.splice( + cid, + 0, + Object.assign( + {}, + { + variantId: id, + variantName: this.state.variantName, + style: this.state.style || '', + code: this.state.code || '', + elState: this.state.elState || '' + } + ) + ); this.switchVariant(id); } @@ -103,7 +126,8 @@ class SifrrSingleShowcase extends SifrrDom.Element { this.state.variants.forEach((s, i) => { if (s.variantId == id) { this.state.variants.splice(i, 1); - if (this.state.variantId == id) this.switchVariant((this.state.variants[i] || {}).variantId); + if (this.state.variantId == id) + this.switchVariant((this.state.variants[i] || {}).variantId); else this.update(); } }); @@ -141,7 +165,10 @@ class SifrrSingleShowcase extends SifrrDom.Element { } variant(id) { - return this.state.variants.find(s => s.variantId == id) || this.state.variants[this.state.variants.length - 1]; + return ( + this.state.variants.find(s => s.variantId == id) || + this.state.variants[this.state.variants.length - 1] + ); } } diff --git a/elements/sifrr-showcase/src/style.scss b/elements/sifrr-showcase/src/style.scss index 4fd74982..ca98adc3 100644 --- a/elements/sifrr-showcase/src/style.scss +++ b/elements/sifrr-showcase/src/style.scss @@ -73,7 +73,8 @@ sifrr-single-showcase { line-height: 24px; padding: 4px; } -#error, #status { +#error, +#status { color: red; } sifrr-code-editor { @@ -87,21 +88,24 @@ ul { height: calc(100% - 86px); overflow-y: scroll; } -.variant, .showcase { +.variant, +.showcase { list-style-type: none; - border-bottom: 1px solid #5f616d; + border-bottom: 1px solid #5f616d; span { color: red; float: right; margin-right: 10px; } } -#saver, #loader { +#saver, +#loader { color: green; padding: 4px; margin: 0; } -button, .button { +button, +.button { input { position: absolute; width: 100%; diff --git a/elements/sifrr-showcase/src/template.html b/elements/sifrr-showcase/src/template.html index 90502ca2..5d29e614 100644 --- a/elements/sifrr-showcase/src/template.html +++ b/elements/sifrr-showcase/src/template.html @@ -2,8 +2,21 @@
@@ -30,18 +58,38 @@

Variants

- + - + - -
+
- +
- \ No newline at end of file + diff --git a/elements/sifrr-stater/src/sifrrstater.js b/elements/sifrr-stater/src/sifrrstater.js index 1a4f495e..bee8dfdc 100644 --- a/elements/sifrr-stater/src/sifrrstater.js +++ b/elements/sifrr-stater/src/sifrrstater.js @@ -37,13 +37,18 @@ class SifrrStater extends SifrrDom.Element { name: 'sifrr-stater' + window.location.href }); SifrrDom.Event.addListener('click', '.state', function(e, el) { - el.classList.contains('open') ? el.classList.remove('open') : el.classList.add('open'); + el.classList.contains('open') + ? el.classList.remove('open') + : el.classList.add('open'); }); SifrrDom.Event.addListener('click', '.dotC', function(e, target, el) { me.toState(parseInt(el.dataset.target), parseInt(el.dataset.stateIndex)); }); SifrrDom.Event.addListener('click', '.delete', function(e, el) { - me.deleteState(parseInt(el.dataset.target), parseInt(el.dataset.stateIndex)); + me.deleteState( + parseInt(el.dataset.target), + parseInt(el.dataset.stateIndex) + ); }); SifrrDom.Event.addListener('click', '.commit', function(e, el) { const i = parseInt(el.parentNode.dataset.target); @@ -60,7 +65,9 @@ class SifrrStater extends SifrrDom.Element { } showHide() { - this.classList.contains('show') ? this.classList.remove('show') : this.classList.add('show'); + this.classList.contains('show') + ? this.classList.remove('show') + : this.classList.add('show'); } addTargetOnEnter(event) { @@ -70,22 +77,33 @@ class SifrrStater extends SifrrDom.Element { } headingHtml() { - return this.state.queries.map((q) => `${q}`).join(''); + return this.state.queries.map(q => `${q}`).join(''); } stateHtml() { let me = this; - return this.state.states.map((s, i) => - `
+ return this.state.states + .map( + (s, i) => + `
- ${s.map((jsn, j) => `
+ ${s + .map( + (jsn, j) => `
-
${SifrrStater.prettyJSON(jsn)}
+
${SifrrStater.prettyJSON( + jsn + )}
X
-
`).join('')}
` - ).join(''); +
` + ) + .join('')}
` + ) + .join(''); } addTarget(query) { @@ -99,7 +117,8 @@ class SifrrStater extends SifrrDom.Element { window.console.log('Sifrr Element has no state.', target); return false; } - const old = target.onStateChange, me = this; + const old = target.onStateChange, + me = this; target.onStateChange = function() { me.addState(this, this.state); old.call(this); @@ -115,9 +134,7 @@ class SifrrStater extends SifrrDom.Element { } removeTarget(el) { - const { - index - } = this.getTarget(el); + const { index } = this.getTarget(el); if (index > -1) { this.state.targets.splice(index, 1); this.state.queries.splice(index, 1); @@ -128,9 +145,7 @@ class SifrrStater extends SifrrDom.Element { } addState(el, state) { - const { - index - } = this.getTarget(el); + const { index } = this.getTarget(el); if (index > -1) { const active = this.state.activeStates[index]; const newState = JSON.stringify(state); @@ -142,9 +157,7 @@ class SifrrStater extends SifrrDom.Element { } } deleteState(el, stateN) { - const { - index - } = this.getTarget(el); + const { index } = this.getTarget(el); this.state.states[index].splice(stateN, 1); if (stateN < this.state.activeStates[index]) { this.state.activeStates[index] -= 1; @@ -156,10 +169,10 @@ class SifrrStater extends SifrrDom.Element { } commit(el) { - const { - index - } = this.getTarget(el); - const last_state = this.state.states[index][this.state.states[index].length - 1]; + const { index } = this.getTarget(el); + const last_state = this.state.states[index][ + this.state.states[index].length - 1 + ]; this.state.states[index] = [last_state]; this.state.activeStates[index] = 0; this.update(); @@ -172,20 +185,14 @@ class SifrrStater extends SifrrDom.Element { } toState(el, n) { - const { - index, - target - } = this.getTarget(el); + const { index, target } = this.getTarget(el); this.state.activeStates[index] = n; target.state = this.state.states[index][n]; this.update(); } resetToFirstState(el) { - const { - index, - target - } = this.getTarget(el); + const { index, target } = this.getTarget(el); this.toState(target, 0, false); this.state.states[index] = [this.state.states[index][0]]; this.update(); @@ -198,9 +205,7 @@ class SifrrStater extends SifrrDom.Element { } clear(target) { - const { - index - } = this.getTarget(target); + const { index } = this.getTarget(target); this.state.activeStates[index] = -1; this.state.states[index] = []; this.update(); @@ -227,7 +232,7 @@ class SifrrStater extends SifrrDom.Element { loadData() { const me = this; - this.storage.all().then((data) => { + this.storage.all().then(data => { let i = 0; for (let q in data) { me.addTarget(q); @@ -255,21 +260,27 @@ class SifrrStater extends SifrrDom.Element { static prettyJSON(json) { json = JSON.stringify(json, null, 4); - json = json.replace(/&/g, '&').replace(//g, '>'); - return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, function(match) { - let cls = 'number'; - if (/:$/.test(match)) { - cls = 'key'; + json = json + .replace(/&/g, '&') + .replace(//g, '>'); + return json.replace( + /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, + function(match) { + let cls = 'number'; + if (/:$/.test(match)) { + cls = 'key'; + return '' + match + ''; + } else if (/^"/.test(match)) { + cls = 'string'; + } else if (/true|false/.test(match)) { + cls = 'boolean'; + } else if (/null/.test(match)) { + cls = 'null'; + } return '' + match + ''; - } else if (/^"/.test(match)) { - cls = 'string'; - } else if (/true|false/.test(match)) { - cls = 'boolean'; - } else if (/null/.test(match)) { - cls = 'null'; } - return '' + match + ''; - }); + ); } } diff --git a/elements/sifrr-stater/src/style.scss b/elements/sifrr-stater/src/style.scss index 3573e063..8821f72c 100644 --- a/elements/sifrr-stater/src/style.scss +++ b/elements/sifrr-stater/src/style.scss @@ -7,7 +7,7 @@ max-width: 100%; width: 320px; z-index: 1000; - background-color: rgba(0, 0, 0, .8); + background-color: rgba(0, 0, 0, 0.8); transform: translate3d(100%, 0, 0); transition: all 0.2s ease; } @@ -96,7 +96,9 @@ .string { color: green; } -.number, .null, .boolean { +.number, +.null, +.boolean { color: blue; } footer { diff --git a/elements/sifrr-tab-container/src/sifrrtabcontainer.js b/elements/sifrr-tab-container/src/sifrrtabcontainer.js index dddbd038..d8cb5bd0 100644 --- a/elements/sifrr-tab-container/src/sifrrtabcontainer.js +++ b/elements/sifrr-tab-container/src/sifrrtabcontainer.js @@ -28,8 +28,13 @@ class SifrrTabContainer extends SifrrDom.Element { onConnect() { this._connected = true; this.refresh(); - window.addEventListener('resize', () => requestAnimationFrame(this.refresh.bind(this))); - this.options.slot.addEventListener('slotchange', this.refresh.bind(this, {})); + window.addEventListener('resize', () => + requestAnimationFrame(this.refresh.bind(this)) + ); + this.options.slot.addEventListener( + 'slotchange', + this.refresh.bind(this, {}) + ); this.setScrollEvent(); } @@ -41,22 +46,31 @@ class SifrrTabContainer extends SifrrDom.Element { } refresh(options) { - this._options = Object.assign({ - content: this, - slot: this.$('slot'), - num: 1, - animation: 'spring', - animationTime: 300, - scrollBreakpoint: 0.3, - loop: false - }, this._options, options); + this._options = Object.assign( + { + content: this, + slot: this.$('slot'), + num: 1, + animation: 'spring', + animationTime: 300, + scrollBreakpoint: 0.3, + loop: false + }, + this._options, + options + ); this.options = Object.assign({}, this._options, this._attrOptions); - this.options.tabs = this.options.slot.assignedNodes().filter(n => n.nodeType === 1); + this.options.tabs = this.options.slot + .assignedNodes() + .filter(n => n.nodeType === 1); this.total = this.options.tabs.length; if (!this.options.tabs || this.options.tabs.length < 1) return; if (this.options.num === 'auto') { this.tabWidth = 'auto'; - this._totalWidth = this.options.tabs.reduce((a, b) => a + b.getBoundingClientRect().width, 0); + this._totalWidth = this.options.tabs.reduce( + (a, b) => a + b.getBoundingClientRect().width, + 0 + ); this.totalWidth = this._totalWidth + 'px'; } else { this._tabWidth = this.getBoundingClientRect().width / this.options.num; @@ -71,7 +85,8 @@ class SifrrTabContainer extends SifrrDom.Element { let me = this, isScrolling, scrollPos; - if (this.options.num !== 'auto') this.options.content.addEventListener('scroll', onScroll); + if (this.options.num !== 'auto') + this.options.content.addEventListener('scroll', onScroll); function onScroll() { scrollPos = me.active; @@ -126,16 +141,21 @@ class SifrrTabContainer extends SifrrDom.Element { } next() { - this.options.num === 'auto' ? (this.options.content.scrollLeft += this._totalWidth / 2) : (this.active += 1); + this.options.num === 'auto' + ? (this.options.content.scrollLeft += this._totalWidth / 2) + : (this.active += 1); } hasNext() { - if (this.active === this.options.tabs.length - this.options.num) return false; + if (this.active === this.options.tabs.length - this.options.num) + return false; return true; } prev() { - this.options.num === 'auto' ? (this.options.content.scrollLeft -= this._totalWidth / 2) : (this.active -= 1); + this.options.num === 'auto' + ? (this.options.content.scrollLeft -= this._totalWidth / 2) + : (this.active -= 1); } hasPrev() { diff --git a/elements/sifrr-tab-header/src/sifrrtabheader.js b/elements/sifrr-tab-header/src/sifrrtabheader.js index 7f78c52c..cbb0c605 100644 --- a/elements/sifrr-tab-header/src/sifrrtabheader.js +++ b/elements/sifrr-tab-header/src/sifrrtabheader.js @@ -37,15 +37,21 @@ class SifrrTabHeader extends SifrrDom.Element { } refresh(options) { - this._options = Object.assign({ - content: this, - slot: this.$('slot'), - showUnderline: true, - line: this.$('.underline'), - container: null - }, this._options, options); + this._options = Object.assign( + { + content: this, + slot: this.$('slot'), + showUnderline: true, + line: this.$('.underline'), + container: null + }, + this._options, + options + ); this.options = Object.assign({}, this._options, this._attrOptions); - this.options.menus = this.options.slot.assignedNodes().filter(n => n.nodeType === 1); + this.options.menus = this.options.slot + .assignedNodes() + .filter(n => n.nodeType === 1); if (!this.options.menus || this.options.menus.length < 1) return; this.setProps(); this.active = this.active || 0; @@ -57,7 +63,7 @@ class SifrrTabHeader extends SifrrDom.Element { if (this.options.container) { const c = this.options.container; c.onScrollPercent = this.setScrollPercent.bind(this); - SifrrDom.Event.addListener('update', c, () => this.active = c.active); + SifrrDom.Event.addListener('update', c, () => (this.active = c.active)); } this.setScrollPercent(0); } @@ -79,17 +85,29 @@ class SifrrTabHeader extends SifrrDom.Element { }); const last = this.options.menuProps[this.options.menus.length - 1]; this.options.totalMenuWidth = last.left + last.width; - this.$('slot').style.width = this.options.slot.style.width = this.options.totalMenuWidth + 1 + 'px'; + this.$('slot').style.width = this.options.slot.style.width = + this.options.totalMenuWidth + 1 + 'px'; } setScrollPercent(total) { - const per = total % 1, t = Math.floor(total); - const left = this.options.menuProps[t].left * (1 - per) + (this.options.menuProps[t + 1] || { - left: 0 - }).left * per; - const width = this.options.menuProps[t].width * (1 - per) + (this.options.menuProps[t + 1] || { - width: 0 - }).width * per; + const per = total % 1, + t = Math.floor(total); + const left = + this.options.menuProps[t].left * (1 - per) + + ( + this.options.menuProps[t + 1] || { + left: 0 + } + ).left * + per; + const width = + this.options.menuProps[t].width * (1 - per) + + ( + this.options.menuProps[t + 1] || { + width: 0 + } + ).width * + per; this.options.line.style.left = left + 'px'; this.options.line.style.width = width + 'px'; this.scrollLeft = left + (width - this.clientWidth) / 2; @@ -112,7 +130,9 @@ class SifrrTabHeader extends SifrrDom.Element { onUpdate() { if (!this.options) return; for (let j = 0, l = this.options.menus.length; j < l; j++) { - this.options.menus[j].classList[j === this.active ? 'add' : 'remove']('active'); + this.options.menus[j].classList[j === this.active ? 'add' : 'remove']( + 'active' + ); } } } diff --git a/helpers/lazyloader.js b/helpers/lazyloader.js index 9def8df0..07ad5b30 100644 --- a/helpers/lazyloader.js +++ b/helpers/lazyloader.js @@ -6,13 +6,16 @@ function moveAttr(el, attr) { function loadPicture(pic) { if (pic.tagName === 'PICTURE') { - pic.querySelectorAll('source').forEach((s) => { + pic.querySelectorAll('source').forEach(s => { moveAttr(s, 'src'); moveAttr(s, 'srcset'); }); pic = pic.querySelector('img'); } else if (pic.tagName !== 'IMG') { - throw Error('LazyLoader only supports `picture` or `img` element. Given: ', pic); + throw Error( + 'LazyLoader only supports `picture` or `img` element. Given: ', + pic + ); } moveAttr(pic, 'src'); moveAttr(pic, 'srcset'); diff --git a/helpers/makefullscreen.js b/helpers/makefullscreen.js index 900295fd..5984230e 100644 --- a/helpers/makefullscreen.js +++ b/helpers/makefullscreen.js @@ -1,6 +1,6 @@ import animate from '@sifrr/animate'; -const styles = [ 'position', 'left', 'top', 'width', 'height', 'z-index']; +const styles = ['position', 'left', 'top', 'width', 'height', 'z-index']; const FS_CLASS = 'fs'; function getNewProps(rect) { @@ -31,7 +31,7 @@ function makeFullScreen(element, onUpdate) { left: '0px', top: '0px', width: window.innerWidth + 'px', - height: window.innerHeight + 'px', + height: window.innerHeight + 'px' }, onUpdate }).then(() => element.classList.add(FS_CLASS)); @@ -45,7 +45,7 @@ function exitFullScreen(element, onUpdate) { left: element.__nleft, top: element.__ntop, width: element.__nwidth, - height: element.__nheight, + height: element.__nheight }, onUpdate }).then(() => { @@ -57,7 +57,4 @@ function exitFullScreen(element, onUpdate) { }); } -export { - makeFullScreen, - exitFullScreen -}; +export { makeFullScreen, exitFullScreen }; diff --git a/helpers/urlparams.js b/helpers/urlparams.js index 97b60230..72450ab1 100644 --- a/helpers/urlparams.js +++ b/helpers/urlparams.js @@ -5,8 +5,14 @@ function getParam(name) { } function setParam(name, value) { - const newParams = Object.assign(queryString.parse(location.search), { [name]: value }); - history.replaceState(newParams, 'Title', `${location.pathname}?${queryString.stringify(newParams)}`); + const newParams = Object.assign(queryString.parse(location.search), { + [name]: value + }); + history.replaceState( + newParams, + 'Title', + `${location.pathname}?${queryString.stringify(newParams)}` + ); } export { getParam, setParam }; diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 00000000..ee384662 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,6 @@ +module.exports = { + trailingComma: 'none', + tabWidth: 2, + semi: true, + singleQuote: true +}; diff --git a/rollup.base.js b/rollup.base.js index 34613dd0..6397c52a 100644 --- a/rollup.base.js +++ b/rollup.base.js @@ -2,11 +2,7 @@ const path = require('path'); const { getRollupConfig } = require('@sifrr/dev'); const version = require('./package.json').version; -const external = [ - '@sifrr/dom', - '@sifrr/fetch', - '@sifrr/storage' -]; +const external = ['@sifrr/dom', '@sifrr/fetch', '@sifrr/storage']; const globals = { '@sifrr/dom': 'Sifrr.Dom', '@sifrr/fetch': 'Sifrr.Fetch', @@ -17,30 +13,30 @@ const footer = '/*! (c) @aadityataparia */'; function moduleConfig(name, root, minify = false, isModule = false) { const filename = name.toLowerCase(); const banner = `/*! ${name} v${version} - sifrr project | MIT licensed | https://github.com/sifrr/sifrr-elements */`; - return getRollupConfig({ - name, - inputFile: path.join(root, `./src/${filename}.js`), - outputFolder: path.join(root, './dist'), - outputFileName: filename, - minify, - type: isModule ? 'module' : 'browser' - }, { - output: { - banner, - footer, - globals + return getRollupConfig( + { + name, + inputFile: path.join(root, `./src/${filename}.js`), + outputFolder: path.join(root, './dist'), + outputFileName: filename, + minify, + type: isModule ? 'module' : 'browser' }, - external - }); + { + output: { + banner, + footer, + globals + }, + external + } + ); } module.exports = (name, __dirname, isBrowser = true) => { let ret = []; if (isBrowser) { - ret = [ - moduleConfig(name, __dirname), - moduleConfig(name, __dirname, true) - ]; + ret = [moduleConfig(name, __dirname), moduleConfig(name, __dirname, true)]; } ret.push(moduleConfig(name, __dirname, false, true)); diff --git a/rollup.config.js b/rollup.config.js index cdf3d075..22018fbf 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -5,7 +5,7 @@ const allConfigs = []; loadDir({ dir: path.resolve('./elements'), - onFile: (file) => { + onFile: file => { if (file.match(/elements\/[a-z-]+\/sifrr-[a-z-]+\/rollup\.config\.js/)) { Array.prototype.push.apply(allConfigs, require(file)); } @@ -13,5 +13,8 @@ loadDir({ deep: 1 }); -Array.prototype.push.apply(allConfigs, require('./rollup.base')('Sifrr.Elements', __dirname, true)); +Array.prototype.push.apply( + allConfigs, + require('./rollup.base')('Sifrr.Elements', __dirname, true) +); module.exports = allConfigs; diff --git a/scripts/release/change_config.js b/scripts/release/change_config.js index 8879f676..8291a899 100755 --- a/scripts/release/change_config.js +++ b/scripts/release/change_config.js @@ -3,7 +3,8 @@ const fs = require('fs'); const stringify = require('./stringify'); module.exports = function(folder, isBrowser) { - let pkgFileString = '../.' + folder + '/package.json', pkgFile; + let pkgFileString = '../.' + folder + '/package.json', + pkgFile; let pkgFolder = folder.split('/')[folder.split('/').length - 1]; let jsFileName = pkgFolder.replace(/-/g, ''); let pkgName = '@' + pkgFolder.replace(/-/, '/'); @@ -22,13 +23,9 @@ module.exports = function(folder, isBrowser) { scripts: { test: `node ../../scripts/test/run.js ${folder}`, build: '../../node_modules/.bin/rollup -c', - 'test-server': `yarn test -s`, + 'test-server': `yarn test -s` }, - files: [ - 'bin', - 'dist', - 'src' - ] + files: ['bin', 'dist', 'src'] }; if (isBrowser) { @@ -43,16 +40,30 @@ module.exports = function(folder, isBrowser) { pkgFile = {}; } - pkgToMerge.scripts = Object.assign(pkgFile.scripts || {}, pkgToMerge.scripts); + pkgToMerge.scripts = Object.assign( + pkgFile.scripts || {}, + pkgToMerge.scripts + ); // change peerDependencies & dependencies - pkgFile.peerDependencies = dependencyVersion(pkgFile.peerDependencies, pkgToMerge.devDependencies, pkg.version); - pkgFile.dependencies = dependencyVersion(pkgFile.dependencies, pkgToMerge.devDependencies, pkg.version); + pkgFile.peerDependencies = dependencyVersion( + pkgFile.peerDependencies, + pkgToMerge.devDependencies, + pkg.version + ); + pkgFile.dependencies = dependencyVersion( + pkgFile.dependencies, + pkgToMerge.devDependencies, + pkg.version + ); Object.assign(pkgFile, pkgToMerge); - fs.writeFileSync(__dirname + '/' + pkgFileString, stringify(pkgFile) + '\n'); + fs.writeFileSync( + __dirname + '/' + pkgFileString, + stringify(pkgFile) + '\n' + ); process.stdout.write('Done: package.json \n'); - } catch(e) { + } catch (e) { global.console.log(e); process.stdout.write('No package file in this folder \n'); } @@ -60,7 +71,9 @@ module.exports = function(folder, isBrowser) { let rollupConfigFileString = '../.' + folder + '/rollup.config.js'; const config = `const getConfig = require('../../rollup.base'); -module.exports = getConfig('${pkgFolder.replace(/(^|-)(\S)/g, s => s.toUpperCase()).replace(/-/g, '')}', __dirname, ${isBrowser}); +module.exports = getConfig('${pkgFolder + .replace(/(^|-)(\S)/g, s => s.toUpperCase()) + .replace(/-/g, '')}', __dirname, ${isBrowser}); `; fs.writeFileSync(__dirname + '/' + rollupConfigFileString, config); diff --git a/scripts/release/stringify.js b/scripts/release/stringify.js index 4616f003..f965f36f 100755 --- a/scripts/release/stringify.js +++ b/scripts/release/stringify.js @@ -26,6 +26,6 @@ function sortObject(obj) { return ret; } -module.exports = (obj) => { +module.exports = obj => { return JSON.stringify(sortObject(obj), null, 2); }; diff --git a/showcase/index.html b/showcase/index.html index c9629b02..325bc671 100644 --- a/showcase/index.html +++ b/showcase/index.html @@ -1,11 +1,15 @@ - - + + Sifrr Element Showcase