diff options
Diffstat (limited to 'js/dojo/dojox/mobile/scrollable.js')
| -rw-r--r-- | js/dojo/dojox/mobile/scrollable.js | 1106 |
1 files changed, 1106 insertions, 0 deletions
diff --git a/js/dojo/dojox/mobile/scrollable.js b/js/dojo/dojox/mobile/scrollable.js new file mode 100644 index 0000000..82f44a6 --- /dev/null +++ b/js/dojo/dojox/mobile/scrollable.js @@ -0,0 +1,1106 @@ +//>>built + + +define("dojox/mobile/scrollable", [ + "dojo/_base/kernel", + "dojo/_base/connect", + "dojo/_base/event", + "dojo/_base/lang", + "dojo/_base/window", + "dojo/dom-class", + "dojo/dom-construct", + "dojo/dom-style", + "./sniff" +], function(dojo, connect, event, lang, win, domClass, domConstruct, domStyle, has){ + + var dm = lang.getObject("dojox.mobile", true); + +/*===== +// summary: +// Utility for enabling touch scrolling capability. +// description: +// Mobile WebKit browsers do not allow scrolling inner DIVs. (You need +// the two-finger operation to scroll them.) +// That means you cannot have fixed-positioned header/footer bars. +// To solve this issue, this module disables the browsers default scrolling +// behavior, and re-builds its own scrolling machinery by handling touch +// events. In this module, this.domNode has height "100%" and is fixed to +// the window, and this.containerNode scrolls. If you place a bar outside +// of this.containerNode, then it will be fixed-positioned while +// this.containerNode is scrollable. +// +// This module has the following features: +// - Scrolls inner DIVs vertically, horizontally, or both. +// - Vertical and horizontal scroll bars. +// - Flashes the scroll bars when a view is shown. +// - Simulates the flick operation using animation. +// - Respects header/footer bars if any. +// +// dojox.mobile.scrollable is a simple function object, which holds +// several properties and functions in it. But if you transform it to a +// dojo class, it can be used as a mix-in class for any custom dojo +// widgets. dojox.mobile._ScrollableMixin is such a class. +// +// Also, it can be used even for non-dojo applications. In such cases, +// several dojo APIs used in this module, such as dojo.connect, +// dojo.create, etc., are re-defined so that the code works without dojo. +// When in dojo, of course those re-defined functions are not necessary. +// So, they are surrounded by the includeStart and includeEnd directives +// so that they can be excluded from the build. +// +// If you use this module for non-dojo application, you need to explicitly +// assign your outer fixed node and inner scrollable node to this.domNode +// and this.containerNode respectively. +// +// Non-dojo application should capture the onorientationchange or +// the onresize event and call resize() in the event handler. +// +// example: +// Use this module from a non-dojo applicatoin: +// | function onLoad(){ +// | var scrollable = new dojox.mobile.scrollable(dojo, dojox); +// | scrollable.init({ +// | domNode: "outer", // id or node +// | containerNode: "inner" // id or node +// | }); +// | } +// | <body onload="onLoad()"> +// | <h1 id="hd1" style="position:relative;width:100%;z-index:1;"> +// | Fixed Header +// | </h1> +// | <div id="outer" style="position:relative;height:100%;overflow:hidden;"> +// | <div id="inner" style="position:absolute;width:100%;"> +// | ... content ... +// | </div> +// | </div> +// | </body> +=====*/ + +var scrollable = function(/*Object?*/dojo, /*Object?*/dojox){ + this.fixedHeaderHeight = 0; // height of a fixed header + this.fixedFooterHeight = 0; // height of a fixed footer + this.isLocalFooter = false; // footer is view-local (as opposed to application-wide) + this.scrollBar = true; // show scroll bar or not + this.scrollDir = "v"; // v: vertical, h: horizontal, vh: both, f: flip + this.weight = 0.6; // frictional drag + this.fadeScrollBar = true; + this.disableFlashScrollBar = false; + this.threshold = 4; // drag threshold value in pixels + this.constraint = true; // bounce back to the content area + this.touchNode = null; // a node that will have touch event handlers + this.isNested = false; // this scrollable's parent is also a scrollable + this.dirLock = false; // disable the move handler if scroll starts in the unexpected direction + this.height = ""; // explicitly specified height of this widget (ex. "300px") + this.androidWorkaroud = true; // workaround input field jumping issue + + + this.init = function(/*Object?*/params){ + if(params){ + for(var p in params){ + if(params.hasOwnProperty(p)){ + this[p] = ((p == "domNode" || p == "containerNode") && typeof params[p] == "string") ? + win.doc.getElementById(params[p]) : params[p]; // mix-in params + } + } + } + this.touchNode = this.touchNode || this.containerNode; + this._v = (this.scrollDir.indexOf("v") != -1); // vertical scrolling + this._h = (this.scrollDir.indexOf("h") != -1); // horizontal scrolling + this._f = (this.scrollDir == "f"); // flipping views + + this._ch = []; // connect handlers + this._ch.push(connect.connect(this.touchNode, + has("touch") ? "touchstart" : "onmousedown", this, "onTouchStart")); + if(has("webkit")){ + this._ch.push(connect.connect(this.domNode, "webkitAnimationEnd", this, "onFlickAnimationEnd")); + this._ch.push(connect.connect(this.domNode, "webkitAnimationStart", this, "onFlickAnimationStart")); + + this._aw = this.androidWorkaroud && + has("android") >= 2.2 && has("android") < 3; + if(this._aw){ + this._ch.push(connect.connect(win.global, "onresize", this, "onScreenSizeChanged")); + this._ch.push(connect.connect(win.global, "onfocus", this, function(e){ + if(this.containerNode.style.webkitTransform){ + this.stopAnimation(); + this.toTopLeft(); + } + })); + this._sz = this.getScreenSize(); + } + + // Creation of keyframes takes a little time. If they are created + // in a lazy manner, a slight delay is noticeable when you start + // scrolling for the first time. This is to create keyframes up front. + for(var i = 0; i < 3; i++){ + this.setKeyframes(null, null, i); + } + } + // Workaround for iPhone flicker issue + if(has("iphone")){ + domStyle.set(this.containerNode, "webkitTransform", "translate3d(0,0,0)"); + } + + this._speed = {x:0, y:0}; + this._appFooterHeight = 0; + if(this.isTopLevel() && !this.noResize){ + this.resize(); + } + var _this = this; + setTimeout(function(){ + _this.flashScrollBar(); + }, 600); + }; + + this.isTopLevel = function(){ + // subclass may want to override + return true; + }; + + this.cleanup = function(){ + if(this._ch){ + for(var i = 0; i < this._ch.length; i++){ + connect.disconnect(this._ch[i]); + } + this._ch = null; + } + }; + + this.findDisp = function(/*DomNode*/node){ + // summary: + // Finds the currently displayed view node from my sibling nodes. + if(!node.parentNode){ return null; } + var nodes = node.parentNode.childNodes; + for(var i = 0; i < nodes.length; i++){ + var n = nodes[i]; + if(n.nodeType === 1 && domClass.contains(n, "mblView") && n.style.display !== "none"){ + return n; + } + } + return node; + }; + + this.getScreenSize = function(){ + // summary: + // Returns the dimensions of the browser window. + return { + h: win.global.innerHeight||win.doc.documentElement.clientHeight||win.doc.documentElement.offsetHeight, + w: win.global.innerWidth||win.doc.documentElement.clientWidth||win.doc.documentElement.offsetWidth + }; + }; + + this.isKeyboardShown = function(e){ + // summary: + // Internal function for android workaround. + // description: + // Returns true if a virtual keyboard is shown. + // Indirectly detects whether a virtual keyboard is shown or not by + // examining the screen size. + // TODO: need more reliable detection logic + if(!this._sz){ return false; } + var sz = this.getScreenSize(); + return (sz.w * sz.h) / (this._sz.w * this._sz.h) < 0.8; + }; + + this.disableScroll = function(/*Boolean*/v){ + // summary: + // Internal function for android workaround. + // description: + // Disables the touch scrolling and enables the browser's default + // scrolling. + if(this.disableTouchScroll === v || this.domNode.style.display === "none"){ return; } + this.disableTouchScroll = v; + this.scrollBar = !v; + dm.disableHideAddressBar = dm.disableResizeAll = v; + var of = v ? "visible" : "hidden"; + domStyle.set(this.domNode, "overflow", of); + domStyle.set(win.doc.documentElement, "overflow", of); + domStyle.set(win.body(), "overflow", of); + var c = this.containerNode; + if(v){ + if(!c.style.webkitTransform){ + // stop animation when soft keyborad is shown before animation ends. + // TODO: there might be a better way to wait for animation ending. + this.stopAnimation(); + this.toTopLeft(); + } + var mt = parseInt(c.style.marginTop) || 0; + var h = c.offsetHeight + mt + this.fixedFooterHeight - this._appFooterHeight; + domStyle.set(this.domNode, "height", h + "px"); + + this._cPos = { // store containerNode's position + x: parseInt(c.style.left) || 0, + y: parseInt(c.style.top) || 0 + }; + domStyle.set(c, { + top: "0px", + left: "0px" + }); + + var a = win.doc.activeElement; // focused input field + if(a){ // scrolling to show focused input field + var at = 0; // top position of focused input field + for(var n = a; n.tagName != "BODY"; n = n.offsetParent){ + at += n.offsetTop; + } + var st = at + a.clientHeight + 10 - this.getScreenSize().h; // top postion of browser scroll bar + if(st > 0){ + win.body().scrollTop = st; + } + } + }else{ + if(this._cPos){ // restore containerNode's position + domStyle.set(c, { + top: this._cPos.y + "px", + left: this._cPos.x + "px" + }); + this._cPos = null; + } + var tags = this.domNode.getElementsByTagName("*"); + for(var i = 0; i < tags.length; i++){ + tags[i].blur && tags[i].blur(); + } + // Call dojox.mobile.resizeAll if exists. + dm.resizeAll && dm.resizeAll(); + } + }; + + this.onScreenSizeChanged = function(e){ + // summary: + // Internal function for android workaround. + var sz = this.getScreenSize(); + if(sz.w * sz.h > this._sz.w * this._sz.h){ + this._sz = sz; // update the screen size + } + this.disableScroll(this.isKeyboardShown()); + }; + + this.toTransform = function(e){ + // summary: + // Internal function for android workaround. + var c = this.containerNode; + if(c.offsetTop === 0 && c.offsetLeft === 0 || !c._webkitTransform){ return; } + domStyle.set(c, { + webkitTransform: c._webkitTransform, + top: "0px", + left: "0px" + }); + c._webkitTransform = null; + }; + + this.toTopLeft = function(){ + // summary: + // Internal function for android workaround. + var c = this.containerNode; + if(!c.style.webkitTransform){ return; } // already converted to top/left + c._webkitTransform = c.style.webkitTransform; + var pos = this.getPos(); + domStyle.set(c, { + webkitTransform: "", + top: pos.y + "px", + left: pos.x + "px" + }); + }; + + this.resize = function(e){ + // summary: + // Adjusts the height of the widget. + // description: + // If the height property is 'inherit', the height is inherited + // from its offset parent. If 'auto', the content height, which + // could be smaller than the entire screen height, is used. If an + // explicit height value (ex. "300px"), it is used as the new + // height. If nothing is specified as the height property, from the + // current top position of the widget to the bottom of the screen + // will be the new height. + + // moved from init() to support dynamically added fixed bars + this._appFooterHeight = (this.fixedFooterHeight && !this.isLocalFooter) ? + this.fixedFooterHeight : 0; + if(this.isLocalHeader){ + this.containerNode.style.marginTop = this.fixedHeaderHeight + "px"; + } + + // Get the top position. Same as dojo.position(node, true).y + var top = 0; + for(var n = this.domNode; n && n.tagName != "BODY"; n = n.offsetParent){ + n = this.findDisp(n); // find the first displayed view node + if(!n){ break; } + top += n.offsetTop; + } + + // adjust the height of this view + var h, + screenHeight = this.getScreenSize().h, + dh = screenHeight - top - this._appFooterHeight; // default height + if(this.height === "inherit"){ + if(this.domNode.offsetParent){ + h = this.domNode.offsetParent.offsetHeight + "px"; + } + }else if(this.height === "auto"){ + var parent = this.domNode.offsetParent; + if(parent){ + this.domNode.style.height = "0px"; + var parentRect = parent.getBoundingClientRect(), + scrollableRect = this.domNode.getBoundingClientRect(), + contentBottom = parentRect.bottom - this._appFooterHeight; + if(scrollableRect.bottom >= contentBottom){ // use entire screen + dh = screenHeight - (scrollableRect.top - parentRect.top) - this._appFooterHeight; + }else{ // stretch to fill predefined area + dh = contentBottom - scrollableRect.bottom; + } + } + // content could be smaller than entire screen height + var contentHeight = Math.max(this.domNode.scrollHeight, this.containerNode.scrollHeight); + h = (contentHeight ? Math.min(contentHeight, dh) : dh) + "px"; + }else if(this.height){ + h = this.height; + } + if(!h){ + h = dh + "px"; + } + if(h.charAt(0) !== "-" && // to ensure that h is not negative (e.g. "-10px") + h !== "default"){ + this.domNode.style.height = h; + } + + // to ensure that the view is within a scrolling area when resized. + this.onTouchEnd(); + }; + + this.onFlickAnimationStart = function(e){ + event.stop(e); + }; + + this.onFlickAnimationEnd = function(e){ + var an = e && e.animationName; + if(an && an.indexOf("scrollableViewScroll2") === -1){ + if(an.indexOf("scrollableViewScroll0") !== -1){ // scrollBarV + domClass.remove(this._scrollBarNodeV, "mblScrollableScrollTo0"); + }else if(an.indexOf("scrollableViewScroll1") !== -1){ // scrollBarH + domClass.remove(this._scrollBarNodeH, "mblScrollableScrollTo1"); + }else{ // fade or others + if(this._scrollBarNodeV){ this._scrollBarNodeV.className = ""; } + if(this._scrollBarNodeH){ this._scrollBarNodeH.className = ""; } + } + return; + } + if(e && e.srcElement){ + event.stop(e); + } + this.stopAnimation(); + if(this._bounce){ + var _this = this; + var bounce = _this._bounce; + setTimeout(function(){ + _this.slideTo(bounce, 0.3, "ease-out"); + }, 0); + _this._bounce = undefined; + }else{ + this.hideScrollBar(); + this.removeCover(); + if(this._aw){ this.toTopLeft(); } // android workaround + } + }; + + this.isFormElement = function(node){ + if(node && node.nodeType !== 1){ node = node.parentNode; } + if(!node || node.nodeType !== 1){ return false; } + var t = node.tagName; + return (t === "SELECT" || t === "INPUT" || t === "TEXTAREA" || t === "BUTTON"); + }; + + this.onTouchStart = function(e){ + if(this.disableTouchScroll){ return; } + if(this._conn && (new Date()).getTime() - this.startTime < 500){ + return; // ignore successive onTouchStart calls + } + if(!this._conn){ + this._conn = []; + this._conn.push(connect.connect(win.doc, has("touch") ? "touchmove" : "onmousemove", this, "onTouchMove")); + this._conn.push(connect.connect(win.doc, has("touch") ? "touchend" : "onmouseup", this, "onTouchEnd")); + } + + this._aborted = false; + if(domClass.contains(this.containerNode, "mblScrollableScrollTo2")){ + this.abort(); + }else{ // reset scrollbar class especially for reseting fade-out animation + if(this._scrollBarNodeV){ this._scrollBarNodeV.className = ""; } + if(this._scrollBarNodeH){ this._scrollBarNodeH.className = ""; } + } + if(this._aw){ this.toTransform(e); } // android workaround + this.touchStartX = e.touches ? e.touches[0].pageX : e.clientX; + this.touchStartY = e.touches ? e.touches[0].pageY : e.clientY; + this.startTime = (new Date()).getTime(); + this.startPos = this.getPos(); + this._dim = this.getDim(); + this._time = [0]; + this._posX = [this.touchStartX]; + this._posY = [this.touchStartY]; + this._locked = false; + + if(!this.isFormElement(e.target) && !this.isNested){ + event.stop(e); + } + }; + + this.onTouchMove = function(e){ + if(this._locked){ return; } + var x = e.touches ? e.touches[0].pageX : e.clientX; + var y = e.touches ? e.touches[0].pageY : e.clientY; + var dx = x - this.touchStartX; + var dy = y - this.touchStartY; + var to = {x:this.startPos.x + dx, y:this.startPos.y + dy}; + var dim = this._dim; + + dx = Math.abs(dx); + dy = Math.abs(dy); + if(this._time.length == 1){ // the first TouchMove after TouchStart + if(this.dirLock){ + if(this._v && !this._h && dx >= this.threshold && dx >= dy || + (this._h || this._f) && !this._v && dy >= this.threshold && dy >= dx){ + this._locked = true; + return; + } + } + if(this._v && Math.abs(dy) < this.threshold || + (this._h || this._f) && Math.abs(dx) < this.threshold){ + return; + } + this.addCover(); + this.showScrollBar(); + } + + var weight = this.weight; + if(this._v && this.constraint){ + if(to.y > 0){ // content is below the screen area + to.y = Math.round(to.y * weight); + }else if(to.y < -dim.o.h){ // content is above the screen area + if(dim.c.h < dim.d.h){ // content is shorter than display + to.y = Math.round(to.y * weight); + }else{ + to.y = -dim.o.h - Math.round((-dim.o.h - to.y) * weight); + } + } + } + if((this._h || this._f) && this.constraint){ + if(to.x > 0){ + to.x = Math.round(to.x * weight); + }else if(to.x < -dim.o.w){ + if(dim.c.w < dim.d.w){ + to.x = Math.round(to.x * weight); + }else{ + to.x = -dim.o.w - Math.round((-dim.o.w - to.x) * weight); + } + } + } + this.scrollTo(to); + + var max = 10; + var n = this._time.length; // # of samples + if(n >= 2){ + // Check the direction of the finger move. + // If the direction has been changed, discard the old data. + var d0, d1; + if(this._v && !this._h){ + d0 = this._posY[n - 1] - this._posY[n - 2]; + d1 = y - this._posY[n - 1]; + }else if(!this._v && this._h){ + d0 = this._posX[n - 1] - this._posX[n - 2]; + d1 = x - this._posX[n - 1]; + } + if(d0 * d1 < 0){ // direction changed + // leave only the latest data + this._time = [this._time[n - 1]]; + this._posX = [this._posX[n - 1]]; + this._posY = [this._posY[n - 1]]; + n = 1; + } + } + if(n == max){ + this._time.shift(); + this._posX.shift(); + this._posY.shift(); + } + this._time.push((new Date()).getTime() - this.startTime); + this._posX.push(x); + this._posY.push(y); + }; + + this.onTouchEnd = function(e){ + if(this._locked){ return; } + var speed = this._speed = {x:0, y:0}; + var dim = this._dim; + var pos = this.getPos(); + var to = {}; // destination + if(e){ + if(!this._conn){ return; } // if we get onTouchEnd without onTouchStart, ignore it. + for(var i = 0; i < this._conn.length; i++){ + connect.disconnect(this._conn[i]); + } + this._conn = null; + + var n = this._time.length; // # of samples + var clicked = false; + if(!this._aborted){ + if(n <= 1){ + clicked = true; + }else if(n == 2 && Math.abs(this._posY[1] - this._posY[0]) < 4 + && has("touch")){ // for desktop browsers, posY could be the same, since we're using clientY, see onTouchMove() + clicked = true; + } + } + var isFormElem = this.isFormElement(e.target); + if(clicked && !isFormElem){ // clicked, not dragged or flicked + this.hideScrollBar(); + this.removeCover(); + if(has("touch")){ + var elem = e.target; + if(elem.nodeType != 1){ + elem = elem.parentNode; + } + var ev = win.doc.createEvent("MouseEvents"); + ev.initMouseEvent("click", true, true, win.global, 1, e.screenX, e.screenY, e.clientX, e.clientY); + setTimeout(function(){ + elem.dispatchEvent(ev); + }, 0); + } + return; + }else if(this._aw && clicked && isFormElem){ // clicked input fields + this.hideScrollBar(); + this.toTopLeft(); + return; + } + speed = this._speed = this.getSpeed(); + }else{ + if(pos.x == 0 && pos.y == 0){ return; } // initializing + dim = this.getDim(); + } + + if(this._v){ + to.y = pos.y + speed.y; + } + if(this._h || this._f){ + to.x = pos.x + speed.x; + } + + this.adjustDestination(to, pos); + + if(this.scrollDir == "v" && dim.c.h < dim.d.h){ // content is shorter than display + this.slideTo({y:0}, 0.3, "ease-out"); // go back to the top + return; + }else if(this.scrollDir == "h" && dim.c.w < dim.d.w){ // content is narrower than display + this.slideTo({x:0}, 0.3, "ease-out"); // go back to the left + return; + }else if(this._v && this._h && dim.c.h < dim.d.h && dim.c.w < dim.d.w){ + this.slideTo({x:0, y:0}, 0.3, "ease-out"); // go back to the top-left + return; + } + + var duration, easing = "ease-out"; + var bounce = {}; + if(this._v && this.constraint){ + if(to.y > 0){ // going down. bounce back to the top. + if(pos.y > 0){ // started from below the screen area. return quickly. + duration = 0.3; + to.y = 0; + }else{ + to.y = Math.min(to.y, 20); + easing = "linear"; + bounce.y = 0; + } + }else if(-speed.y > dim.o.h - (-pos.y)){ // going up. bounce back to the bottom. + if(pos.y < -dim.o.h){ // started from above the screen top. return quickly. + duration = 0.3; + to.y = dim.c.h <= dim.d.h ? 0 : -dim.o.h; // if shorter, move to 0 + }else{ + to.y = Math.max(to.y, -dim.o.h - 20); + easing = "linear"; + bounce.y = -dim.o.h; + } + } + } + if((this._h || this._f) && this.constraint){ + if(to.x > 0){ // going right. bounce back to the left. + if(pos.x > 0){ // started from right of the screen area. return quickly. + duration = 0.3; + to.x = 0; + }else{ + to.x = Math.min(to.x, 20); + easing = "linear"; + bounce.x = 0; + } + }else if(-speed.x > dim.o.w - (-pos.x)){ // going left. bounce back to the right. + if(pos.x < -dim.o.w){ // started from left of the screen top. return quickly. + duration = 0.3; + to.x = dim.c.w <= dim.d.w ? 0 : -dim.o.w; // if narrower, move to 0 + }else{ + to.x = Math.max(to.x, -dim.o.w - 20); + easing = "linear"; + bounce.x = -dim.o.w; + } + } + } + this._bounce = (bounce.x !== undefined || bounce.y !== undefined) ? bounce : undefined; + + if(duration === undefined){ + var distance, velocity; + if(this._v && this._h){ + velocity = Math.sqrt(speed.x+speed.x + speed.y*speed.y); + distance = Math.sqrt(Math.pow(to.y - pos.y, 2) + Math.pow(to.x - pos.x, 2)); + }else if(this._v){ + velocity = speed.y; + distance = to.y - pos.y; + }else if(this._h){ + velocity = speed.x; + distance = to.x - pos.x; + } + if(distance === 0 && !e){ return; } // #13154 + duration = velocity !== 0 ? Math.abs(distance / velocity) : 0.01; // time = distance / velocity + } + this.slideTo(to, duration, easing); + }; + + this.adjustDestination = function(to, pos){ + // subclass may want to implement + }; + + this.abort = function(){ + this.scrollTo(this.getPos()); + this.stopAnimation(); + this._aborted = true; + }; + + this.stopAnimation = function(){ + // stop the currently running animation + domClass.remove(this.containerNode, "mblScrollableScrollTo2"); + if(has("android")){ + domStyle.set(this.containerNode, "webkitAnimationDuration", "0s"); // workaround for android screen flicker problem + } + if(this._scrollBarV){ + this._scrollBarV.className = ""; + } + if(this._scrollBarH){ + this._scrollBarH.className = ""; + } + }; + + this.getSpeed = function(){ + var x = 0, y = 0, n = this._time.length; + // if the user holds the mouse or finger more than 0.5 sec, do not move. + if(n >= 2 && (new Date()).getTime() - this.startTime - this._time[n - 1] < 500){ + var dy = this._posY[n - (n > 3 ? 2 : 1)] - this._posY[(n - 6) >= 0 ? n - 6 : 0]; + var dx = this._posX[n - (n > 3 ? 2 : 1)] - this._posX[(n - 6) >= 0 ? n - 6 : 0]; + var dt = this._time[n - (n > 3 ? 2 : 1)] - this._time[(n - 6) >= 0 ? n - 6 : 0]; + y = this.calcSpeed(dy, dt); + x = this.calcSpeed(dx, dt); + } + return {x:x, y:y}; + }; + + this.calcSpeed = function(/*Number*/d, /*Number*/t){ + return Math.round(d / t * 100) * 4; + }; + + this.scrollTo = function(/*Object*/to, /*Boolean?*/doNotMoveScrollBar, /*DomNode?*/node){ // to: {x, y} + // summary: + // Scrolls to the given position. + var s = (node || this.containerNode).style; + if(has("webkit")){ + s.webkitTransform = this.makeTranslateStr(to); + }else{ + if(this._v){ + s.top = to.y + "px"; + } + if(this._h || this._f){ + s.left = to.x + "px"; + } + } + if(!doNotMoveScrollBar){ + this.scrollScrollBarTo(this.calcScrollBarPos(to)); + } + }; + + this.slideTo = function(/*Object*/to, /*Number*/duration, /*String*/easing){ + // summary: + // Scrolls to the given position with slide animation. + this._runSlideAnimation(this.getPos(), to, duration, easing, this.containerNode, 2); + this.slideScrollBarTo(to, duration, easing); + }; + + this.makeTranslateStr = function(to){ + var y = this._v && typeof to.y == "number" ? to.y+"px" : "0px"; + var x = (this._h||this._f) && typeof to.x == "number" ? to.x+"px" : "0px"; + return dm.hasTranslate3d ? + "translate3d("+x+","+y+",0px)" : "translate("+x+","+y+")"; + }; + + this.getPos = function(){ + // summary: + // Get the top position in the midst of animation + if(has("webkit")){ + var m = win.doc.defaultView.getComputedStyle(this.containerNode, '')["-webkit-transform"]; + if(m && m.indexOf("matrix") === 0){ + var arr = m.split(/[,\s\)]+/); + return {y:arr[5] - 0, x:arr[4] - 0}; + } + return {x:0, y:0}; + }else{ + // this.containerNode.offsetTop does not work here, + // because it adds the height of the top margin. + var y = parseInt(this.containerNode.style.top) || 0; + return {y:y, x:this.containerNode.offsetLeft}; + } + }; + + this.getDim = function(){ + var d = {}; + // content width/height + d.c = {h:this.containerNode.offsetHeight, w:this.containerNode.offsetWidth}; + + // view width/height + d.v = {h:this.domNode.offsetHeight + this._appFooterHeight, w:this.domNode.offsetWidth}; + + // display width/height + d.d = {h:d.v.h - this.fixedHeaderHeight - this.fixedFooterHeight, w:d.v.w}; + + // overflowed width/height + d.o = {h:d.c.h - d.v.h + this.fixedHeaderHeight + this.fixedFooterHeight, w:d.c.w - d.v.w}; + return d; + }; + + this.showScrollBar = function(){ + if(!this.scrollBar){ return; } + + var dim = this._dim; + if(this.scrollDir == "v" && dim.c.h <= dim.d.h){ return; } + if(this.scrollDir == "h" && dim.c.w <= dim.d.w){ return; } + if(this._v && this._h && dim.c.h <= dim.d.h && dim.c.w <= dim.d.w){ return; } + + var createBar = function(self, dir){ + var bar = self["_scrollBarNode" + dir]; + if(!bar){ + var wrapper = domConstruct.create("div", null, self.domNode); + var props = { position: "absolute", overflow: "hidden" }; + if(dir == "V"){ + props.right = "2px"; + props.width = "5px"; + }else{ + props.bottom = (self.isLocalFooter ? self.fixedFooterHeight : 0) + 2 + "px"; + props.height = "5px"; + } + domStyle.set(wrapper, props); + wrapper.className = "mblScrollBarWrapper"; + self["_scrollBarWrapper"+dir] = wrapper; + + bar = domConstruct.create("div", null, wrapper); + domStyle.set(bar, { + opacity: 0.6, + position: "absolute", + backgroundColor: "#606060", + fontSize: "1px", + webkitBorderRadius: "2px", + MozBorderRadius: "2px", + webkitTransformOrigin: "0 0", + zIndex: 2147483647 // max of signed 32-bit integer + }); + domStyle.set(bar, dir == "V" ? {width: "5px"} : {height: "5px"}); + self["_scrollBarNode" + dir] = bar; + } + return bar; + }; + if(this._v && !this._scrollBarV){ + this._scrollBarV = createBar(this, "V"); + } + if(this._h && !this._scrollBarH){ + this._scrollBarH = createBar(this, "H"); + } + this.resetScrollBar(); + }; + + this.hideScrollBar = function(){ + var fadeRule; + if(this.fadeScrollBar && has("webkit")){ + if(!dm._fadeRule){ + var node = domConstruct.create("style", null, win.doc.getElementsByTagName("head")[0]); + node.textContent = + ".mblScrollableFadeScrollBar{"+ + " -webkit-animation-duration: 1s;"+ + " -webkit-animation-name: scrollableViewFadeScrollBar;}"+ + "@-webkit-keyframes scrollableViewFadeScrollBar{"+ + " from { opacity: 0.6; }"+ + " to { opacity: 0; }}"; + dm._fadeRule = node.sheet.cssRules[1]; + } + fadeRule = dm._fadeRule; + } + if(!this.scrollBar){ return; } + var f = function(bar, self){ + domStyle.set(bar, { + opacity: 0, + webkitAnimationDuration: "" + }); + if(self._aw){ // android workaround + bar.style.webkitTransform = ""; + }else{ + bar.className = "mblScrollableFadeScrollBar"; + } + }; + if(this._scrollBarV){ + f(this._scrollBarV, this); + this._scrollBarV = null; + } + if(this._scrollBarH){ + f(this._scrollBarH, this); + this._scrollBarH = null; + } + }; + + this.calcScrollBarPos = function(/*Object*/to){ // to: {x, y} + var pos = {}; + var dim = this._dim; + var f = function(wrapperH, barH, t, d, c){ + var y = Math.round((d - barH - 8) / (d - c) * t); + if(y < -barH + 5){ + y = -barH + 5; + } + if(y > wrapperH - 5){ + y = wrapperH - 5; + } + return y; + }; + if(typeof to.y == "number" && this._scrollBarV){ + pos.y = f(this._scrollBarWrapperV.offsetHeight, this._scrollBarV.offsetHeight, to.y, dim.d.h, dim.c.h); + } + if(typeof to.x == "number" && this._scrollBarH){ + pos.x = f(this._scrollBarWrapperH.offsetWidth, this._scrollBarH.offsetWidth, to.x, dim.d.w, dim.c.w); + } + return pos; + }; + + this.scrollScrollBarTo = function(/*Object*/to){ // to: {x, y} + if(!this.scrollBar){ return; } + if(this._v && this._scrollBarV && typeof to.y == "number"){ + if(has("webkit")){ + this._scrollBarV.style.webkitTransform = this.makeTranslateStr({y:to.y}); + }else{ + this._scrollBarV.style.top = to.y + "px"; + } + } + if(this._h && this._scrollBarH && typeof to.x == "number"){ + if(has("webkit")){ + this._scrollBarH.style.webkitTransform = this.makeTranslateStr({x:to.x}); + }else{ + this._scrollBarH.style.left = to.x + "px"; + } + } + }; + + this.slideScrollBarTo = function(/*Object*/to, /*Number*/duration, /*String*/easing){ + if(!this.scrollBar){ return; } + var fromPos = this.calcScrollBarPos(this.getPos()); + var toPos = this.calcScrollBarPos(to); + if(this._v && this._scrollBarV){ + this._runSlideAnimation({y:fromPos.y}, {y:toPos.y}, duration, easing, this._scrollBarV, 0); + } + if(this._h && this._scrollBarH){ + this._runSlideAnimation({x:fromPos.x}, {x:toPos.x}, duration, easing, this._scrollBarH, 1); + } + }; + + this._runSlideAnimation = function(/*Object*/from, /*Object*/to, /*Number*/duration, /*String*/easing, node, idx){ + // idx: 0:scrollbarV, 1:scrollbarH, 2:content + if(has("webkit")){ + this.setKeyframes(from, to, idx); + domStyle.set(node, { + webkitAnimationDuration: duration + "s", + webkitAnimationTimingFunction: easing + }); + domClass.add(node, "mblScrollableScrollTo"+idx); + if(idx == 2){ + this.scrollTo(to, true, node); + }else{ + this.scrollScrollBarTo(to); + } + }else if(dojo.fx && dojo.fx.easing && duration){ + // If you want to support non-webkit browsers, + // your application needs to load necessary modules as follows: + // + // | dojo.require("dojo.fx"); + // | dojo.require("dojo.fx.easing"); + // + // This module itself does not make dependency on them. + var s = dojo.fx.slideTo({ + node: node, + duration: duration*1000, + left: to.x, + top: to.y, + easing: (easing == "ease-out") ? dojo.fx.easing.quadOut : dojo.fx.easing.linear + }).play(); + if(idx == 2){ + connect.connect(s, "onEnd", this, "onFlickAnimationEnd"); + } + }else{ + // directly jump to the destination without animation + if(idx == 2){ + this.scrollTo(to, false, node); + this.onFlickAnimationEnd(); + }else{ + this.scrollScrollBarTo(to); + } + } + }; + + this.resetScrollBar = function(){ + // summary: + // Resets the scroll bar length, position, etc. + var f = function(wrapper, bar, d, c, hd, v){ + if(!bar){ return; } + var props = {}; + props[v ? "top" : "left"] = hd + 4 + "px"; // +4 is for top or left margin + var t = (d - 8) <= 0 ? 1 : d - 8; + props[v ? "height" : "width"] = t + "px"; + domStyle.set(wrapper, props); + var l = Math.round(d * d / c); // scroll bar length + l = Math.min(Math.max(l - 8, 5), t); // -8 is for margin for both ends + bar.style[v ? "height" : "width"] = l + "px"; + domStyle.set(bar, {"opacity": 0.6}); + }; + var dim = this.getDim(); + f(this._scrollBarWrapperV, this._scrollBarV, dim.d.h, dim.c.h, this.fixedHeaderHeight, true); + f(this._scrollBarWrapperH, this._scrollBarH, dim.d.w, dim.c.w, 0); + this.createMask(); + }; + + this.createMask = function(){ + // summary: + // Creates a mask for a scroll bar edge. + // description: + // This function creates a mask that hides corners of one scroll + // bar edge to make it round edge. The other side of the edge is + // always visible and round shaped with the border-radius style. + if(!has("webkit")){ return; } + var ctx; + if(this._scrollBarWrapperV){ + var h = this._scrollBarWrapperV.offsetHeight; + ctx = win.doc.getCSSCanvasContext("2d", "scrollBarMaskV", 5, h); + ctx.fillStyle = "rgba(0,0,0,0.5)"; + ctx.fillRect(1, 0, 3, 2); + ctx.fillRect(0, 1, 5, 1); + ctx.fillRect(0, h - 2, 5, 1); + ctx.fillRect(1, h - 1, 3, 2); + ctx.fillStyle = "rgb(0,0,0)"; + ctx.fillRect(0, 2, 5, h - 4); + this._scrollBarWrapperV.style.webkitMaskImage = "-webkit-canvas(scrollBarMaskV)"; + } + if(this._scrollBarWrapperH){ + var w = this._scrollBarWrapperH.offsetWidth; + ctx = win.doc.getCSSCanvasContext("2d", "scrollBarMaskH", w, 5); + ctx.fillStyle = "rgba(0,0,0,0.5)"; + ctx.fillRect(0, 1, 2, 3); + ctx.fillRect(1, 0, 1, 5); + ctx.fillRect(w - 2, 0, 1, 5); + ctx.fillRect(w - 1, 1, 2, 3); + ctx.fillStyle = "rgb(0,0,0)"; + ctx.fillRect(2, 0, w - 4, 5); + this._scrollBarWrapperH.style.webkitMaskImage = "-webkit-canvas(scrollBarMaskH)"; + } + }; + + this.flashScrollBar = function(){ + if(this.disableFlashScrollBar || !this.domNode){ return; } + this._dim = this.getDim(); + if(this._dim.d.h <= 0){ return; } // dom is not ready + this.showScrollBar(); + var _this = this; + setTimeout(function(){ + _this.hideScrollBar(); + }, 300); + }; + + this.addCover = function(){ + if(!has("touch") && !this.noCover){ + if(!this._cover){ + this._cover = domConstruct.create("div", null, win.doc.body); + domStyle.set(this._cover, { + backgroundColor: "#ffff00", + opacity: 0, + position: "absolute", + top: "0px", + left: "0px", + width: "100%", + height: "100%", + zIndex: 2147483647 // max of signed 32-bit integer + }); + this._ch.push(connect.connect(this._cover, + has("touch") ? "touchstart" : "onmousedown", this, "onTouchEnd")); + }else{ + this._cover.style.display = ""; + } + this.setSelectable(this._cover, false); + this.setSelectable(this.domNode, false); + } + }; + + this.removeCover = function(){ + if(!has("touch") && this._cover){ + this._cover.style.display = "none"; + this.setSelectable(this._cover, true); + this.setSelectable(this.domNode, true); + } + }; + + this.setKeyframes = function(/*Object*/from, /*Object*/to, /*Number*/idx){ + if(!dm._rule){ + dm._rule = []; + } + // idx: 0:scrollbarV, 1:scrollbarH, 2:content + if(!dm._rule[idx]){ + var node = domConstruct.create("style", null, win.doc.getElementsByTagName("head")[0]); + node.textContent = + ".mblScrollableScrollTo"+idx+"{-webkit-animation-name: scrollableViewScroll"+idx+";}"+ + "@-webkit-keyframes scrollableViewScroll"+idx+"{}"; + dm._rule[idx] = node.sheet.cssRules[1]; + } + var rule = dm._rule[idx]; + if(rule){ + if(from){ + rule.deleteRule("from"); + rule.insertRule("from { -webkit-transform: "+this.makeTranslateStr(from)+"; }"); + } + if(to){ + if(to.x === undefined){ to.x = from.x; } + if(to.y === undefined){ to.y = from.y; } + rule.deleteRule("to"); + rule.insertRule("to { -webkit-transform: "+this.makeTranslateStr(to)+"; }"); + } + } + }; + + this.setSelectable = function(node, selectable){ + // dojo.setSelectable has dependency on dojo.query. Re-define our own. + node.style.KhtmlUserSelect = selectable ? "auto" : "none"; + node.style.MozUserSelect = selectable ? "" : "none"; + node.onselectstart = selectable ? null : function(){return false;}; + if(has("ie")){ + node.unselectable = selectable ? "" : "on"; + var nodes = node.getElementsByTagName("*"); + for(var i = 0; i < nodes.length; i++){ + nodes[i].unselectable = selectable ? "" : "on"; + } + } + }; + + // feature detection + if(has("webkit")){ + var elem = win.doc.createElement("div"); + elem.style.webkitTransform = "translate3d(0px,1px,0px)"; + win.doc.documentElement.appendChild(elem); + var v = win.doc.defaultView.getComputedStyle(elem, '')["-webkit-transform"]; + dm.hasTranslate3d = v && v.indexOf("matrix") === 0; + win.doc.documentElement.removeChild(elem); + } +}; + +dm.scrollable = scrollable; // for backward compatibility +return scrollable; +}); |