diff --git a/packages/common/utils.js b/packages/common/utils.js index f3fe8c0c7a96d6ec93cba2f314afd722e7d5fcdd..7e24f98533dbcfe0f14d6e550f8e6d49bf89cf63 100644 --- a/packages/common/utils.js +++ b/packages/common/utils.js @@ -1,5 +1,15 @@ import env from './env.js'; +export const getAssetURL = (path) => { + const elm = document.getElementById('vpu-library-app-src'); + if (!elm) + return path; + const url = elm.src; + // newer browsers only + //var url = import.meta.url; + return new URL(path, url).href; +}; + /** * Parses a link header * @@ -28,7 +38,7 @@ export const parseLinkHeader = (header) => { } return links; -} +}; /** * Reads a setting @@ -38,11 +48,11 @@ export const parseLinkHeader = (header) => { */ export const setting = (key) => { return env[key]; -} +}; export const getAPiUrl = (path = "", withPrefix = true) => { return env.apiBaseUrl + (withPrefix ? env.apiUrlPrefix : "") + path; -} +}; /** * Parses the base url from an url @@ -55,7 +65,7 @@ export const parseBaseUrl = (url) => { const protocol = pathArray[0]; const host = pathArray[2]; return protocol + '//' + host; -} +}; /** * Converts a string list to a data array for Select2 @@ -67,7 +77,7 @@ export const stringListToSelect2DataArray = (list) => { let data = []; list.forEach((item) => {data.push({id: item, text: item})}); return data; -} +}; /** * Does generic Base64 Encoding with support for 16-bit encoded strings @@ -84,7 +94,7 @@ export const base64EncodeUnicode = (str) => { }); return btoa(utf8Bytes); -} +}; /** * Like customElements.define() but tries to display an error in case the browser doesn't @@ -106,7 +116,7 @@ export const defineCustomElement = (name, constructor, options) => { } customElements.define(name, constructor, options); return true; -} +}; /** * Creates a random id @@ -117,15 +127,15 @@ export const defineCustomElement = (name, constructor, options) => { * @returns {string} */ export const makeId = (length) => { - var result = ''; - var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - var charactersLength = characters.length; - for ( var i = 0; i < length; i++ ) { + let result = ''; + const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; + const charactersLength = characters.length; + for ( let i = 0; i < length; i++ ) { result += characters.charAt(Math.floor(Math.random() * charactersLength)); } return result; -} +}; /** * Pads a number with a 0 so it has two digits diff --git a/packages/common/vpu-button.js b/packages/common/vpu-button.js index 5fd20b6d4e184165be6d053be535cbdf4f60f8c7..2d0b61d9d2df32132d3f9cd103b8d9151f7ab412 100644 --- a/packages/common/vpu-button.js +++ b/packages/common/vpu-button.js @@ -1,7 +1,6 @@ import {html, LitElement, css} from 'lit-element'; import * as commonUtils from './utils.js'; import bulmaCSSPath from 'bulma/css/bulma.min.css'; -import * as utils from "../../src/utils"; class Button extends LitElement { @@ -12,6 +11,7 @@ class Button extends LitElement { this.type = "primary"; this.spinner = false; this.spinnerOnClick = true; + this.disabled = false; } static get properties() { @@ -20,6 +20,7 @@ class Button extends LitElement { type: { type: String }, spinner: { type: Boolean }, spinnerOnClick: { type: Boolean, attribute: 'spinner-on-click' }, + disabled: { type: Boolean }, }; } @@ -38,11 +39,13 @@ class Button extends LitElement { } render() { - const bulmaCSS = utils.getAssetURL(bulmaCSSPath); + const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath); return html` <link rel="stylesheet" href="${bulmaCSS}"> - <button @click="${this.clickHandler}" class="button ${this.type}">${this.value} <vpu-mini-spinner style="display: ${this.spinner ? "inline" : "none"}"></vpu-mini-spinner></button> + <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> `; } }