From 0ce435a89beca5ec4132075297b18f54832d9442 Mon Sep 17 00:00:00 2001 From: Shintaro Tanaka Date: Mon, 13 Mar 2017 18:02:04 +0900 Subject: [PATCH] Avoid double definition of customElements, Initial value reflection to ui updated changelog --- CHANGELOG.md | 26 +++++++++++++++++++++----- dist/customrangeinput.js | 10 ++++++++-- src/css/style.scss | 2 +- src/js/customrangeinput.js | 7 ++++++- 4 files changed, 36 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index eca6988..5e3c0e8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,19 @@ +v0.1.0 (2017-03-13) +------------------ + +* Feature - Travis-CI - Introduced Travis-CI integration, and made dependencies + more tidy and clear + +* Issue - Double-`define` - Fixed double-`define` bug, in which somehow + `customElements.define` has been called two or more times when the library is + used on Safari + +* Issue - Initial value synchronization - Let the initial property values be + applied to UI appearance + +* Feature - Exposing version - Now we can get the module version by executing + `CustomRangeInput.version` + v0.1.0-rc.2 (2017-03-10) ------------------ @@ -6,17 +22,17 @@ v0.1.0-rc.2 (2017-03-10) * Issue - ShadyCSS styles - Now style rules with `:host` selector is applied to host elements on those browsers which lack ShadowDOM feature (e.g. Firefox and IE 11) as well. Shadow DOM elements / styles are adapted to those - browsers by `ShadyCSS.prepareTemplate()`. + browsers by `ShadyCSS.prepareTemplate()` * Upgrading - Docs / LICENSE - Inserted docs and license statements to top-level - codes. + codes -* Upgrading - Tests - A minimum test with web-component-tester. +* Upgrading - Tests - A minimum test with web-component-tester -* Upgrading - npm publishing - Prepared to publish as a npm package. +* Upgrading - npm publishing - Prepared to publish as a npm package * Issue - Type assertion - `value` property is set after the given value is - asserted to be number. + asserted to be number v0.1.0-rc.1 (2017-03-08) ---------------------- diff --git a/dist/customrangeinput.js b/dist/customrangeinput.js index c283d28..68be822 100644 --- a/dist/customrangeinput.js +++ b/dist/customrangeinput.js @@ -119,11 +119,17 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function" /* global require, ShadyCSS, VERSION */ function defineCustomRangeInput() { + if (!customElements || customElements.get("custom-range-input")) { + // Immediately return if customElements object is absent, or + // "custom-range-input" already defined. + return; + } /** * Actually CustomRangeInput extends HTMLInputElement ( element) but * it seems not to work on current browser implementations. * Thus we define CustomRangeInput from scratch, extending "plain" HTMLElement */ + var CustomRangeInput = function (_HTMLElement) { _inherits(CustomRangeInput, _HTMLElement); @@ -206,7 +212,7 @@ function defineCustomRangeInput() { }, { key: "attributeChangedCallback", value: function attributeChangedCallback(prop, oldValue, newValue) { - if (Number(oldValue) != Number(newValue)) { + if (oldValue != newValue) { this[prop] = Number(newValue); this.dispatchEvent(new Event("change")); } @@ -296,7 +302,7 @@ exports = module.exports = __webpack_require__(2)(); // module -exports.push([module.i, ":host {\n display: flex;\n align-items: center;\n font-size: 20px;\n max-width: 100%;\n height: 2em;\n overflow: hidden;\n -webkit-tap-highlight-color: transparent; }\n\n.bar, .bar .loaded, .bar .passed {\n font-size: 0.5em;\n width: calc(100% - 0.8em);\n height: 0.6em;\n margin: 0 calc(1em + 1em);\n border-radius: 0.6em;\n border: none;\n background-color: rgba(255, 255, 255, 0.2);\n cursor: pointer;\n position: relative;\n -webkit-touch-callout: none;\n /* Disable Android and iOS callouts*/\n -webkit-user-select: none; }\n .bar .loaded, .bar .passed {\n position: absolute;\n background-color: rgba(255, 255, 255, 0.2);\n margin: 0;\n width: 0;\n height: 100%; }\n .bar .passed {\n background-color: rgba(255, 255, 255, 0.7);\n width: 60%; }\n .bar .handle {\n display: block;\n background-color: rgba(255, 255, 255, 0.85);\n width: 2em;\n height: 2em;\n border: 1px solid gray;\n border-radius: 2em;\n cursor: inherit;\n position: relative;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 0; }\n .bar .handle:hover, .bar .handle:active {\n background-color: white; }\n", ""]); +exports.push([module.i, ":host {\n display: flex;\n align-items: center;\n font-size: 20px;\n max-width: 100%;\n height: 2em;\n overflow: hidden;\n -webkit-tap-highlight-color: transparent; }\n\n.bar, .bar .loaded, .bar .passed {\n font-size: 0.5em;\n width: calc(100% - 0.8em);\n height: 0.6em;\n margin: 0 calc(1em + 1em);\n border-radius: 0.6em;\n border: none;\n background-color: rgba(255, 255, 255, 0.2);\n cursor: pointer;\n position: relative;\n -webkit-touch-callout: none;\n /* Disable Android and iOS callouts*/\n -webkit-user-select: none; }\n .bar .loaded, .bar .passed {\n position: absolute;\n background-color: rgba(255, 255, 255, 0.2);\n margin: 0;\n width: 0;\n height: 100%; }\n .bar .passed {\n background-color: rgba(255, 255, 255, 0.7);\n width: 0; }\n .bar .handle {\n display: block;\n background-color: rgba(255, 255, 255, 0.85);\n width: 2em;\n height: 2em;\n border: 1px solid gray;\n border-radius: 2em;\n cursor: inherit;\n position: relative;\n transform: translate(-50%, -50%);\n top: 50%;\n left: 0; }\n .bar .handle:hover, .bar .handle:active {\n background-color: white; }\n", ""]); // exports diff --git a/src/css/style.scss b/src/css/style.scss index 8438b9d..89c28f2 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -51,7 +51,7 @@ $handleColorHovered: rgba(white, 1.0); .passed { @extend .loaded; background-color: $barColorPassed; - width: 60%; // This can be changed by script + width: 0; // This can be changed by script } .handle { diff --git a/src/js/customrangeinput.js b/src/js/customrangeinput.js index c10a86a..33d550e 100644 --- a/src/js/customrangeinput.js +++ b/src/js/customrangeinput.js @@ -30,6 +30,11 @@ /* global require, ShadyCSS, VERSION */ export default function defineCustomRangeInput() { + if (!customElements || customElements.get("custom-range-input")) { + // Immediately return if customElements object is absent, or + // "custom-range-input" already defined. + return; + } /** * Actually CustomRangeInput extends HTMLInputElement ( element) but * it seems not to work on current browser implementations. @@ -138,7 +143,7 @@ export default function defineCustomRangeInput() { return ["value", "subvalue", "min", "max", "step"]; } attributeChangedCallback(prop, oldValue, newValue) { - if (Number(oldValue) != Number(newValue)) { + if (oldValue != newValue) { this[prop] = Number(newValue); this.dispatchEvent(new Event("change")); }