Added HTML5 range plugin

imaffett · May 1, 2012 · 0d7f6bd · 0d7f6bd
1 parent 4ce53e7
commit 0d7f6bd
Show file tree

Hide file tree

Showing 3 changed files with 245 additions and 0 deletions.
diff --git a/range/index.html b/range/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+  <title>Mobile Range Slider - A Touch Slider for Webkit / Mobile Safari</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <link rel="stylesheet" href="jq.range.css" />
+  <script src="http://cdn.jqmobi.com/jq.mobi.min.js"></script>
+  <script>
+if(!((window.DocumentTouch&&document instanceof DocumentTouch)||'ontouchstart' in window)){
+var script=document.createElement("script");
+script.src="http://cdn.jqmobi.com/touch.js";
+var tag=$("head").append(script);
+$.os.android=true; //let's make it run like an android device
+$.os.desktop=true;
+}
+</script>
+<body>
+
+<div style="position:absolute;top:35px;left:5px;width:25px">
+  <input type="text" id="output1" style='width:25px' /></div>
+  <div style="padding: 30px;width:200px;">
+    <div id="slider1" class="slider">
+    </div>
+  </div>
+
+
+
+  <div id="slider2" class="slider">
+
+  </div>
+
+
+
+  <script type="text/javascript" src="jq.range.js"></script>
+
+  <script type="text/javascript">
+    var input1=$("#output1").get();
+    var slider1 = $('#slider1').range({
+      value: 105,
+      min: 100,
+      max: 110,
+      stepFunc: function(percentage) {
+        input1.value = percentage;
+      }
+    });
+
+    $("#slider2").range({value:15});
+
+    $("#output1").bind("change",function(e){$("#slider1").range().val(this.value)});
+  </script>
+
+</body>
+</html>
diff --git a/range/jq.range.css b/range/jq.range.css
@@ -0,0 +1,52 @@
+.slider {
+  position: relative;
+  width: 100%;
+  height: 50px;
+}
+
+.range,.rangefill {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background-color: #ccc;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  z-index: -1;
+  border-radius:5px;
+  border:1px solid #666;
+}
+
+.rangefill{
+width:0px;
+background-color:#5393C5;
+}
+
+.rangeBubble{
+position:absolute;top:-25px;
+width:20px;
+height:20px;
+border-radius:15px;
+text-align:center;
+margin-auto;
+border:1px solid #5393C5;
+background:#fff;
+font-size:.5em;
+line-height:20px;
+}
+
+.pointer {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  height: 20px;
+  width: 20px;
+  background-color: black;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  background: -webkit-gradient(linear, left top, left bottom, from(rgb(253,253,253)), to(rgb(190,190,190)));
+  background: -webkit-linear-gradient(top, rgb(253,253,253), rgb(190,190,190));
+  border: 1px solid rgb(160,160,160);
+  cursor: pointer;
+}
diff --git a/range/jq.range.js b/range/jq.range.js
@@ -0,0 +1,139 @@
+/*
+ * @author Ian Maffett
+ * @copywrite AppMobi 2012
+ * @desc - Range slider for jqMobi apps
+ */
+
+
+/**
+ * 
+   jq.range.js replicates the HTML5 range input for mobile apps.  
+   This is based on https://github.com/ubilabs/mobile-range-slider
+   but adapted for jqMobi and webkit only.
+   ```
+    $("#slider1").range({min:1,max:20,val:10,stepFunc(val){}});
+   ```
+   *@param {Object} [options]
+   *@title $().range([options]);
+   */
+(function ($) {
+
+    var rangeCache=[];
+    /**
+     * This creates a range object or retrieves it from the cache
+     */
+    $.fn.range = function (opts) {
+        if (this.length == 0) return;
+        if(opts===undefined)
+            return rangeCache[this[0].jqid];
+        for (var i = 0; i < this.length; i++) {
+            //Assign a jqid for the cache in case they don't have an id on the elements
+            if(!this[i].jqid)
+                this[i].jqid=$.uuid();
+            rangeCache[this[i].jqid]=new range(this[i], opts);
+        }
+    };
+
+    var range = function (elem, opts) {
+        var that=this;
+        this.elem=elem;
+        this.pointer=$("<div class='"+this.pointerClass+"'></div>").get(); //round pointer we drag
+        this.range=$("<div class='"+this.rangeClass+"'></div>").get(); //range that we drag on
+        this.rangeFill=$("<div class='"+this.rangeFillClass+"'></div>").get(); //range fill to the left
+        this.bubble=$("<div class='"+this.bubbleClass+"'></div>").get(); //bubble above showing the value
+        this.pointer.style.webkitTransitionDuration="0ms"
+        this.elem.appendChild(this.pointer);
+        this.elem.appendChild(this.range);
+        this.elem.appendChild(this.rangeFill);
+        this.elem.appendChild(this.bubble);
+        if(this.elem.style.position==="static")
+            this.elem.style.position="relative";
+
+        for(var j in opts){
+            this[j]=opts[j];
+        }
+
+        if(opts['value'])
+            this.val(opts['value']);
+
+        this.elem.addEventListener("touchstart",this);
+    }
+
+    range.prototype={
+        min:1,
+        max:100,
+        value:0,
+        rangeClass:"range",
+        pointerClass:"pointer",
+        sliderClass:"slider",
+        rangeFillClass:"rangefill",
+        bubbleClass:"rangeBubble",
+        stepFunc:function(){},
+        handleEvent:function(evt){
+            switch(evt.type){
+                case "touchstart":this.onTouchStart(evt);
+                break;
+                case "touchmove":this.onTouchMove(evt);
+                break;
+                case "touchend":this.onTouchEnd(evt);
+                break;
+            }
+        },
+        onTouchStart:function(event){
+            var that=this;
+            this.elem.addEventListener("touchmove",this);
+            this.elem.addEventListener("touchend",this);
+
+        },
+        onTouchMove:function(event){
+            event.preventDefault();
+
+
+            var position = event.touches[0].pageX, 
+              element,
+              pointerW = this.pointer.offsetWidth,
+              rangeW = this.range.offsetWidth,
+              width = rangeW - pointerW,
+              range = this.max - this.min,
+              value;
+
+            position-=$(this.elem).offset().left;
+
+            position += pointerW / 2;
+            position = Math.min(position, rangeW);
+            position = Math.max(position - pointerW, 0);
+            this.bubble.style.webkitTransform=this.pointer.style.webkitTransform="translate3d("+position+"px,0,0)";
+
+            // update
+            value = this.min + Math.round(position * range / width);
+            this.val(value,position);
+        },
+        onTouchEnd:function(event){
+
+            this.elem.removeEventListener("touchmove",this,true);
+            this.elem.removeEventListener("touchend",this,true);
+        },
+        val:function(val,position){
+            if (val === undefined)
+                return this.value
+
+            val = Math.min(val, this.max);
+            val = Math.max(val, this.min);
+            if(position===undefined){
+                var 
+                  pointerW = this.pointer.offsetWidth,
+                  rangeW = this.range.offsetWidth,
+                  range = this.max - this.min,
+                  width = rangeW - pointerW,
+                  position = Math.round((val - this.min) * width / range);
+                  this.bubble.style.webkitTransform=this.pointer.style.webkitTransform="translate3d("+position+"px,0,0)";
+
+            }
+            this.rangeFill.style.width=position+"px";
+
+            this.bubble.innerHTML=val;
+            this.value = val;
+            this.stepFunc(val);
+        }
+    }
+})(jq);