2313

Committed 5 Feb 2015 - 11:04 coverage increased (+0.009%) to 82.482%

Build # 2313

Build Type

Pull #7953

travis-ci

Committed by

gabrielschulhof

Commit Message

Textinput: Update comment regarding deprecated style options

Pull Request Pull Request #7953: Textinput: Implement classes option

Run Details

3503 of 4247 relevant lines covered (82.48%)

924.16 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

93.51

/js/widgets/forms/slider.js

//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Slider form widget
//>>label: Slider
//>>group: Forms
//>>css.structure: ../css/structure/jquery.mobile.forms.slider.css
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css

define( [ "jquery",
        "../../core",
        "../../widget",
        "./textinput",
        "../../vmouse",
        "./reset" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {

$.widget( "mobile.slider", $.extend( {
        initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')",

        widgetEventPrefix: "slide",

        options: {
                theme: null,
                trackTheme: null,
                corners: true,
                mini: false,
                highlight: false
        },

        _create: function() {

                // TODO: Each of these should have comments explain what they're for
                var self = this,
                        control = this.element,
                        trackTheme = this.options.trackTheme || $.mobile.getAttribute( control[ 0 ], "theme" ),
                        trackThemeClass = trackTheme ? " ui-bar-" + trackTheme : " ui-bar-inherit",
                        cornerClass = ( this.options.corners || control.jqmData( "corners" ) ) ? " ui-corner-all" : "",
                        miniClass = ( this.options.mini || control.jqmData( "mini" ) ) ? " ui-mini" : "",
                        cType = control[ 0 ].nodeName.toLowerCase(),
                        isToggleSwitch = ( cType === "select" ),
                        isRangeslider = control.parent().is( ":jqmData(role='rangeslider')" ),
                        selectClass = ( isToggleSwitch ) ? "ui-slider-switch" : "",
                        controlID = control.attr( "id" ),
                        $label = $( "[for='" + controlID + "']" ),
                        labelID = $label.attr( "id" ) || controlID + "-label",
                        min = !isToggleSwitch ? parseFloat( control.attr( "min" ) ) : 0,
                        max =  !isToggleSwitch ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length-1,
                        step = window.parseFloat( control.attr( "step" ) || 1 ),
                        domHandle = document.createElement( "a" ),
                        handle = $( domHandle ),
                        domSlider = document.createElement( "div" ),
                        slider = $( domSlider ),
                        valuebg = this.options.highlight && !isToggleSwitch ? (function() {
                                var bg = document.createElement( "div" );
                                bg.className = "ui-slider-bg " + $.mobile.activeBtnClass;
                                return $( bg ).prependTo( slider );
                        })() : false,
                        options,
                        wrapper,
                        j, length,
                        i, optionsCount, origTabIndex,
                        side, activeClass, sliderImg;

                $label.attr( "id", labelID );
                this.isToggleSwitch = isToggleSwitch;

                domHandle.setAttribute( "href", "#" );
                domSlider.setAttribute( "role", "application" );
                domSlider.className = [ this.isToggleSwitch ? "ui-slider ui-slider-track ui-shadow-inset " : "ui-slider-track ui-shadow-inset ", selectClass, trackThemeClass, cornerClass, miniClass ].join( "" );
                domHandle.className = "ui-slider-handle";
                domSlider.appendChild( domHandle );

                handle.attr({
                        "role": "slider",
                        "aria-valuemin": min,
                        "aria-valuemax": max,
                        "aria-valuenow": this._value(),
                        "aria-valuetext": this._value(),
                        "title": this._value(),
                        "aria-labelledby": labelID
                });

                $.extend( this, {
                        slider: slider,
                        handle: handle,
                        control: control,
                        type: cType,
                        step: step,
                        max: max,
                        min: min,
                        valuebg: valuebg,
                        isRangeslider: isRangeslider,
                        dragging: false,
                        beforeStart: null,
                        userModified: false,
                        mouseMoved: false
                });

                if ( isToggleSwitch ) {
                        // TODO: restore original tabindex (if any) in a destroy method
                        origTabIndex = control.attr( "tabindex" );
                        if ( origTabIndex ) {
                                handle.attr( "tabindex", origTabIndex );
                        }
                        control.attr( "tabindex", "-1" ).focus(function() {
                                $( this ).blur();
                                handle.focus();
                        });

                        wrapper = document.createElement( "div" );
                        wrapper.className = "ui-slider-inneroffset";

                        for ( j = 0, length = domSlider.childNodes.length; j < length; j++ ) {
                                wrapper.appendChild( domSlider.childNodes[j] );
                        }

                        domSlider.appendChild( wrapper );

                        // slider.wrapInner( "<div class='ui-slider-inneroffset'></div>" );

                        // make the handle move with a smooth transition
                        handle.addClass( "ui-slider-handle-snapping" );

                        options = control.find( "option" );

                        for ( i = 0, optionsCount = options.length; i < optionsCount; i++ ) {
                                side = !i ? "b" : "a";
                                activeClass = !i ? "" : " " + $.mobile.activeBtnClass;
                                sliderImg = document.createElement( "span" );

                                sliderImg.className = [ "ui-slider-label ui-slider-label-", side, activeClass ].join( "" );
                                sliderImg.setAttribute( "role", "img" );
                                sliderImg.appendChild( document.createTextNode( options[i].innerHTML ) );
                                $( sliderImg ).prependTo( slider );
                        }

                        self._labels = $( ".ui-slider-label", slider );

                }

                // monitor the input for updated values
                control.addClass( isToggleSwitch ? "ui-slider-switch" : "ui-slider-input" );

                this._on( control, {
                        "change": "_controlChange",
                        "keyup": "_controlKeyup",
                        "blur": "_controlBlur",
                        "vmouseup": "_controlVMouseUp"
                });

                slider.bind( "vmousedown", $.proxy( this._sliderVMouseDown, this ) )
                        .bind( "vclick", false );

                // We have to instantiate a new function object for the unbind to work properly
                // since the method itself is defined in the prototype (causing it to unbind everything)
                this._on( document, { "vmousemove": "_preventDocumentDrag" });
                this._on( slider.add( document ), { "vmouseup": "_sliderVMouseUp" });

                slider.insertAfter( control );

                // wrap in a div for styling purposes
                if ( !isToggleSwitch && !isRangeslider ) {
                        wrapper = "<div class='ui-slider" +
                                ( this.options.mini ? " ui-mini" : "" ) + "'></div>";

                        control.add( slider ).wrapAll( wrapper );
                }

                // bind the handle event callbacks and set the context to the widget instance
                this._on( this.handle, {
                        "vmousedown": "_handleVMouseDown",
                        "keydown": "_handleKeydown",
                        "keyup": "_handleKeyup"
                });

                this.handle.bind( "vclick", false );

                this._handleFormReset();

                this.refresh( undefined, undefined, true );
        },

        _setOptions: function( options ) {
                if ( options.theme !== undefined ) {
                        this._setTheme( options.theme );
                }

                if ( options.trackTheme !== undefined ) {
                        this._setTrackTheme( options.trackTheme );
                }

                if ( options.corners !== undefined ) {
                        this._setCorners( options.corners );
                }

                if ( options.mini !== undefined ) {
                        this._setMini( options.mini );
                }

                if ( options.highlight !== undefined ) {
                        this._setHighlight( options.highlight );
                }

                if ( options.disabled !== undefined ) {
                        this._setDisabled( options.disabled );
                }
                this._super( options );
        },

        _controlChange: function( event ) {
                // if the user dragged the handle, the "change" event was triggered from inside refresh(); don't call refresh() again
                if ( this._trigger( "controlchange", event ) === false ) {
                        return false;
                }
                if ( !this.mouseMoved ) {
                        this.refresh( this._value(), true );
                }
        },

        _controlKeyup: function(/* event */) { // necessary?
                this.refresh( this._value(), true, true );
        },

        _controlBlur: function(/* event */) {
                this.refresh( this._value(), true );
        },

        // it appears the clicking the up and down buttons in chrome on
        // range/number inputs doesn't trigger a change until the field is
        // blurred. Here we check thif the value has changed and refresh
        _controlVMouseUp: function(/* event */) {
                this._checkedRefresh();
        },

        // NOTE force focus on handle
        _handleVMouseDown: function(/* event */) {
                this.handle.focus();
        },

        _handleKeydown: function( event ) {
                var index = this._value();
                if ( this.options.disabled ) {
                        return;
                }

                // In all cases prevent the default and mark the handle as active
                switch ( event.keyCode ) {
                        case $.mobile.keyCode.HOME:
                        case $.mobile.keyCode.END:
                        case $.mobile.keyCode.PAGE_UP:
                        case $.mobile.keyCode.PAGE_DOWN:
                        case $.mobile.keyCode.UP:
                        case $.mobile.keyCode.RIGHT:
                        case $.mobile.keyCode.DOWN:
                        case $.mobile.keyCode.LEFT:
                                event.preventDefault();

                                if ( !this._keySliding ) {
                                        this._keySliding = true;
                                        this.handle.addClass( "ui-state-active" ); /* TODO: We don't use this class for styling. Do we need to add it? */
                                }

                                break;
                }

                // move the slider according to the keypress
                switch ( event.keyCode ) {
                        case $.mobile.keyCode.HOME:
                                this.refresh( this.min );
                                break;
                        case $.mobile.keyCode.END:
                                this.refresh( this.max );
                                break;
                        case $.mobile.keyCode.PAGE_UP:
                        case $.mobile.keyCode.UP:
                        case $.mobile.keyCode.RIGHT:
                                this.refresh( index + this.step );
                                break;
                        case $.mobile.keyCode.PAGE_DOWN:
                        case $.mobile.keyCode.DOWN:
                        case $.mobile.keyCode.LEFT:
                                this.refresh( index - this.step );
                                break;
                }
        }, // remove active mark

        _handleKeyup: function(/* event */) {
                if ( this._keySliding ) {
                        this._keySliding = false;
                        this.handle.removeClass( "ui-state-active" ); /* See comment above. */
                }
        },

        _sliderVMouseDown: function( event ) {
                // NOTE: we don't do this in refresh because we still want to
                //       support programmatic alteration of disabled inputs
                if ( this.options.disabled || !( event.which === 1 || event.which === 0 || event.which === undefined ) ) {
                        return false;
                }
                if ( this._trigger( "beforestart", event ) === false ) {
                        return false;
                }
                this.dragging = true;
                this.userModified = false;
                this.mouseMoved = false;

                if ( this.isToggleSwitch ) {
                        this.beforeStart = this.element[0].selectedIndex;
                }

                this.refresh( event );
                this._trigger( "start" );
                return false;
        },

        _sliderVMouseUp: function() {
                if ( this.dragging ) {
                        this.dragging = false;

                        if ( this.isToggleSwitch ) {
                                // make the handle move with a smooth transition
                                this.handle.addClass( "ui-slider-handle-snapping" );

                                if ( this.mouseMoved ) {
                                        // this is a drag, change the value only if user dragged enough
                                        if ( this.userModified ) {
                                                this.refresh( this.beforeStart === 0 ? 1 : 0 );
                                        } else {
                                                this.refresh( this.beforeStart );
                                        }
                                } else {
                                        // this is just a click, change the value
                                        this.refresh( this.beforeStart === 0 ? 1 : 0 );
                                }
                        }

                        this.mouseMoved = false;
                        this._trigger( "stop" );
                        return false;
                }
        },

        _preventDocumentDrag: function( event ) {
                        // NOTE: we don't do this in refresh because we still want to
                        //       support programmatic alteration of disabled inputs
                        if ( this._trigger( "drag", event ) === false) {
                                return false;
                        }
                        if ( this.dragging && !this.options.disabled ) {

                                // this.mouseMoved must be updated before refresh() because it will be used in the control "change" event
                                this.mouseMoved = true;

                                if ( this.isToggleSwitch ) {
                                        // make the handle move in sync with the mouse
                                        this.handle.removeClass( "ui-slider-handle-snapping" );
                                }

                                this.refresh( event );

                                // only after refresh() you can calculate this.userModified
                                this.userModified = this.beforeStart !== this.element[0].selectedIndex;
                                return false;
                        }
                },

        _checkedRefresh: function() {
                if ( this.value !== this._value() ) {
                        this.refresh( this._value() );
                }
        },

        _value: function() {
                return  this.isToggleSwitch ? this.element[0].selectedIndex : parseFloat( this.element.val() ) ;
        },

        _reset: function() {
                this.refresh( undefined, false, true );
        },

        refresh: function( val, isfromControl, preventInputUpdate ) {
                // NOTE: we don't return here because we want to support programmatic
                //       alteration of the input value, which should still update the slider

                var self = this,
                        parentTheme = $.mobile.getAttribute( this.element[ 0 ], "theme" ),
                        theme = this.options.theme || parentTheme,
                        themeClass =  theme ? " ui-button-" + theme : "",
                        trackTheme = this.options.trackTheme || parentTheme,
                        trackThemeClass = trackTheme ? " ui-bar-" + trackTheme : " ui-bar-inherit",
                        cornerClass = this.options.corners ? " ui-corner-all" : "",
                        miniClass = this.options.mini ? " ui-mini" : "",
                        left, width, data, tol,
                        pxStep, percent,
                        control, isInput, optionElements, min, max, step,
                        newval, valModStep, alignValue, percentPerStep,
                        handlePercent, aPercent, bPercent,
                        valueChanged;

                self.slider[0].className = [ this.isToggleSwitch ? "ui-slider ui-slider-switch ui-slider-track ui-shadow-inset" : "ui-slider-track ui-shadow-inset", trackThemeClass, cornerClass, miniClass ].join( "" );
                if ( this.options.disabled || this.element.prop( "disabled" ) ) {
                        this.disable();
                }

                // set the stored value for comparison later
                this.value = this._value();
                if ( this.options.highlight && !this.isToggleSwitch && this.slider.find( ".ui-slider-bg" ).length === 0 ) {
                        this.valuebg = (function() {
                                var bg = document.createElement( "div" );
                                bg.className = "ui-slider-bg " + $.mobile.activeBtnClass;
                                return $( bg ).prependTo( self.slider );
                        })();
                }
                this.handle.addClass( "ui-button" + themeClass + " ui-shadow" );

                control = this.element;
                isInput = !this.isToggleSwitch;
                optionElements = isInput ? [] : control.find( "option" );
                min =  isInput ? parseFloat( control.attr( "min" ) ) : 0;
                max = isInput ? parseFloat( control.attr( "max" ) ) : optionElements.length - 1;
                step = ( isInput && parseFloat( control.attr( "step" ) ) > 0 ) ? parseFloat( control.attr( "step" ) ) : 1;

                if ( typeof val === "object" ) {
                        data = val;
                        // a slight tolerance helped get to the ends of the slider
                        tol = 8;

                        left = this.slider.offset().left;
                        width = this.slider.width();
                        pxStep = width/((max-min)/step);
                        if ( !this.dragging ||
                                        data.pageX < left - tol ||
                                        data.pageX > left + width + tol ) {
                                return;
                        }
                        if ( pxStep > 1 ) {
                                percent = ( ( data.pageX - left ) / width ) * 100;
                        } else {
                                percent = Math.round( ( ( data.pageX - left ) / width ) * 100 );
                        }
                } else {
                        if ( val == null ) {
                                val = isInput ? parseFloat( control.val() || 0 ) : control[0].selectedIndex;
                        }
                        percent = ( parseFloat( val ) - min ) / ( max - min ) * 100;
                }

                if ( isNaN( percent ) ) {
                        return;
                }

                newval = ( percent / 100 ) * ( max - min ) + min;

                //from jQuery UI slider, the following source will round to the nearest step
                valModStep = ( newval - min ) % step;
                alignValue = newval - valModStep;

                if ( Math.abs( valModStep ) * 2 >= step ) {
                        alignValue += ( valModStep > 0 ) ? step : ( -step );
                }

                percentPerStep = 100/((max-min)/step);
                // Since JavaScript has problems with large floats, round
                // the final value to 5 digits after the decimal point (see jQueryUI: #4124)
                newval = parseFloat( alignValue.toFixed(5) );

                if ( typeof pxStep === "undefined" ) {
                        pxStep = width / ( (max-min) / step );
                }
                if ( pxStep > 1 && isInput ) {
                        percent = ( newval - min ) * percentPerStep * ( 1 / step );
                }
                if ( percent < 0 ) {
                        percent = 0;
                }

                if ( percent > 100 ) {
                        percent = 100;
                }

                if ( newval < min ) {
                        newval = min;
                }

                if ( newval > max ) {
                        newval = max;
                }

                this.handle.css( "left", percent + "%" );

                this.handle[0].setAttribute( "aria-valuenow", isInput ? newval : optionElements.eq( newval ).attr( "value" ) );

                this.handle[0].setAttribute( "aria-valuetext", isInput ? newval : optionElements.eq( newval ).getEncodedText() );

                this.handle[0].setAttribute( "title", isInput ? newval : optionElements.eq( newval ).getEncodedText() );

                if ( this.valuebg ) {
                        this.valuebg.css( "width", percent + "%" );
                }

                // drag the label widths
                if ( this._labels ) {
                        handlePercent = this.handle.width() / this.slider.width() * 100;
                        aPercent = percent && handlePercent + ( 100 - handlePercent ) * percent / 100;
                        bPercent = percent === 100 ? 0 : Math.min( handlePercent + 100 - aPercent, 100 );

                        this._labels.each(function() {
                                var ab = $( this ).hasClass( "ui-slider-label-a" );
                                $( this ).width( ( ab ? aPercent : bPercent  ) + "%" );
                        });
                }

                if ( !preventInputUpdate ) {
                        valueChanged = false;

                        // update control"s value
                        if ( isInput ) {
                                valueChanged = parseFloat( control.val() ) !== newval;
                                control.val( newval );
                        } else {
                                valueChanged = control[ 0 ].selectedIndex !== newval;
                                control[ 0 ].selectedIndex = newval;
                        }
                        if ( this._trigger( "beforechange", val ) === false) {
                                        return false;
                        }
                        if ( !isfromControl && valueChanged ) {
                                control.trigger( "change" );
                        }
                }
        },

        _setHighlight: function( value ) {
                value = !!value;
                if ( value ) {
                        this.options.highlight = !!value;
                        this.refresh();
                } else if ( this.valuebg ) {
                        this.valuebg.remove();
                        this.valuebg = false;
                }
        },

        _setTheme: function( value ) {
                this.handle
                        .removeClass( "ui-button-" + this.options.theme )
                        .addClass( "ui-button-" + value );

                var currentTheme = this.options.theme ? this.options.theme : "inherit",
                        newTheme = value ? value : "inherit";

                this.control
                        .removeClass( "ui-body-" + currentTheme )
                        .addClass( "ui-body-" + newTheme );
        },

        _setTrackTheme: function( value ) {
                var currentTrackTheme = this.options.trackTheme ? this.options.trackTheme : "inherit",
                        newTrackTheme = value ? value : "inherit";

                this.slider
                        .removeClass( "ui-body-" + currentTrackTheme )
                        .addClass( "ui-body-" + newTrackTheme );
        },

        _setMini: function( value ) {
                value = !!value;
                if ( !this.isToggleSwitch && !this.isRangeslider ) {
                        this.slider.parent().toggleClass( "ui-mini", value );
                        this.element.toggleClass( "ui-mini", value );
                }
                this.slider.toggleClass( "ui-mini", value );
        },

        _setCorners: function( value ) {
                this.slider.toggleClass( "ui-corner-all", value );

                if ( !this.isToggleSwitch ) {
                        this.control.toggleClass( "ui-corner-all", value );
                }
        },

        _setDisabled: function( value ) {
                value = !!value;
                this.element.prop( "disabled", value );
                this.slider
                        .toggleClass( "ui-state-disabled", value )
                        .attr( "aria-disabled", value );

                this.element.toggleClass( "ui-state-disabled", value );
        }

}, $.mobile.behaviors.formReset ) );

})( jQuery );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");

1	//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2	//>>description: Slider form widget
3	//>>label: Slider
4	//>>group: Forms
5	//>>css.structure: ../css/structure/jquery.mobile.forms.slider.css
6	//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
7
8	define( [ "jquery",	42×
9	"../../core",
10	"../../widget",
11	"./textinput",
12	"../../vmouse",
13	"./reset" ], function( jQuery ) {
14	//>>excludeEnd("jqmBuildExclude");
15	(function( $, undefined ) {	42×
16
17	$.widget( "mobile.slider", $.extend( {	42×
18	initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')",
19
20	widgetEventPrefix: "slide",
21
22	options: {
23	theme: null,
24	trackTheme: null,
25	corners: true,
26	mini: false,
27	highlight: false
28	},
29
30	_create: function() {
31
32	// TODO: Each of these should have comments explain what they're for
33	var self = this,	252×
34	control = this.element,
35	trackTheme = this.options.trackTheme \|\| $.mobile.getAttribute( control[ 0 ], "theme" ),
36	trackThemeClass = trackTheme ? " ui-bar-" + trackTheme : " ui-bar-inherit",
37	cornerClass = ( this.options.corners \|\| control.jqmData( "corners" ) ) ? " ui-corner-all" : "",
38	miniClass = ( this.options.mini \|\| control.jqmData( "mini" ) ) ? " ui-mini" : "",
39	cType = control[ 0 ].nodeName.toLowerCase(),
40	isToggleSwitch = ( cType === "select" ),
41	isRangeslider = control.parent().is( ":jqmData(role='rangeslider')" ),
42	selectClass = ( isToggleSwitch ) ? "ui-slider-switch" : "",
43	controlID = control.attr( "id" ),
44	$label = $( "[for='" + controlID + "']" ),
45	labelID = $label.attr( "id" ) \|\| controlID + "-label",
46	min = !isToggleSwitch ? parseFloat( control.attr( "min" ) ) : 0,
47	max = !isToggleSwitch ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length-1,
48	step = window.parseFloat( control.attr( "step" ) \|\| 1 ),
49	domHandle = document.createElement( "a" ),
50	handle = $( domHandle ),
51	domSlider = document.createElement( "div" ),
52	slider = $( domSlider ),
53	valuebg = this.options.highlight && !isToggleSwitch ? (function() {
54	var bg = document.createElement( "div" );	7×
55	bg.className = "ui-slider-bg " + $.mobile.activeBtnClass;	7×
56	return $( bg ).prependTo( slider );	7×
57	})() : false,
58	options,
59	wrapper,
60	j, length,
61	i, optionsCount, origTabIndex,
62	side, activeClass, sliderImg;
63
64	$label.attr( "id", labelID );	252×
65	this.isToggleSwitch = isToggleSwitch;	252×
66
67	domHandle.setAttribute( "href", "#" );	252×
68	domSlider.setAttribute( "role", "application" );	252×
69	domSlider.className = [ this.isToggleSwitch ? "ui-slider ui-slider-track ui-shadow-inset " : "ui-slider-track ui-shadow-inset ", selectClass, trackThemeClass, cornerClass, miniClass ].join( "" );	252×
70	domHandle.className = "ui-slider-handle";	252×
71	domSlider.appendChild( domHandle );	252×
72
73	handle.attr({	252×
74	"role": "slider",
75	"aria-valuemin": min,
76	"aria-valuemax": max,
77	"aria-valuenow": this._value(),
78	"aria-valuetext": this._value(),
79	"title": this._value(),
80	"aria-labelledby": labelID
81	});
82
83	$.extend( this, {	252×
84	slider: slider,
85	handle: handle,
86	control: control,
87	type: cType,
88	step: step,
89	max: max,
90	min: min,
91	valuebg: valuebg,
92	isRangeslider: isRangeslider,
93	dragging: false,
94	beforeStart: null,
95	userModified: false,
96	mouseMoved: false
97	});
98
99	if ( isToggleSwitch ) {	252×
100	// TODO: restore original tabindex (if any) in a destroy method
101	origTabIndex = control.attr( "tabindex" );	7×
102	if ( origTabIndex ) {	7×
103	handle.attr( "tabindex", origTabIndex );	!
104	}
105	control.attr( "tabindex", "-1" ).focus(function() {	7×
106	$( this ).blur();	!
107	handle.focus();	!
108	});
109
110	wrapper = document.createElement( "div" );	7×
111	wrapper.className = "ui-slider-inneroffset";	7×
112
113	for ( j = 0, length = domSlider.childNodes.length; j < length; j++ ) {	7×
114	wrapper.appendChild( domSlider.childNodes[j] );	7×
115	}
116
117	domSlider.appendChild( wrapper );	7×
118
119	// slider.wrapInner( "<div class='ui-slider-inneroffset'></div>" );
120
121	// make the handle move with a smooth transition
122	handle.addClass( "ui-slider-handle-snapping" );	7×
123
124	options = control.find( "option" );	7×
125
126	for ( i = 0, optionsCount = options.length; i < optionsCount; i++ ) {	7×
127	side = !i ? "b" : "a";	14×
128	activeClass = !i ? "" : " " + $.mobile.activeBtnClass;	14×
129	sliderImg = document.createElement( "span" );	14×
130
131	sliderImg.className = [ "ui-slider-label ui-slider-label-", side, activeClass ].join( "" );	14×
132	sliderImg.setAttribute( "role", "img" );	14×
133	sliderImg.appendChild( document.createTextNode( options[i].innerHTML ) );	14×
134	$( sliderImg ).prependTo( slider );	14×
135	}
136
137	self._labels = $( ".ui-slider-label", slider );	7×
138
139	}
140
141	// monitor the input for updated values
142	control.addClass( isToggleSwitch ? "ui-slider-switch" : "ui-slider-input" );	252×
143
144	this._on( control, {	252×
145	"change": "_controlChange",
146	"keyup": "_controlKeyup",
147	"blur": "_controlBlur",
148	"vmouseup": "_controlVMouseUp"
149	});
150
151	slider.bind( "vmousedown", $.proxy( this._sliderVMouseDown, this ) )	252×
152	.bind( "vclick", false );
153
154	// We have to instantiate a new function object for the unbind to work properly
155	// since the method itself is defined in the prototype (causing it to unbind everything)
156	this._on( document, { "vmousemove": "_preventDocumentDrag" });	252×
157	this._on( slider.add( document ), { "vmouseup": "_sliderVMouseUp" });	252×
158
159	slider.insertAfter( control );	252×
160
161	// wrap in a div for styling purposes
162	if ( !isToggleSwitch && !isRangeslider ) {	252×
163	wrapper = "<div class='ui-slider" +	175×
164	( this.options.mini ? " ui-mini" : "" ) + "'></div>";
165
166	control.add( slider ).wrapAll( wrapper );	175×
167	}
168
169	// bind the handle event callbacks and set the context to the widget instance
170	this._on( this.handle, {	252×
171	"vmousedown": "_handleVMouseDown",
172	"keydown": "_handleKeydown",
173	"keyup": "_handleKeyup"
174	});
175
176	this.handle.bind( "vclick", false );	252×
177
178	this._handleFormReset();	252×
179
180	this.refresh( undefined, undefined, true );	252×
181	},
182
183	_setOptions: function( options ) {
184	if ( options.theme !== undefined ) {	196×
185	this._setTheme( options.theme );	112×
186	}
187
188	if ( options.trackTheme !== undefined ) {	196×
189	this._setTrackTheme( options.trackTheme );	112×
190	}
191
192	if ( options.corners !== undefined ) {	196×
193	this._setCorners( options.corners );	112×
194	}
195
196	if ( options.mini !== undefined ) {	196×
197	this._setMini( options.mini );	112×
198	}
199
200	if ( options.highlight !== undefined ) {	196×
201	this._setHighlight( options.highlight );	112×
202	}
203
204	if ( options.disabled !== undefined ) {	196×
205	this._setDisabled( options.disabled );	196×
206	}
207	this._super( options );	196×
208	},
209
210	_controlChange: function( event ) {
211	// if the user dragged the handle, the "change" event was triggered from inside refresh(); don't call refresh() again
212	if ( this._trigger( "controlchange", event ) === false ) {	175×
213	return false;	!
214	}
215	if ( !this.mouseMoved ) {	175×
216	this.refresh( this._value(), true );	161×
217	}
218	},
219
220	_controlKeyup: function(/* event */) { // necessary?
221	this.refresh( this._value(), true, true );	7×
222	},
223
224	_controlBlur: function(/* event */) {
225	this.refresh( this._value(), true );	28×
226	},
227
228	// it appears the clicking the up and down buttons in chrome on
229	// range/number inputs doesn't trigger a change until the field is
230	// blurred. Here we check thif the value has changed and refresh
231	_controlVMouseUp: function(/* event */) {
232	this._checkedRefresh();	84×
233	},
234
235	// NOTE force focus on handle
236	_handleVMouseDown: function(/* event */) {
237	this.handle.focus();	105×
238	},
239
240	_handleKeydown: function( event ) {
241	var index = this._value();	126×
242	if ( this.options.disabled ) {	126×
243	return;	!
244	}
245
246	// In all cases prevent the default and mark the handle as active
247	switch ( event.keyCode ) {	126×
248	case $.mobile.keyCode.HOME:
249	case $.mobile.keyCode.END:
250	case $.mobile.keyCode.PAGE_UP:
251	case $.mobile.keyCode.PAGE_DOWN:
252	case $.mobile.keyCode.UP:
253	case $.mobile.keyCode.RIGHT:
254	case $.mobile.keyCode.DOWN:
255	case $.mobile.keyCode.LEFT:
256	event.preventDefault();	126×
257
258	if ( !this._keySliding ) {	126×
259	this._keySliding = true;	42×
260	this.handle.addClass( "ui-state-active" ); /* TODO: We don't use this class for styling. Do we need to add it? */	42×
261	}
262
263	break;	126×
264	}
265
266	// move the slider according to the keypress
267	switch ( event.keyCode ) {	126×
268	case $.mobile.keyCode.HOME:
269	this.refresh( this.min );	14×
270	break;	14×
271	case $.mobile.keyCode.END:
272	this.refresh( this.max );	14×
273	break;	14×
274	case $.mobile.keyCode.PAGE_UP:
275	case $.mobile.keyCode.UP:
276	case $.mobile.keyCode.RIGHT:
277	this.refresh( index + this.step );	49×
278	break;	49×
279	case $.mobile.keyCode.PAGE_DOWN:
280	case $.mobile.keyCode.DOWN:
281	case $.mobile.keyCode.LEFT:
282	this.refresh( index - this.step );	49×
283	break;	49×
284	}
285	}, // remove active mark
286
287	_handleKeyup: function(/* event */) {
288	if ( this._keySliding ) {	!
289	this._keySliding = false;	!
290	this.handle.removeClass( "ui-state-active" ); /* See comment above. */	!
291	}
292	},
293
294	_sliderVMouseDown: function( event ) {
295	// NOTE: we don't do this in refresh because we still want to
296	// support programmatic alteration of disabled inputs
297	if ( this.options.disabled \|\| !( event.which === 1 \|\| event.which === 0 \|\| event.which === undefined ) ) {	112×
298	return false;	14×
299	}
300	if ( this._trigger( "beforestart", event ) === false ) {	98×
301	return false;	!
302	}
303	this.dragging = true;	98×
304	this.userModified = false;	98×
305	this.mouseMoved = false;	98×
306
307	if ( this.isToggleSwitch ) {	98×
308	this.beforeStart = this.element[0].selectedIndex;	28×
309	}
310
311	this.refresh( event );	98×
312	this._trigger( "start" );	98×
313	return false;	98×
314	},
315
316	_sliderVMouseUp: function() {
317	if ( this.dragging ) {	791×
318	this.dragging = false;	91×
319
320	if ( this.isToggleSwitch ) {	91×
321	// make the handle move with a smooth transition
322	this.handle.addClass( "ui-slider-handle-snapping" );	28×
323
324	if ( this.mouseMoved ) {	28×
325	// this is a drag, change the value only if user dragged enough
326	if ( this.userModified ) {	21×
327	this.refresh( this.beforeStart === 0 ? 1 : 0 );	7×
328	} else {
329	this.refresh( this.beforeStart );	14×
330	}
331	} else {
332	// this is just a click, change the value
333	this.refresh( this.beforeStart === 0 ? 1 : 0 );	7×
334	}
335	}
336
337	this.mouseMoved = false;	91×
338	this._trigger( "stop" );	91×
339	return false;	91×
340	}
341	},
342
343	_preventDocumentDrag: function( event ) {
344	// NOTE: we don't do this in refresh because we still want to
345	// support programmatic alteration of disabled inputs
346	if ( this._trigger( "drag", event ) === false) {	858×
347	return false;	!
348	}
349	if ( this.dragging && !this.options.disabled ) {	858×
350
351	// this.mouseMoved must be updated before refresh() because it will be used in the control "change" event
352	this.mouseMoved = true;	49×
353
354	if ( this.isToggleSwitch ) {	49×
355	// make the handle move in sync with the mouse
356	this.handle.removeClass( "ui-slider-handle-snapping" );	21×
357	}
358
359	this.refresh( event );	49×
360
361	// only after refresh() you can calculate this.userModified
362	this.userModified = this.beforeStart !== this.element[0].selectedIndex;	49×
363	return false;	49×
364	}
365	},
366
367	_checkedRefresh: function() {
368	if ( this.value !== this._value() ) {	84×
369	this.refresh( this._value() );	!
370	}
371	},
372
373	_value: function() {
374	return this.isToggleSwitch ? this.element[0].selectedIndex : parseFloat( this.element.val() ) ;	3,059×
375	},
376
377	_reset: function() {
UNCOV 378	this.refresh( undefined, false, true );	!
379	},
380
381	refresh: function( val, isfromControl, preventInputUpdate ) {
382	// NOTE: we don't return here because we want to support programmatic
383	// alteration of the input value, which should still update the slider
384
385	var self = this,	1,106×
386	parentTheme = $.mobile.getAttribute( this.element[ 0 ], "theme" ),
387	theme = this.options.theme \|\| parentTheme,
388	themeClass = theme ? " ui-button-" + theme : "",
389	trackTheme = this.options.trackTheme \|\| parentTheme,
390	trackThemeClass = trackTheme ? " ui-bar-" + trackTheme : " ui-bar-inherit",
391	cornerClass = this.options.corners ? " ui-corner-all" : "",
392	miniClass = this.options.mini ? " ui-mini" : "",
393	left, width, data, tol,
394	pxStep, percent,
395	control, isInput, optionElements, min, max, step,
396	newval, valModStep, alignValue, percentPerStep,
397	handlePercent, aPercent, bPercent,
398	valueChanged;
399
400	self.slider[0].className = [ this.isToggleSwitch ? "ui-slider ui-slider-switch ui-slider-track ui-shadow-inset" : "ui-slider-track ui-shadow-inset", trackThemeClass, cornerClass, miniClass ].join( "" );	1,106×
401	if ( this.options.disabled \|\| this.element.prop( "disabled" ) ) {	1,106×
402	this.disable();	49×
403	}
404
405	// set the stored value for comparison later
406	this.value = this._value();	1,106×
407	if ( this.options.highlight && !this.isToggleSwitch && this.slider.find( ".ui-slider-bg" ).length === 0 ) {	1,106×
408	this.valuebg = (function() {	84×
409	var bg = document.createElement( "div" );	84×
410	bg.className = "ui-slider-bg " + $.mobile.activeBtnClass;	84×
411	return $( bg ).prependTo( self.slider );	84×
412	})();
413	}
414	this.handle.addClass( "ui-button" + themeClass + " ui-shadow" );	1,106×
415
416	control = this.element;	1,106×
417	isInput = !this.isToggleSwitch;	1,106×
418	optionElements = isInput ? [] : control.find( "option" );	1,106×
419	min = isInput ? parseFloat( control.attr( "min" ) ) : 0;	1,106×
420	max = isInput ? parseFloat( control.attr( "max" ) ) : optionElements.length - 1;	1,106×
421	step = ( isInput && parseFloat( control.attr( "step" ) ) > 0 ) ? parseFloat( control.attr( "step" ) ) : 1;	1,106×
422
423	if ( typeof val === "object" ) {	1,106×
424	data = val;	161×
425	// a slight tolerance helped get to the ends of the slider
426	tol = 8;	161×
427
428	left = this.slider.offset().left;	161×
429	width = this.slider.width();	161×
430	pxStep = width/((max-min)/step);	161×
431	if ( !this.dragging \|\|	161×
432	data.pageX < left - tol \|\|
433	data.pageX > left + width + tol ) {
434	return;	28×
435	}
436	if ( pxStep > 1 ) {	133×
437	percent = ( ( data.pageX - left ) / width ) * 100;	112×
438	} else {
439	percent = Math.round( ( ( data.pageX - left ) / width ) * 100 );	21×
440	}
441	} else {
442	if ( val == null ) {	945×
443	val = isInput ? parseFloat( control.val() \|\| 0 ) : control[0].selectedIndex;	588×
444	}
445	percent = ( parseFloat( val ) - min ) / ( max - min ) * 100;	945×
446	}
447
448	if ( isNaN( percent ) ) {	1,078×
449	return;	105×
450	}
451
452	newval = ( percent / 100 ) * ( max - min ) + min;	973×
453
454	//from jQuery UI slider, the following source will round to the nearest step
455	valModStep = ( newval - min ) % step;	973×
456	alignValue = newval - valModStep;	973×
457
458	if ( Math.abs( valModStep ) * 2 >= step ) {	973×
459	alignValue += ( valModStep > 0 ) ? step : ( -step );	77×
460	}
461
462	percentPerStep = 100/((max-min)/step);	973×
463	// Since JavaScript has problems with large floats, round
464	// the final value to 5 digits after the decimal point (see jQueryUI: #4124)
465	newval = parseFloat( alignValue.toFixed(5) );	973×
466
467	if ( typeof pxStep === "undefined" ) {	973×
468	pxStep = width / ( (max-min) / step );	882×
469	}
470	if ( pxStep > 1 && isInput ) {	973×
471	percent = ( newval - min ) * percentPerStep * ( 1 / step );	21×
472	}
473	if ( percent < 0 ) {	973×
474	percent = 0;	7×
475	}
476
477	if ( percent > 100 ) {	973×
478	percent = 100;	21×
479	}
480
481	if ( newval < min ) {	973×
482	newval = min;	7×
483	}
484
485	if ( newval > max ) {	973×
486	newval = max;	21×
487	}
488
489	this.handle.css( "left", percent + "%" );	973×
490
491	this.handle[0].setAttribute( "aria-valuenow", isInput ? newval : optionElements.eq( newval ).attr( "value" ) );	973×
492
493	this.handle[0].setAttribute( "aria-valuetext", isInput ? newval : optionElements.eq( newval ).getEncodedText() );	973×
494
495	this.handle[0].setAttribute( "title", isInput ? newval : optionElements.eq( newval ).getEncodedText() );	973×
496
497	if ( this.valuebg ) {	973×
498	this.valuebg.css( "width", percent + "%" );	301×
499	}
500
501	// drag the label widths
502	if ( this._labels ) {	973×
503	handlePercent = this.handle.width() / this.slider.width() * 100;	238×
504	aPercent = percent && handlePercent + ( 100 - handlePercent ) * percent / 100;	238×
505	bPercent = percent === 100 ? 0 : Math.min( handlePercent + 100 - aPercent, 100 );	238×
506
507	this._labels.each(function() {	238×
508	var ab = $( this ).hasClass( "ui-slider-label-a" );	476×
509	$( this ).width( ( ab ? aPercent : bPercent ) + "%" );	476×
510	});
511	}
512
513	if ( !preventInputUpdate ) {	973×
514	valueChanged = false;	742×
515
516	// update control"s value
517	if ( isInput ) {	742×
518	valueChanged = parseFloat( control.val() ) !== newval;	511×
519	control.val( newval );	511×
520	} else {
521	valueChanged = control[ 0 ].selectedIndex !== newval;	231×
522	control[ 0 ].selectedIndex = newval;	231×
523	}
524	if ( this._trigger( "beforechange", val ) === false) {	742×
525	return false;	49×
526	}
527	if ( !isfromControl && valueChanged ) {	693×
528	control.trigger( "change" );	175×
529	}
530	}
531	},
532
533	_setHighlight: function( value ) {
534	value = !!value;	112×
535	if ( value ) {	112×
536	this.options.highlight = !!value;	112×
537	this.refresh();	112×
538	} else if ( this.valuebg ) {	!
539	this.valuebg.remove();	!
540	this.valuebg = false;	!
541	}
542	},
543
544	_setTheme: function( value ) {
545	this.handle	112×
546	.removeClass( "ui-button-" + this.options.theme )
547	.addClass( "ui-button-" + value );
548
549	var currentTheme = this.options.theme ? this.options.theme : "inherit",	112×
550	newTheme = value ? value : "inherit";
551
552	this.control	112×
553	.removeClass( "ui-body-" + currentTheme )
554	.addClass( "ui-body-" + newTheme );
555	},
556
557	_setTrackTheme: function( value ) {
558	var currentTrackTheme = this.options.trackTheme ? this.options.trackTheme : "inherit",	112×
559	newTrackTheme = value ? value : "inherit";
560
561	this.slider	112×
562	.removeClass( "ui-body-" + currentTrackTheme )
563	.addClass( "ui-body-" + newTrackTheme );
564	},
565
566	_setMini: function( value ) {
567	value = !!value;	112×
568	if ( !this.isToggleSwitch && !this.isRangeslider ) {	112×
569	this.slider.parent().toggleClass( "ui-mini", value );	14×
570	this.element.toggleClass( "ui-mini", value );	14×
571	}
572	this.slider.toggleClass( "ui-mini", value );	112×
573	},
574
575	_setCorners: function( value ) {
576	this.slider.toggleClass( "ui-corner-all", value );	112×
577
578	if ( !this.isToggleSwitch ) {	112×
579	this.control.toggleClass( "ui-corner-all", value );	112×
580	}
581	},
582
583	_setDisabled: function( value ) {
584	value = !!value;	196×
585	this.element.prop( "disabled", value );	196×
586	this.slider	196×
587	.toggleClass( "ui-state-disabled", value )
588	.attr( "aria-disabled", value );
589
590	this.element.toggleClass( "ui-state-disabled", value );	196×
591	}
592
593	}, $.mobile.behaviors.formReset ) );
594
595	})( jQuery );
596	//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
597	});
598	//>>excludeEnd("jqmBuildExclude");

jquery / jquery-mobile / 2313

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous