From 3a3927930dcf0c781c5519856f621a1e5d8e99bd Mon Sep 17 00:00:00 2001 From: Sully Syed Date: Sun, 21 Aug 2011 22:05:40 -0400 Subject: [PATCH] Base commit of Lemma. --- blackberry-tablet.xml | 7 + chui/chocolatechip.js | 954 ++++++ chui/chui.css | 3440 +++++++++++++++++++++ chui/chui.js | 2540 +++++++++++++++ config.xml | 14 + css/lemma.css | 334 ++ css/qnxbuttons.css | 329 ++ data.html | 1 + data/account_settings.html | 6 + data/account_settings_notsetup-short.html | 13 + data/account_settings_notsetup.html | 26 + data/list.html | 3 + data/timeline.html | 14 + data/timeline_settings.html | 9 + icon.png | Bin 0 -> 4634 bytes images/actions-old.png | Bin 0 -> 564 bytes images/actions.png | Bin 0 -> 945 bytes images/ajax-loader.gif | Bin 0 -> 4996 bytes images/refresh.png | Bin 0 -> 1510 bytes images/reply.png | Bin 0 -> 516 bytes index.html | 458 +++ js/datehelper.js | 68 + js/iscroll-min.js | 1 + js/jsOAuth-1.2.min.js | 1 + js/lemma.js | 177 ++ js/list.js | 223 ++ js/navigation.js | 403 +++ js/search.js | 29 + 28 files changed, 9050 insertions(+) create mode 100644 blackberry-tablet.xml create mode 100644 chui/chocolatechip.js create mode 100644 chui/chui.css create mode 100644 chui/chui.js create mode 100644 config.xml create mode 100644 css/lemma.css create mode 100644 css/qnxbuttons.css create mode 100644 data.html create mode 100644 data/account_settings.html create mode 100644 data/account_settings_notsetup-short.html create mode 100644 data/account_settings_notsetup.html create mode 100644 data/list.html create mode 100644 data/timeline.html create mode 100644 data/timeline_settings.html create mode 100644 icon.png create mode 100644 images/actions-old.png create mode 100644 images/actions.png create mode 100644 images/ajax-loader.gif create mode 100644 images/refresh.png create mode 100644 images/reply.png create mode 100644 index.html create mode 100644 js/datehelper.js create mode 100644 js/iscroll-min.js create mode 100644 js/jsOAuth-1.2.min.js create mode 100644 js/lemma.js create mode 100644 js/list.js create mode 100644 js/navigation.js create mode 100644 js/search.js diff --git a/blackberry-tablet.xml b/blackberry-tablet.xml new file mode 100644 index 0000000..9036539 --- /dev/null +++ b/blackberry-tablet.xml @@ -0,0 +1,7 @@ + + The Pumping Lemma Company + gYAAgLba9DI0S3P-exh8v7AbFzo + core.social + 1 + 0.1.0.0 + \ No newline at end of file diff --git a/chui/chocolatechip.js b/chui/chocolatechip.js new file mode 100644 index 0000000..02e4eb2 --- /dev/null +++ b/chui/chocolatechip.js @@ -0,0 +1,954 @@ +/* + pO\ + 6 /\ + /OO\ + /OOOO\ + /OOOOOOOO\ + ((OOOOOOOO)) + \:~=++=~:/ + +ChocolateChip.js: It's tiny but delicious +A JavaScript library for mobile Web app development. + +Copyright 2011 Robert Biggs: www.choclatechip-ui.com +License: BSD +Version 1.1.6 + +*/ + +(function() { + var $ = function ( selector, context ) { + if (!!context) { + if (typeof context === "string") { + return document.querySelector(context + " " + selector); + } else if (context.nodeType === 1) { + return context.querySelector(selector); + } + } else { + if (typeof selector === "function") { + $.ready(function() { + selector.call(selector); + }); + } else { + return document.querySelector(selector); + } + } + }; + + $.extend = function(obj, prop) { + if (!Object.keys) { + if (!prop) { + prop = obj; + obj = this; + } + for (var i in prop) { + obj[i] = prop[i]; + } + return obj; + } else { + Object.keys(prop).forEach(function(p) { + if (prop.hasOwnProperty(p)) { + Object.defineProperty(obj, p, { + value: prop[p], + writable: true, + enumerable: false, + configurable: true + }); + } + }); + } + }; + + $.extend($, { + + version : "1.1.6", + + collectionToArray : function ( collection ) { + var array = []; + var i = 0, len = collection.length; + while ( i < len ) { + array[i] = collection[i]; + i++; + } + return array; + }, + + $$ : function ( selector, context ) { + if (!!context) { + if (typeof context === "string") { + return $.collectionToArray(document.querySelectorAll(context + " " + selector)); + } else if (context.nodeType === 1){ + return $.collectionToArray(context.querySelectorAll(selector)); + } + } else { + return $.collectionToArray(document.querySelectorAll(selector)); + } + }, + + make : function ( HTMLString ) { + var nodes = []; + var temp = document.createElement("div"); + temp.innerHTML = HTMLString; + var i = 0; + var len = temp.childNodes.length; + while (i < len) { + nodes[i] = temp.childNodes[i]; + i++; + } + return nodes; + }, + + replace : function ( newElem, oldElem ) { + oldElem.parentNode.replaceChild(newElem, oldElem); + }, + + processJSON : function ( data ) { + var script = document.createElement("script"); + script.setAttribute("type", "text/javascript"); + var scriptID = $.UIUuid(); + script.setAttribute("id", scriptID); + script.insert(data); + $("head").insert(script, "last"); + $.defer(function() { + var id = "#" + scriptID; + $(id).remove(); + }); + } + }); + $.extend(HTMLElement.prototype, { + + previous : function ( ) { + return this.previousElementSibling; + }, + + next : function ( ) { + return this.nextElementSibling; + }, + + first : function ( ) { + return this.firstElementChild; + }, + + last : function ( ) { + return this.lastElementChild; + }, + + ancestor : function( selector ) { + var idCheck = new RegExp("^#"); + var classCheck = new RegExp("^."); + var position = null; + var newSelector = null; + var p = this.parentNode; + if (!p) { + return false; + } + if (typeof selector === "string") { + selector.trim(); + } + if (typeof selector === "number") { + position = selector || 1; + for (var i = 1; i < position; i++) { + if (p.nodeName === "HTML") { + return p; + } else { + if (p != null) { + p = p.parentNode; + } + } + } + return p; + } else if (selector.substr(0,1) === "." ) { + newSelector = selector.split(".")[1]; + if (p.nodeName === "BODY") { + return false; + } + if (p.hasClass(newSelector)) { + return p; + } else { + return p.ancestor(selector); + } + } else if (selector.substr(0,1) === "#" ) { + newSelector = selector.split("#")[1]; + if (p.getAttribute("id") === newSelector) { + return p; + } else { + return p.ancestor(selector); + } + } else { + if (p.tagName.toLowerCase() === selector) { + return p; + } else { + return p.ancestor(selector); + } + } + }, + + ancestorByTag : function ( selector ) { + return this.ancestor(selector); + }, + + ancestorByClass : function ( selector ) { + selector = "." + selector; + return this.ancestor(selector); + }, + + ancestorByPosition : function ( position ) { + return this.ancestor(position); + }, + + clone : function ( value ) { + if (value === true || !value) { + return this.cloneNode(true); + } else { + return this.cloneNode(false); + } + }, + + wrap : function ( string ) { + var tempNode = $.make(string); + tempNode = tempNode[0]; + var whichClone = this.clone(true); + tempNode.appendChild(whichClone); + this.after(tempNode, this); + this.remove(this); + return this; + }, + + unwrap : function ( ) { + if (this.parentNode.nodeName === "BODY") { + return false; + } + var element = this.cloneNode(true); + $.replace(element, this.parentNode); + return this; + }, + + text : function ( value ) { + if (!!value) { + this.innerText = value; + } else { + return this.innerText; + } + }, + + fill : function ( content ) { + this.empty(); + if (typeof content === "string") { + this.textContent = content; + } else { + this.insert(content); + } + return this; + }, + + empty : function ( ) { + this.removeEvents(); + this.textContent = ""; + return this; + }, + + remove : function ( ) { + this.removeEvents(); + this.parentNode.removeChild(this); + }, + + insert : function ( content, position ) { + var c = ""; + if (typeof content === "string") { + c = $.make(content); + } else if (content.nodeType === 1) { + c = []; + c.push(content); + } else { + c = content; + } + var i = 0; + var len = c.length; + if (!position || position > (this.children.length + 1) || position === "last") { + while (i < len) { + this.appendChild(c[i]); + i++; + } + } else if (position === 1 || position === "first") { + while (i < len) { + this.insertBefore(c[i], this.firstElementChild); + i++; + } + } else { + while (i < len) { + this.insertBefore(c[i], this.children[position - 1]); + i++; + } + } + return this; + }, + + before : function ( content ) { + if (content.constructor === Array) { + var len = content.length; + var i = 0; + while (i < len) { + this.parentNode.insertBefore(content[i], this); + i++; + } + } else { + this.parentNode.insertBefore(content, this); + } + return this; + }, + + after : function ( content ) { + var parent = this.parentNode; + if (content.constructor === Array) { + var i = 0, len = content.length; + while (i < len) { + if (this === parent.lastChild) { + parent.appendChild(content[i]); + } else { + parent.insertBefore(content[i],this.nextSibling); + } + i++; + } + } else { + if (content === this.lastChild) { + parent.appendChild(content); + } else { + parent.insertBefore(content, this.next()); + } + } + return this; + }, + + hasClass : function ( className ) { + return new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)').test(this.className); + }, + + addClass : function ( className ) { + if (!this.hasClass(className)) { + this.className = [this.className, className].join(' ').replace(/^\s*|\s*$/g, ""); + return this; + } + }, + + removeClass : function ( className ) { + if (this.hasClass(className)) { + var currentClasses = this.className; + this.className = currentClasses.replace(new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', 'g'), ' ').replace(/^\s*|\s*$/g, ""); + return this; + } + }, + + disable : function ( ) { + this.addClass("disabled"); + this.css("{cursor: default;}"); + this.preventDefault(); + return this; + }, + + enable : function ( ) { + this.removeClass("disabled"); + this.css("{cursor: pointer;}"); + return this; + }, + + toggleClass : function ( firstClassName, secondClassName ) { + if (!secondClassName) { + if (!this.hasClass(firstClassName)) { + this.addClass(firstClassName); + } else { + this.removeClass(firstClassName); + } + } else if (secondClassName) { + if (!this.hasClass(firstClassName)) { + this.addClass(firstClassName); + this.removeClass(secondClassName); + } else { + this.removeClass(firstClassName); + this.addClass(secondClassName); + } + } + return this; + }, + + getTop : function() { + var element = this; + var pos = 0; + while (element.offsetParent) { + pos += element.offsetTop; + element = element.offsetParent; + } + pos = pos + document.body.offsetTop; + return pos; + }, + + getLeft : function(element) { + var element = this; + var pos = 0; + while (element.offsetParent) { + pos += element.offsetLeft; + element = element.offsetParent; + } + pos = pos + document.body.offsetLeft; + return pos; + }, + + css : function ( property, value ) { + if (/\{/.test(property) && /\}/.test(property) && !value) { + this.style.cssText += property.substring(1, property.length - 1); + } + if (!value) { + return document.defaultView.getComputedStyle(this, null).getPropertyValue(property.toLowerCase()); + } else { + this.style.cssText += property + ":" + value + ";"; + return this; + } + }, + bind : function( event, callback ) { + this.addEventListener(event, callback, false); + }, + + unbind : function( event, callback ) { + this.removeEventListener( event, callback, false ); + }, + + removeEvents : function ( ) { + var i = 0, len = $.events.length; + while (i < len) { + this[$.events[i]] = null; + i++; + } + }, + + delegate : function ( selector, event, callback ) { + this.addEventListener(event, function(e) { + var target = e.target; + $.$$(selector, this).forEach(function(element) { + if (element.isSameNode(target)) { + callback.apply(this, arguments); + } else { + try { + var ancestor = target.ancestor(selector); + if (element.isSameNode(ancestor)) { + e.stopPropagation(); + callback.call(this, ancestor); + } + } catch(e) {} + } + }); + }, false); + }, + + trigger : function ( event ) { + if( document.createEvent ) { + var evtObj = document.createEvent('Events'); + evtObj.initEvent(event, true, false); + this.dispatchEvent(evtObj); + } + }, + + anim : function ( options, duration, easing ) { + var onEnd = null; + var value = "-webkit-transition: all " + (duration + " " || ".5s ") + easing + ";" || "" + ";"; + for (var prop in options) { + if (prop === "onEnd") { + onEnd = options[prop]; + this.bind("webkitTransitionEnd", function() { + onEnd(); + }); + } else { + value += prop + ":" + options[prop] + ";"; + } + } + this.css("{" + value + "}"); + }, + xhr : function ( url, options ) { + var o = options ? options : {}; + var successCallback = null; + var errorCallback = null; + if (!!options) { + if (!!options.successCallback || !!options.success) { + successCallback = options.successCallback || options.success; + } + } + var that = this, + request = new XMLHttpRequest(), + method = o.method || 'get', + async = o.async || false, + params = o.data || null, + i = 0; + request.queryString = params; + request.open(method, url, async); + if (o.headers) { + for (; i= 0; i--) { + args = [funcs[i].apply(this, args)]; + } + return args[0]; + }; + }, + + events : ['onmousedown', 'onmouseup', 'onmouseover', 'onmouseout', 'onclick', 'onmousemove', 'ondblclick', 'onerror', 'onresize', 'onscroll', 'onkeydown', 'onkeyup', 'onkeypress', 'onchange', 'onsubmit', 'onload', 'ontouchstart', 'ontouchmove', 'ontouchend', 'ontouchcancel', 'ongesturestart', 'ongesturechange', 'ongestureend', 'onorientationchange'], + + loadEvent : function ( F ) { + var oldonload = window.onload; + if (typeof window.onload !== 'function') { + window.onload = F; + } else { + window.onload = function () { + oldonload(); + F(); + }; + } + }, + + DOMReadyList : [], + + executeWhenDOMReady : function ( ) { + var listLen = $.DOMReadyList.length; + var i = 0; + while (i < listLen) { + $.DOMReadyList[i](); + i++; + } + $.DOMReadyList = null; + document.removeEventListener('DOMContentLoaded', $.executeWhenDOMReady, false); + }, + + ready : function ( callback ) { + if ($.DOMReadyList.length === 0) { + document.addEventListener('DOMContentLoaded', $.executeWhenDOMReady, false); + } + + $.DOMReadyList.push(callback); + }, + + UIHideURLbar : function() { + window.scrollTo(0, 1); + }, + + importScript : function ( url ) { + var script = document.createElement("script"); + script.setAttribute("type", "text/javascript"); + script.setAttribute("src", url); + $("head").appendChild(script); + }, + + iphone : /iphone/i.test(navigator.userAgent), + ipad : /ipad/i.test(navigator.userAgent), + ipod : /ipod/i.test(navigator.userAgent), + ios : /ip(hone|od|ad)/i.test(navigator.userAgent), + android : /android/i.test(navigator.userAgent), + webos : /webos/i.test(navigator.userAgent), + blackberry : /blackberry/i.test(navigator.userAgent), + touchEnabled : ("createTouch" in document), + online : navigator.onLine, + standalone : navigator.standalone, + + localItem : function ( key, value ) { + try { + if (!value) { + try { + var value = localStorage.getItem(key); + if (value[0] === "{") { + value = JSON.parse(value); + } + return value; + } catch(e) {} + } + if (typeof value === "object") { + value = JSON.stringify(value); + } + localStorage.setItem(key, value); + } catch(e) { + if (e === "QUOTA_EXCEEDED_ERR") { + console.error('Quota exceeded for localStorage!'); + } + } + }, + deleteLocalItem : function ( key ) { + try { + localStorage.removeItem(key); + } catch(e) {} + }, + clearLocalItems : function ( ) { + localStorage.clear(); + }, + + templates : {}, + + template : function(str, data) { + if ($.ajaxStatus === null || $.ajaxStatus === false) { + return data; + } + if ($.templates[str]) { + var str = $.templates[str]; + } else { + var str = str; + } + var tmpl = 'var p=[],print=function(){p.push.apply(p,arguments);};with(obj||{}){p.push(\''; + var regex1; + var regex2; + if (/{{/.test(str) || /${/.test(str)) { + regex1 = /\$\{([\s\S]+?)\}/g; + regex2 = /\{\{([\s\S]+?)\}\}/g; + } else if (/\[\[/.test(str) || /$\[/.test(str)) { + regex1 = /\$\[([\s\S]+?)\]/g; + regex2 = /\[\[([\s\S]+?)\]\]/g; + } else if (/<%/.test(str) || /<%=/.test(str)) { + regex1 = /<%=([\s\S]+?)%>/g; + regex2 = /<%([\s\S]+?)%>/g; + } + tmpl += + str.replace(/\\/g, '\\\\') + .replace(/'/g, "\\'") + .replace(regex1, function(match, code) { + return "'," + code.replace(/\\'/g, "'") + ",'"; + }) + .replace(regex2 || null, function(match, code) { + return "');" + code.replace(/\\'/g, "'") + .replace(/[\r\n\t]/g, ' ') + "p.push('"; + }) + .replace(/\r/g, '\\r') + .replace(/\n/g, '\\n') + .replace(/\t/g, '\\t') + + "');} return p.join('');"; + var fn = new Function('obj', tmpl); + return data ? fn(data) : fn; + }, + + UIUpdateOrientationChange : function ( ) { + var body = $("body"); + document.addEventListener("orientationchange", function() { + if (window.orientation === 0 || window.orientation === 180) { + body.removeClass("landscape"); + body.addClass("portrait"); + $.UIHideURLbar(); + } else { + body.removeClass("portrait"); + body.addClass("landscape"); + $.UIHideURLbar(); + } + $.UIHideURLbar(); + }, false); + }, + + UIListenForWindowResize : function ( ) { + var body = $("body"); + window.addEventListener("resize", function() { + if (window.innerHeight > window.innerWidth) { + body.removeClass("landscape"); + body.addClass("portrait"); + $.UIHideURLbar(); + } else { + body.removeClass("portrait"); + body.addClass("landscape"); + $.UIHideURLbar(); + } + }, false); + }, + kvo : function () { + // Register observers of a key for this object: + this.registerObserver = function(observer, key) { + if (this.observers == null) { + this.observers = {}; + } + if (this.observers[key] == null) { + this.observers[key] = [observer]; + } else { + this.observers[key].push(observer); + } + }, + + // Set a value of this object, and inform observers of the assignment: + this.set = function(key, value) { + if (this.observers != null && this.observers[key] != null) { + currentValue = this[key]; + this.observers[key].forEach(function(observer) { + observer.keyWillUpdate(this, key, currentValue, value); + }); + this[key] = value; + } + } + }, + form2JSON : function(rootNode, delimiter) { + rootNode = typeof rootNode == 'string' ? $(rootNode) : rootNode; + delimiter = delimiter || '.'; + var formValues = getFormValues(rootNode); + var result = {}; + var arrays = {}; + + formValues.forEach(function(item) { + var value = item.value; + if (value !== '') { + var name = item.name; + var nameParts = name.split(delimiter); + var currResult = result; + for (var j = 0; j < nameParts.length; j++) { + var namePart = nameParts[j]; + var arrName; + if (namePart.indexOf('[]') > -1 && j == nameParts.length - 1) { + arrName = namePart.substr(0, namePart.indexOf('[')); + if (!currResult[arrName]) currResult[arrName] = []; + currResult[arrName].push(value); + } else { + if (namePart.indexOf('[') > -1) { + arrName = namePart.substr(0, namePart.indexOf('[')); + var arrIdx = namePart.replace(/^[a-z]+\[|\]$/gi, ''); + /* Because arrIdx in field name can be not zero-based and step can be other than 1, we can't use them in target array directly. Instead we're making a hash where key is arrIdx and value is a reference to added array element */ + + if (!arrays[arrName]) { + arrays[arrName] = {}; + } + if (!currResult[arrName]) { + currResult[arrName] = []; + } + if (j == nameParts.length - 1) { + currResult[arrName].push(value); + } else { + if (!arrays[arrName][arrIdx]) { + currResult[arrName].push({}); + arrays[arrName][arrIdx] = + currResult[arrName][currResult[arrName].length - 1]; + } + } + currResult = arrays[arrName][arrIdx]; + } else { + /* Not the last part of name - means object */ + if (j < nameParts.length - 1) { + if (!currResult[namePart]) { + currResult[namePart] = {}; + } + currResult = currResult[namePart]; + } else { + currResult[namePart] = value; + } + } + } + } + } + }); + return result; + + function getFormValues(rootNode) { + var result = []; + var currentNode = rootNode.firstChild; + while (currentNode) { + if (currentNode.nodeName.match(/INPUT|SELECT|TEXTAREA/i)) { + result.push({ name: currentNode.name, value: getFieldValue(currentNode)}); + } else { + var subresult = getFormValues(currentNode); + result = result.concat(subresult); + } + currentNode = currentNode.nextSibling; + } + return result; + } + function getFieldValue(fieldNode) { + if (fieldNode.nodeName == 'INPUT') { + if (fieldNode.type.toLowerCase() == 'radio' || fieldNode.type.toLowerCase() == 'checkbox') { + if (fieldNode.checked) { + return fieldNode.value; + } + } else { + if (!fieldNode.type.toLowerCase().match(/button|reset|submit|image/i)) { + return fieldNode.value; + } + } + } else { + if (fieldNode.nodeName == 'TEXTAREA') { + return fieldNode.value; + } else { + if (fieldNode.nodeName == 'SELECT') { + return getSelectedOptionValue(fieldNode); + } + } + } + return ''; + } + function getSelectedOptionValue(selectNode) { + var multiple = selectNode.multiple; + if (!multiple) { + return selectNode.value; + } + if (selectNode.selectedIndex > -1) { + var result = []; + $$("option", selectNode).forEach(function(item) { + if (item.selected) { + result.push(item.value); + } + }); + return result; + } + } + } + }); + if (window.$ === undefined) { + window.$ = $; + window.$$ = $.$$; + } else { + window.__$ = $; + window.__$$ = $.$$; + } +})(); +$.ready(function() { + $.UIUpdateOrientationChange(); + $.UIListenForWindowResize(); +}); + +if (!Function.prototype.bind) { + Function.prototype.bind = function(func, obj) { + var args = Array.prototype.slice.call(arguments, 2); + return function() { + return func.apply(obj || {}, args.concat(Array.prototype.slice.call(arguments))); + }; + }; +} diff --git a/chui/chui.css b/chui/chui.css new file mode 100644 index 0000000..bd434bb --- /dev/null +++ b/chui/chui.css @@ -0,0 +1,3440 @@ +/* + pO\ + 6 /\ + /OO\ + /OOOO\ + /OOOOOOOO\ + ((OOOOOOOO)) + \:~=++=~:/ + +ChocolateChip-UI +Three yummy ingredients make this something to sink your teeth into: +ChococlateChip.js: It's tiny but delicious +ChUI.css: Good looks do impress +ChUI.js: The magic to make it happen +Also staring WAML--Web App Markup Language: no more masquerading as a Web page. +WAML makes coding a Web app logical and straightforward, the way it was meant to be. + +Copyright 2011 Robert Biggs: www.chocolatechip-ui.com +License: BSD +Version: 0.8.6 beta + +*/ +html, body { + margin: 0; + padding: 0; + min-height: 100%; + font: normal 14px/18px Helvetica, Sans-serif; +} +app, view, subview, section, navbar, toolbar, tabbar, tableview, tablecell, celltitle, cellsubtitle, celldetail, tableheader, tablefooter, popover, popup, picker, screencover, stack, panel, scrollpanel, shim { + display: block; + padding: 0; + margin: 0; + font: normal 18px Helvetica, Sans-serif; + -webkit-user-select: none; + user-select: none; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-tap-highlight-color:rgba(0,0,0,0); +} +navbar, toolbar, tabbar { + z-index: 100000; +} +app { + overflow-y: auto; + overflow-x: hidden; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +view { + width: 100%; + display: -webkit-box; + margin: 0 0 -10px 0; + height: 100%; + -webkit-box-orient: vertical; + -webkit-box-align: stretch; + -webkit-box-sizing: border-box; + -webkit-transition: all 0.25s ease-in-out; + overflow: hidden; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +view[ui-navigation-status=upcoming] { + -webkit-transform: translateX(100%); + -webkit-transform: translate3d(100%,0%,0%); +} +view[ui-navigation-status=current] { + -webkit-transform: translateX(0%); + -webkit-transform: translate3d(0%,0%, 0%); +} +view[ui-navigation-status=traversed] { + -webkit-transform: translateX(-100%); + -webkit-transform: translate3d(-100%, 0%, 0%); +} +subview > scrollpanel { + height: auto; + min-height: 100%; + overflow: hidden; + padding-bottom: 45px; +} +subview[ui-associations] { + display: block; + position: absolute; + left: 0; + right: 0; + overflow-y: auto; +} +subview[ui-associations=withNavBar], +subview[ui-associations=withTopToolBar] { + top: 45px; + bottom: 0px; +} +subview[ui-associations=withBottomToolBar] { + top: 0px; + bottom: 45px; +} +subview[ui-associations="withNavBar withBottomToolBar"], +subview[ui-associations="withTopToolBar withBottomToolBar"] { + top: 45px; + bottom: 45px; +} +subview[ui-associations=withTabBar] { + top: 0; + bottom: 49px; +} +subview[ui-associations="withNavBar withTabBar"], +subview[ui-associations="withToolBar withTabBar"] { + top: 45px; + bottom: 49px; +} +*[ui-background-style=striped] { + background: #cbd2d8; + background-image: + -webkit-gradient(linear, left top, right top, + from(#c5ccd4), + color-stop(0.75, #c5ccd4), + color-stop(0.75, transparent), + to(transparent)); + -webkit-background-size: 5px 100%; + background-size: 5px 100%; +} +*[ui-background-style=vertical-striped] { + background-image: + -webkit-gradient(linear, left top, right top, + from(rgba(0,0,0,0.1)), + color-stop(0.75, rgba(0,0,0,0.1)), + color-stop(0.75, transparent), + to(transparent)); + -webkit-background-size: 5px 100%; + background-size: 5px 100%; +} +*[ui-background-style=horizontal-striped] { + + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(0,0,0,0.1)), + color-stop(0.75, rgba(0,0,0,0.1)), + color-stop(0.75, transparent), + to(transparent)); + -webkit-background-size: 100% 5px; + background-size: 100% 5px; +} +*[ui-background-style=slanted-left] { + background-image: + -webkit-gradient(linear, right top, left bottom, + from(transparent), + color-stop(0.15, transparent), + color-stop(0.15, rgba(0,0,0,0.1)), + color-stop(0.50, rgba(0,0,0,0.1)), + color-stop(0.50, transparent), + color-stop(0.65, transparent), + color-stop(0.69, rgba(0,0,0,0.1)), + to(rgba(0,0,0,0.1))); + -webkit-background-size: 6px 6px; + background-size: 6px 6px; +} +*[ui-background-style=slanted-right] { + background-image: + -webkit-gradient(linear, left top, right bottom, + from(transparent), + color-stop(0.15, transparent), + color-stop(0.15, rgba(0,0,0,0.1)), + color-stop(0.50, rgba(0,0,0,0.1)), + color-stop(0.50, transparent), + color-stop(0.65, transparent), + color-stop(0.69, rgba(0,0,0,0.1)), + to(rgba(0,0,0,0.1))); + -webkit-background-size: 6px 6px; + background-size: 6px 6px; +} +*[ui-background-style=vertical-striped-equal] { + background-image: + -webkit-gradient(linear, left top, right top, + from(rgba(0,0,0,0.1)), + color-stop(0.5, rgba(0,0,0,0.1)), + color-stop(0.5, transparent), + to(transparent)); + -webkit-background-size: 10px 100%; + background-size: 10px 100%; +} +*[ui-background-style=horizontal-striped-equal] { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(0,0,0,0.1)), + color-stop(0.5, rgba(0,0,0,0.1)), + color-stop(0.5, transparent), + to(transparent)); + -webkit-background-size: 100% 10px; + background-size: 100% 10px; +} +*[ui-background-style=slanted-left-equal] { + background-image: + -webkit-gradient(linear, right top, left bottom, + color-stop(0.23, rgba(0, 0, 0, 0.1)), + color-stop(0.25, transparent), + color-stop(0.5, transparent), + color-stop(0.5, rgba(0, 0, 0, 0.1)), + color-stop(0.73, rgba(0, 0, 0, 0.1)), + color-stop(0.75, transparent), + to(transparent)); + -webkit-background-size: 15px 15px; + background-size: 15px 15px; +} +*[ui-background-style=slanted-right-equal] { + background-image: + -webkit-gradient(linear, left top, right bottom, + color-stop(0.23, rgba(0, 0, 0, 0.1)), + color-stop(0.25, transparent), + color-stop(0.5, transparent), + color-stop(0.5, rgba(0, 0, 0, 0.1)), + color-stop(0.73, rgba(0, 0, 0, 0.1)), + color-stop(0.75, transparent), + to(transparent)); + -webkit-background-size: 15px 15px; + background-size: 15px 15px; +} +*[ui-background-style=squared] { + background-image: + -webkit-gradient(linear, left top, right top, + from(rgba(0,0,0,0.05)), + color-stop(0.75, rgba(0,0,0,0.05)), + color-stop(0.75, transparent), + to(transparent)), + + -webkit-gradient(linear, left top, left bottom, + from(rgba(0,0,0,0.05)), + color-stop(0.75, rgba(0,0,0,0.05)), + color-stop(0.75, transparent), + to(transparent)); + -webkit-background-size: 5px 100%, 100% 5px; + background-size: 5px 100%, 100% 5px; +} +*[ui-background-style=checkered] { + background-image: + -webkit-gradient(linear, left top, left bottom, + color-stop(.5, transparent), + color-stop(.5, rgba(0, 0, 0, .1)), + to(rgba(0, 0, 0, .1))), + -webkit-gradient(linear, left bottom, right bottom, + color-stop(.5, transparent), + color-stop(.5, rgba(0, 0, 0, .1)), + to(rgba(0, 0, 0, .1))); + -webkit-background-size: 10px 10px; + background-size: 10px 10px; +} +*[ui-background-style=chess] { + background-image: + -webkit-gradient(linear, 0 0, 100% 100%, + color-stop(.25, rgba(0,0,0,0.1)), + color-stop(.25, transparent), + to(transparent)), + -webkit-gradient(linear, 0 100%, 100% 0, + color-stop(.25, rgba(0,0,0,0.1)), + color-stop(.25, transparent), + to(transparent)), + -webkit-gradient(linear, 0 0, 100% 100%, + color-stop(.75, transparent), + color-stop(.75, rgba(0,0,0,0.1))), + -webkit-gradient(linear, 0 100%, 100% 0, + color-stop(.75, transparent), + color-stop(.75, rgba(0,0,0,0.1))); + -webkit-background-size: 10px 10px; + background-size: 10px 10px; +} +*[ui-background-style=speckled] { + background-image: + -webkit-gradient(radial, 4 4, 4, 4 4, 2, + from(rgba(0,0,0,0)), + color-stop(.6,rgba(0,0,0,0.1)), + to(rgba(0,0,0,0.1))); + -webkit-background-size: 8px 8px; + background-size: 8px 8px; + +} +*[ui-background-style=spotted] { + background-image: + -webkit-gradient(radial, 6 6, 6, 6 6, 3, + from(rgba(0,0,0,0.1)), + color-stop(.6,rgba(0,0,0,0.1)), + to(rgba(0,0,0,0))); + -webkit-background-size: 20px 20px; + background-size: 10px 10px; +} +/* Layout Flexible Box Styles */ +*[ui-box=horizontal] { + display: -webkit-box; + -webkit-box-orient: horizontal; +} +*[ui-box=vertical] { + display: -webkit-box; + -webkit-box-orient: vertical; +} +*[ui-box-direction=normal] { + -webkit-box-direction: normal; +} +*[ui-box-direction=reverse] { + -webkit-box-direction: reverse; +} +*[ui-box-pack=start] { + -webkit-box-pack: start; +} +*[ui-box-pack=end] { + -webkit-box-pack: end; +} +*[ui-box-pack=center] { + -webkit-box-pack: center; +} +*[ui-box-pack=justify] { + -webkit-box-pack: justify; +} +*[ui-box-align=stretch] { + -webkit-box-align: stretch; +} +*[ui-box-align=center] { + -webkit-box-align: center; +} +*[ui-box-align=start] { + -webkit-box-align: start; +} +*[ui-box-align=end] { + -webkit-box-align: end; +} +*[ui-box-flex=0] { + -webkit-box-flex: 0; +} +*[ui-box-flex=1] { + display: block; + -webkit-box-flex: 1; +} +*[ui-box-flex=2] { + display: block; + -webkit-box-flex: 2; +} +*[ui-box-flex=3] { + display: block; + -webkit-box-flex: 3; +} +*[ui-box-flex=4] { + display: block; + -webkit-box-flex: 4; +} +*[ui-box-flex=5] { + display: block; + -webkit-box-flex: 5; +} +*[ui-box-flex=6] { + display: block; + -webkit-box-flex: 6; +} +*[ui-box-flex=7] { + display: block; + -webkit-box-flex: 7; +} +*[ui-box-flex=8] { + display: block; + -webkit-box-flex: 8; +} +*[ui-box-flex=9] { + display: block; + -webkit-box-flex: 9; +} +*[ui-box-flex=10] { + display: block; + -webkit-box-flex: 10; +} +.ui-box-sizing-content { + -webkit-box-sizing: content-box; +} +*[ui-box-sizing=content] { + -webkit-box-sizing: content-box; +} +*[ui-box-sizing=border] { + -webkit-box-sizing: border-box; +} +stack { + display: -webkit-box; + -webkit-box-align: center; +} +stack > panel, +stack > segmentedcontrol { + -webkit-box-flex: 1; + display: -webkit-box !important; +} + +stack[ui-kind=horizontal] { + display: -webkit-box; + -webkit-box-orient: horizontal; +} +stack[ui-kind=vertical] { + display: -webkit-box; + -webkit-box-orient: vertical; +} +shim { + display: block; + height: 10px; +} +/* End Layout Flexible Box Styles */ + +/* UIButton Styles */ +uibutton, uibutton * { + cursor: pointer; +} +/* Basic UIButton Styles */ +uibutton { + -webkit-box-sizing: border-box; + -webkit-box-flex: 1; + display: block; + -webkit-box-align: center; + -webkit-box-pack: center; + display: -webkit-box; + -webkit-box-orient: horizontal; + +} +navbar > uibutton, +toolbar > uibutton { + -webkit-box-flex: 0 !important; + display: inline-box; +} +uibutton > label, +uibutton > img { + display: block; + -webkit-box-align: center; +} +uibutton icon[style*=-webkit-mask-image] { + background-color: #fff; + -webkit-mask-repeat: no-repeat !important; +} +uibutton { + -webkit-box-shadow: 0 1px 1px #9aa5bb, 0 -1px 1px #8e96a5; + border: solid 1px #54617d; + border-color: #484e59 #54617d #4c5c7a #54617d; + display: block; + padding: 0px 10px; + font-size: 12px; + line-height: 28px; + height: 30px; + -webkit-box-sizing: border-box; + -webkit-border-radius: 5px; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#92a1bf), + color-stop(0.25, #798aad), + color-stop(0.5, #6276a0), + color-stop(0.5, #556a97), + color-stop(0.75, #566c98), + to(#546993)); + color: #fff; + -webkit-tap-highlight-color: transparent; + -webkit-user-select: none; + margin: 0px 10px; + position: relative; + cursor: pointer; + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-align: center; + -webkit-box-direction: normal; +} +uibutton:hover, +uibutton.touched, +uibutton[ui-implements=done]:hover, +uibutton[ui-implements=done].touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#7d88a5), + color-stop(0.25, #58698c), + color-stop(0.5, #3a4e78), + color-stop(0.5, #253c6a), + color-stop(0.75, #273f6d), + to(#273f6d)); + -webkit-tap-highlight-color: transparent; +} +/* Begin Toolbar Bordered uibutton Styles */ +navbar uibutton, toolbar uibutton { + margin: 0px 3px 0px 10px; + -webkit-margin-collapse: discard; +} +navbar uibutton:first-of-type, +toolbar uibutton:first-of-type { + margin-top: -.25px; +} +navbar uibutton + uibutton, +toolbar uibutton + uibutton { + margin: 0px 3px; +} +navbar uibutton:last-of-type, +toolbar uibutton:last-of-type { + margin-right: 10px; +} +/* Toolbar Plain Icon Styles */ +navbar.ui-box-pack-justify, +toolbar.ui-box-pack-justify { + -webkit-box-pack: justify; +} +uibutton[ui-kind=icon] { + height: 43px; + width: 43px; + display: -webkit-box; + -webkit-box-orient: vertical !important; + -webkit-box-align: center; + position: relative; + -webkit-box-shadow: none; + border: none; + padding: 0px; + -webkit-box-sizing: border-box; + -webkit-border-radius: 0px; + background: none; + -webkit-box-pack: center; + -webkit-box-align: center; +} +uibutton[ui-kind=icon].disabled, uibutton[ui-kind=icon].disabled:hover, uibutton[ui-kind=icon].disabled.touched { + background: none; +} +uibutton[ui-kind=icon].disabled /*> uibuttoncontent*/, uibutton.disabled icon { + opacity: 0.75; +} +uibutton[ui-kind=icon]:hover, +uibutton[ui-kind=icon].touched { + background-image: + -webkit-gradient(radial,50% 50%,0,50% 50%,20, + color-stop(0%,rgba(213,231,247,0.9)), + color-stop(100%,rgba(213,231,247,0))); +} +icon { + background-position: center center; + -webkit-mask-position: 50% 50%;; + -webkit-mask-size: 22px 22px; + background-size: 23px 23px; + margin: 2px auto 0px auto; + height: 23px; + width: 23px; + display: inline-block; +} +uibutton[ui-kind=icon] icon[style*="webkit-mask-image"], +uibutton[ui-kind=icon] icon[style*="webkit-mask-image"], +icon[ui-implements="icon-mask"] { + margin: 0; + background-color: #fff; +} +uibutton[ui-kind=icon] > icon { + background-position: center center; + -webkit-mask-position: 50% 50%;; + -webkit-mask-size: 23px 23px; + background-size: 23px 23px; + margin: 45% auto 0px auto !important; +} +uibutton[ui-implements="icon"] { + padding: 0px 4px; +} + +/* End Toolbar Plain Icon Styles */ + +uibutton.disabled label, uibutton.disabled icon, +uibutton.disabled label, uibutton.disabled icon { + opacity: 0.5; +} +/* End Basic UIButton Styles */ + +/* Icon Alignment */ +uibutton icon + label { + margin-left: 4px; +} +uibutton[ui-icon-align="right"] icon + label { + margin-left: 0; + margin-right: 4px; +} +uibutton[ui-icon-align="top"] icon + label { + margin-left: 0; +} +uibutton[ui-icon-align="bottom"] icon + label { + margin-left: 0; +} +uibutton[ui-icon-align="right"], +uibutton[ui-kind=action][ui-icon-align="right"]{ + -webkit-box-direction: reverse !important; + -webkit-box-orient: horizontal !important; +} +uibutton[ui-icon-align=top] { + display: -webkit-box; + -webkit-background-clip: padding; + -webkit-box-align: center; + -webkit-box-orient: vertical !important; +} +uibutton[ui-icon-align=bottom] { + display: -webkit-box; + -webkit-background-clip: padding; + -webkit-box-orient: vertical; + -webkit-box-align: justify; + -webkit-box-direction: reverse; +} +uibutton[ui-icon-align=top], +uibutton[ui-icon-align=bottom], +uibutton[ui-kind=action][ui-icon-align=top], +uibutton[ui-kind=action][ui-icon-align=bottom] { + -webkit-box-pack: center !important; + -webkit-box-align: center !important; +} +uibutton[ui-kind=action][ui-icon-align=top], +uibutton[ui-kind=action][ui-icon-align=bottom] { + -webkit-box-pack: center; + -webkit-box-align: center; +} +uibutton[ui-usage=icon] { + padding: 0px 5px !important; +} +/* End Icon Alignment Styles */ + +/* Edit uibutton Styles */ +uibutton[ui-implements=done], +uibutton[ui-implements=done].disabled:hover, +uibutton[ui-implements=done].disabled.touched { + border: solid 1px #2c344b; + border-color: #2c344b #2d54b9 #1a49b5 #2d54b9; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#7a9eec), + color-stop(0.25, #5785e5), + color-stop(0.5, #3470e0), + color-stop(0.5, #2461dd), + color-stop(0.75, #2465dd), + to(#2461de)); +} +uibutton[ui-implements=done]:hover, +uibutton[ui-implements=done].touched { + border-color: #484e59 #54617d #4c5c7a #54617d; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#7d88a5), + color-stop(0.25, #58698c), + color-stop(0.5, #3a4e78), + color-stop(0.5, #253c6a), + color-stop(0.75, #273f6d), + to(#273f6d)); +} +/* End Important Bordered UIButton Styles */ + +/* Delete uibutton Styles */ +uibutton[ui-implements=delete], uibutton[ui-implements=delete].disabled:hover, uibutton[ui-implements=delete].disabled.touched { + border: solid 1px #4b353a; + border-color: #4b353a #832936 #1a49b5 #832936; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#c66572), + color-stop(0.25, #b63849), + color-stop(0.5, #ac1a2e), + color-stop(0.5, #a40018), + color-stop(0.75, #a40018), + to(#7d1022)); +} +uibutton[ui-implements=delete]:hover, uibutton[ui-implements=done].touched { + border-color: #484e59 #54617d #4c5c7a #54617d; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#7d88a5), + color-stop(0.25, #58698c), + color-stop(0.5, #3a4e78), + color-stop(0.5, #253c6a), + color-stop(0.75, #273f6d), + to(#273f6d)); +} +uibutton[ui-implements=delete].disabled label { + cursor: auto; + opacity: 0.5; +} +/* End Warning Bordered UIButton Styles */ + +/* Back Bordered UIButton Styles */ +uibutton.disabled:hover, +uibutton.disabled.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#92a1bf), + color-stop(0.25, #798aad), + color-stop(0.5, #6276a0), + color-stop(0.5, #556a97), + color-stop(0.75, #566c98), + to(#546993)); +} +uibutton[ui-implements=back] { + padding: 0px 7px 0px 3px; + margin-left: 20px; + position: relative; + border-left-color: transparent; +} +uibutton[ui-implements=back] > label { + position: relative; + z-index: 1; +} +uibutton[ui-implements=back]:before, +uibutton[ui-implements=back].disabled:hover:before, +uibutton[ui-implements=back].disabled.touched:before { + content: ""; + display: block; + z-index: 0; + background-image: + -webkit-gradient(linear, left top, right bottom, + from(#92a1bf), + color-stop(0.3, #798aad), + color-stop(0.51, #6276a0), + color-stop(0.51, #556a97), + color-stop(0.75, #566c98), + to(#546993)); + border-left: solid 1px #484e59; + border-bottom: solid 1px #9aa5bb; + -webkit-border-top-left-radius: 5px; + -webkit-border-bottom-right-radius: 5px; + -webkit-border-bottom-left-radius: 4px; + height: 23.5px; + width: 23.5px; + display: inline-block; + -webkit-transform: rotate(45deg); + -webkit-mask-image: + -webkit-gradient(linear, left bottom, right top, + from(#000000), + color-stop(0.5,#000000), + color-stop(0.5, transparent), + to(transparent)); + position: absolute; + left: -9px; + top: 2.5px; + -webkit-background-clip: content; +} +uibutton[ui-implements=back]:hover:before, +uibutton[ui-implements=back].touched:before { + background-image: + -webkit-gradient(linear, left top, right bottom, + from(#7d88a5), + color-stop(0.3, #58698c), + color-stop(0.51, #3a4e78), + color-stop(0.51, #253c6a), + color-stop(0.75, #273f6d), + to(#273f6d)); +} + +/* End Back Bordered uibutton Styles */ + +/* Next Bordered UIButton Styles */ +uibutton[ui-implements=next]:last-of-type { + padding: 0px 3px 0px 7px; + margin-right: 0px; + right: 20px !important; + position: relative; + border-right-color: transparent; +} +uibutton[ui-implements=next] > label { + position: relative; + z-index: 1; +} +uibutton[ui-implements=next]:before, +uibutton[ui-implements=next].disabled:hover:before, +uibutton[ui-implements=next].disabled.touched:before { + content: ""; + display: block; + z-index: 0; + background-image: + -webkit-gradient(linear, left top, right bottom, + from(#92a1bf), + color-stop(0.3, #798aad), + color-stop(0.51, #6276a0), + color-stop(0.51, #556a97), + color-stop(0.75, #566c98), + to(#546993)); + border-right: solid 1px #9aa5bb; + border-top: solid 1px #484e59; + -webkit-border-top-left-radius: 5px; + -webkit-border-bottom-right-radius: 5px; + -webkit-border-top-right-radius: 4px; + height: 23.5px; + width: 23.5px; + height: 23.5px; + width: 23.5px; + display: inline-block; + -webkit-transform: rotate(45deg); + -webkit-mask-image: + -webkit-gradient(linear, right top, left bottom, + from(#000000), + color-stop(0.5,#000000), + color-stop(0.5, transparent), + to(transparent)); + position: absolute; + right: -9px; + top: 2.5px; + -webkit-background-clip: content; +} +uibutton[ui-implements=next]:hover:before, +uibutton[ui-implements=next].touched:before { + background-image: + -webkit-gradient(linear, left top, right bottom, + from(#7d88a5), + color-stop(0.3, #58698c), + color-stop(0.51, #3a4e78), + color-stop(0.51, #253c6a), + color-stop(0.75, #273f6d), + to(#273f6d)); +} +/* End Next Bordered uibutton Styles */ + +/* Segmented UIButton Styles */ +segmentedcontrol { + -webkit-box-orient: horizontal; + -webkit-box-pack:justify; + -webkit-box-sizing: border-box; + margin: 0px 10px; + display: -webkit-inline-box; + -webkit-box-flex: 1; +} +segmentedcontrol.stretch, +segmentedcontrol[ui-full-width=true] { + display: -webkit-box; +} +navbar > segmentedcontrol, +toolbar > segmentedcontrol { + margin: 0px 10px; +} +segmentedcontrol > uibutton { + display: -webkit-box; + -webkit-box-orient: vertical !important; + -webkit-box-align: center; + -webkit-box-flex: 1; + -webkit-box-pack:center; + border: none; + background: none; + -webkit-box-shadow: none; + box-shadow: none; + border: solid 1px #9a9a99; + border-left: none; + -webkit-border-radius: 0px; + border-radius: 0px; + text-align: center; + -webkit-box-align: center; + -webkit-box-pack: center; + -webkit-box-flex: 1; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#fbfbfb), + to(#bdbdbd)); + color: #6b6b6b; + font-size: 13px; + -webkit-box-sizing: border-box; + height: 30px; + cursor: pointer; + margin: 0px !important; + padding: 0px 10px; +} +segmentedcontrol > uibutton:hover, +segmentedcontrol > uibutton.touched, +segmentedcontrol > uibutton.selected, +segmentedcontrol > uibutton.selected:hover, +segmentedcontrol > uibutton.selected.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#2a55b1), + to(#6297f2)); + color: #fff; + border-color: #193a7f; +} +segmentedcontrol > uibutton.disabled:hover, +segmentedcontrol > uibutton.disabled.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#fbfbfb), + to(#bdbdbd)); + color: #6b6b6b; + border-color: #9a9a99; + cursor: auto; +} +segmentedcontrol > uibutton:first-of-type { + -webkit-border-top-left-radius: 8px; + -webkit-border-bottom-left-radius: 8px; + border-left: solid 1px #9a9a99; + margin-top: 0px; +} +segmentedcontrol > uibutton:last-of-type { + -webkit-border-top-right-radius: 8px; + -webkit-border-bottom-right-radius: 8px; + margin-right: 0; +} +navbar > segmentedcontrol > uibutton, +toolbar > segmentedcontrol > uibutton { + display: -webkit-box !important; +} +/* End Segmented UIButton Styles */ + +/* Segmented UIButton in Toolbar */ +navbar > segmentedcontrol > uibutton, +toolbar > segmentedcontrol > uibutton { + display: -webkit-inline-box; + -webkit-box-shadow: 0 1px 1px #9aa5bb, 0 -1px 1px #8e96a5; + border: solid 1px #54617d; + border-color: #484e59 #54617d #4c5c7a #54617d; + cursor: pointer; + margin: 0 !important; + padding: 0px 10px; + font-size: 12px; + line-height: 28px; + -webkit-box-sizing: border-box; + -webkit-box-flex: 1; + text-align: center; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#92a1bf), + color-stop(0.25, #798aad), + color-stop(0.5, #6276a0), + color-stop(0.5, #556a97), + color-stop(0.75, #566c98), + to(#546993)); + color: #fff; + -webkit-tap-highlight-color: transparent; + -webkit-user-select: none; +} +navbar > segmentedcontrol > uibutton:hover, +navbar > segmentedcontrol > uibutton.selected, +navbar > segmentedcontrol > uibutton.selected:hover, +navbar > segmentedcontrol > uibutton.selected.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#7d88a5), + color-stop(0.25, #58698c), + color-stop(0.5, #3a4e78), + color-stop(0.5, #253c6a), + color-stop(0.75, #273f6d), + to(#273f6d)) !important; + color: #fff; + border-color: #193a7f; +} +navbar > segmentedcontrol > uibutton.disabled:hover, +navbar > segmentedcontrol > uibutton.disabled.touched, +toolbar > segmentedcontrol > uibutton.disabled:hover, +toolbar > segmentedcontrol > uibutton.disabled.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#92a1bf), + color-stop(0.25, #798aad), + color-stop(0.5, #6276a0), + color-stop(0.5, #556a97), + color-stop(0.75, #566c98), + to(#546993)) !important; + color: #fff; + border-color: #484e59 #54617d #4c5c7a #54617d; +} +navbar segmentedcontrol > uibutton:first-of-type, +toolbar segmentedcontrol > uibutton:first-of-type { + -webkit-border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + border-left: solid 1px #424650; +} +navbar segmentedcontrol > uibutton:last-of-type, +toolbar segmentedcontrol > uibutton:last-of-type { + -webkit-border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; +} +segmentedcontrol > uibutton[ui-usage=icon] { + display: -webkit-box; + -webkit-box-pack: center; + -webkit-box-align: cetner; +} +segmentedcontrol > uibutton > icon { + display: -webkit-inline-box; + margin: 0; + height: 28px; + width: 28px; +} +segmentedcontrol > uibutton > label { + display: -webkit-inline-box; + position: relative; +} +segmentedcontrol > uibutton > icon + label { + position: relative; + top: -9px; +} +segmentedcontrol > uibutton:first-of-type > icon { + margin-bottom: 0px !important; +} +segmentedcontrol > uibutton:last-of-type > icon { + margin-bottom: 0px !important; +} +navbar > segmentedcontrol > uibutton:first-of-type > icon, +navbar > segmentedcontrol > uibutton:last-of-type > icon { + margin-bottom: -6px !important; +} +segmentedcontrol > uibutton[ui-icon-align=right] { + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; +} +segmentedcontrol > uibutton[ui-icon-align=right] icon, +segmentedcontrol > uibutton[ui-icon-align=right] label { + display: block; +} +segmentedcontrol > uibutton[ui-icon-align=right] label { + margin-bottom: -9px; +} +segmentedcontrol > uibutton[ui-icon-align=right] icon + label { + margin-top: 10px; +} +segmentedcontrol > uibutton[ui-icon-align=top] { + -webkit-box-orient: vertical !important; + -webkit-box-pack: center; +} +segmentedcontrol > uibutton[ui-icon-align=bottom] { + -webkit-box-orient: vertical !important; + -webkit-box-direction: reverse !important; + -webkit-box-pack: center; +} +segmentedcontrol > uibutton[ui-icon-align=top] > icon + label, +segmentedcontrol > uibutton[ui-icon-align=bottom] > icon + label{ + position: static !important; +} +segmentedcontrol > uibutton[ui-icon-align=top] > label, +segmentedcontrol > uibutton[ui-icon-align=top] > icon, +segmentedcontrol > uibutton[ui-icon-align=bottom] > label, +segmentedcontrol > uibutton[ui-icon-align=bottom] > icon { + display: block; +} + +navbar > segmentedcontrol > uibutton:first-of-type > icon + label, +navbar > segmentedcontrol > uibutton:last-of-type > icon + label { + position: relative; + top: -4px; +} +/* Rounded Rectangle UIButton Styles */ +uibutton[ui-kind="rounded-rectangle"] { + display: -webkit-box !important; + -webkit-box-sizing: border-box; + -webkit-box-orient: horizontal; + height: 46px; + border: solid 1px #a7abae; + -webkit-border-radius: 10px; + background: none; + background-color: #fff; + margin: 10px; + text-align: center; + font-size: 12px; + font-weight: bold; + color: #3c6094; + cursor: pointer; + padding: 0 8px; +} +uibutton[ui-kind="rounded-rectangle"]:hover, +uibutton[ui-kind="rounded-rectangle"].touched, +uibutton[ui-kind="rounded-rectangle"][ui-implements=attention]:hover, +uibutton[ui-kind="rounded-rectangle"][ui-implements=attention].touched { + color: #fff; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#2a99f1), + color-stop(0.5, #2886eb), + to(#2874e5)); +} +uibutton[ui-kind="rounded-rectangle"][ui-implements=attention], +uibutton[ui-implements=attention][ui-kind="rounded-rectangle"] { + color: #000; +} +uibutton[ui-kind="rounded-rectangle"][ui-implements=attention]:hover, +uibutton[ui-kind="rounded-rectangle"][ui-implements=attention].touched { + color: #fff; +} +uibutton[ui-kind="rounded-rectangle"].disabled span:last-of-type { + opacity: 0.5; +} +uibutton[ui-kind="rounded-rectangle"].disabled:hover, +uibutton[ui-kind="rounded-rectangle"].disabled.touched { + color: #3c6094; + background-image: none; + cursor: auto; +} +uibutton[ui-kind="rounded-rectangle"][ui-implements=attention].disabled:hover, +uibutton[ui-kind="rounded-rectangle"][ui-implements=attention].disabled.touched { + color: #000; + background-image: none; + cursor: auto; +} + +uibuttonn[ui-kind="rounded-rectangle"][ui-implements=attention]:hover, +uibuttonn[ui-kind="rounded-rectangle"][ui-implements=attention].touched, +uibuttonn[ui-implements=attention][ui-kind="rounded-rectangle"]:hover, +uibuttonn[ui-implements=attention][ui-kind="rounded-rectangle"].touched{ + border-color:a7abae !important; +} + +/* End Rounded Rectangle UIButton Styles */ + +/* Default White Action uibutton Styles */ +uibutton[ui-kind=action] { + border: solid 1px #64676a; + border-color: #64676a #717375 #717375 #717375; + -webkit-box-shadow: 0 1px 1px #fff; + display: -webkit-box; + -webkit-box-pack: justify; + -webkit-box-align: center; + -webkit-box-orient: horizontal; + -webkit-box-flex: 1; +} + +actionsheet > uibutton[ui-kind=action], +actionsheet > uibutton[ui-kind=action].disabled, +actionsheet > uibutton[ui-kind=action].disabled { + webkit-box-shadow: none; +} +uibutton[ui-kind=action], +uibutton[ui-kind=action].disabled:hover, +uibutton[ui-kind=action].disabled.touched { + margin: 20px 10px; + min-width: 110px; + cursor: pointer; + -webkit-box-sizing: border-box; + height: 52px; + -webkit-border-radius: 12px; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(234,234,234,0.7)), + color-stop(0.5, rgba(195,195,195,0.7)), + color-stop(0.5, rgba(166,166,166,0.7)), to(rgba(167,167,167,0.80))); + color: #000; + font: bold 16px/20px Helvetica, sans-serif; + text-decoration: none; + text-align: center; + text-shadow: 0 1px 1px #fff; + padding: 0px 11px; + -webkit-font-smoothing: antialiased; + -webkit-box-align: center; + -webkit-box-pack: center; +} +uibutton[ui-kind=action]:hover, +uibutton[ui-kind=action].touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(135,148,203,0.7)), + color-stop(0.5, rgba(34,56,159,0.7)), + color-stop(0.5, rgba(0,27,145,0.7)), + to(rgba(2,59,152,0.7))); + color: #fff; + text-shadow: 0 1px 1px #000; +} +uibutton[ui-kind=action] > label { + line-height: 23px; +} +uibutton[ui-kind=action].disabled, +uibutton[ui-usage=icon].disabled { + cursor: auto !important; +} +uibutton[ui-kind=action].disabled > label { + opacity: 0.5; + cursor: auto; +} + +uibutton[ui-kind=action][ui-icon-align=top], +uibutton[ui-kind=action][ui-icon-align=bottom] { + -webkit-box-orient: vertical !important; +} +/* End Default White Action uibutton Style */ + +/* Action Cancel uibutton */ +uibutton[ui-kind=action][ui-implements=cancel], +uibutton[ui-kind=action][ui-implements=cancel].disabled:hover, +uibutton[ui-kind=action][ui-implements=cancel].disabled.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(74,74,74,0.7)), + color-stop(0.5, rgba(20,20,20,0.7)), + color-stop(0.5, rgba(2,2,2,0.7)), + to(rgba(14,14,14,0.7))); + color: #fff; + text-shadow: 0 1px 1px #000; +} +uibutton[ui-kind=action][ui-implements=cancel]:hover, +uibutton[ui-kind=action][ui-implements=cancel].touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(135,148,203,0.7)), + color-stop(0.5, rgba(34,56,159,0.7)), + color-stop(0.5, rgba(0,27,145,0.7)), + to(rgba(2,59,152,0.7))); + color: #fff; + text-shadow: #000 0 1px 0; +} +/* End Action Cancel UIButton */ + +/* Action Delete UIButton */ +uibutton[ui-kind=action][ui-implements=delete], +uibutton[ui-kind=action][ui-implements=delete].disabled:hover, +uibutton[ui-kind=action][ui-implements=delete].disabled.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(255,124,151,0.7)), + color-stop(0.5, rgba(255,74,89,0.7)), + color-stop(0.5, rgba(255,0,4,0.7)), + to(rgba(255,62,27,0.7))); + color: #fff; + text-shadow: #000 0 1px 0; +} +uibutton[ui-kind=action][ui-implements=delete]:hover, +uibutton[ui-kind=action][ui-implements=delete].touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(135,148,203,0.7)), + color-stop(0.5, rgba(34,56,159,0.7)), + color-stop(0.5, rgba(0,27,145,0.7)), + to(rgba(2,59,152,0.7))); + color: #fff; +} +/* End Action Delete UIButton */ + +/* Action Green UIButton */ +uibutton[ui-kind=action].green, +uibutton[ui-kind=action].green.disabled:hover, +uibutton[ui-kind=action].green.disabled.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(79,156,74,0.7)), + color-stop(0.5, rgba(54,127,35,0.7)), + color-stop(0.5, rgba(0,113,0,0.7)), + to(rgba(0,150,0,0.7))); + color: #fff; + text-shadow: 0 1px 1px #000; +} +uibutton[ui-kind=action].green:hover, +uibutton[ui-kind=action].green.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(135,148,203,0.7)), + color-stop(0.5, rgba(34,56,159,0.7)), + color-stop(0.5, rgba(0,27,145,0.7)), + to(rgba(2,59,152,0.7))); + color: #fff; +} +/* End Action Green UIButton */ + +/* Gold Action UIButton */ +uibutton[ui-kind=action].gold, +uibutton[ui-kind=action].gold.disabled:hover, +uibutton[ui-kind=action].gold.disabled.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(255,217,0,0.7)), + color-stop(0.5, rgba(255,185,0,0.7)), + color-stop(0.5, rgba(255,138,0,0.7)), + to(rgba(255,165,0,0.7))); + color: #000; + text-shadow: 0 1px 0 #ccc; +} +uibutton[ui-kind=action].gold:hover, +uibutton[ui-kind=action].gold.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(135,148,203,0.7)), + color-stop(0.5, rgba(34,56,159,0.7)), + color-stop(0.5, rgba(0,27,145,0.7)), + to(rgba(2,59,152,0.7))); + color: #fff; + text-shadow: 0 1px 1px #000; +} +/* End Gold Action UIButton */ + +/* Action Important UIButton */ +uibutton[ui-kind=action][ui-implements=done], +uibutton[ui-kind=action][ui-implements=done].disabled:hover > span, +uibutton[ui-kind=action][ui-implements=done].disabled.touched > span { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(123,159,235,0.7)), + color-stop(0.5, rgba(54,111,226,0.7)), + color-stop(0.5, rgba(32,87,225,0.7)), + to(rgba(24,87,224,0.7))); + color: #fff; + text-shadow: 0 1px 1px #000; +} +uibutton[ui-kind=action][ui-implements=done]:hover, +uibutton[ui-kind=action][ui-implements=done].touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(135,148,203,0.7)), + color-stop(0.5, rgba(34,56,159,0.7)), + color-stop(0.5, rgba(0,27,145,0.7)), + to(rgba(2,59,152,0.7))); + color: #fff; +} +/* End Action Important UIButton */ + +/* Sgwt Custom Tint Styles */ +navbar.ui-custom-tint, +toolbar.ui-custom-tint { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(255,255,255,.5)), + color-stop(0.5,rgba(30,30,30,.5)), + color-stop(0.5, rgba(0,0,0,.5)), + to(rgba(0,0,0,.45))); + border-top: 1px solid #878788; + border-bottom: 1px solid #2c2c2c; +} +uibutton.ui-custom-tint, +uibutton.ui-custom-tint.disabled:hover, +uibutton.ui-custom-tint.disabled.touched, +uibutton[ui-implements=done].ui-custom-tint.disabled:hover, uibutton[ui-implements=done].ui-custom-tint.disabled.touched, +uibutton[ui-implements=delete].ui-custom-tint.disabled:hover, +uibutton[ui-implements=delete].ui-custom-tint.disabled.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(255,255,255,.5)), + color-stop(0.5,rgba(30,30,30,.5)), + color-stop(0.5, rgba(0,0,0,.5)), + to(rgba(0,0,0,.5))); + border: solid 1px #808080; + border-color: #6f6f6f #4d4d4d #676767 #616161; +} +uibutton.ui-custom-tint:hover, +uibutton.ui-custom-tint.touched, +uibutton[ui-implements=done].ui-custom-tint:hover, +uibutton[ui-implements=done].ui-custom-tint.touched, +uibutton[ui-implements=delete].ui-custom-tint:hover, +uibutton[ui-implements=delete].ui-custom-tint.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(0,0,0,.1)), + color-stop(0.5,rgba(0,0,0,.5)), + color-stop(0.5, rgba(0,0,0,.6)), + to(rgba(255,255,255,.2))); +} +uibutton[ui-implements=back].ui-custom-tint:before { + background-image: + -webkit-gradient(linear, left top, right bottom, + color-stop(0.05,rgba(255,255,255,.5)), + color-stop(0.5,rgba(30,30,30,.5)), + color-stop(0.5, rgba(0,0,0,.5)), + color-stop(0.95,rgba(0,0,0,.5))); +} +uibutton[ui-implements=back].ui-custom-tint:hover:before, +uibutton[ui-implements=back].ui-custom-tint.touched:before { + background-image: + -webkit-gradient(linear, left top, right bottom, + color-stop(0.05,rgba(0,0,0,.1)), + color-stop(0.5,rgba(0,0,0,.5)), + color-stop(0.5, rgba(0,0,0,.6)), + color-stop(0.95,rgba(255,255,255,.2))); +} + +uibutton[ui-implements=next].ui-custom-tint:before { + background-image: + -webkit-gradient(linear, left top, right bottom, + color-stop(0.05,rgba(255,255,255,.5)), + color-stop(0.5,rgba(30,30,30,.5)), + color-stop(0.5, rgba(0,0,0,.5)), + color-stop(0.95,rgba(0,0,0,.5))); +} +uibutton[ui-implements=next].ui-custom-tint:hover:before, +uibutton[ui-implements=next].ui-custom-tint.touched:before { + background-image: + -webkit-gradient(linear, left top, right bottom, + color-stop(0.05,rgba(0,0,0,.1)), + color-stop(0.5,rgba(0,0,0,.5)), + color-stop(0.5, rgba(0,0,0,.6)), + color-stop(0.95,rgba(255,255,255,.2))); +} +segmentedcontrol > uibutton.ui-custom-tint, +segmentedcontrol > uibutton.ui-custom-tint.disabled:hover, +segmentedcontrol > uibutton.ui-custom-tint.disabled.touched, + +navbar > segmentedcontrol > uibutton.ui-custom-tint.disabled:hover, +navbar > segmentedcontrol > uibutton.ui-custom-tint.disabled.touched, +toolbar > segmentedcontrol > uibutton.ui-custom-tint.disabled:hover, +toolbar > segmentedcontrol > uibutton.ui-custom-tint.disabled.touched, + +navbar > segmentedcontrol > uibutton.disabled.ui-custom-tint:hover, +navbar > segmentedcontrol > uibutton.disabled.ui-custom-tint.touched, +toolbar > segmentedcontrol > uibutton.disabled.ui-custom-tint:hover, +toolbar > segmentedcontrol > uibutton.disabled.ui-custom-tint.touched { + border: solid 1px #484E59; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(255,255,255,.5)), + color-stop(0.5,rgba(30,30,30,.5)), + color-stop(0.5, rgba(0,0,0,.5)), + to(rgba(0,0,0,.5))) !important; + color: #fff; +} +segmentedcontrol > uibutton.ui-custom-tint:hover, +segmentedcontrol > uibutton.ui-custom-tint.touched, +segmentedcontrol > uibutton.ui-custom-tint.selected, +segmentedcontrol > uibutton.ui-custom-tint.selected:hover, +segmentedcontrol > uibutton.ui-custom-tint.selected.touched { + border: solid 1px #484E59; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(0,0,0,.35)), + color-stop(0.5, rgba(0,0,0,.35)), + color-stop(0.5,rgba(50,50,50,.35)), + to(rgba(255,255,255,.35))) !important; + color: #fff; +} +uibutton[ui-kind=action].ui-custom-tint, +uibutton[ui-kind=action].ui-custom-tint.disabled:hover, +uibutton[ui-kind=action].ui-custom-tint.disabled.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(255,255,255,.5)), + color-stop(0.5,rgba(30,30,30,.5)), + color-stop(0.5, rgba(0,0,0,.5)), + to(rgba(0,0,0,.45))); + color: #fff; +text-shadow: 0 1px 1px #000; +} +uibutton[ui-kind=action].ui-custom-tint:hover, +uibutton[ui-kind=action].ui-custom-tint.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(0,0,0,.45)), + color-stop(0.5, rgba(0,0,0,.5)), + color-stop(0.5,rgba(30,30,30,.5)), + to(rgba(255,255,255,.5))); + color: #fff; + text-shadow: 0 1px 1px #000; +} +/* End Sgwt Custom Tint Styles */ + +*[ui-contains="action-uibuttons"] { + -webkit-box-orient: vertical; +} +*[ui-contains="action-buttons"] button[ui-kind=action], +*[ui-contains="action-buttons"] button[ui-kind=action].disabled:hover { + width: 94%; + margin: 20px auto; +margin: 20px auto; + -webkit-box-flex: 1 !important; +} +/* End UIButton Styles */ + +/* Navbar & Toolbar Styles */ +navbar, toolbar { + position: relative; + width: 100%; + display: -webkit-box; + -webkit-box-pack: justify; + -webkit-box-align: center; + -webkit-box-orient: horizontal; + -webkit-box-sizing: border-box; + height: 45px; + padding: 0px; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#b2bbca), + color-stop(0.25, #a7b0c3), + color-stop(0.5, #909cb3), + color-stop(0.5, #8593ac), + color-stop(0.75, #7c8ba5), + to(#73839f)); + border-top: 1px solid #cdd5df; + border-bottom: 1px solid #2d3642; +} +navbar { + -webkit-box-pack: center; +} +navbar h1 { + -webkit-box-flex: 0 !important; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + -webkit-box-flex: 1; + text-align: center; + margin: 0px auto; + font: bold 20px/32px Helvetica, Sans-serif; + letter-spacing: -1px; + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5); + color: #fff; +} +/* Navbar and toolbar alignment for uibuttons, etc. */ +*[ui-bar-align=left], +uibutton[ui-bar-align=left], +uibutton[ui-implements=back][ui-bar-align=left], +segmentedcontrol[ui-bar-align=left] { + position: absolute; + left: 0px; + top: 7px; + display: -webkit-box; + -webkit-box-align: center; + -webkit-box-orient: horizontal; + -webkit-box-sizing: border-box; +} +*[ui-bar-align=right], +stack[ui-bar-align=right], +h1[ui-bar-align=right], +uibutton[ui-bar-align=right], +uibutton[ui-implements=next][ui-bar-align=right], +segmentedcontrol[ui-bar-align=right] { + position: absolute; + right: 10px; + margin-right: 0px; + top: 6px; + display: -webkit-box; + -webkit-box-align: center; + -webkit-box-orient: horizontal; + -webkit-box-sizing: border-box; + -webkit-box-pack: end; +} +uibutton[ui-bar-align=right], +stack[ui-bar-align=right] > uibutton:last-of-type, +segmentedcontrol[ui-bar-align=right] { + margin-right: 0 !important; +} +uibutton[ui-bar-align=left], +navbar uibutton { + height: 30px; +} +toolbar[ui-placement=bottom] { + margin: 0; + position: absolute; + bottom: 0px; + left: 0; + right: 0; + border-bottom: none; + } + +/* Tableview Styles */ +tableview, tablecell { + display: block; +} +tableview > tablecell > celldetail + celldetail { + margin-top: 6px; +} +tableview > tablecell { + background-color: #fff; + -webkit-user-select: none; + -webkit-tap-highlight-color: transparent; + cursor: pointer; + padding: 8px; + border-left: 1px solid #d9d9d9; + border-right: 1px solid #d9d9d9; + border-bottom: 1px solid #d9d9d9; + -webkit-box-sizing: border-box; + min-height: 44px; + overflow: hidden; + position: relative;-webkit-margin-collapse: separate; + -webkit-box-sizing: border-box; + min-height: 44px; +} +tableview > tablecell:hover, tableview > tablecell.touched { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#4286f5), + to(#194fdb)); + color: #fff; +} +tableview.ui-no-hover > tablecell:hover, +tableview > tablecell.ui-no-hover:hover, +tableview > tablecell.ui-no-hover.touched, +tableview.ui-no-hover > tablecell.touched, +tableview.ui-no-hover > tablecell:hover > celltitle, +tableview.ui-no-hover > tablecell.touched > celltitle, +tableview > tablecell.ui-no-hover:hover > celltitle, +tableview[ui-tablecell-order=stacked].ui-no-hover > tablecell:hover >cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell.ui-no-hover:hover >cellsubtitle, +tableview[ui-tablecell-order=stacked].ui-no-hover > tablecell.touched >cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell.ui-no-hover.touched >cellsubtitle { + background-image: none !important; + color: #000 !important; + cursor: auto; +} +tableview > tablecell:hover > * { + color: #fff !important; +} +tableview > tablecell.ui-no-hover > *, tableview.ui-no-hover > tablecell > * { + color: #000 !important +} +view tableview > tablecell.ui-no-hover:hover > cellsubtitle, +view tableview.ui-no-hover > tablecell:hover > cellsubtitle { + color: #586B96 !important; +} +view tableview[ui-tablecell-order="stacked"] > tablecell.ui-no-hover:hover > cellsubtitle { + color: #666 !important; +} +tableview > tablecell:hover > span, tableview > tablecell.touched > span { + color: #fff; +} +tablecell[ui-implements=action] > celltitle:after { + content: "..." +} +tablecell[ui-implements=disclosure]:after { + content: "›"; + font: normal 28px/28px Verdana; + color: #808080; + display: block; + height: 48px; + float: right; + margin-top: -4px; + margin-bottom: -20px; + margin-left: -10px; +} +tablecell[ui-implements=disclosure]:hover:after { + color: #fff; +} +tablecell[ui-usage=icon][ui-implements=disclosure]:after, tablecell[ui-implements=disclosure][ui-usage=icon]:after { + margin-bottom: -20px; +} +tablecell[ui-usage=image][ui-implements=disclosure]:after, tablecell[ui-implements=disclosure][ui-usage=image]:after { + margin-top: 11px !important; + margin-bottom: -20px; +} +tablecell[ui-implements=detail-disclosure]:after { + content: "›"; + font: normal 26px/14px Verdana; + background-color: #6292e6; + background-image: + -webkit-gradient(linear, left top, left bottom, + color-stop(0, rgba(0,0,0,.05)), + color-stop(.5, rgba(0,0,0,.05)), + color-stop(.5, rgba(0,0,0,.2)), + color-stop(1, rgba(0,0,0,.2))); + color: #fff; + display: block; + padding: 0 6px 13px 4px; + height: 24px; + width: 24px; + -webkit-border-radius: 14px; + border-radius: 14px; + border: solid 3px #fff; + -webkit-box-shadow: 0 1px 3px #666; + float: right; + margin-top: -1px; + margin-left: -10px; + -webkit-box-sizing: border-box; + position: absolute !important; + top: 10px !important; + right: 8px; +} +tablecell[ui-usage=icon][ui-implements=detail-disclosure]:after, +tablecell[ui-usage=icon][ui-implements=add]:after, +tablecell[ui-implements=detail-disclosure][ui-usage=icon]:after, +tablecell[ui-implements=add][ui-usage=icon]:after { + margin-top: 6px; + margin-bottom: -16px; + margin-left: -10px; +} +tablecell[ui-usage=icon][ui-implements=add]:after { + margin-top: -25px; +} +tablecell[ui-usage=image][ui-implements=disclosure]:after, +tablecell[ui-implements=disclosure][ui-usage=image][:after, +tablecell[ui-usage=image][ui-implements=detail-disclosure]:after, +tablecell[ui-usage=image][ui-implements=add]:after, +tablecell[ui-implements=detail-disclosure][ui-usage=image]:after, +tablecell[ui-implements=add][ui-usage=image]:after { + + margin-bottom: -20px; +} +tablecell[ui-implements=detail-disclosure].green:after { + background-color: #78c01b; +} +tablecell[ui-implements=add]:after { + content: "+"; + font: normal 19px/14px Verdana; + font-weight: bold; + background-color: #6292e6; + background-image: + -webkit-gradient(linear, left top, left bottom, + color-stop(0, rgba(0,0,0,.05)), + color-stop(.5, rgba(0,0,0,.05)), + color-stop(.5, rgba(0,0,0,.2)), + color-stop(1, rgba(0,0,0,.2))); + color: #fff; + display: block; + padding: 0 6px 13px 1px; + height: 24px; + width: 24px; + -webkit-border-radius: 14px; + border-radius: 14px; + border: solid 3px #fff; + -webkit-box-shadow: 0 1px 3px #666; + float: right; + margin-left: -10px; + -webkit-box-sizing: border-box; +} +tablecell[ui-implements=add].green:after { + background-color: #78c01b; +} +tableview > tablecell > celltitle:only-child { + line-height: 24px; +} +/* Default celltitle and cellsubtitle styles */ +tablecell > celltitle { + font-size: 20px; + font-weight: bold; + overflow: hidden; + width: 80%; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + margin-top: 2px; +} +tablecell > celltitle:not(celltitle + subtitle) { + width: 80%; +} +tablecell > cellsubtitle { + color: #586b96; + position: absolute; + right: 10px; + margin-top: 4px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; +} +tablecell > cellsubtitle { + width: 54%; + text-align: right; + margin-right: 0px; + float: right; +} +/* End default celltitle and cellsubtitle styles */ + +tablecell[ui-implements=disclosure] > celltitle:only-child, +tablecell[ui-implements=detail-disclosure] > celltitle:only-child, +tablecell[ui-implements=add] > celltitle:only-child { + width: 90%; +} +tablecell[ui-implements=disclosure] > celltitle, +tablecell[ui-implements=detail-disclosure] > celltitle, +tablecell[ui-implements=add] > celltitle { + width: 45%; +} +tablecell[ui-usage=icon] > celltitle { + width: 70%; +} +tablecell[ui-usage=icon] > img, tablecell[ui-usage=image] > img { + display: inline-block; + margin-right: 6px; + -webkit-transition: -webkit-transform .25s ease-in-out; +} +tableview > tablecell[ui-usage=image] { + padding: 0 6px 0 0; +} +tablecell[ui-usage=icon] > img { + margin-bottom: -10px; +} +tablecell[ui-usage=image] > img { + float: left !important; + height: 55px; + width: 55px; +} +tableview > tablecell[ui-usage=icon] > celltitle, +tableview[ui-tablecell-order=stacked][ui-usage=icon] > celltitle, +tableview[ui-usage=icon][ui-tablecell-order=stacked] > celltitle { + position: relative; + top: 2px; + width: 70% !important; + display: inline-block !important; +} +tableview > tablecell[ui-usage=icon] > cellsubtitle, +tableview[ui-tablecell-order=stacked][ui-usage=icon] > img + cellsubtitle, +tableview[ui-usage=icon][ui-tablecell-order=stacked] > img + cellsubtitle { + position: relative; + top: 2px; + width: 70% !important; + display: inline-block !important; + margin-left: 40px !important; +} +tablecell[ui-usage=image] > img + celltitle { + position: relative; + top: 14px; + width: 70%; +} + +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > celltitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > cellsubtitle, { + width: 75%; +} +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=icon] > img + celltitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=icon] > img ~ cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > img + celltitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > img ~ cellsubtitle { + width: 63% !important; +} +tablecell[ui-implements=disclosure] > cellsubtitle, +tablecell[ui-implements=detail-disclosure] > cellsubtitle, +tablecell[ui-implements=add] > cellsubtitle { + width: 46%; + margin-right: 26px; +} +tableview[ui-tablecell-order=centered] > tablecell { + position: relative; +} +tableview[ui-tablecell-order=centered] > tablecell > celltitle, +tableview[ui-tablecell-order=centered][ui-kind=grouped] > tablecell > celltitle, +tableview[ui-kind=grouped][ui-tablecell-order=centered] > tablecell > celltitle { + color: #586B96; + text-align: right; + font-size: 14px; + width: 30%; + position: absolute; + right: 65%; + padding-right: 2px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +tableview[ui-tablecell-order=centered] > tablecell > cellsubtitle { + color: #000; + text-align: left; + font-size: 16px; + font-weight: bold; + text-align: left; + width: 60%; + position: absolute; + left: 35%; + padding-left: 2px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + float: none; + text-align: left; +} +tableview[ui-tablecell-order=stacked] > tablecell > cellsubtitle { + float: none; + position: relative; + margin-left: 0px; +} +tableview[ui-tablecell-order=stacked] > tablecell > span, +tableview[ui-tablecell-order=stacked]> tablecell > celltitle, +tableview[ui-tablecell-order=stacked] > tablecell > cellsubtitle { + display: block; + position: static; + text-align: left; +} +tableview[ui-tablecell-order=stacked] > tablecell > celltitle { + width: 65% +} +tableview[ui-tablecell-order=stacked] > tablecell > cellsubtitle { + color: #666; + width: 90%; +} +body.portrait tableview[ui-tablecell-order=stacked] > tablecell > cellsubtitle { + width: 85% !important; +} +body.portrait tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=icon] > cellsubtitle, +body.portrait tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > cellsubtitle { + width: 60% !important; +} +body.portrait tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=icon] > cellsubtitle { + width: 70% !important; +} +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=disclosure]:after, +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=detail-disclosure]:after, +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=add]:after { + position: absolute; + right: 10px; +} +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=disclosure]:after { + top: 10px; +} +tableview[ui-kind=grouped][ui-tablecell-order=stacked] > tablecell[ui-subtitle-alignment=right][ui-usage=image][ui-implements=detail-disclosure]:after, +tableview[ui-kind=grouped][ui-tablecell-order=stacked] > tablecell[ui-subtitle-alignment=right][ui-implements=detail-disclosure][ui-usage=image]:after { + top: 10px !important; + position: absolute; + right: 10px; +} +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=disclosure] > celldetail, +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=detail-disclosure] > celldetail, +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=add] > celldetail { + padding-right: 30px; +} +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > celldetail { + margin-left: 68px; +} +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > celltitle { + margin-top: 6px; + margin-left: 66px; + +} +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > cellsubtitle { + display: inline-block; + margin-top: 0; + margin-left: 6px; +} +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > celldetail { + display: block; + margin-top: 0; +} +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image]:after { + float: none; + position: absolute !important; + right: 10px; + top: 10px !important; +} +tablecell[ui-usage=icon][ui-implements=disclosure] > img + celltitle + cellcounter + cellsubtitle { + width: 60%; +} +body.portrait tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > celltitle, +body.portrait tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > cellsubtitle { + width: 20%; +} +body.portrait tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > celltitle, body.portrait tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > cellsubtitle { + width: 65% !important; +} +tableview[ui-tablecell-order=stacked] > tablecell[ui-subtitle-alignment=right][ui-usage=icon][ui-implements=disclosure] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-subtitle-alignment=right][ui-usage=icon][ui-implements=detail-disclosure] > cellsubtitle, tableview[ui-tablecell-order=stacked] > tablecell[ui-subtitle-alignment=right][ui-usage=icon][ui-implements=add] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-subtitle-alignment=right][ui-implements=disclosure][ui-usage=icon] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-subtitle-alignment=right][ui-implements=detail-disclosure][ui-usage=icon] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-subtitle-alignment=right][ui-implements=add][ui-usage=icon] > cellsubtitle, + +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=icon][ui-subtitle-alignment=right][ui-implements=disclosure] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=icon][ui-subtitle-alignment=right][ui-implements=detail-disclosure] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=icon][ui-subtitle-alignment=right][ui-implements=add] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=disclosure][ui-subtitle-alignment=right][ui-usage=icon] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=detail-disclosure][ui-subtitle-alignment=right][ui-usage=icon] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=add][ui-subtitle-alignment=right][ui-usage=icon] > cellsubtitle, + +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=icon][ui-implements=disclosure][ui-subtitle-alignment=right] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=icon][ui-implements=detail-disclosure][ui-subtitle-alignment=right] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=icon][ui-implements=add][ui-subtitle-alignment=right] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=disclosure][ui-usage=icon][ui-subtitle-alignment=right] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=detail-disclosure][ui-usage=icon][ui-subtitle-alignment=right] > cellsubtitle, +tableview[ui-tablecell-order=stacked] > tablecell[ui-implements=add][ui-usage=icon][ui-subtitle-alignment=right] > cellsubtitle { + width: 68% !important; +} +tablecell > celldetail { + font-size: 12px; + color: #4c5f70; + line-height: 16px; +} + +tableview > tablecell.ui-no-hover:hover > celldetail, +tableview > tablecell.ui-no-hover.touched > celldetail { + font-size: 12px; + color: #4c5f70 !important; + line-height: 16px; +} + +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=icon] > span:first-of-type { + float: left; + width: auto; + margin-top: 6px; +} + +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=icon] > .subtitle { + width: 75% !important; +} +tableview > tablecell[ui-implements=celltitle-with-button] > uibutton { + display: -webkit-inline-box; + float: right; +} +div[ui-kind=grouped], p[ui-kind=grouped], tableview[ui-kind=grouped] { + -webkit-margin-bottom-collapse: separate; + -webkit-margin-top-collapse: separate; + -webkit-user-select: none; + margin: 17px 9px; + overflow: hidden; +} +tableview[ui-kind=grouped] > tablecell { + cursor: pointer; + padding: 8px; + border-left: 1px solid #d9d9d9; + border-right: 1px solid #d9d9d9; + border-bottom: 1px solid #d9d9d9; + background-color: #fff; + font-weight: bold; + -webkit-tap-highlight-color: transparent; +} +div[ui-kind=grouped], p[ui-kind=grouped], tableview[ui-kind=grouped] > tablecell:first-of-type { + border-top: 1px solid #acacac; + -webkit-border-top-right-radius: 10px; + -webkit-border-top-left-radius: 10px; +} +tableview[ui-kind=grouped] > tablecell:last-of-type { + -webkit-border-bottom-left-radius: 10px; + -webkit-border-bottom-right-radius: 10px; +} +div[ui-kind=grouped], p[ui-kind=grouped] { + padding: 8px 10px; + background-color: #fff; + border-top: 1px solid #acacac; + -webkit-border-radius: 10px; + border-radius: 10px; +} +tableview[ui-kind=grouped] > tablecell > celltitle { + font-size: 17px; +} +tableview > tablecell > button > .content > img { + display: none; +} + +celldatetime { + color: #2671d8; + float: right; + margin-right: 34px; + margin-top: -20px; + font-size: 14px; + text-align: right; + -webkit-transform: translate3d(0,0,0); +} +tableview > tablecell > cellcounter { + background-color: #8999b4; + -webkit-border-radius: 10px; + border-radius: 10px; + display: inline-block !important; + float: right; + margin-right: 32px; + margin-top: 8px; + margin-top: 4px; + margin-bottom: -20px; + font-size: 14px; + color: #fff; + padding: 0 8px; + line-height: 20px; +} +tableview > tablecell > uibutton { + display: inline-box !important; +} + +deletedisclosure { + -webkit-transition: -webkit-transform .25s ease-in-out; + -webkit-transform: translate3d(0px, 0, 0); + -webkit-box-sizing: border-box; + padding: 2px 5px 13px 1px; + height: 24px; + width: 24px; + border: solid 2px #ddd; + -webkit-border-radius: 14px; + border-radius: 14px; + position: absolute; + top: 10px; + left: -30px; +} + +deletedisclosure > span { + display: none; +} +deletedisclosure.checked { + font: bold 26px/14px Verdana; + background-color: #c66572; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#c66572), + color-stop(0.25, #b63849), + color-stop(0.5, #ac1a2e), + color-stop(0.5, #a40018), + color-stop(0.75, #a40018), + to(#7d1022)); + color: #fff; + font-size: 14px; + font-weight: bold; + text-align: center; + border: solid 3px #fff; + -webkit-box-shadow: 0 1px 3px #666; +} +deletedisclosure.checked > span { + display: inline; + padding-left: 0px; +} +tableview.ui-show-delete-disclosures deletedisclosure { + display: block; + -webkit-transform: translate3d(40px, 0, 0); +} +tableview > tablecell > celltitle, tableview > tablecell > cellsubtitle, tableview > tablecell > celldetail { + -webkit-transition-property: -webkit-transform, width; + -webkit-transition-duration: .25s; + -webkit-transition-timing-function: ease-in-out; +} +tableview.ui-show-delete-disclosures celltitle { + -webkit-transform: translate3d(40px,0,0); +} +tableview[ui-tablecell-order=centered].ui-show-delete-disclosures celltitle { + -webkit-transform: none; + width: 35%; +} +tableview.ui-show-delete-disclosures > tablecell:hover, tableview.ui-show-move-indicator > tablecell:hover { + background: #fff !important; +} +tableview.ui-show-delete-disclosures > tablecell:hover celltitle, tableview.ui-show-move-indicator > tablecell:hover celltitle { + color: #000 !important; +} +tableview.ui-show-delete-disclosures tablecell:after, tableview.ui-show-delete-disclosures > tablecell > cellcounter { + display: none !important; +} +tableview.ui-show-delete-disclosures > tablecell:hover > cellsubtitle, tableview.ui-show-move-indicator > tablecell[ui-draggable]:hover > cellsubtitle { + color: #586b96 !important; +} +tableview[ui-tablecell-order=centered].ui-show-delete-disclosures > tablecell:hover > celltitle, tableview[ui-tablecell-order=centered].ui-show-move-indicator > tablecell[ui-draggable]:hover > celltitle { + color: #586B96 !important; +} +tableview.ui-show-delete-disclosures > tablecell:hover > cellsubtitle, tableview.ui-show-move-indicator > tablecell:hover > cellsubtitle, tableview[ui-tablecell-order=centered].ui-show-move-indicator > tablecell[ui-draggable]:hover > cellsubtitle { + color: #000 !important; +} +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell:hover > cellsubtitle, +tableview[ui-tablecell-order=stacked].ui-show-move-indicator > tablecell:hover > cellsubtitle { + color: #666 !important; +} +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell:hover > celldetail, +tableview[ui-tablecell-order=stacked].ui-show-move-indicator > tablecell:hover > celldetail { + color: #4c5f70 !important; +} +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell:hover > celldatetime, +tableview[ui-tablecell-order=stacked].ui-show-move-indicator > tablecell:hover > .celldatetime { + color: #2671d8 !important; +} +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell > cellsubtitle, +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell > celldetail { + -webkit-transform: translate3d(40px,0,0); +} +tableview.ui-show-delete-disclosures > tablecell[ui-usage=icon] span:nth-child(2), +tableview.ui-show-delete-disclosures > tablecell[ui-usage=image] span:nth-child(2) { + -webkit-transform: translate3d(40px,0,0); +} + +/* Adjust widths for delete-disclosure */ +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell[ui-implements=disclosure] > celltitle, +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell[imlements=detail-disclosure] > celltitle, +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell[ui-implements=add] > celltitle { + width: 80%; +} +tableview.ui-show-delete-disclosures > tablecell.subtitle > celltitle { + width: 30%; +} +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell[ui-usage=icon] > celltitle { + width: 60%; +} +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell[ui-usage=icon] > celltitle { + width: 72%; +} +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell[ui-usage=icon] > celltitle { + width: 65% !important; +} +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell[ui-usage=image] > span + celltitle { + width: 60%; +} +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell[ui-implements=disclosure] > cellsubtitle, +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell[ui-implements=detail-disclosure] > cellsubtitle, +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell[ui-implements=add] > cellsubtitle { + width: 36%; +} +tableview[ui-tablecell-order=centered].ui-show-delete-disclosures > tablecell > celltitle { + width: 22%; +} +tableview[ui-tablecell-order=centered].ui-show-delete-disclosures > tablecell > cellsubtitle { + width: 60%; +} +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell > celltitle { + width: 40% +} +tableview[ui-tablecell-order=stacked].ui-show-delete-disclosures > tablecell > cellsubtitle { + width: 80%; +} +/* Styles for Move Indicator */ +.ui-move-indicator { + height: 16px; + width: 19px; + background: transparent url("../icons/move-indicator.svg") no-repeat; + -webkit-transition: -webkit-transform .25s ease-in-out; + -webkit-transform: translate3d(30px,0,0); + position: absolute; + top: 12px; + right: 10px; +} +tableview[ui-tablecell-order=stacked] > tablecell .ui-move-indicator, +tableview[ui-tablecell-order=stacked].ui-show-move-indicator > tablecell .ui-move-indicator { + top: 20px; +} +.ui-show-move-indicator > tablecell .ui-move-indicator { + display: block; + -webkit-transform: translate3d(-10px,0,0); +} +.ui-show-move-indicator > tablecell:after, tableview.ui-show-move-indicator > tablecell > cellcounter { + display: none !important; +} +tableview.ui-show-move-indicator > tablecell > cellsubtitle { + -webkit-transition: transform, width .25s ease-in-out; + -webkit-transform: translate3d(-40px,0,0); + width: 45%; +} +tableview[ui-tablecell-order=stacked].ui-show-move-indicator > tablecell > cellsubtitle { + width: 85%; + -webkit-transform: translate3d(0px,0,0); +} +tableview[ui-tablecell-order=stacked].ui-show-move-indicator > tablecell > celldatetime { + -webkit-transition: transform .25s ease-in-out; + -webkit-transform: translate3d(-10px,0,0); +} +/* End Styles for Move Indicator */ + +/* Table Headers and Footers */ +tableheader { + padding: 6px 10px; + text-align: center; + font-size: 16px; + color: #666; + text-shadow: 0px 1px 1px #fff; +} +tablefooter { + padding: 6px 10px; + font-size: 14px; + color: #777; + text-align: center; + text-shadow: 0px 1px 1px #fff; +} +/* End Tableview Styles */ + + +/* Modal Popup Styles */ +popup { + display: block; + width: 320px; + border: solid 1px #72767b; + -webkit-box-shadow: 0px 4px 6px #666, 0 0 50px rgba(255,255,255,1); + box-shadow: 0px 4px 6px #666, 0 0 50px rgba(255,255,255,1); + -webkit-border-radius: 10px; + border-radius: 10px; + padding: 0px; + opacity: 1; + -webkit-transform: scale(1); + -webkit-transition: all 0.25s ease-in-out; + position: absolute; + z-index: 1001; + margin-left: auto; + margin-right: auto; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(0,15,70,0.5)), + to(rgba(0,0,70,0.5))); +} +@media only screen and (max-device-width : 320px) and (orientation : portrait) { + popup { + width: 300px; + } +} +popup[ui-visible-state=hidden] { + opacity: 0; + -webkit-transform: scale(0); + top: 50%; + left: 50%; + margin: 0px auto; +} +popup > panel { + display: block; + border: solid 2px #e6e7ed; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + padding: 10px; + background-image: + -webkit-gradient(radial, 50% -1180, 150, 50% -280, 1400, + color-stop(0, rgba(143,150,171, 1)), + color-stop(0.48, rgba(143,150,171, 1)), + color-stop(0.499, rgba(75,88,120, .6)), + color-stop(0.5, rgba(75,88,120,0))); + color: #fff; + text-shadow: 0px -1px 1px #000; + font: normal 16px/22px Helvetica, Arial, Sans-serif; +} +popup > panel > toolbar[ui-placement=top] { + display: block; + background: none; + -webkit-border-top-left-radius: 10px; + -webkit-border-top-right-radius: 10px; + -moz-border-radius-topleft: 10px; + -moz-border-radius-topright: 10px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border: none; + color: #fff; + text-shadow: 0px -2px 1px #000; +} +popup toolbar > h1 { + letter-spacing: 1px; + font: bold 20px Helvetica, Sans-serif; + text-align: center; + margin: 0px; +} +popup > panel > p, popup > panel > message { + margin-top: 0; +} +popup > panel > uibutton { + + text-align: center; + display: -webkit-box; + -webkit-box-align: center; + -webkit-box-pack: center; +} +popup > panel > toolbar[ui-placement=bottom] { + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-pack: center; + -webkit-box-align: center; + -webkit-box-sizing: border-box; + background-image: none; + border: none; + height: auto; + position: relative; +} +popup > panel > toolbar[ui-placement=bottom] > uibutton { + -webkit-box-flex: 1; + display: -webkit-box; + width: 45%; + text-align: center; + -webkit-box-shadow: none; + margin: 10px 5px; + height: 42px; + font-size: 18px; + line-height: 32px; + -webkit-border-radius: 8px;padding: 4px 10px; +} +popup toolbar[ui-placement=bottom] > uibutton[ui-kind=action][ui-implements=cancel] { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#828ba3), + color-stop(0.5, #4c5a7c), + color-stop(0.5, #27375f), + to(#2e3d64)); + color: #fff; + font: bold 16px/20px Helvetica, sans-serif; + text-align: center; + text-shadow: 0 1px 1px #000; + -webkit-font-smoothing: antialiased; + padding: 9px; +} +popup toolbar[ui-placement=bottom] > uibutton[ui-kind=action][ui-implements=continue] { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#b0b6c4), + color-stop(0.5, #7a839b), + color-stop(0.5, #515d7c), + to(#636e8a)); + color: #fff; + font: bold 16px/20px Helvetica, sans-serif; + text-align: center; + text-shadow: 0 1px 1px #000; + -webkit-font-smoothing: antialiased; + padding: 9px; +} +popup toolbar[ui-placement=bottom] > uibutton[ui-kind=action]:hover, popup toolbar[ui-placement=bottom] > uibutton[ui-kind=action].hover { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#70747f), + color-stop(0.5, #424857), + color-stop(0.5, #171e30), + to(#222839)); + text-shadow: black 0px 1px 0px; +} +screencover { + width: 100%; + height: 100%; + display: block; + background-color: rgba(0,0,0,0.5); + position: absolute; + z-index: 1000; + top: 0px; + left: 0px; +} +screencover[ui-visible-state=hidden] { + display: none; +} +/* End Modal Popups */ + +/* Styles for Selection Lists. */ +tableview[ui-implements=selection-list] > tablecell > celltitle { + width: auto; +} +tableview[ui-implements=selection-list] tablecell > checkmark { + float: right; + -webkit-transition: all 0.125s ease-in-out; + opacity: 0; +} +tableview[ui-implements=selection-list] tablecell.selected > checkmark { + opacity: 1; + color: #496691; +} +tableview[ui-implements=selection-list] tablecell > checkmark, tableview[ui-implements=selection-list] tablecell.selected:hover > checkmark { + color: #fff; +} + +/* switchcontrol Styles */ +switchcontrol { + position: absolute; + right: 10px; + top: 7px; + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-pack:justify; + -webkit-box-sizing: border-box; + -webkit-tap-highlight-color: transparent; + width: 94px; + overflow: hidden; + -webkit-border-radius: 6px; + text-align: center; + line-height: 28px; + cursor: pointer; + -webkit-user-select: none; +} +switchcontrol > thumb { + display: block; + -webkit-border-radius: 7px; + position: relative; + z-index: 3; + border: solid 1px #919191; + -webkit-transition: all 0.125s ease-in-out; + -webkit-transform: translateX(0px); + -webkit-transform: translate3d(0px,0%,0%); +} +switchcontrol > thumb:before { + content: ""; + display: block; + -webkit-box-sizing: border-box; + height: 25px; + width: 38px; + border-top: solid 1px #efefef; + -webkit-border-radius: 6px; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#cecece), + to(#fbfbfb)); + border-top: solid 1px #efefef; + position:relative; +} +switchcontrol > label[ui-implements=on] { + display: block; + color: #fff; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#295ab2), + to(#76adfc)); + width: 54px; + padding-right: 4px; + border: solid 1px #093889; + -webkit-border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + margin-right: -6px; + height: 25px; + -webkit-transition: all 0.125s ease-in-out; + position: relative; + -webkit-transform: translateX(0px); + -webkit-transform: translate3d(0px,0%,0%); +} +switchcontrol > label[ui-implements=off] { + display: block; + color: #666; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#b5b5b5), + color-stop(0.50, #fff)); + width: 54px; + padding-left: 4px; + border: solid 1px #a1a1a1; + -webkit-border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + margin-left: -6px; + height: 25px; + -webkit-transition: all 0.125s ease-in-out; + position: relative; + -webkit-transform: translateX(-54px); + -webkit-transform: translate3d(-54px,0%,0%); +} +switchcontrol.off > thumb { + -webkit-transform: translateX(-54px); + -webkit-transform: translate3d(-54px,0%,0%); +} +switchcontrol.on > thumb { + -webkit-transform: translateX(0px); + -webkit-transform: translate3d(0px,0%,0%); +} +switchcontrol.off > label[ui-implements=on] { + -webkit-transform: translateX(-60px); + -webkit-transform: translate3d(-60px,0%,0%); +} +switchcontrol.on > label[ui-implements=on] { + -webkit-transform: translateX(0px); + -webkit-transform: translate3d(0px,0%,0%); +} +switchcontrol.off > label[ui-implements=off] { + -webkit-transform: translateX(-54px); + -webkit-transform: translate3d(-54px,0%,0%); +} +switchcontrol.on > label[ui-implements=off] { + -webkit-transform: translateX(6px); + -webkit-transform: translate3d(6px,0%,0%); +} +/* For Very Important Changes, use the this class */ +switchcontrol[ui-implements=attention] > label[ui-implements=on] { + border: solid 1px #d87100; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#e75f00), + color-stop(.5, #ff9c12)); +} +switchcontrol.disabled { + display: none; +} +/* End switchcontrol */ +/* Styles for actionsheet */ +actionsheet, actionsheet[ui-action-sheet-color=blue] { + -webkit-user-select: none; + width: 100%; + -webkit-box-sizing: border-box; + padding: 30px 0 0px 0; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#000), + color-stop(0.5, #000), + color-stop(0.5, rgba(255,255,255,.6)), + to(rgba(255,255,255,.6))), + -webkit-gradient(linear, left top, left bottom, + from(rgba(255,255,255,.5)), + color-stop(0.9, rgba(255,255,255,.15)), + to(rgba(255,255,255,.015))), + -webkit-gradient(linear, left top, left bottom, + from(rgba(93,102,118,0.85)), + to(rgba(75,81,95,0.85))); + -webkit-background-size: 100% 2px, 100% 22px, 100% 100%; + background-repeat: repeat-x, repeat-x, repeat-x; + background-position: top left, top left, top left; + position: absolute; + bottom: 0px; + z-index: 1000; + -webkit-transition: all 0.5s ease-in-out; + -webkit-transform: translate3d(0,0,0); + opacity: 1; +} +actionsheet[ui-action-sheet-color=black] { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#000), + color-stop(0.5, #000), + color-stop(0.5, rgba(255,255,255,.6)), + to(rgba(255,255,255,.6))), + -webkit-gradient(linear, left top, left bottom, + from(rgba(255,255,255,.5)), + color-stop(0.9, rgba(255,255,255,.15)), + to(rgba(255,255,255,.015))), + -webkit-gradient(linear, left top, left bottom, + from(rgba(0,0,0,0.45)), + to(rgba(0,0,0,0.65))) !important; +} +actionsheet.hidden { + -webkit-transform: translate3d(0,100%,0); + opacity: 0; +} +actionsheet > scrollpanel { + padding: 0 0 20px 0; +} +actionsheet p { + font-size: 12px; + color: #fff; + text-shadow: 0 -1px 1px #000; + text-align: center; + margin-bottom: 12px; +} +screencover { + width: 100%; + height: 100%; + display: block; + background-color: rgba(0,0,0,0.5); + position: absolute; + z-index: 1000; + top: 0; + right: 0; + bottom:0; + left: 0; +} +screencover.hidden { + display: none; +} +/* End Action Sheet Styles */ + +/* Styles for Slider */ +slider { + display: inline-block; + -webkit-box-sizing: border-box; + -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.25); + height: 9px; + padding: 1px; + -webkit-border-radius: 4px; + background-image: + -webkit-gradient(linear, left top ,left bottom, + from(#0a3a86), + color-stop(.5, #4c8de7), + color-stop(.95, #6babf5), + to(#0a3a86)), + -webkit-gradient(linear, left top ,left bottom, + from(#bbbbbb), + color-stop(.5, #f0f0f0), + color-stop(.5, #fff)); + background-repeat: no-repeat, repeat-x; + -webkit-background-size: 0px 9px, 100% 9px; +} +slider > thumb { + display: block; + -webkit-box-size: border-box; + position:relative; + -webkit-box-shadow: 1px 1px 2px #666; + height:24px; + width:25px; + left: 0px; + top: -10px; + -webkit-border-radius: 12px; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#d1d1d1), + to(#fdfdfd)); + cursor: move; + -webkit-tap-highlight-color: transparent; + overflow: hidden; +} +slider > thumb:after { + content: ""; + display: block; + width 19px; + height: 19px; + margin: 3px; + border-radius: 10px; + -webkit-box-shadow: 0 -2px 3px #fff; +} +slider.media-player { + background-image: + -webkit-gradient(linear, left top ,left bottom, + from(#c9d3e7), + color-stop(.5, #75a9f5), + color-stop(.5, #2d6fc6), + to(#3195e7)), + -webkit-gradient(linear, left top, left bottom, + from(#f0f0f0), + color-stop(.2, #9a9a9a), + color-stop(.3, #cbcbcb), + color-stop(.4, #f0f0f0), + to(#f0f0f0)); +} +slider.media-player > thumb { + background-image: none; + border: solid 1px #cbcbcb; + margin-top: 2px; + height: 20px; + width: 21px; +} +slider.media-player > thumb:after{ + margin: 0; + height: 100%; + width: 100%; + background-image: + -webkit-gradient(radial, right 130%, 0, right bottom, 36, + from(rgba(0,0,0,0)), + color-stop(.43, rgba(0,0,0,.1)), + color-stop(.45, rgba(0,0,0,.4)), + color-stop(.5, rgba(255,255,255,.8)), + to(#fff)), + + -webkit-gradient(linear, left top, left bottom, + from(#8e8e8e), + to(#fff)); +} +/* End Slider Styles */ +/* Tab Bar Styles */ +tabbar { + height: 49px; + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-align: center; + -webkit-box-pack: justify; + -webkit-box-sizing: border-box; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#000), to(#000), + color-stop(0.02, #545454), + color-stop(0.04, #3b3b3b), + color-stop(0.5, #1d1d1d), + color-stop(0.51, #000)); + font-size: 10px; + font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, sans-serif; + text-align: center; + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; +} +tabbar > uibutton { + position: relative; + padding: 4px 0 0 0; + margin: 3px 3px 3px 3px; + display: -webkit-box; + -webkit-box-orient: vertical !important; + -webkit-box-sizing: border-box; + height: 44px; + text-align: center; + color: #fff; + position: relative; + background-image: none; + border: none; + -webkit-box-shadow: none; + -webkit-border-radius: 3px; + margin: 3px 3px 3px 3px; + padding: 4px 0 0 0; +} +tabbar > uibutton[ui-implements=tab]:hover, +tabbar > uibutton.selected, +tabbar > uibutton.touched { + background: rgba(255, 255, 255, 0.15) !important; +} +tabbar > uibutton[ui-implements=tab].disabled:hover { + background: none !important; +} +tabbar > uibutton > icon, +tabbar > uibutton[ui-implements=tab].disabled:hover > icon { + display: block; + margin: 0; + height: 30px; + width: 30px; + margin-bottom: -8px; + background-image: + -webkit-gradient(linear, 0% 0%, 0% 100%, + from(#A6A6A6), + to(#606060), + color-stop(.5,#8C8C8C)); + -webkit-box-shadow: #000 0 1px 0px; + -webkit-mask-size: 30px 30px; + background-size: 30px 30px; +} +tabbar > uibutton[ui-implements=tab].disabled:hover > icon, +tabbar > uibutton[ui-implements=tab].disabled:hover { + cursor: default; +} + +tabbar > uibutton > icon + label { + display: inline-block; + font-size: 10px !important; + font-weight: bold; + line-height: 11px; + margin: 0; + color: rgba(255,255,255,0.9); + text-overflow: ellipsis; + white-space: nowrap; + -webkit-font-smoothing: subpixel-antialiased !important; +} +tabbar > uibutton.selected > icon, +tabbar > uibutton:hover > icon, +tabbar > uibutton.touched > icon { + background: + -webkit-gradient(linear, 38% 0%, 60% 70%, + from(#DDE9F0), + color-stop(0.6, #79B2EC), + color-stop(0.7, #2E91E5), + to(#3FC5F8)); + -webkit-box-shadow: #000 0 1px 0px; + color:#68B3DA; +} +/* End Tab Bar Styles */ + +/* Expander Styles */ +expander { + display: -webkit-box; + -webkit-box-orient: vertical; + height: auto; + position: relative; +} +expander > header { + position: relative; + z-index: 100; + padding-left: 40px; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#92a1bf), + color-stop(0.8, #546993), + color-stop(0.8, #a7babe), + to(#a7babe)); + background-size: 100% 8px; + background-repeat: repeat-x; + padding-bottom: 8px; + cursor: pointer; + margin-top: 10px; +} +expander > header > label { + display: inline-block; + background-color: #a8b1c3; + border-radius: 20px; + color: #fff; + text-shadow: 0 1px 1px #666; + position: absolute; + top: -14px; + padding: 2px 10px; + margin-left: 10px; + border: solid 2px #fff; + -webkit-box-shadow: 0 3px 4px rgba(0,0,0,0.25), + 0 -1px 4px rgba(0,0,0,0.25); + cursor: pointer; +} +expander > header:before { + content: ""; + display: block; + width: 30px; + height: 30px; + position: absolute; + top: -12px; + left: 10px; + border: solid 2px rgba(154,189,219,0.8); + background-color: #556a97; + border-radius: 20px; + -webkit-box-sizing: border-box; + -webkit-background-clip: padding-box; + padding: 2px; + -webkit-box-shadow: + 0 3px 4px rgba(0,0,0,0.25), + 0 -1px 4px rgba(0,0,0,0.25); + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#ddd), + to(#556a97)); + + +} +expander > header:after { + content: ""; + display: block; + width: 30px; + height: 30px; + position: absolute; + top: -13px; + left: 10px; + border-radius: 30px; + -webkit-mask-image: url(../icons/arrow_right.svg); + -webkit-mask-repeat: no-repeat; + background-position: center center; + -webkit-mask-position: 50% 50%; + -webkit-mask-size: 20px 20px; + -webkit-box-sizing: border-box; + background-color: #fff; + cursor: pointer; + -webkit-transition: all 0.5s ease-in-out; + -webkit-transform: rotate(0deg); + -webkit-mask-clip: border-box; +} +expander > panel { + position: relative; + z-index: 1; + -webkit-transition: all 0.25s ease-in-out; + opacity: 1; + -webkit-transform-origin-y: 0px; + overflow: hidden; + padding-bottom: 10px; +} +expander.ui-status-expanded > header { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#92a1bf), + color-stop(0.8, #546993), + color-stop(0.8, rgba(0,0,0,0.1)), + to(rgba(0,0,0,0.15))); +} +expander.ui-status-expanded > panel { + opacity: 1; + background-color: rgba(0,0,0,0.1); + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#92a1bf), + color-stop(0.8, #546993), + color-stop(0.8, #a7babe), + to(#a7babe)); + background-size: 100% 8px; + background-position: bottom left; + background-repeat: repeat-x; +} +expander.ui-status-expanded > header:after { + -webkit-transform: rotate(90deg); + -webkit-mask-position: 6px 4px; +} +expander.ui-status-expanded > header:before { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#ddd), + to(#182743)); +} +expander.ui-status-expanded > header > label { + background-color: #7a89a4; +} +/* End Expander Styles */ +/* Progress Bar Styles */ +progressbar { + display: block; + width: 100px; + height: 15px; + border: 1px solid #666; + border-bottom-color: #666; + border-top-color: #999; + margin: 10px auto; + position: relative; + -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5); + border-radius: 7px; + background-color: rgb(56,138,213); + background-image: + -webkit-gradient(linear, 0 0, 0 100%, + color-stop(0.20, transparent), + color-stop(0.20, rgba(255,255,255,.5)), + color-stop(0.32, rgba(255,255,255,.5)), + color-stop(0.32, transparent)), + -webkit-gradient(linear, 0 0, 0 100%, + color-stop(0, rgba(255,255,255,.85)), + color-stop(0.45, rgba(255,255,255,.05)), + color-stop(0.55, rgba(0,0,0,.05)), + color-stop(0.85, rgba(0,0,0,.2)), + color-stop(0.98, rgba(0,0,0,.5))), + -webkit-gradient(linear, 18 0, 0 10, + color-stop(0.23, rgba(255,255,255,0)), + color-stop(0.3, rgba(255,255,255,0.8)), + color-stop(0.3, rgba(255,255,255,1)), + color-stop(0.7, rgba(255,255,255,1)), + color-stop(0.7, rgba(255,255,255,0.85)), + color-stop(0.77, rgba(255,255,255,0))); + background-repeat: repeat-x; + -webkit-background-size: 20px 20px; + -webkit-background-position-x: 0%; + -webkit-animation-duration: 5s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + -webkit-animation-name: progressBarAnim; + background-size: 20px 20px; + +} +/* Paging Control Styles */ +stack[ui-implements="paging"] { + margin: 0 auto; + display: -webkit-box; + -webkit-box-orient: horizontal; + -webkit-box-packing: start; + -webkit-box-align: center; + width: 320px; + height: 280px; + position: relative; + z-index: 1; + overflow: hidden; +} +stack[ui-implements="paging"] > panel { + display: block !important; + -webkit-box-flex: 0; +} +stack[ui-implements="paging"] > panel > stack { + width: 100%; + height: 100%; + padding: 0; + margin: 0; + text-align: left; +} +stack[ui-implements="paging"] > panel > stack > panel { + -webkit-box-sizing: border-box; + display: block !important; + width: 320px; + height: 280px; + text-align: center; + font-size: 18px; + line-height: 140%; + padding: 10px; +} +stack[ui-implements="indicators"] { + display: -webkit-box; + width: 320px; + padding: 10px 10px 10px 10px; + -webkit-box-sizing: border-box; + -webkit-box-orient: horizontal; + -wekit-box-align: center; + -webkit-box-pack: center; + margin: 0 auto 10px auto; +} +stack[ui-implements="indicators"] > indicator { + display: block; + width: 8px; + height: 8px; + -webkit-border-radius:4px; + background-color: #ddd; + overflow: hidden; + margin-right: 10px; +} +stack[ui-implements="indicators"] > indicator.active { + background-color: #888; +} +stack[ui-implements="indicators"] > indicator:first-child { + margin-left: 0; +} +stack[ui-implements="indicators"] > indicator:last-child { + margin: 0; +} +stack[ui-implements="paging"] > panel panel > h4 { + text-align: center; + margin: 0 auto; + width: 100%; +} +stack[ui-implements="paging"] > panel panel > p { + text-align: left; + margin: 0; +} +stack[ui-implements=paging], stack[ui-implements=indicators] { + background-color: #fff; +} +/* End Paging Control Styles */ +/* Spinner Styles */ +spinner { + display: -webkit-inline-box; + -webkit-box-orient: horizontal; + -webkit-box-pack: center; + -webkit-box-align: center; +} +spinner > input { + margin: 0; + display: none; +} +spinner > label { + display: inline-block; + -webkit-box-sizing: border-box; + border: solid 1px #484e59; + border-bottom-color: #4c5c7a; + width: 50px; + height: 31px; + font: bold 16px/30px Helvetica; + text-align: center; +} +spinner > uibutton { + display: -inline-box; + -webkit-box-sizing: border-box; + width: 33px; +} +tablecell:hover spinner > uibutton > label { + color: #000 !important; +} +spinner > uibutton:hover { + background-image: + -webkit-gradient(linear, left top, left bottom, + from(#7d88a5), + color-stop(0.25, #58698c), + color-stop(0.5, #3a4e78), + color-stop(0.5, #253c6a), + color-stop(0.75, #273f6d), + to(#273f6d)); + -webkit-tap-highlight-color: transparent; +} +spinner > uibutton > icon { + background-color: #fff !important; +} +spinner > uibutton:first-of-type { + -webkit-border-top-right-radius: 0; + -webkit-border-bottom-right-radius: 0; + margin-right: 0; +} +spinner > uibutton:last-of-type { + -webkit-border-top-left-radius: 0; + -webkit-border-bottom-left-radius: 0; + margin-left: 0; +} +spinner > uibutton:first-of-type > icon { + -webkit-mask-image: url(../icons/arrow_down.svg); +} +spinner > uibutton:last-of-type > icon { + -webkit-mask-image: url(../icons/arrow_up.svg); +} +spinner > uibutton:first-of-type > icon.indicator { + -webkit-mask-image: url(../icons/minus.svg); +} +spinner > uibutton:last-of-type > icon.indicator { + -webkit-mask-image: url(../icons/add.svg); +} +spinner > uibutton.disabled > span { + opacity: 0.5; +} +/* End Spinner Styels*/ +@-webkit-keyframes progressBarAnim { + 0% { background-position-x: 0%, 0%, 0%; } + 100% { background-position-x: 0%, 0%, 100%; } +} +/* End Progress Bar Styles */ +.UIActivityIndicator { + background-image: -webkit-canvas(area); +} + +/* Transitions for Subviews, Paging, etc. */ + +view[ui-transition-type] { + -webkit-transform-style: preserve-3d; + -webkit-perspective: 1000; +} +view[ui-transition-type] > subview { + position: absolute; + -webkit-transition: all .2s ease-in-out; + -webkit-backface-visibility: hidden; +} + +view[ui-transition-type=flip-left] > subview:not(:first-of-type) { + -webkit-transform: rotateY(-180deg); +} +view[ui-transition-type=flip-right] > subview:not(:first-of-type) { + -webkit-transform: rotateY(180deg); +} +view[ui-transition-type=flip-top] > subview:not(:first-of-type) { + -webkit-transform: rotateX(180deg); +} +view[ui-transition-type=flip-bottom] > subview:not(:first-of-type) { + -webkit-transform: rotateX(-180deg); +} + +view[ui-transition-type=turn] { + +} +view[ui-transition-type=fade] > subview { + opacity: 0; +} +view[ui-transition-type=fade] > subview:first-of-type { + opacity: 1; +} +view[ui-transition-type=pop] > subview { + opacity: 0; + -webkit-transform: scale(0); +} +view[ui-transition-type=pop] > subview:first-of-type { + opacity: 1; + -webkit-transform: scale(1); +} +view[ui-transition-type=spin] > subview { + opacity: 0; + -webkit-transform: scale(0); +} +view[ui-transition-type=spin] > subview:first-of-type { + opacity: 1; + -webkit-transform: scale(1); +} +view[ui-transition-type=slide] { + +} +view[ui-transition-type=shuffle] { + +} +view[ui-transition-type=accordion] { + +} +.fade-in, .fade-out { + -webkit-animation-duration: .5s; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-fill-mode: forwards; + -webkit-animation-name: anim-fade-in; +} +.fade-out { + -webkit-animation-name: anim-fade-out; +} +@-webkit-keyframes anim-fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} +@-webkit-keyframes anim-fade-out { + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +.pop-in, .pop-out { + -webkit-animation-duration: .75s; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-fill-mode: forwards; + -webkit-animation-name: anim-pop-in; +} +.pop-out { + -webkit-animation-name: anim-pop-out; +} +@-webkit-keyframes anim-pop-in { + 0% { opacity: 0; -webkit-transform: scale(0); } + 60% { opacity: .8; -webkit-transform: scale(1); } + 80% { opacity: .95; -webkit-transform: scale(.95); } + 100% { opacity: 1; -webkit-transform: scale(1); } +} +@-webkit-keyframes anim-pop-out { + 0% { opacity: 1; -webkit-transform: scale(1); } + 100% { opacity: 0; -webkit-transform: scale(0); } +} +.flip-right-front-in, +.flip-right-front-out, +.flip-right-back-in, +.flip-right-back-out, +.flip-left-front-in, +.flip-left-front-out, +.flip-left-back-in, +.flip-left-back-out, +.flip-top-front-in, +.flip-top-front-out, +.flip-top-back-in, +.flip-top-back-out, +.flip-bottom-front-in, +.flip-bottom-front-out, +.flip-bottom-back-in, +.flip-bottom-back-out { + -webkit-animation-duration: .5s; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-fill-mode: forwards; + -webkit-backface-visibility: hidden; + -webkit-animation-name: anim-flip-right-front-in; +} +.flip-right-front-out { + -webkit-animation-name: anim-flip-right-front-out; +} +.flip-right-back-in { + -webkit-animation-name: anim-flip-right-back-in; +} +.flip-right-back-out { + -webkit-animation-name: anim-flip-right-back-out; +} +.flip-left-front-in { + -webkit-animation-name: anim-flip-left-front-in; +} +.flip-left-front-out { + -webkit-animation-name: anim-flip-left-front-out; +} +.flip-left-back-in { + -webkit-animation-name: anim-flip-left-back-in; +} +.flip-left-back-out { + -webkit-animation-name: anim-flip-left-back-out; +} +.flip-top-front-in { + -webkit-animation-name: anim-flip-top-front-in; +} +.flip-top-front-out { + -webkit-animation-name: anim-flip-top-front-out; +} +.flip-top-back-in { + -webkit-animation-name: anim-flip-top-back-in; +} +.flip-top-back-out { + -webkit-animation-name: anim-flip-top-back-out; +} +.flip-bottom-front-in { + -webkit-animation-name: anim-flip-bottom-front-in; +} +.flip-bottom-front-out { + -webkit-animation-name: anim-flip-bottom-front-out; +} +.flip-bottom-back-in { + -webkit-animation-name: anim-flip-bottom-back-in; +} +.flip-bottom-back-out { + -webkit-animation-name: anim-flip-bottom-back-out; +} +@-webkit-keyframes anim-flip-right-front-in { + 0% { -webkit-transform: rotateY(0deg); } + 100% { -webkit-transform: rotateY(-180deg); } +} +@-webkit-keyframes anim-flip-right-front-out { + 0% { -webkit-transform: rotateY(-180deg); } + 100% { -webkit-transform: rotateY(0deg); } +} +@-webkit-keyframes anim-flip-right-back-in { + 0% { -webkit-transform: rotateY(180deg); } + 100% { -webkit-transform: rotateY(0deg); } +} +@-webkit-keyframes anim-flip-right-back-out { + 0% { -webkit-transform: rotateY(0deg); } + 100% { -webkit-transform: rotateY(180deg); } +} +@-webkit-keyframes anim-flip-left-front-in { + 0% { -webkit-transform: rotateY(0deg); } + 100% { -webkit-transform: rotateY(180deg); } +} +@-webkit-keyframes anim-flip-left-front-out { + 0% { -webkit-transform: rotateY(180deg); } + 100% { -webkit-transform: rotateY(0deg); } +} +@-webkit-keyframes anim-flip-left-back-in { + 0% { -webkit-transform: rotateY(-180deg); } + 100% { -webkit-transform: rotateY(0deg); } +} +@-webkit-keyframes anim-flip-left-back-out { + 0% { -webkit-transform: rotateY(0deg); } + 100% { -webkit-transform: rotateY(-180deg); } +} +@-webkit-keyframes anim-flip-top-front-in { + 0% { -webkit-transform: rotateX(-180deg); } + 100% { -webkit-transform: rotateX(0deg); } +} +@-webkit-keyframes anim-flip-top-front-out { + 0% { -webkit-transform: rotateX(0deg); } + 100% { -webkit-transform: rotateX(-180deg); } +} +@-webkit-keyframes anim-flip-top-back-in { + 0% { -webkit-transform: rotateX(0deg); } + 100% { -webkit-transform: rotateX(180deg); } +} +@-webkit-keyframes anim-flip-top-back-out { + 0% { -webkit-transform: rotateX(180deg); } + 100% { -webkit-transform: rotateX(0deg); } +} +@-webkit-keyframes anim-flip-bottom-front-in { + 0% { -webkit-transform: rotateX(-180deg); } + 100% { -webkit-transform: rotateX(0deg); } +} +@-webkit-keyframes anim-flip-bottom-front-out { + 0% { -webkit-transform: rotateX(0deg); } + 100% { -webkit-transform: rotateX(-180deg); } +} +@-webkit-keyframes anim-flip-bottom-back-in { + 0% { -webkit-transform: rotateX(0deg); } + 100% { -webkit-transform: rotateX(180deg); } +} +@-webkit-keyframes anim-flip-bottom-back-out { + 0% { -webkit-transform: rotateX(180deg); } + 100% { -webkit-transform: rotateX(0deg); } +} + +@-webkit-keyframes anim-flip-bottom-back-in { + 0% { -webkit-transform: rotateX(0deg); } + 100% { -webkit-transform: rotateX(-180deg); } +} +@-webkit-keyframes anim-flip-bottom-back-out { + 0% { -webkit-transform: rotateX(-180deg); } + 100% { -webkit-transform: rotateX(0deg); } +} + +.spin-left-in, +.spin-left-out, +.spin-right-in, +.spin-right-out { + -webkit-animation-duration: .5s; + -webkit-animation-timing-function: ease-in; + -webkit-animation-fill-mode: forwards; + -webkit-animation-name: anim-spin-left-in; +} +.spin-left-out { + -webkit-animation-name: anim-spin-left-out; +} +.spin-right-in { + -webkit-animation-name: anim-spin-right-in; +} +.spin-right-out { + -webkit-animation-name: anim-spin-right-out; +} +@-webkit-keyframes anim-spin-left-in { + 0% { opacity: .25; -webkit-transform: scale(0) rotate(0deg); } + 100% { opacity: 1; -webkit-transform: scale(1) rotate(360deg); } +} + +@-webkit-keyframes anim-spin-left-out { + 0% { opacity: 1; -webkit-transform: scale(1) rotate(360deg); } + 100% { opacity: .25; -webkit-transform: scale(0) rotate(0deg); } +} + +@-webkit-keyframes anim-spin-right-in { + 0% { opacity: .25; -webkit-transform: scale(0) rotate(0deg); } + 100% { opacity: 1; -webkit-transform: scale(1) rotate(-360deg); } +} +@-webkit-keyframes anim-spin-right-out { + 0% { opacity: 1; -webkit-transform: scale(1) rotate(-360deg); } + 100% { opacity: .25;-webkit-transform: scale(0) rotate(0deg); } +} + +/* Segmented Paging Styles */ +segmentedcontrol[ui-paging] > uibutton > icon { + background-color: #fff !important; +} +segmentedcontrol[ui-paging=vertical] > uibutton:first-of-type > icon { + -webkit-mask-image: url(../icons/arrow_down.svg); +} +segmentedcontrol[ui-paging=vertical] > uibutton:last-of-type > icon { + -webkit-mask-image: url(../icons/arrow_up.svg); +} +segmentedcontrol[ui-paging=horizontal] > uibutton:first-of-type > icon { + -webkit-mask-image: url(../icons/arrow_left.svg); +} +segmentedcontrol[ui-paging=horizontal] > uibutton:last-of-type > icon { + -webkit-mask-image: url(../icons/arrow_right.svg); +} +subview[ui-paging-orient] { + -webkit-transition: all 0.25s ease-in-out; + -webkit-transform: translate3d(0,0,0); +} +subview[ui-paging-orient=horizontal][ui-navigation-status=upcoming] { + -webkit-transform: translateX(100%); + -webkit-transform: translate3d(100%,0%,0%); + opacity: 0; +} +subview[ui-paging-orient=horizontal][ui-navigation-status=current] { + -webkit-transform: translateX(0%); + -webkit-transform: translate3d(0%,0%, 0%); + opacity: 1; +} +subview[ui-paging-orient=horizontal][ui-navigation-status=traversed] { + -webkit-transform: translateX(-100%); + -webkit-transform: translate3d(-100%, 0%, 0%); + opacity: 0; +} + + +subview[ui-paging-orient=vertical][ui-navigation-status=upcoming] { + -webkit-transform: translateY(100%); + -webkit-transform: translate3d(0%,100%,0%); + opacity: 0; +} +subview[ui-paging-orient=vertical][ui-navigation-status=current] { + -webkit-transform: translateY(0%); + -webkit-transform: translate3d(0%,0%, 0%); + opacity: 1; +} +subview[ui-paging-orient=vertical][ui-navigation-status=traversed] { + -webkit-transform: translateY(-100%); + -webkit-transform: translate3d(0%, -100%, 0%); + opacity: 0; +} +app[ui-kind="navigation-with-one-navbar"] > navbar > uibutton[ui-implements="back"] { + display: none; +} + +/* Cube Transtion */ +view[ui-transition=cube] > *, +subview[ui-transition=cube] > * { + -webkit-transition-property: -webkit-transform, opacity; +} +, +view[ui-transition=cube][ui-transition-state=initial] > *, +subview[ui-transition=cube][ui-transition-state=initial] > * { + -webkit-transition-duration: 0; +} + +view[ui-transition=cube][ui-transition-state=final] > *, +subview[ui-transition=cube][ui-transition-state=final] > * { + -webkit-transition-duration: 1000ms; +} + +view[ui-transition=cube][ui-transition-state="slowmode final" > *, +subview[ui-transition=cube][ui-transition-state="slowmode final" > * { + -webkit-transition-duration: 5000ms; +} + +/* initial state */ +view[ui-transition=cube][ui-transition-state="initial outgoing"], +subview[ui-transition=cube][ui-transition-state="initial outgoing"] { + /* The z translate is half the width */ + -webkit-transform: translateZ(-512px) rotateY(0deg) translateZ(512px); +} + +view[ui-transition=cube][ui-transition-state="initial incoming"], +subview[ui-transition=cube][ui-transition-state="initial incoming"] { + -webkit-transform: translateZ(-512px) rotateY(90deg) translateZ(512px); +} + +/* final state */ +view[ui-transition=cube][ui-transition-state="final outgoing"] , +subview[ui-transition=cube][ui-transition-state="final outgoing"] { + -webkit-transform: translateZ(-512px) rotateY(-90deg) translateZ(512px); +} + +view[ui-transition=cube][ui-transition-state="final incoming"], +subview[ui-transition=cube][ui-transition-state="final incoming"] { + -webkit-transform: translateZ(-512px) rotateY(0deg) translateZ(512px); +} +/* End Cube Transition */ \ No newline at end of file diff --git a/chui/chui.js b/chui/chui.js new file mode 100644 index 0000000..687119f --- /dev/null +++ b/chui/chui.js @@ -0,0 +1,2540 @@ +/* + pO\ + 6 /\ + /OO\ + /OOOO\ + /OOOOOOOO\ + ((OOOOOOOO)) + \:~=++=~:/ + +ChocolateChip-UI +Three yummy ingredients make this something to sink your teeth into: +ChococlateChip.js: It's tiny but delicious +ChUI.css: Good looks do impress +ChUI.js: The magic to make it happen +Also staring WAML--Web App Markup Language: no more masquerading as a Web page. +WAML makes coding a Web app logical and straightforward, the way it was meant to be. + +Copyright 2011 Robert Biggs: www.chocolatechip-ui.com +License: BSD +Version: 0.8.6 beta + +*/ + +const CHUIVersion = "0.8.6 beta"; + +const UIExpectedChocolateChipJSVersion = "1.1.6"; + +UICheckChocolateChipJSVersion = function() { + if ($.version !== UIExpectedChocolateChipJSVersion) { + console.error("This version of ChocolateChip-UI requries ChococlateChip.js version " + UIExpectedChocolateChipJSVersion + "!"); + console.error("The version of ChocolateChip.js which you are using is: " + $.version); + console.error("ChocolateChip.js has been disabled until this problem is resolved."); + window.$ = null; + } +}; +UICheckChocolateChipJSVersion(); + +$.ready(function() { + $.body = $("body"); + $.app = $("app"); + $.main = $("#main"); + $.views = $$("view"); +}); +$.tablet = false; +if ( window.innerWidth > 600 ) { + $.tablet = true; +} +$.extend($, { + UIUuidSeed : function ( seed ) { + if (seed) { + return (((1 + Math.random()) * 0x10000) | 0).toString(seed).substring(1); + } else { + return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); + } + }, + AlphaSeed : function ( ) { + var text = ""; + var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; + text += chars.charAt(Math.floor(Math.random() * chars.length)); + return text; + }, + UIUuid : function() { + return ($.AlphaSeed() + $.UIUuidSeed(20) + $.UIUuidSeed() + "-" + $.UIUuidSeed() + "-" + $.UIUuidSeed() + "-" + $.UIUuidSeed() + "-" + $.UIUuidSeed() + $.UIUuidSeed() + $.UIUuidSeed()); + }, + resetApp : function ( hard ) { + if (hard === "hard") { + window.location.reload(true); + } else { + $.views.forEach(function(view) { + view.setAttribute("ui-navigation-status", "upcoming"); + }); + $.main.setAttribute("ui-navigation-status", "current"); + $.UINavigationHistory = ["#main"]; + } + } +}); +$.extend(HTMLElement.prototype, { + UIIdentifyChildNodes : function ( ) { + var kids = this.childElementCount; + for (var i = 0; i < kids; i++) { + this.children[i].setAttribute("ui-child-position", i); + } + } +}); +$.extend($, { + UITouchedButton : null, + + UIButton : function() { + $.app.delegate("uibutton", "touchstart", function(button) { + if (!$.UITouchedButton) { + if (!button.hasClass("disabled")) { + $.UITouchedButton = button; + button.addClass("touched"); + } else { + return false; + } + } else { + if (!button.hasClass("disabled")) { + $.UITouchedButton.removeClass("touched"); + $.UITouchedButton = button; + button.addClass("touched"); + } else { + return false; + } + } + }); + + }, + + UINavigationHistory : ["#main"], + UINavigateBack : function() { + var parent = $.UINavigationHistory[$.UINavigationHistory.length-1]; + $.UINavigationHistory.pop(); + $($.UINavigationHistory[$.UINavigationHistory.length-1]) + .setAttribute("ui-navigation-status", "current"); + $(parent).setAttribute("ui-navigation-status", "upcoming"); + $.UIHideURLbar(); + if ($.app.getAttribute("ui-kind")==="navigation-with-one-navbar" && $.UINavigationHistory[$.UINavigationHistory.length-1] === "#main") { + $("navbar > uibutton[ui-implements=back]", $.app).css("{display: none;}"); + } + }, + UIBackNavigation : function () { + $.app.delegate("uibutton", "click", function(item) { + if (item.getAttribute("ui-implements") === "back") { + $.UINavigateBack(); + } + }); + $.app.delegate("uibutton", "touchstart", function(item) { + if (item.getAttribute("ui-implements") === "back") { + $.UINavigateBack(); + } + }); + }, + UIDoubleTapDelta : 700, + UIDoubleTapTimer : null, + UIDoubleTapFunction1 : null, + UIDoubleTapFunction2 : null, + UIDoubleTapTimeout : function ( ) { + $.UIDoubleTapFunction1(); + $.UIDoubleTapTimer = null; + }, + UIDoubleTap : function (firstTap, secondTap) { + if ($.UIDoubleTapTimer === null) { + $.UIDoubleTapTimer = setTimeout($.UIDoubleTapTimeout, $.UIDoubleTapDelta); + $.UIDoubleTapFunction1 = firstTap; + $.UIDoubleTapFunction2 = secondTap; + } else { + $.UIDoubleTapTimer = null; + $.UIDoubleTapFunction2(); + } + }, + UIFirstTapTime : 0, + UINavigationList : function() { + $.app.delegate("tablecell", "click", function(item) { + setTimeout(function() { + var navigateList = function(item) { + if ($.app.getAttribute("ui-kind")==="navigation-with-one-navbar") { + $("navbar > uibutton[ui-implements=back]", $.app).css("{display: block;}"); + } + $(item.getAttribute("href")).setAttribute("ui-navigation-status", "current"); + $($.UINavigationHistory[$.UINavigationHistory.length-1]).setAttribute("ui-navigation-status", "traversed"); + if ($("#main").getAttribute("ui-navigation-status") !== "traversed") { + $("#main").setAttribute("ui-navigation-status", "traversed"); + } + $.UINavigationHistory.push(item.getAttribute("href")); + $.UIHideURLbar(); + }; + if (item.hasAttribute("href")) { + if ($.UIFirstTapTime === 0) { + navigateList(item); + $.UIFirstTapTime = new Date().getTime(); + } else if ((new Date().getTime() - $.UIFirstTapTime) >= 2500) { + $.UIFirstTapTime = 0; + navigateList(item); + } else if ($.UIFirstTapTime > 0 ) { + if ($.ipad) { + if ((new Date().getTime() - $.UIFirstTapTime) < 2500) { + $.UIFirstTapTime = 0; + return false; + } + } + if ((new Date().getTime() - $.UIFirstTapTime) < 2000) { + $.UIFirstTapTime = 0; + return false; + } else { + navigateList(item); + } + } + } + }, 50); + }); + }, + + UITouchedTableCell : null, + + UITableview : function() { + $.app.delegate("tablecell", "touchstart", function(item) { + if (!$.UITouchedTableCell) { + $.UITouchedTableCell = item; + item.addClass("touched"); + } else { + $.UITouchedTableCell.removeClass("touched"); + item.addClass("touched"); + $.UITouchedTableCell = item; + } + }); + + } +}); +$.ready(function() { + $.UIButton(); + $.UIBackNavigation(); + $.UINavigationList(); + $.UITableview(); + $.app.delegate("input", "click", function(input) { + input.focus(); + }); + $.app.delegate("input", "touchstart", function(input) { + input.focus(); + }); + $.app.delegate("textarea", "click", function(textarea) { + textarea.focus(); + }); + $.app.delegate("textarea", "touchstart", function(textarea) { + textarea.focus(); + }); +}); + +$.extend(HTMLElement.prototype, { + UIToggleButtonLabel : function ( label1, label2 ) { + if ($("label", this).text() === label1) { + $("label", this).text(label2); + } else { + $("label", this).text(label1); + } + } +}); + + +$.UISupports3d = ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()); +$.UISupportsTouch = ('ontouchstart' in window); +$.UISupportsGestures = ('ongesturestart' in window); +$.UISupportsCompositing = ('WebKitTransitionEvent' in window); +$.UIisIDevice = ((/iphone|ipad|ipod/gi).test(navigator.appVersion)); +$.UIisAndroid = ((/android/gi).test(navigator.appVersion)); +$.UIResizeEvt = ('onorientationchange' in window ? 'orientationchange' : 'resize'); +$.UIStartEvt = ($.UISupportsTouch ? 'touchstart' : 'mousedown'); +$.UIMoveEvt = ($.UISupportsTouch ? 'touchmove' : 'mousemove'); +$.UIEndEvt = ($.UISupportsTouch ? 'touchend' : 'mouseup'); +$.UICancelEvt = ($.UISupportsTouch ? 'touchcancel' : 'mouseup'); +$.UITransOpen = ('translate' + ($.UISupports3d ? '3d(' : '(')); +$.UITransClose = ($.UISupports3d ? ',0)' : ')'); + +$.extend($, { + UIScroll : function (el, options) { + var that = this; + var doc = document; + var div = null; + var i = null; + that.wrapper = (typeof el == 'object' ? el : $(el).parentNode); + that.wrapper.style.overflow = 'hidden'; + that.scroller = that.wrapper.children[0]; + that.options = { + HWTransition: true, + HWCompositing: true, + hScroll: true, + vScroll: true, + hScrollbar: true, + vScrollbar: true, + fixedScrollbar: $.UIisAndroid, + fadeScrollbar: ($.UIisIDevice && $.UISupports3d) || !$.UISupportsTouch, + hideScrollbar: $.UIisIDevice || !$.UISupportsTouch, + scrollbarClass: '', + bounce: $.UISupports3d, + bounceLock: false, + momentum: $.UISupports3d, + lockDirection: true, + zoom: false, + zoomMin: 1, + zoomMax: 4, + snap: false, + pullToRefresh: false, + pullDownLabel: ['Pull down to refresh...', 'Release to refresh...', 'Loading...'], + pullUpLabel: ['Pull up to refresh...', 'Release to refresh...', 'Loading...'], + onPullDown: function () {}, + onPullUp: function () {}, + onScrollStart: null, + onScrollEnd: null, + onZoomStart: null, + onZoomEnd: null, + checkDOMChange: false + }; + for (i in options) { + that.options[i] = options[i]; + } + that.options.HWCompositing = that.options.HWCompositing && $.UISupportsCompositing; + that.options.HWTransition = that.options.HWTransition && $.UISupportsCompositing; + if (that.options.HWCompositing) { + that.scroller.style.cssText += '-webkit-transition-property:-webkit-transform;-webkit-transform-origin:0 0;-webkit-transform:' + $.UITransOpen + '0,0' + $.UITransClose; + } else { + that.scroller.style.cssText += '-webkit-transition-property:top,left;-webkit-transform-origin:0 0;top:0;left:0'; + } + if (that.options.HWTransition) { + that.scroller.style.cssText += '-webkit-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);-webkit-transition-duration:0;'; + } + that.options.hScrollbar = that.options.hScroll && that.options.hScrollbar; + that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar; + that.pullDownToRefresh = that.options.pullToRefresh == 'down' || that.options.pullToRefresh == 'both'; + that.pullUpToRefresh = that.options.pullToRefresh == 'up' || that.options.pullToRefresh == 'both'; + if (that.pullDownToRefresh) { + div = doc.createElement('div'); + div.className = 'iScrollPullDown'; + div.innerHTML = '' + that.options.pullDownLabel[0] + '\n'; + that.scroller.insertBefore(div, that.scroller.children[0]); + that.options.bounce = true; + that.pullDownEl = div; + that.pullDownLabel = div.getElementsByTagName('span')[1]; + } + if (that.pullUpToRefresh) { + div = doc.createElement('div'); + div.className = 'iScrollPullUp'; + div.innerHTML = '' + that.options.pullUpLabel[0] + '\n'; + that.scroller.appendChild(div); + that.options.bounce = true; + that.pullUpEl = div; + that.pullUpLabel = div.getElementsByTagName('span')[1]; + } + that.refresh(); + that._bind($.UIResizeEvt, window); + that._bind($.UIStartEvt); + if ($.UISupportsGestures && that.options.zoom) { + that._bind('gesturestart'); + that.scroller.style.webkitTransform = that.scroller.style.webkitTransform + ' scale(1)'; + } + if (!$.UISupportsTouch) { + that._bind('mousewheel'); + } + if (that.options.checkDOMChange) { + that.DOMChangeInterval = setInterval(function () { that._checkSize(); }, 250); + } + } +}); + +$.UIScroll.prototype = { + x: 0, y: 0, + currPageX: 0, currPageY: 0, + pagesX: [], pagesY: [], + offsetBottom: 0, + offsetTop: 0, + scale: 1, lastScale: 1, + contentReady: true, + handleEvent: function (e) { + var that = this; + if (e.target.tagName != "SELECT") { + e.preventDefault(); + e.stopPropagation(); + } + switch(e.type) { + case $.UIStartEvt: that._start(e); break; + case $.UIMoveEvt: that._move(e); break; + case $.UIEndEvt: ; + case $.UICancelEvt: that._end(e); break; + case 'webkitTransitionEnd': that._transitionEnd(e); break; + case $.UIResizeEvt: that._resize(); break; + case 'gesturestart': that._gestStart(e); break; + case 'gesturechange': that._gestChange(e); break; + case 'gestureend': + case 'gesturecancel': that._gestEnd(e); break; + case 'mousewheel': that._wheel(e); break; + } + }, + _scrollbar: function (dir) { + var that = this; + var doc = document; + var bar = null; + if (!that[dir + 'Scrollbar']) { + if (that[dir + 'ScrollbarWrapper']) { + that[dir + 'ScrollbarIndicator'].style.webkitTransform = ''; + if ( that[dir + 'ScrollbarWrapper'].parentNode != null ) { + that[dir + 'ScrollbarWrapper'].parentNode.removeChild(that[dir + 'ScrollbarWrapper']); + } + that[dir + 'ScrollbarWrapper'] = null; + that[dir + 'ScrollbarIndicator'] = null; + } + return; + } + if (!that[dir + 'ScrollbarWrapper']) { + bar = doc.createElement('div'); + if (that.options.scrollbarClass) { + bar.className = that.options.scrollbarClass + dir.toUpperCase(); + } else { + bar.style.cssText = 'position:absolute;z-index:100;' + (dir == 'h' ? 'height:7px;bottom:1px;left:2px;right:7px' : 'width:7px;bottom:7px;top:2px;right:1px'); + } + bar.style.cssText += 'pointer-events:none;-webkit-transition-property:opacity;-webkit-transition-duration:' + (that.options.fadeScrollbar ? '350ms' : '0') + ';overflow:hidden;opacity:' + (that.options.hideScrollbar ? '0' : '1'); + that.wrapper.appendChild(bar); + that[dir + 'ScrollbarWrapper'] = bar; + bar = doc.createElement('div'); + if (!that.options.scrollbarClass) { + bar.style.cssText = 'position:absolute;z-index:100;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);-webkit-background-clip:padding-box;-webkit-box-sizing:border-box;' + (dir == 'h' ? 'height:100%;-webkit-border-radius:4px 3px;' : 'width:100%;-webkit-border-radius:3px 4px;'); + } + bar.style.cssText += 'pointer-events:none;-webkit-transition-property:-webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);-webkit-transition-duration:0;-webkit-transform:' + $.UITransOpen + '0,0' + $.UITransClose; + that[dir + 'ScrollbarWrapper'].appendChild(bar); + that[dir + 'ScrollbarIndicator'] = bar; + } + if (dir == 'h') { + that.hScrollbarSize = that.hScrollbarWrapper.clientWidth; + that.hScrollbarIndicatorSize = Math.max(Math.round(that.hScrollbarSize * that.hScrollbarSize / that.scrollerW), 8); + that.hScrollbarIndicator.style.width = that.hScrollbarIndicatorSize + 'px'; + that.hScrollbarMaxScroll = that.hScrollbarSize - that.hScrollbarIndicatorSize; + that.hScrollbarProp = that.hScrollbarMaxScroll / that.maxScrollX; + } else { + that.vScrollbarSize = that.vScrollbarWrapper.clientHeight; + that.vScrollbarIndicatorSize = Math.max(Math.round(that.vScrollbarSize * that.vScrollbarSize / that.scrollerH), 8); + that.vScrollbarIndicator.style.height = that.vScrollbarIndicatorSize + 'px'; + that.vScrollbarMaxScroll = that.vScrollbarSize - that.vScrollbarIndicatorSize; + that.vScrollbarProp = that.vScrollbarMaxScroll / that.maxScrollY; + } + that._indicatorPos(dir, true); + }, + _resize: function () { + var that = this; + setTimeout(function () { + that.refresh(); + }, 0); + }, + _checkSize: function () { + var that = this; + var scrollerW = null; + var scrollerH = null; + if (that.moved || that.zoomed || !that.contentReady) return; + scrollerW = Math.round(that.scroller.offsetWidth * that.scale); + scrollerH = Math.round((that.scroller.offsetHeight - that.offsetBottom - that.offsetTop) * that.scale); + if (scrollerW == that.scrollerW && scrollerH == that.scrollerH) return; + that.refresh(); + }, + _pos: function (x, y) { + var that = this; + that.x = that.hScroll ? x : 0; + that.y = that.vScroll ? y : 0; + that.scroller.style.webkitTransform = $.UITransOpen + that.x + 'px,' + that.y + 'px' + $.UITransClose + ' scale(' + that.scale + ')'; + that._indicatorPos('h'); + that._indicatorPos('v'); + }, + _indicatorPos: function (dir, hidden) { + var that = this; + var pos = dir == 'h' ? that.x : that.y; + if (!that[dir + 'Scrollbar']) return; + pos = that[dir + 'ScrollbarProp'] * pos; + if (pos < 0) { + pos = that.options.fixedScrollbar ? 0 : pos + pos*3; + if (that[dir + 'ScrollbarIndicatorSize'] + pos < 9) pos = -that[dir + 'ScrollbarIndicatorSize'] + 8; + } else if (pos > that[dir + 'ScrollbarMaxScroll']) { + pos = that.options.fixedScrollbar ? that[dir + 'ScrollbarMaxScroll'] : pos + (pos - that[dir + 'ScrollbarMaxScroll'])*3; + if (that[dir + 'ScrollbarIndicatorSize'] + that[dir + 'ScrollbarMaxScroll'] - pos < 9) pos = that[dir + 'ScrollbarIndicatorSize'] + that[dir + 'ScrollbarMaxScroll'] - 8; + } + that[dir + 'ScrollbarWrapper'].style.webkitTransitionDelay = '0'; + that[dir + 'ScrollbarWrapper'].style.opacity = hidden && that.options.hideScrollbar ? '0' : '1'; + that[dir + 'ScrollbarIndicator'].style.webkitTransform = $.UITransOpen + (dir == 'h' ? pos + 'px,0' : '0,' + pos + 'px') + $.UITransClose; + }, + _transitionTime: function (time) { + var that = this; + time += 'ms'; + that.scroller.style.webkitTransitionDuration = time; + if (that.hScrollbar) that.hScrollbarIndicator.style.webkitTransitionDuration = time; + if (that.vScrollbar) that.vScrollbarIndicator.style.webkitTransitionDuration = time; + }, + _start: function (e) { + var that = this; + var point = $.UISupportsTouch ? e.changedTouches[0] : e; + var matrix = null; + that.moved = false; + e.preventDefault(); + if ($.UISupportsTouch && e.touches.length == 2 && that.options.zoom && $.UISupportsGestures && !that.zoomed) { + that.originX = Math.abs(e.touches[0].pageX + e.touches[1].pageX - that.wrapperOffsetLeft*2) / 2 - that.x; + that.originY = Math.abs(e.touches[0].pageY + e.touches[1].pageY - that.wrapperOffsetTop*2) / 2 - that.y; + } + that.moved = false; + that.distX = 0; + that.distY = 0; + that.absDistX = 0; + that.absDistY = 0; + that.dirX = 0; + that.dirY = 0; + that.returnTime = 0; + that._transitionTime(0); + if (that.options.momentum) { + if (that.scrollInterval) { + clearInterval(that.scrollInterval); + that.scrollInterval = null; + } + if (that.options.HWCompositing) { + matrix = new WebKitCSSMatrix(window.getComputedStyle(that.scroller, null).webkitTransform); + if (matrix.m41 != that.x || matrix.m42 != that.y) { + that._unbind('webkitTransitionEnd'); + that._pos(matrix.m41, matrix.m42); + } + } else { + matrix = window.getComputedStyle(that.scroller, null); + if (that.x + 'px' != matrix.left || that.y + 'px' != matrix.top) { + that._unbind('webkitTransitionEnd'); + that._pos(matrix.left.replace(/[^0-9]/g)*1, matrix.top.replace(/[^0-9]/g)*1); + } + } + } + that.scroller.style.webkitTransitionTimingFunction = 'cubic-bezier(0.33,0.66,0.66,1)'; + if (that.hScrollbar) that.hScrollbarIndicator.style.webkitTransitionTimingFunction = 'cubic-bezier(0.33,0.66,0.66,1)'; + if (that.vScrollbar) that.vScrollbarIndicator.style.webkitTransitionTimingFunction = 'cubic-bezier(0.33,0.66,0.66,1)'; + that.startX = that.x; + that.startY = that.y; + that.pointX = point.pageX; + that.pointY = point.pageY; + that.startTime = e.timeStamp; + if (that.options.onScrollStart) { + that.options.onScrollStart.call(that); + } + that._bind($.UIMoveEvt); + that._bind($.UIEndEvt); + }, + _move: function (e) { + if ($.UISupportsTouch && e.touches.length > 1) return; + var that = this; + var point = $.UISupportsTouch ? e.changedTouches[0] : e; + var deltaX = point.pageX - that.pointX; + var deltaY = point.pageY - that.pointY; + var newX = that.x + deltaX; + var newY = that.y + deltaY; + e.preventDefault(); + that.pointX = point.pageX; + that.pointY = point.pageY; + if (newX > 0 || newX < that.maxScrollX) { + newX = that.options.bounce ? that.x + (deltaX / 2.4) : newX >= 0 || that.maxScrollX >= 0 ? 0 : that.maxScrollX; + } + if (newY > 0 || newY < that.maxScrollY) { + newY = that.options.bounce ? that.y + (deltaY / 2.4) : newY >= 0 || that.maxScrollY >= 0 ? 0 : that.maxScrollY; + if (that.options.pullToRefresh && that.contentReady) { + if (that.pullDownToRefresh && newY > that.offsetBottom) { + that.pullDownEl.className = 'iScrollPullDown flip'; + that.pullDownLabel.innerText = that.options.pullDownLabel[1]; + } else if (that.pullDownToRefresh && that.pullDownEl.className.match('flip')) { + that.pullDownEl.className = 'iScrollPullDown'; + that.pullDownLabel.innerText = that.options.pullDownLabel[0]; + } + if (that.pullUpToRefresh && newY < that.maxScrollY - that.offsetTop) { + that.pullUpEl.className = 'iScrollPullUp flip'; + that.pullUpLabel.innerText = that.options.pullUpLabel[1]; + } else if (that.pullUpToRefresh && that.pullUpEl.className.match('flip')) { + that.pullUpEl.className = 'iScrollPullUp'; + that.pullUpLabel.innerText = that.options.pullUpLabel[0]; + } + } + } + if (that.absDistX < 4 && that.absDistY < 4) { + that.distX += deltaX; + that.distY += deltaY; + that.absDistX = Math.abs(that.distX); + that.absDistY = Math.abs(that.distY); + return; + } + if (that.options.lockDirection) { + if (that.absDistX > that.absDistY+3) { + newY = that.y; + deltaY = 0; + } else if (that.absDistY > that.absDistX+3) { + newX = that.x; + deltaX = 0; + } + } + that.moved = true; + that._pos(newX, newY); + that.dirX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0; + that.dirY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0; + if (e.timeStamp - that.startTime > 300) { + that.startTime = e.timeStamp; + that.startX = that.x; + that.startY = that.y; + } + }, + _end: function (e) { + if ($.UISupportsTouch && e.touches.length != 0) return; + var that = this; + var point = $.UISupportsTouch ? e.changedTouches[0] : e; + var target, ev; + var momentumX = { dist:0, time:0 }; + var momentumY = { dist:0, time:0 }; + var duration = e.timeStamp - that.startTime; + var newPosX = that.x; + var newPosY = that.y; + var newDuration; + var snap; + that._unbind($.UIMoveEvt); + that._unbind($.UIEndEvt); + that._unbind($.UICancelEvt); + if (that.zoomed) return; + if (!that.moved) { + if ($.UISupportsTouch) { + if (that.doubleTapTimer && that.options.zoom) { + // Double tapped + clearTimeout(that.doubleTapTimer); + that.doubleTapTimer = null; + that.zoom(that.pointX, that.pointY, that.scale == 1 ? 2 : 1); + } else { + that.doubleTapTimer = setTimeout(function () { + that.doubleTapTimer = null; + + // Find the last touched element + target = point.target; + while (target.nodeType != 1) { + target = target.parentNode; + } + ev = document.createEvent('MouseEvents'); + ev.initMouseEvent('click', true, true, e.view, 1, + point.screenX, point.screenY, point.clientX, point.clientY, + e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, + 0, null); + ev._fake = true; + target.dispatchEvent(ev); + }, that.options.zoom ? 250 : 0); + } + } + + that._resetPos(); + return; + } + if (that.pullDownToRefresh && that.contentReady && that.pullDownEl.className.match('flip')) { + that.pullDownEl.className = 'iScrollPullDown loading'; + that.pullDownLabel.innerText = that.options.pullDownLabel[2]; + that.scroller.style.marginTop = '0'; + that.offsetBottom = 0; + that.refresh(); + that.contentReady = false; + that.options.onPullDown(); + } + if (that.pullUpToRefresh && that.contentReady && that.pullUpEl.className.match('flip')) { + that.pullUpEl.className = 'iScrollPullUp loading'; + that.pullUpLabel.innerText = that.options.pullUpLabel[2]; + that.scroller.style.marginBottom = '0'; + that.offsetTop = 0; + that.refresh(); + that.contentReady = false; + that.options.onPullUp(); + } + if (duration < 300 && that.options.momentum) { + momentumX = newPosX ? that._momentum(newPosX - that.startX, duration, -that.x, that.scrollerW - that.wrapperW + that.x, that.options.bounce ? that.wrapperW : 0) : momentumX; + momentumY = newPosY ? that._momentum(newPosY - that.startY, duration, -that.y, (that.maxScrollY < 0 ? that.scrollerH - that.wrapperH + that.y : 0), that.options.bounce ? that.wrapperH : 0) : momentumY; + newPosX = that.x + momentumX.dist; + newPosY = that.y + momentumY.dist; + if ((that.x > 0 && newPosX > 0) || (that.x < that.maxScrollX && newPosX < that.maxScrollX)) momentumX = { dist:0, time:0 }; + if ((that.y > 0 && newPosY > 0) || (that.y < that.maxScrollY && newPosY < that.maxScrollY)) momentumY = { dist:0, time:0 }; + } + if (momentumX.dist || momentumY.dist) { + newDuration = Math.max(Math.max(momentumX.time, momentumY.time), 10); + if (that.options.snap) { + snap = that._snap(newPosX, newPosY); + newPosX = snap.x; + newPosY = snap.y; + newDuration = Math.max(snap.time, newDuration); + } + that.scrollTo(newPosX, newPosY, newDuration); + return; + } + if (that.options.snap) { + snap = that._snap(that.x, that.y); + if (snap.x != that.x || snap.y != that.y) { + that.scrollTo(snap.x, snap.y, snap.time); + } + return; + } + that._resetPos(); + }, + _resetPos: function (time) { + // Lemma: Disable scrolling automatically to the top of the page. + return; + + var that = this; + var resetX = that.x; + var resetY = that.y; + if (that.x >= 0) resetX = 0; + else if (that.x < that.maxScrollX) resetX = that.maxScrollX; + + if (that.y >= 0 || that.maxScrollY > 0) resetY = 0; + else if (that.y < that.maxScrollY) resetY = that.maxScrollY; + if (that.y < that.maxScrollY) resetY = that.maxScrollY; + + if (resetX == that.x && resetY == that.y) { + if (that.moved) { + if (that.options.onScrollEnd) that.options.onScrollEnd.call(that); + that.moved = false; + } + if (that.zoomed) { + if (that.options.onZoomEnd) that.options.onZoomEnd.call(that); + that.zoomed = false; + } + if (that.hScrollbar && that.options.hideScrollbar) { + that.hScrollbarWrapper.style.webkitTransitionDelay = '300ms'; + that.hScrollbarWrapper.style.opacity = '0'; + } + if (that.vScrollbar && that.options.hideScrollbar) { + that.vScrollbarWrapper.style.webkitTransitionDelay = '300ms'; + that.vScrollbarWrapper.style.opacity = '0'; + } + return; + } + if (time === undefined) time = 200; + if (time) { + that.scroller.style.webkitTransitionTimingFunction = 'cubic-bezier(0.33,0.0,0.33,1)'; + if (that.hScrollbar) that.hScrollbarIndicator.style.webkitTransitionTimingFunction = 'cubic-bezier(0.33,0.0,0.33,1)'; + if (that.vScrollbar) that.vScrollbarIndicator.style.webkitTransitionTimingFunction = 'cubic-bezier(0.33,0.0,0.33,1)'; + } + + that.scrollTo(resetX, resetY, time); + }, + _timedScroll: function (destX, destY, runtime) { + var that = this; + var startX = that.x; + var startY = that.y; + var startTime = (new Date()).getTime(); + var easeOut; + that._transitionTime(0); + if (that.scrollInterval) { + clearInterval(that.scrollInterval); + that.scrollInterval = null; + } + that.scrollInterval = setInterval(function () { + var now = (new Date()).getTime(), + newX, newY; + if (now >= startTime + runtime) { + clearInterval(that.scrollInterval); + that.scrollInterval = null; + that._pos(destX, destY); + that._transitionEnd(); + return; + } + now = (now - startTime) / runtime - 1; + easeOut = Math.sqrt(1 - now * now); + newX = (destX - startX) * easeOut + startX; + newY = (destY - startY) * easeOut + startY; + that._pos(newX, newY); + }, 20); + }, + + _transitionEnd: function (e) { + var that = this; + if (e) e.stopPropagation(); + that._unbind('webkitTransitionEnd'); + that._resetPos(that.returnTime); + that.returnTime = 0; + }, + _gestStart: function (e) { + var that = this; + that._transitionTime(0); + that.lastScale = 1; + if (that.options.onZoomStart) that.options.onZoomStart.call(that); + that._unbind('gesturestart'); + that._bind('gesturechange'); + that._bind('gestureend'); + that._bind('gesturecancel'); + }, + _gestChange: function (e) { + var that = this; + var scale = that.scale * e.scale; + var x, y, relScale; + that.zoomed = true; + if (scale < that.options.zoomMin) scale = that.options.zoomMin; + else if (scale > that.options.zoomMax) scale = that.options.zoomMax; + relScale = scale / that.scale; + x = that.originX - that.originX * relScale + that.x; + y = that.originY - that.originY * relScale + that.y; + that.scroller.style.webkitTransform = $.UITransOpen + x + 'px,' + y + 'px' + $.UITransClose + ' scale(' + scale + ')'; + that.lastScale = relScale; + }, + _gestEnd: function (e) { + var that = this; + var scale = that.scale; + var lastScale = that.lastScale; + that.scale = scale * lastScale; + if (that.scale < that.options.zoomMin + 0.05) that.scale = that.options.zoomMin; + else if (that.scale > that.options.zoomMax - 0.05) that.scale = that.options.zoomMax; + lastScale = that.scale / scale; + that.x = that.originX - that.originX * lastScale + that.x; + that.y = that.originY - that.originY * lastScale + that.y; + that.scroller.style.webkitTransform = $.UITransOpen + that.x + 'px,' + that.y + 'px' + $.UITransClose + ' scale(' + that.scale + ')'; + setTimeout(function () { + that.refresh(); + }, 0); + that._bind('gesturestart'); + that._unbind('gesturechange'); + that._unbind('gestureend'); + that._unbind('gesturecancel'); + }, + _wheel: function (e) { + var that = this; + var deltaX = that.x + e.wheelDeltaX / 12; + var deltaY = that.y + e.wheelDeltaY / 12; + if (deltaX > 0) deltaX = 0; + else if (deltaX < that.maxScrollX) deltaX = that.maxScrollX; + if (deltaY > 0) deltaY = 0; + else if (deltaY < that.maxScrollY) deltaY = that.maxScrollY; + that.scrollTo(deltaX, deltaY, 0); + }, + _momentum: function (dist, time, maxDistUpper, maxDistLower, size) { + var that = this, + deceleration = 0.0006, + speed = Math.abs(dist) / time, + newDist = (speed * speed) / (2 * deceleration), + newTime = 0, outsideDist = 0; + if (dist > 0 && newDist > maxDistUpper) { + outsideDist = size / (6 / (newDist / speed * deceleration)); + maxDistUpper = maxDistUpper + outsideDist; + that.returnTime = 800 / size * outsideDist + 100; + speed = speed * maxDistUpper / newDist; + newDist = maxDistUpper; + } else if (dist < 0 && newDist > maxDistLower) { + outsideDist = size / (6 / (newDist / speed * deceleration)); + maxDistLower = maxDistLower + outsideDist; + that.returnTime = 800 / size * outsideDist + 100; + speed = speed * maxDistLower / newDist; + newDist = maxDistLower; + } + newDist = newDist * (dist < 0 ? -1 : 1); + newTime = speed / deceleration; + return { dist: newDist, time: Math.round(newTime) }; + }, + _offset: function (el, tree) { + var left = -el.offsetLeft; + var top = -el.offsetTop; + if (!tree) return { x: left, y: top }; + while (el = el.offsetParent) { + left -= el.offsetLeft; + top -= el.offsetTop; + } + return { x: left, y: top }; + }, + _snap: function (x, y) { + var that = this; + var i; + var l; + var page; + var time; + var sizeX; + var sizeY; + page = that.pagesX.length-1; + for (i=0, l=that.pagesX.length; i= that.pagesX[i]) { + page = i; + break; + } + } + if (page == that.currPageX && page > 0 && that.dirX < 0) page--; + x = that.pagesX[page]; + sizeX = Math.abs(x - that.pagesX[that.currPageX]); + sizeX = sizeX ? Math.abs(that.x - x) / sizeX * 500 : 0; + that.currPageX = page; + page = that.pagesY.length-1; + for (i=0; i= that.pagesY[i]) { + page = i; + break; + } + } + if (page == that.currPageY && page > 0 && that.dirY < 0) page--; + y = that.pagesY[page]; + sizeY = Math.abs(y - that.pagesY[that.currPageY]); + sizeY = sizeY ? Math.abs(that.y - y) / sizeY * 500 : 0; + that.currPageY = page; + time = Math.round(Math.max(sizeX, sizeY)) || 200; + return { x: x, y: y, time: time }; + }, + _bind: function (type, el) { + (el || this.scroller).addEventListener(type, this, false); + }, + _unbind: function (type, el) { + (el || this.scroller).removeEventListener(type, this, false); + }, + destroy: function () { + var that = this; + if (that.options.checkDOMChange) clearTimeout(that.DOMChangeInterval); + if (that.pullDownToRefresh) { + that.pullDownEl.parentNode.removeChild(that.pullDownEl); + } + if (that.pullUpToRefresh) { + that.pullUpEl.parentNode.removeChild(that.pullUpEl); + } + that.hScrollbar = false; + that.vScrollbar = false; + that._scrollbar('h'); + that._scrollbar('v'); + that.scroller.style.webkitTransform = ''; + that._unbind('webkitTransitionEnd'); + that._unbind($.UIResizeEvt); + that._unbind($.UIStartEvt); + that._unbind($.UIMoveEvt); + that._unbind($.UIEndEvt); + that._unbind($.UICancelEvt); + if (that.options.zoom) { + that._unbind('gesturestart'); + that._unbind('gesturechange'); + that._unbind('gestureend'); + that._unbind('gesturecancel'); + } + }, + refresh: function () { + var that = this; + var pos = 0; + var page = 0; + var i; + var l; + var els; + var oldHeight; + var offsets; + var loading; + if (that.pullDownToRefresh) { + loading = that.pullDownEl.className.match('loading'); + if (loading && !that.contentReady) { + oldHeight = that.scrollerH; + that.contentReady = true; + that.pullDownEl.className = 'iScrollPullDown'; + that.pullDownLabel.innerText = that.options.pullDownLabel[0]; + that.offsetBottom = that.pullDownEl.offsetHeight; + that.scroller.style.marginTop = -that.offsetBottom + 'px'; + } else if (!loading) { + that.offsetBottom = that.pullDownEl.offsetHeight; + that.scroller.style.marginTop = -that.offsetBottom + 'px'; + } + } + if (that.pullUpToRefresh) { + loading = that.pullUpEl.className.match('loading'); + if (loading && !that.contentReady) { + oldHeight = that.scrollerH; + that.contentReady = true; + that.pullUpEl.className = 'iScrollPullUp'; + that.pullUpLabel.innerText = that.options.pullUpLabel[0]; + that.offsetTop = that.pullUpEl.offsetHeight; + that.scroller.style.marginBottom = -that.offsetTop + 'px'; + } else if (!loading) { + that.offsetTop = that.pullUpEl.offsetHeight; + that.scroller.style.marginBottom = -that.offsetTop + 'px'; + } + } + that.wrapperW = that.wrapper.clientWidth; + that.wrapperH = that.wrapper.clientHeight; + that.scrollerW = Math.round(that.scroller.offsetWidth * that.scale); + that.scrollerH = Math.round((that.scroller.offsetHeight - that.offsetBottom - that.offsetTop) * that.scale); + that.maxScrollX = that.wrapperW - that.scrollerW; + that.maxScrollY = that.wrapperH - that.scrollerH; + that.dirX = 0; + that.dirY = 0; + that._transitionTime(0); + that.hScroll = that.options.hScroll && that.maxScrollX < 0; + that.vScroll = that.options.vScroll && (!that.options.bounceLock && !that.hScroll || that.scrollerH > that.wrapperH); + that.hScrollbar = that.hScroll && that.options.hScrollbar; + that.vScrollbar = that.vScroll && that.options.vScrollbar && that.scrollerH > that.wrapperH; + that._scrollbar('h'); + that._scrollbar('v'); + if (typeof that.options.snap == 'string') { + that.pagesX = []; + that.pagesY = []; + els = that.scroller.querySelectorAll(that.options.snap); + for (i=0, l=els.length; i= that.maxScrollX) { + that.pagesX[page] = pos; + pos = pos - that.wrapperW; + page++; + } + if (that.maxScrollX%that.wrapperW) that.pagesX[that.pagesX.length] = that.maxScrollX - that.pagesX[that.pagesX.length-1] + that.pagesX[that.pagesX.length-1]; + pos = 0; + page = 0; + that.pagesY = []; + while (pos >= that.maxScrollY) { + that.pagesY[page] = pos; + pos = pos - that.wrapperH; + page++; + } + if (that.maxScrollY%that.wrapperH) that.pagesY[that.pagesY.length] = that.maxScrollY - that.pagesY[that.pagesY.length-1] + that.pagesY[that.pagesY.length-1]; + } + if (that.options.zoom) { + offsets = that._offset(that.wrapper, true); + that.wrapperOffsetLeft = -offsets.x; + that.wrapperOffsetTop = -offsets.y; + } + if (oldHeight && that.y == 0) { + oldHeight = oldHeight - that.scrollerH + that.y; + that.scrollTo(0, oldHeight, 0); + } + // Lemma: Disable scrolling automatically to the top of the page. + that._resetPos(); + }, + scrollTo: function (x, y, time, relative) { + var that = this; + if (relative) { + x = that.x - x; + y = that.y - y; + } + time = !time || (Math.round(that.x) == Math.round(x) && Math.round(that.y) == Math.round(y)) ? 0 : time; + that.moved = true; + if (!that.options.HWTransition) { + that._timedScroll(x, y, time); + return; + } + if (time) that._bind('webkitTransitionEnd'); + that._transitionTime(time); + that._pos(x, y); + if (!time) setTimeout(function () { that._transitionEnd(); }, 0); + }, + scrollToElement: function (el, time) { + var that = this, pos; + el = el.nodeType ? el : that.scroller.querySelector(el); + if (!el) return; + pos = that._offset(el); + pos.x = pos.x > 0 ? 0 : pos.x < that.maxScrollX ? that.maxScrollX : pos.x; + pos.y = pos.y > 0 ? 0 : pos.y < that.maxScrollY ? that.maxScrollY : pos.y; + time = time === undefined ? Math.max(Math.abs(pos.x)*2, Math.abs(pos.y)*2) : time; + that.scrollTo(pos.x, pos.y, time); + }, + scrollToPage: function (pageX, pageY, time) { + var that = this, x, y; + if (that.options.snap) { + pageX = pageX == 'next' ? that.currPageX+1 : pageX == 'prev' ? that.currPageX-1 : pageX; + pageY = pageY == 'next' ? that.currPageY+1 : pageY == 'prev' ? that.currPageY-1 : pageY; + pageX = pageX < 0 ? 0 : pageX > that.pagesX.length-1 ? that.pagesX.length-1 : pageX; + pageY = pageY < 0 ? 0 : pageY > that.pagesY.length-1 ? that.pagesY.length-1 : pageY; + that.currPageX = pageX; + that.currPageY = pageY; + x = that.pagesX[pageX]; + y = that.pagesY[pageY]; + } else { + x = -that.wrapperW * pageX; + y = -that.wrapperH * pageY; + if (x < that.maxScrollX) x = that.maxScrollX; + if (y < that.maxScrollY) y = that.maxScrollY; + } + that.scrollTo(x, y, time || 400); + }, + zoom: function (x, y, scale) { + var that = this; + var relScale = scale / that.scale; + x = x - that.wrapperOffsetLeft - that.x; + y = y - that.wrapperOffsetTop - that.y; + that.x = x - x * relScale + that.x; + that.y = y - y * relScale + that.y; + that.scale = scale; + if (that.options.onZoomStart) that.options.onZoomStart.call(that); + that.refresh(); + that._bind('webkitTransitionEnd'); + that._transitionTime(200); + setTimeout(function () { + that.zoomed = true; + that.scroller.style.webkitTransform = $.UITransOpen + that.x + 'px,' + that.y + 'px' + $.UITransClose + ' scale(' + scale + ')'; + }, 0); + } +}; + +$.extend($, { + UIScrollers : {}, + UIEnableScrolling : function(options) { + $.ready(function() { + try { + var scrollpanels = $$("scrollpanel"); + var count = 0; + scrollpanels.forEach(function(item) { + item.setAttribute("ui-scroller", $.UIUuid()); + var whichScroller = item.getAttribute("ui-scroller"); + $.UIScrollers[whichScroller] = new $.UIScroll(item.parentNode, options); + }); + } catch(e) { } + }); + } +}); +$.UIEnableScrolling({ desktopCompatibility: true }); +$.extend($, { + UIPaging : function( selector, opts ) { + var myPager = new $.UIScroll( selector, opts ); + var stack = null; + if (selector.nodeType === 1) { + stack = $("stack", selector); + selector.parentNode.setAttribute("ui-scroller", "myPager"); + } else { + stack = $("stack", $(selector)); + selector = $(selector); + selector.parentNode.setAttribute("ui-scroller", "myPager"); + } + var panels = stack.children.length; + var indicatorsWidth = selector.parentNode.css("width"); + var indicators = ''; + for (var i = 0; i < panels; i++) { + if (i === 0) { + indicators += ''; + } else { + indicators += ""; + } + } + indicators += ""; + // The maximum number of indicators in portrait view is 17. + selector.parentNode.parentNode.insert(indicators); + } +}); + +$.ready(function() { + if ($("stack[ui-implements=paging]")) { + $.UIPaging("stack[ui-implements=paging] > panel", { + snap: true, + momentum: false, + hScrollbar: false, + onScrollEnd: function () { + document.querySelector('stack[ui-implements="indicators"] > indicator.active').removeClass('active'); + document.querySelector('stack[ui-implements="indicators"] > indicator:nth-child(' + (this.currPageX+1) + ')').addClass('active'); + } + }); + + } +}); +$.extend(HTMLElement.prototype, { + UIExpander : function ( opts ) { + opts = opts || {}; + var status = opts.status || "expanded"; + var title = opts.title || "Open"; + var altTitle = opts.altTitle || "Close"; + var expander = this; + var panel = $("panel", this); + var header = "
"; + this.insert(header, "first"); + panel.setAttribute("ui-height", parseInt(panel.css("height"), 10)); + if (status === "expanded") { + expander.toggleClass("ui-status-expanded", "ui-status-collapsed"); + $("label", this).text(altTitle); + panel.style.height = panel.getAttribute("ui-height") + "px"; + panel.css("{opacity: 1;}"); + } else { + $("label", this).text(title); + panel.css("{height: 0px; opacity: 0;}"); + expander.toggleClass("ui-status-collapsed", "ui-status-expanded"); + } + expander.delegate("header", "click", function() { + alert("hi"); + if (panel.style.height === "0px") { + panel.style.height = panel.getAttribute("ui-height") + "px"; + panel.style.opacity = 1; + $("label", this).text(altTitle); + expander.toggleClass("ui-status-collapsed", "ui-status-expanded"); + + } else { + panel.css("{height: 0px; opacity: 0;}"); + $("label", this).text(title); + expander.toggleClass("ui-status-expanded", "ui-status-collapsed"); + } + }); + } +}); +$.extend($, { + UIDeletableTableCells : [], + UIDeleteTableCell : function( selector, toolbar, callback ) { + this.deletionList = []; + var listEl = $(selector); + var toolbarEl = $(toolbar); + var deleteButtonTemp = ''; + var editButtonTemp = ''; + toolbarEl.insertAdjacentHTML("afterBegin", deleteButtonTemp); + toolbarEl.insertAdjacentHTML("beforeEnd", editButtonTemp); + var deleteDisclosure = '✓'; + $$(selector + " > tablecell").forEach(function(item) { + item.insertAdjacentHTML("afterBegin", deleteDisclosure); + }); + + listEl.setAttribute("data-deletable-items", 0); + var UIEditExecution = function() { + $(toolbar + " > uibutton[ui-implements=edit]").bind("click", function() { + if ($("label", this).text() === "Edit") { + this.UIToggleButtonLabel("Edit", "Done"); + this.setAttribute("ui-implements", "done"); + listEl.addClass("ui-show-delete-disclosures"); + this.parentNode.firstElementChild.style.display = "-webkit-inline-box"; + if (/uibutton/i.test(toolbarEl.children[1].nodeName)) { + toolbarEl.children[1].css("display", "none;"); + } + $$("tablecell > img", listEl).forEach(function(img) { + img.css("{-webkit-transform: translate3d(40px, 0, 0)}"); + }); + } else { + this.UIToggleButtonLabel("Edit", "Done"); + this.removeAttribute("ui-implements"); + this.parentNode.firstElementChild.style.display = "none"; + listEl.removeClass("ui-show-delete-disclosures"); + $$("deletedisclosure").forEach(function(disclosure) { + disclosure.removeClass("checked"); + disclosure.ancestorByTag("tablecell").removeClass("deletable"); + }); + if (/uibutton/i.test(toolbarEl.children[1].nodeName)) { + toolbarEl.children[1].css("display", "-webkit-inline-box;"); + } + $("uibutton[ui-implements=delete]").addClass("disabled"); + + $$("tablecell > img", listEl).forEach(function(img) { + img.css("{-webkit-transform: translate3d(0, 0, 0)}"); + }); + } + }); + }; + var UIDeleteDisclosureSelection = function() { + $$("deletedisclosure").forEach(function(disclosure) { + disclosure.bind("click", function() { + disclosure.toggleClass("checked"); + disclosure.ancestorByTag("tablecell").toggleClass("deletable"); + $("uibutton[ui-implements=delete]").removeClass("disabled"); + if (!disclosure.ancestorByTag("tablecell").hasClass("deletable")) { + listEl.setAttribute("data-deletable-items", parseInt(listEl.data("deletable-items"), 10) - 1); + if (parseInt(listEl.data("deletable-items"), 10) === 0) { + toolbarEl.firstElementChild.addClass("disabled"); + } + } else { + listEl.data("deletable-items", parseInt(listEl.data("deletable-items"), 10) + 1); + } + }); + }); + }; + + var UIDeletionExecution = function() { + $("uibutton[ui-implements=delete]").bind("click", function() { + if (this.hasClass("disabled")) { + return false; + } + $$(".deletable").forEach(function(item) { + listEl.data("deletable-items", parseInt(listEl.data("deletable-items"), 10) - 1); + $.UIDeletableTableCells.push(item.id); + item.remove(); + if (!!callback) { + callback.call(this, item); + } + $.UIDeletableTableCells = []; + listEl.setAttribute("data-deletable-items", 0); + }); + this.addClass("disabled"); + $.UIScrollers[$("scrollpanel", $(selector).ancestor("view")).getAttribute("ui-scroller")].refresh(); + }); + }; + UIEditExecution(); + UIDeleteDisclosureSelection(); + UIDeletionExecution(); + } +}); + +$.extend(HTMLElement.prototype, { + UIScreenCover : function() { + var screencover = ''; + if (!$("screencover")) { + this.insert(screencover); + } + } +}); +$.extend($, { + /* + option values: + selector: + name: + range: {start:, end:, values: } + step: + defaultValue: + buttonClass: + indicator: + */ + UISpinner : function (opts) { + if (!!opts.selector) { + var spinner = $(opts.selector); + } + var defaultValue = null; + var step = opts.step; + if (opts.range.start >= 0) { + var rangeStart = opts.range.start || ""; + var rangeEnd = opts.range.end || ""; + var tempNum = rangeEnd - rangeStart; + tempNum++; + var range = []; + if (step) { + var mod = ((rangeEnd-rangeStart)/step); + if (opts.range.start == 0) { + range.push(0); + } else { + range.push(rangeStart); + } + for (var i = 1; i < mod; i++) { + range.push(range[i-1] + step); + } + range.push(range[range.length-1] + step); + } else { + for (var i = 0, tempNum; i < tempNum; i++) { + range.push(rangeStart + i); + } + } + } + var icon = (opts.indicator === "plus") ? "" : ""; + var buttonClass = opts.buttonClass ? " class='" + opts.buttonClass + "' " : ""; + var decreaseButton = "" + icon + ""; + var increaseButton = "" + icon + ""; + var spinnerTemp = decreaseButton + "" + increaseButton; + spinner.insert(spinnerTemp); + if (opts.range.values) { + spinner.data("range-value", opts.range.values.join(",")); + } + if (!opts.defaultValue) { + if (!!opts.range.start || opts.range.start == 0) { + defaultValue = opts.range.start == 0 ? "0": opts.range.start; + } else if (opts.range.values instanceof Array) { + defaultValue = opts.range.values[0]; + $("uibutton:first-of-type", opts.selector).addClass("disabled"); + } + } else { + defaultValue = opts.defaultValue + } + if (range) { + spinner.data("range-value", range.join(",")); + } + + $("label[ui-kind=spinner-label]", spinner).text(defaultValue); + $("input", spinner).value = defaultValue; + + if (defaultValue == opts.range.start) { + $("uibutton:first-of-type", spinner).addClass("disabled"); + } + if (defaultValue == opts.range.end) { + $("uibutton:last-of-type", spinner).addClass("disabled"); + } + $("uibutton:first-of-type", opts.selector).bind("click", function(button) { + $.decreaseSpinnerValue.call(this, opts.selector); + }); + $("uibutton:last-of-type", opts.selector).bind("click", function(button) { + $.increaseSpinnerValue.call(this, opts.selector); + }); + }, + + decreaseSpinnerValue : function(selector) { + var values = $(selector).data("range-value"); + values = values.split(","); + var defaultValue = $("label", selector).text().trim(); + var idx = values.indexOf(defaultValue); + if (idx !== -1) { + $("uibutton:last-of-type", selector).removeClass("disabled"); + $("[ui-kind=spinner-label]", selector).text(values[idx-1]); + $("input", selector).value = values[idx-1]; + if (idx === 1) { + this.addClass("disabled"); + } + } + }, + + increaseSpinnerValue : function(selector) { + var values = $(selector).data("range-value"); + values = values.split(","); + var defaultValue = $("label", selector).text().trim(); + var idx = values.indexOf(defaultValue); + if (idx !== -1) { + $("uibutton:first-of-type", selector).removeClass("disabled"); + $("label[ui-kind=spinner-label]", selector).text(values[idx+1]); + $("input", selector).value = values[idx+1]; + if (idx === values.length-2) { + this.addClass("disabled"); + } + } + } +}); + +$.extend($, { + + UIPopUpIsActive : null, + UIPopUpIdentifier : null, + + UIPopUp : function( opts ) { + var selector = null; + if (opts.selector) { + selector = opts.selector; + } else { + return false; + } + var title = "Alert!"; + if (opts.title) { + title = opts.title; + } + var message = ""; + if (opts.message) { + message = opts.message; + } + var cancelUIButton = "Cancel"; + if (opts.cancelUIButton) { + cancelUIButton = opts.cancelUIButton; + } + var continueUIButton = "Continue"; + if (opts.continueUIButton) { + continueUIButton = opts.continueUIButton; + } + var popup = ''; + popup += '

' + title + '

'; + popup += '

' + message +'

'; + popup += ''; + popup += ''; + $(selector).UIScreenCover(); + $(selector).insertAdjacentHTML("beforeEnd", popup); + var popupUIButtons = document.querySelectorAll(selector + " popup uibutton"); + for (var i = 0, len = popupUIButtons.length; i < len; i++) { + popupUIButtons[i].addEventListener("click", function(e) { + e.preventDefault(); + $(selector + " screencover").setAttribute("ui-visible-state", "hidden"); + $(selector + " popup").setAttribute("ui-visible-state", "hidden"); + }, false); + $.UIPopUpIsActive = false; + $.UIPopUpIdentifier = null; + popupUIButtons[i].addEventListener("touchend", function(e) { + e.preventDefault(); + $(selector + " screencover").setAttribute("ui-visible-state", "hidden"); + $(selector + " popup").setAttribute("ui-visible-state", "hidden"); + }, false); + $.UIPopUpIsActive = false; + $.UIPopUpIdentifier = null; + } + if (opts.callback) { + var callbackSelector = selector + " popup uibutton[ui-implements=continue]"; + $(callbackSelector).addEventListener("click", function() { + opts.callback.call(opts.callback, this); + }, false); + } + } +}); + +$.extend($, { + UIPopUpIsActive : false, + UIPopUpIdentifier : null, + UIScreenCoverIdentifier : null, + UIShowPopUp : function( selector ) { + var selector = selector; + $.UIPopUpIsActive = true; + $.UIPopUpIdentifier = selector; + //var screenCover = $(selector + " screencover"); + var screenCover = $("view > screencover"); + $.UIScreenCoverIdentifier = screenCover; + screenCover.addEventListener("touchmove", function(e) { + e.preventDefault(); + }, false ); + $.UIPositionScreenCover(screenCover); + $.UIPositionPopUp(selector); + screenCover.setAttribute("ui-visible-state", "visible"); + $(selector + " popup").setAttribute("ui-visible-state", "visible"); + }, + UIPositionScreenCover : function(screenCover) { + screenCover.cssText = "height:" + (window.innerHeight + window.pageYOffset) + "px"; + var popup = $($.UIPopUpIdentifier + " popup"); + }, + UIPositionPopUp : function(selector) { + $.UIPopUpIsActive = true; + $.UIPopUpIdentifier = selector; + var popup = $(selector + " popup"); + + popup.style.top = ((window.innerHeight /2) + window.pageYOffset) - (popup.clientHeight /2) + "px"; + popup.style.left = (window.innerWidth / 2) - (popup.clientWidth / 2) + "px"; + }, + UIRepositionPopupOnOrientationChange : function ( ) { + $.body.bind("orientationchange", function() { + if (window.orientation === 90 || window.orientation === -90) { + if ($.UIPopUpIsActive) { + $.UIPositionScreenCover($.UIScreenCoverIdentifier); + $.UIPositionPopUp($.UIPopUpIdentifier); + } + } else { + if ($.UIPopUpIsActive) { + $.UIPositionScreenCover($.UIScreenCoverIdentifier); + $.UIPositionPopUp($.UIPopUpIdentifier); + } + } + }); + window.addEventListener("resize", function() { + if ($.UIPopUpIsActive) { + $.UIPositionScreenCover($.UIScreenCoverIdentifier); + $.UIPositionPopUp($.UIPopUpIdentifier); + } + }, false); + } +}); + +$.ready(function() { + $.UIRepositionPopupOnOrientationChange(); +}); + +$.extend(HTMLElement.prototype, { + UISelectionList : function ( callback ) { + var listitems = $.collectionToArray(this.children); + listitems.forEach(function(item) { + if (item.nodeName.toLowerCase() === "tablecell") { + var checkmark = "✓"; + item.insert(checkmark); + item.bind("click", function() { + listitems.forEach(function(check) { + check.removeClass("selected"); + }); + this.addClass("selected"); + this.last().checked = true; + if (callback) { + callback.call(callback, this); + } + }); + } + }); + } +}); + +$.extend(HTMLElement.prototype, { + UICreateSwitchControl : function( opts ) { + var customClass, status, value, callback; + var id = opts.id; + if(!opts.customClass) { + customClass = ""; + } else { + customClass = ' ' + opts.customClass; + } + if (!!opts.status) { + status = opts.status; + } else { + status = "off"; + } + if (!!opts.value) { + value = opts.value; + } else { + value = ""; + } + if (!!opts.callback) { + callback = opts.callback; + } else { + callback = function() { return false; }; + } + var uiswitch = ''; + if (this.css("position") !== "absolute") { + this.css("{position: relative;}"); + } + this.insert(uiswitch); + var newSwitchID = "#" + id; + this.addClass("ui-no-hover"); + $(newSwitchID).bind("click", function() { + this.UISwitchControl(callback); + }); + } +}); + +$.extend(HTMLElement.prototype, { + UISwitchControl : function (callback) { + if (!callback) { + var callback = function() { return false; }; + } + if (this.nodeName.toLowerCase()==="switchcontrol") { + callback.call(callback, this); + if (this.hasClass("off")) { + this.toggleClass("on", "off"); + this.checked = true; + } else { + this.toggleClass("on", "off"); + this.checked = false; + } + } else { + return false; + } + } +}); + +$.extend(HTMLElement.prototype, { + UIInitSwitchToggling : function() { + $$("switchcontrol", this).forEach(function(item) { + item.parentNode.addClass("ui-no-hover"); + if (item.hasClass("on")) { + item.checked = true; + } else { + item.checked = false; + } + item.bind("click", function(e) { + this.parentNode.style.backgroundImage = "none"; + e.preventDefault(); + this.UISwitchControl(); + }); + }); + } +}); +$.ready(function() { + $.app.UIInitSwitchToggling(); +}); + +$.extend(HTMLElement.prototype, { + UICreateSegmentedControl : function(opts, position) { + var position = position || null; + var segmentedControl = ""; + } + } + if (opts.titlesOfSegments) { + segmentedControl += ""; + } + segmentedControl += ""; + count++; + } + segmentedControl += ""; + if (position) { + this.insert(segmentedControl, position); + } else { + this.insert(segmentedControl); + } + $("#" + opts.id).UISegmentedControl(); + if (opts.container) { + if (opts.selectedSegment) { + $(opts.container).children[opts.selectedSegment].css("{opacity: 1; z-index: " + opts.numberOfSegments + "}"); + } else { + $(opts.container).children[0].css("{opacity: 1; z-index: " + opts.numberOfSegments + "}"); + } + } + } + } +}); + +$.extend(HTMLElement.prototype, { + UISegmentedControl : function( callback, container ) { + var that = this; + var container = container || null; + var val = null; + var callback = callback || function(){}; + var buttons = $.collectionToArray(this.children); + var cont = $(container); + if (!this.hasAttribute('ui-selected-segment')) { + this.setAttribute("ui-selected-segment", ""); + } + if (this.getAttribute("ui-selected-index")) { + val = this.getAttribute("ui-selected-index"); + var seg = this.children(val); + try { + seg = seg.getAttribute("id"); + this.setAttribute("ui-selected-segment", seg); + this.childred[val].addClass("selected"); + } catch(e) {} + } else { + var checkChildNodesForAttr = -1; + for (var i = 0, len = this.children.length; i < len; i++) { + if (this.children[i].hasClass("selected")) { + this.setAttribute("ui-selected-index", i); + } else { + checkChildNodesForAttr++; + } + } + if (checkChildNodesForAttr === this.children.length-1) { + this.setAttribute("ui-selected-index", 0); + this.firstElementChild.addClass("selected"); + } + } + if (container) { + container = $(container); + if (val) { + container.setAttribute("ui-selected-index", val); + } else { + container.setAttribute("ui-selected-index", 0); + } + var containerChildren = $.collectionToArray(container.children); + containerChildren.forEach(function(child) { + child.css("{opacity: 0; z-index: 1;}"); + }); + containerChildren[val].css("{opacity: 1; z-index: " + containerChildren.length + "}"); + that.setAttribute("ui-segmented-container", ("#" + container.id)); + var selectedIndex = this.getAttribute("ui-selected-index"); + var containerHeight = container.children[selectedIndex].css("height"); + container.style.height = containerHeight; + } + + buttons.forEach(function(button) { + if (!button.hasAttribute("id")) { + button.setAttribute("id", $.UIUuid()); + } + if (!that.getAttribute("ui-selected-segment")) { + if (button.hasClass("selected")) { + that.setAttribute("ui-selected-segment", button.getAttribute("id")); + } + } + button.bind("click", function() { + var selectedSegment = that.getAttribute("ui-selected-segment"); + var selectedIndex = that.getAttribute("ui-selected-index"); + var childPosition = null; + var container = null; + var ancestor = this.ancestor("segmentedcontrol"); + if (ancestor.hasAttribute("ui-segmented-container")) { + container = ancestor.getAttribute("ui-segmented-container"); + } + var oldSelection = null; + if (ancestor.hasAttribute("ui-selected-index")) { + oldSelection = ancestor.getAttribute("ui-selected-index"); + } + var uisi = null; + if (!selectedSegment) { + uisi = this.getAttribute("ui-child-position"); + that.setAttribute("ui-selected-index", uisi); + that.setAttribute("ui-selected-segment", this.getAttribute("id")); + this.addClass("selected"); + childPosition = this.getAttribute("ui-child-position"); + container.children[val].css("{opacity: 0; z-index: 1;}"); + container.children[childPosition].css("{opacity: 0; z-index: " + val + "}"); + } + if (selectedSegment) { + uisi = this.getAttribute("ui-child-position"); + that.setAttribute("ui-selected-index", uisi); + var oldSelectedSegment = $(("#" + selectedSegment)); + oldSelectedSegment.removeClass("selected"); + that.setAttribute("ui-selected-segment", this.getAttribute("id")); + this.addClass("selected"); + childPosition = this.getAttribute("ui-child-position"); + if (that.getAttribute("ui-segmented-container")) { + var container = $(that.getAttribute("ui-segmented-container")); + container.children(oldSelection).css("{opacity: 0; z-index: 1;}"); + container.children(uisi).css("{opacity: 1; z-index: 3;}"); + container.children[oldSelectedSegment.getAttribute("ui-child-position")].css("{z-index: 1;}"); + container.children[childPosition].css("{z-index: " + container.children.length + "}"); + container.style.height = container.children[childPosition].css("height"); + var scrollpanel = container.ancestor("scrollpanel"); + var scroller = new $.UIScroll(scrollpanel, { desktopCompatibility: true }); + } + } + this.addClass("selected"); + callback.call(callback, button); + }); + }); + this.UIIdentifyChildNodes(); + } +}); + +$.ready(function() { + /* Turned off to fix bug? */ + if ( 0 == 1 ) { + $$("segmentedcontrol").forEach(function(segmentedcontrol) { + if (segmentedcontrol.getAttribute("ui-implements") !== "segmented-paging") { + segmentedcontrol.UISegmentedControl(); + var scroller = segmentedcontrol.ancestor("scrollpanel").getAttribute("ui-scroller"); + $.UIScrollers[scroller].destroy(); + $.UIScrollers[scroller] = new $.UIScroll(segmentedcontrol.ancestor("scrollpanel").parentNode); + } + }); + } +}); + +$.extend(HTMLElement.prototype, { + UISegmentedPagingControl : function ( ) { + var segmentedPager = $("segmentedcontrol[ui-implements=segmented-paging]"); + var pagingOrientation = segmentedPager.getAttribute("ui-paging"); + segmentedPager.setAttribute("ui-paged-subview", 0); + segmentedPager.first().addClass("disabled"); + var subviews = $$("subview", this); + segmentedPager.setAttribute("ui-pagable-subviews", subviews.length); + var childPosition = 0; + subviews.forEach(function(item) { + item.setAttribute("ui-navigation-status", "upcoming"); + item.setAttribute("ui-child-position", childPosition); + childPosition++; + item.setAttribute("ui-paging-orient", pagingOrientation); + }); + subviews[0].setAttribute("ui-navigation-status", "current"); + segmentedPager.delegate("uibutton", "click", function(button) { + var pager = button.ancestor("segmentedcontrol"); + if (button.isSameNode(button.parentNode.firstElementChild)) { + if (pager.getAttribute("ui-paged-subview") === 1) { + button.addClass("disabled"); + pager.setAttribute("ui-paged-subview", 0); + subviews[0].setAttribute("ui-navigation-status", "current"); + subviews[1].setAttribute("ui-navigation-status", "upcoming"); + } else { + subviews[pager.getAttribute("ui-paged-subview") - 1 ].setAttribute( "ui-navigation-status", "current"); + subviews[pager.getAttribute("ui-paged-subview")].setAttribute("ui-navigation-status", "upcoming"); + pager.setAttribute("ui-paged-subview", pager.getAttribute("ui-paged-subview")-1); + button.next().removeClass("disabled"); + if (pager.getAttribute("ui-paged-subview") == 0) { + button.addClass("disabled"); + } + } + } else { + var pagableSubviews = pager.getAttribute("ui-pagable-subviews"); + var pagedSubview = pager.getAttribute("ui-paged-subview"); + if (pager.getAttribute("ui-paged-subview") == pagableSubviews-1) { + button.addClass("disabled"); + } else { + button.previous().removeClass("disabled"); + subviews[pagedSubview].setAttribute("ui-navigation-status", "traversed"); + subviews[++pagedSubview].setAttribute("ui-navigation-status", "current"); + pager.setAttribute("ui-paged-subview", (pagedSubview)); + if (pager.getAttribute("ui-paged-subview") == pagableSubviews-1) { + button.addClass("disabled"); + } + } + } + }); + } +}); + +$.extend(HTMLElement.prototype, { + UICreateTabBar : function ( opts ) { + var id = opts.id || $.UIUuid(); + var imagePath = opts.imagePath || "icons\/"; + var numberOfTabs = opts.numberOfTabs || 1; + var tabLabels = opts.tabLabels; + var iconsOfTabs = opts.iconsOfTabs; + var selectedTab = opts.selectedTab || 0; + var disabledTab = opts.disabledTab || null; + var tabbar = ""; + this.setAttribute("ui-tabbar-id", id); + for (var i = 0; i < numberOfTabs; i++) { + tabbar += ""; + tabbar += ""; + } + tabbar += ""; + this.insert(tabbar); + var subviews = $$("subview", this); + subviews[selectedTab].addClass("selected"); + this.UITabBar(); + }, + + UITabBar : function ( ) { + var tabs = $$("tabbar > uibutton[ui-implements=tab]", this); + $("tabbar", this).UIIdentifyChildNodes(); + var tabbar = $("tabbar", this); + var subviews = $$("subview", this); + subviews.forEach(function(subview) { + subview.addClass("unselected"); + }); + var selectedTab = tabbar.getAttribute("ui-selected-tab") || 0; + subviews[selectedTab].toggleClass("unselected","selected"); + tabs[selectedTab].addClass("selected"); + tabs.forEach(function(tab) { + tab.bind("click", function() { + if (tab.hasClass("disabled") || tab.hasClass("selected")) { + return false; + } + var whichTab = tab.ancestor("tabbar").getAttribute("ui-selected-tab"); + tabs[whichTab].removeClass("selected"); + tab.addClass("selected"); + subviews[whichTab].removeClass("selected"); + subviews[whichTab].addClass("unselected"); + subviews[tab.getAttribute("ui-child-position")].addClass("selected"); + subviews[tab.getAttribute("ui-child-position")].removeClass("unselected"); + tabbar.setAttribute("ui-selected-tab", tab.getAttribute("ui-child-position")); + }); + }); + }, + + UITabBarForViews : function ( ) { + var tabs = $$("tabbar > uibutton[ui-implements=tab]", this); + $("tabbar", this).UIIdentifyChildNodes(); + var tabbar = $("tabbar", this); + var views = $$("view[ui-implements=tabbar-panel]", this); + views.forEach(function(subview) { + subview.setAttribute("ui-navigation-status","upcoming"); + }); + var selectedTab = tabbar.getAttribute("ui-selected-tab") || 0; + views[selectedTab].setAttribute("ui-navigation-status","current"); + tabs[selectedTab].addClass("selected"); + tabs.forEach(function(tab) { + tab.bind("click", function() { + if (tab.hasClass("disabled") || tab.hasClass("selected")) { + return false; + } + var whichTab = tab.ancestor("tabbar").getAttribute("ui-selected-tab"); + tabs[whichTab].removeClass("selected"); + tab.addClass("selected"); + views[whichTab].setAttribute("ui-navigation-status", "upcoming"); + views[tab.getAttribute("ui-child-position")].setAttribute("ui-navigation-status", "current"); + tabbar.setAttribute("ui-selected-tab", tab.getAttribute("ui-child-position")); + }); + }); + } +}); + +$.extend(HTMLElement.prototype, { + UIActionSheet : function(opts) { + var that = this; + var actionSheetID = opts.id; + var actionSheetColor = "undefined"; + if (!!opts.color) { + actionSheetColor = opts.color; + } + + $.body.UIScreenCover(); + var createActionSheet = function() { + var actionSheetStr = ""; + var actionSheet = $.make(actionSheetStr); + that.insert(actionSheet, "last"); + }; + createActionSheet(); + var actionSheetUIButtons = "#" + actionSheetID + " uibutton"; + $$(actionSheetUIButtons).forEach(function(button) { + button.bind("click", function() { + $.UIHideActionSheet(); + }); + }); + var myScroll = new $.UIScroll($("#" + actionSheetID + " > scrollpanel"), { desktopCompatibility: true }); + } +}); +$.extend($, { + + UIShowActionSheet : function(actionSheetID) { + $.app.data("ui-action-sheet-id", actionSheetID); + window.scrollTo(0,1); + //var screenCover = $("body > screencover"); + var screenCover = $("view > screencover"); + screenCover.css("{ width: '" + window.innerWidth + "px; height: " + window.innerHeight + "px; }"); + screenCover.setAttribute("ui-visible-state", "visible"); + $(actionSheetID).removeClass("hidden"); + screenCover.addEventListener("touchmove", function(e) { + e.preventDefault(); + }, false ); + }, + UIHideActionSheet : function() { + var actionSheet = $.app.data("ui-action-sheet-id"); + $("screencover").setAttribute("ui-visible-state", "hidden"); + try{ $(actionSheet).addClass("hidden"); } catch(e) {} + $.app.removeData("ui-action-sheet-id"); + }, + UIReadjustActionSheet : function() { + var actionSheetID = ""; + if ($.app.data("ui-action-sheet-id")) { + actionSheetID = $.app.data("ui-action-sheet-id"); + if (!$.standalone) { + $(actionSheetID).css("{ right: 0; bottom: -60px; left: 0;}"); + } else { + $(actionSheetID).css("{ right: 0; bottom: -10px; left: 0;}"); + } + } + } +}); +document.addEventListener("orientationchange", function() { + $.UIReadjustActionSheet(); +}, false); + +$.extend(HTMLElement.prototype, { + UIExpander : function ( opts ) { + opts = opts || {}; + var status = opts.status || "expanded"; + var title = opts.title || "Open"; + var altTitle = opts.altTitle || "Close"; + var expander = this; + var panel = $("panel", this); + var header = "
"; + this.insert(header, "first"); + panel.setAttribute("ui-height", parseInt(panel.css("height"), 10)); + if (status === "expanded") { + expander.toggleClass("ui-status-expanded", "ui-status-collapsed"); + $("label", this).text(altTitle); + panel.style.height = panel.getAttribute("ui-height") + "px"; + panel.css("{opacity: 1;}"); + } else { + $("label", this).text(title); + panel.css("{height: 0px; opacity: 0;}"); + expander.toggleClass("ui-status-collapsed", "ui-status-expanded"); + } + $("header", expander).bind("click", function() { + if (panel.style.height === "0px") { + panel.style.height = panel.getAttribute("ui-height") + "px"; + panel.style.opacity = 1; + $("label", this).text(altTitle); + expander.toggleClass("ui-status-collapsed", "ui-status-expanded"); + + } else { + panel.css("{height: 0px; opacity: 0;}"); + $("label", this).text(title); + expander.toggleClass("ui-status-expanded", "ui-status-collapsed"); + } + }); + } +}); +$.extend(HTMLElement.prototype, { + UICalculateNumberOfLines : function () { + var lineHeight = parseInt(this.css("line-height"), 10); + var height = parseInt(this.css("height"), 10); + var lineNums = Math.floor(height / lineHeight); + return lineNums; + }, + UIParagraphEllipsis : function () { + var lines = this.UICalculateNumberOfLines(); + this.css("{-webkit-line-clamp:" + lines + "}"); + } +}); +$.extend(HTMLElement.prototype, { + UIProgressBar : function ( opts ) { + if (!opts) { + var opts = {}; + } + var className = opts.className || false; + var width = opts.width || 100; + var speed = opts.speed || 5; + var position = opts.position || "after"; + var margin = opts.margin || "10px auto"; + var bar = " siblingRightWidth) { + subtractableWidth = siblingLeftWidth * 2; + } else { + subtractableWidth = siblingRightWidth * 2; + } + if (subtractableWidth > 0) { + if((availableSpace - subtractableWidth) < 40) { + + title.css("{display: none;}"); + } else { + title.css("{display: block; width: " + (availableSpace - subtractableWidth - 20) + "px;}"); + } + } + }); + } +}); +document.addEventListener("DOMContentLoaded", function() { + if (!$("splitview")) { + $.UIAdjustToolBarTitle(); + } +}, false); +document.addEventListener("orientationchange", function() { + if (!$("splitview")) { + $.UIAdjustToolBarTitle(); + } +}, false); +window.addEventListener("resize", function() { + if (!$("splitview")) { + $.UIAdjustToolBarTitle(); + } +}, false); + +$.UIActivityIndicator = function() {}; +$.extend($.UIActivityIndicator.prototype, { + id : null, + color : null, + shadow : null, + container : null, + size : null, + init : function(opts) { + if (opts) { + this.id = opts.id || "UIActivityIndicator"; + this.color = opts.color || "gray"; + if (!!opts.shadow) { + this.shadow = opts.shadow; + } + this.container = opts.container; + this.size = opts.size || "75%"; + } + $(this.container).css("{ background-position: center 70%; background-repeat: no-repeat; background-image: -webkit-canvas(" + this.id + "); background-size: " + this.size + " " + this.size + "}"); + this.context = document.getCSSCanvasContext("2d", this.id, 37, 37); + this.context.lineWidth = 3; + this.context.lineCap = "round"; + this.context.strokeStyle = this.color; + if (this.shadow) { + this.context.shadowOffsetX = 1; + this.context.shadowOffsetY = 1; + this.context.shadowBlur = 2; + this.context.shadowColor = this.shadow; + } + this.step = 0; + this.timer = null; + }, + draw : function() { + this.context.clearRect(0, 0, 137, 37); + this.context.save(); + this.context.translate(18, 18); + this.context.rotate(this.step * Math.PI / 180); + for (var i = 0; i < 12; i++) { + this.context.rotate(30 * Math.PI / 180); + this.drawLine(i); + } + this.context.restore(); + this.step += 30; + if (this.step === 360) { + this.step = 0; + } + }, + drawLine : function(i) { + this.context.beginPath(); + this.context.globalAlpha = i / 12; + this.context.moveTo(0, 8 + 1); + this.context.lineTo(0, 16 - 1); + this.context.stroke(); + }, + stop : function() { + if (this.timer) { + this.context.clearRect(0, 0, 37, 37); + window.clearInterval(this.timer); + this.timer = null; + } + }, + animate : function() { + if (this.timer) { + return; + } + var that = this; + this.timer = window.setInterval(function() { + that.draw(); + }, 100); + } +}); + +$.extend(HTMLElement.prototype, { + UIInsertActivityIndicator : function ( opts ) { + this.insert(""); + var ai = new $.UIActivityIndicator(); + ai.init(opts); + ai.animate(); + } +}); + +$.extend($, { + UICurX : null, + UICurY : null, + UISliderThumbWidth : null, + UISliderValue : null, + UISlider : function( selector, opts ) { + var startValue = null; + if (!opts){ + var callback = function() {}; + } else { + var callback = opts.callback; + } + if (opts.startValue) { + startValue = opts.startValue; + } + var sliderLength = $(selector).clientWidth; + if (startValue) { + $("thumb", selector).css("{left: " + startValue + "px;}"); + $(selector).css("{background-size: " + (startValue + 2) + "px 9px, 100% 9px;}"); + } + $(selector).setAttribute("ui-slider-length", sliderLength); + if ("createTouch" in document) { + var thumb = $(selector + " > thumb"); + thumb.bind("touchmove", function(thumb) { + this.UISliderTouch(event); + this.UIUpdateSliderTouch(callback); + }); + } else { + $.UISliderForMouse(selector, opts); + } + } +}); + +$.extend(HTMLElement.prototype, { + UISliderTouch : function( event ) { + event.preventDefault(); + var sliderLength = this.parentNode.getAttribute("ui-slider-length"); + var touch = event.touches[0]; + $.UICurX = touch.pageX - this.parentNode.offsetLeft - $.UISliderThumbWidth; + var sliderThumbWidth = this.css("width"); + sliderThumbWidth = parseInt(sliderThumbWidth, 10); + $.UISliderValue = $.UICurX + sliderThumbWidth; + if ($.UICurX <= 0 - (sliderThumbWidth/2)) { + $.UICurX = 0 - (sliderThumbWidth/2); + } + if ($.UICurX > sliderLength - 12) { + $.UICurX = sliderLength -12; + } + }, + + UIUpdateSliderTouch : function( callback ) { + if (!callback){ + var callback = function() {}; + } + this.style.left = $.UICurX - $.UISliderThumbWidth + 'px'; + callback(); + this.parentNode.css("{-webkit-background-size:" + ($.UICurX + 1) + "px 9px, 100% 9px;}"); + this.parentNode.css("{background-size:" + ($.UICurX + 1) + "px 9px, 100% 9px;}"); + } +}); + +$.UIDrag = { + obj: null, + init: function(elem, elemParent, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef) { + elem.onmousedown = $.UIDrag.start; + elem.hmode = bSwapHorzRef ? false : true ; + elem.vmode = bSwapVertRef ? false : true ; + elem.root = elemParent && elemParent !== null ? elemParent : elem ; + if (elem.hmode && isNaN(parseInt(elem.root.style.left), 10)) { + elem.root.style.left = elem.root.css("left"); + } + if (elem.vmode && isNaN(parseInt(elem.root.style.top), 10)) { + elem.root.style.top = elem.root.css("top"); + } + if (!elem.hmode && isNaN(parseInt(elem.root.style.right), 10)) { + elem.root.style.right = elem.root.css("right"); + } + if (!elem.vmode && isNaN(parseInt(elem.root.style.bottom), 10)) { + elem.root.style.bottom = elem.root.css("bottom"); + } + elem.minX = typeof minX !== 'undefined' ? minX : null; + elem.minY = typeof minY !== 'undefined' ? minY : null; + elem.maxX = typeof maxX !== 'undefined' ? maxX : null; + elem.maxY = typeof maxY !== 'undefined' ? maxY : null; + elem.root.onDragStart = new Function(); + elem.root.onDragEnd = new Function(); + elem.root.onDrag = new Function(); + }, + start: function(e) { + var elem = $.UIDrag.obj = this; + e = $.UIDrag.fixE(e); + $.UIDrag.y = parseInt(elem.vmode ? elem.root.style.top : elem.root.style.bottom, 10); + $.UIDrag.x = parseInt(elem.hmode ? elem.root.style.left : elem.root.style.right, 10); + elem.root.onDragStart($.UIDrag.x, $.UIDrag.y); + elem.lastMouseX = e.clientX; + elem.lastMouseY = e.clientY; + if (elem.hmode) { + if (elem.minX !== null) elem.minMouseX = e.clientX - $.UIDrag.x + elem.minX; + if (elem.maxX !== null) elem.maxMouseX = elem.minMouseX + elem.maxX - elem.minX; + } else { + if (elem.minX !== null) elem.maxMouseX = -elem.minX + e.clientX + $.UIDrag.x; + if (elem.maxX !== null) elem.minMouseX = -elem.maxX + e.clientX + $.UIDrag.x; + } + if (elem.vmode) { + if (elem.minY !== null) elem.minMouseY = e.clientY - $.UIDrag.y + elem.minY; + if (elem.maxY !== null) elem.maxMouseY = elem.minMouseY + elem.maxY - elem.minY; + } else { + if (elem.minY !== null) elem.maxMouseY = -elem.minY + e.clientY + $.UIDrag.y; + if (elem.maxY !== null) elem.minMouseY = -elem.maxY + e.clientY + $.UIDrag.y; + } + + document.onmousemove = $.UIDrag.drag; + document.onmouseup = $.UIDrag.end; + return false; + }, + drag: function(e) { + e = $.UIDrag.fixE(e); + var elem = $.UIDrag.obj; + var ey = e.clientY; + var ex = e.clientX; + $.UIDrag.y = parseInt(elem.vmode ? elem.root.style.top : elem.root.style.bottom, 10); + $.UIDrag.x = parseInt(elem.hmode ? elem.root.style.left : elem.root.style.right, 10); + var nx, ny; + if (elem.minX !== null) ex = elem.hmode ? + Math.max(ex, elem.minMouseX) : Math.min(ex, elem.maxMouseX); + if (elem.maxX !== null) ex = elem.hmode ? + Math.min(ex, elem.maxMouseX) : Math.max(ex, elem.minMouseX); + if (elem.minY !== null) ey = elem.vmode ? + Math.max(ey, elem.minMouseY) : Math.min(ey, elem.maxMouseY); + if (elem.maxY !== null) ey = elem.vmode ? + Math.min(ey, elem.maxMouseY) : Math.max(ey, elem.minMouseY); + nx = $.UIDrag.x + ((ex - elem.lastMouseX) * (elem.hmode ? 1 : -1)); + ny = $.UIDrag.y + ((ey - elem.lastMouseY) * (elem.vmode ? 1 : -1)); + $.UICurX = nx; + $.UISliderValue = nx + (Math.round($.UISliderThumbWidth)); + $.UICurY = ny; + $.UIDrag.obj.root.style[elem.hmode ? "left" : "right"] = nx + "px"; + $.UIDrag.obj.root.style[elem.vmode ? "top" : "bottom"] = ny + "px"; + $.UIDrag.obj.lastMouseX = ex; + $.UIDrag.obj.lastMouseY = ey; + $.UIDrag.obj.root.onDrag(nx, ny); + $.UIDrag.updateSliderProgressIndicator($.UICurX); + return false; + }, + + end: function() { + document.onmousemove = null; + document.onmouseup = null; + $.UIDrag.obj.root.onDragEnd( + parseInt($.UIDrag.obj.root.style[$.UIDrag.obj.hmode ? "left" : "right"], 10), + parseInt($.UIDrag.obj.root.style[$.UIDrag.obj.vmode ? "top" : "bottom"], 10)); + $.UIDrag.obj = null; + }, + + fixE: function(e) { + if (typeof e.elemX === 'undefined') e.elemX = e.offsetX; + if (typeof e.elemY === 'undefined') e.elemY = e.offsetY; + return e; + }, + updateSliderProgressIndicator : function() { + $.UIDrag.obj.parentNode.css("{-webkit-background-size:" + ($.UICurX + 1) + "px 9px, 100% 9px;}"); + $.UIDrag.obj.parentNode.css("{background-size:" + ($.UICurX + 1) + "px 9px, 100% 9px;}"); + } +}; + +$.extend($, { + UISliderForMouse : function ( selector, opts ) { + if (!opts) { + var opts = {}; + } + var thumb = $("thumb", selector); + var slider = $(selector); + var thumbWidth = parseInt(thumb.css("width"),10); + var sliderWidth = parseInt(slider.css("width"),10); + var sliderHeight = parseInt(slider.css("height"),10); + var padding = parseInt(slider.css("padding-right"),10); + var border = parseInt(slider.css("border-right-width"),10); + sliderWidth -= padding; + sliderWidth -= border; + sliderWidth -= $.UISliderThumbWidth; + + + var thumbDetuct = Math.round(thumbWidth/2); + $.UISliderThumbWidth = thumbDetuct; + var negLeft = (0 - $.UISliderThumbWidth); + $.UIDrag.init(thumb, null, -$.UISliderThumbWidth, sliderWidth - (Math.round(thumbWidth/2)), opts["top"], opts["top"]); + thumb.onDrag = function() { + if (opts.callback) { + opts.callback(); + slider.UIUpdateSliderTouch(); + } + // Temporary fix for horizontal slider thumb drag: + this.style.top = -sliderHeight + "px"; + }; + } +}); + +$.extend(HTMLElement.prototype, { + UISetTranstionType : function( transtion ) { + this.setAttribute("ui-transition-type", transtion); + }, + UIFlipSubview : function ( direction ) { + var view = this.ancestor("view"); + view.UISetTranstionType("flip-" + direction); + this.bind("click", function() { + switch (direction) { + case "right": + $("subview:nth-of-type(1)", view).toggleClass("flip-right-front-in","flip-right-front-out"); + $("subview:nth-of-type(2)", view).toggleClass("flip-right-back-in","flip-right-back-out"); + break; + case "left": + $("subview:nth-of-type(1)", view).toggleClass("flip-left-front-in","flip-left-front-out"); + $("subview:nth-of-type(2)", view).toggleClass("flip-left-back-in","flip-left-back-out"); + break; + case "top": + $("subview:nth-of-type(2)", view).toggleClass("flip-top-front-in","flip-top-front-out"); + $("subview:nth-of-type(1)", view).toggleClass("flip-top-back-in","flip-top-back-out"); + break; + case "bottom": + $("subview:nth-of-type(2)", view).toggleClass("flip-bottom-front-in","flip-bottom-front-out"); + $("subview:nth-of-type(1)", view).toggleClass("flip-bottom-back-in","flip-bottom-back-out"); + break; + default: + $("subview:nth-of-type(1)", view).toggleClass("flip-right-front-in","flip-right-front-out"); + $("subview:nth-of-type(2)", view).toggleClass("flip-right-back-in","flip-right-back-out"); + } + }); + }, + UIPopSubview : function ( ) { + var view = this.ancestor("view"); + view.UISetTranstionType("pop"); + this.bind("click", function() { + $("subview:nth-of-type(2)", view).toggleClass("pop-in","pop-out"); + }); + }, + + UIFadeSubview : function ( ) { + var view = this.ancestor("view"); + view.UISetTranstionType("fade"); + view.setAttribute("ui-transition-type", "fade"); + this.bind("click", function() { + $("subview:nth-of-type(2)", view).toggleClass("fade-in", "fade-out"); + }); + }, + UISpinSubview : function ( direction ) { + var view = this.ancestor("view"); + view.UISetTranstionType("spin"); + if (!direction || direction === "left") { + this.UISetTranstionType("left"); + this.bind("click", function() { + $("subview:nth-of-type(2)", view).toggleClass("spin-left-in", "spin-left-out"); + }); + } else if (direction === "right") { + this.UISetTranstionType("right"); + this.bind("click", function() { + $("subview:nth-of-type(2)", view).toggleClass("spin-right-in", "spin-right-out"); + }); + } else { + this.UISetTranstionType("left"); + this.bind("click", function() { + $("subview:nth-of-type(2)", view).toggleClass("spin-left-in", "spin-left-out"); + }); + } + } +}); +$.ready(function() { + $.extend($, { + UISplitViewScroller1 : null, + UISplitViewScroller2 : null, + body : $("body"), + rootview : $("rootview"), + resizeEvt : ('onorientationchange' in window ? 'orientationchange' : 'resize'), + UISplitView : function ( ) { + $.UISplitViewScroller1 = new $.UIScroll('#scroller1 > scrollpanel'); + $.UISplitViewScroller2 = new $.UIScroll('#scroller2 > scrollpanel'); + var buttonLabel = $("rootview > panel > view[ui-navigation-status=current] > navbar").text(); + $("detailview > navbar").insert(""+buttonLabel+"", "first"); + if (window.innerWidth > window.innerHeight) { + $.body.className = "landscape"; + $.rootview.css("{display: block; height: 100%; margin-bottom: 1px;}"); + $("#scroller1").css("overflow: hidden; {height: " + ($.rootview.innerHeight - 45) + "px;}"); + } else { + $.body.className = "portrait"; + $.rootview.css("{display: none; height: " + (window.innerHeight - 100) + "px;}"); + $("#scroller1").css("{overflow: hidden; height: " + (window.innerHeight - 155) + "px;}"); + } + }, + + UISetSplitviewOrientation : function() { + if ($.resizeEvt) { + if (window.innerWidth > window.innerHeight) { + $.body.className = "landscape"; + $.rootview.css("{display: block; height: 100%; margin-bottom: 1px;}"); + $("#scroller1").css("{overflow: hidden; height: 100%;}"); + } else { + $.body.className = "portrait"; + $.rootview.css("{display: none; height: " + (window.innerHeight - 100) + "px;}"); + $("#scroller1").css("{overflow: hidden; height:" + (window.innerHeight - 155) + "px;}"); + } + } + }, + + UIToggleRootView : function() { + if ($.rootview.style.display === "none") { + $.rootview.css("{display: block;}"); + $.UISplitViewScroller1.destroy(); + $.UISplitViewScroller2.destroy(); + $.UISplitViewScroller1 = new $.UIScroll('#scroller1 > scrollpanel'); + $.UISplitViewScroller2 = new $.UIScroll('#scroller2 > scrollpanel'); + } else { + $.rootview.style.display = "none"; + $.UISplitViewScroller1.destroy(); + $.UISplitViewScroller2.destroy(); + $.UISplitViewScroller1 = new $.UIScroll('#scroller1 > scrollpanel'); + $.UISplitViewScroller2 = new $.UIScroll('#scroller2 > scrollpanel'); + } + }, + + UICheckForSplitView : function ( ) { + if ($("splitview")) { + $.UISplitView(); + $("#showRootView").bind("click", function() { + $.UIToggleRootView(); + }); + $.body.onorientationchange = function(){ + $.UISetSplitviewOrientation(); + }; + window.onresize = function() { + $.UISetSplitviewOrientation(); + }; + } + } + }); + $.UICheckForSplitView(); +}); \ No newline at end of file diff --git a/config.xml b/config.xml new file mode 100644 index 0000000..011b0a4 --- /dev/null +++ b/config.xml @@ -0,0 +1,14 @@ + + + Lemma for PlayBook + A Twitter app optimized for browsing lists. + Sully Syed + + + + + + + + + diff --git a/css/lemma.css b/css/lemma.css new file mode 100644 index 0000000..f4662ac --- /dev/null +++ b/css/lemma.css @@ -0,0 +1,334 @@ +html, body { + font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif; +} + +*[ui-background-style=slanted-right] { + background-color: #909090; +} + +tablecell[ui-usage=image] > img { + float: left !important; + height: 73px; + width: 73px; +} + +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > cellsubtitle { + display: inline-block; + margin-top: 0; + margin-left: 0; +} + +view tableview[ui-tablecell-order="stacked"] > tablecell.ui-no-hover:hover > cellsubtitle { + color: #484848 !important; +} + +tableview[ui-tablecell-order=stacked] > tablecell > cellsubtitle { + color: #484848 !important; +} + +tablecell > cellsubtitle { + color: #484848; + position: absolute; + right: 10px; + margin-top: 4px; + white-space: normal; + display: inline-block; + font-size: 18px; + line-height: 24px; +} + +tablecell > celldetail.ui-custom-tint { + color: #484848 !important; + font-size: 18px; + line-height: 24px; +} + +tableview > tablecell.ui-no-hover:hover > celldetail.ui-custom-tint, +tableview > tablecell.ui-no-hover.touched > celldetail.ui-custom-tint { + color: #484848 !important; + font-size: 18px; + line-height: 24px; +} + +tableview > tablecell.ui-no-hover > *, tableview.ui-no-hover > tablecell > * { + color: #484848 !important; +} + +subview > scrollpanel { + height: auto; + min-height: 100%; + overflow: hidden; + padding-bottom: 0; +} + +subview[ui-associations=withBottomToolBar] { + top: 0px; + bottom: 60px; +} + +navbar, toolbar { + height: 60px; + background-image: + -webkit-gradient(linear, left top, left bottom, + from(rgba(74,74,74,0.7)), + color-stop(0.5, rgba(20,20,20,0.7)), + color-stop(0.5, rgba(2,2,2,0.7)), + to(rgba(14,14,14,0.7))); +} + +toolbar > segmentedcontrol > uibutton.ui-custom-tint, navbar > uibutton.ui-custom-tint { + background-color: #484848; + font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif; + font-size: 16px; + font-style: normal; + font-variant: normal; + font-weight: normal; + height: 45px; +} + +uibutton.ui-custom-tint { + background-color: #484848; + font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif; + font-size: 16px; + font-style: normal; + font-variant: normal; + font-weight: normal; + height: 45px; +} + +tableview[ui-tablecell-order=stacked] > tablecell[ui-usage=image] > img ~ cellsubtitle { + width: 850px !important; +} + +tablecell > cellsubtitle a { + color: #00E; +} + +.fullbuttonheight { + margin: 0; + width: 65px !important; + height: 73px !important; + border-left: 1px solid #D9D9D9 !important; +} + +.fullprofileimgheight { + width: 73px; + height: 73px; + border-right: 1px solid #D9D9D9; +} + +tableview#timeline > tablecell.ui-no-hover:hover, +tableview#timeline > tablecell.ui-no-hover.touched { + background-image: none !important; + background-color: #EFF9FC !important; +} + +popup { + width: 900px; + background-color: #000; +} + +popup > panel { + background-image: none; +} + +uibutton[ui-kind="action"]:hover, +uibutton[ui-kind="action"].touched, +uibutton[ui-kind=action][ui-implements=cancel]:hover, +uibutton[ui-kind=action][ui-implements=cancel].touched { + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(1, rgb(6,168,233)), + color-stop(0, rgb(0,113,199)) + ); +} + +uibutton[ui-kind="action"], uibutton[ui-kind="action"].disabled:hover, uibutton[ui-kind="action"].disabled.touched { + background-color: #F0F0F0; + background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#D1D2D4), to(#FCFCFC)); + border-bottom-color: rgba(255, 255, 255, 0.496094); + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + border-bottom-style: solid; + border-bottom-width: 1px; + border-left-color: rgba(255, 255, 255, 0.496094); + border-left-style: solid; + border-left-width: 1px; + border-right-color: rgba(255, 255, 255, 0.496094); + border-right-style: solid; + border-right-width: 1px; + border-top-color: rgba(255, 255, 255, 0.496094); + border-top-left-radius: 5px; + border-top-right-radius: 5px; + border-top-style: solid; + border-top-width: 1px; + color: black; + font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif; + font-size: 20px; + font-style: normal; + font-variant: normal; + font-weight: normal; + height: 45px; +} + +label.qnx { + font-family: "DejaVu Sans" Helvetica, Arial, sans-serif; + font-style: normal; + font-variant: normal; + font-weight: normal; + line-height: 45px; + height: 45px; + display: inline-block; + color: #000000; +} + +input.qnx { + -webkit-border-radius: 5px; + border: 1px rgba(0,0,0,0.5) solid; + display: inline-block; + outline-bottom: 1px #fff solid; + -webkit-box-shadow: 1px 1px 0px rgba(255,255,255,1); + height: 35px; + font-family: "DejaVu Sans" Helvetica, Arial, sans-serif; + font-size: 20px; + font-style: normal; + font-variant: normal; + font-weight: normal; + padding: 5px 10px 5px 10px; +} + +textarea.qnx { + -webkit-border-radius: 5px; + border: 1px rgba(0,0,0,0.5) solid; + display: inline-block; + outline-bottom: 1px #fff solid; + -webkit-box-shadow: 1px 1px 0px rgba(255,255,255,1); + height: 35px; + font-family: "DejaVu Sans" Helvetica, Arial, sans-serif; + font-size: 20px; + font-style: normal; + font-variant: normal; + font-weight: normal; + padding: 5px 10px 5px 10px; +} + +uibutton.qnx:hover, +uibutton.qnx.touched { + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(1, rgb(6,168,233)), + color-stop(0, rgb(0,113,199)) + ); + border: 1px #2ccfff solid; + color: #ffffff; +} + +uibutton.qnx { + background-color: #F0F0F0; + background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#D1D2D4), to(#FCFCFC)); + border-bottom-color: rgba(255, 255, 255, 0.496094); + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + border-bottom-style: solid; + border-bottom-width: 1px; + border-left-color: rgba(255, 255, 255, 0.496094); + border-left-style: solid; + border-left-width: 1px; + border-right-color: rgba(255, 255, 255, 0.496094); + border-right-style: solid; + border-right-width: 1px; + border-top-color: rgba(255, 255, 255, 0.496094); + border-top-left-radius: 5px; + border-top-right-radius: 5px; + border-top-style: solid; + border-top-width: 1px; + color: black; + font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif; + font-size: 20px; + font-style: normal; + font-variant: normal; + font-weight: normal; + height: 45px; +} + +.spanlinks { + color: #2489CE; + font-weight: normal; + text-decoration: underline; +} + +/* Start: Styling to make list selection items wider and more QNX-styled. */ +.listoption { + height: 52px; + padding-top: 13px; + font-family: 'DejaVu Sans', Helvetica, Arial, sans-serif; + font-size: 20px; + font-style: normal; + font-variant: normal; + font-weight: normal; +} + +.listoption:hover, .listoption.touched { + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(1, rgb(6,168,233)), + color-stop(0, rgb(0,113,199)) + ); + border: 1px #2ccfff solid; + color: #ffffff; +} + +.listoption[ui-implements=detail-disclosure]:after { + content: "›"; + font: normal 28px/28px Verdana; + color: #808080; + display: block; + height: 48px; + float: right; + margin-top: -4px; + margin-bottom: -20px; + margin-left: -10px; + background-color: transparent; + background-image: none; + border: 0; + -webkit-box-shadow: none; + top: 13px !important; +} +/* End: Styling to make list selection items wider and more QNX-styled. */ + +/* Start: Styling to make select lists more QNX-styled. */ +tableview > tablecell:hover, tableview > tablecell.touched { + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(1, rgb(6,168,233)), + color-stop(0, rgb(0,113,199)) + ); + color: #fff; +} +/* End: Styling to make select lists more QNX-styled. */ + +.actiontweet { + color: #fff; + margin-left: 10px; + white-space: normal; + display: inline-block; + font-size: 18px; + line-height: 24px; +} + +.actiontweet { + color: #fff; + margin-left: 10px; + white-space: normal; + display: inline-block; + font-size: 18px; + line-height: 24px; +} \ No newline at end of file diff --git a/css/qnxbuttons.css b/css/qnxbuttons.css new file mode 100644 index 0000000..d6c829f --- /dev/null +++ b/css/qnxbuttons.css @@ -0,0 +1,329 @@ +body { + background: #ececec; + +} +.hidden, .qnxselectdropdown.hidden { + display: none; +} +.relative { + position: relative; +} +.qnxform { + font-family: "DejaVu Sans" Helvetica, Arial, sans-serif; +} +label { + line-height: 45px; + height: 45px; + display: inline-block; +} +.qnxform button, .qnxform input[type="submit"], .qnxform input[type="button"], .qnxform .qnxselectinner { + +-webkit-border-radius: 5px; +background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, rgb(209,210,212)), + color-stop(1, rgb(252,252,252)) +); +border: 1px rgba(255,255,255,0.5) solid; +margin: 0; +padding: 0 35px; +height: 38px; +line-height: 35px; +font-size: 20px; +} + +.qnxform .qnxbuttonholder.active button, .qnxform .qnxbuttonholder.active input[type="submit"], .qnxform .qnxbuttonholder.active input[type="button"], .qnxform .qnxselectholder.active .qnxselectinner { + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(1, rgb(0,184,253)), + color-stop(0, rgb(0,130,228)) + ); + border: 1px #2ccfff solid; + color: #fff; +} +.qnxbuttonholder.active, .qnxselectholder.active { + border: 1px #295b9a solid; +} + +.qnxbuttonholder, .qnxselectholder { + display: inline-block; + -webkit-border-radius: 5px; + border: 1px rgba(0,0,0,0.5) solid; + -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.1); + max-width: 500px; +} + + +.qnxform .qnxtextfieldholder { + background: #fff; + -webkit-border-radius: 5px; + border: 1px rgba(0,0,0,0.5) solid; + display: inline-block; + outline-bottom: 1px #fff solid; + -webkit-box-shadow: 1px 1px 0px rgba(255,255,255,1); + height: 34px; + position: relative; +} +.qnxform .qnxtextfieldholder input { + -webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.2); + background: transparent; + outline: none; + border: 0; + margin: 0; + padding: 0 10px; + font-size: 20px; + height: 32px; + line-height: 32px; +} + +.qnxform .qnxtextfieldholder.focused { + -webkit-box-shadow: 0 0 6px #0096ff; + border: 1px #366889 solid; +} + +.qnxform .qnxtextfieldholder div.closecross { + display: none; +} +.qnxform .qnxtextfieldholder.focused div.closecross { + display: block; + position: absolute; + z-index: 3; + right: 10px; + top: 9px; + width: 16px; + height: 17px; + background: url(images/cross.png); +} + +.qnxform > div { + margin-bottom: 10px; +} + +.qnxform .qnxtoggle { + -webkit-box-shadow:inset 1px 1px 3px rgba(0,0,0,0.3); + -webkit-border-radius: 5px; + border: 1px #363636 solid; + display: inline-block; + background: #e1e1e1; + position: relative; + font-size: 20px; +} +.qnxform .qnxtoggle .onlabel, .qnxform .qnxtoggle .offlabel { + display: block; + width: 80px; + float: left; + height: 38px; + line-height: 40px; + text-align: center; +} + +.qnxform .qnxtoggle .slider { + height: 36px; + border: 1px #fff solid; + -webkit-border-radius: 4px; + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, rgb(209,210,212)), + color-stop(1, rgb(252,252,252)) + ); + width: 80px; + -webkit-box-shadow: 0 0 3px #000; + position: absolute; + left: 0; + top: 0; + -webkit-transform-style: preserve-3d; + -webkit-transition-property: -webkit-transform; + -webkit-transition-duration: 350ms; + -webkit-transition-timing-function: ease-in; +} + +.qnxform .qnxtoggle.blue { + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(1, rgb(6,168,233)), + color-stop(0, rgb(0,113,199)) + ); +} +.qnxform .qnxtoggle.blue .onlabel { + color: #fff; +} + +.qnxform .qnxtoggle.off .slider { + -webkit-transform: translate3d(0,0,0); +} +.qnxform .qnxtoggle.on .slider { + -webkit-transform: translate3d(78px,0,0); +} + +.qnxform .qnxcheckbox { + width: 18px; + height: 18px; + -webkit-border-radius: 4px; + border: 1px #f0f0f0 solid; + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, rgb(209,210,212)), + color-stop(1, rgb(252,252,252)) + ); +} +.qnxform .qnxcheckboxholder { + border: 1px rgba(0,0,0,0.5) solid; + -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.1); + -webkit-border-radius: 5px; + width: 20px; + height: 20px; + display: inline-block; + position: relative; +} + +.qnxform .qnxcheckboxholder .check { + width: 7px; + height: 19px; + border-left: 3px #000 solid; + border-top: 3px #000 solid; + -webkit-box-shadow: -1px -1px 1px rgba(0,0,0,0.3); + -webkit-transform: rotate(-135deg); + position: absolute; + top: -7px; + left: 8px; +} + +.qnxselectholder .arrowholder .arrow { + width: 11px; + height: 11px; + background: #fff; + -webkit-border-radius: 2px; + -webkit-border-bottom-right-radius: 0; + -webkit-transform: rotate(45deg); + position: relative; + bottom: 4px; + left: 2px; +} + +.qnxselectholder.active .arrowholder .arrow { + width: 11px; + height: 11px; + background: #fff; + -webkit-border-radius: 2px; + -webkit-border-top-left-radius: 0; + -webkit-transform: rotate(45deg); + position: relative; + bottom: -2px; + left: 2px; +} + +.qnxselectholder { + position: relative; + padding-right: 40px; + z-index: 2; +} +.qnxselectholder.lowered { + z-index: 0; +} + +.arrowholder { + text-align: center; + width: 15px; + height: 9px; + overflow: hidden; + display: inline-block; + position: absolute; + top: 16px; + right: 12px; +} +.qnxform .qnxselectholder .qnxselectinner { + line-height: 40px; + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.qnxselectright { + height: 38px; + width: 41px; + position: absolute; + right: 0; + top: 0; + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, rgb(161,165,168)), + color-stop(1, rgb(201,200,205)) + ); + border: 1px #ccc solid; + border-left: none; + -webkit-border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; +} +.qnxselectholder.active .qnxselectright { + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, rgb(16,101,168)), + color-stop(1, rgb(5,141,217)) + ); + border: 1px #149ce8 solid; + border-left: none; + +} + + + +.qnxselectdropdown { + position: absolute; + top: 39px; + left: 0; + z-index: 1; + display: inline-block; + -webkit-border-bottom-left-radius: 5px; + -webkit-border-bottom-right-radius: 5px; + border: 1px rgba(0,0,0,0.5) solid; + border-top: none; + -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.1); +} +.qnxselectdropdown ul { + display: inline-block; + list-style-type: none; + -webkit-border-bottom-left-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + background: #f3f3f3; + border: 1px rgba(255,255,255,0.5) solid; + border-top: none; + margin: 0; + padding: 5px 1px 1px 1px; + line-height: 35px; + font-size: 20px; + max-width: 535px; +} +.qnxselectdropdown ul li { + height: 45px; + line-height: 45px; + padding: 0 35px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.qnxselectdropdown ul li.active { + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0, rgb(27,100,211)), + color-stop(1, rgb(2,141,246)) + ); + color: #fff; +} \ No newline at end of file diff --git a/data.html b/data.html new file mode 100644 index 0000000..5c4c1de --- /dev/null +++ b/data.html @@ -0,0 +1 @@ +{"J":5,"0":"N"} \ No newline at end of file diff --git a/data/account_settings.html b/data/account_settings.html new file mode 100644 index 0000000..fe70a94 --- /dev/null +++ b/data/account_settings.html @@ -0,0 +1,6 @@ +

+ You are currently authorized as ${screen_name}. + + + +

\ No newline at end of file diff --git a/data/account_settings_notsetup-short.html b/data/account_settings_notsetup-short.html new file mode 100644 index 0000000..7f91c06 --- /dev/null +++ b/data/account_settings_notsetup-short.html @@ -0,0 +1,13 @@ +
+ + + +
+
+ , enter your PIN , and +
+
+ + + +
\ No newline at end of file diff --git a/data/account_settings_notsetup.html b/data/account_settings_notsetup.html new file mode 100644 index 0000000..99fb243 --- /dev/null +++ b/data/account_settings_notsetup.html @@ -0,0 +1,26 @@ +

+ A Twitter account has not been set up for use with Lemma. To set up an account, follow the instructions found below: +

    +
  1. + Click the Launch Browser button found below to launch a browser session.
    + + + +
    2. +
  2. Log in to your Twitter account and authorize the Lemma application.
    3. +
  3. + Make note of the PIN code displayed and enter it below. +
    +
    + +
    +
    + + + +
    +
    +
    4. +
  4. Start using Lemma!
    5. +
+

\ No newline at end of file diff --git a/data/list.html b/data/list.html new file mode 100644 index 0000000..526bba7 --- /dev/null +++ b/data/list.html @@ -0,0 +1,3 @@ + + ${name} + \ No newline at end of file diff --git a/data/timeline.html b/data/timeline.html new file mode 100644 index 0000000..7901177 --- /dev/null +++ b/data/timeline.html @@ -0,0 +1,14 @@ + + + +
+
${text}
+
${screen_name}
+
${created_at}
+
+ + + + + + \ No newline at end of file diff --git a/data/timeline_settings.html b/data/timeline_settings.html new file mode 100644 index 0000000..08c49f3 --- /dev/null +++ b/data/timeline_settings.html @@ -0,0 +1,9 @@ + + + Maximum number of tweets shown in a timeline: + + 25 + 50 + 100 + 200 + \ No newline at end of file diff --git a/icon.png b/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..76e53e4fb7844373bdac9cb634804c0688fc99eb GIT binary patch literal 4634 zcmV+#66NiQP)-KlHJxaDCJoCG=zkT!-k36G?dX$X@tnItnI109+$ zO`4`Dgl1A_N(j>_G^8~{A8tc}V_XQq79_}T3)^~FvaHog`+nbk=j^VuTCKEKyDM8( z_n3d~-Mv?L@A=MuzW@8rIrpMynucnrd@)oZr~+FBwpyydR)MVoTP;;!tH4%)t(I(2 z=Q=p#4NSFwqKJ)))=Aq$Q?By58);rzFKwI_q6Ni)l+J9lwa!@@uz5Fe3+>Ca8qv0BxcLX#7TQ-T z4Qw;*j@&OyssS$h(sAA-fsH4Vh{O|eKQ~wtToJ4vr8UwXtfbr$$E~?vSk3B^>i0&Y zBI{J^u%gCpmY?&KkSO=j{#TL1rkbW1g$Vz?gFin~G ztP~ljBo#uPM{OJq2hN>4hgbLi7lOecIy#rb>2h=5Pmp~wXo*0b%mY@L8ke?KM8~Es z10C3SH{nDQM=k|18i`MSUvE*dvB3$q*@$35+{^S{Wg+mMP!#@H0?kg_oY|qkMS$9S z`ZRw0FE8NY@DOhO{oAo|a~Jyh`f&2tQH;}TVKB-%Cz4bQ24%ATdU4RFV;4Gr5QhjW z@XGrhe1Fi3gVFdD0cmM8EOg1wxNZ34>Lzr!?8vG<2SGjV3E+{VgZL=H|D$z|Y2KY5 zc%so5e*UvpaOmd;;P*}7wvXJ2-@WNZ96azE8tNP1^^U>o8Jm)qDQ!k?(GzoY>DYzz zRXQO?0uemcGk}+Tq3O*iTvL1`-$fH~{Ov{BSP6+B)3+2Oq=cEnBevKmHxZd)~th zyKa`C1p|HtsRI*IiOmsCVbju!!~-VFP_3d zZxH+ZVf@LNVf+od{TS_Q!{f5{zvZ-|(PrkKDHyppf;SJnE(4K|UODC&MK~0am#ra> z-nr*)Y}mA!O2CJIe*QTeBdAWNQ*!OfRjV*EGJ-L$7dESnJew@7ZdWdq1Y*4BCyrhq zsG%94?yy_%&5fZlLDSUGlUlfsJSGjrMv#)Yn!pP$%SxIaHtTIb&Hh0SK0@tY=9rT2QU_nD_u?+$`N4wl>M3^XZw`%5@o0{>?jdk%>+BL#(X|^%2>}w_Pxv>V zI5UDZ?DA4yY3cK~lLpq3E)r7A8wgH&!TT2cY2@Fz+%BnM#eTLV$l=j&m>%1Jp$iun z*nBXmYGG}!0~bRjyS7oMXPbH6{(&)^4acWbK&Ca<5je9^m6*Rh?8VoQ4dQ3fgcyky zlT@PTPb(ul(N7K*l@T)l%NmEagc#Ku?PfSl20TYk&B`v( z5W(CqO(6TI2zI^Khkshtgqu1Wu!WKS)bXR~!)zeod2XtJR(5lj+l@E@^G!@(XmCJs zY<4s&#NZ`@T}x{lykldCL?i4NhLTcxwOHC$jAR|Ef@7mT+`%p?bjf{dTVORAX6-5_ zUh3p{2tO4GK%wbg0=JK{>l2{tMwUb7w#JoGU7&Yy>!$-wcR9-KJ(9u+|iKDuX*^j6VEVytzbuU~4~Gp9}< zz~CjkwW+z8bTEiWD9miEhV@ELcQPGldMBt!4 zwc8!6%ZN;6^NZkBk+NQY(@t2eR`k=$g;$=YTocsL*wj=oc$LYqS_WXHpt!%p?);NW zJ{eG`W#lhjqG!!T1;YsNW`TngZgKvcgj z(*eAbUc&VgjAi8G)EvO1b#8gH(Yh0a+&LhMDFn%-GCI$upq0$kdENs|N4Fn2i(iIg6;F@% zve*2I0nVvv+3D%&_Zkah+qKu?jfe@m-aUsOoF0NjnR%Wb6CABq(&`$I&DU+B>xC(; zF2s|?fy&4yIe=Q}F$Ypgi~;neeh*gG)j-YsOy&^mtX)5okr&U6;;X|Gl9xjT##i-s z5~af9vD(ZdQ6bR9;ti8gf7h+tgjL4UQtL=4hD#Ll%WLdX3D|f`A*Q(hdCrT!AN1l- zRt}P$mfI{SXK92?i*-~-oljkIFRm&JFzTfhik^8VWJbTt78Un7t+=+5{#rXw4A|~oh>e@QnWH|PbrrQW^=q4f8mVqf=VKrN#%ZrfSKir z6JV27MU7FBfyT~+qK%rh*=|CM%}kBVV~pOlJb#GF#*Wwu0WN+tMIa;5N)(|6%tpMlrWxz&ol*%@ zDj1|vTG8-Q($tI?%V;3~?I34CTZF5-#Vt`^|7cAMZfvh7sM=*;e`Y8e0Sk;uayco08Q|lc4Or>6 zA(SX>oK>$O|MNmoLAK=t3w(wm{Fcl4@N%YJk2TidLn|62EiI-}ktIe6wqAqPg0F9G zr+zdn{DTXbYd^%mdH;rXMt^0-lJ-Rptls+-;5Is}cx`islsxJA{skCF$Sk6JxWS1p zZ0VF0xZI$Yz1ncz2@ij8BfaRayV`M&c&&$=@Jm+COT|<)IrXpF>hSrlj;U3gi?9?8 zUa5JetYL=cW^(NlTRZU7@@1&8n$v?JsWJc+Bu=~4?ZC_HTk)y&E%E`5D+Q{aFAmL&CR>>!z^)6sh(wr+CRmh-EGVQ&Y0{*l=jQ{ln@V$xf)YM7A zz@%ZB#e`2WWxkGFdJV79XicxY_AP>k&ov#Yve+_CKR3rxsnm8s35qsQ1IiKKMkCW6^)Rnf}e=jOiIXq4$`IvKh0e5z%1x}F|f zj0(h~CU2%R?H(}(DQ3D$8PrH+fDy&2st`{H{30-pU;85X4SM74tC}Yl$YhrxWW6GB zl|FA;lw(asLV(+jIZw10w?vLR5);j5(+7uHksv;WN zmU+}(JPK-0stCst;tfy7N|sykWb!~Fnd(W)DNX)>E$4au`4)>&!9XC2x8#(L0e915 zRfF-WdJtMn%@muSDLNk8=yHrl;)(A@2SMJg3sF;&(VjHc(x2$ZQVh2|b1?mQN+p1Q%ZFW0@F1uwr zIrb5QqQr8&c0QhKq#_<6uO0}+Ca2DCdZ!;>>OPO2QJ-A4v{>=Y)>AAXVca?Ewp&k^ zmC}j}WsT+Av>#;oHvdPb>AV6ayi!Q4lVVM)lFs`*{QT@#5WjbH5YHSRn4E~1?HX6Y z3aLmG$t6n}D-iGa`aG8w{Oa}kVNzzl#+CS2 zpjV3b%wC)`z!f9m+_xU*HOR-1eoJLnu6GBbu{k-`$K$=@p&3(TVuY&3tTI!x!z^CH zu!v~DnR(te<4EFV2D@q9bG<*dRA95EonYS2AAE@WEm>dp(V67kSG+Fx>URGd;9-?mSh2<6Efp-A$;@RNdmBsqVU!{_w-S(GU}>XPsuuJ z-*EOUXgK;}ecD(rcIzGDGB%b7FWYq*m561elvvHFT~k8H5OGMh(fn>jEwtO?G!HC4YpXuScO_i}e2E#0 z>sk9vl7vurOw^MSJzJOOA+3ItkkU|2+Y^Q2%=j472kJa3+U?l;y}un9KBK7lWG<=s z>#^f3K3`PcdFM&~na}UJ=N{aAaqlhq+w0D41Q-C$4;CZN)w&h{00000%O$Pmbjz`*`j8jgu~4yqJnCrmL?% zJ2=okk7gFH+pw|k(uIqe*yQvK^rr^}_!m*#Vz8wbFJ<6Uqo=PogILRnvKVCP!O8iB5g0)D zFh~tZt+0^bue0Yan2}}i`VE`=&YnJ7zjWF1TOfW+RFoRf;IF{gVZeq#av(KQQj(uQ zdbe%ewiiT`6vrDjZtlK(`Eojp&&k30H7Y7X9mHO?Y{kv*KfZG#tB1*hEJfF=tE)RR zz~8r&pvCAK;f4c!6cveSIX+AAS&m}yhD}@AuUx)_vlQY0TN0_t@c%#4vgIpog2X_M z0b5Eyua2(X)Br!9N(_rZ8n0ftoJA-#va@r116vLSQj!v1h}EmDqdN^|IoRUUXU|z| z+OY8;v89fnkl?GL!U9-H*Yx%4fT6LV#MkNsYl695n&;5CZ=W!nV6XV!WQzc|& zq(7`&wRZm0Y17^@Ff#rJiGk#Z)r&P%uUfr!{`qrfW6^_%i;MevLQ#en|Z7+VmzvW*0?^$cF=RA9#ec}^j;p>W+ z02BBXcoV2M0iwXwL}Rd63>L!T>>xY59f61^*%MaNo=hZD?5T7L-GS=BWU!naT-;dh z949uLH z`E|PsckC^0(v|KumhUmuwDqXXy>%V^+dB_6^jI7F26y%k?|%2F=J2>-Xrg8GG#Z1! zt=3N@5y@108iT@cq&l)_tI1?JIJ-K!xH-DIv)tHD9G(l;!`;(|>l489Tf_GkdI>`W zL7_e&;cFseg^_S@jAX4?78)lHlO#qatdB`m%CZU)@`@AlOOiI0rK&2@N~<@NZ_V7i zEvtI9)W-a}T^sA0iyF11yIVHxZQGb;i6jz*N}|&2X>>A;L8de4EGLGO3)7X&a^pC^sh01`_j332 z=KBe~0z-U)!+b-+{llY#QKGdXS!Ck+*!3AAMV2@%J8na+EOTQ*-fEqt$%UKN7guF% zuHU$Acfs~O#ZCIsUBekM!=HAxP>3!qpKoE_^;cx^ZmElNZI?-7!PHe6- zhwr;~onL4~aI7Rko)Vp$7MrR}$SvNmX=_$>eNIh7p1Nu4zTW2djuP$3_EefPm(LdX zdISUt0#^kH3zH_Ms45i2Rq16lx$34$ea9A4HyVqD?Ci*N2Rh5ymG8;-5A+fS`-Fsr zisey>>*4j8B1L9FeRJ_neOYsBxyD?j-%p~@Sngb&Z$MzQI5tI@QCXW;+f>umO<_2A zt_co|7RhsqQ;RAys_LkYOslqLfur4}xYoi^Jm{PcDYg-SUxr)@; zmFLM3__Z88&G{RjDphWX6Dg!Y0YVgFwI4Wt`KJ_>ma&VQ*hzIo+bXwI))lc+%c@E$ z%61g71q}@i0o7ZJN-Jy1w+7Ud)q4Y+-#~=j>OsFZ-Snof0PNoyK&LkV4h&;k8ycm< zMn_}K-NdziItY%1bU3?iJuxbd4h)D6qV4Uidaf)4z`}4Bp4?@|<8_#Dsq1MNLX(Mx z4jn2ml8pwOBq3-X4~@6K0pRHrJyH-O4rZd=sm2>v3e(|=fhrWmx^_bjj+B2IkuJgq zW;@BUask%rv3UsjQGXr5c`duH;*Lr$C9=rj=W8!s?r5|6R51tAzR-4K7$gW#xpN3U z+1?QrQ8^d#sav)Qzn_Ju&M_3b+PGFc4&@_c_t^4KBo9eX`WIYG>n2hP)Grjlt@Lpa z1}3#j0U~tz(ij^y+D-bd6AMFxxVR3Q|JN}uCXgFXpw<+_3-3K*q3HZ4If+NcA37UqV86^{$*V7=Z!Cyc@6OR- zk_gv|>KiMS@p%fv25t`_HCb*{l<(M{)fbe@RD*wGC}bxgAgGiT3kvy z^B0-NfVkG&!%Mjp)jsLT{lKgomPgdtG>F6r(EGGR+Afe{#u_)wOOl;KGyJ^oO^w*; z#CgRt9GVoS7wXBclZuT=eO}itA3S^ONgIoTupa!F`{-M$-#RR(Y1IX0NE)EIcL_}H z>lFkuGDJM2t@Fd)QyQ(^Q(z$I18^B_k${laOx}I7yy4`mcQ!dMs8M2o^xpn~{p)oD!b9&?YZBAWErt!JZ;5Bp1(cY}(BC0p#l;_9&qPVc^0HvF0; zm7oByUpIeDpa73;c%S*_?3}^clZfFD{(SK&Ek|n(AJFM%kC-x>6LS;-;NsCZ2UhQ` zTnks)67(NZ^2*{RuWOc4qsaOBPDU7WF z9kMaC1uZx8QI-|1vfm3y=ddBu?3dC`zj;u&yw5Y9VL#FjYTCE}-Sg9AjLmxUSFNsZ z!$;HK@5(&dgTWJ)6oWk}c>uKF1lWfBQx{7C&w=(30P2Gb8omUV-B$UBR&kj74m7H0 z2C65~EfXG+g+@Lad<$UPcn+H8Q}3|^IENAtWVY3^Y<1v(7m%3i8XN5srji~$<|xbo zLU({d&O4+|9zwk|%N-%APUX+u-FAYD1d$uhE>IR36NRV3!J-$5R;mXIcW^m_4*0wH zbk!~W#*0hLpS6&t?>s$V&N;<(<%VzGcY+XZhDs=Ds`31P-2MD`#XdPDblT@u5F%p` zEX)&7uP@G=5~DDCxE04suLm#=c+LA!_z;;L?H4|A{zUz9=fS-Ij_L%LWFd>s?et(( zh;s5&8TBK!KoKTS`9yqH*w_649o$|-nL_~BGkQ|pNl-lg1X-iBF?+l!K8H!|O5udUm26|M_=$rco{7bL01)aIIsP5VjGa-x;K~c+8 z?B(`917D2yr;xX`lcK&`HOdopoX))~@oiy=cdz97OppT<<-^M4mpte+jxo}hb3%bU zU4r{tkje`F*8Ok{LSSRG7|L*gwcniG)_Ub2uG_!xv+FFUkcerQ^~2%mfnBiN!Y?iU zVRQ~R0xx;=+nBg~0b^(7ol#}4j;8K}&t%U21ei}>e}3^e;p-AMIVhzsSBqREbGfk` z3ZJwQRUgRzBc=#h52Ze(zW?cng9i8!P1;5s3(PE?LI_1w-hra_y%`l@HjM+32A7}{ z1|1D2?}etrZxeR9a&;omg~Hs?)SDnlkxgE5+>9jld($WyQ>vZ74wM`v%vF>ZNQPg^ zIzl>;z6L4+7)b=~pRcq+kY&Ew%D?ME{+=GMwG)%h_xjt#d6l1s#xl3q&eWt;dGgB2 zkJ#k@oXLp@VVl#nB(C%X+o%6vbpbk5E|VRgnX~7P`S7$yx=T0VQ+Hu4v(&ANB;Y`Xlkfx#Z_xgnjn)FhtidkHVMta~!K-(T+L6g)VP5 z!O6_21cG1>JKaDu>OMbJw2vMniq~#9FS)(+sYzIK!@Ht_t;jWc0Z4SJlj1l-hT`h( zn65QiLBbmQb%6SWefVL(Nu4!jby}1hTHeywp(UTuTP0%@Q^2vJptvSo=a5RZEnc+A;30& zRvLWrmnw>Cd8W=|yp8sZzXI1XFzverA9swLLKSuTYJDk}2qSe96~~tl>rUfb`#**! zhpr98BfUcb75VIymHBhiJ5XPDgk_=1G|8kv`Q|6$p-3-Zo~Es};U_|Acun^gpyTXB z=FFneM}yz_iUVGr(LFjY$)(?dH{*Jd(sw!YS8$&LrD^hrV2U2_NOTz#8C(EV-;Q~i z=0WcLry_U{__JbId2NVL7Ce(@+^ zbMM#-gbU)n>b^A?m4@BnrU9#_2XPG61?{u`(O*&fO>CTt>UT>P2VCgztXYU@tB zg72=t9h_GZ`~kejff@Q3d=(Is-k*mk1JIs1IJx3q3^v7CgS1s-2svzYMy?(NGe3kpO3DdCyD{swsGlZB~n1h{<|-*sZ! z=%F4R?sJjKb{l_LtFZie>|2ukq3U6l>6b<9XYM;T{$+brbZNLR>_?1!sBrX#KdRxU z*Rq_^)|5iP&c*TicUOMXKEr}DU!fj(Xv90)^8qpxqro*T3>Juu^Jy*cf4;8Oz$NoS z$D(L-&=nW_E&6-S$TafZq_?7lyZEbU`SP|~b4Jv00X2O2i<1Z>?_SU|vQ5+Y6w@?q znpAiuyF_x2tW>N>fsbYacM4Q&exebnnL)!hLz9>YKnyF=co<|ido#}74M-dyHH}aG zh@TZ_aQ(Ttf-x90gSKm!1r9PF zMl0>17Ik%^tF`KDAdd>o?F+M}vDOWrx4M$OAkQPuP3=wqQu32BBdW$UTe+5tMG}|g z0&%6rWgX_xF=}s}MQ$v}PQlj4Oyb?n{2sI%$d7DZ*XFOg>RjWmloRhm;OfFmMgyLQ z=}?*i)svp6u>O{z;2qsgf7?q2Ai+0q`#BfqTBmv-y1MM5t;u&gB!b)p8$ztlcpp%3pW6kr#UJUJKr7ig z?E0PxgYnkCsQ~GR$)%RTWdKcP6EXxzUk2n69Nf~Lku$MeJaWCI2sUi|b>}^&a9frz-zo65rgpgC6W+(_C6pROeGu3@fJrK& zt^6LX!UU|SMNF8TjTil(opohS41T=w`OsN7_5G&RPgFZGP6Q+q>Z7M&LJ7EbIhQj5 zJd|mBFJqh!Bc3^?;1;>}Wp9;NgFwCE%k;Q9*GjMu4hlsYn-?QLnx6dxAJjK&d;1Qm*NzTYFQFew$vHdwioV6> zJ0MQ^y;SB@B(>E|+huBQkMC!yXDiTPR!`}tXl1{mL4``OL- z?1%SS_azGcx~g#qpKJK<_Iv$}wd;DdL66s-efFP+<7iZ=cCvyKv!>l4RYO_99x%3F zw|Z}CumbcL!*tt<&jXas=mTlUo`?6HfJ?3;1}EoE2YvDwM}Bc?T4VR_1#+pCs_|tu zBwiMqzA^VXr{tnI*)!6^tgMG6Y~^>J1%aq|OK7l|P$%qishVtb>3GonQ5~RJ;S%svzQkf?o zp6_r;dc`p=&B}p4xY5eHRxJ!K|E>Yl75wq4*O(x>+$x($(g4|y^(CwK1RVTtx95bm zr5J@%(_Y%QVo(L&QQ9$hV6cik{-dv4n?m8bvqSGrjWF*Rz%#G90E*%t10VtyDhzof zLzob98)tO#;2{c4+fOLQbG+MK<62%B>dM3bh~lUY)n;Ad*4*9q^ znEt5W@)eS)(NODjZU1)k??UMgpk1b}q&Ulu{HU%L&Gf&g*>eYMto#)O5IB!VBsm}a zr;4?;6Fgtxm?9pl25TOqjB!X|`lplvJ7X`;Z|&A`M#>%_TyZ(zg|`IqI$)7l(+l~R X(uy(LZzWV-80b@QPfAy3LgfDdD_gSs literal 0 HcmV?d00001 diff --git a/images/refresh.png b/images/refresh.png new file mode 100644 index 0000000000000000000000000000000000000000..192f9b864d3e0123e925b40250409e3e75bb14b5 GIT binary patch literal 1510 zcmV9Hl8WXa5xO1Q0U1ZdT`LkD^{$?LwFihDpiTW zU^s`*r51~29*v5OF%U&n7&Du|_3dCV7=BzWRgW@`hMvvL%xn}zakV7NRF{%9Yu0qg zIM56OMW*DXP$)cc_wLx0($doJ{CAlK4T@;IGBY#ls9LRAP4*OY0E}rc z!lh{32#R7*6lRcR$t;M>k&=?~=C*CyTGkd6)P+Kl{=rOm2E)U{u&}TIww1ONtJS&> zU!@|>3LRD=g8@3@;mHb<=`H4hKZXyOl8~5_ld~@v2r6gKo~^}GQj7!VK_`U5A<*me z9<@qcTU}jUj~T5Zc$7s{7y(afpcSAKnSAm9WI4q5b8~ZQ3X2MVcD1*6#XzLhYQbzW z!`RrEv~%aqACTAEr>3R{L_wr&7Mu$%c)i{k>Sn-Lz?w9pCidbASv0q#QJU(+FEOZ-EF6#esuP=i61) z)lEpl>EYp*xAtE-w)TWUY*6}`&tTzwelhxFxx4!#gY({K?GizAcBn> zH}dt|+#GF<96x^i9h1?Rha^znxc>XX3tP8RcMB*H^08w_Pvd+UgVEw74lqn2gk`z) zpaXSWTwFH7vKF(Ei9KjUh0GYKt*t#@R8({aBW2dqRLINC13?rsmMu$u5zim?cs$oA zxVz)ypkAaqej7_ugdomnG?p!2zWmcgYI4oNLSHW~UjM4g)&3jSLCLb)VH!nncGfRs zWTfxGQPR@VQX>fB=*-MC)sBm#PN%!)fRV9|jt;?Yx4)8}p5BUvS+rR=Y~$m-?vasG z1qFrkzF8lF$HG|TRJ~sJzE&Hb;Qqt?Q`f0eA0#Cu-DquXa_LU4czr{5o-#^P*=IOn-C%GBc-yLfeIa2Lw{mG16th>%LT?|_O* zqpz=T_l6A{>d}FSOjM!<=?HbKya*rXKli}b__+XqVBosbd0_XYix*F0!NKKn#flxO zCJYS?erq;c@*EEP4n;w}WAl(eaGP8mWEL?>4KA^$lwcAJjXJWjvPyBI8wsPt)F7IH zTCE0DMq^!F-A9FmMemBDV3H%6!y~7fD3R#-T@WDyBa+N_b#;ApR?QCV3jVl>YbuP-iNwQ^NH($7G0u;_&Nt}~iU4vbXeot*T#I$WQjyfn-Q0<(B` z0BP9Z(9q*A94wsF*4Ea8-0%6k{)@!hw{PhP3EIQ@EWA`vk-xugf7_kWQQwIZ-|uZ| zY&?kiB&DULL9}uI@kXNq*hHwVI&iy3X54P~%zft!l9HB3Z?^z`+lrl;=j@csS$sjIENzrn=D$jHjf&(PAAmzl=L$%>1O@9^>M?(WUb z(4L^8mzkTLpP=F5~NS?;XnuSB((xr + + + + + Lemma + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Options

+ + + + + + Account Settings + + + Timeline Settings + + + + + + + + + + + +

Account Settings

+ + + + + + + + + + + + + + + + + +

Timeline Settings

+ + + + + + + + + + + + + + + + + +

Inbox

+ + + + + + Direct Messages + + + Mentions + + + Search + + + View User + + + + + + + + + + + +

Header

+ + + + + + Body + + + + + + + + + + + +

Lists

+ + + + + + + + + +

Search

+ + + + +
+ +
+
+
+ + + +
+
+ + + + + + + + + + +

View User

+ + + + +
+ +
+
+
+ + + +
+
+ + + + + + + + + + +

Tweet

+ + + + +
+ +
+
+
+ + + +
+
+
+ 140 chars left. +
+ +
+ + + + + + + diff --git a/js/datehelper.js b/js/datehelper.js new file mode 100644 index 0000000..cfcc5c8 --- /dev/null +++ b/js/datehelper.js @@ -0,0 +1,68 @@ +/** + * Returns a description of this past date in relative terms. + * Takes an optional parameter (default: 0) setting the threshold in ms which + * is considered "Just now". + * + * Examples, where new Date().toString() == "Mon Nov 23 2009 17:36:51 GMT-0500 (EST)": + * + * new Date().toRelativeTime() + * --> 'Just now' + * + * new Date("Nov 21, 2009").toRelativeTime() + * --> '2 days ago' + * + * // One second ago + * new Date("Nov 23 2009 17:36:50 GMT-0500 (EST)").toRelativeTime() + * --> '1 second ago' + * + * // One second ago, now setting a now_threshold to 5 seconds + * new Date("Nov 23 2009 17:36:50 GMT-0500 (EST)").toRelativeTime(5000) + * --> 'Just now' + * + */ +Date.prototype.toRelativeTime = function(now_threshold) { + var delta = new Date() - this; + + now_threshold = parseInt(now_threshold, 10); + + if (isNaN(now_threshold)) { + now_threshold = 0; + } + + if (delta <= now_threshold) { + return 'Just now'; + } + + var units = null; + var conversions = { + millisecond: 1, // ms -> ms + second: 1000, // ms -> sec + minute: 60, // sec -> min + hour: 60, // min -> hour + day: 24, // hour -> day + month: 30, // day -> month (roughly) + year: 12 // month -> year + }; + + for (var key in conversions) { + if (delta < conversions[key]) { + break; + } else { + units = key; // keeps track of the selected key over the iteration + delta = delta / conversions[key]; + } + } + + // pluralize a unit when the difference is greater than 1. + delta = Math.floor(delta); + if (delta !== 1) { units += "s"; } + return [delta, units, "ago"].join(" "); +}; + +/* + * Wraps up a common pattern used with this plugin whereby you take a String + * representation of a Date, and want back a date object. + */ +Date.fromString = function(str) { + return new Date(Date.parse(str)); +}; \ No newline at end of file diff --git a/js/iscroll-min.js b/js/iscroll-min.js new file mode 100644 index 0000000..5337ffe --- /dev/null +++ b/js/iscroll-min.js @@ -0,0 +1 @@ +(function(){function j(n,l){var o=this,m;o.element=typeof n=="object"?n:document.getElementById(n);o.wrapper=o.element.parentNode;o.element.style.webkitTransitionProperty="-webkit-transform";o.element.style.webkitTransitionTimingFunction="cubic-bezier(0,0,0.25,1)";o.element.style.webkitTransitionDuration="0";o.element.style.webkitTransform=h+"0,0"+b;o.options={bounce:d,momentum:d,checkDOMChanges:true,topOnDOMChanges:false,hScrollbar:d,vScrollbar:d,fadeScrollbar:g||!a,shrinkScrollbar:g||!a,desktopCompatibility:false,overflow:"auto",snap:false,bounceLock:false,scrollbarColor:"rgba(0,0,0,0.5)",onScrollEnd:function(){}};if(typeof l=="object"){for(m in l){o.options[m]=l[m]}}if(o.options.desktopCompatibility){o.options.overflow="hidden"}o.onScrollEnd=o.options.onScrollEnd;delete o.options.onScrollEnd;o.wrapper.style.overflow=o.options.overflow;o.refresh();window.addEventListener("onorientationchange" in window?"orientationchange":"resize",o,false);if(a||o.options.desktopCompatibility){o.element.addEventListener(f,o,false);o.element.addEventListener(i,o,false);o.element.addEventListener(e,o,false)}if(o.options.checkDOMChanges){o.element.addEventListener("DOMSubtreeModified",o,false)}}j.prototype={x:0,y:0,enabled:true,handleEvent:function(m){var l=this;switch(m.type){case f:l.touchStart(m);break;case i:l.touchMove(m);break;case e:l.touchEnd(m);break;case"webkitTransitionEnd":l.transitionEnd();break;case"orientationchange":case"resize":l.refresh();break;case"DOMSubtreeModified":l.onDOMModified(m);break}},onDOMModified:function(m){var l=this;if(m.target.parentNode!=l.element){return}setTimeout(function(){l.refresh()},0);if(l.options.topOnDOMChanges&&(l.x!=0||l.y!=0)){l.scrollTo(0,0,"0")}},refresh:function(){var m=this,o=m.x,n=m.y,l;m.scrollWidth=m.wrapper.clientWidth;m.scrollHeight=m.wrapper.clientHeight;m.scrollerWidth=m.element.offsetWidth;m.scrollerHeight=m.element.offsetHeight;m.maxScrollX=m.scrollWidth-m.scrollerWidth;m.maxScrollY=m.scrollHeight-m.scrollerHeight;m.directionX=0;m.directionY=0;if(m.scrollX){if(m.maxScrollX>=0){o=0}else{if(m.x=0){n=0}else{if(m.ym.scrollWidth;m.scrollY=!m.options.bounceLock&&!m.scrollX||m.scrollerHeight>m.scrollHeight;if(m.options.hScrollbar&&m.scrollX){m.scrollBarX=m.scrollBarX||new k("horizontal",m.wrapper,m.options.fadeScrollbar,m.options.shrinkScrollbar,m.options.scrollbarColor);m.scrollBarX.init(m.scrollWidth,m.scrollerWidth)}else{if(m.scrollBarX){m.scrollBarX=m.scrollBarX.remove()}}if(m.options.vScrollbar&&m.scrollY&&m.scrollerHeight>m.scrollHeight){m.scrollBarY=m.scrollBarY||new k("vertical",m.wrapper,m.options.fadeScrollbar,m.options.shrinkScrollbar,m.options.scrollbarColor);m.scrollBarY.init(m.scrollHeight,m.scrollerHeight)}else{if(m.scrollBarY){m.scrollBarY=m.scrollBarY.remove()}}},setPosition:function(l,o,n){var m=this;m.x=l;m.y=o;m.element.style.webkitTransform=h+m.x+"px,"+m.y+"px"+b;if(!n){if(m.scrollBarX){m.scrollBarX.setPosition(m.x)}if(m.scrollBarY){m.scrollBarY.setPosition(m.y)}}},setTransitionTime:function(m){var l=this;m=m||"0";l.element.style.webkitTransitionDuration=m;if(l.scrollBarX){l.scrollBarX.bar.style.webkitTransitionDuration=m;l.scrollBarX.wrapper.style.webkitTransitionDuration=d&&l.options.fadeScrollbar?"300ms":"0"}if(l.scrollBarY){l.scrollBarY.bar.style.webkitTransitionDuration=m;l.scrollBarY.wrapper.style.webkitTransitionDuration=d&&l.options.fadeScrollbar?"300ms":"0"}},touchStart:function(n){var m=this,l;if(!m.enabled){return}n.preventDefault();n.stopPropagation();m.scrolling=true;m.moved=false;m.distX=0;m.distY=0;m.setTransitionTime("0");if(m.options.momentum||m.options.snap){l=new WebKitCSSMatrix(window.getComputedStyle(m.element).webkitTransform);if(l.e!=m.x||l.f!=m.y){document.removeEventListener("webkitTransitionEnd",m,false);m.setPosition(l.e,l.f);m.moved=true}}m.touchStartX=a?n.changedTouches[0].pageX:n.pageX;m.scrollStartX=m.x;m.touchStartY=a?n.changedTouches[0].pageY:n.pageY;m.scrollStartY=m.y;m.scrollStartTime=n.timeStamp;m.directionX=0;m.directionY=0},touchMove:function(r){if(!this.scrolling){return}var p=this,o=a?r.changedTouches[0].pageX:r.pageX,n=a?r.changedTouches[0].pageY:r.pageY,m=p.scrollX?o-p.touchStartX:0,l=p.scrollY?n-p.touchStartY:0,s=p.x+m,q=p.y+l;r.stopPropagation();p.touchStartX=o;p.touchStartY=n;if(s>=0||s=0||p.maxScrollX>=0)?0:p.maxScrollX}if(q>=0||q=0||p.maxScrollY>=0)?0:p.maxScrollY}if(p.distX+p.distY>5){if(p.distX-3>p.distY){q=p.y;l=0}else{if(p.distY-3>p.distX){s=p.x;m=0}}p.setPosition(s,q);p.moved=true;p.directionX=m>0?-1:1;p.directionY=l>0?-1:1}else{p.distX+=Math.abs(m);p.distY+=Math.abs(l)}},touchEnd:function(t){if(!this.scrolling){return}var s=this,o=t.timeStamp-s.scrollStartTime,w=a?t.changedTouches[0]:t,u,v,n,l,m=0,r=s.x,q=s.y,p;s.scrolling=false;if(!s.moved){s.resetPosition();if(a){u=w.target;while(u.nodeType!=1){u=u.parentNode}v=document.createEvent("MouseEvents");v.initMouseEvent("click",true,true,t.view,1,w.screenX,w.screenY,w.clientX,w.clientY,t.ctrlKey,t.altKey,t.shiftKey,t.metaKey,0,null);v._fake=true;u.dispatchEvent(v)}return}if(!s.options.snap&&o>250){s.resetPosition();return}if(s.options.momentum){n=s.scrollX===true?s.momentum(s.x-s.scrollStartX,o,s.options.bounce?-s.x+s.scrollWidth/5:-s.x,s.options.bounce?s.x+s.scrollerWidth-s.scrollWidth+s.scrollWidth/5:s.x+s.scrollerWidth-s.scrollWidth):{dist:0,time:0};l=s.scrollY===true?s.momentum(s.y-s.scrollStartY,o,s.options.bounce?-s.y+s.scrollHeight/5:-s.y,s.options.bounce?(s.maxScrollY<0?s.y+s.scrollerHeight-s.scrollHeight:0)+s.scrollHeight/5:s.y+s.scrollerHeight-s.scrollHeight):{dist:0,time:0};m=Math.max(Math.max(n.time,l.time),1);r=s.x+n.dist;q=s.y+l.dist}if(s.options.snap){p=s.snap(r,q);r=p.x;q=p.y;m=Math.max(p.time,m)}s.scrollTo(r,q,m+"ms")},transitionEnd:function(){var l=this;document.removeEventListener("webkitTransitionEnd",l,false);l.resetPosition()},resetPosition:function(){var l=this,n=l.x,m=l.y;if(l.x>=0){n=0}else{if(l.x=0||l.maxScrollY>0){m=0}else{if(l.y0){l=Math.floor(l/m.scrollWidth)}else{if(m.directionX<0){l=Math.ceil(l/m.scrollWidth)}else{l=Math.round(l/m.scrollWidth)}}m.pageX=-l;l=l*m.scrollWidth;if(l>0){l=m.pageX=0}else{if(l0){o=Math.floor(o/m.scrollHeight)}else{if(m.directionY<0){o=Math.ceil(o/m.scrollHeight)}else{o=Math.round(o/m.scrollHeight)}}m.pageY=-o;o=o*m.scrollHeight;if(o>0){o=m.pageY=0}else{if(o=0){l=0}else{if(l=0){p=0}else{if(p0&&o>q){n=n*q/o/p;o=q}else{if(s<0&&o>l){n=n*l/o/p;o=l}}o=o*(s<0?-1:1);t=n/r;return{dist:Math.round(o),time:Math.round(t)}},destroy:function(l){var m=this;window.removeEventListener("onorientationchange" in window?"orientationchange":"resize",m,false);m.element.removeEventListener(f,m,false);m.element.removeEventListener(i,m,false);m.element.removeEventListener(e,m,false);document.removeEventListener("webkitTransitionEnd",m,false);if(m.options.checkDOMChanges){m.element.removeEventListener("DOMSubtreeModified",m,false)}if(m.scrollBarX){m.scrollBarX=m.scrollBarX.remove()}if(m.scrollBarY){m.scrollBarY=m.scrollBarY.remove()}if(l){m.wrapper.parentNode.removeChild(m.wrapper)}return null}};function k(m,r,q,n,l){var o=this,p=document;o.dir=m;o.fade=q;o.shrink=n;o.uid=++c;o.bar=p.createElement("div");o.bar.style.cssText="position:absolute;top:0;left:0;-webkit-transition-timing-function:cubic-bezier(0,0,0.25,1);pointer-events:none;-webkit-transition-duration:0;-webkit-transition-delay:0;-webkit-transition-property:-webkit-transform;z-index:10;background:"+l+";-webkit-transform:"+h+"0,0"+b+";"+(m=="horizontal"?"-webkit-border-radius:3px 2px;min-width:6px;min-height:5px":"-webkit-border-radius:2px 3px;min-width:5px;min-height:6px");o.wrapper=p.createElement("div");o.wrapper.style.cssText="-webkit-mask:-webkit-canvas(scrollbar"+o.uid+o.dir+");position:absolute;z-index:10;pointer-events:none;overflow:hidden;opacity:0;-webkit-transition-duration:"+(q?"300ms":"0")+";-webkit-transition-delay:0;-webkit-transition-property:opacity;"+(o.dir=="horizontal"?"bottom:2px;left:2px;right:7px;height:5px":"top:2px;right:2px;bottom:7px;width:5px;");o.wrapper.appendChild(o.bar);r.appendChild(o.wrapper)}k.prototype={init:function(l,n){var o=this,q=document,p=Math.PI,m;if(o.dir=="horizontal"){if(o.maxSize!=o.wrapper.offsetWidth){o.maxSize=o.wrapper.offsetWidth;m=q.getCSSCanvasContext("2d","scrollbar"+o.uid+o.dir,o.maxSize,5);m.fillStyle="rgb(0,0,0)";m.beginPath();m.arc(2.5,2.5,2.5,p/2,-p/2,false);m.lineTo(o.maxSize-2.5,0);m.arc(o.maxSize-2.5,2.5,2.5,-p/2,p/2,false);m.closePath();m.fill()}}else{if(o.maxSize!=o.wrapper.offsetHeight){o.maxSize=o.wrapper.offsetHeight;m=q.getCSSCanvasContext("2d","scrollbar"+o.uid+o.dir,5,o.maxSize);m.fillStyle="rgb(0,0,0)";m.beginPath();m.arc(2.5,2.5,2.5,p,0,false);m.lineTo(5,o.maxSize-2.5);m.arc(2.5,o.maxSize-2.5,2.5,0,p,false);m.closePath();m.fill()}}o.size=Math.max(Math.round(o.maxSize*o.maxSize/n),6);o.maxScroll=o.maxSize-o.size;o.toWrapperProp=o.maxScroll/(l-n);o.bar.style[o.dir=="horizontal"?"width":"height"]=o.size+"px"},setPosition:function(m){var l=this;if(l.wrapper.style.opacity!="1"){l.show()}m=Math.round(l.toWrapperProp*m);if(m<0){m=l.shrink?m+m*3:0;if(l.size+m<7){m=-l.size+6}}else{if(m>l.maxScroll){m=l.shrink?m+(m-l.maxScroll)*3:l.maxScroll;if(l.size+l.maxScroll-m<7){m=l.size+l.maxScroll-6}}}m=l.dir=="horizontal"?h+m+"px,0"+b:h+"0,"+m+"px"+b;l.bar.style.webkitTransform=m},show:function(){if(d){this.wrapper.style.webkitTransitionDelay="0"}this.wrapper.style.opacity="1"},hide:function(){if(d){this.wrapper.style.webkitTransitionDelay="350ms"}this.wrapper.style.opacity="0"},remove:function(){this.wrapper.parentNode.removeChild(this.wrapper);return null}};var d=("WebKitCSSMatrix" in window&&"m11" in new WebKitCSSMatrix()),g=(/iphone|ipad/gi).test(navigator.appVersion),a=("ontouchstart" in window),f=a?"touchstart":"mousedown",i=a?"touchmove":"mousemove",e=a?"touchend":"mouseup",h="translate"+(d?"3d(":"("),b=d?",0)":")",c=0;window.iScroll=j})(); \ No newline at end of file diff --git a/js/jsOAuth-1.2.min.js b/js/jsOAuth-1.2.min.js new file mode 100644 index 0000000..7e827e5 --- /dev/null +++ b/js/jsOAuth-1.2.min.js @@ -0,0 +1 @@ +var exports=exports||this;exports.OAuth=function(a){function t(a,b,c,d){var e=n(b),f=n(c),g=e.length,h,i,j,k;g>a.blocksize&&(e=a.hash(e),g=e.length),e=e.concat(m(a.blocksize-g)),i=e.slice(0),j=e.slice(0);for(k=0;k>>32-b}function q(a){var b="",c=a.length,d;for(d=0;d>>4).toString(16)),b.push((a[d]&15).toString(16));return b.join("")}function o(a){var b=[],c;for(c=0;c>>5]>>>24-c%32&255);return b}function n(a){var b=[],c,d;for(d=0;d>6),128+(c&63)):c<65536?b.push(224+(c>>12),128+(c>>6&63),128+(c&63)):c<2097152&&b.push(240+(c>>18),128+(c>>12&63),128+(c>>6&63),128+(c&63));return b}function m(a){var b=Array(++a);return b.join(0).split("")}function l(){var b;typeof a.Titanium!="undefined"&&typeof a.Titanium.Network.createHTTPClient!="undefined"?b=a.Titanium.Network.createHTTPClient():typeof require!="undefined"?b=(new require("xhr")).XMLHttpRequest():b=new a.XMLHttpRequest;return b}function k(a){function b(){return Math.floor(Math.random()*h.length)}a=a||64;var c=a/8,d="",e=c/4,f=c%4,g,h=["20","21","22","23","24","25","26","27","28","29","2A","2B","2C","2D","2E","2F","30","31","32","33","34","35","36","37","38","39","3A","3B","3C","3D","3E","3F","40","41","42","43","44","45","46","47","48","49","4A","4B","4C","4D","4E","4F","50","51","52","53","54","55","56","57","58","59","5A","5B","5C","5D","5E","5F","60","61","62","63","64","65","66","67","68","69","6A","6B","6C","6D","6E","6F","70","71","72","73","74","75","76","77","78","79","7A","7B","7C","7D","7E"];for(g=0;g0&&(d=c.join("&"));return d},e.prototype.setQueryParams=function(a){var b=arguments,c=b.length,d,e,f,g=this,h;if(c==1){if(typeof a=="object")for(d in a)a.hasOwnProperty(d)&&(g[d]=a[d]);else if(typeof a=="string"){e=a.split("&");for(d=0,f=e.length;d=200&&q.status<400||q.status===0?o(h):q.status>=400&&q.status!==0&&p(h)}},s={oauth_callback:c.callbackUrl,oauth_consumer_key:c.consumerKey,oauth_token:c.accessTokenKey,oauth_signature_method:c.signatureMethod,oauth_timestamp:j(),oauth_nonce:k(),oauth_verifier:c.verifier,oauth_version:f},t=c.signatureMethod,z=e.query.toObject();for(r in z)y[r]=z[r];if((!("Content-Type"in n)||n["Content-Type"]=="application/x-www-form-urlencoded")&&!A)for(r in m)y[r]=m[r];urlString=e.scheme+"://"+e.host+e.path,u=i(b,urlString,s,y),v=g.signatureMethod[t](c.consumerSecret,c.accessTokenSecret,u),s.oauth_signature=v;if(x||b=="GET")e.query.setQueryParams(m),w=null;else if(!A)if(typeof m=="string")w=m,"Content-Type"in n||(n["Content-Type"]="text/plain");else{for(r in m)w.push(g.urlEncode(r)+"="+g.urlEncode(m[r]+""));w=w.sort().join("&"),"Content-Type"in n||(n["Content-Type"]="application/x-www-form-urlencoded")}else if(A){w=new FormData;for(r in m)w.append(r,m[r])}q.open(b,e+"",!0),q.setRequestHeader("Authorization","OAuth "+h(s)),q.setRequestHeader("X-Requested-With","XMLHttpRequest");for(r in n)q.setRequestHeader(r,n[r]);q.send(w)};return this},get:function(a,b,c){this.request({url:a,success:b,failure:c})},post:function(a,b,c,d){this.request({method:"POST",url:a,data:b,success:c,failure:d})},getJSON:function(a,b,c){this.get(a,function(a){b(JSON.parse(a.text))},c)},parseTokenRequest:function(a){var b=0,c=a.split("&"),d=c.length,e={};for(;b{}|`^\\\u0080-\uffff]/,d=a.length,e,f=a.split(""),g;for(e=0;e>6))+b(128+(g&63)):g<65536?f[e]=b(224+(g>>12))+b(128+(g>>6&63))+b(128+(g&63)):g<2097152&&(f[e]=b(240+(g>>18))+b(128+(g>>12&63))+b(128+(g>>6&63))+b(128+(g&63)));return f.join("")},g.urlDecode=function(a){if(!a)return"";return a.replace(/%[a-fA-F0-9]{2}/ig,function(a){return String.fromCharCode(parseInt(a.replace("%",""),16))})},s.prototype=new s,s.prototype.blocksize=64,s.prototype.hash=function(a){function A(a,b,c,d){switch(a){case 0:return b&c|~b&d;case 1:case 3:return b^c^d;case 2:return b&c|b&d|c&d}return-1}var b=[1732584193,4023233417,2562383102,271733878,3285377520],c=[1518500249,1859775393,2400959708,3395469782],d,e,f,g,h,i,j,k,l,p,q,s,t,u,v,w,x,y,z;a.constructor===String&&(a=n(a.encodeUTF8())),f=a.length,g=Math.ceil((f+9)/this.blocksize)*this.blocksize-(f+9),e=Math.floor(f/4294967296),d=Math.floor(f%4294967296),h=[e*8>>24&255,e*8>>16&255,e*8>>8&255,e*8&255,d*8>>24&255,d*8>>16&255,d*8>>8&255,d*8&255],a=a.concat([128],m(g),h),i=Math.ceil(a.length/this.blocksize);for(j=0;j>>2]|=k[q]<<24-(q-(q>>2)*4)*8;s=b[0],t=b[1],u=b[2],v=b[3],w=b[4];for(x=0;x<80;x++)x>=16&&(p[x]=r(p[x-3]^p[x-8]^p[x-14]^p[x-16],1)),y=Math.floor(x/20),z=r(s,5)+A(y,t,u,v)+w+c[y]+p[x],w=v,v=u,u=r(t,30),t=s,s=z;b[0]+=s,b[1]+=t,b[2]+=u,b[3]+=v,b[4]+=w}return o(b)};return g}(this),function(a){var b="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";a.btoa=a.btoa||function(a){var c=0,d=a.length,e,f,g="";for(;c>2,(e[0]&3)<<4|e[1]>>4,(e[1]&15)<<2|e[2]>>6,e[2]&63],isNaN(e[1])&&(f[2]=64),isNaN(e[2])&&(f[3]=64),g+=b.charAt(f[0])+b.charAt(f[1])+b.charAt(f[2])+b.charAt(f[3]);return g}}(this) \ No newline at end of file diff --git a/js/lemma.js b/js/lemma.js new file mode 100644 index 0000000..44a7b86 --- /dev/null +++ b/js/lemma.js @@ -0,0 +1,177 @@ +// Timeline variables. +var scrollpanelTimeline, whichScroller, last_tweet_id; +var status_count = 50; +var just_launched = 1; +var last_view_type = 0; + +// Account variables. +var accountIsSet = null; +var accountScreenName = null; +var accountID = null; +var accessToken = null; +var accessTokenSecret = null; +if (typeof localStorage !== 'undefined') { + status_count = localStorage.getItem("status_count"); + accountIsSet = localStorage.getItem("accountIsSet"); + accountScreenName = localStorage.getItem("accountScreenName"); + accountID = localStorage.getItem("accountID"); + accessToken = localStorage.getItem("accessToken"); + accessTokenSecret = localStorage.getItem("accessTokenSecret"); + + if ( status_count == null ) { + status_count = 50; + localStorage.setItem('status_count', status_count); + } +} + +// OAuth variables. +var oauth, requestParams, accessParams; +var options = { + consumerKey: 'removed', + consumerSecret: 'removed' +}; +oauth = OAuth(options); +if ( accountIsSet != null ) { + oauth.setAccessToken([accessToken, accessTokenSecret]); +} + +// List variables. +var lists = null; +var current_view = 'All'; + +// Search variables. +var search_term; + +// Reply variables. +var reply_id = ''; +var str_tweet = ''; +var str_tweet_raw = ''; +var str_tweet_user = ''; + +// Constants. +var CONST_HOME = 0; +var CONST_LOADING = 1; +var CONST_USER = 2; +var CONST_LIST = 3; +var CONST_SEARCH = 4; +var CONST_BACKBUTTON = 5; +var CONST_MENTIONS = 6; +var CONST_DIRECTMESSAGES = 7; + +String.prototype.replace_url_with_html_links = function() { + var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig; + + return this.replace(exp, "$1"); +}; + +String.prototype.linkify_tweet = function() { + var tweet = this.replace(/(^|\s|\.|")@(\w+)/g, "$1@$2"); + + return tweet.replace(/(^|\s)#(\w+)/g, "$1#$2"); +}; + +String.prototype.replace_smart_quotes = function() { + var str = this.replace(/(& #8220;)|(& #8221;)|[“”\u8220\u8221]/g, "\""); + return str.replace(/(& #8216;)|(& #8217;)|[‘’\u8216\u8217]/g, "'"); +} + +// Authorization step #1: Launch browser to allow user to enter username/password and receive a PIN. +// Makes use of jsOAuth ( https://github.com/bytespider/jsOAuth ). +// To simulate in Chrome: chrome.exe --disable-web-security +function doAuthGetPIN() { + oauth.get('https://twitter.com/oauth/request_token', + function(data) { + requestParams = data.text; + followLink('https://twitter.com/oauth/authorize?' + data.text); + } + ); +} + +// Authorization step #2: Submit the PIN and get back an access token and access token secret. +// Makes use of jsOAuth ( https://github.com/bytespider/jsOAuth ). +// To simulate in Chrome: chrome.exe --disable-web-security +function doAuthStepTwo() { + var accountPIN = $('#accessPIN').value; + + oauth.get('https://twitter.com/oauth/access_token?oauth_verifier=' + accountPIN + '&' + requestParams, + function(data) { + // Split the query string as needed. + var accessParams = {}; + var qvars_tmp = data.text.split('&'); + for (var i = 0; i < qvars_tmp.length; i++) {; + var y = qvars_tmp[i].split('='); + accessParams[y[0]] = decodeURIComponent(y[1]); + }; + + // Save the access token and access token secret. + accountIsSet = '1'; + accessToken = accessParams.oauth_token; + accessTokenSecret = accessParams.oauth_token_secret; + if (typeof localStorage !== 'undefined') { + localStorage.setItem('accountIsSet', accountIsSet); + localStorage.setItem('accessToken', accessToken); + localStorage.setItem('accessTokenSecret', accessTokenSecret); + } + + // Set the access token and access token secret so the application can be used. + oauth.setAccessToken([accessToken, accessTokenSecret]); + + oauth.get('http://api.twitter.com/1/account/verify_credentials.json', + function(data) { + var account = JSON.parse(data.text); + + // Set the account screen name. + accountScreenName = account.screen_name; + accountID = account.id_str; + localStorage.setItem('accountScreenName', accountScreenName); + localStorage.setItem('accountID', accountID); + + // Show the success screen. + $("#misc_header").fill('Account Authorized'); + $("#misc_text").fill($.make('Account successfully authorized for ' + accountScreenName + '! You can now begin to use Lemma.')); + gotoPage('#misc_view'); + } + ); + }, + + function(data) { + // Show the failure screen. + $("#misc_header").fill('Error'); + $("#misc_text").fill($.make("Sorry, we weren't able to set up your account to use Lemma. Please try again.")); + gotoPage('#misc_view'); + } + ); +} + +// Remove the local storage of the user's credentials. +function doAuthRemove() { + accountIsSet = null; + accountScreenName = null; + accountID = null; + accessToken = null; + accessTokenSecret = null; + localStorage.removeItem('accountIsSet'); + localStorage.removeItem('accountScreenName'); + localStorage.removeItem('accountID'); + localStorage.removeItem('accessToken'); + localStorage.removeItem('accessTokenSecret'); + + // Show the failure screen. + $("#misc_header").fill('Account Removed'); + $("#misc_text").fill($.make("Your account settings were successfully removed.")); + gotoPage('#misc_view'); +} + +// Retrieve details about the current authenticated user. +function verifyCredentials() { + oauth.get('http://api.twitter.com/1/account/verify_credentials.json', + function(data) { + //var credentials = JSON.parse(data.text); + + // Show the success screen. + $("#misc_header").fill('Verify Credentials'); + $("#misc_text").fill($.make('Credentials are as follows:
' + data.text)); + gotoPage('#misc_view'); + } + ); +} \ No newline at end of file diff --git a/js/list.js b/js/list.js new file mode 100644 index 0000000..a9bca36 --- /dev/null +++ b/js/list.js @@ -0,0 +1,223 @@ +function List( u, s ) { + this.user_id; + this.screen_name; + this.cursor; + + this.all_lists; + this.list_position; + this.retrieved_lists; + + // Constructor function. + this.init = function() { + this.user_id = u; + this.screen_name = s; + this.all_lists = new Array(); + this.list_position = 0; + this.retrieved_lists = 0; + } + this.init(); + + this.change_list = function( direction ) { + if ( lists.retrieved_lists == 0 ) { + oauth.get('http://api.twitter.com/1/lists.json', + function(data) { + var lists_json = JSON.parse(data.text); + + // Iterate through the lists, creating the string in memory. + for ( var i = 0; i < lists_json.lists.length; i++ ) { + var new_list = new Array(); + + // Save the lists to a global variable so we can page through them quickly. + new_list['id_str'] = lists_json.lists[i].id_str; + new_list['slug'] = lists_json.lists[i].slug; + new_list['name'] = lists_json.lists[i].name; + lists.all_lists.push(new_list); + } + + // Mark the lists as having been retrieved. + lists.retrieved_lists = 1; + + if ( direction == 'next' ) { + lists.list_position = -1; + lists.view_next(); + } + else { + lists.list_position = 1; + lists.view_prev(); + } + } + ); + } + else { + if ( direction == 'next' ) { + lists.view_next(); + } + else { + lists.view_prev(); + } + } + } + + // Change to the next view. + this.view_next = function() { + if ( lists.list_position < (lists.all_lists.length - 1) ) { + lists.view_list(lists.all_lists[lists.list_position + 1].id_str, lists.all_lists[lists.list_position + 1].name); + } + else { + lists.view_list(lists.all_lists[0].id_str, lists.all_lists[0].name); + } + } + + // Change to the previous view. + this.view_prev = function() { + if ( lists.list_position == 0 ) { + lists.view_list(lists.all_lists[(lists.all_lists.length - 1)].id_str, lists.all_lists[(lists.all_lists.length - 1)].name); + } + else { + lists.view_list(lists.all_lists[lists.list_position - 1].id_str, lists.all_lists[lists.list_position - 1].name); + } + } + + // Get the current list's position. + this.set_position = function( id_str ) { + for ( var i = 0; i < lists.all_lists.length; i++ ) { + if ( lists.all_lists[i].id_str == id_str ) { + lists.list_position = i; + } + } + } + + // View a specific list's timeline. + this.view_list = function( id_str, name ) { + oauth.get('http://api.twitter.com/1/lists/statuses.json?per_page=' + status_count + '&list_id=' + id_str, + function(data) { + var json_data = JSON.parse(data.text); + + current_view = name; + lists.set_position(id_str); + updateViewName(name, CONST_LIST, id_str); + updateTimeline(json_data, false, CONST_LIST); + } + ); + } + + // Get all of the user's lists. + this.get_lists = function() { + oauth.get('http://api.twitter.com/1/lists.json', + function(data) { + var lists_json = JSON.parse(data.text); + + // Iterate through the lists, creating the string in memory. + for ( var i = 0; i < lists_json.lists.length; i++ ) { + var new_list = new Array(); + + // Save the lists to a global variable so we can page through them quickly. + new_list['id_str'] = lists_json.lists[i].id_str; + new_list['slug'] = lists_json.lists[i].slug; + new_list['name'] = lists_json.lists[i].name; + lists.all_lists.push(new_list); + } + + // Mark the lists as having been retrieved. + lists.retrieved_lists = 1; + } + ); + } + + // Display all of the user's lists. + this.display_lists = function() { + // Retrieve the template for the list of lists and iterate through it. + var content = $("#lists_subview"); + content.xhr("data/list.html", { + successCallback: function() { + var str_template = $.responseText; + var str_lists = ''; + + // Iterate through the lists, creating the string in memory. + for ( var i = 0; i < lists.all_lists.length; i++ ) { + var str_instance = str_template; + + // Swap in list data for create our view. + str_instance = str_instance.replace('${id_str}', lists.all_lists[i]['id_str']); + str_instance = str_instance.replace(/\$\{name\}/g, lists.all_lists[i]['name']); + str_lists = str_lists + str_instance; + } + + $.responseText = null; + str_template = null; + + // Display the list of lists. + $("#lists_subview").fill($.make('' + str_lists + '')); + + // Re-enable scrolling for the timeline scrollpanel. + var options = { bounce: false, fadeScrollbar: false }; + scrollpanelTimeline = $('#lists_scrollpanel'); + var scroller = new $.UIScroll(scrollpanelTimeline.parentNode, options); + + gotoPage('#lists_view'); + } + }); + } + + // Combination of the two functions above: Get all of the user's lists and display all of them. + this.retrieve_all = function() { + // If we've already retrieved all lists once this session, just use those. + if ( lists.retrieved_lists == 1 ) { + return lists.display_lists(); + } + + oauth.get('http://api.twitter.com/1/lists.json', + function(data) { + var lists_json = JSON.parse(data.text); + + // Retrieve the template for the list of lists and iterate through it. + var content = $("#lists_subview"); + content.xhr("data/list.html", { + successCallback: function() { + var str_template = $.responseText; + var str_lists = ''; + + // Iterate through the lists, creating the string in memory. + for ( var i = 0; i < lists_json.lists.length; i++ ) { + var new_list = new Array(); + var str_instance = str_template; + + // Save the lists to a global variable so we can page through them quickly. + new_list['id_str'] = lists_json.lists[i].id_str; + new_list['slug'] = lists_json.lists[i].slug; + new_list['name'] = lists_json.lists[i].name; + lists.all_lists.push(new_list); + + // Swap in list data for create our view. + str_instance = str_instance.replace('${id_str}', new_list['id_str']); + str_instance = str_instance.replace(/\$\{name\}/g, new_list['name']); + str_lists = str_lists + str_instance; + } + + $.responseText = null; + str_template = null; + + // Mark the lists as having been retrieved. + lists.retrieved_lists = 1; + + // Display the list of lists. + $("#lists_subview").fill($.make('' + str_lists + '')); + + // Re-enable scrolling for the timeline scrollpanel. + var options = { bounce: false, fadeScrollbar: false }; + scrollpanelTimeline = $('#lists_scrollpanel'); + var scroller = new $.UIScroll(scrollpanelTimeline.parentNode, options); + + gotoPage('#lists_view'); + } + }); + }, + + function(data) { + $("#misc_header").fill('Error'); + $("#misc_text").fill($.make('Sorry, your lists could not be retrieved at this time. Please try again later.')); + gotoPage('#misc_view'); + } + ); + } +} \ No newline at end of file diff --git a/js/navigation.js b/js/navigation.js new file mode 100644 index 0000000..d6537f2 --- /dev/null +++ b/js/navigation.js @@ -0,0 +1,403 @@ +function updateTimeline( json_data, insert_more, data_type ) { + var content = $("#timeline_subview"); + content.xhr("data/timeline.html", { + successCallback: function() { + var str_template = $.responseText; + var str_timeline = ''; + + /* + if (data_type == CONST_USER) { + str_timeline = str_timeline + 'User buttons'; + } + */ + + // Iterate through the JSON data, creating the string in memory. + for ( var i = 0; i < json_data.length; i++ ) { + var str_id = json_data[i].id_str; + + if ( str_id != last_tweet_id ) { + var str_instance = str_template; + var str_text = json_data[i].text; + var str_raw_text = json_data[i].text; + var str_date = json_data[i].created_at; + var str_profileimageurl = ''; + var str_screenname = ''; + + // If the data is from the Twitter search API, get the profile image URL and screen name from the main object. + // Else retrieve it from the REST API's embedded user structure. + if (data_type == CONST_SEARCH) { + str_profileimageurl = json_data[i].profile_image_url; + str_screenname = json_data[i].from_user; + } + else { + str_profileimageurl = json_data[i].user.profile_image_url; + str_screenname = json_data[i].user.screen_name; + } + + // Update last_tweet_id with this tweet's ID. + last_tweet_id = str_id; + + // Change URLs into links and make hashtags and usernames clickable. + str_text = str_text.replace_smart_quotes(); + str_text = str_text.linkify_tweet(); + str_text = str_text.replace_url_with_html_links(); + + // Use the bigger size profile images. + var re = new RegExp("_normal.jpg$", "g"); + str_profileimageurl = str_profileimageurl.replace(re, '_bigger.jpg'); + + // Display the timestamp in relative time. + str_date = new Date(json_data[i].created_at).toRelativeTime(); + + str_instance = str_instance.replace(/\$\{id\}/g, str_id); + str_instance = str_instance.replace('${profile_image_url}', str_profileimageurl); + str_instance = str_instance.replace(/\$\{screen_name\}/g, str_screenname); + str_instance = str_instance.replace('${text}', str_text); + str_instance = str_instance.replace('${raw_text}', str_raw_text); + str_instance = str_instance.replace('${created_at}', str_date); + + str_timeline = str_timeline + str_instance; + } + } + + $.responseText = null; + str_template = null; + + //str_timeline = str_timeline + 'Load more tweets'; + + if ( insert_more == false ) { + content.fill($.make('' + str_timeline + '')); + + // Re-enable scrolling for the timeline scrollpanel. + var options = { bounce: false, fadeScrollbar: false }; + scrollpanelTimeline = $('#timeline_scrollpanel'); + var scroller = new $.UIScroll(scrollpanelTimeline.parentNode, options); + } + else { + content.insert($.make(str_timeline)); + + // Re-enable scrolling for the timeline scrollpanel. + var options = { bounce: false, fadeScrollbar: false }; + var scroller = $.UIScrollers[whichScroller]; + scroller = new $.UIScroll(scrollpanelTimeline.parentNode, options); + } + + } + }); +} + +// Launch the BlackBerry PlayBook browser for a URL (or the native browser if we're not on a PlayBook). +function followLink( address ) { + var encodedAddress = ''; + + // URL Encode all instances of ':' in the address + encodedAddress = address.replace(/:/g, "%3A"); + // Leave the first instance of ':' in its normal form + encodedAddress = encodedAddress.replace(/%3A/, ":"); + // Escape all instances of '&' in the address + encodedAddress = encodedAddress.replace(/&/g, "\&"); + + if (typeof blackberry !== 'undefined') { + try { + // If I am a BlackBerry device, invoke native browser. + var args = new blackberry.invoke.BrowserArguments(encodedAddress); + blackberry.invoke.invoke(blackberry.invoke.APP_BROWSER, args); + } catch(e) { + alert("Sorry, there was a problem invoking the browser."); + } + } else { + // If I am not a BlackBerry device, open link in current browser. + window.open(encodedAddress); + } +} + +// Navigate to a different view in the application. +function gotoPage( view_name, reset_history ) { + executeView(view_name); + $(view_name).setAttribute("ui-navigation-status", "current"); + $($.UINavigationHistory[$.UINavigationHistory.length-1]).setAttribute("ui-navigation-status", "traversed"); + if ( reset_history != null ) { + $.UINavigationHistory = new Array(); + } + $.UINavigationHistory.push(view_name); +} + +// Navigate back from a view in the application. +function goBack() { + var page_current = $.UINavigationHistory[$.UINavigationHistory.length-1]; + $.UINavigationHistory.pop(); + executeView($.UINavigationHistory[$.UINavigationHistory.length-1]); + $($.UINavigationHistory[$.UINavigationHistory.length-1]).setAttribute("ui-navigation-status", "current"); + $(page_current).setAttribute("ui-navigation-status", "upcoming"); + + updateViewName(current_view, CONST_BACKBUTTON); +} + +// Navigate to the top of the timeline. +function goHome( time ) { + /* + var uiscroller = $.UIScrollers[whichScroller]; + if (time === undefined) time = 200; + uiscroller.scrollTo(0, 0, time); + untouchButtons(); + */ + 1; +} + +// Post a new status message to the user's own timeline. +function postTweet() { + var url = 'http://api.twitter.com/1/statuses/update.json'; + var status = $('#tweet_textarea').value; + var in_reply_to_status_id = $('#in_reply_to_status_id').innerHTML; + + // If the status is empty or more than 140 characters, just exit without posting to the Twitter API. + if ( status.length < 1 || status.length > 140 ) { + return; + } + + oauth.post(url, + { 'status': status, 'in_reply_to_status_id': in_reply_to_status_id, 'trim_user': '1', 'include_entities': '0' }, + + function(data) { + var json_data = JSON.parse(data.text); + + $("#tweet_result").fill($.make('Success!')); + $('#tweet_textarea').value = ''; + }, + + function(data) { + $("#tweet_result").fill($.make('Error, please retry.')); + } + ); + +} + +// Retweet a tweet. +function postRetweet() { + var url = 'http://api.twitter.com/1/statuses/retweet/' + reply_id + '.json'; + + oauth.post(url, + { 'id': reply_id, 'trim_user': '1', 'include_entities': '0' }, + + function(data) { + var json_data = JSON.parse(data.text); + + $("#misc_header").fill('Retweeted succesfully.'); + $("#misc_text").fill($.make('The message below was sucessfully retweeted:

@' + str_tweet)); + gotoPage('#misc_view'); + }, + + function(data) { + $("#misc_header").fill('Error'); + $("#misc_text").fill($.make('Could not complete the action. Please retry later.')); + gotoPage('#misc_view'); + } + ); +} + +// Favourite a tweet. +function postFavourite() { + var url = 'http://api.twitter.com/1/favorites/create/' + reply_id + '.json'; + + oauth.post(url, + { 'id': reply_id, 'skip_status': '1', 'include_entities': '0' }, + + function(data) { + var json_data = JSON.parse(data.text); + + $("#misc_header").fill('Favourited succesfully.'); + $("#misc_text").fill($.make('The message below was sucessfully favourited:

@' + str_tweet)); + gotoPage('#misc_view'); + }, + + function(data) { + $("#misc_header").fill('Error'); + $("#misc_text").fill($.make('Could not complete the action. Please retry later.')); + gotoPage('#misc_view'); + } + ); +} + +// Navigate to a list of direct messages. +function viewDirectMessages( go_back ) { + var url = 'https://api.twitter.com/1/direct_messages.json?include_entities=0&count=' + status_count; + + if ( go_back == 1 ) { + goBack(); + untouchButtons(); + } + updateViewName('Retrieving direct messages...', CONST_LOADING); + + oauth.get(url, + function(data) { + var json_data = JSON.parse(data.text); + + updateTimeline(json_data, false, CONST_DIRECTMESSAGES); + + current_view = 'Direct Messages'; + updateViewName(current_view, CONST_DIRECTMESSAGES); + } + ); +} + +// Navigate to a list of mentions. +function viewMentions( go_back ) { + var url = 'http://api.twitter.com/1/statuses/mentions.json?include_rts=1&count=' + status_count; + + if ( go_back == 1 ) { + goBack(); + untouchButtons(); + } + updateViewName('Retrieving mentions...', CONST_LOADING); + + oauth.get(url, + function(data) { + var json_data = JSON.parse(data.text); + + updateTimeline(json_data, false, CONST_MENTIONS); + + current_view = 'Mentions'; + updateViewName(current_view, CONST_MENTIONS); + } + ); +} + +// Navigate to a list of a user's tweets. +function viewUser( screen_name ) { + var url = 'http://api.twitter.com/1/statuses/user_timeline.json?include_rts=1&screen_name=' + screen_name + '&count=' + status_count; + + updateViewName('Retrieving tweets...', CONST_LOADING); + + oauth.get(url, + function(data) { + var json_data = JSON.parse(data.text); + + updateTimeline(json_data, false, CONST_USER); + + current_view = screen_name; + updateViewName(screen_name, CONST_USER); + } + ); + + untouchButtons(); +} + +function searchUser() { + viewUser($('#user_textarea').value); + $('#user_textarea').value = ''; + gotoPage('#main'); +} + +function doSearch() { + viewHashTag($('#search_textarea').value); + $('#search_textarea').value = ''; + gotoPage('#main'); +} + +// Run a search for a hash tag. +function viewHashTag( hash_tag ) { + ht_search = new Search(hash_tag); + + updateViewName('Retrieving tweets...', CONST_LOADING); + + ht_search.execute(); +} + +// Navigate to the view of all of the user's lists. +function goLists( user_id, screen_name ) { + if ( lists == null ) { + lists = new List(user_id, screen_name); + } + + if ( lists.retrieved_lists == 0 ) { + updateViewName('Getting your lists...', CONST_LOADING); + } + + lists.retrieve_all(); + untouchButtons(); +} + +function viewListPrev( user_id, screen_name ) { + updateViewName('Retrieving tweets...', CONST_LOADING); + + if ( lists == null ) { + lists = new List(user_id, screen_name); + } + + lists.change_list('prev'); + untouchButtons(); +} + +function viewListNext( user_id, screen_name ) { + updateViewName('Retrieving tweets...', CONST_LOADING); + + if ( lists == null ) { + lists = new List(user_id, screen_name); + } + + lists.change_list('next'); + untouchButtons(); +} + +function viewList( id_str, name, go_back ) { + if ( go_back == 1 ) { + goBack(); + untouchButtons(); + } + updateViewName('Retrieving tweets...', CONST_LOADING); + + lists.view_list(id_str, name); +} + +function updateViewName( name, view_type, id_str ) { + // If the back button is hit, load the last view type. + if ( view_type == CONST_BACKBUTTON ) { + view_type = last_view_type; + } + + switch( view_type ) { + case CONST_DIRECTMESSAGES: + name = ' Direct Messages'; + color = '#fff'; + break; + case CONST_MENTIONS: + name = ' Mentions'; + color = '#fff'; + break; + case CONST_SEARCH: + name = ' ' + name + ''; + color = '#fff'; + break; + case CONST_LIST: + name = ' ' + name + ''; + color = '#fff'; + break; + case CONST_USER: + name = ' @' + name + ''; + color = '#fff'; + break; + case CONST_LOADING: + name = ' ' + name; + color = '#95B9C7'; + break; + default: + name = ' All'; + color = '#fff'; + } + + // Update the last view type (in case the Back button is hit). + if ( view_type != CONST_LOADING ) { + last_view_type = view_type; + } + + $('#btn_current_view').style.color = color; + $('#btn_current_view').fill($.make(name)); + + untouchButtons(); +} + +function untouchButtons() { + if ( $.UITouchedButton != null ) { + $.UITouchedButton.removeClass("touched"); + } +} \ No newline at end of file diff --git a/js/search.js b/js/search.js new file mode 100644 index 0000000..1f097b6 --- /dev/null +++ b/js/search.js @@ -0,0 +1,29 @@ +function Search( t ) { + // Constructor function. + this.init = function() { + search_term = t; + } + this.init(); + + this.execute = function() { + $.app.xhr('http://search.twitter.com/search.json?rpp=' + status_count + '&q=' + encodeURIComponent(search_term), { + successCallback: function() { + var json_data = JSON.parse($.responseText); + + updateTimeline(json_data.results, false, CONST_SEARCH); + + $.responseText = null; + json_data = null; + + current_view = search_term; + updateViewName(search_term, CONST_SEARCH); + }, + errorCallback: function() { + // Show the failure screen. + $("#misc_header").fill('Error'); + $("#misc_text").fill($.make("Sorry, we weren't able to accomplish that search. Please try again.")); + gotoPage('#misc_view'); + } + }); + } +} \ No newline at end of file