MDL Slider event change working
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/23e83204 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/23e83204 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/23e83204 Branch: refs/heads/feature/fontawesome Commit: 23e83204ebc2a5c075a52387992be61e07c6cffd Parents: d0a69eb Author: Carlos Rovira <[email protected]> Authored: Wed Dec 28 18:40:22 2016 +0100 Committer: Carlos Rovira <[email protected]> Committed: Wed Dec 28 18:40:22 2016 +0100 ---------------------------------------------------------------------- .../src/main/flex/org/apache/flex/mdl/Slider.as | 35 +----- .../beads/controllers/SliderMouseController.as | 112 ++++++++--------- .../apache/flex/mdl/beads/views/SliderView.as | 122 +++++++------------ 3 files changed, 104 insertions(+), 165 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/23e83204/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as index bcbef9b..d2fb38e 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as @@ -25,7 +25,7 @@ package org.apache.flex.mdl COMPILE::JS { import org.apache.flex.html.beads.controllers.SliderMouseController; - import org.apache.flex.core.WrappedHTMLElement; + import org.apache.flex.core.WrappedHTMLElement; } [Event(name="valueChange", type="org.apache.flex.events.Event")] @@ -60,6 +60,7 @@ package org.apache.flex.mdl className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + //default model values IRangeModel(model).value = 0; IRangeModel(model).minimum = 0; IRangeModel(model).maximum = 100; @@ -82,11 +83,6 @@ package org.apache.flex.mdl public function set value(newValue:Number):void { IRangeModel(model).value = newValue; - - /*COMPILE::JS - { - (element as HTMLInputElement).value = IRangeModel(model).value.toString(); - }*/ } /** @@ -104,11 +100,6 @@ package org.apache.flex.mdl public function set minimum(value:Number):void { IRangeModel(model).minimum = value; - - /*COMPILE::JS - { - (element as HTMLInputElement).min = IRangeModel(model).minimum.toString(); - }*/ } /** @@ -126,11 +117,6 @@ package org.apache.flex.mdl public function set maximum(value:Number):void { IRangeModel(model).maximum = value; - - /*COMPILE::JS - { - (element as HTMLInputElement).max = IRangeModel(model).maximum.toString(); - }*/ } /** @@ -167,11 +153,6 @@ package org.apache.flex.mdl public function set stepSize(value:Number):void { IRangeModel(model).stepSize = value; - - /*COMPILE::JS - { - (element as HTMLInputElement).step = IRangeModel(model).stepSize.toString(); - }*/ } COMPILE::JS @@ -192,23 +173,17 @@ package org.apache.flex.mdl input = document.createElement('input') as HTMLInputElement; input.type = "range"; input.className = typeNames; - - input.value = IRangeModel(model).value.toString(); - input.min = IRangeModel(model).minimum.toString(); - input.max = IRangeModel(model).maximum.toString(); - input.step = IRangeModel(model).stepSize.toString(); p.appendChild(input); - element = input as WrappedHTMLElement; - + element = input as WrappedHTMLElement; positioner = p as WrappedHTMLElement; (input as WrappedHTMLElement).flexjs_wrapper = this; element.flexjs_wrapper = this; - + return element; - } + } private var _className:String; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/23e83204/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as index 7c7fcd3..4afb6d8 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/controllers/SliderMouseController.as @@ -94,24 +94,33 @@ package org.apache.flex.mdl.beads.controllers COMPILE::JS { var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView; - track = sliderView.track as UIBase; - thumb = sliderView.thumb as UIBase; - - goog.events.listen(track.element, goog.events.EventType.CLICK, - handleTrackClick, false, this); - - goog.events.listen(thumb.element, goog.events.EventType.MOUSEDOWN, - handleThumbDown, false, this); + //track = sliderView.track as UIBase; + //thumb = sliderView.thumb as UIBase; + //goog.events.listen(track.element, goog.events.EventType.CLICK, handleTrackClick, false, this); + //goog.events.listen(thumb.element, goog.events.EventType.MOUSEDOWN, handleThumbDown, false, this); + goog.events.listen(UIBase(_strand).element, "change", handleChange, false, this); + //goog.events.listen(UIBase(_strand).element, "oninput", handleTrackClick, false, this); } } - - COMPILE::JS - private var track:UIBase; - + + /** + */ COMPILE::JS - private var thumb:UIBase; - + private function handleChange(event:BrowserEvent):void + { + var host:Slider = _strand as Slider; + + rangeModel.value = Number((UIBase(_strand).element as HTMLInputElement).value); + + host.dispatchEvent(new org.apache.flex.events.Event('valueChange')); + } + + COMPILE::SWF + private var origin:Point; + COMPILE::SWF + private var thumb:Point; + /** * @private */ @@ -139,11 +148,6 @@ package org.apache.flex.mdl.beads.controllers IEventDispatcher(_strand).dispatchEvent(new Event("valueChange")); } - COMPILE::SWF - private var origin:Point; - COMPILE::SWF - private var thumb:Point; - /** * @private */ @@ -184,32 +188,41 @@ package org.apache.flex.mdl.beads.controllers } /** - */ COMPILE::JS - private function handleTrackClick(event:BrowserEvent):void + private var track:UIBase; + + COMPILE::JS + private var thumb:UIBase; + + COMPILE::JS + private var origin:Number; + + COMPILE::JS + private var position:int; + + COMPILE::JS + private function handleTrackClickOLD(event:BrowserEvent):void { + trace("handleTrackClickOLD..."); var host:Slider = _strand as Slider; var xloc:Number = event.clientX; - var p:Number = Math.min(1, xloc / parseInt(track.element.style.width, 10)); - var n:Number = p * (host.maximum - host.minimum) + - host.minimum; + var p:Number = Math.min(1, xloc / parseInt(host.element.style.width, 10)); + var n:Number = p * (host.maximum - host.minimum) + host.minimum; host.value = n; - origin = parseInt(thumb.element.style.left, 10); - position = parseInt(thumb.element.style.left, 10); + origin = parseInt(host.element.style.left, 10); + position = parseInt(host.element.style.left, 10); calcValFromMousePosition(event, true); host.dispatchEvent(new org.apache.flex.events.Event('valueChange')); } - - - /** - */ + COMPILE::JS private function handleThumbDown(event:BrowserEvent):void { + trace("handleThumbDown..."); var host:Slider = _strand as Slider; goog.events.listen(host.element, goog.events.EventType.MOUSEUP, handleThumbUp, false, this); @@ -217,19 +230,13 @@ package org.apache.flex.mdl.beads.controllers handleThumbMove, false, this); origin = event.clientX; - position = parseInt(thumb.element.style.left, 10); + position = parseInt(host.element.style.left, 10); } - - COMPILE::JS - private var origin:Number; - COMPILE::JS - private var position:int; - - /** - */ + COMPILE::JS private function handleThumbUp(event:BrowserEvent):void { + trace("handleThumbUp..."); var host:Slider = _strand as Slider; goog.events.unlisten(host.element, goog.events.EventType.MOUSEUP, handleThumbUp, false, this); @@ -240,45 +247,40 @@ package org.apache.flex.mdl.beads.controllers host.dispatchEvent(new org.apache.flex.events.Event('valueChange')); } - - - /** - */ + COMPILE::JS private function handleThumbMove(event:BrowserEvent):void { + trace("handleThumbMove..."); var host:Slider = _strand as Slider; calcValFromMousePosition(event, false); host.dispatchEvent(new org.apache.flex.events.Event('valueChange')); } - - - /** - */ + COMPILE::JS private function calcValFromMousePosition(event:BrowserEvent, useOffset:Boolean):void { + trace("calcValFromMousePosition..."); var host:Slider = _strand as Slider; var deltaX:Number = (useOffset ? event.offsetX : event.clientX) - origin; - var thumbW:int = parseInt(thumb.element.style.width, 10) / 2; + var thumbW:int = parseInt(host.element.style.width, 10) / 2; var newX:Number = position + deltaX; - var p:Number = newX / parseInt(track.element.style.width, 10); + var p:Number = newX / parseInt(host.element.style.width, 10); var n:Number = p * (host.maximum - host.minimum) + host.minimum; n = host.snap(n); if (n < host.minimum) n = host.minimum; else if (n > host.maximum) n = host.maximum; - p = (n - host.minimum) / (host.maximum - - host.minimum); - newX = p * parseInt(track.element.style.width, 10); + p = (n - host.minimum) / (host.maximum - host.minimum); + newX = p * parseInt(host.element.style.width, 10); - thumb.element.style.left = String(newX - - parseInt(thumb.element.style.width, 10) / 2) + 'px'; + //thumb.element.style.left = String(newX - + // parseInt(thumb.element.style.width, 10) / 2) + 'px'; host.value = n; - } + }*/ } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/23e83204/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as index d578b70..cbd5ade 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/views/SliderView.as @@ -61,59 +61,6 @@ package org.apache.flex.mdl.beads.views { } - private var rangeModel:IRangeModel; - - /** - * @copy org.apache.flex.core.IBead#strand - * - * @langversion 3.0 - * @playerversion Flash 10.2 - * @playerversion AIR 2.6 - * @productversion FlexJS 0.0 - */ - override public function set strand(value:IStrand):void - { - super.strand = value; - - COMPILE::SWF { - var s:UIBase = UIBase(_strand); - - _track = new Button(); - _track.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead); - _track.className = "SliderTrack"; - s.addElement(_track); - - _thumb = new Button(); - _thumb.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead); - _thumb.className = "SliderThumb"; - s.addElement(_thumb); - - } - COMPILE::JS { - _track = new Button(); - //_track.className = "SliderTrack"; - UIBase(_strand).addElement(_track); - - _thumb = new Button(); - //_thumb.className = "SliderThumb"; - UIBase(_strand).addElement(_thumb); - } - - IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler); - IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler); - - rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel; - - // listen for changes to the model and adjust the UI accordingly. - IEventDispatcher(rangeModel).addEventListener("valueChange",modelChangeHandler); - IEventDispatcher(rangeModel).addEventListener("minimumChange",modelChangeHandler); - IEventDispatcher(rangeModel).addEventListener("maximumChange",modelChangeHandler); - IEventDispatcher(rangeModel).addEventListener("stepSizeChange",modelChangeHandler); - IEventDispatcher(rangeModel).addEventListener("snapIntervalChange",modelChangeHandler); - - sizeChangeHandler(null); - } - private var _track:Button; private var _thumb:Button; @@ -143,28 +90,47 @@ package org.apache.flex.mdl.beads.views { return _thumb; } + + private var rangeModel:IRangeModel; /** - * @private + * @copy org.apache.flex.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 */ - private function sizeChangeHandler( event:Event ) : void + override public function set strand(value:IStrand):void { - var host:UIBase = UIBase(_strand); - var w:Number = host.width; - var h:Number = host.height; + super.strand = value; - _thumb.width = 20; - _thumb.height = host.height; - - // the track is inset 1/2 of the thumbwidth so the thumb can - // overlay the track on either end with the thumb center being - // on the track's edge - _track.width = host.width - _thumb.width; - _track.height = 5; - _track.x = _thumb.width/2; - _track.y = (host.height - _track.height)/2; + COMPILE::SWF { + var s:UIBase = UIBase(_strand); + + _track = new Button(); + _track.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead); + _track.className = "SliderTrack"; + s.addElement(_track); + + _thumb = new Button(); + _thumb.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead); + _thumb.className = "SliderThumb"; + s.addElement(_thumb); + + } - setThumbPositionFromValue(rangeModel.value); + rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel; + + // listen for changes to the model and adjust the UI accordingly. + IEventDispatcher(rangeModel).addEventListener("stepSizeChange",modelChangeHandler); + IEventDispatcher(rangeModel).addEventListener("minimumChange",modelChangeHandler); + IEventDispatcher(rangeModel).addEventListener("maximumChange",modelChangeHandler); + IEventDispatcher(rangeModel).addEventListener("valueChange",modelChangeHandler); + //IEventDispatcher(rangeModel).addEventListener("snapIntervalChange",modelChangeHandler); + + //init view values + modelChangeHandler(null); } /** @@ -172,17 +138,13 @@ package org.apache.flex.mdl.beads.views */ private function modelChangeHandler( event:Event ) : void { - setThumbPositionFromValue(rangeModel.value); - } - - /** - * @private - */ - private function setThumbPositionFromValue( value:Number ) : void - { - var p:Number = (value-rangeModel.minimum)/(rangeModel.maximum-rangeModel.minimum); - var xloc:Number = (p*_track.width); - _thumb.x = xloc; + COMPILE::JS + { + (UIBase(_strand).element as HTMLInputElement).step = rangeModel.stepSize.toString(); + (UIBase(_strand).element as HTMLInputElement).min = rangeModel.minimum.toString(); + (UIBase(_strand).element as HTMLInputElement).max = rangeModel.maximum.toString(); + (UIBase(_strand).element as HTMLInputElement).value = rangeModel.value.toString(); + } } } }
