Updated Branches: refs/heads/develop 581ed410d -> f4cfdacaa
Separated the parts of the JavaScript Slider to coincide with the ActionScript version and to better manage the component by separating its functions. Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/f4cfdaca Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/f4cfdaca Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/f4cfdaca Branch: refs/heads/develop Commit: f4cfdacaa357a97e39680b1d1322581aa8bbeffe Parents: 581ed41 Author: Peter Ent <p...@apache.org> Authored: Wed Aug 14 16:25:34 2013 -0400 Committer: Peter Ent <p...@apache.org> Committed: Wed Aug 14 16:25:34 2013 -0400 ---------------------------------------------------------------------- .../apache/flex/html/staticControls/Slider.js | 150 ++---------------- .../staticControls/beads/SliderThumbView.js | 48 ++++++ .../staticControls/beads/SliderTrackView.js | 48 ++++++ .../beads/controllers/SliderMouseController.js | 156 +++++++++++++++++++ 4 files changed, 269 insertions(+), 133 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f4cfdaca/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/Slider.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/Slider.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/Slider.js index 3f67d01..c818b4d 100644 --- a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/Slider.js +++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/Slider.js @@ -15,6 +15,9 @@ goog.provide('org.apache.flex.html.staticControls.Slider'); goog.require('org.apache.flex.core.UIBase'); +goog.require('org.apache.flex.html.staticControls.beads.SliderThumbView'); +goog.require('org.apache.flex.html.staticControls.beads.SliderTrackView'); +goog.require('org.apache.flex.html.staticControls.beads.controllers.SliderMouseController'); goog.require('org.apache.flex.html.staticControls.beads.models.RangeModel'); @@ -39,39 +42,18 @@ org.apache.flex.html.staticControls.Slider.prototype.createElement = function() { this.element = document.createElement('div'); - this.element.className = 'Slider'; this.element.style.width = '200px'; this.element.style.height = '30px'; - this.track = document.createElement('div'); - this.track.className = 'SliderTrack'; - this.track.id = 'track'; - this.track.style.backgroundColor = '#E4E4E4'; - this.track.style.height = '10px'; - this.track.style.width = '200px'; - this.track.style.border = 'thin solid #C4C4C4'; - this.track.style.position = 'relative'; - this.track.style.left = '0px'; - this.track.style.top = '10px'; - this.track.style.zIndex = '1'; - this.element.appendChild(this.track); - goog.events.listen(this.track, goog.events.EventType.CLICK, - this.handleTrackClick, false, this); + this.track = new org.apache.flex.html.staticControls.beads.SliderTrackView(); + this.track.set_strand(this); - this.thumb = document.createElement('div'); - this.thumb.className = 'SliderThumb'; - this.thumb.id = 'thumb'; - this.thumb.style.backgroundColor = '#949494'; - this.thumb.style.border = 'thin solid #747474'; - this.thumb.style.position = 'relative'; - this.thumb.style.height = '30px'; - this.thumb.style.width = '10px'; - this.thumb.style.zIndex = '2'; - this.thumb.style.top = '-10px'; - this.thumb.style.left = '20px'; - this.element.appendChild(this.thumb); - goog.events.listen(this.thumb, goog.events.EventType.MOUSEDOWN, - this.handleThumbDown, false, this); + this.thumb = new org.apache.flex.html.staticControls.beads.SliderThumbView(); + this.thumb.set_strand(this); + + this.controller = new org.apache.flex.html.staticControls.beads.controllers. + SliderMouseController(); + this.controller.set_strand(this); this.positioner = this.element; this.element.flexjs_wrapper = this; @@ -208,105 +190,6 @@ org.apache.flex.html.staticControls.Slider.prototype.snap = function(value) return n; }; -/** - * @this {org.apache.flex.html.staticControls.Slider} - * @param {Event} event The event triggering the function. - * @return {void} Handles click on track. - */ -org.apache.flex.html.staticControls.Slider.prototype.handleTrackClick = -function(event) -{ - var xloc = event.clientX; - var p = Math.min(1, xloc / parseInt(this.track.style.width, 10)); - var n = p * (this.get_maximum() - this.get_minimum()) + this.get_minimum(); - - this.set_value(n); - - this.origin = parseInt(this.thumb.style.left, 10); - this.position = parseInt(this.thumb.style.left, 10); - - this.calcValFromMousePosition(event, true); - - this.dispatchEvent(new org.apache.flex.events.Event('valueChanged')); -}; - -/** - * @this {org.apache.flex.html.staticControls.Slider} - * @param {Event} event The event triggering the function. - * @return {void} Handles mouse-down on the thumb. - */ -org.apache.flex.html.staticControls.Slider.prototype.handleThumbDown = -function(event) -{ - goog.events.listen(this.element, goog.events.EventType.MOUSEUP, - this.handleThumbUp, false, this); - goog.events.listen(this.element, goog.events.EventType.MOUSEMOVE, - this.handleThumbMove, false, this); - - this.origin = event.clientX; - this.position = parseInt(this.thumb.style.left, 10); -}; - -/** - * @this {org.apache.flex.html.staticControls.Slider} - * @param {Event} event The event triggering the function. - * @return {void} Handles mouse-up on the thumb. - */ -org.apache.flex.html.staticControls.Slider.prototype.handleThumbUp = -function(event) -{ - goog.events.unlisten(this.element, goog.events.EventType.MOUSEUP, - this.handleThumbUp, false, this); - goog.events.unlisten(this.element, goog.events.EventType.MOUSEMOVE, - this.handleThumbMove, false, this); - - this.calcValFromMousePosition(event, false); - - this.dispatchEvent(new org.apache.flex.events.Event('valueChanged')); -}; - -/** - * @this {org.apache.flex.html.staticControls.Slider} - * @param {Event} event The event triggering the function. - * @return {void} Handles mouse-move on the thumb. - */ -org.apache.flex.html.staticControls.Slider.prototype.handleThumbMove = -function(event) -{ - this.calcValFromMousePosition(event, false); - - this.dispatchEvent(new org.apache.flex.events.Event('valueChanged')); -}; - -/** - * @this {org.apache.flex.html.staticControls.Slider} - * @param {Event} event The event triggering the function. - * @param {Boolean} useOffset If true, event.offsetX is used in the calculation. - * @return {void} Determines the new value based on the movement of the mouse - * along the slider. - */ -org.apache.flex.html.staticControls.Slider.prototype.calcValFromMousePosition = -function(event, useOffset) -{ - var deltaX = (useOffset ? event.offsetX : event.clientX) - this.origin; - var thumbW = parseInt(this.thumb.style.width, 10) / 2; - var newX = this.position + deltaX; - - var p = newX / parseInt(this.track.style.width, 10); - var n = p * (this.get_maximum() - this.get_minimum()) + this.get_minimum(); - n = this.snap(n); - if (n < this.get_minimum()) n = this.get_minimum(); - else if (n > this.get_maximum()) n = this.get_maximum(); - - p = (n - this.get_minimum()) / (this.get_maximum() - this.get_minimum()); - newX = p * parseInt(this.track.style.width, 10); - - this.thumb.style.left = String(newX - - parseInt(this.thumb.style.width, 10) / 2) + - 'px'; - - this.set_value(n); -}; /** * @this {org.apache.flex.html.staticControls.Slider} @@ -318,9 +201,10 @@ function(value) { var min = this.model.get_minimum(); var max = this.model.get_maximum(); - var p = (value-min) / (max - min); - var xloc = p * (parseInt(this.track.style.width, 10) - - parseInt(this.thumb.style.width, 10)); + var p = (value - min) / (max - min); + var xloc = p * (parseInt(this.track.element.style.width, 10) - + parseInt(this.thumb.element.style.width, 10)); + + this.thumb.element.style.left = String(xloc) + 'px'; +}; - this.thumb.style.left = String(xloc) + 'px'; -} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f4cfdaca/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/SliderThumbView.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/SliderThumbView.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/SliderThumbView.js new file mode 100644 index 0000000..5510a15 --- /dev/null +++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/SliderThumbView.js @@ -0,0 +1,48 @@ +/** + * Licensed under the Apache License, Version 2.0 (the 'License'); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an 'AS IS' BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +goog.provide('org.apache.flex.html.staticControls.beads.SliderThumbView'); + +/** + * @constructor + */ +org.apache.flex.html.staticControls.beads.SliderThumbView = function() { +}; + +/** + * @expose + * @this {org.apache.flex.html.staticControls.beads.SliderThumbView} + * @param {Object} value The strand. + */ +org.apache.flex.html.staticControls.beads.SliderThumbView.prototype. +set_strand = function(value) { + this.strand_ = value; + + this.element = document.createElement('div'); + this.element.className = 'SliderThumb'; + this.element.id = 'thumb'; + this.element.style.backgroundColor = '#949494'; + this.element.style.border = 'thin solid #747474'; + this.element.style.position = 'relative'; + this.element.style.height = '30px'; + this.element.style.width = '10px'; + this.element.style.zIndex = '2'; + this.element.style.top = '-10px'; + this.element.style.left = '20px'; + + this.strand_.element.appendChild(this.element); + + this.positioner = this.element; + this.element.flexjs_wrapper = this; +}; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f4cfdaca/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/SliderTrackView.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/SliderTrackView.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/SliderTrackView.js new file mode 100644 index 0000000..43b58a9 --- /dev/null +++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/SliderTrackView.js @@ -0,0 +1,48 @@ +/** + * Licensed under the Apache License, Version 2.0 (the 'License'); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an 'AS IS' BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +goog.provide('org.apache.flex.html.staticControls.beads.SliderTrackView'); + +/** + * @constructor + */ +org.apache.flex.html.staticControls.beads.SliderTrackView = function() { +}; + +/** + * @expose + * @this {org.apache.flex.html.staticControls.beads.SliderTrackView} + * @param {Object} value The strand. + */ +org.apache.flex.html.staticControls.beads.SliderTrackView.prototype. +set_strand = function(value) { + this.strand_ = value; + + this.element = document.createElement('div'); + this.element.className = 'SliderTrack'; + this.element.id = 'track'; + this.element.style.backgroundColor = '#E4E4E4'; + this.element.style.height = '10px'; + this.element.style.width = '200px'; + this.element.style.border = 'thin solid #C4C4C4'; + this.element.style.position = 'relative'; + this.element.style.left = '0px'; + this.element.style.top = '10px'; + this.element.style.zIndex = '1'; + + this.strand_.element.appendChild(this.element); + + this.positioner = this.element; + this.element.flexjs_wrapper = this; +}; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f4cfdaca/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/SliderMouseController.js ---------------------------------------------------------------------- diff --git a/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/SliderMouseController.js b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/SliderMouseController.js new file mode 100644 index 0000000..5d12b5c --- /dev/null +++ b/frameworks/js/FlexJS/src/org/apache/flex/html/staticControls/beads/controllers/SliderMouseController.js @@ -0,0 +1,156 @@ +/** + * Licensed under the Apache License, Version 2.0 (the 'License'); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an 'AS IS' BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +goog.provide('org.apache.flex.html.staticControls.beads.controllers.SliderMouseController'); + +/** + * @constructor + */ +org.apache.flex.html.staticControls.beads.controllers.SliderMouseController = +function() { +}; + +/** + * @expose + * @this {org.apache.flex.html.staticControls.beads.controllers. + * SliderMouseController} + * @param {Object} value The strand. + */ +org.apache.flex.html.staticControls.beads.controllers.SliderMouseController. +prototype.set_strand = function(value) { + this.strand_ = value; + + this.track = this.strand_.track; + this.thumb = this.strand_.thumb; + + goog.events.listen(this.track.element, goog.events.EventType.CLICK, + this.handleTrackClick, false, this); + + goog.events.listen(this.thumb.element, goog.events.EventType.MOUSEDOWN, + this.handleThumbDown, false, this); +}; + + +/** + * @this {org.apache.flex.html.staticControls.beads.controllers. + * SliderMouseController} + * @param {Event} event The event triggering the function. + * @return {void} Handles click on track. + */ +org.apache.flex.html.staticControls.beads.controllers.SliderMouseController. +prototype.handleTrackClick = +function(event) +{ + var xloc = event.clientX; + var p = Math.min(1, xloc / parseInt(this.track.element.style.width, 10)); + var n = p * (this.strand_.get_maximum() - this.strand_.get_minimum()) + + this.strand_.get_minimum(); + + this.strand_.set_value(n); + + this.origin = parseInt(this.thumb.element.style.left, 10); + this.position = parseInt(this.thumb.element.style.left, 10); + + this.calcValFromMousePosition(event, true); + + this.strand_.dispatchEvent(new org.apache.flex.events.Event('valueChanged')); +}; + +/** + * @this {org.apache.flex.html.staticControls.beads.controllers. + * SliderMouseController} + * @param {Event} event The event triggering the function. + * @return {void} Handles mouse-down on the thumb. + */ +org.apache.flex.html.staticControls.beads.controllers.SliderMouseController. +prototype.handleThumbDown = +function(event) +{ + goog.events.listen(this.strand_.element, goog.events.EventType.MOUSEUP, + this.handleThumbUp, false, this); + goog.events.listen(this.strand_.element, goog.events.EventType.MOUSEMOVE, + this.handleThumbMove, false, this); + + this.origin = event.clientX; + this.position = parseInt(this.thumb.element.style.left, 10); +}; + +/** + * @this {org.apache.flex.html.staticControls.beads.controllers. + * SliderMouseController} + * @param {Event} event The event triggering the function. + * @return {void} Handles mouse-up on the thumb. + */ +org.apache.flex.html.staticControls.beads.controllers.SliderMouseController. +prototype.handleThumbUp = +function(event) +{ + goog.events.unlisten(this.strand_.element, goog.events.EventType.MOUSEUP, + this.handleThumbUp, false, this); + goog.events.unlisten(this.strand_.element, goog.events.EventType.MOUSEMOVE, + this.handleThumbMove, false, this); + + this.calcValFromMousePosition(event, false); + + this.strand_.dispatchEvent(new org.apache.flex.events.Event('valueChanged')); +}; + +/** + * @this {org.apache.flex.html.staticControls.beads.controllers. + * SliderMouseController} + * @param {Event} event The event triggering the function. + * @return {void} Handles mouse-move on the thumb. + */ +org.apache.flex.html.staticControls.beads.controllers.SliderMouseController. +prototype.handleThumbMove = +function(event) +{ + this.calcValFromMousePosition(event, false); + + this.strand_.dispatchEvent(new org.apache.flex.events.Event('valueChanged')); +}; + +/** + * @this {org.apache.flex.html.staticControls.beads.controllers. + * SliderMouseController} + * @param {Event} event The event triggering the function. + * @param {Boolean} useOffset If true, event.offsetX is used in the calculation. + * @return {void} Determines the new value based on the movement of the mouse + * along the slider. + */ +org.apache.flex.html.staticControls.beads.controllers.SliderMouseController. +prototype.calcValFromMousePosition = +function(event, useOffset) +{ + var deltaX = (useOffset ? event.offsetX : event.clientX) - this.origin; + var thumbW = parseInt(this.thumb.element.style.width, 10) / 2; + var newX = this.position + deltaX; + + var p = newX / parseInt(this.track.element.style.width, 10); + var n = p * (this.strand_.get_maximum() - this.strand_.get_minimum()) + + this.strand_.get_minimum(); + n = this.strand_.snap(n); + if (n < this.strand_.get_minimum()) n = this.strand_.get_minimum(); + else if (n > this.strand_.get_maximum()) n = this.strand_.get_maximum(); + + p = (n - this.strand_.get_minimum()) / (this.strand_.get_maximum() - + this.strand_.get_minimum()); + newX = p * parseInt(this.track.element.style.width, 10); + + this.thumb.element.style.left = String(newX - + parseInt(this.thumb.element.style.width, 10) / 2) + 'px'; + + this.strand_.set_value(n); +}; +
