jqmobi-rails 0.0.0

data/vendor/assets/javascripts/plugins/jq.actionsheet.js

@@ -0,0 +1,99 @@
+/**
+ * jq.web.actionsheet - a actionsheet for html5 mobile apps
+ * Copyright 2012 - AppMobi 
+ */
+(function($) {
+    $.fn["actionsheet"] = function(opts) {
+        var tmp;
+        for (var i = 0; i < this.length; i++) {
+            tmp = new actionsheet(this[i], opts);
+        }
+        return this.length == 1 ? tmp : this;
+    };
+    var actionsheet = (function() {
+        if (!window.WebKitCSSMatrix)
+            return;
+        
+        var actionsheet = function(elID, opts) {
+            if (typeof elID == "string" || elID instanceof String) {
+                this.el = document.getElementById(elID);
+            } else {
+                this.el = elID;
+            }
+            if (!this.el) {
+                alert("Could not find element for actionsheet " + elID);
+                return;
+            }
+            
+            if (this instanceof actionsheet) {
+                if(typeof(opts)=="object"){
+                for (j in opts) {
+                    this[j] = opts[j];
+                }
+                }
+            } else {
+                return new actionsheet(elID, opts);
+            }
+            
+            try {
+                var that = this;
+                var markStart = '</div><div id="jq_actionsheet"><div style="width:100%">';
+                var markEnd = '</div></div>';
+                var markup;
+                if (typeof opts == "string") {
+                    markup = $(markStart + opts +"<a href='javascript:;' class='cancel'>Cancel</a>"+markEnd);
+                } else if (typeof opts == "object") {
+                    markup = $(markStart + markEnd);
+                    var container = $(markup.children().get());
+                    opts.push({text:"Cancel",cssClasses:"cancel"});
+                    for (var i = 0; i < opts.length; i++) {
+                        var item = $('<a href="javascript:;" >' + (opts[i].text || "TEXT NOT ENTERED") + '</a>');
+                        item[0].onclick = (opts[i].handler || function() {});
+                        if (opts[i].cssClasses && opts[i].cssClasses.length > 0)
+                            item.addClass(opts[i].cssClasses);
+                        container.append(item);
+                    }
+                }
+                $(elID).find("#jq_actionsheet").remove();
+                $(elID).find("#jq_action_mask").remove();
+                actionsheetEl = $(elID).append(markup);
+                
+                markup.get().style.webkitTransition="all 0ms";
+                markup.css("-webkit-transform", "translate3d(0,"+(window.innerHeight*2) + "px,0)");
+                this.el.style.overflow = "hidden";
+                markup.on("click", "a",function(){that.hideSheet()});
+                this.activeSheet=markup;
+                $(elID).append('<div id="jq_action_mask" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;z-index:9998;background:rgba(0,0,0,.4)"/>');
+                setTimeout(function(){
+                    markup.get().style.webkitTransition="all 200ms";
+                    var height=window.innerHeight-parseInt(markup.css("height"));
+                    markup.css("-webkit-transform", "translate3d(0,"+(height)+"px,0)");
+                 },10);
+            } catch (e) {
+                alert("error adding actionsheet" + e);
+            }
+        };
+        actionsheet.prototype = {
+            activeSheet:null,
+            hideSheet: function() {
+                var that=this;
+                this.activeSheet.off("click","a",function(){that.hideSheet()});
+                $(this.el).find("#jq_action_mask").remove();
+                this.activeSheet.get().style.webkitTransition="all 0ms";
+                var markup = this.activeSheet;
+                var theEl = this.el;
+                setTimeout(function(){
+                    
+                	markup.get().style.webkitTransition="all 500ms";
+                	markup.css("-webkit-transform", "translate3d(0,"+(window.innerHeight*2) + "px,0)");
+                	setTimeout(function(){
+		                markup.remove();
+		                markup=null;
+		                theEl.style.overflow = "none";
+	                },500);
+                },10);            
+            }
+        };
+        return actionsheet;
+    })();
+})(jq);

data/vendor/assets/javascripts/plugins/jq.alphatable.js

