Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed

if(!dojo._hasResource["dijit.form.Slider"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.form.Slider"] = true;
dojo.provide("dijit.form.Slider");

dojo.require("dijit.form._FormWidget");
dojo.require("dijit._Container");
dojo.require("dojo.dnd.move");
dojo.require("dijit.form.Button");
dojo.require("dojo.number");

dojo.declare(
        "dijit.form.HorizontalSlider",
        [dijit.form._FormWidget, dijit._Container],
{
        // summary
        //      A form widget that allows one to select a value with a horizontally draggable image

        templateString:"<table class=\"dijit dijitReset dijitSlider\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" rules=\"none\"\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t\t><td dojoAttachPoint=\"containerNode,topDecoration\" class=\"dijitReset\" style=\"text-align:center;width:100%;\"></td\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitHorizontalSliderButtonContainer\"\n\t\t\t><div class=\"dijitHorizontalSliderDecrementIcon\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"decrementButton\" dojoAttachEvent=\"onclick: decrement\"><span class=\"dijitSliderButtonInner\">-</span></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><div class=\"dijitSliderBar dijitSliderBumper dijitHorizontalSliderBumper dijitSliderLeftBumper dijitHorizontalSliderLeftBumper\"></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><input dojoAttachPoint=\"valueNode\" type=\"hidden\" name=\"${name}\"\n\t\t\t/><div style=\"position:relative;\" dojoAttachPoint=\"sliderBarContainer\"\n\t\t\t\t><div dojoAttachPoint=\"progressBar\" class=\"dijitSliderBar dijitHorizontalSliderBar dijitSliderProgressBar dijitHorizontalSliderProgressBar\" dojoAttachEvent=\"onclick:_onBarClick\"\n\t\t\t\t\t><div dojoAttachPoint=\"sliderHandle,focusNode\" class=\"dijitSliderMoveable dijitHorizontalSliderMoveable\" dojoAttachEvent=\"onkeypress:_onKeyPress,onclick:_onHandleClick\" waiRole=\"slider\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"\n\t\t\t\t\t\t><div class=\"dijitSliderImageHandle dijitHorizontalSliderImageHandle\"></div\n\t\t\t\t\t></div\n\t\t\t\t></div\n\t\t\t\t><div dojoAttachPoint=\"remainingBar\" class=\"dijitSliderBar dijitHorizontalSliderBar dijitSliderRemainingBar dijitHorizontalSliderRemainingBar\" dojoAttachEvent=\"onclick:_onBarClick\"></div\n\t\t\t></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><div class=\"dijitSliderBar dijitSliderBumper dijitHorizontalSliderBumper dijitSliderRightBumper dijitHorizontalSliderRightBumper\"></div\n\t\t></td\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitHorizontalSliderButtonContainer\" style=\"right:0px;\"\n\t\t\t><div class=\"dijitHorizontalSliderIncrementIcon\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"incrementButton\" dojoAttachEvent=\"onclick: increment\"><span class=\"dijitSliderButtonInner\">+</span></div\n\t\t></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t\t><td dojoAttachPoint=\"containerNode,bottomDecoration\" class=\"dijitReset\" style=\"text-align:center;\"></td\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t></tr\n></table>\n",
        value: 0,

        // showButtons: boolean
        //      Show increment/decrement buttons at the ends of the slider?
        showButtons: true,

        // minimum:: integer
        //      The minimum value allowed.
        minimum: 0,

        // maximum: integer
        //      The maximum allowed value.
        maximum: 100,

        // discreteValues: integer
        //      The maximum allowed values dispersed evenly between minimum and maximum (inclusive).
        discreteValues: Infinity,

        // pageIncrement: integer
        //      The amount of change with shift+arrow
        pageIncrement: 2,

        // clickSelect: boolean
        //      If clicking the progress bar changes the value or not
        clickSelect: true,

        widgetsInTemplate: true,

        attributeMap: dojo.mixin(dojo.clone(dijit.form._FormWidget.prototype.attributeMap),
                {id:"", name:"valueNode"}),

        baseClass: "dijitSlider",

        _mousePixelCoord: "pageX",
        _pixelCount: "w",
        _startingPixelCoord: "x",
        _startingPixelCount: "l",
        _handleOffsetCoord: "left",
        _progressPixelSize: "width",
        _upsideDown: false,

        _onKeyPress: function(/*Event*/ e){
                if(this.disabled || e.altKey || e.ctrlKey){ return; }
                switch(e.keyCode){
                        case dojo.keys.HOME:
                                this.setValue(this.minimum, false);
                                break;
                        case dojo.keys.END:
                                this.setValue(this.maximum, false);
                                break;
                        case dojo.keys.UP_ARROW:
                        case (this._isReversed() ? dojo.keys.LEFT_ARROW : dojo.keys.RIGHT_ARROW):
                        case dojo.keys.PAGE_UP:
                                this.increment(e);
                                break;
                        case dojo.keys.DOWN_ARROW:
                        case (this._isReversed() ? dojo.keys.RIGHT_ARROW : dojo.keys.LEFT_ARROW):
                        case dojo.keys.PAGE_DOWN:
                                this.decrement(e);
                                break;
                        default:
                                this.inherited("_onKeyPress", arguments);
                                return;
                }
                dojo.stopEvent(e);
        },

        _onHandleClick: function(e){
                if(this.disabled){ return; }
                if(!dojo.isIE){
                        // make sure you get focus when dragging the handle
                        // (but don't do on IE because it causes a flicker on mouse up (due to blur then focus)
                        dijit.focus(this.sliderHandle);
                }
                dojo.stopEvent(e);
        },
        
        _isReversed: function() {
                return !(this._upsideDown || this.isLeftToRight());
        },

        _onBarClick: function(e){
                if(this.disabled || !this.clickSelect){ return; }
                dijit.focus(this.sliderHandle);
                dojo.stopEvent(e);
                var abspos = dojo.coords(this.sliderBarContainer, true);
                var pixelValue = e[this._mousePixelCoord] - abspos[this._startingPixelCoord];
                this._setPixelValue(this._isReversed() || this._upsideDown ? (abspos[this._pixelCount] - pixelValue) : pixelValue, abspos[this._pixelCount], true);
        },

        _setPixelValue: function(/*Number*/ pixelValue, /*Number*/ maxPixels, /*Boolean, optional*/ priorityChange){
                if(this.disabled){ return; }
                pixelValue = pixelValue < 0 ? 0 : maxPixels < pixelValue ? maxPixels : pixelValue;
                var count = this.discreteValues;
                if(count <= 1 || count == Infinity){ count = maxPixels; }
                count--;
                var pixelsPerValue = maxPixels / count;
                var wholeIncrements = Math.round(pixelValue / pixelsPerValue);
                this.setValue((this.maximum-this.minimum)*wholeIncrements/count + this.minimum, priorityChange);
        },

        setValue: function(/*Number*/ value, /*Boolean, optional*/ priorityChange){
                this.valueNode.value = this.value = value;
                this.inherited('setValue', arguments);
                var percent = (value - this.minimum) / (this.maximum - this.minimum);
                this.progressBar.style[this._progressPixelSize] = (percent*100) + "%";
                this.remainingBar.style[this._progressPixelSize] = ((1-percent)*100) + "%";
        },

        _bumpValue: function(signedChange){
                if(this.disabled){ return; }
                var s = dojo.getComputedStyle(this.sliderBarContainer);
                var c = dojo._getContentBox(this.sliderBarContainer, s);
                var count = this.discreteValues;
                if(count <= 1 || count == Infinity){ count = c[this._pixelCount]; }
                count--;
                var value = (this.value - this.minimum) * count / (this.maximum - this.minimum) + signedChange;
                if(value < 0){ value = 0; }
                if(value > count){ value = count; }
                value = value * (this.maximum - this.minimum) / count + this.minimum;
                this.setValue(value, true);
        },

        decrement: function(e){
                // summary
                //      decrement slider by 1 unit
                this._bumpValue(e.keyCode == dojo.keys.PAGE_DOWN?-this.pageIncrement:-1);
        },

        increment: function(e){
                // summary
                //      increment slider by 1 unit
                this._bumpValue(e.keyCode == dojo.keys.PAGE_UP?this.pageIncrement:1);
        },

        _mouseWheeled: function(/*Event*/ evt){
                dojo.stopEvent(evt);
                var scrollAmount = 0;
                if(typeof evt.wheelDelta == 'number'){ // IE
                        scrollAmount = evt.wheelDelta;
                }else if(typeof evt.detail == 'number'){ // Mozilla+Firefox
                        scrollAmount = -evt.detail;
                }
                if(scrollAmount > 0){
                        this.increment(evt);
                }else if(scrollAmount < 0){
                        this.decrement(evt);
                }
        },

        startup: function(){
                dojo.forEach(this.getChildren(), function(child){
                        if(this[child.container] != this.containerNode){
                                this[child.container].appendChild(child.domNode);
                        }
                }, this);
        },

        _onBlur: function(){
                dijit.form.HorizontalSlider.superclass.setValue.call(this, this.value, true);
        },

        postCreate: function(){
                if(this.showButtons){
                        this.incrementButton.style.display="";
                        this.decrementButton.style.display="";
                }
                this.connect(this.domNode, dojo.isIE ? "onmousewheel" : 'DOMMouseScroll', "_mouseWheeled");

                // define a custom constructor for a SliderMover that points back to me
                var _self = this;
                var mover = function(){
                        dijit.form._SliderMover.apply(this, arguments);
                        this.widget = _self;
                };
                dojo.extend(mover, dijit.form._SliderMover.prototype);

                this._movable = new dojo.dnd.Moveable(this.sliderHandle, {mover: mover});
                this.inherited('postCreate', arguments);
        },

        destroy: function(){
                this._movable.destroy();
                this.inherited('destroy', arguments);   
        }
});

dojo.declare(
        "dijit.form.VerticalSlider",
        dijit.form.HorizontalSlider,
{
        // summary
        //      A form widget that allows one to select a value with a vertically draggable image

        templateString:"<table class=\"dijitReset dijitSlider\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" rules=\"none\"\n><tbody class=\"dijitReset\"\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\"></td\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitVerticalSliderButtonContainer\"\n\t\t\t><div class=\"dijitVerticalSliderIncrementIcon\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"incrementButton\" dojoAttachEvent=\"onclick: increment\"><span class=\"dijitSliderButtonInner\">+</span></div\n\t\t></td\n\t\t><td class=\"dijitReset\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\"></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><center><div class=\"dijitSliderBar dijitSliderBumper dijitVerticalSliderBumper dijitSliderTopBumper dijitVerticalSliderTopBumper\"></div></center\n\t\t></td\n\t\t><td class=\"dijitReset\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td dojoAttachPoint=\"leftDecoration\" class=\"dijitReset\" style=\"text-align:center;height:100%;\"></td\n\t\t><td class=\"dijitReset\" style=\"height:100%;\"\n\t\t\t><input dojoAttachPoint=\"valueNode\" type=\"hidden\" name=\"${name}\"\n\t\t\t/><center style=\"position:relative;height:100%;\" dojoAttachPoint=\"sliderBarContainer\"\n\t\t\t\t><div dojoAttachPoint=\"remainingBar\" class=\"dijitSliderBar dijitVerticalSliderBar dijitSliderRemainingBar dijitVerticalSliderRemainingBar\" dojoAttachEvent=\"onclick:_onBarClick\"></div\n\t\t\t\t><div dojoAttachPoint=\"progressBar\" class=\"dijitSliderBar dijitVerticalSliderBar dijitSliderProgressBar dijitVerticalSliderProgressBar\" dojoAttachEvent=\"onclick:_onBarClick\"\n\t\t\t\t\t><div dojoAttachPoint=\"sliderHandle,focusNode\" class=\"dijitSliderMoveable\" dojoAttachEvent=\"onkeypress:_onKeyPress,onclick:_onHandleClick\" style=\"vertical-align:top;\" waiRole=\"slider\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"\n\t\t\t\t\t\t><div class=\"dijitSliderImageHandle dijitVerticalSliderImageHandle\"></div\n\t\t\t\t\t></div\n\t\t\t\t></div\n\t\t\t></center\n\t\t></td\n\t\t><td dojoAttachPoint=\"containerNode,rightDecoration\" class=\"dijitReset\" style=\"text-align:center;height:100%;\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\"></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><center><div class=\"dijitSliderBar dijitSliderBumper dijitVerticalSliderBumper dijitSliderBottomBumper dijitVerticalSliderBottomBumper\"></div></center\n\t\t></td\n\t\t><td class=\"dijitReset\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\"></td\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitVerticalSliderButtonContainer\"\n\t\t\t><div class=\"dijitVerticalSliderDecrementIcon\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"decrementButton\" dojoAttachEvent=\"onclick: decrement\"><span class=\"dijitSliderButtonInner\">-</span></div\n\t\t></td\n\t\t><td class=\"dijitReset\"></td\n\t></tr\n></tbody></table>\n",
        _mousePixelCoord: "pageY",
        _pixelCount: "h",
        _startingPixelCoord: "y",
        _startingPixelCount: "t",
        _handleOffsetCoord: "top",
        _progressPixelSize: "height",
        _upsideDown: true
});

dojo.declare("dijit.form._SliderMover",
        dojo.dnd.Mover,
{
        onMouseMove: function(e){
                var widget = this.widget;
                var c = this.constraintBox;
                if(!c){
                        var container = widget.sliderBarContainer;
                        var s = dojo.getComputedStyle(container);
                        var c = dojo._getContentBox(container, s);
                        c[widget._startingPixelCount] = 0;
                        this.constraintBox = c;
                }
                var m = this.marginBox;
                var pixelValue = widget._isReversed() ?
                        e[widget._mousePixelCoord] - dojo._abs(widget.sliderBarContainer).x : 
                        m[widget._startingPixelCount] + e[widget._mousePixelCoord];
                dojo.hitch(widget, "_setPixelValue")(widget._isReversed() || widget._upsideDown? (c[widget._pixelCount]-pixelValue) : pixelValue, c[widget._pixelCount]);
        },
        
        destroy: function(e){
                var widget = this.widget;
                widget.setValue(widget.value, true);
                dojo.dnd.Mover.prototype.destroy.call(this);
        }
});


dojo.declare("dijit.form.HorizontalRule", [dijit._Widget, dijit._Templated],
{
        //      Summary:
        //              Create hash marks for the Horizontal slider
        templateString: '<div class="RuleContainer HorizontalRuleContainer"></div>',

        // count: Integer
        //              Number of hash marks to generate
        count: 3,

        // container: Node
        //              If this is a child widget, connect it to this parent node
        container: "containerNode",

        // ruleStyle: String
        //              CSS style to apply to individual hash marks
        ruleStyle: "",

        _positionPrefix: '<div class="RuleMark HorizontalRuleMark" style="left:',
        _positionSuffix: '%;',
        _suffix: '"></div>',

        _genHTML: function(pos, ndx){
                return this._positionPrefix + pos + this._positionSuffix + this.ruleStyle + this._suffix;
        },
        
        _isHorizontal: true,

        postCreate: function(){
                if(this.count==1){
                        var innerHTML = this._genHTML(50, 0);
                }else{
                        var interval = 100 / (this.count-1);
                        if(!this._isHorizontal || this.isLeftToRight()){
                                var innerHTML = this._genHTML(0, 0);
                                for(var i=1; i < this.count-1; i++){
                                        innerHTML += this._genHTML(interval*i, i);
                                }
                                innerHTML += this._genHTML(100, this.count-1);
                        }else{
                                var innerHTML = this._genHTML(100, 0);
                                for(var i=1; i < this.count-1; i++){
                                        innerHTML += this._genHTML(100-interval*i, i);
                                }
                                innerHTML += this._genHTML(0, this.count-1);
                        }
                }
                this.domNode.innerHTML = innerHTML;
        }
});

dojo.declare("dijit.form.VerticalRule", dijit.form.HorizontalRule,
{
        //      Summary:
        //              Create hash marks for the Vertical slider
        templateString: '<div class="RuleContainer VerticalRuleContainer"></div>',
        _positionPrefix: '<div class="RuleMark VerticalRuleMark" style="top:',
        
        _isHorizontal: false
});

dojo.declare("dijit.form.HorizontalRuleLabels", dijit.form.HorizontalRule,
{
        //      Summary:
        //              Create labels for the Horizontal slider
        templateString: '<div class="RuleContainer HorizontalRuleContainer"></div>',

        // labelStyle: String
        //              CSS style to apply to individual text labels
        labelStyle: "",

        // labels: Array
        //      Array of text labels to render - evenly spaced from left-to-right or bottom-to-top
        labels: [],

        // numericMargin: Integer
        //      Number of generated numeric labels that should be rendered as '' on the ends when labels[] are not specified
        numericMargin: 0,

        // numericMinimum: Integer
        //      Leftmost label value for generated numeric labels when labels[] are not specified
        minimum: 0,

        // numericMaximum: Integer
        //      Rightmost label value for generated numeric labels when labels[] are not specified
        maximum: 1,

        // constraints: object
        //      pattern, places, lang, et al (see dojo.number) for generated numeric labels when labels[] are not specified
        constraints: {pattern:"#%"},

        _positionPrefix: '<div class="RuleLabelContainer HorizontalRuleLabelContainer" style="left:',
        _labelPrefix: '"><span class="RuleLabel HorizontalRuleLabel">',
        _suffix: '</span></div>',

        _calcPosition: function(pos){
                return pos;
        },

        _genHTML: function(pos, ndx){
                return this._positionPrefix + this._calcPosition(pos) + this._positionSuffix + this.labelStyle + this._labelPrefix + this.labels[ndx] + this._suffix;
        },

        getLabels: function(){
                // summary: user replaceable function to return the labels array

                // if the labels array was not specified directly, then see if <li> children were
                var labels = this.labels;
                if(!labels.length){
                        // for markup creation, labels are specified as child elements
                        labels = dojo.query("> li", this.srcNodeRef).map(function(node){
                                return String(node.innerHTML);
                        });
                }
                this.srcNodeRef.innerHTML = '';
                // if the labels were not specified directly and not as <li> children, then calculate numeric labels
                if(!labels.length && this.count > 1){
                        var start = this.minimum;
                        var inc = (this.maximum - start) / (this.count-1);
                        for (var i=0; i < this.count; i++){
                                labels.push((i<this.numericMargin||i>=(this.count-this.numericMargin))? '' : dojo.number.format(start, this.constraints));
                                start += inc;
                        }
                }
                return labels;
        },

        postMixInProperties: function(){
                this.inherited('postMixInProperties', arguments);
                this.labels = this.getLabels();
                this.count = this.labels.length;
        }
});

dojo.declare("dijit.form.VerticalRuleLabels", dijit.form.HorizontalRuleLabels,
{
        //      Summary:
        //              Create labels for the Vertical slider
        templateString: '<div class="RuleContainer VerticalRuleContainer"></div>',

        _positionPrefix: '<div class="RuleLabelContainer VerticalRuleLabelContainer" style="top:',
        _labelPrefix: '"><span class="RuleLabel VerticalRuleLabel">',

        _calcPosition: function(pos){
                return 100-pos;
        },
        
        _isHorizontal: false
});

}