From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001 From: Pierre Frisch Date: Thu, 22 Dec 2011 07:25:50 -0800 Subject: First commit of Ninja to ninja-internal Signed-off-by: Valerio Virgillito --- .../montage/ui/scroll-bars.reel/scroll-bars.html | 117 ++++++++++ .../montage/ui/scroll-bars.reel/scroll-bars.js | 247 +++++++++++++++++++++ 2 files changed, 364 insertions(+) create mode 100644 node_modules/montage/ui/scroll-bars.reel/scroll-bars.html create mode 100644 node_modules/montage/ui/scroll-bars.reel/scroll-bars.js (limited to 'node_modules/montage/ui/scroll-bars.reel') diff --git a/node_modules/montage/ui/scroll-bars.reel/scroll-bars.html b/node_modules/montage/ui/scroll-bars.reel/scroll-bars.html new file mode 100644 index 00000000..a9d92944 --- /dev/null +++ b/node_modules/montage/ui/scroll-bars.reel/scroll-bars.html @@ -0,0 +1,117 @@ + + + + + + + + + +

+ + \ No newline at end of file diff --git a/node_modules/montage/ui/scroll-bars.reel/scroll-bars.js b/node_modules/montage/ui/scroll-bars.reel/scroll-bars.js new file mode 100644 index 00000000..48b6a4c9 --- /dev/null +++ b/node_modules/montage/ui/scroll-bars.reel/scroll-bars.js @@ -0,0 +1,247 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Montage = require("montage").Montage, + Component = require("ui/component").Component; + +var ScrollBars = exports.ScrollBars = Montage.create(Component, { + + // Scroll and length are defined in a [0..1] range + + _verticalScroll: { + enumerable: false, + value: 0 + }, + + _horizontalScroll: { + enumerable: false, + value: 0 + }, + + _verticalLength: { + enumerable: false, + value: 0 + }, + + _horizontalLength: { + enumerable: false, + value: 0 + }, + + verticalScroll: { + get: function () { + return this._verticalScroll; + }, + set: function (value) { + this._verticalScroll = value; + this.needsDraw = true; + } + }, + + horizontalScroll: { + get: function () { + return this._horizontalScroll; + }, + set: function (value) { + this._horizontalScroll = value; + this.needsDraw = true; + } + }, + + verticalLength: { + get: function () { + return this._verticalLength; + }, + set: function (value) { + this._verticalLength = value; + this.needsDraw = true; + } + }, + + horizontalLength: { + get: function () { + return this._horizontalLength; + }, + set: function (value) { + this._horizontalLength = value; + this.needsDraw = true; + } + }, + + _opacity: { + enumerable: false, + value: 0 + }, + + opacity: { + get: function () { + return this._opacity; + }, + set: function (value) { + this._opacity = value; + this.needsDraw = true; + } + }, + + _isDisplayUpdated: { + enumerable: false, + value: false + }, + + _displayVertical: { + enumerable: false, + value: false + }, + + displayVertical: { + get: function () { + return this._displayVertical; + }, + set: function (value) { + if (this._displayVertical !== value) { + this._displayVertical = value; + this._isDisplayUpdated = true; + this.needsDraw = true; + } + } + }, + + _displayHorizontal: { + enumerable: false, + value: false + }, + + displayHorizontal: { + get: function () { + return this._displayHorizontal; + }, + set: function (value) { + if (this._displayHorizontal !== value) { + this._displayHorizontal = value; + this._isDisplayUpdated = true; + this.needsDraw = true; + } + } + }, + + _hasResizedHorizontal: { + enumerable: false, + value: false + }, + + _hasResizedVertical: { + enumerable: false, + value: false + }, + + willDraw: { + value: function () { + if (this._offsetWidth !== this._element.offsetWidth) { + this._offsetWidth = this._element.offsetWidth; + this._hasResizedHorizontal = true; + } + if (this._offsetHeight !== this._element.offsetHeight) { + this._offsetHeight = this._element.offsetHeight; + this._hasResizedVertical = true; + } + } + }, + + draw: { + value: function () { + var size, + pos, + range, + max; + + if (this._isDisplayUpdated) { + var displayVertical = this._displayVertical ? "block" : "none", + displayHorizontal = this._displayHorizontal ? "block" : "none"; + + this._top.style.display = this._bottomClip.style.display = displayVertical; + this._left.style.display = this._rightClip.style.display = displayHorizontal; + this._isDisplayUpdated = false; + } + if (this._hasResizedHorizontal && this._displayHorizontal) { + this._rightClip.style.width = this._right.style.width = (this._offsetWidth - 4) + "px"; + this._rightClip.style.clip = "rect(-1px," + (this._offsetWidth - 3) + "px,6px,3px)"; + this._hasResizedHorizontal = false; + } + if (this._hasResizedVertical && this._displayVertical) { + this._bottomClip.style.height = this._bottom.style.height = (this._offsetHeight - 4) + "px"; + this._bottomClip.style.clip = "rect(3px,6px," + (this._offsetHeight - 3) + "px,-1px)"; + this._hasResizedVertical = false; + } + if (this._opacity) { + if (this._displayHorizontal) { + range = this._offsetWidth - 9 - (this._displayVertical ? 6 : 0); + size = Math.floor(range * this._horizontalLength); + max = range - size; + if (1 - this._horizontalLength) { + pos = Math.floor((max * this._horizontalScroll) / (1 - this._horizontalLength)); + } else { + pos = 0; + } + if (pos < 0) { + size += pos; + if (size < 0) { + size = 0; + } + pos = 0; + } + if (pos > max) { + size += Math.floor(max - pos); + if (size < 0) { + size = 0; + } + pos = range - size; + } + this._right.style.webkitTransform = "translate3d(" + (size - this._offsetWidth + 9) + "px,0,0)"; + this._left.style.webkitTransform = this._rightClip.style.webkitTransform = "translate3d(" + (pos+2) + "px,0,0)"; + this._left.style.webkitTransition = this._right.style.webkitTransition = "none"; + this._left.style.opacity = this._right.style.opacity = this._opacity; + } + if (this._displayVertical) { + range = this._offsetHeight - 9 - (this._displayHorizontal ? 6 : 0); + size = Math.floor(range * this._verticalLength); + max = range - size; + if (1 - this._verticalLength) { + pos = Math.floor((max * this._verticalScroll) / (1 - this._verticalLength)); + } else { + pos = 0; + } + if (pos < 0) { + size += pos; + if (size < 0) { + size = 0; + } + pos = 0; + } + if (pos > max) { + size += Math.floor(max - pos); + if (size < 0) { + size = 0; + } + pos = range - size; + } + this._bottom.style.webkitTransform = "translate3d(0," + (size - this._offsetHeight + 9) + "px,0)"; + this._top.style.webkitTransform = this._bottomClip.style.webkitTransform = "translate3d(0," + (pos+2) + "px,0)"; + this._top.style.webkitTransition = this._bottom.style.webkitTransition = "none"; + this._top.style.opacity = this._bottom.style.opacity = this._opacity; + } + } else { + if (this._displayHorizontal) { + this._left.style.webkitTransition = this._right.style.webkitTransition = "300ms opacity"; + this._left.style.opacity = this._right.style.opacity = 0; + } + if (this._displayVertical) { + this._top.style.webkitTransition = this._bottom.style.webkitTransition = "300ms opacity"; + this._top.style.opacity = this._bottom.style.opacity = 0; + } + } + } + } +}); \ No newline at end of file -- cgit v1.2.3