1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675 |
- goog.provide('goog.ui.SliderBase');
- goog.provide('goog.ui.SliderBase.AnimationFactory');
- goog.provide('goog.ui.SliderBase.Orientation');
- goog.require('goog.Timer');
- goog.require('goog.a11y.aria');
- goog.require('goog.a11y.aria.Role');
- goog.require('goog.a11y.aria.State');
- goog.require('goog.array');
- goog.require('goog.asserts');
- goog.require('goog.dom');
- goog.require('goog.dom.TagName');
- goog.require('goog.dom.classlist');
- goog.require('goog.events');
- goog.require('goog.events.EventType');
- goog.require('goog.events.KeyCodes');
- goog.require('goog.events.KeyHandler');
- goog.require('goog.events.MouseWheelHandler');
- goog.require('goog.functions');
- goog.require('goog.fx.AnimationParallelQueue');
- goog.require('goog.fx.Dragger');
- goog.require('goog.fx.Transition');
- goog.require('goog.fx.dom.ResizeHeight');
- goog.require('goog.fx.dom.ResizeWidth');
- goog.require('goog.fx.dom.Slide');
- goog.require('goog.math');
- goog.require('goog.math.Coordinate');
- goog.require('goog.style');
- goog.require('goog.style.bidi');
- goog.require('goog.ui.Component');
- goog.require('goog.ui.RangeModel');
- goog.ui.SliderBase = function(opt_domHelper, opt_labelFn) {
- goog.ui.Component.call(this, opt_domHelper);
-
- this.additionalAnimations_ = null;
-
- this.rangeModel = new goog.ui.RangeModel();
-
- this.labelFn_ = opt_labelFn || goog.functions.NULL;
-
- goog.events.listen(
- this.rangeModel, goog.ui.Component.EventType.CHANGE,
- this.handleRangeModelChange, false, this);
- };
- goog.inherits(goog.ui.SliderBase, goog.ui.Component);
- goog.tagUnsealableClass(goog.ui.SliderBase);
- goog.ui.SliderBase.EventType = {
-
- DRAG_VALUE_START: goog.events.getUniqueId('dragvaluestart'),
-
- DRAG_VALUE_END: goog.events.getUniqueId('dragvalueend'),
-
- DRAG_EXTENT_START: goog.events.getUniqueId('dragextentstart'),
-
- DRAG_EXTENT_END: goog.events.getUniqueId('dragextentend'),
-
-
-
-
-
-
- DRAG_START: goog.events.getUniqueId('dragstart'),
-
- DRAG_END: goog.events.getUniqueId('dragend'),
-
- ANIMATION_END: goog.events.getUniqueId('animationend')
- };
- goog.ui.SliderBase.Orientation = {
- VERTICAL: 'vertical',
- HORIZONTAL: 'horizontal'
- };
- goog.ui.SliderBase.prototype.orientation_ =
- goog.ui.SliderBase.Orientation.HORIZONTAL;
- goog.ui.SliderBase.prototype.currentAnimation_;
- goog.ui.SliderBase.prototype.incTimer_;
- goog.ui.SliderBase.prototype.incrementing_;
- goog.ui.SliderBase.prototype.lastMousePosition_;
- goog.ui.SliderBase.MOUSE_DOWN_INCREMENT_INTERVAL_ = 200;
- goog.ui.SliderBase.ANIMATION_INTERVAL_ = 100;
- goog.ui.SliderBase.prototype.valueThumb;
- goog.ui.SliderBase.prototype.extentThumb;
- goog.ui.SliderBase.prototype.rangeHighlight;
- goog.ui.SliderBase.prototype.thumbToMove_;
- goog.ui.SliderBase.prototype.keyHandler_;
- goog.ui.SliderBase.prototype.mouseWheelHandler_;
- goog.ui.SliderBase.prototype.valueDragger_;
- goog.ui.SliderBase.prototype.extentDragger_;
- goog.ui.SliderBase.prototype.isAnimating_ = false;
- goog.ui.SliderBase.prototype.moveToPointEnabled_ = false;
- goog.ui.SliderBase.prototype.blockIncrement_ = 10;
- goog.ui.SliderBase.prototype.minExtent_ = 0;
- goog.ui.SliderBase.prototype.isHandleMouseWheel_ = true;
- goog.ui.SliderBase.prototype.mouseDownTime_ = 0;
- goog.ui.SliderBase.prototype.MOUSE_DOWN_DELAY_ = 1000;
- goog.ui.SliderBase.prototype.enabled_ = true;
- goog.ui.SliderBase.prototype.flipForRtl_ = false;
- goog.ui.SliderBase.prototype.enableFlipForRtl = function(flipForRtl) {
- this.flipForRtl_ = flipForRtl;
- };
- goog.ui.SliderBase.prototype.getCssClass = goog.abstractMethod;
- goog.ui.SliderBase.prototype.createDom = function() {
- goog.ui.SliderBase.superClass_.createDom.call(this);
- var element = this.getDomHelper().createDom(
- goog.dom.TagName.DIV, this.getCssClass(this.orientation_));
- this.decorateInternal(element);
- };
- goog.ui.SliderBase.prototype.createThumbs = goog.abstractMethod;
- goog.ui.SliderBase.SLIDER_DRAGGING_CSS_CLASS_ =
- goog.getCssName('goog-slider-dragging');
- goog.ui.SliderBase.THUMB_DRAGGING_CSS_CLASS_ =
- goog.getCssName('goog-slider-thumb-dragging');
- goog.ui.SliderBase.DISABLED_CSS_CLASS_ =
- goog.getCssName('goog-slider-disabled');
- goog.ui.SliderBase.prototype.decorateInternal = function(element) {
- goog.ui.SliderBase.superClass_.decorateInternal.call(this, element);
- goog.asserts.assert(element);
- goog.dom.classlist.add(element, this.getCssClass(this.orientation_));
- this.createThumbs();
- this.setAriaRoles();
- };
- goog.ui.SliderBase.prototype.enterDocument = function() {
- goog.ui.SliderBase.superClass_.enterDocument.call(this);
-
- this.valueDragger_ = new goog.fx.Dragger(this.valueThumb);
- this.extentDragger_ = new goog.fx.Dragger(this.extentThumb);
- this.valueDragger_.enableRightPositioningForRtl(this.flipForRtl_);
- this.extentDragger_.enableRightPositioningForRtl(this.flipForRtl_);
-
- this.valueDragger_.defaultAction = this.extentDragger_.defaultAction =
- goog.nullFunction;
- this.keyHandler_ = new goog.events.KeyHandler(this.getElement());
- this.enableEventHandlers_(true);
- this.getElement().tabIndex = 0;
- this.updateUi_();
- };
- goog.ui.SliderBase.prototype.enableEventHandlers_ = function(enable) {
- if (enable) {
- this.getHandler()
- .listen(
- this.valueDragger_, goog.fx.Dragger.EventType.BEFOREDRAG,
- this.handleBeforeDrag_)
- .listen(
- this.extentDragger_, goog.fx.Dragger.EventType.BEFOREDRAG,
- this.handleBeforeDrag_)
- .listen(
- this.valueDragger_,
- [goog.fx.Dragger.EventType.START, goog.fx.Dragger.EventType.END],
- this.handleThumbDragStartEnd_)
- .listen(
- this.extentDragger_,
- [goog.fx.Dragger.EventType.START, goog.fx.Dragger.EventType.END],
- this.handleThumbDragStartEnd_)
- .listen(
- this.keyHandler_, goog.events.KeyHandler.EventType.KEY,
- this.handleKeyDown_)
- .listen(
- this.getElement(), goog.events.EventType.CLICK,
- this.handleMouseDownAndClick_)
- .listen(
- this.getElement(), goog.events.EventType.MOUSEDOWN,
- this.handleMouseDownAndClick_);
- if (this.isHandleMouseWheel()) {
- this.enableMouseWheelHandling_(true);
- }
- } else {
- this.getHandler()
- .unlisten(
- this.valueDragger_, goog.fx.Dragger.EventType.BEFOREDRAG,
- this.handleBeforeDrag_)
- .unlisten(
- this.extentDragger_, goog.fx.Dragger.EventType.BEFOREDRAG,
- this.handleBeforeDrag_)
- .unlisten(
- this.valueDragger_,
- [goog.fx.Dragger.EventType.START, goog.fx.Dragger.EventType.END],
- this.handleThumbDragStartEnd_)
- .unlisten(
- this.extentDragger_,
- [goog.fx.Dragger.EventType.START, goog.fx.Dragger.EventType.END],
- this.handleThumbDragStartEnd_)
- .unlisten(
- this.keyHandler_, goog.events.KeyHandler.EventType.KEY,
- this.handleKeyDown_)
- .unlisten(
- this.getElement(), goog.events.EventType.CLICK,
- this.handleMouseDownAndClick_)
- .unlisten(
- this.getElement(), goog.events.EventType.MOUSEDOWN,
- this.handleMouseDownAndClick_);
- if (this.isHandleMouseWheel()) {
- this.enableMouseWheelHandling_(false);
- }
- }
- };
- goog.ui.SliderBase.prototype.exitDocument = function() {
- goog.ui.SliderBase.base(this, 'exitDocument');
- goog.disposeAll(
- this.valueDragger_, this.extentDragger_, this.keyHandler_,
- this.mouseWheelHandler_);
- };
- goog.ui.SliderBase.prototype.handleBeforeDrag_ = function(e) {
- var thumbToDrag =
- e.dragger == this.valueDragger_ ? this.valueThumb : this.extentThumb;
- var value;
- if (this.orientation_ == goog.ui.SliderBase.Orientation.VERTICAL) {
- var availHeight = this.getElement().clientHeight - thumbToDrag.offsetHeight;
- value = (availHeight - e.top) / availHeight *
- (this.getMaximum() - this.getMinimum()) +
- this.getMinimum();
- } else {
- var availWidth = this.getElement().clientWidth - thumbToDrag.offsetWidth;
- value = (e.left / availWidth) * (this.getMaximum() - this.getMinimum()) +
- this.getMinimum();
- }
-
-
-
-
- if (e.dragger == this.valueDragger_) {
- value = Math.min(
- Math.max(value, this.getMinimum()), this.getValue() + this.getExtent());
- } else {
- value = Math.min(Math.max(value, this.getValue()), this.getMaximum());
- }
- this.setThumbPosition_(thumbToDrag, value);
- };
- goog.ui.SliderBase.prototype.handleThumbDragStartEnd_ = function(e) {
- var isDragStart = e.type == goog.fx.Dragger.EventType.START;
- goog.dom.classlist.enable(
- goog.asserts.assertElement(this.getElement()),
- goog.ui.SliderBase.SLIDER_DRAGGING_CSS_CLASS_, isDragStart);
- goog.dom.classlist.enable(
- goog.asserts.assertElement(e.target.handle),
- goog.ui.SliderBase.THUMB_DRAGGING_CSS_CLASS_, isDragStart);
- var isValueDragger = e.dragger == this.valueDragger_;
- if (isDragStart) {
- this.dispatchEvent(goog.ui.SliderBase.EventType.DRAG_START);
- this.dispatchEvent(
- isValueDragger ? goog.ui.SliderBase.EventType.DRAG_VALUE_START :
- goog.ui.SliderBase.EventType.DRAG_EXTENT_START);
- } else {
- this.dispatchEvent(goog.ui.SliderBase.EventType.DRAG_END);
- this.dispatchEvent(
- isValueDragger ? goog.ui.SliderBase.EventType.DRAG_VALUE_END :
- goog.ui.SliderBase.EventType.DRAG_EXTENT_END);
- }
- };
- goog.ui.SliderBase.prototype.handleKeyDown_ = function(e) {
- var handled = true;
- switch (e.keyCode) {
- case goog.events.KeyCodes.HOME:
- this.animatedSetValue(this.getMinimum());
- break;
- case goog.events.KeyCodes.END:
- this.animatedSetValue(this.getMaximum());
- break;
- case goog.events.KeyCodes.PAGE_UP:
- this.moveThumbs(this.getBlockIncrement());
- break;
- case goog.events.KeyCodes.PAGE_DOWN:
- this.moveThumbs(-this.getBlockIncrement());
- break;
- case goog.events.KeyCodes.LEFT:
- var sign = this.flipForRtl_ && this.isRightToLeft() ? 1 : -1;
- this.moveThumbs(
- e.shiftKey ? sign * this.getBlockIncrement() :
- sign * this.getUnitIncrement());
- break;
- case goog.events.KeyCodes.DOWN:
- this.moveThumbs(
- e.shiftKey ? -this.getBlockIncrement() : -this.getUnitIncrement());
- break;
- case goog.events.KeyCodes.RIGHT:
- var sign = this.flipForRtl_ && this.isRightToLeft() ? -1 : 1;
- this.moveThumbs(
- e.shiftKey ? sign * this.getBlockIncrement() :
- sign * this.getUnitIncrement());
- break;
- case goog.events.KeyCodes.UP:
- this.moveThumbs(
- e.shiftKey ? this.getBlockIncrement() : this.getUnitIncrement());
- break;
- default:
- handled = false;
- }
- if (handled) {
- e.preventDefault();
- }
- };
- goog.ui.SliderBase.prototype.handleMouseDownAndClick_ = function(e) {
- if (this.getElement().focus) {
- this.getElement().focus();
- }
-
- var target = (e.target);
- if (!goog.dom.contains(this.valueThumb, target) &&
- !goog.dom.contains(this.extentThumb, target)) {
- var isClick = e.type == goog.events.EventType.CLICK;
- if (isClick && goog.now() < this.mouseDownTime_ + this.MOUSE_DOWN_DELAY_) {
-
-
-
-
- return;
- }
- if (!isClick) {
- this.mouseDownTime_ = goog.now();
- }
- if (this.moveToPointEnabled_) {
-
- this.animatedSetValue(this.getValueFromMousePosition(e));
- } else {
-
- this.startBlockIncrementing_(e);
- }
- }
- };
- goog.ui.SliderBase.prototype.handleMouseWheel_ = function(e) {
-
- var direction = e.detail > 0 ? -1 : 1;
- this.moveThumbs(direction * this.getUnitIncrement());
- e.preventDefault();
- };
- goog.ui.SliderBase.prototype.startBlockIncrementing_ = function(e) {
- this.storeMousePos_(e);
- this.thumbToMove_ = this.getClosestThumb_(this.getValueFromMousePosition(e));
- if (this.orientation_ == goog.ui.SliderBase.Orientation.VERTICAL) {
- this.incrementing_ = this.lastMousePosition_ < this.thumbToMove_.offsetTop;
- } else {
- this.incrementing_ = this.lastMousePosition_ >
- this.getOffsetStart_(this.thumbToMove_) + this.thumbToMove_.offsetWidth;
- }
- var doc = goog.dom.getOwnerDocument(this.getElement());
- this.getHandler()
- .listen(
- doc, goog.events.EventType.MOUSEUP, this.stopBlockIncrementing_, true)
- .listen(
- this.getElement(), goog.events.EventType.MOUSEMOVE,
- this.storeMousePos_);
- if (!this.incTimer_) {
- this.incTimer_ =
- new goog.Timer(goog.ui.SliderBase.MOUSE_DOWN_INCREMENT_INTERVAL_);
- this.getHandler().listen(
- this.incTimer_, goog.Timer.TICK, this.handleTimerTick_);
- }
- this.handleTimerTick_();
- this.incTimer_.start();
- };
- goog.ui.SliderBase.prototype.handleTimerTick_ = function() {
- var value;
- if (this.orientation_ == goog.ui.SliderBase.Orientation.VERTICAL) {
- var mouseY = this.lastMousePosition_;
- var thumbY = this.thumbToMove_.offsetTop;
- if (this.incrementing_) {
- if (mouseY < thumbY) {
- value = this.getThumbPosition_(this.thumbToMove_) +
- this.getBlockIncrement();
- }
- } else {
- var thumbH = this.thumbToMove_.offsetHeight;
- if (mouseY > thumbY + thumbH) {
- value = this.getThumbPosition_(this.thumbToMove_) -
- this.getBlockIncrement();
- }
- }
- } else {
- var mouseX = this.lastMousePosition_;
- var thumbX = this.getOffsetStart_(this.thumbToMove_);
- if (this.incrementing_) {
- var thumbW = this.thumbToMove_.offsetWidth;
- if (mouseX > thumbX + thumbW) {
- value = this.getThumbPosition_(this.thumbToMove_) +
- this.getBlockIncrement();
- }
- } else {
- if (mouseX < thumbX) {
- value = this.getThumbPosition_(this.thumbToMove_) -
- this.getBlockIncrement();
- }
- }
- }
- if (goog.isDef(value)) {
- this.setThumbPosition_(this.thumbToMove_, value);
- }
- };
- goog.ui.SliderBase.prototype.stopBlockIncrementing_ = function() {
- if (this.incTimer_) {
- this.incTimer_.stop();
- }
- var doc = goog.dom.getOwnerDocument(this.getElement());
- this.getHandler()
- .unlisten(
- doc, goog.events.EventType.MOUSEUP, this.stopBlockIncrementing_, true)
- .unlisten(
- this.getElement(), goog.events.EventType.MOUSEMOVE,
- this.storeMousePos_);
- };
- goog.ui.SliderBase.prototype.getRelativeMousePos_ = function(e) {
- var coord = goog.style.getRelativePosition(e, this.getElement());
- if (this.orientation_ == goog.ui.SliderBase.Orientation.VERTICAL) {
- return coord.y;
- } else {
- if (this.flipForRtl_ && this.isRightToLeft()) {
- return this.getElement().clientWidth - coord.x;
- } else {
- return coord.x;
- }
- }
- };
- goog.ui.SliderBase.prototype.storeMousePos_ = function(e) {
- this.lastMousePosition_ = this.getRelativeMousePos_(e);
- };
- goog.ui.SliderBase.prototype.getValueFromMousePosition = function(e) {
- var min = this.getMinimum();
- var max = this.getMaximum();
- if (this.orientation_ == goog.ui.SliderBase.Orientation.VERTICAL) {
- var thumbH = this.valueThumb.offsetHeight;
- var availH = this.getElement().clientHeight - thumbH;
- var y = this.getRelativeMousePos_(e) - thumbH / 2;
- return (max - min) * (availH - y) / availH + min;
- } else {
- var thumbW = this.valueThumb.offsetWidth;
- var availW = this.getElement().clientWidth - thumbW;
- var x = this.getRelativeMousePos_(e) - thumbW / 2;
- return (max - min) * x / availW + min;
- }
- };
- goog.ui.SliderBase.prototype.getThumbPosition_ = function(thumb) {
- if (thumb == this.valueThumb) {
- return this.rangeModel.getValue();
- } else if (thumb == this.extentThumb) {
- return this.rangeModel.getValue() + this.rangeModel.getExtent();
- } else {
- throw Error('Illegal thumb element. Neither minThumb nor maxThumb');
- }
- };
- goog.ui.SliderBase.prototype.isDragging = function() {
- return this.valueDragger_.isDragging() || this.extentDragger_.isDragging();
- };
- goog.ui.SliderBase.prototype.moveThumbs = function(delta) {
-
- if (Math.abs(delta) < this.getStep()) {
- delta = goog.math.sign(delta) * this.getStep();
- }
- var newMinPos = this.getThumbPosition_(this.valueThumb) + delta;
- var newMaxPos = this.getThumbPosition_(this.extentThumb) + delta;
-
- newMinPos = goog.math.clamp(
- newMinPos, this.getMinimum(), this.getMaximum() - this.minExtent_);
- newMaxPos = goog.math.clamp(
- newMaxPos, this.getMinimum() + this.minExtent_, this.getMaximum());
-
- this.setValueAndExtent(newMinPos, newMaxPos - newMinPos);
- };
- goog.ui.SliderBase.prototype.setThumbPosition_ = function(thumb, position) {
-
- var roundedPosition = this.rangeModel.roundToStepWithMin(position);
- var value =
- thumb == this.valueThumb ? roundedPosition : this.rangeModel.getValue();
- var end = thumb == this.extentThumb ?
- roundedPosition :
- this.rangeModel.getValue() + this.rangeModel.getExtent();
- if (value >= this.getMinimum() && end >= value + this.minExtent_ &&
- this.getMaximum() >= end) {
- this.setValueAndExtent(value, end - value);
- }
- };
- goog.ui.SliderBase.prototype.setValueAndExtent = function(value, extent) {
- if (this.getMinimum() <= value && value <= this.getMaximum() - extent &&
- this.minExtent_ <= extent && extent <= this.getMaximum() - value) {
- if (value == this.getValue() && extent == this.getExtent()) {
- return;
- }
-
-
-
- this.rangeModel.setMute(true);
- this.rangeModel.setExtent(0);
- this.rangeModel.setValue(value);
- this.rangeModel.setExtent(extent);
- this.rangeModel.setMute(false);
- this.handleRangeModelChange(null);
- }
- };
- goog.ui.SliderBase.prototype.getMinimum = function() {
- return this.rangeModel.getMinimum();
- };
- goog.ui.SliderBase.prototype.setMinimum = function(min) {
- this.rangeModel.setMinimum(min);
- };
- goog.ui.SliderBase.prototype.getMaximum = function() {
- return this.rangeModel.getMaximum();
- };
- goog.ui.SliderBase.prototype.setMaximum = function(max) {
- this.rangeModel.setMaximum(max);
- };
- goog.ui.SliderBase.prototype.getValueThumb = function() {
- return this.valueThumb;
- };
- goog.ui.SliderBase.prototype.getExtentThumb = function() {
- return this.extentThumb;
- };
- goog.ui.SliderBase.prototype.getClosestThumb_ = function(position) {
- if (position <=
- (this.rangeModel.getValue() + this.rangeModel.getExtent() / 2)) {
- return this.valueThumb;
- } else {
- return this.extentThumb;
- }
- };
- goog.ui.SliderBase.prototype.handleRangeModelChange = function(e) {
- this.updateUi_();
- this.updateAriaStates();
- this.dispatchEvent(goog.ui.Component.EventType.CHANGE);
- };
- goog.ui.SliderBase.prototype.updateUi_ = function() {
- if (this.valueThumb && !this.isAnimating_) {
- var minCoord = this.getThumbCoordinateForValue(
- this.getThumbPosition_(this.valueThumb));
- var maxCoord = this.getThumbCoordinateForValue(
- this.getThumbPosition_(this.extentThumb));
- if (this.orientation_ == goog.ui.SliderBase.Orientation.VERTICAL) {
- this.valueThumb.style.top = minCoord.y + 'px';
- this.extentThumb.style.top = maxCoord.y + 'px';
- if (this.rangeHighlight) {
- var highlightPositioning = this.calculateRangeHighlightPositioning_(
- maxCoord.y, minCoord.y, this.valueThumb.offsetHeight);
- this.rangeHighlight.style.top = highlightPositioning.offset + 'px';
- this.rangeHighlight.style.height = highlightPositioning.size + 'px';
- }
- } else {
- var pos = (this.flipForRtl_ && this.isRightToLeft()) ? 'right' : 'left';
- this.valueThumb.style[pos] = minCoord.x + 'px';
- this.extentThumb.style[pos] = maxCoord.x + 'px';
- if (this.rangeHighlight) {
- var highlightPositioning = this.calculateRangeHighlightPositioning_(
- minCoord.x, maxCoord.x, this.valueThumb.offsetWidth);
- this.rangeHighlight.style[pos] = highlightPositioning.offset + 'px';
- this.rangeHighlight.style.width = highlightPositioning.size + 'px';
- }
- }
- }
- };
- goog.ui.SliderBase.prototype.calculateRangeHighlightPositioning_ = function(
- firstThumbPos, secondThumbPos, thumbSize) {
-
- var highlightInset = Math.ceil(thumbSize / 2);
- var size = secondThumbPos - firstThumbPos + thumbSize - 2 * highlightInset;
-
-
- return {offset: firstThumbPos + highlightInset, size: Math.max(size, 0)};
- };
- goog.ui.SliderBase.prototype.getThumbCoordinateForValue = function(val) {
- var coord = new goog.math.Coordinate;
- if (this.valueThumb) {
- var min = this.getMinimum();
- var max = this.getMaximum();
-
-
- var ratio = (val == min && min == max) ? 0 : (val - min) / (max - min);
- if (this.orientation_ == goog.ui.SliderBase.Orientation.VERTICAL) {
- var thumbHeight = this.valueThumb.offsetHeight;
- var h = this.getElement().clientHeight - thumbHeight;
- var bottom = Math.round(ratio * h);
- coord.x = this.getOffsetStart_(this.valueThumb);
- coord.y = h - bottom;
- } else {
- var w = this.getElement().clientWidth - this.valueThumb.offsetWidth;
- var left = Math.round(ratio * w);
- coord.x = left;
- coord.y = this.valueThumb.offsetTop;
- }
- }
- return coord;
- };
- goog.ui.SliderBase.prototype.animatedSetValue = function(v) {
-
- v = goog.math.clamp(v, this.getMinimum(), this.getMaximum());
- if (this.isAnimating_) {
- this.currentAnimation_.stop(true);
- this.currentAnimation_.dispose();
- }
- var animations = new goog.fx.AnimationParallelQueue();
- var end;
- var thumb = this.getClosestThumb_(v);
- var previousValue = this.getValue();
- var previousExtent = this.getExtent();
- var previousThumbValue = this.getThumbPosition_(thumb);
- var previousCoord = this.getThumbCoordinateForValue(previousThumbValue);
- var stepSize = this.getStep();
-
-
- if (Math.abs(v - previousThumbValue) < stepSize) {
- var delta = v > previousThumbValue ? stepSize : -stepSize;
- v = previousThumbValue + delta;
-
- v = goog.math.clamp(v, this.getMinimum(), this.getMaximum());
- }
- this.setThumbPosition_(thumb, v);
- var coord = this.getThumbCoordinateForValue(this.getThumbPosition_(thumb));
- if (this.orientation_ == goog.ui.SliderBase.Orientation.VERTICAL) {
- end = [this.getOffsetStart_(thumb), coord.y];
- } else {
- end = [coord.x, thumb.offsetTop];
- }
- var slide = new goog.fx.dom.Slide(
- thumb, [previousCoord.x, previousCoord.y], end,
- goog.ui.SliderBase.ANIMATION_INTERVAL_);
- slide.enableRightPositioningForRtl(this.flipForRtl_);
- animations.add(slide);
- if (this.rangeHighlight) {
- this.addRangeHighlightAnimations_(
- thumb, previousValue, previousExtent, coord, animations);
- }
-
- if (this.additionalAnimations_) {
- var additionalAnimations = this.additionalAnimations_.createAnimations(
- previousValue, v, goog.ui.SliderBase.ANIMATION_INTERVAL_);
- goog.array.forEach(additionalAnimations, function(animation) {
- animations.add(animation);
- });
- }
- this.currentAnimation_ = animations;
- this.getHandler().listen(
- animations, goog.fx.Transition.EventType.END, this.endAnimation_);
- this.isAnimating_ = true;
- animations.play(false);
- };
- goog.ui.SliderBase.prototype.isAnimating = function() {
- return this.isAnimating_;
- };
- goog.ui.SliderBase.prototype.setAdditionalAnimations = function(factory) {
- this.additionalAnimations_ = factory;
- };
- goog.ui.SliderBase.prototype.addRangeHighlightAnimations_ = function(
- thumb, previousValue, previousExtent, newCoord, animations) {
- var previousMinCoord = this.getThumbCoordinateForValue(previousValue);
- var previousMaxCoord =
- this.getThumbCoordinateForValue(previousValue + previousExtent);
- var minCoord = previousMinCoord;
- var maxCoord = previousMaxCoord;
- if (thumb == this.valueThumb) {
- minCoord = newCoord;
- } else {
- maxCoord = newCoord;
- }
- if (this.orientation_ == goog.ui.SliderBase.Orientation.VERTICAL) {
- var previousHighlightPositioning = this.calculateRangeHighlightPositioning_(
- previousMaxCoord.y, previousMinCoord.y, this.valueThumb.offsetHeight);
- var highlightPositioning = this.calculateRangeHighlightPositioning_(
- maxCoord.y, minCoord.y, this.valueThumb.offsetHeight);
- var slide = new goog.fx.dom.Slide(
- this.rangeHighlight,
- [
- this.getOffsetStart_(this.rangeHighlight),
- previousHighlightPositioning.offset
- ],
- [
- this.getOffsetStart_(this.rangeHighlight), highlightPositioning.offset
- ],
- goog.ui.SliderBase.ANIMATION_INTERVAL_);
- var resizeHeight = new goog.fx.dom.ResizeHeight(
- this.rangeHighlight, previousHighlightPositioning.size,
- highlightPositioning.size, goog.ui.SliderBase.ANIMATION_INTERVAL_);
- slide.enableRightPositioningForRtl(this.flipForRtl_);
- resizeHeight.enableRightPositioningForRtl(this.flipForRtl_);
- animations.add(slide);
- animations.add(resizeHeight);
- } else {
- var previousHighlightPositioning = this.calculateRangeHighlightPositioning_(
- previousMinCoord.x, previousMaxCoord.x, this.valueThumb.offsetWidth);
- var highlightPositioning = this.calculateRangeHighlightPositioning_(
- minCoord.x, maxCoord.x, this.valueThumb.offsetWidth);
- var slide = new goog.fx.dom.Slide(
- this.rangeHighlight,
- [previousHighlightPositioning.offset, this.rangeHighlight.offsetTop],
- [highlightPositioning.offset, this.rangeHighlight.offsetTop],
- goog.ui.SliderBase.ANIMATION_INTERVAL_);
- var resizeWidth = new goog.fx.dom.ResizeWidth(
- this.rangeHighlight, previousHighlightPositioning.size,
- highlightPositioning.size, goog.ui.SliderBase.ANIMATION_INTERVAL_);
- slide.enableRightPositioningForRtl(this.flipForRtl_);
- resizeWidth.enableRightPositioningForRtl(this.flipForRtl_);
- animations.add(slide);
- animations.add(resizeWidth);
- }
- };
- goog.ui.SliderBase.prototype.endAnimation_ = function(e) {
- this.isAnimating_ = false;
- this.dispatchEvent(goog.ui.SliderBase.EventType.ANIMATION_END);
- };
- goog.ui.SliderBase.prototype.setOrientation = function(orient) {
- if (this.orientation_ != orient) {
- var oldCss = this.getCssClass(this.orientation_);
- var newCss = this.getCssClass(orient);
- this.orientation_ = orient;
-
- if (this.getElement()) {
- goog.dom.classlist.swap(
- goog.asserts.assert(this.getElement()), oldCss, newCss);
-
- var pos = (this.flipForRtl_ && this.isRightToLeft()) ? 'right' : 'left';
- this.valueThumb.style[pos] = this.valueThumb.style.top = '';
- this.extentThumb.style[pos] = this.extentThumb.style.top = '';
- if (this.rangeHighlight) {
- this.rangeHighlight.style[pos] = this.rangeHighlight.style.top = '';
- this.rangeHighlight.style.width = this.rangeHighlight.style.height = '';
- }
- this.updateUi_();
- }
- }
- };
- goog.ui.SliderBase.prototype.getOrientation = function() {
- return this.orientation_;
- };
- goog.ui.SliderBase.prototype.disposeInternal = function() {
- goog.ui.SliderBase.superClass_.disposeInternal.call(this);
- if (this.incTimer_) {
- this.incTimer_.dispose();
- }
- delete this.incTimer_;
- if (this.currentAnimation_) {
- this.currentAnimation_.dispose();
- }
- delete this.currentAnimation_;
- delete this.valueThumb;
- delete this.extentThumb;
- if (this.rangeHighlight) {
- delete this.rangeHighlight;
- }
- this.rangeModel.dispose();
- delete this.rangeModel;
- if (this.keyHandler_) {
- this.keyHandler_.dispose();
- delete this.keyHandler_;
- }
- if (this.mouseWheelHandler_) {
- this.mouseWheelHandler_.dispose();
- delete this.mouseWheelHandler_;
- }
- if (this.valueDragger_) {
- this.valueDragger_.dispose();
- delete this.valueDragger_;
- }
- if (this.extentDragger_) {
- this.extentDragger_.dispose();
- delete this.extentDragger_;
- }
- };
- goog.ui.SliderBase.prototype.getBlockIncrement = function() {
- return this.blockIncrement_;
- };
- goog.ui.SliderBase.prototype.setBlockIncrement = function(value) {
- this.blockIncrement_ = value;
- };
- goog.ui.SliderBase.prototype.setMinExtent = function(value) {
- this.minExtent_ = value;
- };
- goog.ui.SliderBase.prototype.unitIncrement_ = 1;
- goog.ui.SliderBase.prototype.getUnitIncrement = function() {
- return this.unitIncrement_;
- };
- goog.ui.SliderBase.prototype.setUnitIncrement = function(value) {
- this.unitIncrement_ = value;
- };
- goog.ui.SliderBase.prototype.getStep = function() {
- return this.rangeModel.getStep();
- };
- goog.ui.SliderBase.prototype.setStep = function(step) {
- this.rangeModel.setStep(step);
- };
- goog.ui.SliderBase.prototype.getMoveToPointEnabled = function() {
- return this.moveToPointEnabled_;
- };
- goog.ui.SliderBase.prototype.setMoveToPointEnabled = function(val) {
- this.moveToPointEnabled_ = val;
- };
- goog.ui.SliderBase.prototype.getValue = function() {
- return this.rangeModel.getValue();
- };
- goog.ui.SliderBase.prototype.setValue = function(value) {
-
- this.setThumbPosition_(this.valueThumb, value);
- };
- goog.ui.SliderBase.prototype.getExtent = function() {
- return this.rangeModel.getExtent();
- };
- goog.ui.SliderBase.prototype.setExtent = function(extent) {
-
- this.setThumbPosition_(
- this.extentThumb, (this.rangeModel.getValue() + extent));
- };
- goog.ui.SliderBase.prototype.setVisible = function(visible) {
- goog.style.setElementShown(this.getElement(), visible);
- if (visible) {
- this.updateUi_();
- }
- };
- goog.ui.SliderBase.prototype.setAriaRoles = function() {
- var el = this.getElement();
- goog.asserts.assert(
- el, 'The DOM element for the slider base cannot be null.');
- goog.a11y.aria.setRole(el, goog.a11y.aria.Role.SLIDER);
- this.updateAriaStates();
- };
- goog.ui.SliderBase.prototype.updateAriaStates = function() {
- var element = this.getElement();
- if (element) {
- goog.a11y.aria.setState(
- element, goog.a11y.aria.State.VALUEMIN, this.getMinimum());
- goog.a11y.aria.setState(
- element, goog.a11y.aria.State.VALUEMAX, this.getMaximum());
- goog.a11y.aria.setState(
- element, goog.a11y.aria.State.VALUENOW, this.getValue());
-
- goog.a11y.aria.setState(
- element, goog.a11y.aria.State.VALUETEXT, this.getTextValue() || '');
- }
- };
- goog.ui.SliderBase.prototype.setHandleMouseWheel = function(enable) {
- if (this.isInDocument() && enable != this.isHandleMouseWheel()) {
- this.enableMouseWheelHandling_(enable);
- }
- this.isHandleMouseWheel_ = enable;
- };
- goog.ui.SliderBase.prototype.isHandleMouseWheel = function() {
- return this.isHandleMouseWheel_;
- };
- goog.ui.SliderBase.prototype.enableMouseWheelHandling_ = function(enable) {
- if (enable) {
- if (!this.mouseWheelHandler_) {
- this.mouseWheelHandler_ =
- new goog.events.MouseWheelHandler(this.getElement());
- }
- this.getHandler().listen(
- this.mouseWheelHandler_,
- goog.events.MouseWheelHandler.EventType.MOUSEWHEEL,
- this.handleMouseWheel_);
- } else {
- this.getHandler().unlisten(
- this.mouseWheelHandler_,
- goog.events.MouseWheelHandler.EventType.MOUSEWHEEL,
- this.handleMouseWheel_);
- }
- };
- goog.ui.SliderBase.prototype.setEnabled = function(enable) {
- if (this.enabled_ == enable) {
- return;
- }
- var eventType = enable ? goog.ui.Component.EventType.ENABLE :
- goog.ui.Component.EventType.DISABLE;
- if (this.dispatchEvent(eventType)) {
- this.enabled_ = enable;
- this.enableEventHandlers_(enable);
- if (!enable) {
-
-
-
- this.stopBlockIncrementing_();
- }
- goog.dom.classlist.enable(
- goog.asserts.assert(this.getElement()),
- goog.ui.SliderBase.DISABLED_CSS_CLASS_, !enable);
- }
- };
- goog.ui.SliderBase.prototype.isEnabled = function() {
- return this.enabled_;
- };
- goog.ui.SliderBase.prototype.getOffsetStart_ = function(element) {
- return this.flipForRtl_ ? goog.style.bidi.getOffsetStart(element) :
- element.offsetLeft;
- };
- goog.ui.SliderBase.prototype.getTextValue = function() {
- return this.labelFn_(this.getValue());
- };
- goog.ui.SliderBase.AnimationFactory = function() {};
- goog.ui.SliderBase.AnimationFactory.prototype.createAnimations;
|