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"));
}