Avoid double definition of customElements, Initial value reflection t…

…o ui

updated changelog

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)
 ----------------------

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 (<input> 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
 

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 {

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