ws

Author: frankiefu

core-range.html

@@ -8,7 +8,6 @@
 -->
 
 <!--
-
 The `core-range` element is used for managing a numberic value within a given 
 range.  It has no visual appearance and is typically used in conjunciton with 
 another element.
@@ -27,85 +26,83 @@
 <link rel="import" href="../polymer/polymer.html">
 
 <polymer-element name="core-range" attributes="value min max step ratio">
+<script>
 
-  <script>
-  
-    Polymer('core-range', {
-      
-      /**
-       * The number that represents the current value.
-       *
-       * @attribute value
-       * @type number
-       * @default 0
-       */
-      value: 0,
-      
-      /**
-       * The number that indicates the minimum value of the range.
-       *
-       * @attribute min
-       * @type number
-       * @default 0
-       */
-      min: 0,
-      
-      /**
-       * The number that indicates the maximum value of the range.
-       *
-       * @attribute max
-       * @type number
-       * @default 100
-       */
-      max: 100,
-      
-      /**
-       * Specifies the value granularity of the range's value.
-       *
-       * @attribute step
-       * @type number
-       * @default 1
-       */
-      step: 1,
-      
-      /**
-       * Returns the ratio of the value.
-       *
-       * @attribute ratio
-       * @type number
-       * @default 0
-       */
-      ratio: 0,
-      
-      observe: {
-        'value min max step': 'update'
-      },
-      
-      calcRatio: function(value) {
-        return (value - this.min) / (this.max - this.min);
-      },
-      
-      clampValue: function(value) {
-        return Math.min(this.max, Math.max(this.min, this.calcStep(value)));
-      },
-      
-      calcStep: function(value) {
-        return this.step ? (Math.round(value / this.step) * this.step) : value;
-      },
-      
-      validateValue: function() {
-        var v = this.clampValue(this.value);
-        this.value = this.oldValue = isNaN(v) ? this.oldValue : v;
-        return this.value !== v;
-      },
-      
-      update: function() {
-        this.validateValue();
-        this.ratio = this.calcRatio(this.value) * 100;
-      }
-      
-    });
+  Polymer('core-range', {
+    
+    /**
+     * The number that represents the current value.
+     *
+     * @attribute value
+     * @type number
+     * @default 0
+     */
+    value: 0,
+    
+    /**
+     * The number that indicates the minimum value of the range.
+     *
+     * @attribute min
+     * @type number
+     * @default 0
+     */
+    min: 0,
+    
+    /**
+     * The number that indicates the maximum value of the range.
+     *
+     * @attribute max
+     * @type number
+     * @default 100
+     */
+    max: 100,
+    
+    /**
+     * Specifies the value granularity of the range's value.
+     *
+     * @attribute step
+     * @type number
+     * @default 1
+     */
+    step: 1,
+    
+    /**
+     * Returns the ratio of the value.
+     *
+     * @attribute ratio
+     * @type number
+     * @default 0
+     */
+    ratio: 0,
+    
+    observe: {
+      'value min max step': 'update'
+    },
+    
+    calcRatio: function(value) {
+      return (value - this.min) / (this.max - this.min);
+    },
+    
+    clampValue: function(value) {
+      return Math.min(this.max, Math.max(this.min, this.calcStep(value)));
+    },
+    
+    calcStep: function(value) {
+      return this.step ? (Math.round(value / this.step) * this.step) : value;
+    },
+    
+    validateValue: function() {
+      var v = this.clampValue(this.value);
+      this.value = this.oldValue = isNaN(v) ? this.oldValue : v;
+      return this.value !== v;
+    },
+    
+    update: function() {
+      this.validateValue();
+      this.ratio = this.calcRatio(this.value) * 100;
+    }
 
-  </script>
+  });
 
+</script>
 </polymer-element>