Skip to content
Snippets Groups Projects
Commit 9616571a authored by Reiter, Christoph's avatar Reiter, Christoph :snake:
Browse files

Export mini-spinner, spinner and button instead of defining them

parent 7ce8393f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/common/index.js
+ 7
− 1
View file @ 9616571a
import {EventBus} from './src/eventbus.js';
import {createLinkedAbortController, createTimeoutAbortSignal} from './src/abort.js';
import {getIconSVGURL, getIconCSS, Icon} from './src/icon.js';
import {MiniSpinner} from './src/mini-spinner.js';
import {Button} from './src/button.js';
import {Spinner} from './src/spinner.js';
export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
export {getIconSVGURL, getIconCSS, Icon};
\ No newline at end of file
export {getIconSVGURL, getIconCSS, Icon};
export {MiniSpinner};
export {Button};
export {Spinner};
\ No newline at end of file
packages/common/test/unit.js
+ 0
− 2
View file @ 9616571a
import {expect, assert} from 'chai';
import * as utils from '../utils';
import * as styles from '../styles';
import '../vpu-mini-spinner.js';
import '../vpu-spinner.js';
import '../jsonld.js';
suite('utils', () => {
......
packages/common/vpu-button.js deleted 100644 → 0
+ 0
− 77
View file @ 7ce8393f
import {html, LitElement, css} from 'lit-element';
import * as commonUtils from './utils.js';
import * as commonStyles from './styles.js';
/**
* vpu-button implements a button with Bulma styles and automatic spinner and
* disabling if button is clicked
*
* Use the attribute "no-spinner-on-click" to disable the spinner, then you can
* start it with start() and stop it with stop()
*
* Type can be is-primary/is-info/is-success/is-warning/is-danger
*/
class Button extends LitElement {
constructor() {
super();
this.value = "";
this.type = "";
this.spinner = false;
this.noSpinnerOnClick = false;
this.disabled = false;
}
connectedCallback() {
super.connectedCallback();
}
static get properties() {
return {
value: { type: String },
type: { type: String },
spinner: { type: Boolean },
noSpinnerOnClick: { type: Boolean, attribute: 'no-spinner-on-click' },
disabled: { type: Boolean, reflect: true },
};
}
clickHandler() {
if (!this.noSpinnerOnClick) {
this.start();
}
}
start() {
this.spinner = true;
this.disabled = true;
}
stop() {
this.spinner = false;
this.disabled = false;
}
isDisabled() {
return this.disabled;
}
static get styles() {
// language=css
return css`
${commonStyles.getThemeCSS()}
${commonStyles.getButtonCSS()}
vpu-mini-spinner { margin-left: 0.5em; }
`;
}
render() {
return html`
<button @click="${this.clickHandler}" class="button ${this.type}" ?disabled="${this.disabled}">
${this.value} <vpu-mini-spinner style="display: ${this.spinner ? "inline" : "none"}"></vpu-mini-spinner>
</button>
`;
}
}
commonUtils.defineCustomElement('vpu-button', Button);
packages/common/vpu-common-demo.js
+ 4
− 7
View file @ 9616571a
......@@ -3,10 +3,7 @@ import {css, html, LitElement} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonUtils from './utils.js';
import * as commonStyles from './styles.js';
import './vpu-mini-spinner.js';
import './vpu-spinner.js';
import {getIconCSS, Icon} from './index.js';
import './vpu-button.js';
import {getIconCSS, Icon, MiniSpinner, Button, Spinner} from './index.js';
class VpuCommonDemo extends ScopedElementsMixin(LitElement) {
constructor() {
......@@ -18,9 +15,9 @@ class VpuCommonDemo extends ScopedElementsMixin(LitElement) {
static get scopedElements() {
return {
'vpu-icon': Icon,
'vpu-mini-spinner': customElements.get('vpu-mini-spinner'),
'vpu-spinner': customElements.get('vpu-spinner'),
'vpu-button': customElements.get('vpu-button'),
'vpu-mini-spinner': MiniSpinner,
'vpu-spinner': Spinner,
'vpu-button': Button,
'vpu-auth': customElements.get('vpu-auth'),
};
}
......
packages/common/vpu-mini-spinner.js deleted 100644 → 0
+ 0
− 74
View file @ 7ce8393f
import {html, LitElement, css} from 'lit-element';
import * as commonUtils from './utils.js';
class MiniSpinner extends LitElement {
constructor() {
super();
this.text = "";
}
static get properties() {
return {
text: { type: String },
};
}
static get styles() {
// language=css
return css`
.outer {
display: inline-block;
}
.inner {
display: flex;
}
.ring {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
}
.ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 100%;
height: 100%;
border: 0.2em solid currentColor;
border-radius: 50%;
animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: currentColor transparent transparent transparent;
}
.ring div:nth-child(1) {
animation-delay: -0.45s;
}
.ring div:nth-child(2) {
animation-delay: -0.3s;
}
.ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.text {
display: inline-block;
margin-left: 0.5em;
font-size: 0.7em;
}`;
}
render() {
const textHtml = this.text !== "" ? html`<div class="text">${this.text}</div>` : html``;
return html`<div class="outer"><div class="inner"><div class="ring"><div></div><div></div><div></div><div></div></div>${textHtml}</div></div>`;
}
}
commonUtils.defineCustomElement('vpu-mini-spinner', MiniSpinner);
packages/common/vpu-spinner.js deleted 100644 → 0
+ 0
− 122
View file @ 7ce8393f
// Note: This doesn't have a lit-element dependency on purpose, so it can be loaded faster before
// other web components (assuming it's not bundled)
class Spinner extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.innerHTML = `
<style>
:host {
display: block;
}
#all-spinner-tuglogo {
width:130px;
height:130px;
position:relative;
background-color:transparent;
margin:0 auto;
}
.all-spinner-tuglogo-box {
width:20%;
height:20%;
background-color:#e4154b;
position:absolute;
top:50%;
left:50%;
animation-duration: 1.6s;
animation-direction:alternate;
animation-iteration-count:infinite;
animation-fill-mode:both;
animation-timing-function:ease;
transition: transform 0.5s, background-color 0.2s 0.5s;
}
#all-spinner-tuglogo-box-1 {
animation-name: box1;
transform:translateX(-160%) translateY(-50%);
}
#all-spinner-tuglogo-box-2 {
transform-origin:0 0;
animation-name: box2;
transform:scale(1) translateX(-50%) translateY(-50%);
}
#all-spinner-tuglogo-box-3 {
animation-name: box3;
animation-delay:0.3s;
transform:translateX(60%) translateY(-50%); visibility:visible;
}
#all-spinner-tuglogo-box-4 {
animation-name: box4;
animation-delay:0.1s;
transform:translateX(0%) translateY(-100%); visibility:visible;
}
#all-spinner-tuglogo-box-5 {
animation-name: box5;
animation-delay:0.2s;
transform:translateX(-100%) translateY(0%); visibility:visible;
}
@keyframes box1 {
0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
50% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
70% { transform:translateX(-170%) translateY(-50%); visibility:visible;}
80% { transform:translateX(-160%) translateY(-50%); visibility:visible;}
100% { transform:translateX(-160%) translateY(-50%); visibility:visible;}
}
@keyframes box2 {
0% { transform:scale(0) translateX(-50%) translateY(-50%);}
5% { transform:scale(0) translateX(-50%) translateY(-50%);}
30% { transform:scale(1.2) translateX(-50%) translateY(-50%);}
35% { transform:scale(1) translateX(-50%) translateY(-50%);}
100% { transform:scale(1) translateX(-50%) translateY(-50%);}
}
@keyframes box3 {
0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
50% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
70% { transform:translateX(70%) translateY(-50%); visibility:visible;}
80% { transform:translateX(60%) translateY(-50%); visibility:visible;}
100% { transform:translateX(60%) translateY(-50%); visibility:visible;}
}
@keyframes box4 {
0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
50% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
70% { transform:translateX(10%) translateY(-110%); visibility:visible;}
80% { transform:translateX(0%) translateY(-100%); visibility:visible;}
100% { transform:translateX(0%) translateY(-100%); visibility:visible;}
}
@keyframes box5 {
0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
50% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
70% { transform:translateX(-110%) translateY(10%); visibility:visible;}
80% { transform:translateX(-100%) translateY(0%); visibility:visible;}
100% { transform:translateX(-100%) translateY(0%); visibility:visible;}
}
</style>
<div id="all-spinner-tuglogo">
<div id="all-spinner-tuglogo-box-1" class="all-spinner-tuglogo-box"></div>
<div id="all-spinner-tuglogo-box-2" class="all-spinner-tuglogo-box"></div>
<div id="all-spinner-tuglogo-box-3" class="all-spinner-tuglogo-box"></div>
<div id="all-spinner-tuglogo-box-4" class="all-spinner-tuglogo-box"></div>
<div id="all-spinner-tuglogo-box-5" class="all-spinner-tuglogo-box"></div>
</div>`;
}
}
// customElements is undefined in Edge
if (typeof customElements != 'undefined' && !customElements.get('vpu-spinner'))
customElements.define('vpu-spinner', Spinner);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment