| /* |
| * |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| * |
| */ |
| |
| /** |
| * |
| * This library implements a general user interface look and feel similar to a "well know tablet PC" :-) |
| * It provides animated page transition eye-candy but is, in essence, really just a fancy tabbed window. |
| * |
| * It has dependencies on the following: |
| * itablet.css |
| * iscroll.js |
| * jquery.js (jquery-1.7.1.min.js) |
| * |
| * author Fraser Adams |
| */ |
| |
| /** |
| * Create a Singleton instance of the iTablet user interface generic look and feel. |
| */ |
| var iTablet = new function() { |
| if (!String.prototype.trim) { // Add a String trim method if one doesn't exist (modern browsers should have it.) |
| String.prototype.trim = function() { |
| return this.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); |
| }; |
| } |
| |
| /** |
| * The Location inner class allows iTablet.location to be used similarly to window.location. |
| */ |
| var Location = function(href) { |
| this.href = href; |
| var split = href.split("?"); // Split string by query part. |
| this.hash = split[0]; |
| this.search = split.length == 2 ? "?" + split[1] : ""; |
| this.data = null; |
| |
| // Populate the data property with key/value pairs extracted from search part of URL. |
| if (split.length == 2) { |
| this.data = {}; |
| var kv = split[1].split("&"); // Split string into key/value pairs using the & is the separator. |
| var length = kv.length; |
| for (var i = 0; i < length; i++) { |
| var s = kv[i].split("="); |
| if (s.length == 2) { |
| var key = s[0].trim(); |
| var value = s[1].trim(); |
| this.data[key] = value; |
| } |
| } |
| } |
| |
| Location.prototype.toString = function() { |
| return this.href; |
| }; |
| |
| // Location.back() is mapped to the iTablet.goBack() method. |
| // This allows clients to explicitly return to a previous page, useful for coding submit handlers etc. |
| Location.prototype.back = goBack; |
| }; |
| |
| /** |
| * The TextChange inner class adds support for a textchange Event on text input and textarea tags. |
| * Initialise with: $.event.special.textchange = new TextChange(); |
| * Uses info derived from from http://benalman.com/news/2010/03/jquery-special-events/ |
| */ |
| var TextChange = function() { |
| /** |
| * Directly call the triggerIfChanged method on keyup. |
| */ |
| var handler = function() { |
| triggerIfChanged(this); |
| }; |
| |
| /** |
| * For cut, paste and input handlers we need to call triggerIfChanged from a timeout. |
| */ |
| var handlerWithDelay = function() { |
| var element = this; |
| setTimeout(function() { |
| triggerIfChanged(element); |
| }, 25); |
| }; |
| |
| /** |
| * Trigger textchange Event handler bound to target element if the text has changed. |
| */ |
| var triggerIfChanged = function(domElement) { |
| var element = $(domElement); |
| var current = domElement.contentEditable === "true" ? element.html() : element.val(); |
| if (current !== element.data("lastValue")) { |
| element.trigger("textchange", [element.data("lastValue")]); |
| element.data("lastValue", current); |
| } |
| }; |
| |
| /** |
| * Called by jQuery when the first event handler is bound to a particular element. |
| */ |
| this.setup = function(data) { |
| var jthis = $(this); |
| jthis.data("lastValue", this.contentEditable === 'true' ? jthis.html() : jthis.val()); |
| // Bind keyup, cut, paste and input handlers in the .textchange Event namespace to allow easy unbinding. |
| jthis.bind("keyup.textchange", handler); |
| jthis.bind("cut.textchange paste.textchange input.textchange", handlerWithDelay); |
| }; |
| |
| /** |
| * Called by jQuery when the last event handler is unbound from a particular element. |
| */ |
| this.teardown = function (data) { |
| $(this).unbind('.textchange'); // Unbind the Events linked to the .textchange Event namespace. |
| } |
| }; |
| |
| //------------------------------------------------------------------------------------------------------------------- |
| |
| var TOUCH_ENABLED = 'ontouchstart' in window && !((/hp-tablet/gi).test(navigator.appVersion)); |
| |
| // Select start, move and end events based on whether or not the user agent is a touch device. |
| var START_EV = (TOUCH_ENABLED) ? "touchstart" : "mousedown"; |
| var MOVE_EV = (TOUCH_ENABLED) ? "touchmove" : "mousemove"; |
| var END_EV = (TOUCH_ENABLED) ? "touchend" : "mouseup"; |
| |
| // Populated in initialiseCSSAnimations() |
| var ANIMATION_END_EV = "";// = "animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd"; |
| var TRANSITION_END_EV = "";//"transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd"; |
| |
| /** |
| * The general perceived wisdom is to use feature detection rather than browser sniffing, which seems a good |
| * aim, but as it happens *most* of the browser abstraction is happening in jQuery and CSS but there remain |
| * a few quirks, mostly for IE < 9. IE < 9 and Opera < 12 both appear not to trigger a change when radio or |
| * checkbox state changes and it's not clear how to "feature detect" this, which is the main reason for |
| * including the Opera version sniffing. |
| */ |
| var IS_IE = (navigator.appName == "Microsoft Internet Explorer"); |
| var IE_VERSION = IS_IE ? /MSIE (\d+)/.exec(navigator.userAgent)[1] : 1000000; |
| var IS_OPERA = (navigator.appName == "Opera") && (window.opera.version != null); |
| var OPERA_VERSION = IS_OPERA ? opera.version() : 1000000; |
| |
| var BODY; // jQuery object for body is used in several places so let's cache it (gets set in jQuery.ready()). |
| var IS_MOBILE = false; // Gets set if we detect a small display (e.g. mobile) device. |
| |
| var _mainLeft = 0; // N.B. We need to get the actual value after the DOM has loaded. |
| var _history = []; // URL history to enable back button behaviour. |
| var _scrollers = {}; |
| var _transitions = {}; // Map of transition names to transition functions (populate later after functions defined). |
| this.location = null; |
| |
| /** |
| * This public helper method renders an HTML list with up to <maxlength> list items using the <contents> function. |
| * If the length of the list is less than the number added by the contents function additional list items are |
| * appended, conversely if the length of the list is greater than the number added by the contents function then |
| * the list is truncated. |
| * |
| * The contents of the list are populated via the supplied <contents> function, which should take an index as a |
| * parameter and return an <li> with contents or false. If false is returned that item is skipped. |
| * If an HTML list is supplied without a maxlength and contents function this method will simply carry out |
| * reskinning of the input widgets for the supplied list (and adding radiused borders for older versions of IE). |
| * |
| * For some reason this method seems to run very sluggishly on IE6, is's especially noticable when doing a |
| * resize. It runs fine on every other browser. I've not noticed any obvious inefficiencies but IE6 is weird.. |
| * |
| * @param list jQuery object representing the html list (ul) we wish to populate. |
| * @param contents a function to populate the list contents, this function should take an index as a parameter. |
| * and return an <li> with the required contents or false to skip (useful if filtering is needed). |
| * @param maxlength the maximum number of items that we wish to populate (default is 1). |
| */ |
| this.renderList = function(list, contents, maxlength) { |
| // For IE 6 get the width. Have to use .main or .popup-container because list.innerWidth() may not be set yet. |
| var listWidth = 0; |
| |
| if (IE_VERSION < 7) { // This seems to be very slow on IE6, no idea why??? |
| var main = list.closest(".main"); |
| if (main.length == 0) { // It's a list in a popup |
| listWidth = Math.round(parseInt($(".popup-container").css('width'), 10) * 0.9); |
| } else { |
| listWidth = Math.round($(".main").width() * 0.9); |
| } |
| } |
| |
| var lengthChanged = false; |
| var items = list.children("li"); |
| |
| if (contents == null) { |
| maxlength = items.length; |
| } else if (maxlength == null) { |
| maxlength = 1; // If no maxlength is supplied default to calling the contents function once. |
| } |
| |
| var actualLength = 0; // Actual number of <li> supplied, this caters for the contents function returning false. |
| for (var i = 0; i < maxlength; i++) { |
| var li = false; |
| if (actualLength < items.length) { |
| if (contents) { // Modify list item with the new contents at index i. |
| var newItem = contents(i); |
| if (newItem) { // If the contents function didn't return false add contents to current li. |
| li = $(items[actualLength]); |
| actualLength++; |
| var active = li.hasClass("active") ? "active" : ""; |
| var newItem = $(newItem).addClass(active); |
| li.removeClass().addClass(newItem.attr("class")); // Remove existing classes and add new ones. |
| li.html(newItem.html()); |
| } |
| } else { // If contents function not present we simply reskin the current list item. |
| li = $(items[actualLength]); |
| actualLength++; |
| |
| if (IE_VERSION < 9) { |
| // Remove any markup used for faking :first-child, :last-child, :before, :after |
| li.removeClass("first-child last-child"); |
| li.children("div.before, div.after, div.fbefore, div.fafter").remove(); |
| } |
| } |
| } else { // If there are fewer items in the list than there are contents then append new list items. |
| var newItem = contents(i); |
| if (newItem) { // If the contents function didn't return false append contents as new li. |
| li = $(newItem); |
| actualLength++; |
| list.append(li); |
| lengthChanged = true; |
| } |
| } |
| |
| if (li) { |
| // Reskin input widgets. |
| Radio.reskin(li.children("input:radio")); |
| Checkbox.reskin(li.children("input:checkbox")); |
| |
| // Fix several quirks in early versions of IE. |
| if (IE_VERSION < 8) { |
| var anchor = li.children("a"); |
| anchor.attr("hideFocus", "hidefocus"); // Fix lack of outline: none; in IE < 8 |
| |
| if (IE_VERSION < 7) { // IE6 percentage widths are messed up so need to set absolute width. |
| // 41 comes from padding: 0 30px 0 11px; 22 comes from padding: 0 11px 0 11px; |
| // 34 comes from margin-left: 5px; text-indent: 40px; minus 11. |
| var anchorWidth = listWidth - ((li.hasClass("arrow") ? 41 : 22) + |
| (anchor.hasClass("icon") ? 34 : 11)); |
| anchor.css({"width": anchorWidth + "px"}); |
| |
| // IE6 can't cope with multiple CSS classes so we need to merge these into a single class. |
| if (li.is(".arrow.radio")) { |
| li.addClass("ie6-radio-arrow"); |
| if (li.hasClass("checked")) { |
| li.addClass("ie6-checked-arrow"); |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| // If list is longer than the contents being added then trim the list so it's the same size. |
| if (actualLength < items.length) { |
| items.slice(actualLength).remove(); |
| lengthChanged = true; |
| } |
| |
| // Add radiused borders for IE8 and below. |
| // We have to do this after completely populating the list so first() and last() are correct. |
| if (IE_VERSION < 9) { |
| items = list.children("li"); |
| var last = items.last(); |
| last.addClass("last-child").prepend("<div class='before'></div>").append("<div class='after'></div>"); |
| |
| if (IE_VERSION < 8) { |
| var first = items.first(); |
| if (IE_VERSION == 7) { // For IE7 fake :first-child:before and :first-child:after |
| first.prepend("<div class='fbefore'></div>").append("<div class='fafter'></div>"); |
| } else if (IE_VERSION < 7) { // For IE6 fake :first-child |
| // We're not adding radiused borders to IE6, this class provides the proper top border colour. |
| first.addClass("first-child"); |
| } |
| } |
| } |
| |
| // If the length has changed trigger an iScroll refresh on the top level page that contains the list. |
| if (lengthChanged) { |
| list.closest(".main").trigger("refresh"); // refresh is a synthetic event handled by parents of scroll-area |
| } |
| }; |
| |
| //------------------------------------------------------------------------------------------------------------------- |
| // UI Widgets |
| //------------------------------------------------------------------------------------------------------------------- |
| |
| /** |
| * Create a Singleton instance of the Radio class used to reskin and manage HTML input type="radio" widgets. |
| */ |
| var Radio = new function() { |
| /** |
| * "Reskin" HTML input type="radio" items into a tablet "tick" style radio item. Note that the radio item |
| * needs to have a label sibling and be wrapped in a parent <li> for this to work correctly. |
| * e.g. <ul class="list"><li><label>test</label><input type="radio" name="test-radio" checked /></li></ul> |
| */ |
| this.reskin = function(radios) { |
| if (radios == null) { // if no input:radio is specified attempt to reskin every one in the document. |
| radios = $("input:radio"); |
| } |
| |
| // Add classes to container <li> based on "template" radio buttons. This "re-skins" the radio buttons. |
| radios.each(function() { // Iterate through each radio button. |
| var jthis = $(this).hide(); |
| if (!jthis.hasClass("reskinned")) { // If checkbox has already been reskinned move on. |
| var parent = jthis.parent(); |
| parent.addClass("radio"); |
| if (this.checked) { |
| parent.addClass("checked"); |
| } |
| jthis.addClass("reskinned"); // Mark as reskinned to avoid trying to reskin it again. |
| } |
| }); |
| }; |
| |
| /** |
| * Handle radio button state changes. This method is delegated to by the main handlePointer end() method. |
| * Note that we are actually passing in the $("ul li.radio") jQuery object that the Event was bound to |
| * rather than the actual Event object as this has already been extracted by handlePointer and is more |
| * useful for the implementation of this method. |
| */ |
| this.handleClick = function(jthis, type) { |
| var checked = jthis.parent().children(".checked"); |
| var radio = jthis.children("input:radio"); // Select the template radio button. |
| |
| fade(jthis); // Fade out the highlighting of the selected <li> |
| |
| if (type != "click") { // If this handler wasn't triggered by a radio button click we synthesise one. |
| BODY.unbind("click", handlePointer); // Prevent the synthetic click from triggering handlePointer. |
| radio.click(); // Trigger radio button's click (on modern browsers this triggers change too if changed). |
| BODY.click(handlePointer); |
| } |
| |
| // We explicitly manipulate input:radio checked attr in the following block in case a name attr wasn't |
| // specified in the HTML. With reskinned radio buttons the parent <ul> is the real container. |
| if (!jthis.is(checked)) { // If the clicked item is not the previously checked item. |
| // Clear any check mark on the previously selected <li> and the same on the template radio button. |
| checked.removeClass("checked"); |
| checked.children("input:radio").attr("checked", false); |
| |
| // Mark the current <li> as checked and do the same on the template radio button. |
| jthis.addClass("checked").change(); |
| jthis.children("input:radio").attr("checked", true); |
| |
| // For older IE/Opera triggering the click as done earlier won't trigger the change event so do it now. |
| if (IE_VERSION < 9 || OPERA_VERSION < 12) { |
| radio.change(); |
| } |
| } |
| }; |
| }; |
| |
| /** |
| * Create a Singleton instance of the Checkbox class used to reskin and manage HTML input type="checkbox" widgets. |
| */ |
| var Checkbox = new function() { |
| /** |
| * Return the input element associated with the specified label. This is used because the input element |
| * may be associated to the label in a number of different was (via the "for" attribute, by containment etc.) |
| */ |
| var findInputElement = function(label) { |
| var input = $("#" + label.attr("for")); // First check if label for points to the input. |
| if (input.length == 0) { // If not check if the label contains the input. |
| input = label.children("input"); |
| } |
| if (input.length == 0) { // Finally check if the label's next sibling is an input. |
| input = label.next("input"); |
| } |
| |
| return input; |
| }; |
| |
| /** |
| * "Reskin" HTML input type="checkbox" items into a tablet "switch" style checkbox. Note that the checkbox |
| * needs to have a label sibling and be wrapped in a parent <li> for this to work correctly. |
| * e.g. <ul class="list"><li><label>test</label><input type="checkbox" name="test-checkbox" checked /></li></ul> |
| * If multiple <input type="checkbox"> elements are placed in an <li> then they will automatically be |
| * reskinned as a "horiz-checkbox", this can also be done explicitly by doing <li class="horiz-checkbox"> |
| */ |
| this.reskin = function(checkboxes) { |
| if (checkboxes == null) { // if no input:checkbox is specified attempt to reskin every one in the document. |
| checkboxes = $("input:checkbox"); |
| } |
| |
| checkboxes.each(function() { // Iterate through each checkbox. |
| var jthis = $(this).hide(); |
| if (!jthis.hasClass("reskinned")) { // If checkbox has already been reskinned move on. |
| // If there are multiple checkboxes in a container create a horizontal checkbox by adding class |
| // to parent. Note that <li class="horiz-checkbox"> may also be explicitly set in the HTML. |
| jthis.siblings("input:checkbox").parent().addClass("horiz-checkbox"); |
| |
| // Mop up where checkbox is contained by label e.g. <label>test<input type="checkbox"/></label> |
| jthis.parent().siblings("label").parent().addClass("horiz-checkbox"); |
| |
| var li = jthis.closest("li"); // Find containing li. |
| |
| if (li.hasClass("horiz-checkbox")) { // Reskin horizontal checkbox. |
| // IE8 doesn't seem to distinguish between the selectors ul.list li:first-child:before and |
| // ul.list li.horiz-checkbox:first-child:before when horiz-checkbox is dynamically added |
| // this stops the <li> fake radiused border being correctly positioned for horiz-checkboxes. |
| // By adding horiz-checkbox class to the <ul> too we can use a more explicit rule in the CSS. |
| li.parent().addClass("horiz-checkbox"); |
| |
| // As we use inline-block for horiz-checkbox we need to remove any whitespace text nodes. |
| li.contents().filter(function() { |
| return (this.nodeType == 3 && $.trim($(this).text()).length == 0); |
| }).remove(); |
| |
| // For horiz-checkbox we set the width of each item and add a span containing the right border. |
| // The inner span is needed so the border doesn't impact the element width calculation. |
| li.each(function() { |
| var buttons = $(this).children("label"); |
| var width = 100/buttons.length; |
| |
| buttons.css("width", width + "%"); // Using the percentage works for browsers > IE7. |
| // The child span helps position the border - see css (ul.list li.horiz-checkbox label span) |
| buttons.filter(":not(:last)").append("<span></span>"); |
| buttons.first().addClass("first-child"); |
| buttons.last().addClass("last-child"); |
| |
| // Early IE doesn't respect the width so reduce the width of the last item a little. |
| if (width < 100 && (IE_VERSION < 8 )) { |
| buttons.last().css("width", width - 1 + "%") |
| } |
| |
| // Find input associated with each label and if it's checked add "checked" class to label. |
| buttons.each(function() { |
| var button = $(this); |
| var input = findInputElement(button); |
| input.addClass("reskinned"); // Mark as reskinned to avoid trying to reskin it again. |
| if (input.attr("checked")) { |
| button.addClass("checked"); |
| if (button.is(buttons.last())) { |
| // Use toggle-on not checked to avoid confusing IE6. |
| button.parent().addClass("toggle-on"); |
| } |
| } |
| }); |
| }); |
| } else { // Reskin normal checkbox. |
| // Add markup to container <li> based on "template" checkboxes. This "re-skins" the checkboxes. |
| jthis.parent(). |
| append("<div class='checkbox'><div class='mask'></div><div class='onoff'></div></div>"); |
| |
| // If the checkbox is checked find onoff switch and change its initial position to "on". |
| jthis.filter(":checked").siblings(".checkbox").children(".onoff").css("left", "0px"); |
| jthis.addClass("reskinned"); // Mark as reskinned to avoid trying to reskin it again. |
| } |
| } |
| }); |
| }; |
| |
| /** |
| * Handle checkbox state changes. This method is delegated to by the main handlePointer method. |
| */ |
| this.handlePointer = function(e, type) { |
| // If triggered by a synthetic click the target is an input:checkbox otherwise it's a div.mask |
| var jthis = (type == "click") ? $(e.target).siblings("div.checkbox") : $(e.target).parent(); |
| var onoff = jthis.children(".onoff"); |
| var checkbox = jthis.parent().children("input:checkbox"); // Select the underlying <input type="checkbox"> |
| var offsetX = onoff.offset().left - jthis.offset().left; |
| var offset = -parseInt(onoff.css("left"), 10); // If we use translate we adjust by the left CSS position. |
| var startX = (e.pageX != null) ? e.pageX : e.originalEvent.targetTouches[0].pageX; |
| var clicked = true; // Set to false if move handler is called; |
| |
| var move = function(e) { |
| var newX = (e.pageX != null) ? e.pageX : e.originalEvent.changedTouches[0].pageX; |
| var diffX = offsetX + newX - startX; |
| clicked = false; |
| |
| if (diffX >= -50 && diffX <= 0) { |
| setPosition(onoff, offset, diffX); |
| } |
| e.stopPropagation(); // Prevent iScroll from trying to scroll when we drag the switch. |
| }; |
| |
| /** |
| * The pointer up handler is only bound when the pointer down has been triggered and so behaves like a click. |
| */ |
| var end = function(e) { |
| var pos = onoff.offset().left - jthis.offset().left; |
| var duration = 300; |
| |
| if (clicked) { |
| pos = (pos == 0) ? -50 : 0; |
| } else { |
| // Animation duration is between 150ms and 0ms based on position. |
| duration = (25 - Math.abs(pos + 25)) * 6; |
| pos = (pos < -25) ? -50 : 0; |
| |
| } |
| |
| setPosition(onoff, offset, pos, duration); |
| |
| BODY.unbind("click", handlePointer); // Prevent the synthetic click from triggering handlePointer. |
| var currentlyChecked = checkbox[0].checked; |
| if ((currentlyChecked && pos == -50) || (!currentlyChecked && pos == 0)) { |
| if (type == "click") { |
| checkbox.attr("checked", !currentlyChecked); |
| } else { |
| checkbox.click(); |
| // For older IE/Opera triggering the click won't trigger the change event so do it now. |
| if (IE_VERSION < 9 || OPERA_VERSION < 12) { |
| checkbox.change(); |
| } |
| } |
| } |
| BODY.click(handlePointer); |
| |
| if (TOUCH_ENABLED) { |
| jthis.unbind(MOVE_EV + " " + END_EV); |
| } else { |
| BODY.unbind(MOVE_EV + " " + END_EV + " mouseleave"); |
| } |
| }; |
| |
| if (type == "click") { |
| end(e); |
| } else { |
| // Bind move, end and mouseleave events to our internal handlers. |
| if (TOUCH_ENABLED) { // Touch events track over the whole page by default. |
| jthis.bind(MOVE_EV, move).bind(END_EV, end); |
| } else { // Bind mouse events to body so we can track them over the whole page. |
| BODY.bind(MOVE_EV, move).bind(END_EV + " mouseleave", end); |
| } |
| } |
| }; |
| |
| /** |
| * Handle horiz-checkbox state changes. This method is delegated to by the main handlePointer end() method. |
| * Note that we are actually passing in the $("ul li.horiz-checkbox label") jQuery object that the Event was |
| * bound to rather than the actual Event object as this has already been extracted by handlePointer and is |
| * more useful for the implementation of this method. |
| */ |
| this.handleClick = function(jthis, type) { |
| var parent = jthis.parent(); |
| var lastChild = parent.children("label").last(); |
| |
| if (jthis.hasClass("checked")) { |
| jthis.removeClass("checked"); |
| if (jthis.is(lastChild)) { |
| parent.removeClass("toggle-on"); // Use toggle-on rather than checked to avoid confusing IE6. |
| } |
| } else { |
| jthis.addClass("checked"); |
| if (jthis.is(lastChild)) { |
| parent.addClass("toggle-on"); // Use toggle-on rather than checked to avoid confusing IE6. |
| } |
| } |
| |
| if (type == "click") { |
| var input = findInputElement(jthis); |
| input.attr("checked", !input.attr("checked")); |
| } else { // If this handler wasn't triggered by a checkbox click we synthesise one. |
| BODY.unbind("click", handlePointer); // Prevent the synthetic click from triggering handlePointer. |
| var checkbox = findInputElement(jthis); |
| checkbox.click(); |
| // For older IE/Opera triggering the click won't trigger the change event so do it now. |
| if (IE_VERSION < 9 || OPERA_VERSION < 9) { |
| checkbox.change(); |
| } |
| BODY.click(handlePointer); |
| } |
| } |
| }; |
| |
| //------------------------------------------------------------------------------------------------------------------- |
| // Main Event Handler |
| //------------------------------------------------------------------------------------------------------------------- |
| |
| /** |
| * This method handles the pointer down, move and up events. |
| * We handle the discrete events because mobile Safari adds a 300ms delay to the click handler, in addition |
| * we want to be able to un-highlight rows if we move the mouse/finger. Note that this handler is in the form |
| * of a delegating event handler - we actually bind the events to the html body, this is so that if we modify |
| * the DOM externally, e.g. via an AJAX update we will trigger from newly created elements too. |
| * Note that the start(), removeHighlight(), resetHighlight(), touchMove() and end() methods are private. |
| * This method does actually handle click events but its main job is to prevent the default navigation action |
| * on href, however if the click event is a synthetic click caused by a jQuery trigger the method behaves like |
| * a proper click handler. |
| */ |
| var handlePointer = function(e) { |
| // These are the *actual* selectors that we are interested in handling events for. |
| var selectors = "ul.contents li, ul.mail li, ul li.radio, ul li div.checkbox, ul li.horiz-checkbox label, " + |
| "ul li.arrow, ul li.pop, div.header a.back, div.header a.done, div.header a.cancel, " + |
| "div.header a.menu"; |
| |
| var target = e.target; |
| var jthis = $(target); |
| var parent; |
| var prev; |
| var href = jthis.attr("href"); |
| var chevronClicked = false; // Set true if we've clicked on a chevron (used for navigable radio buttons). |
| var scrolled; // Gets set if a page has been (touch) scrolled. |
| var highlighted; // Gets set if a sidebar or mail item has been selected/highlighted. |
| var startY; // The vertical position when a touchstart gets triggered. |
| |
| var start = function(e) { |
| // This block checks if the event target is one of the selectors, if not it uses jQuery closest to get the |
| // first element that matches the selector, start at the current element and progress up through the DOM. |
| if (!jthis.is(selectors)) { |
| jthis = jthis.closest(selectors); |
| } |
| |
| // If closest object doesn't match any of the selectors return true if it has an href else return false. |
| if (jthis.length == 0) { |
| return (!!href); // The href test allows the browser to add the active pseudoclass. |
| } |
| |
| if (jthis.hasClass("checkbox")) { // If a checkbox then delegate to the Checkbox handlePointer() handler. |
| Checkbox.handlePointer(e); |
| return false; |
| } |
| |
| parent = jthis.parent(); |
| |
| // prev is the previously highlighted item. We search from parent's parent as we may have multiple lists. |
| prev = parent.parent().find(".active"); |
| |
| href = jthis.attr("href"); // Get the href of the element matching the selector. |
| |
| var TOUCHED_SIDEBAR = TOUCH_ENABLED && parent.is(".contents, .mail"); // Is this a touch on a sidebar list? |
| |
| // If the href isn't directly present then it's an <li> that contains the anchor, so we have to look further. |
| if (!href) { |
| var ICON_WIDTH = 45; // The width of the icon image plus some padding. |
| var offset = Math.ceil(jthis.offset().left); |
| |
| // Get the pointer x value relative to the <li> |
| var x = (e.pageX != null) ? e.pageX - offset : // Mouse position. |
| (e.originalEvent != null) ? e.originalEvent.targetTouches[0].pageX - offset : 0; // Touch pos. |
| |
| // If target is a clickable-icon we return immediately thus preventing any highlighting or navigation. |
| if (jthis.hasClass("clickable-icon") && (x < ICON_WIDTH)) { |
| return false; |
| } |
| |
| // If target is a navigable radio button then check if chevron was clicked/tapped. |
| if (jthis.hasClass("radio") && jthis.hasClass("arrow") && ((jthis.outerWidth() - x) < ICON_WIDTH)) { |
| chevronClicked = true; |
| } |
| |
| e.preventDefault(); // Stop the anchor default highlighting, we'll add our own prettier highlight. |
| |
| // This block highlights the selected <li> on mousedown or touchstart. For touch enabled devices we wait |
| // for a short time before highlighting in case the touchstart was the start of a scroll rather than a |
| // selection. If it was a scroll then the scrolled flag will get set by the touchMove handler and the |
| // highlight is aborted when the timeout gets triggered. |
| if (!prev[0] || prev[0] != jthis[0]) { |
| if (TOUCHED_SIDEBAR && !IS_MOBILE) { |
| // If TOUCH_ENABLED and a sidebar or mail list wait 50ms before highlighting in case the |
| // touch start is really the start of a touch scroll event. |
| scrolled = false; |
| highlighted = false; |
| |
| setTimeout(function() { |
| if (!scrolled) { // scrolled may be set by touchMove if the list has been scrolled. |
| prev.removeClass("active"); |
| jthis.addClass("active"); // Highlight the current <li> |
| highlighted = true; |
| } |
| }, 50); |
| } else { // If not TOUCH_ENABLED or a sidebar or mail list highlight immediately. |
| prev.removeClass("active"); |
| // Navigable radio buttons don't highlight when the chevron is clicked. |
| if (!chevronClicked) { |
| jthis.addClass("active"); // Highlight the current <li> |
| } |
| } |
| } |
| |
| href = jthis.children("a:first").attr("href"); // Get the href from the first anchor enclosed by the <li> |
| href = (href == null) ? "#" : href; // Create default href of "#" if none has been specified. |
| href = href.replace(window.location, ""); // Fix "absolute href" bug found in IE7 and below. |
| } |
| |
| BODY.bind(END_EV, end).unbind(START_EV, handlePointer); |
| |
| if (parent.hasClass("list") || (TOUCHED_SIDEBAR && IS_MOBILE)) { |
| // For a small (e.g. mobile) displays the sidebar becomes the main menu page and touches behave |
| // like normal list touches and become inactive on any touch move. |
| BODY.bind(MOVE_EV, removeHighlight); |
| } else if (TOUCHED_SIDEBAR && !IS_MOBILE) { |
| // For a real sidebar detect touch scrolling on these items. |
| startY = (e.originalEvent) ? e.originalEvent.targetTouches[0].pageY : 0; |
| BODY.bind(MOVE_EV, touchMove); |
| } |
| }; |
| |
| /** |
| * If we move the mouse or finger in a list item we un-highlight and deactivate. |
| */ |
| var removeHighlight = function(e) { |
| BODY.unbind(MOVE_EV + " " + END_EV).bind(START_EV, handlePointer); |
| jthis.removeClass("active"); |
| }; |
| |
| /** |
| * If we move a finger up or down in a sidebar item we reinstate the previous highlight ontouchend. |
| */ |
| var resetHighlight = function(e) { |
| BODY.unbind(END_EV).bind(START_EV, handlePointer); |
| prev.addClass("active"); |
| }; |
| |
| /** |
| * This touch move handler is only bound if the initial event is a touch start event bound to a <li> |
| * with a <ul> parent that has a .contents or .mail class. These lists need to be touch scrollable, but |
| * they also need to have a persistent highlight on selected items. This method checks how many vertical |
| * pixels have been scrolled and if it exceeds a threshold it triggers a scrolled state. Once scrolled it removes |
| * any new highlighting and binds resetHighlight to touchend, which reinstates the previous highlight. |
| */ |
| var touchMove = function(e) { |
| var newY = e.originalEvent.changedTouches[0].pageY; |
| if (Math.abs(newY - startY) > 7) { // Only trigger on an up/down finger movement. |
| if (highlighted) { // If a new item was highlighted set the highlighting back to the previous item. |
| BODY.unbind(MOVE_EV + " " + END_EV).bind(END_EV, resetHighlight); |
| } else { |
| BODY.unbind(MOVE_EV + " " + END_EV).bind(START_EV, handlePointer); |
| } |
| |
| if (prev[0] != jthis[0]) { |
| jthis.removeClass("active"); |
| } |
| scrolled = true; |
| } |
| }; |
| |
| /** |
| * The pointer up handler is only bound when the pointer down has been triggered and so behaves like a click |
| * handler. If we have been triggered by a back selector or if we re-click an already selected sidebar entry |
| * that has previously transitioned the we call goBack() to transition backwards otherwise we goTo(href). |
| */ |
| var end = function(e) { |
| BODY.unbind(MOVE_EV + " " + END_EV).bind(START_EV, handlePointer); |
| |
| if (!IS_MOBILE && (parent.hasClass("contents") || parent.hasClass("mail"))) { |
| // Handle sidebar transitions. |
| if (_history.length == 2 && href == _history[1].href) { |
| goBack(); |
| } else { |
| _history = []; |
| goTo(href); |
| } |
| } else if (parent.is("ul")) { |
| if (jthis.hasClass("radio") && !chevronClicked) { // Delegate radio button state changes. |
| Radio.handleClick(jthis, e.type); |
| } else { // Handle goTo page transition. |
| var classes = jthis.attr("class").split(" "); |
| var transition = slide; // Default animation. |
| // Look up the transition animation based upon the item's class |
| for (var i in classes) { |
| var current = classes[i]; |
| var newTransition = _transitions[current]; |
| if (newTransition != null) { |
| transition = newTransition; |
| break; |
| } |
| } |
| goTo(href, transition); |
| } |
| } else if (parent.hasClass("horiz-checkbox")) { |
| Checkbox.handleClick(jthis); |
| } else if (jthis.is(".back, .done, .cancel")) { |
| goBack(); |
| } else if (jthis.hasClass("menu")) { |
| // For mobile devices the home button allows immediate navigation back to the main menu, which may |
| // be useful if several pages have been navigated through. |
| _history = [_history[0], {href:"#menu?", transition:null}]; |
| goBack(); |
| } |
| }; |
| |
| if (e.type == "click") { |
| e.preventDefault(); // Prevent the browser trying to navigate to the href itself onclick. |
| if (!e.originalEvent) { // If event is triggered by calling the jQuery click() method. |
| if (jthis.is("li, input:radio")) { |
| start(e); |
| end(e); |
| } else if (jthis.is("input:checkbox")) { |
| var li = jthis.closest("li.horiz-checkbox"); |
| |
| if (li.length == 0) { // For a normal checkbox add pageX to the event and delegate handlePointer() |
| e.pageX = 0; |
| Checkbox.handlePointer(e, e.type); |
| } else { |
| // It's a horiz-checkbox. We need to find the label associated with the checkbox. |
| var label = jthis.parent("label"); // First check if the label contains the checkbox. |
| if (label.length == 0) { // If not look for a label containing a for matching the checkbox ID. |
| label = $("label[for='" + jthis.attr("id")+"']"); |
| } |
| if (label.length == 0) { // If not assume the label is the preceding sibling (a bit fragile..). |
| var items = li.children(); |
| label = $(items[items.index(jthis) - 1]); |
| } |
| |
| Checkbox.handleClick(label, e.type); |
| } |
| } |
| } |
| } else { // Event type is mousedown or touchstart so call main event start handler. |
| start(e); |
| } |
| }; |
| |
| /** |
| * This method handles keyboard input. Its main purpose is to detect the return key being pressed and if it |
| * has this method will attempt to trigger the handler bound to the right button, which should be a done/submit. |
| */ |
| var handleKeyboard = function(e) { |
| if (e.which == 13) { // Handle return key; |
| // When the return key is pressed find any right button present in the header and trigger a click |
| // on it, this should have the effect of triggering the done/submit handler for the form. |
| var jthis = $(e.target); |
| var done = jthis.closest(".main, .popup").find(".header a.right.button"); |
| done.trigger(START_EV).trigger(END_EV); |
| } |
| }; |
| |
| //------------------------------------------------------------------------------------------------------------------- |
| // Page Navigation Methods |
| //------------------------------------------------------------------------------------------------------------------- |
| |
| /** |
| * This event handler handles the synthetic refresh event that may be triggered on a top level page containing |
| * a scroll-area. The handler uses the id of the page to index the iScroll object then calls its refresh(). |
| */ |
| var handleRefresh = function(e) { |
| var id = $(this).attr("id"); |
| if (_scrollers[id] != null) { |
| _scrollers[id].refresh(); |
| } |
| } |
| |
| /** |
| * This method transitions to a selected destination. If the destination is "#" it simply returns, if there |
| * is no history the destination page is shown otherwise we transition using an animation. |
| * The ".split("?")[0]" blocks are there to cater for the case where the destination URL contains data to |
| * be passed between page fragments, where the data is delimited by a "?" and separated by "&". |
| */ |
| var goTo = function(destination, transition) { |
| iTablet.location = new Location(destination); |
| var previous = (_history.length == 0) ? null : _history[0].href; |
| |
| if (destination == "#" || destination == previous) { // The second test guards against multiple clicks |
| return; |
| } else if (!IS_MOBILE && _history.length == 0) { |
| var pages = $(".main"); |
| $(pages).each(function(index) { |
| var jthis = $(this); |
| var id = jthis.attr("id"); |
| if (("#" + id) == destination.split("?")[0]) { |
| jthis.show().trigger("show").find(".active").removeClass("active"); |
| _scrollers[id].refresh(); // Refresh the touch scroller on the new page. |
| _history.unshift({href:destination, transition:null}); |
| } else { |
| jthis.hide().trigger("hide"); |
| } |
| }); |
| } else { |
| var currentPage = $(_history[0].href.split("?")[0]); |
| var newPage = $(destination.split("?")[0]); |
| transition(currentPage, newPage, false); |
| _scrollers[newPage.attr("id")].refresh(); // Refresh the touch scroller on the new page. |
| _history.unshift({href:destination, transition:transition}); |
| } |
| }; |
| |
| /** |
| * This method transitions back to the previous item in the history using an animation. |
| * The ".split("?")[0]" blocks are there to cater for the case where the fragment URLs contain data to |
| * be passed between page fragments, where the data is delimited by a "?" and separated by "&". |
| */ |
| var goBack = function() { |
| if (_history.length > 1) { |
| iTablet.location = new Location(_history[1].href); |
| var transition = _history[0].transition; |
| var currentPage = $(_history[0].href.split("?")[0]); |
| var newPage = $(_history[1].href.split("?")[0]); |
| transition(currentPage, newPage, true); |
| _scrollers[newPage.attr("id")].refresh(); // Refresh the touch scroller on the new page. |
| _history.shift(); |
| |
| // Hide virtual keyboard. |
| document.activeElement.blur(); |
| } |
| }; |
| |
| //------------------------------------------------------------------------------------------------------------------- |
| // Animations |
| //------------------------------------------------------------------------------------------------------------------- |
| |
| /** |
| * This method detects support for CSS3 animations and transitions and uses them if present. It will attempt |
| * to use translate3d if present as this is most likely to be GPU accelerated and uses translate as fallback. |
| * In an ideal world this would be set up in a stylesheet using media queries, but unfortunately using |
| * prefixes for all of the keyframes is rather verbose and untidy and media query of translate3d only seems |
| * to be supported in WebKit, so scripting is needed whatever. This method "injects" the relevant styles. |
| */ |
| var initialiseCSSAnimations = function() { |
| // TODO It'd be nicer to use feature detection but that can be hard to get right - how do we *reliably" |
| // detect support for animationend and transitionend events, which are essential for these animations??? |
| if ((/android/gi).test(navigator.appVersion) || OPERA_VERSION <= 12.01) { |
| // Android has poor CSS3 animation support so use jQuery. |
| // Opera <= 12.01 doesn't have animationend which messes up state management, what's worse is that it |
| // passes the animationSupported test, so just bomb out early Opera 12.01 at least fails that... |
| return; |
| } |
| |
| var domPrefixes = ["Webkit", "Moz", "O", "ms", "Khtml"]; |
| |
| // For the following lookups ensure that prefix key is forced to lower case!! |
| var transitionEndLookup = { // Lookup transitionend Event. Note prefixes are different to DOM prefixes |
| "" : "transitionend", |
| "webkit" : "webkitTransitionEnd", |
| "moz" : "transitionend", |
| "o" : "oTransitionEnd", |
| "ms" : "transitionend" |
| }; |
| |
| var animationEndLookup = { // Lookup transitionend Event. Note prefixes are different to DOM prefixes |
| "" : "animationend", |
| "webkit" : "webkitAnimationEnd", |
| "moz" : "animationend", |
| "o" : "oAnimationEnd", |
| "ms" : "transitionend" |
| }; |
| |
| var has3d = false; |
| var domPrefix = ""; |
| var prefix = ""; |
| |
| var style = $("<style/>"); |
| var styles = style[0].style; |
| |
| // We first check for animation-name and transform CSS support. |
| var animationSupported = styles.animationName && styles.transform ? true : false; |
| var animationend = "animationend"; |
| var transitionend = "transitionend"; |
| |
| if (!animationSupported) { // If prefix free versions not present check for prefixed versions. |
| var length = domPrefixes.length; |
| for (var i = 0; i < length; i++) { |
| if (styles[domPrefixes[i] + "AnimationName"] !== undefined) { |
| animationend = animationEndLookup[domPrefixes[i].toLowerCase()]; |
| transitionend = transitionEndLookup[domPrefixes[i].toLowerCase()]; |
| |
| var domPrefix = domPrefixes[i]; |
| prefix = "-" + domPrefix.toLowerCase() + "-"; |
| |
| if (styles[domPrefix + "Transform"] !== undefined) { |
| if (styles[domPrefix + "Perspective"] !== undefined) { |
| has3d = true; |
| } |
| animationSupported = true; |
| break; |
| } else { |
| return; |
| } |
| } |
| } |
| } |
| |
| ANIMATION_END_EV = animationend; |
| TRANSITION_END_EV = transitionend; |
| |
| if (animationSupported) { // Animating transforms is supported if this is true. |
| // Webkit's 3D transforms are passed off to the browser's own graphics renderer so may give a |
| // false positive, the test below should double check that 3d is indeed supported. |
| if (has3d && prefix == "-webkit-") { |
| has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix(); |
| } |
| |
| var s = ".sidebar, .main, .popup, .popup-window, .popup-container, ul li {" + |
| prefix + "animation: 350ms ease-in-out;}"; |
| // Define the key animation styles. cssSlide simply adds these classes to trigger the animation. |
| s += ".slideIn {" + prefix + "animation-name: slideinfromright;}"; |
| s += ".slideOut {" + prefix + "animation-name: slideouttoleft;}"; |
| s += ".slideIn.reverse {" + prefix + "animation-name: slideinfromleft;}"; |
| s += ".slideOut.reverse {" + prefix + "animation-name: slideouttoright;}"; |
| s += ".fade {" + prefix + "animation-name: fadehighlight;}"; |
| s += ".slideUp {" + prefix + "animation-name: slideinfrombottom;}"; |
| s += ".slideDown {" + prefix + "animation-name: slideouttobottom;}"; |
| s += ".dissolveIn50 {" + prefix + "animation-name: dissolvein50;}"; |
| s += ".dissolveOut50 {" + prefix + "animation-name: dissolveout50;}"; |
| |
| // Helper method to render transform using translate3d if supported or translate if not. |
| var renderTranslate = function(val) { |
| return prefix + "transform: translate" + (has3d ? "3d(" : "(") + val + (has3d ? ", 0);" : ");"); |
| }; |
| |
| // Implement setting the left css attribute of the supplied element using css translate. |
| var cssSetPosition = function(element, offset, left, duration) { |
| // Invoked when the animation completes, resets styles. |
| var completeCallback = function() { |
| element.removeAttr("style").css("left", left + "px").unbind(TRANSITION_END_EV); |
| }; |
| |
| // If a duration is provided then use a transition to animate the transform. |
| if (duration != null) { |
| element.css(prefix + "transition", prefix + "transform " + duration + "ms ease-out 0ms"). |
| bind(TRANSITION_END_EV, completeCallback); |
| } |
| |
| element.css(prefix + "transform", |
| "translate" + (has3d ? "3d(" : "(") + (left + offset) + "px, 0" + (has3d ? ", 0)" : ")")); |
| }; |
| |
| var keyframes = prefix + "keyframes "; |
| |
| // Now define the keframes for the animations. |
| s += "@" + keyframes + "slideinfromright {"; |
| s += "from {" + renderTranslate("100%, 0") + "}"; |
| s += "to {" + renderTranslate("0, 0") + "}}"; |
| |
| s += "@" + keyframes + "slideouttoleft {"; |
| s += "from {" + renderTranslate("0, 0") + "}"; |
| s += "to {" + renderTranslate("-100%, 0") + "}}"; |
| |
| s += "@" + keyframes + "slideinfromleft {"; |
| s += "from {" + renderTranslate("-100%, 0") + "}"; |
| s += "to {" + renderTranslate("0, 0") + "}}"; |
| |
| s += "@" + keyframes + "slideouttoright {"; |
| s += "from {" + renderTranslate("0, 0") + "}"; |
| s += "to {" + renderTranslate("100%, 0") + "}}"; |
| |
| s += "@" + keyframes + "fadehighlight {"; |
| s += "from {background-color: #035de7; color: #ffffff;}"; |
| s += "to {background-color: #f7f7f7; color: #324F85;}}"; |
| |
| s += "@" + keyframes + "slideinfrombottom {"; |
| s += "from {" + renderTranslate("0, 100%") + "}"; |
| s += "to {" + renderTranslate("0, 0") + "}}"; |
| |
| s += "@" + keyframes + "slideouttobottom {"; |
| s += "from {" + renderTranslate("0, 0") + "}"; |
| s += "to {" + renderTranslate("0, 120%") + "}}"; |
| |
| s += "@" + keyframes + "dissolvein50 {"; |
| s += "from {background-color: rgba(0, 0, 0, 0.0);}"; |
| s += "to {background-color: rgba(0, 0, 0, 0.49);}}"; // Setting to 0.49 not 0.5 prevents Firefox glitch. |
| |
| s += "@" + keyframes + "dissolveout50 {"; |
| s += "from {background-color: rgba(0, 0, 0, 0.5);}"; |
| s += "to {background-color: rgba(0, 0, 0, 0.0);}}"; |
| |
| style.append(s); |
| $("head").append(style); // "inject" animation styles into DOM. |
| slide = cssSlide; // Override slide method with the cssSlide version. |
| fade = cssFade; // Override fade method with the cssFade version. |
| popup = cssPopup; // Override fade method with the cssFade version. |
| setPosition = cssSetPosition; |
| } |
| }; |
| |
| /** |
| * Implement a simple colour fade animation using a look up table to fade active colour back to background. |
| * This is the default fade implementation, which may be overridden if CSS3 animations are supported. |
| */ |
| var fade = function(selected) { |
| var table = [{"background-color": "#0360e8", "color": "#ffffff"}, |
| {"background-color": "#337feb", "color": "#ffffff"}, |
| {"background-color": "#669eef", "color": "#ffffff"}, |
| {"background-color": "#99b8f0", "color": "#324F85"}, |
| {"background-color": "#c0d7f3", "color": "#324F85"}, |
| {"background-color": "#f6f6f6", "color": "#324F85"}]; |
| |
| var stepCallback = function(i) { |
| if (i < 6) { |
| selected.css(table[i]); // Set style from look up table. |
| setTimeout(function() {stepCallback(i + 1);}, 50); // 7 steps at 50ms per step = 350ms |
| } else { |
| selected.removeAttr("style"); // When the animation ends remove the styles we've just added. |
| } |
| }; |
| |
| if (selected.is(":visible")) { // Only apply animation is element is visible. |
| selected.removeClass("active"); |
| stepCallback(0); |
| } else { |
| selected.removeClass("active"); |
| } |
| }; |
| |
| /** |
| * Implement a colour fade using a CSS3 animation to fade active colour back to background. |
| */ |
| var cssFade = function(selected) { |
| // Invoked when the animation completes, resets styles. |
| var completeCallback = function() { |
| selected.removeClass("fade").unbind(ANIMATION_END_EV); |
| }; |
| |
| if (selected.is(":visible")) { // Only apply animation is element is visible. |
| selected.removeClass("active").addClass("fade").bind(ANIMATION_END_EV, completeCallback); |
| } else { |
| selected.removeClass("active"); |
| } |
| }; |
| |
| /** |
| * Implement a horizontal slide from the currentPage to the newPage using jQuery animate() of the left and right |
| * css properies. If isReverse is true the slide is left to right otherwise the slide is right to left. |
| * This is the default slide implementation, which may be overridden if CSS3 animations are supported. |
| */ |
| var slide = function(currentPage, newPage, isReverse) { |
| var width = isReverse ? -currentPage.outerWidth() : currentPage.outerWidth(); |
| var left = newPage.hasClass("popup") ? 0 : _mainLeft; |
| |
| // Invoked when the animation completes, resets style and hides the old page and rebinds the START_EV. |
| var completeCallback = function() { |
| currentPage.hide(); // Hide the current page after animation completes. |
| currentPage.css({"left": left + "px", "right": "0"}); // Reset css back to original settings. |
| BODY.bind(START_EV, handlePointer); // Re-enable START_EV when transition completes. |
| }; |
| |
| BODY.unbind(START_EV, handlePointer); // Disable START_EV until transition completes. |
| currentPage.trigger("hide"); // Trigger the hide handler *before* the animation. |
| newPage.css({"left": left + width + "px", "right": -width + "px"}).show().trigger("show"). |
| animate({left: left, right: 0}, 350); |
| var selected = newPage.find(".active").removeClass("active"); |
| if (isReverse) { |
| fade(selected); |
| } |
| currentPage.animate({left: left - width, right: width}, 350, completeCallback); |
| }; |
| |
| /** |
| * Implement a horizontal slide from the currentPage to the newPage using a CSS3 animation. |
| * This should give a much smoother animation than the jQuery one and is GPU accelerated on some devices. |
| * If isReverse is true the slide is left to right otherwise the slide is right to left. |
| */ |
| var cssSlide = function(currentPage, newPage, isReverse) { |
| var width = isReverse ? -currentPage.outerWidth() : currentPage.outerWidth(); |
| var classes = "slideIn slideOut reverse"; |
| |
| // Invoked when the animation completes, resets styles and hides the old page and rebinds the START_EV. |
| var completeCallback = function() { |
| newPage.removeClass(classes); |
| currentPage.hide().removeClass(classes).unbind(ANIMATION_END_EV, completeCallback); |
| BODY.bind(START_EV, handlePointer); // Re-enable START_EV when transition completes. |
| }; |
| |
| BODY.unbind(START_EV, handlePointer); // Disable START_EV until transition completes. |
| |
| var reverse = isReverse ? " reverse" : ""; |
| currentPage.trigger("hide"); // Trigger the hide handler *before* the animation. |
| newPage.show().trigger("show").addClass("slideIn" + reverse); |
| var selected = newPage.find(".active").removeClass("active"); |
| if (isReverse) { |
| fade(selected); |
| } |
| currentPage.bind(ANIMATION_END_EV, completeCallback).addClass("slideOut" + reverse); |
| }; |
| |
| /** |
| * Implement a pop up to the newPage using jQuery animate() of the top, bottom and rgba css properies. |
| * If isReverse is true the popup slides down otherwise it slides up. |
| * This is the default popup implementation, which may be overridden if CSS3 animations are supported. |
| */ |
| var popup = function(currentPage, newPage, isReverse) { |
| fade(currentPage.find(".active")); |
| var height = currentPage.outerWidth(); |
| var background = $(".popup-window"); |
| var container = $(".popup-container"); |
| |
| var setOpacity = function(i) { // Animate opacity value. |
| if (!IS_IE || IE_VERSION > 8) { // CSS rgba is supported by modern browsers. |
| background.css({"background-color": "rgba(0, 0, 0, 0." + i + ")"}); |
| } else { // IE8 and below don't support rgba so use MS DXImageTransform filter. |
| // This is a bit subtle, unfortunately progid:DXImageTransform messes with the fonts so we only use |
| // it to animate the opacity, for the final black with 50% alpha effect we add the "smoked" style |
| // which uses a png image background, the combination gives fairly smooth animation and normal font. |
| var hexAlpha = (Math.round(25.6 * i)).toString(16); // Convert index to a hex alpha value. |
| hexAlpha = (hexAlpha.length < 2) ? "0" + hexAlpha : hexAlpha; // Pad to two hex digits if necessary. |
| hexAlpha = "#" + hexAlpha + "000000"; // Modify the alpha of a black background. |
| background.css({"filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr=" + |
| hexAlpha + ",endColorstr=" + hexAlpha + ")"}); |
| } |
| }; |
| |
| var removeStyles = function(i) { |
| if (IE_VERSION <= 6) { // For IE6 we've added other dynamic styles, so we need to preserve those. |
| } else { // For every other browser we remove all dynamic styling. |
| background.removeAttr("style"); |
| } |
| }; |
| |
| var fadeInBackground = function(i) { // Animate rgba opacity property from 0.0 to 0.5. |
| if (i < 6) { |
| setOpacity(i); |
| setTimeout(function() {fadeInBackground(i + 1);}, 50); |
| } else { |
| removeStyles(); // When the animation ends remove the styles we've just added. |
| background.addClass("smoked"); // Only does anything for IE < 9 |
| } |
| }; |
| |
| var fadeOutBackground = function(i) { // Animate rgba opacity property from 0.5 to 0.0. |
| if (i >= 0) { |
| setOpacity(i); |
| setTimeout(function() {fadeOutBackground(i - 1);}, 50); |
| } else { |
| removeStyles(); // When the animation ends remove the styles we've just added. |
| background.hide(); |
| newPage.trigger("show"); |
| } |
| }; |
| |
| currentPage.trigger("hide"); // Trigger the hide handler *before* the animation. |
| if (isReverse) { |
| // Wrapping in a timeout prevents IE8 glitching button styles when returning from :active state. |
| setTimeout(function() { |
| background.removeClass("smoked"); |
| fadeOutBackground(5); |
| }, 10); |
| |
| container.css({"top": "64px", "bottom": "64px"}). |
| animate({top: height + "px", bottom: 128 - height + "px"}, 350); |
| } else { |
| $(".popup").hide(); |
| newPage.show().trigger("show"); |
| background.show(); |
| fadeInBackground(0); |
| container.css({"top": height + "px", "bottom": 128 - height + "px"}). |
| animate({top: "64px", bottom: "64px"}, 350); |
| } |
| }; |
| |
| /** |
| * Implement a pop up to the newPage using a CSS3 animation. |
| * This should give a much smoother animation than the jQuery one and is GPU accelerated on some devices. |
| * If isReverse is true the popup slides down otherwise it slides up. |
| */ |
| var cssPopup = function(currentPage, newPage, isReverse) { |
| fade(currentPage.find(".active")); |
| var background = $(".popup-window"); |
| var container = $(".popup-container"); |
| background.removeClass("dissolveIn50 dissolveOut50"); |
| container.removeClass("slideUp slideDown"); |
| |
| // Invoked when the animation completes, hides the background. |
| var completeCallback = function() { |
| background.hide(); |
| container.unbind(ANIMATION_END_EV, completeCallback); |
| newPage.trigger("show"); |
| }; |
| |
| currentPage.trigger("hide"); // Trigger the hide handler *before* the animation. |
| if (isReverse) { |
| background.addClass("dissolveOut50"); |
| container.bind(ANIMATION_END_EV, completeCallback).addClass("slideDown"); |
| } else { |
| $(".popup").hide(); |
| newPage.show().trigger("show"); |
| background.show().addClass("dissolveIn50"); |
| container.addClass("slideUp"); |
| } |
| }; |
| |
| /** |
| * Implement setting the left css attribute of the supplied element using standard jQuery css call. |
| */ |
| var setPosition = function(element, offset, left, duration) { |
| if (duration != null) { |
| element.animate({left: left}, duration); |
| } else { |
| element.css("left", left + "px"); |
| } |
| }; |
| |
| //------------------------------------------------------------------------------------------------------------------- |
| // Add HTML5 placeholder support to browsers that don't have native support. |
| //------------------------------------------------------------------------------------------------------------------- |
| |
| var addPlaceholderSupport = function(inputs) { |
| inputs.each(function() { |
| var jthis = $(this); |
| // Add textarea class to allow textarea placeholder to be styled differently to input placeholder. |
| var classes = jthis.is("textarea") ? "placeholder textarea" : "placeholder"; |
| |
| jthis.focus(function() { |
| jthis.siblings("span").hide(); |
| }).blur(function() { |
| if (jthis.val() == "") { |
| jthis.siblings("span").show(); |
| } |
| }).parent().append("<span class='" + classes + "'>" + jthis.attr("placeholder") + "</span>"); |
| }); |
| }; |
| |
| //------------------------------------------------------------------------------------------------------------------- |
| // Some IE specific code to manipulate additional styles to help "pretty up" earlier versions of IE. |
| //------------------------------------------------------------------------------------------------------------------- |
| |
| /** |
| * For IE6 adjust the size as it doesn't seem to be computed correctly in pure CSS. |
| * To be really nice we should probably compute SCROLLBAR, HEADER, PADDING but hey, it's only for IE6 :-) |
| */ |
| var adjustSize = function() { |
| var SCROLLBAR = 20; |
| var HEADER = 44; |
| var PADDING = 128; |
| var width = BODY.outerWidth() + SCROLLBAR; |
| var height = $(window).outerHeight(); |
| var mainWidth = width - _mainLeft; |
| $(".main").css({"width": mainWidth + "px"}); |
| $(".main, .sidebar").css({"height": (height - HEADER) + "px"}); |
| $(".popup-window").css({"width": width + "px", "height": height + "px"}); |
| $(".popup-container").css({"width": (width - width * 0.4) + "px", |
| "height": (height - (PADDING + HEADER)) + "px"}); |
| // Render each list (this reskins checkboxes & radio buttons and adds the border radius on old browsers). |
| $("ul.list").each(function() {iTablet.renderList($(this));}); |
| }; |
| |
| /** |
| * Among its long list of failings IE6 doesn't properly support multiple classes. The active class is used in |
| * several places, so this method overrides jQuery's addClass and removeClass in order to create IE6 specific |
| * classes when the active or checked class is added or removed. It's a messy, but fairly effective approach. |
| */ |
| var mergeClasses = function() { |
| // Merge blue and back classes - this only works if blue is added statically which is how it's expected to be. |
| $("a.blue.back.button").addClass("blue-back"); |
| |
| var addClass = jQuery.fn.addClass; // Retrieve original jQuery addClass. |
| jQuery.fn.addClass = function() { // Override jQuery addClass. |
| var jthis = $(this); |
| // Execute the original method and save result. |
| var result = addClass.apply(this, arguments); |
| |
| var length = arguments.length; |
| for (var i = 0; i < length; i++) { |
| if (arguments[i] == "checked") { |
| if (jthis.hasClass("arrow")) { |
| jthis.addClass("ie6-checked-arrow"); |
| } |
| } |
| |
| if (arguments[i] == "active") { |
| if (jthis.hasClass("arrow")) { |
| jthis.addClass("ie6-arrow-active"); |
| } |
| |
| if (jthis.hasClass("checked")) { |
| jthis.addClass("ie6-checked-active"); |
| } |
| |
| if (jthis.hasClass("radio") && jthis.hasClass("arrow")) { |
| jthis.addClass("ie6-radio-arrow-active"); |
| } |
| |
| if (jthis.hasClass("checked") && jthis.hasClass("arrow")) { |
| jthis.addClass("ie6-checked-arrow-active"); |
| } |
| } |
| } |
| |
| return result; |
| }; |
| |
| var removeClass = jQuery.fn.removeClass; // Retrieve original jQuery removeClass. |
| jQuery.fn.removeClass = function() { // Override jQuery removeClass. |
| var jthis = $(this); |
| // Execute the original method and save result. |
| var result = removeClass.apply(this, arguments); |
| |
| var length = arguments.length; |
| for (var i = 0; i < length; i++) { |
| if (arguments[i] == "checked") { |
| jthis.removeClass("ie6-checked-arrow"); |
| } |
| |
| if (arguments[i] == "active") { |
| jthis.removeClass("ie6-arrow-active ie6-checked-active ie6-radio-arrow-active ie6-checked-arrow-active"); |
| } |
| } |
| |
| return result; |
| }; |
| }; |
| |
| /** |
| * Sort out quirks for various versions of IE less than 9 - IE9 is fortunately *fairly* well behaved. |
| */ |
| var fixIEQuirks = function() { |
| if (IE_VERSION < 8) { // For IE7 and below. |
| $("textarea").parent().addClass("textarea"); // Add textarea class to parent <li> - used by IE7 CSS styles. |
| |
| // Wrapping the sidebar in another div with zoom: 1 to enable "layout mode" fixes an |
| // annoying page transition slide animation quirk with IE < 8. |
| BODY.prepend($("<div id='sidebar-wrapper'></div>")); |
| $("#sidebar-wrapper").append($("#menu")); |
| |
| // Sort out button styling and issue with :active not being switched off. |
| $("a.button").attr('hideFocus', 'hidefocus'). |
| append("<div class='before'></div><div class='after'></div>"). |
| bind("click mouseleave", function() {this.blur();}); |
| $("ul.contents li a").attr('hideFocus', 'hidefocus'); // Fix lack of outline: none; in IE < 8 |
| } |
| |
| if (IE_VERSION < 7) { // IE6 is a real drag...... |
| adjustSize(); // Set css width and height as it doesn't seem to be computed correctly in pure CSS. |
| mergeClasses(); // IE < 7 doesn't support multiple classes so merge them into IE specific class. |
| $(window).resize(adjustSize); |
| } else { // For IE7 and above just render list. |
| // Render each list (this reskins checkboxes & radio buttons and adds the border radius on old browsers). |
| $("ul.list").each(function() {iTablet.renderList($(this));}); |
| } |
| } |
| |
| //------------------------------------------------------------------------------------------------------------------- |
| // Initialise when DOM loads using (shorthand) jQuery.ready() |
| //------------------------------------------------------------------------------------------------------------------- |
| |
| $(function() { |
| /* |
| * These handlers help make the UI behave more like a User Interface than a web page. The selectstart handler |
| * disables selection on everything other than input/textarea etc. the dragstart handler disables IE image |
| * dragging, the touchmove handler disables mobile Safari web page "bounce" and the contextmenu handler |
| * disables the right click context menu. In a web page disabling this stuff might be frowned on, but in |
| * a web app it makes the application look and feel much more like a native app, which is rather the point. |
| */ |
| $(document).bind("selectstart contextmenu", function(e) { |
| return $(e.target).is('input, textarea, select, option');}); |
| $(document).bind("dragstart touchmove submit", function (e) {e.preventDefault();}); |
| $(document).bind("orientationchange", function (e) {scrollTo(0, 0);}); // Make sure position is OK |
| $(document).keyup(handleKeyboard); |
| |
| // jQuery object for body is used in several places so let's cache it. |
| BODY = $("body"); |
| |
| _mainLeft = parseInt($(".main").css("left"), 10); |
| |
| //IS_MOBILE = BODY.hasClass("mobile"); // We use the class "mobile" for mobile devices. |
| IS_MOBILE = (_mainLeft == 0); // For mobile devices there is no sidebar. |
| if (IS_MOBILE) { |
| _history = [{href:"#menu?", transition:null}]; |
| } |
| |
| // Prevent the browser trying to navigate to the href itself onclick then bind pointer Events to handlePointer. |
| BODY.bind(START_EV + " click", handlePointer); |
| |
| // Ensure various form fields behave correctly with iScroll. |
| $("input, textarea, select").bind(START_EV, function(e) {e.stopPropagation();}); |
| |
| // Detect input and textarea placeholders separately as some browsers (Opera 11) have native support for |
| // input placeholders but not textarea placeholders. |
| if (!("placeholder" in $("<input>")[0])) { // Add HTML5 input placeholder support if not natively present. |
| addPlaceholderSupport($("input[placeholder]")); |
| } |
| |
| if (!("placeholder" in $("<textarea>")[0])) { // Add HTML5 textarea placeholder support if not natively present. |
| addPlaceholderSupport($("textarea[placeholder]")); |
| } |
| |
| $.event.special.textchange = new TextChange(); // Add support for textchange Events on text input and textarea. |
| |
| // This block looks for scroll-areas and constructs an iScroll touch scroller. Note that scrollers are indexed |
| // by the containing "main" page not by the id of the scroll-area. The latter id is only used by iScroll itself. |
| $(".scroll-area").each(function(index) { |
| var parent = $(this).parent(); |
| parent.bind("refresh", handleRefresh); // Bind the synthetic refresh event to the refresh handler |
| var parentId = parent.attr("id"); |
| |
| if (TOUCH_ENABLED) { |
| _scrollers[parentId] = new iScroll(this); |
| } else { // Adds a dummy scroller object if not a touch device. |
| _scrollers[parentId] = {refresh: function() {}}; |
| } |
| }); |
| |
| initialiseCSSAnimations(); |
| _transitions = {"pop": popup}; |
| |
| iTablet.location = new Location("#" + $(".main").attr("id")); |
| |
| if (IS_IE) { |
| fixIEQuirks(); |
| } else { |
| // Render each list (this reskins checkboxes & radio buttons and adds the border radius on old browsers). |
| $("ul.list").each(function() {iTablet.renderList($(this));}); |
| } |
| |
| /* |
| * iOS6 safari has a number of "quirks" that seem to be related to overly aggressive caching, one of these |
| * these relates to attempting to reuse browser connections before the HTTP response has returned. In theory |
| * this may be a good thing as it allows better "pipelining" on persistent connections, but in practice |
| * if the "long polling" pattern is being used it can really mess things up for image "rollovers" when |
| * dynamic state gets changed. This usually manifests itself by the active images taking an age to appear. |
| * The following line works around this issue by initially adding the active state to the relevant items |
| * this forces the active images to be loaded, which are then subsequently cached. |
| */ |
| $("div.main ul.list li").addClass("active"); |
| |
| $(".main, .popup-window").hide(); |
| }); |
| }; |
| |
