dat.gui/elements/number-controller.js

/*

[ ] arrow keys

[ ] only validate input box on blur, not on keydown
[ ] enter key blurs

[ ] min( ) max( ) step( ) commands of yore

[x] sig figs
[x] step
[x] dy to drag friction
[x] negative slider
[x] hover behavior

*/

Polymer('number-controller', {

    min: 0,
    max: 100,
    step: null,
    decimals: 3,
    value: 50,

    ready: function() {

        var _this = this;

        window.addEventListener( 'keydown', function( e ) {
            if ( e.keyCode == 18 ) _this._alt = true;
        }, false );

        window.addEventListener( 'keyup', function( e ) {
            if ( e.keyCode == 18 ) _this._alt = false;
        }, false );

        this.super();

    },


    // Observers
    // ------------------------------- 

    valueChanged: function() {
        this.value = Math.max( this.value, this.min );
        this.value = Math.min( this.value, this.max );
        if ( this.step !== null ) {
            this.value = Math.round( this.value / this.step ) * this.step;
        }
        this.super();
    },

    minChanged: function() {
        this.value = Math.max( this.value, this.min );
        this.update();
    },

    maxChanged: function() {
        this.value = Math.min( this.value, this.max );
        this.update();
    },

    update: function() {
        
        var ratio = this.map( this.value, this.min, this.max, 0, 1 );

        if ( this.min < 0 && this.max > 0 ) {

            this.$.container.classList.add( 'straddle-zero' );

            var zero = this.map( 0, this.min, this.max, 0, 1 );

            if ( this.value >= 0 ) {

                this.$.fill.style.left = zero * 100 + '%';
                this.$.fill.style.width = (ratio - zero) * 100 + '%';
                this.$.fill.style.right = '';

            } else { 

                this.$.fill.style.left = '';
                this.$.fill.style.width = (zero - ratio) * 100 + '%';
                this.$.fill.style.right = ( 1 - zero ) * 100 + '%';

            }

        } else { 

            this.$.container.classList.remove( 'straddle-zero' );

            if ( this.max > 0 ) {

                this.$.fill.style.left = 0;
                this.$.fill.style.width = ratio * 100 + '%';
                this.$.fill.style.right = '';

            } else { 

                this.$.fill.style.left = '';
                this.$.fill.style.width = ( 1 - ratio ) * 100 + '%';
                this.$.fill.style.right = 0;

            }

        }

        this.$.knob.style.left = ratio * 100 + '%';

        this.$.container.classList.toggle( 'positive', this.value >= 0 );
        this.$.container.classList.toggle( 'negative', this.value < 0 );

        this.super();

    },


    // Events
    // ------------------------------- 
    
    click: function( e ) {
        this.$.input.select();
    },

    down: function( e ) {
        e.preventDefault();
        this._rect = this.$.track.getBoundingClientRect();
        if ( !this._alt ) this.value = this.valueFromX( e.x );
    },

    up: function( e ) {
        // this.$.container.classList.add( 'transition' );
    },

    trackstart: function( e ) {
        // this.$.container.classList.remove( 'transition' );
        this._dragFriction = 1;
    },

    trackx: function( e ) {

        if ( this.step == null ) {

            var dv = this.valueFromDX( e.ddx );
            if ( this._alt ) dv /= 10;
            this.value += dv * this._dragFriction;

        } else {
            
            this.value = this.valueFromX( e.pageX );

        }
    },

    tracky: function( e ) {
        this._dragFriction = Math.max( 0.01, Math.min( 1, this.map( e.dy, 50, 300, 1, 0.1 ) ) );
    },

    blur: function( e ) {
        this.value = parseFloat( this.$.input.value );
    },

    keydown: function( e ) {
        if ( e.keyCode == 13 ) {
            this.$.input.blur();
        }
    },


    // Filters
    // ------------------------------- 

    truncate: function( v ) {

        if ( v % 1 !== 0 && this.decimals !== null ) {

            var s = v.toString();
            var numDecimals = s.substring( s.indexOf( '.' ) ).length;

            return v.toFixed( Math.min( numDecimals, this.decimals ) );

        } else { 
            return v;
        }

    },
    

    // Helpers
    // ------------------------------- 
    
    valueFromX: function( x ) {
        return this.map( x, this._rect.left, this._rect.right, this.min, this.max );
    },

    valueFromDX: function( dx ) {
        return this.map( dx, 0, this._rect.width, 0, this.max - this.min );
    }

});