flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From p...@apache.org
Subject git commit: [flex-asjs] [refs/heads/develop] - Separated the parts of the JavaScript Slider to coincide with the ActionScript version and to better manage the component by separating its functions.
Date Wed, 14 Aug 2013 20:25:46 GMT
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 <pent@apache.org>
Authored: Wed Aug 14 16:25:34 2013 -0400
Committer: Peter Ent <pent@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);
+};
+


Mime
View raw message