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