rwt.widgets.Scale.js Maven / Gradle / Ivy
/*******************************************************************************
* Copyright (c) 2008, 2015 Innoopract Informationssysteme GmbH and others.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* http://www.eclipse.org/legal/epl-v10.html
*
* Contributors:
* Innoopract Informationssysteme GmbH - initial API and implementation
* EclipseSource - ongoing development
******************************************************************************/
/**
* This class provides the client-side counterpart for
* rwt.widgets.Scale.
*/
rwt.qx.Class.define( "rwt.widgets.Scale", {
extend : rwt.widgets.base.Parent,
construct : function( isHorizontal ) {
this.base( arguments );
this._horizontal = isHorizontal;
this._readyToSendChanges = true;
this._selection = 0;
this._minimum = 0;
this._maximum = 100;
this._increment = 1;
this._pageIncrement = 10;
this._pxStep = 1.34;
this._line = new rwt.widgets.base.Image();
this._line.addState( this._horizontal ? "rwt_HORIZONTAL" : "rwt_VERTICAL" );
this._line.setAppearance( "scale-line" );
this._line.setResizeToInner( true );
this._line.addEventListener( "mousedown", this._onLineMouseDown, this );
this.add( this._line );
this._thumb = new rwt.widgets.base.BasicButton( "push", true );
this._thumb.addState( this._horizontal ? "rwt_HORIZONTAL" : "rwt_VERTICAL" );
this._thumb.setAppearance( "scale-thumb" );
this._thumb.addEventListener( "mousedown", this._onThumbMouseDown, this );
this._thumb.addEventListener( "mousemove", this._onThumbMouseMove, this );
this._thumb.addEventListener( "mouseup", this._onThumbMouseUp, this );
this.add( this._thumb );
this._thumbOffset = 0;
if( this._horizontal ) {
this.addEventListener( "changeWidth", this._onChangeWidth, this );
} else {
this.addEventListener( "changeHeight", this._onChangeHeight, this );
}
this.addEventListener( "contextmenu", this._onContextMenu, this );
this.addEventListener( "keypress", this._onKeyPress, this );
this.addEventListener( "mousewheel", this._onMouseWheel, this );
this.setAppearance( "scale" );
},
destruct : function() {
this._line.removeEventListener( "mousedown", this._onLineMouseDown, this );
this._thumb.removeEventListener( "mousedown", this._onThumbMouseDown, this );
this._thumb.removeEventListener( "mousemove", this._onThumbMouseMove, this );
this._thumb.removeEventListener( "mouseup", this._onThumbMouseUp, this );
if( this._horizontal ) {
this.removeEventListener( "changeWidth", this._onChangeWidth, this );
} else {
this.removeEventListener( "changeHeight", this._onChangeHeight, this );
}
this.removeEventListener( "contextmenu", this._onContextMenu, this );
this.removeEventListener( "keypress", this._onKeyPress, this );
this.removeEventListener( "mousewheel", this._onMouseWheel, this );
this._disposeObjects( "_line", "_thumb" );
this._thumb = null;
},
statics : {
PADDING : 8,
SCALE_LINE_OFFSET : 9,
THUMB_OFFSET : 9,
HALF_THUMB : 5,
_isNoModifierPressed : function( evt ) {
return !evt.isCtrlPressed()
&& !evt.isShiftPressed()
&& !evt.isAltPressed()
&& !evt.isMetaPressed();
}
},
members : {
_onChangeWidth : function() {
this._line.setWidth( this.getWidth() - 2 * rwt.widgets.Scale.PADDING );
this._updateStep();
this._updateThumbPosition();
},
_onChangeHeight : function() {
this._line.setHeight( this.getHeight() - 2 * rwt.widgets.Scale.PADDING );
this._updateStep();
this._updateThumbPosition();
},
_onContextMenu : function( evt ) {
var menu = this.getContextMenu();
if( menu != null ) {
menu.setLocation( evt.getPageX(), evt.getPageY() );
menu.setOpener( this );
menu.show();
evt.stopPropagation();
}
},
_onKeyPress : function( evt ) {
var keyIdentifier = evt.getKeyIdentifier();
var sel = null;
if( rwt.widgets.Scale._isNoModifierPressed( evt ) ) {
switch( keyIdentifier ) {
case "Left":
sel = this._selection - this._increment;
evt.preventDefault();
evt.stopPropagation();
break;
case "Down":
if( this._horizontal ) {
sel = this._selection - this._increment;
} else {
sel = this._selection + this._increment;
}
evt.preventDefault();
evt.stopPropagation();
break;
case "Right":
sel = this._selection + this._increment;
evt.preventDefault();
evt.stopPropagation();
break;
case "Up":
if( this._horizontal ) {
sel = this._selection + this._increment;
} else {
sel = this._selection - this._increment;
}
evt.preventDefault();
evt.stopPropagation();
break;
case "Home":
sel = this._minimum;
evt.preventDefault();
evt.stopPropagation();
break;
case "End":
sel = this._maximum;
evt.preventDefault();
evt.stopPropagation();
break;
case "PageDown":
if( this._horizontal ) {
sel = this._selection - this._pageIncrement;
} else {
sel = this._selection + this._pageIncrement;
}
evt.preventDefault();
evt.stopPropagation();
break;
case "PageUp":
if( this._horizontal ) {
sel = this._selection + this._pageIncrement;
} else {
sel = this._selection - this._pageIncrement;
}
evt.preventDefault();
evt.stopPropagation();
break;
}
if( sel != null ) {
this.setSelection( sel );
this._scheduleSendChanges();
}
}
},
_onMouseWheel : function( evt ) {
if( this.getFocused() ) {
evt.preventDefault();
evt.stopPropagation();
var change = Math.round( evt.getWheelDelta() );
this.setSelection( this._selection - change );
this._scheduleSendChanges();
}
},
_onLineMouseDown : function( event ) {
if( event.isLeftButtonPressed() ) {
var mousePos = this._getMouseOffset( event );
var pxSel = this._getThumbPosition() + rwt.widgets.Scale.HALF_THUMB;
if( mousePos > pxSel ) {
this.setSelection( this._selection + this._pageIncrement );
} else {
this.setSelection( this._selection - this._pageIncrement );
}
this._scheduleSendChanges();
}
},
_onThumbMouseDown : function( event ) {
if( event.isLeftButtonPressed() ) {
var mousePos = this._getMouseOffset( event );
this._thumbOffset = mousePos - this._getThumbPosition();
this._thumb.setCapture(true);
}
},
_onThumbMouseMove : function( event ) {
if( this._thumb.getCapture() ) {
var mousePos = this._getMouseOffset( event );
var sel = this._getSelectionFromThumbPosition( mousePos - this._thumbOffset );
if( this._selection != sel ) {
this.setSelection( sel );
this._scheduleSendChanges();
}
}
},
_onThumbMouseUp : function() {
this._thumb.setCapture( false );
},
_getMouseOffset : function( mouseEvent ) {
var location = rwt.html.Location;
if( this._horizontal ) {
var relativeLeft = mouseEvent.getPageX() - location.getLeft( this.getElement() );
if( this.getDirection() === "rtl" ) {
return this.getWidth() - relativeLeft;
} else {
return relativeLeft;
}
} else {
return mouseEvent.getPageY() - location.getTop( this.getElement() );
}
},
_updateStep : function() {
var padding = rwt.widgets.Scale.PADDING + rwt.widgets.Scale.HALF_THUMB;
if( this._horizontal ) {
this._pxStep = ( this.getWidth() - 2 * padding ) / ( this._maximum - this._minimum );
} else {
this._pxStep = ( this.getHeight() - 2 * padding ) / ( this._maximum - this._minimum );
}
},
_updateThumbPosition : function() {
var pos = rwt.widgets.Scale.PADDING + this._pxStep * ( this._selection - this._minimum );
this._setThumbPosition( Math.round( pos ) );
this.dispatchSimpleEvent( "updateToolTip", this );
},
_getThumbPosition : function() {
if( this._horizontal ) {
if( this.getDirection() === "rtl" ) {
return this._thumb.getRight();
} else {
return this._thumb.getLeft();
}
} else {
return this._thumb.getTop();
}
},
_setThumbPosition : function( value ) {
if( this._horizontal ) {
if( this.getDirection() === "rtl" ) {
this._thumb.setLeft( null );
this._thumb.setRight( value );
} else {
this._thumb.setLeft( value );
this._thumb.setRight( null );
}
} else {
this._thumb.setTop( value );
}
},
_getSelectionFromThumbPosition : function( position ) {
var sel = ( position - rwt.widgets.Scale.PADDING ) / this._pxStep + this._minimum;
return this._normalizeSelection( Math.round( sel ) );
},
_normalizeSelection : function( value ) {
var result = value;
if( value < this._minimum ) {
result = this._minimum;
}
if( value > this._maximum ) {
result = this._maximum;
}
return result;
},
_scheduleSendChanges : function() {
if( this._readyToSendChanges ) {
this._readyToSendChanges = false;
rwt.client.Timer.once( this._sendChanges, this, 500 );
}
},
_sendChanges : function() {
if( !rwt.remote.EventUtil.getSuspended() ) {
var remoteObject = rwt.remote.Connection.getInstance().getRemoteObject( this );
remoteObject.set( "selection", this._selection );
rwt.remote.EventUtil.notifySelected( this );
this._readyToSendChanges = true;
}
},
setSelection : function( value ) {
this._selection = this._normalizeSelection( value );
this._updateThumbPosition();
this.dispatchSimpleEvent( "selectionChanged" );
},
setMinimum : function( value ) {
this._minimum = value;
this._updateStep();
this._updateThumbPosition();
this.dispatchSimpleEvent( "minimumChanged" );
},
setMaximum : function( value ) {
this._maximum = value;
this._updateStep();
this._updateThumbPosition();
this.dispatchSimpleEvent( "maximumChanged" );
},
setIncrement : function( value ) {
this._increment = value;
},
setPageIncrement : function( value ) {
this._pageIncrement = value;
},
getToolTipTargetBounds : function() {
var xOffset = this._horizontal && this.getDirection() === "rtl"
? this.getWidth() - this._thumb.getRight() - this._thumb.getWidth()
: this._thumb.getLeft();
return {
"left" : this._cachedBorderLeft + ( xOffset || 0 ),
"top" : this._cachedBorderLeft + ( this._thumb.getTop() || 0 ),
"width" : this._thumb.getBoxWidth(),
"height" : this._thumb.getBoxHeight()
};
},
// overwritten:
_visualizeFocus : function() {
this.base( arguments );
this._thumb.addState( "focused" );
},
// overwritten:
_visualizeBlur : function() {
this.base( arguments );
this._thumb.removeState( "focused" );
},
_layoutX : function() {
this._updateThumbPosition();
}
}
} );
© 2015 - 2025 Weber Informatics LLC | Privacy Policy