@@ -0,0 +1,136 @@
+/**
+ * $.alphaTable - a list table for jqMobi apps
+ * 
+ * @copyright AppMobi 2011 - AppMobi
+ * 
+ */ (function ($) {
+    $.fn["alphatable"] = function (scroller, opts) {
+        var tmp;
+        for (var i = 0; i < this.length; i++) {
+            tmp = new alphaTable(this[i], scroller, opts);
+
+        }
+        return this.length == 1 ? tmp : this;
+    };
+
+    var alphaTable = (function () {
+        if (!window.WebKitCSSMatrix) return;
+        var translateOpen = 'm11' in new WebKitCSSMatrix() ? "3d(" : "(";
+        var translateClose = 'm11' in new WebKitCSSMatrix() ? ",0)" : ")";
+        var alphaTable = function (el, scroller, opts) {
+
+                if (typeof el == "string") el = document.getElementById(el);
+                this.container = el.parentNode;
+                if (!this.container) {
+                    alert("Error finding container for alphaTable " + el);
+                    return;
+                }
+                if (this instanceof alphaTable) {
+                    for (j in opts) {
+                        this[j] = opts[j];
+                    }
+                } else {
+                    return new alphaTable(el, scroller, opts);
+                }
+                if (!scroller || typeof (scroller) != "object") {
+                    return alert("Error: Please include an jq.web.scroll object to use this");
+                }
+                this.scroller = scroller;
+
+                this.el = el;
+                this.setupIndex();
+                this.setupLetterBox();
+            };
+
+        alphaTable.prototype = {
+            listCssClass: "",
+            letterBox: null,
+            isMoving: false,
+            prefix: "",
+            scrollToLetter: function (letter) {
+                var el = document.getElementById(this.prefix + letter);
+                if (el) {
+                    var yPos = -el.offsetTop;
+                    this.scroller.scrollTo({
+                        x: 0,
+                        y: yPos
+                    });
+                }
+            },
+            setupIndex: function () {
+                var arrAlphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
+                var that = this;
+                var containerDiv = document.createElement("div");
+                containerDiv.id = "indexDIV_" + this.el.id;
+                containerDiv.style.cssText = "position:absolute;top:0px;right:20px;width:20px;font-size:6pt;font-weight:bold;color:#000;opacity:.5;border-radius:5px;text-align:center;z-index:9999;border:1px solid black;background:#666;padding-top:5px;padding-bottom:5px;";
+                containerDiv.className = this.listCssClass;                
+                containerDiv.addEventListener("touchend", function (event) {
+                    that.isMoving = false;
+                    that.clearLetterBox()
+                }, false);
+                //To allow updating as we "scroll" with our finger, we need to capture the position on the containerDiv element and calculate the Y coordinates.
+                //On mobile devices, you can not do an "onmouseover" over multiple items and trigger events.
+                containerDiv.addEventListener("touchstart", function (event) {
+                    if(event.touches[0].target==this) return;
+                    that.isMoving = true;
+                    
+                    var letter = document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
+                    if(!letter||!letter.getAttribute("alphatable-item")||letter.getAttribute("alphatable-item").length==0)
+                       return;
+                    that.showLetter(letter.innerHTML);
+                    that.scrollToLetter(letter.innerHTML);
+                    event.preventDefault();
+                }, false);
+                containerDiv.addEventListener("touchmove", function (event) {
+                    var letter = document.elementFromPoint(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
+                    if(!letter||!letter.getAttribute("alphatable-item")||letter.getAttribute("alphatable-item").length==0)
+                       return;
+                    if (!that.isMoving) return;
+                    that.showLetter(letter.innerHTML);
+                    that.scrollToLetter(letter.innerHTML);
+                    event.preventDefault();
+                }, false);
+
+                //Create the alphabet
+                for (i = 0; i < arrAlphabet.length; i++) {
+                    var tmpDiv = document.createElement("div");
+                    tmpDiv.innerHTML = arrAlphabet[i];
+                    tmpDiv.setAttribute("alphatable-item","true");
+                    containerDiv.appendChild(tmpDiv);
+                }
+                this.container.appendChild(containerDiv);
+
+                var clientHeight = numOnly(containerDiv.clientHeight) - numOnly(containerDiv.style.top) - numOnly(containerDiv.style.paddingTop);
+                this.scroller.scrollTo({
+                    x: 0,
+                    y: 0
+                }); //There's a bug with webkit and css3.  The letterbox would not show until -webkit-transform as applied.
+                containerDiv = null;
+
+            },
+            showLetter: function (letter) {
+                var that = this;
+                this.letterBox.style.display = "block";
+                if (this.letterBox.innerHTML != letter) {
+                    that.letterBox.innerHTML = letter
+                }
+
+            },
+            clearLetterBox: function () {
+                this.letterBox.style.display = "none";
+                this.letterBox.innerHTML = "";
+            },
+            setupLetterBox: function () {
+                var div = document.createElement("div");
+                div.style.cssText = "-webkit-transform:translate3d(0,0,0);display:none;position:absolute;top:35%;left:35%;height:2em;width:15%;line-height:2em;text-align:center;font-size:2em;color:blue;background:#666;z-index:999999;border:1px solid black;border-raidus:10px;";
+                div.className = this.letterBoxCssClass;
+                div.innerHTML = "";
+                this.letterBox = div;
+                this.container.appendChild(div);
+                div = null;
+
+            }
+        };
+        return alphaTable;
+    })();
+})(jq);

data/vendor/assets/javascripts/plugins/jq.carousel.js

@@ -0,0 +1,415 @@
+/**
+ * jq.web.carousel - a carousel library for html5 mobile apps
+ * @copyright AppMobi 2011 - AppMobi
+ * 
+ */
+(function($) {
+    var cache = [];
+    $.fn.carousel = function(opts) {
+        if (opts === undefined && this.length > 0) 
+        {
+            return cache[this[0].id] ? cache[this[0].id] : null;
+        }
+        var tmp;
+        for (var i = 0; i < this.length; i++) {
+            tmp = new carousel(this[i], opts);
+            if (this[i].id)
+                cache[this[i].id] = tmp;
+        }
+        return this.length === 1 ? tmp : this;
+    };
+    
+    var carousel = (function() {
+        if (!window.WebKitCSSMatrix) {
+            return;
+        }
+        var translateOpen = 'm11' in new WebKitCSSMatrix() ? "3d(" : "(";
+        var translateClose = 'm11' in new WebKitCSSMatrix() ? ",0)" : ")";
+        
+        var carousel = function(containerEl, opts) {
+            if (typeof containerEl === "string" || containerEl instanceof String) {
+                this.container = document.getElementById(containerEl);
+            } else {
+                this.container = containerEl;
+            }
+            if (!this.container) {
+                alert("Error finding container for carousel " + containerEl);
+                return;
+            }
+            if (this instanceof carousel) {
+                for (var j in opts) {
+                    if (opts.hasOwnProperty(j)) {
+                        this[j] = opts[j];
+                    }
+                }
+            } else {
+                
+                return new carousel(containerEl, opts);
+            }
+            try {
+                var that = this;
+                this.pagingDiv = this.pagingDiv ? document.getElementById(this.pagingDiv) : null;
+
+
+                // initial setup
+                this.container.style.overflow = "hidden";
+                this.container.style['-webkit-box-orient'] = "vertical";
+                this.container.style['display'] = "-webkit-box";
+                this.container.style['-webkit-box-orient'] = "vertical";
+                if (this.vertical) {
+                    this.horizontal = false;
+                }
+                var tmpHTML = this.container.innerHTML;
+                this.container.innerHTML = "";
+                var el = document.createElement("div");
+                el.innerHTML = tmpHTML;
+                if (this.horizontal) {
+                    el.style.display = "-webkit-box";
+                    el.style['-webkit-box-flex'] = 1;
+                } 
+                else {
+                    el.style.display = "block";
+                }
+                this.container.appendChild(el);
+                this.el = el;
+                this.refreshItems();
+                el.addEventListener('touchmove', function(e) {
+                    that.touchMove(e);
+                }, false);
+                el.addEventListener('touchend', function(e) {
+                    that.touchEnd(e);
+                }, false);
+                el.addEventListener('touchstart', function(e) {
+                    that.touchStart(e);
+                }, false);
+                var that = this;
+                window.addEventListener("orientationchange", function() {
+                    that.onMoveIndex(that.carouselIndex,0);
+                }, false);
+            
+            } catch (e) {
+                console.log("error adding carousel " + e);
+            }
+        };
+        
+        carousel.prototype = {
+            startX: 0,
+            startY: 0,
+            dx: 0,
+            dy: 0,
+            myDivWidth: 0,
+            myDivHeight: 0,
+            cssMoveStart: 0,
+            childrenCount: 0,
+            carouselIndex: 0,
+            vertical: false,
+            horizontal: true,
+            el: null,
+            movingElement: false,
+            container: null,
+            pagingDiv: null,
+            pagingCssName: "carousel_paging",
+            pagingCssNameSelected: "carousel_paging_selected",
+            pagingFunction: null,
+            lockMove:false,
+            // handle the moving function
+            touchStart: function(e) {
+                this.myDivWidth = numOnly(this.container.clientWidth);
+                this.myDivHeight = numOnly(this.container.clientHeight);
+                this.lockMove=false;
+                if (event.touches[0].target && event.touches[0].target.type !== undefined) {
+                    var tagname = event.touches[0].target.tagName.toLowerCase();
+                    if (tagname === "select" || tagname === "input" || tagname === "button")  // stuff we need to allow
+                    {
+                        return;
+                    }
+                }
+                if (e.touches.length === 1) {
+                    
+                    this.movingElement = true;
+                    this.startY = e.touches[0].pageY;
+                    this.startX = e.touches[0].pageX;
+                    //e.preventDefault();
+                    //e.stopPropagation();
+                    if (this.vertical) {
+                        try {
+                            this.cssMoveStart = numOnly(new WebKitCSSMatrix(window.getComputedStyle(this.el, null).webkitTransform).f);
+                        } catch (ex1) {
+                            this.cssMoveStart = 0;
+                        }
+                    } else {
+                        try {
+                            this.cssMoveStart = numOnly(new WebKitCSSMatrix(window.getComputedStyle(this.el, null).webkitTransform).e);
+                        } catch (ex1) {
+                            this.cssMoveStart = 0;
+                        }
+                    }
+                }
+            },
+            touchMove: function(e) {
+                // e.preventDefault();
+                // e.stopPropagation();
+                if(!this.movingElement)
+                   return;
+                if (e.touches.length > 1) {
+                    return this.touchEnd(e);
+                }
+                
+                var rawDelta = {
+                    x: e.touches[0].pageX - this.startX,
+                    y: e.touches[0].pageY - this.startY
+                };
+                
+                if (this.vertical) {
+                    var movePos = { x: 0, y: 0 };
+                    this.dy = e.touches[0].pageY - this.startY;
+                    this.dy += this.cssMoveStart;
+                    movePos.y = this.dy;
+                    e.preventDefault();
+                        e.stopPropagation();
+                } else {
+                    if (!this.lockMove&&isHorizontalSwipe(rawDelta.x, rawDelta.y)) {
+                         
+                        var movePos = {x: 0,y: 0};
+                        this.dx = e.touches[0].pageX - this.startX;
+                        this.dx += this.cssMoveStart;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        movePos.x = this.dx;
+                    }
+                    else
+                       return this.lockMove=true;
+                }
+                
+                var totalMoved = this.vertical ? ((this.dy % this.myDivHeight) / this.myDivHeight * 100) * -1 : ((this.dx % this.myDivWidth) / this.myDivWidth * 100) * -1; // get a percentage of movement.
+                if(movePos)
+                    this.moveCSS3(this.el, movePos);
+            },
+            touchEnd: function(e) {
+                if (!this.movingElement) {
+                    return;
+                }
+                // e.preventDefault();
+                // e.stopPropagation();
+                var runFinal = false;
+                try {
+                    var endPos = this.vertical ? numOnly(new WebKitCSSMatrix(window.getComputedStyle(this.el, null).webkitTransform).f) : numOnly(new WebKitCSSMatrix(window.getComputedStyle(this.el, null).webkitTransform).e);
+                    if (endPos > 0) {
+                        this.moveCSS3(this.el, {
+                            x: 0,
+                            y: 0
+                        }, "300");
+                    } else {
+                        var totalMoved = this.vertical ? ((this.dy % this.myDivHeight) / this.myDivHeight * 100) * -1 : ((this.dx % this.myDivWidth) / this.myDivWidth * 100) * -1; // get a percentage of movement.
+                        // Only need
+                        // to drag 3% to trigger an event
+                        var currInd = this.carouselIndex;
+                        if (endPos < this.cssMoveStart && totalMoved > 3) {
+                            currInd++; // move right/down
+                        } else if ((endPos > this.cssMoveStart && totalMoved < 97)) {
+                            currInd--; // move left/up
+                        }
+                        if (currInd > (this.childrenCount - 1)) {
+                            currInd = this.childrenCount - 1;
+                        }
+                        if (currInd < 0) {
+                            currInd = 0;
+                        }
+                        var movePos = {
+                            x: 0,
+                            y: 0
+                        };
+                        if (this.vertical) {
+                            movePos.y = (currInd * this.myDivHeight * -1);
+                        } 
+                        else {
+                            movePos.x = (currInd * this.myDivWidth * -1);
+                        }
+                        
+                        this.moveCSS3(this.el, movePos, "150");
+                        
+                        if (this.pagingDiv && this.carouselIndex !== currInd) {
+                            document.getElementById(this.container.id + "_" + this.carouselIndex).className = this.pagingCssName;
+                            document.getElementById(this.container.id + "_" + currInd).className = this.pagingCssNameSelected;
+                        }
+                        if (this.carouselIndex != currInd)
+                            runFinal = true;
+                        this.carouselIndex = currInd;
+                    }
+                } catch (e) {
+                    console.log(e);
+                }
+                this.dx = 0;
+                this.movingElement = false;
+                this.startX = 0;
+                this.dy = 0;
+                this.startY = 0;
+                if (runFinal && this.pagingFunction && typeof this.pagingFunction == "function")
+                    this.pagingFunction(this.carouselIndex);
+            },
+            onMoveIndex: function(newInd,transitionTime) {
+                
+                this.myDivWidth = numOnly(this.container.clientWidth);
+                this.myDivHeight = numOnly(this.container.clientHeight);
+                var runFinal = false;
+                try {
+                    
+                    document.getElementById(this.container.id + "_" + this.carouselIndex).className = this.pagingCssName;
+                    var newTime = Math.abs(newInd - this.carouselIndex);
+                    
+                    var ind = newInd;
+                    if (ind < 0)
+                        ind = 0;
+                    if (ind > this.childrenCount - 1) {
+                        ind = this.childrenCount - 1;
+                    }
+                    var movePos = {
+                        x: 0,
+                        y: 0
+                    };
+                    if (this.vertical) {
+                        movePos.y = (ind * this.myDivHeight * -1);
+                    } 
+                    else {
+                        movePos.x = (ind * this.myDivWidth * -1);
+                    }
+                    
+                    var time =transitionTime?transitionTime: 50 + parseInt((newTime * 20));
+                    this.moveCSS3(this.el, movePos, time);
+                    if (this.carouselIndex != ind)
+                        runFinal = true;
+                    this.carouselIndex = ind;
+                    if (this.pagingDiv) {
+                        
+                        document.getElementById(this.container.id + "_" + this.carouselIndex).className = this.pagingCssNameSelected;
+                    }
+                } catch (e) {
+                    console.log("Error " + e);
+                }
+                if (runFinal && this.pagingFunction && typeof this.pagingFunction == "function")
+                    this.pagingFunction(currInd);
+            },
+            
+            moveCSS3: function(el, distanceToMove, time, timingFunction) {
+                if (!time)
+                    time = 0;
+                else
+                    time = parseInt(time);
+                if (!timingFunction)
+                    timingFunction = "linear";
+                
+                el.style.webkitTransform = "translate" + translateOpen + distanceToMove.x + "px," + distanceToMove.y + "px" + translateClose;
+                el.style.webkitTransitionDuration = time + "ms";
+                el.style.webkitBackfaceVisiblity = "hidden";
+                el.style.webkitTransformStyle = "preserve-3d";
+                el.style.webkitTransitionTimingFunction = timingFunction;
+            },
+            
+            addItem: function(el) {
+                if (el && el.nodeType) {
+                    
+                    this.container.childNodes[0].appendChild(el);
+                    this.refreshItems();
+                }
+            },
+            refreshItems: function() {
+                var childrenCounter = 0;
+                var that = this;
+                var el = this.el;
+                n = el.childNodes[0];
+                var widthParam;
+                var heightParam = "100%";
+                var elems = [];
+                for (; n; n = n.nextSibling) {
+                    if (n.nodeType === 1) {
+                        elems.push(n);
+                        childrenCounter++;
+                    }
+                }
+                var param = (100 / childrenCounter) + "%";
+                this.childrenCount = childrenCounter;
+                widthParam = parseFloat(100 / this.childrenCount) + "%";
+                for (var i = 0; i < elems.length; i++) {
+                    if (this.horizontal) {
+                        elems[i].style.width = widthParam;
+                        elems[i].style.height = "100%";
+                    } 
+                    else {
+                        elems[i].style.height = widthParam;
+                        elems[i].style.width = "100%";
+                        elems[i].style.display = "block";
+                    }
+                }
+                this.moveCSS3(el, {
+                    x: 0,
+                    y: 0
+                });
+                if (this.horizontal) {
+                    el.style.width = Math.ceil((this.childrenCount) * 100) + "%";
+                    el.style.height = "100%";
+                    el.style['min-height'] = "100%"
+                } 
+                else {
+                    el.style.width = "100%";
+                    el.style.height = Math.ceil((this.childrenCount) * 100) + "%";
+                    el.style['min-height'] = Math.ceil((this.childrenCount) * 100) + "%";
+                }
+                // Create the paging dots
+                if (this.pagingDiv) {
+                    this.pagingDiv.innerHTML = ""
+                    for (i = 0; i < this.childrenCount; i++) {
+                        
+                        var pagingEl = document.createElement("div");
+                        pagingEl.id = this.container.id + "_" + i;
+                        pagingEl.pageId = i;
+                        if (i !== 0) {
+                            pagingEl.className = this.pagingCssName;
+                        } 
+                        else {
+                            pagingEl.className = this.pagingCssNameSelected;
+                        }
+                        pagingEl.onclick = function() {
+                            that.onMoveIndex(this.pageId);
+                        };
+                        var spacerEl = document.createElement("div");
+                     
+                        spacerEl.style.width = "20px";
+                        if(this.horizontal){
+                            spacerEl.style.cssFloat = "left";
+                            spacerEl.innerHTML = "&nbsp;";
+                        }
+                        else{
+                           spacerEl.innerHTML="&nbsp;";
+                           spacerEl.style.display="block";
+                        }
+                        
+                        this.pagingDiv.appendChild(pagingEl);
+                        if (i + 1 < (this.childrenCount))
+                            this.pagingDiv.appendChild(spacerEl);
+                        pagingEl = null;
+                        spacerEl = null;
+                    }
+                    this.pagingDiv.style.width = (this.childrenCount) * 50 + "px";
+                    this.pagingDiv.style.height = "25px";
+                }
+                this.onMoveIndex(this.carouselIndex);
+            
+            }
+        
+        };
+        return carousel;
+    })();
+    
+    function isHorizontalSwipe(xAxis, yAxis) {
+                var X = xAxis;
+                var Y = yAxis;
+                var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
+                var r = Math.atan2(Y,X); //angle in radians 
+                var swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
+                if ( swipeAngle < 0 ) { swipeAngle =  360 - Math.abs(swipeAngle); } // for negative degree values
+                if (((swipeAngle <= 215) && (swipeAngle >= 155)) || ((swipeAngle <= 45) && (swipeAngle >= 0)) || ((swipeAngle <= 360) && (swipeAngle >= 315))) // horizontal angles with threshold
+                {return true; }
+                else {return false}
+    }
+    
+})(jq);