"#8f9ca4" "red" "#eff3f1" false false false this.ctx.beginPath(); var h = this.height - this.tickheight; this.ctx.moveTo(aPos, h); this.ctx.lineTo(aPos - this.sliderwidth, h - this.slidertip); this.ctx.lineTo(aPos - this.sliderwidth, this.tickheight); this.ctx.lineTo(aPos + this.sliderwidth, this.tickheight); this.ctx.lineTo(aPos + this.sliderwidth, h - this.slidertip); this.ctx.closePath(); this.ctx.save(); // do path this.ctx.lineWidth = 1; this.sliderPath(aPos); this.ctx.strokeStyle = aMove ? this.strokeStyleMove : this.strokeStyle; this.ctx.stroke(); this.sliderPath(aPos); this.ctx.fillStyle = this.fillStyle; this.ctx.fill(); this.ctx.restore(); var pos = val - this.rBegin; if (this.rStep) { pos = (pos / this.rStep) * this.stepsp; } else { pos = (pos / (this.rEnd - this.rBegin)) * this.barwidth; } return Math.round(pos) + this.margin; this.adjEnd || aVal < this.rBegin)) { outOfRange = true; } else { if (this.rStep) { // adjust aVal to limits valmod = (aVal - this.rBegin) % this.rStep; if (valmod) { if (aMode == "set") { outOfRange = true; } else if (valmod < (this.rStep / 2)) { aVal -= valmod; } else { aVal += this.rStep - valmod; } } } if (aVal > this.adjEnd) { aVal = this.adjEnd; } else if (aVal < this.rBegin) { aVal = this.rBegin; } } } if (!outOfRange && (aMode != "move" || this.isIncremental)) { // Store new value this.accessors.setValue(aVal); } if (this.rVal == aVal && !this.justMoved) { // slider is already drawn at correct position return; } this.ctx.save(); // clear old slider this.ctx.clearRect(this.calcPos(this.rVal) - this.sliderwidth - 1, this.tickheight - 1, this.sliderwidth * 2 + 2, this.tickheight * 3 + 2); // (re)draw horisontal bar this.ctx.lineWidth = 1; this.ctx.fillStyle = this.fillStyle; this.ctx.strokeStyle = this.strokeStyle; mid = Math.round(this.height / 2); // XXX only needs to be redrawn for old slider pos this.ctx.fillRect(this.margin, mid - 1, this.barwidth, 3); this.ctx.strokeRect(this.margin, mid - 1, this.barwidth, 3); // Let the accessor know the outOfRange state. The accessor will // take care of the control styling and dispatching the appropriate // events if the in/out of range condition has changed from its // previous state. if (outOfRange != this.outOfRange) { this.outOfRange = outOfRange; this.accessors.setInRange(!outOfRange); } // if out-of-range, we cannot represent the value if (outOfRange) { this.rVal = null; return null; } // draw slider at new position this.justMoved = (aMode == "move"); this.drawSlider(this.calcPos(aVal), this.justMoved); this.ctx.restore(); // Store new value return this.rVal = aVal; ]]> var obj; if (document.getBoxObjectFor) { obj = document.getBoxObjectFor(this.canvas); } else { obj = { x: event.target.offsetLeft, y: event.target.offsetTop }; } return obj; x -= obj.margin; if (obj.rStep) { x = (x / obj.stepsp) * obj.rStep; } else { x = (x / this.barwidth) * (this.rEnd - this.rBegin); } return x + obj.rBegin; (this.barwidth + this.margin)) { xpos = this.barwidth; } var mode = this.isIncremental ? null : "move" this.setSlider(this.calcMousePos(this, xpos), mode); return; } ]]> if (event.button != 0 || !this.isMoving) { return; } var x = event.clientX - this.currentOffset.x; this.setSlider(this.calcMousePos(this, x)); this.isMoving = false; (this.barwidth + this.margin)) { xpos = this.barwidth + this.margin; } var mode = this.isIncremental ? null : "move" this.setSlider(this.calcMousePos(this, xpos), mode); ]]> if (!this.isMoving) { return; } this.isMoving = false; this.setSlider(this.originalVal); var move; if (this.rStep) { move = this.rStep; } else { move = (this.rEnd - this.rBegin) / 20; } if (event.keyCode == event.DOM_VK_LEFT) { this.setSlider(this.rVal - move); } else if (event.keyCode == event.DOM_VK_RIGHT) { this.setSlider(this.rVal + move); } else if (event.keyCode == event.DOM_VK_PAGE_DOWN) { this.setSlider(this.rVal - move * 2); } else if (event.keyCode == event.DOM_VK_PAGE_UP) { this.setSlider(this.rVal + move * 2); } else if (event.keyCode == event.DOM_VK_HOME) { this.setSlider(this.rBegin); } else if (event.keyCode == event.DOM_VK_END) { this.setSlider(this.rEnd); } this.canvas.focus(); return true; throw Components.results.NS_ERROR_NOT_IMPLEMENTED; = this.rEnd) { this.delegate.reportError("rangeBeginEndError"); return false; } if (isNaN(this.rStep)) { this.rStep = null; } else if (this.rStep < 0) { // XXX better handling this.rStep = -this.rStep; } // Sanitize @step for xsd:integer // XXX: we need a schemavalidator.isDerivedFrom(type, "xsd:integer"); if (this.getAttribute("type") == "http://www.w3.org/2001/XMLSchema#integer") { if (!this.rStep) { this.rStep = 1; } else { this.rStep = Math.round(this.rStep); } } // set labels aLabelBegin.appendChild(document.createTextNode(this.rBegin)); aLabelEnd.appendChild(document.createTextNode(this.rEnd)); // get canvas this.canvas = aCanvas; this.height = this.canvas.height; // get and set context this.ctx = this.canvas.getContext("2d"); this.ctx.globalAlpha = 1.0; this.ctx.lineWidth = 1; // size of horisontal bar this.margin = Math.round(this.canvas.width / 45); if (this.margin < 4) { this.margin = 4; } this.barwidth = this.canvas.width - (2 * this.margin); // slider size this.sliderwidth = this.margin - 1; if (this.sliderwidth < 4) { this.sliderwidth = 4; } this.slidertip = Math.round(this.height / 10); this.tickheight = this.slidertip * 2; if (!this.rStep) { this.adjEnd = this.rEnd; return true; } // begin and end might not be a step this.adjEnd = this.rEnd - ((this.rEnd - this.rBegin) % this.rStep); this.steps = (this.adjEnd - this.rBegin) / this.rStep; this.stepsp = (this.barwidth * (this.adjEnd / this.rEnd)) / this.steps; this.width = this.steps * this.stepsp; // ticks (== steps for the moment) this.ticks = this.steps; this.ticksp = this.stepsp; for (var i = 0; i <= this.ticks; ++i) { var pos = Math.round(this.margin + i * this.ticksp); this.ctx.moveTo(pos, this.height - this.tickheight + 1); this.ctx.lineTo(pos, this.height); this.ctx.closePath(); this.ctx.stroke(); } return true; ]]>