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 --- js/components/slider.reel/knob.png | Bin 0 -> 523 bytes js/components/slider.reel/slider.css | 66 +++++++++ js/components/slider.reel/slider.html | 38 ++++++ js/components/slider.reel/slider.js | 250 ++++++++++++++++++++++++++++++++++ 4 files changed, 354 insertions(+) create mode 100644 js/components/slider.reel/knob.png create mode 100644 js/components/slider.reel/slider.css create mode 100644 js/components/slider.reel/slider.html create mode 100644 js/components/slider.reel/slider.js (limited to 'js/components/slider.reel') diff --git a/js/components/slider.reel/knob.png b/js/components/slider.reel/knob.png new file mode 100644 index 00000000..b798a8cb Binary files /dev/null and b/js/components/slider.reel/knob.png differ diff --git a/js/components/slider.reel/slider.css b/js/components/slider.reel/slider.css new file mode 100644 index 00000000..59338d31 --- /dev/null +++ b/js/components/slider.reel/slider.css @@ -0,0 +1,66 @@ +/* + 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. + */ + +.slider-parent { + position:relative; +} + +.slider-parent.horizontal { + width: 100%; + height: 12px; +} + +.slider-parent.vertical { + height: 100%; + width: 12px; +} + +.slider-track { + position:absolute; + background-color: #999999; + width: 100%; + height: 100%; +} + +.slider-track:hover +{ + cursor:pointer; +} + +.slider-track.horizontal { + height: 100%; + width:100%; +} + +.slider-track.vertical { + width: 100%; + height:100%; +} + +.knob { + position: absolute; + width: 12px; + height: 12px; + background-image: url(knob.png); + background-repeat: no-repeat; + background-position: center center; + float:left; +} + +.knob:hover +{ + cursor:pointer; +} + +.knob.horizontal { + margin-left: -6px; + margin-right: -6px; +} + +.knob.vertical { + margin-top: -6px; + margin-bottom: -6px; +} \ No newline at end of file diff --git a/js/components/slider.reel/slider.html b/js/components/slider.reel/slider.html new file mode 100644 index 00000000..b30d20a2 --- /dev/null +++ b/js/components/slider.reel/slider.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + +

+ + \ No newline at end of file diff --git a/js/components/slider.reel/slider.js b/js/components/slider.reel/slider.js new file mode 100644 index 00000000..fced8aad --- /dev/null +++ b/js/components/slider.reel/slider.js @@ -0,0 +1,250 @@ +/* +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/core/core").Montage; +var SliderBase = require("js/components/sliderbase").SliderBase; + +var Slider = exports.Slider = Montage.create(SliderBase, { + + // "horizontal" or "vertical" + _direction: { + enumerable: true, + value: "horizontal" + }, + + direction: { + enumerable: true, + get: function() { + return this._direction; + }, + set: function(value) { + + if (value !== this._direction) { + this._direction = value; + this.needsDraw = true; + } + } + }, + + customBackground: { + enumerable: true, + serializable:true, + value: null + }, + + _sliderTrack: { + enumerable: false, + value: null + }, + + // Should support clicking on the track + _allowTrackClick: { + enumerable: true, + value: true + }, + + allowTrackClick: { + enumerable: true, + get: function() { + return this._allowTrackClick; + }, + set: function(value) { + + if (value !== this._allowTrackClick) { + this._allowTrackClick = value; + } + } + }, + + _knob: { + enumerable: false, + value: null + }, + + _positionValue: { + enumerable: false, + value: 0 + }, + + _previousPositionValue: { + enumerable: false, + value: 0 + }, + + _percentValue: { + enumerable: false, + value: 0 + }, + + _knobPercentWidth: { + enumerable: false, + value: 0 + }, + + _knobOffsetWidth: { + enumerable: false, + value: 0 + }, + + _length: { + enumerable: false, + value: 0 + }, + + _deltaLeft: { + enumerable: false, + value: 0 + }, + + _valueFromPageOffset: { + value: function(offset, pageY, isShiftKeyPressed) { + var clickPoint; + if(this._direction === "horizontal") + { + clickPoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(offset,pageY)).x; + } + else + { + clickPoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(offset,pageY)).y; + } + this.value = (clickPoint*this._valueCoef)+this._minValue; + + if(!this._isMouseDown && (this._previousValue !== this._value)) + { + this._dispatchActionEvent(); + } + } + }, + + setPercentValueFromValue: { + value: function () { + this._percentValue = (this._value-this._minValue)/(this._maxValue-this._minValue)*(100 - this._knobPercentWidth); + } + }, + + willDraw: { + enumerable: false, + value: function() { + if(this._firstTime) + { + + if(this._direction === "horizontal") + { + this._length = parseInt(this.element.offsetWidth); + //this._length = this.element.offsetWidth; + this._knobPercentWidth = parseInt(document.defaultView.getComputedStyle(this.knob, null).getPropertyValue("margin-left")) / this._length; + + } + else + { + this._length = this.element.offsetHeight; + this._knobPercentWidth = parseInt(document.defaultView.getComputedStyle(this.knob, null).getPropertyValue("margin-top")) / this._length; + } + + this.track.width = parseInt(this.element.offsetWidth); + //this.track.width = this.element.offsetWidth; + this.track.height = parseInt(this.element.offsetHeight); + //this.track.height = this.element.offsetHeight; + + this._valueCoef = (this._maxValue-this._minValue)/this._length; + this._firstTime = false; + } + } + }, + + draw: { + value: function() { + this.setPercentValueFromValue(); + + if(this._direction === "horizontal") + { + this.knob.style.left = this._percentValue +"%"; + } + else + { + this.knob.style.top = this._percentValue +"%"; + } + if(this.customBackground) + { + this.customBackground(this.track); + } + } + }, + + _handleTrackClick: { + enumerable: false, + value: function(event) { + event.preventDefault(); + this._setEventFlags("change", false); + this._valueFromPageOffset(event.pageX,event.pageY,false); + } + }, + + prepareForDraw: { + enumerable: false, + value: function() { + +// var sliderParent = document.createElement('div'); +// this._sliderTrack = document.createElement('canvas'); +// this._knob = document.createElement('div'); + + +// sliderParent.classList.add("slider-parent"); +// this._sliderTrack.classList.add("slider-track"); +// this._knob.classList.add("knob"); + + + +// sliderParent.appendChild(this._sliderTrack); +// sliderParent.appendChild(this._knob); +// this.element.appendChild(sliderParent); + + + + + if(this._direction === "horizontal") + { + this.parentDiv.classList.add("horizontal"); + this.track.classList.add("horizontal"); + this.knob.classList.add("horizontal"); + //sliderParent.classList.add("horizontal"); + //this._sliderTrack.classList.add("horizontal"); + //this._knob.classList.add("horizontal"); + } + else + { + this.parentDiv.classList.add("vertical"); + this.track.classList.add("vertical"); + this.knob.classList.add("vertical"); + + //sliderParent.classList.add("vertical"); + //this._sliderTrack.classList.add("vertical"); + //this._knob.classList.add("vertical"); + } + + + + + if(this._enabled) + { + // if (window.Touch) { + this.knob.addEventListener("touchstart", this, false); + // } else { + this.knob.addEventListener("mousedown", this, false); + // } + if(this._allowTrackClick) + { + this.track.addEventListener("click", this._handleTrackClick.bind(this), false); + } + if (this.value === null) { + this.value = this._minValue; + } + } + + } + } + +}); -- cgit v1.2.3