diff options
Diffstat (limited to 'module/web/static')
| -rw-r--r-- | module/web/static/js/libs/jquery.fastClick-0.2.js | 96 | ||||
| -rw-r--r-- | module/web/static/js/libs/jquery.transit-0.1.3.js | 658 | ||||
| -rw-r--r-- | module/web/static/js/routers/mobileRouter.js | 55 |
3 files changed, 809 insertions, 0 deletions
diff --git a/module/web/static/js/libs/jquery.fastClick-0.2.js b/module/web/static/js/libs/jquery.fastClick-0.2.js new file mode 100644 index 000000000..49eb75d2a --- /dev/null +++ b/module/web/static/js/libs/jquery.fastClick-0.2.js @@ -0,0 +1,96 @@ +/** + * jQuery.fastClick.js + * + * Work around the 300ms delay for the click event in some mobile browsers. + * + * Code based on <http://code.google.com/mobile/articles/fast_buttons.html> + * + * @usage + * $('button').fastClick(function() {alert('clicked!');}); + * + * @license Under Creative Commons Attribution 3.0 License + * @author Dave Hulbert (dave1010) + * @version 0.2 2011-09-20 + */ + +/*global document, window, jQuery, Math */ + +(function($) { + +$.fn.fastClick = function(handler) { + return $(this).each(function(){ + $.FastButton($(this)[0], handler); + }); +}; + +$.FastButton = function(element, handler) { + var startX, startY; + + var reset = function() { + $(element).unbind('touchend'); + $("body").unbind('touchmove.fastClick'); + }; + + var onClick = function(event) { + event.stopPropagation(); + reset(); + handler.call(this, event); + + if (event.type === 'touchend') { + $.clickbuster.preventGhostClick(startX, startY); + } + }; + + var onTouchMove = function(event) { + if (Math.abs(event.originalEvent.touches[0].clientX - startX) > 10 || + Math.abs(event.originalEvent.touches[0].clientY - startY) > 10) { + reset(); + } + }; + + var onTouchStart = function(event) { + event.stopPropagation(); + + $(element).bind('touchend', onClick); + $("body").bind('touchmove.fastClick', onTouchMove); + + startX = event.originalEvent.touches[0].clientX; + startY = event.originalEvent.touches[0].clientY; + }; + + $(element).bind({ + touchstart: onTouchStart, + click: onClick + }); +}; + +$.clickbuster = { + coordinates: [], + + preventGhostClick: function(x, y) { + $.clickbuster.coordinates.push(x, y); + window.setTimeout($.clickbuster.pop, 2500); + }, + + pop: function() { + $.clickbuster.coordinates.splice(0, 2); + }, + + onClick: function(event) { + var x, y, i; + for (i = 0; i < $.clickbuster.coordinates.length; i += 2) { + x = $.clickbuster.coordinates[i]; + y = $.clickbuster.coordinates[i + 1]; + if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) { + event.stopPropagation(); + event.preventDefault(); + } + } + } +}; + +$(function(){ + document.addEventListener('click', $.clickbuster.onClick, true); +}); + +}(jQuery)); diff --git a/module/web/static/js/libs/jquery.transit-0.1.3.js b/module/web/static/js/libs/jquery.transit-0.1.3.js new file mode 100644 index 000000000..2314f2ca2 --- /dev/null +++ b/module/web/static/js/libs/jquery.transit-0.1.3.js @@ -0,0 +1,658 @@ +/*! + * jQuery Transit - CSS3 transitions and transformations + * Copyright(c) 2011 Rico Sta. Cruz <rico@ricostacruz.com> + * MIT Licensed. + * + * http://ricostacruz.com/jquery.transit + * http://github.com/rstacruz/jquery.transit + */ + +(function($) { + "use strict"; + + $.transit = { + version: "0.1.3", + + // Map of $.css() keys to values for 'transitionProperty'. + // See https://developer.mozilla.org/en/CSS/CSS_transitions#Properties_that_can_be_animated + propertyMap: { + marginLeft : 'margin', + marginRight : 'margin', + marginBottom : 'margin', + marginTop : 'margin', + paddingLeft : 'padding', + paddingRight : 'padding', + paddingBottom : 'padding', + paddingTop : 'padding' + }, + + // Will simply transition "instantly" if false + enabled: true, + + // Set this to false if you don't want to use the transition end property. + useTransitionEnd: false + }; + + var div = document.createElement('div'); + var support = {}; + + // Helper function to get the proper vendor property name. + // (`transition` => `WebkitTransition`) + function getVendorPropertyName(prop) { + var prefixes = ['Moz', 'Webkit', 'O', 'ms']; + var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1); + + if (prop in div.style) { return prop; } + + for (var i=0; i<prefixes.length; ++i) { + var vendorProp = prefixes[i] + prop_; + if (vendorProp in div.style) { return vendorProp; } + } + } + + // Helper function to check if transform3D is supported. + // Should return true for Webkits and Firefox 10+. + function checkTransform3dSupport() { + div.style[support.transform] = ''; + div.style[support.transform] = 'rotateY(90deg)'; + return div.style[support.transform] !== ''; + } + + var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; + + // Check for the browser's transitions support. + // You can access this in jQuery's `$.support.transition`. + // As per [jQuery's cssHooks documentation](http://api.jquery.com/jQuery.cssHooks/), + // we set $.support.transition to a string of the actual property name used. + support.transition = getVendorPropertyName('transition'); + support.transitionDelay = getVendorPropertyName('transitionDelay'); + support.transform = getVendorPropertyName('transform'); + support.transformOrigin = getVendorPropertyName('transformOrigin'); + support.transform3d = checkTransform3dSupport(); + + $.extend($.support, support); + + var eventNames = { + 'MozTransition': 'transitionend', + 'OTransition': 'oTransitionEnd', + 'WebkitTransition': 'webkitTransitionEnd', + 'msTransition': 'MSTransitionEnd' + }; + + // Detect the 'transitionend' event needed. + var transitionEnd = support.transitionEnd = eventNames[support.transition] || null; + + // Avoid memory leak in IE. + div = null; + + // ## $.cssEase + // List of easing aliases that you can use with `$.fn.transition`. + $.cssEase = { + '_default': 'ease', + 'in': 'ease-in', + 'out': 'ease-out', + 'in-out': 'ease-in-out', + 'snap': 'cubic-bezier(0,1,.5,1)' + }; + + // ## 'transform' CSS hook + // Allows you to use the `transform` property in CSS. + // + // $("#hello").css({ transform: "rotate(90deg)" }); + // + // $("#hello").css('transform'); + // //=> { rotate: '90deg' } + // + $.cssHooks.transform = { + // The getter returns a `Transform` object. + get: function(elem) { + return $(elem).data('transform'); + }, + + // The setter accepts a `Transform` object or a string. + set: function(elem, v) { + var value = v; + + if (!(value instanceof Transform)) { + value = new Transform(value); + } + + // We've seen the 3D version of Scale() not work in Chrome when the + // element being scaled extends outside of the viewport. Thus, we're + // forcing Chrome to not use the 3d transforms as well. Not sure if + // translate is affectede, but not risking it. Detection code from + // http://davidwalsh.name/detecting-google-chrome-javascript + if (support.transform === 'WebkitTransform' && !isChrome) { + elem.style[support.transform] = value.toString(true); + } else { + elem.style[support.transform] = value.toString(); + } + + $(elem).data('transform', value); + } + }; + + // ## 'transformOrigin' CSS hook + // Allows the use for `transformOrigin` to define where scaling and rotation + // is pivoted. + // + // $("#hello").css({ transformOrigin: '0 0' }); + // + $.cssHooks.transformOrigin = { + get: function(elem) { + return elem.style[support.transformOrigin]; + }, + set: function(elem, value) { + elem.style[support.transformOrigin] = value; + } + }; + + // ## 'transition' CSS hook + // Allows you to use the `transition` property in CSS. + // + // $("#hello").css({ transition: 'all 0 ease 0' }); + // + $.cssHooks.transition = { + get: function(elem) { + return elem.style[support.transition]; + }, + set: function(elem, value) { + elem.style[support.transition] = value; + } + }; + + // ## Other CSS hooks + // Allows you to rotate, scale and translate. + registerCssHook('scale'); + registerCssHook('translate'); + registerCssHook('rotate'); + registerCssHook('rotateX'); + registerCssHook('rotateY'); + registerCssHook('rotate3d'); + registerCssHook('perspective'); + registerCssHook('skewX'); + registerCssHook('skewY'); + registerCssHook('x', true); + registerCssHook('y', true); + + // ## Transform class + // This is the main class of a transformation property that powers + // `$.fn.css({ transform: '...' })`. + // + // This is, in essence, a dictionary object with key/values as `-transform` + // properties. + // + // var t = new Transform("rotate(90) scale(4)"); + // + // t.rotate //=> "90deg" + // t.scale //=> "4,4" + // + // Setters are accounted for. + // + // t.set('rotate', 4) + // t.rotate //=> "4deg" + // + // Convert it to a CSS string using the `toString()` and `toString(true)` (for WebKit) + // functions. + // + // t.toString() //=> "rotate(90deg) scale(4,4)" + // t.toString(true) //=> "rotate(90deg) scale3d(4,4,0)" (WebKit version) + // + function Transform(str) { + if (typeof str === 'string') { this.parse(str); } + return this; + } + + Transform.prototype = { + // ### setFromString() + // Sets a property from a string. + // + // t.setFromString('scale', '2,4'); + // // Same as set('scale', '2', '4'); + // + setFromString: function(prop, val) { + var args = + (typeof val === 'string') ? val.split(',') : + (val.constructor === Array) ? val : + [ val ]; + + args.unshift(prop); + + Transform.prototype.set.apply(this, args); + }, + + // ### set() + // Sets a property. + // + // t.set('scale', 2, 4); + // + set: function(prop) { + var args = Array.prototype.slice.apply(arguments, [1]); + if (this.setter[prop]) { + this.setter[prop].apply(this, args); + } else { + this[prop] = args.join(','); + } + }, + + get: function(prop) { + if (this.getter[prop]) { + return this.getter[prop].apply(this); + } else { + return this[prop] || 0; + } + }, + + setter: { + // ### rotate + // + // .css({ rotate: 30 }) + // .css({ rotate: "30" }) + // .css({ rotate: "30deg" }) + // .css({ rotate: "30deg" }) + // + rotate: function(theta) { + this.rotate = unit(theta, 'deg'); + }, + + rotateX: function(theta) { + this.rotateX = unit(theta, 'deg'); + }, + + rotateY: function(theta) { + this.rotateY = unit(theta, 'deg'); + }, + + // ### scale + // + // .css({ scale: 9 }) //=> "scale(9,9)" + // .css({ scale: '3,2' }) //=> "scale(3,2)" + // + scale: function(x, y) { + if (y === undefined) { y = x; } + this.scale = x + "," + y; + }, + + // ### skewX + skewY + skewX: function(x) { + this.skewX = unit(x, 'deg'); + }, + + skewY: function(y) { + this.skewY = unit(y, 'deg'); + }, + + // ### perspectvie + perspective: function(dist) { + this.perspective = unit(dist, 'px'); + }, + + // ### x / y + // Translations. Notice how this keeps the other value. + // + // .css({ x: 4 }) //=> "translate(4px, 0)" + // .css({ y: 10 }) //=> "translate(4px, 10px)" + // + x: function(x) { + this.set('translate', x, null); + }, + + y: function(y) { + this.set('translate', null, y); + }, + + // ### translate + // Notice how this keeps the other value. + // + // .css({ translate: '2, 5' }) //=> "translate(2px, 5px)" + // + translate: function(x, y) { + if (this._translateX === undefined) { this._translateX = 0; } + if (this._translateY === undefined) { this._translateY = 0; } + + if (x !== null) { this._translateX = unit(x, 'px'); } + if (y !== null) { this._translateY = unit(y, 'px'); } + + this.translate = this._translateX + "," + this._translateY; + } + }, + + getter: { + x: function() { + return this._translateX || 0; + }, + + y: function() { + return this._translateY || 0; + }, + + scale: function() { + var s = (this.scale || "1,1").split(','); + if (s[0]) { s[0] = parseFloat(s[0]); } + if (s[1]) { s[1] = parseFloat(s[1]); } + + // "2.5,2.5" => 2.5 + // "2.5,1" => [2.5,1] + return (s[0] === s[1]) ? s[0] : s; + }, + + rotate3d: function() { + var s = (this.rotate3d || "0,0,0,0deg").split(','); + for (var i=0; i<=3; ++i) { + if (s[i]) { s[i] = parseFloat(s[i]); } + } + if (s[3]) { s[3] = unit(s[3], 'deg'); } + + return s; + } + }, + + // ### parse() + // Parses from a string. Called on constructor. + parse: function(str) { + var self = this; + str.replace(/([a-zA-Z0-9]+)\((.*?)\)/g, function(x, prop, val) { + self.setFromString(prop, val); + }); + }, + + // ### toString() + // Converts to a `transition` CSS property string. If `use3d` is given, + // it converts to a `-webkit-transition` CSS property string instead. + toString: function(use3d) { + var re = []; + + for (var i in this) { + if (this.hasOwnProperty(i)) { + // Don't use 3D transformations if the browser can't support it. + if ((!support.transform3d) && ( + (i === 'rotateX') || + (i === 'rotateY') || + (i === 'perspective') || + (i === 'transformOrigin'))) { continue; } + + if (i[0] !== '_') { + if (use3d && (i === 'scale')) { + re.push(i + "3d(" + this[i] + ",1)"); + } else if (use3d && (i === 'translate')) { + re.push(i + "3d(" + this[i] + ",0)"); + } else { + re.push(i + "(" + this[i] + ")"); + } + } + } + } + + return re.join(" "); + } + }; + + function callOrQueue(self, queue, fn) { + if (queue === true) { + self.queue(fn); + } else if (queue) { + self.queue(queue, fn); + } else { + fn(); + } + } + + // ### getProperties(dict) + // Returns properties (for `transition-property`) for dictionary `props`. The + // value of `props` is what you would expect in `$.css(...)`. + function getProperties(props) { + var re = []; + + $.each(props, function(key) { + key = $.camelCase(key); // Convert "text-align" => "textAlign" + key = $.transit.propertyMap[key] || key; + key = uncamel(key); // Convert back to dasherized + + if ($.inArray(key, re) === -1) { re.push(key); } + }); + + return re; + } + + // ### getTransition() + // Returns the transition string to be used for the `transition` CSS property. + // + // Example: + // + // getTransition({ opacity: 1, rotate: 30 }, 500, 'ease'); + // //=> 'opacity 500ms ease, -webkit-transform 500ms ease' + // + function getTransition(properties, duration, easing, delay) { + // Get the CSS properties needed. + var props = getProperties(properties); + + // Account for aliases (`in` => `ease-in`). + if ($.cssEase[easing]) { easing = $.cssEase[easing]; } + + // Build the duration/easing/delay attributes for it. + var attribs = '' + toMS(duration) + ' ' + easing; + if (parseInt(delay, 10) > 0) { attribs += ' ' + toMS(delay); } + + // For more properties, add them this way: + // "margin 200ms ease, padding 200ms ease, ..." + var transitions = []; + $.each(props, function(i, name) { + transitions.push(name + ' ' + attribs); + }); + + return transitions.join(', '); + } + + // ## $.fn.transition + // Works like $.fn.animate(), but uses CSS transitions. + // + // $("...").transition({ opacity: 0.1, scale: 0.3 }); + // + // // Specific duration + // $("...").transition({ opacity: 0.1, scale: 0.3 }, 500); + // + // // With duration and easing + // $("...").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in'); + // + // // With callback + // $("...").transition({ opacity: 0.1, scale: 0.3 }, function() { ... }); + // + // // With everything + // $("...").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() { ... }); + // + // // Alternate syntax + // $("...").transition({ + // opacity: 0.1, + // duration: 200, + // delay: 40, + // easing: 'in', + // complete: function() { /* ... */ } + // }); + // + $.fn.transition = $.fn.transit = function(properties, duration, easing, callback) { + var self = this; + var delay = 0; + var queue = true; + + // Account for `.transition(properties, callback)`. + if (typeof duration === 'function') { + callback = duration; + duration = undefined; + } + + // Account for `.transition(properties, duration, callback)`. + if (typeof easing === 'function') { + callback = easing; + easing = undefined; + } + + // Alternate syntax. + if (typeof properties.easing !== 'undefined') { + easing = properties.easing; + delete properties.easing; + } + + if (typeof properties.duration !== 'undefined') { + duration = properties.duration; + delete properties.duration; + } + + if (typeof properties.complete !== 'undefined') { + callback = properties.complete; + delete properties.complete; + } + + if (typeof properties.queue !== 'undefined') { + queue = properties.queue; + delete properties.queue; + } + + if (typeof properties.delay !== 'undefined') { + delay = properties.delay; + delete properties.delay; + } + + // Set defaults. (`400` duration, `ease` easing) + if (typeof duration === 'undefined') { duration = $.fx.speeds._default; } + if (typeof easing === 'undefined') { easing = $.cssEase._default; } + + duration = toMS(duration); + + // Build the `transition` property. + var transitionValue = getTransition(properties, duration, easing, delay); + + // Compute delay until callback. + // If this becomes 0, don't bother setting the transition property. + var work = $.transit.enabled && support.transition; + var i = work ? (parseInt(duration, 10) + parseInt(delay, 10)) : 0; + + // If there's nothing to do... + if (i === 0) { + var fn = function(next) { + self.css(properties); + if (callback) { callback.apply(self); } + if (next) { next(); } + }; + + callOrQueue(self, queue, fn); + return self; + } + + // Save the old transitions of each element so we can restore it later. + var oldTransitions = {}; + + var run = function(nextCall) { + var bound = false; + + // Prepare the callback. + var cb = function() { + if (bound) { self.unbind(transitionEnd, cb); } + + if (i > 0) { + self.each(function() { + this.style[support.transition] = (oldTransitions[this] || null); + }); + } + + if (typeof callback === 'function') { callback.apply(self); } + if (typeof nextCall === 'function') { nextCall(); } + }; + + if ((i > 0) && (transitionEnd) && ($.transit.useTransitionEnd)) { + // Use the 'transitionend' event if it's available. + bound = true; + self.bind(transitionEnd, cb); + } else { + // Fallback to timers if the 'transitionend' event isn't supported. + window.setTimeout(cb, i); + } + + // Apply transitions. + self.each(function() { + if (i > 0) { + this.style[support.transition] = transitionValue; + } + $(this).css(properties); + }); + }; + + // Defer running. This allows the browser to paint any pending CSS it hasn't + // painted yet before doing the transitions. + var deferredRun = function(next) { + var i = 0; + + // Durations that are too slow will get transitions mixed up. + // (Tested on Mac/FF 7.0.1) + if ((support.transition === 'MozTransition') && (i < 25)) { i = 25; } + + window.setTimeout(function() { run(next); }, i); + }; + + // Use jQuery's fx queue. + callOrQueue(self, queue, deferredRun); + + // Chainability. + return this; + }; + + function registerCssHook(prop, isPixels) { + // For certain properties, the 'px' should not be implied. + if (!isPixels) { $.cssNumber[prop] = true; } + + $.transit.propertyMap[prop] = support.transform; + + $.cssHooks[prop] = { + get: function(elem) { + var t = $(elem).css('transform') || new Transform(); + return t.get(prop); + }, + + set: function(elem, value) { + var t = $(elem).css('transform'); + t = (typeof t === 'string' || t === null) ? new Transform() : t; + t.setFromString(prop, value); + $(elem).css({ transform: t }); + } + }; + } + + // ### uncamel(str) + // Converts a camelcase string to a dasherized string. + // (`marginLeft` => `margin-left`) + function uncamel(str) { + return str.replace(/([A-Z])/g, function(letter) { return '-' + letter.toLowerCase(); }); + } + + // ### unit(number, unit) + // Ensures that number `number` has a unit. If no unit is found, assume the + // default is `unit`. + // + // unit(2, 'px') //=> "2px" + // unit("30deg", 'rad') //=> "30deg" + // + function unit(i, units) { + if ((typeof i === "string") && (!i.match(/^[\-0-9\.]+$/))) { + return i; + } else { + return "" + i + units; + } + } + + // ### toMS(duration) + // Converts given `duration` to a millisecond string. + // + // toMS('fast') //=> '400ms' + // toMS(10) //=> '10ms' + // + function toMS(duration) { + var i = duration; + + // Allow for string durations like 'fast'. + if ($.fx.speeds[i]) { i = $.fx.speeds[i]; } + + return unit(i, 'ms'); + } + + // Export some functions for testable-ness. + $.transit.getTransitionValue = getTransition; +})(jQuery); diff --git a/module/web/static/js/routers/mobileRouter.js b/module/web/static/js/routers/mobileRouter.js new file mode 100644 index 000000000..7f1f7805e --- /dev/null +++ b/module/web/static/js/routers/mobileRouter.js @@ -0,0 +1,55 @@ +define(['jquery','backbone', 'underscore'], function($, Backbone, _){ + + return Backbone.Router.extend({ + + initialize: function(){ + _.bindAll(this, "changePage"); + + this.$el = $("#content"); + + // Tells Backbone to start watching for hashchange events + Backbone.history.start(); + + }, + + // All of your Backbone Routes (add more) + routes: { + + // When there is no hash bang on the url, the home method is called + '': 'home' + + }, + + 'home': function(){ + + var self = this; + + $("#p1").fastClick(function(){ + self.changePage($("<div class='page' style='background-color: #9acd32;'><h1>Page 1</h1><br>some content<br>sdfdsf<br>sdffg<h3>oiuzz</h3></div>")); + }); + + $("#p2").bind("click", function(){ + self.changePage($("<div class='page' style='background-color: blue;'><h1>Page 2</h1><br>some content<br>sdfdsf<br><h2>sdfsdf</h2>sdffg</div>")); + }); + + }, + + changePage: function(content){ + + var oldpage = this.$el.find(".page"); + content.css({x: "100%"}); + this.$el.append(content); + content.transition({x:0}, function(){ + window.setTimeout(function(){ + oldpage.remove(); + }, 400); + }); + +// $("#viewport").transition({x: "100%"}, function(){ +// $("#viewport").html(content); +// $("#viewport").transition({x: 0}); +// }); + } + + }); +});
\ No newline at end of file |