From d989420a0c316a8c1f9a643418669496f807094b Mon Sep 17 00:00:00 2001 From: Andreas Unterkircher Date: Sun, 22 Jul 2007 10:09:14 +0000 Subject: issue46, added a javascript-based slider to modify slide-interval git-svn-id: file:///var/lib/svn/phpfspot/trunk@242 fa6a889d-dae6-447d-9e79-4ba9a3039384 --- slider/REMOVED | 6 + slider/css/bluecurve/bluecurve.css | 79 +++++ slider/css/bluecurve/handle.horizontal.png | Bin 0 -> 286 bytes slider/css/bluecurve/handle.vertical.png | Bin 0 -> 352 bytes slider/css/bluecurve/horizontal.gif | Bin 0 -> 1242 bytes slider/css/bluecurve/vertical.gif | Bin 0 -> 345 bytes slider/css/boxsizing.htc | 157 +++++++++ slider/css/luna/handle.horizontal.hover.png | Bin 0 -> 440 bytes slider/css/luna/handle.horizontal.png | Bin 0 -> 443 bytes slider/css/luna/handle.vertical.hover.png | Bin 0 -> 395 bytes slider/css/luna/handle.vertical.png | Bin 0 -> 398 bytes slider/css/luna/luna.css | 75 +++++ slider/css/swing/handle.horizontal.png | Bin 0 -> 288 bytes slider/css/swing/handle.vertical.png | Bin 0 -> 271 bytes slider/css/swing/swing.css | 82 +++++ slider/css/winclassic.css | 99 ++++++ slider/js/range.js | 132 ++++++++ slider/js/slider.js | 489 ++++++++++++++++++++++++++++ slider/js/timer.js | 62 ++++ slider/license.txt | 202 ++++++++++++ 20 files changed, 1383 insertions(+) create mode 100644 slider/REMOVED create mode 100644 slider/css/bluecurve/bluecurve.css create mode 100644 slider/css/bluecurve/handle.horizontal.png create mode 100644 slider/css/bluecurve/handle.vertical.png create mode 100644 slider/css/bluecurve/horizontal.gif create mode 100644 slider/css/bluecurve/vertical.gif create mode 100644 slider/css/boxsizing.htc create mode 100644 slider/css/luna/handle.horizontal.hover.png create mode 100644 slider/css/luna/handle.horizontal.png create mode 100644 slider/css/luna/handle.vertical.hover.png create mode 100644 slider/css/luna/handle.vertical.png create mode 100644 slider/css/luna/luna.css create mode 100644 slider/css/swing/handle.horizontal.png create mode 100644 slider/css/swing/handle.vertical.png create mode 100644 slider/css/swing/swing.css create mode 100644 slider/css/winclassic.css create mode 100644 slider/js/range.js create mode 100644 slider/js/slider.js create mode 100644 slider/js/timer.js create mode 100644 slider/license.txt (limited to 'slider') diff --git a/slider/REMOVED b/slider/REMOVED new file mode 100644 index 0000000..be1cddf --- /dev/null +++ b/slider/REMOVED @@ -0,0 +1,6 @@ +rgbdemo.html +demo.html +slider.html +implementation.html +api.html +local/ diff --git a/slider/css/bluecurve/bluecurve.css b/slider/css/bluecurve/bluecurve.css new file mode 100644 index 0000000..6867382 --- /dev/null +++ b/slider/css/bluecurve/bluecurve.css @@ -0,0 +1,79 @@ +/* + back: rgb(230,230,230) + dark: rgb(90,97,90) + medium rgb(189,190,189) + */ + +.dynamic-slider-control { + position: relative; + -moz-user-focus: normal; + -moz-user-select: none; + cursor: default; +} + +.horizontal { + width: 200px; + height: 27px; +} + +.vertical { + width: 29px; + height: 200px; +} + +.dynamic-slider-control input { + display: none; +} + +.dynamic-slider-control .handle { + position: absolute; + font-size: 1px; + overflow: hidden; + -moz-user-select: none; + cursor: default; +} + +.dynamic-slider-control.horizontal .handle { + width: 31px; + height: 14px; + background-image: url("handle.horizontal.png"); +} + +.dynamic-slider-control.horizontal .handle div {} +.dynamic-slider-control.horizontal .handle.hover {} + +.dynamic-slider-control.vertical .handle { + width: 15px; + height: 31px; + background-image: url("handle.vertical.png"); +} + +.dynamic-slider-control.vertical .handle.hover {} + +.dynamic-slider-control .line { + position: absolute; + font-size: 0.01mm; + overflow: hidden; + border: 1px solid rgb(90,97,90); + background: rgb(189,190,189); + + behavior: url("css/boxsizing.htc"); /* ie path bug */ + box-sizing: content-box; + -moz-box-sizing: content-box; +} +.dynamic-slider-control.vertical .line { + width: 3px; +} + +.dynamic-slider-control.horizontal .line { + height: 3px; +} + +.dynamic-slider-control .line div { + width: 1px; + height: 1px; + + border: 1px solid; + border-color: rgb(230,230,230) rgb(189,190,189) + rgb(189,190,189) rgb(230,230,230); +} diff --git a/slider/css/bluecurve/handle.horizontal.png b/slider/css/bluecurve/handle.horizontal.png new file mode 100644 index 0000000..d9dc7ff Binary files /dev/null and b/slider/css/bluecurve/handle.horizontal.png differ diff --git a/slider/css/bluecurve/handle.vertical.png b/slider/css/bluecurve/handle.vertical.png new file mode 100644 index 0000000..0c00f85 Binary files /dev/null and b/slider/css/bluecurve/handle.vertical.png differ diff --git a/slider/css/bluecurve/horizontal.gif b/slider/css/bluecurve/horizontal.gif new file mode 100644 index 0000000..39d816b Binary files /dev/null and b/slider/css/bluecurve/horizontal.gif differ diff --git a/slider/css/bluecurve/vertical.gif b/slider/css/bluecurve/vertical.gif new file mode 100644 index 0000000..781eaac Binary files /dev/null and b/slider/css/bluecurve/vertical.gif differ diff --git a/slider/css/boxsizing.htc b/slider/css/boxsizing.htc new file mode 100644 index 0000000..fbeaa56 --- /dev/null +++ b/slider/css/boxsizing.htc @@ -0,0 +1,157 @@ + + + + + \ No newline at end of file diff --git a/slider/css/luna/handle.horizontal.hover.png b/slider/css/luna/handle.horizontal.hover.png new file mode 100644 index 0000000..d2fd059 Binary files /dev/null and b/slider/css/luna/handle.horizontal.hover.png differ diff --git a/slider/css/luna/handle.horizontal.png b/slider/css/luna/handle.horizontal.png new file mode 100644 index 0000000..b3af6bb Binary files /dev/null and b/slider/css/luna/handle.horizontal.png differ diff --git a/slider/css/luna/handle.vertical.hover.png b/slider/css/luna/handle.vertical.hover.png new file mode 100644 index 0000000..379cdc2 Binary files /dev/null and b/slider/css/luna/handle.vertical.hover.png differ diff --git a/slider/css/luna/handle.vertical.png b/slider/css/luna/handle.vertical.png new file mode 100644 index 0000000..537135e Binary files /dev/null and b/slider/css/luna/handle.vertical.png differ diff --git a/slider/css/luna/luna.css b/slider/css/luna/luna.css new file mode 100644 index 0000000..25597da --- /dev/null +++ b/slider/css/luna/luna.css @@ -0,0 +1,75 @@ +.dynamic-slider-control { + position: relative; + background-color: ThreeDFace; + -moz-user-focus: normal; + -moz-user-select: none; + cursor: default; +} + +.horizontal { + width: 200px; + height: 27px; +} + +.vertical { + width: 29px; + height: 200px; +} + +.dynamic-slider-control input { + display: none; +} + +.dynamic-slider-control .handle { + position: absolute; + font-size: 1px; + overflow: hidden; + -moz-user-select: none; + cursor: default; +} + +.dynamic-slider-control.horizontal .handle { + width: 11px; + height: 21px; + background-image: url("handle.horizontal.png"); +} + +.dynamic-slider-control.horizontal .handle div {} +.dynamic-slider-control.horizontal .handle.hover { + background-image: url("handle.horizontal.hover.png"); +} + +.dynamic-slider-control.vertical .handle { + width: 25px; + height: 13px; + background-image: url("handle.vertical.png"); +} + +.dynamic-slider-control.vertical .handle.hover { + background-image: url("handle.vertical.hover.png"); +} + +.dynamic-slider-control .line { + position: absolute; + font-size: 0.01mm; + overflow: hidden; + border: 1px solid; + border-color: ThreeDShadow ThreeDHighlight + ThreeDHighlight ThreeDShadow; + -moz-border-radius: 50%; + + behavior: url("css/boxsizing.htc"); /* ie path bug */ + box-sizing: content-box; + -moz-box-sizing: content-box; +} +.dynamic-slider-control.vertical .line { + width: 2px; +} + +.dynamic-slider-control.horizontal .line { + height: 2px; +} + +.dynamic-slider-control .line div { + display: none; +} \ No newline at end of file diff --git a/slider/css/swing/handle.horizontal.png b/slider/css/swing/handle.horizontal.png new file mode 100644 index 0000000..6c7fb90 Binary files /dev/null and b/slider/css/swing/handle.horizontal.png differ diff --git a/slider/css/swing/handle.vertical.png b/slider/css/swing/handle.vertical.png new file mode 100644 index 0000000..ca1ac4a Binary files /dev/null and b/slider/css/swing/handle.vertical.png differ diff --git a/slider/css/swing/swing.css b/slider/css/swing/swing.css new file mode 100644 index 0000000..53ba9f2 --- /dev/null +++ b/slider/css/swing/swing.css @@ -0,0 +1,82 @@ +/* + dark rgb(102,102,102) + medium rgb(152,153,153) + gray: rgb(204,204,204) + bright: white; + */ + +.dynamic-slider-control { + position: relative; + background-color: rgb(204,204,204); + -moz-user-focus: normal; + -moz-user-select: none; + cursor: default; +} + +.horizontal { + width: 200px; + height: 27px; +} + +.vertical { + width: 29px; + height: 200px; +} + +.dynamic-slider-control input { + display: none; +} + +.dynamic-slider-control .handle { + position: absolute; + font-size: 1px; + overflow: hidden; + -moz-user-select: none; + cursor: default; +} + +.dynamic-slider-control.horizontal .handle { + width: 15px; + height: 16px; + background-image: url("handle.horizontal.png"); +} + +.dynamic-slider-control.horizontal .handle div {} +.dynamic-slider-control.horizontal .handle.hover {} + +.dynamic-slider-control.vertical .handle { + width: 16px; + height: 15px; + background-image: url("handle.vertical.png"); +} + +.dynamic-slider-control.vertical .handle.hover {} + +.dynamic-slider-control .line { + position: absolute; + font-size: 0.01mm; + overflow: hidden; + border: 1px solid; + border-color: rgb(102,102,102) white + white rgb(102,102,102); + + behavior: url("css/boxsizing.htc"); /* ie path bug */ + box-sizing: content-box; + -moz-box-sizing: content-box; +} +.dynamic-slider-control.vertical .line { + width: 4px; +} + +.dynamic-slider-control.horizontal .line { + height: 4px; +} + +.dynamic-slider-control .line div { + width: 2px; + height: 2px; + + border: 1px solid; + border-color: rgb(152,153,153) rgb(102,102,102) + rgb(102,102,102) rgb(152,153,153); +} \ No newline at end of file diff --git a/slider/css/winclassic.css b/slider/css/winclassic.css new file mode 100644 index 0000000..4b005a5 --- /dev/null +++ b/slider/css/winclassic.css @@ -0,0 +1,99 @@ +.dynamic-slider-control { + position: relative; + background-color: ThreeDFace; + -moz-user-focus: normal; + -moz-user-select: none; + cursor: default; +} + +.horizontal { + width: 200px; + height: 29px; +} + +.vertical { + width: 29px; + height: 200px; +} + +.dynamic-slider-control input { + display: none; +} + +.dynamic-slider-control .handle { + position: absolute; + -moz-user-select: none; + cursor: default; + background: ThreeDFace; + border: 1px solid; + border-color: ThreeDHighlight ThreeDDarkShadow + ThreeDDarkShadow ThreeDHighlight; +} + +/* inner border */ +.dynamic-slider-control .handle div { + font-size: 1px; + border: 1px solid; + border-color: ThreeDLightShadow ThreeDShadow + ThreeDShadow ThreeDLightShadow; + + behavior: url("css/boxsizing.htc"); /* ie path bug */ + box-sizing: content-box; + -moz-box-sizing: content-box; +} + +/* inner sets size +.dynamic-slider-control.horizontal .handle { + width: 12px; + height: 22px; +} +*/ + +.dynamic-slider-control.horizontal .handle div { + width: 8px; + height: 18px; +} + +.dynamic-slider-control.horizontal .handle.hover {} + +/* inner sets size +.dynamic-slider-control.vertical .handle { + width: 22px; + height: 12px; +} +*/ + +.dynamic-slider-control.vertical .handle div { + width: 18px; + height: 8px; +} + +.dynamic-slider-control.vertical .handle.hover {} + +.dynamic-slider-control .line { + + behavior: url("css/boxsizing.htc"); /* ie path bug */ + box-sizing: content-box; + -moz-box-sizing: content-box; + + position: absolute; + font-size: 0.01mm; + overflow: hidden; + border: 1px solid; + border-color: ThreeDShadow ThreeDHighlight + ThreeDHighlight ThreeDShadow; + background: ThreeDDarkShadow; +} + +.dynamic-slider-control.vertical .line { + width: 1px; + +} + +.dynamic-slider-control.horizontal .line { + height: 1px; +} + +.dynamic-slider-control .line div { + display: none; +} \ No newline at end of file diff --git a/slider/js/range.js b/slider/js/range.js new file mode 100644 index 0000000..54f9a48 --- /dev/null +++ b/slider/js/range.js @@ -0,0 +1,132 @@ +/*----------------------------------------------------------------------------\ +| Range Class | +|-----------------------------------------------------------------------------| +| Created by Erik Arvidsson | +| (http://webfx.eae.net/contact.html#erik) | +| For WebFX (http://webfx.eae.net/) | +|-----------------------------------------------------------------------------| +| Used to model the data used when working with sliders, scrollbars and | +| progress bars. Based on the ideas of the javax.swing.BoundedRangeModel | +| interface defined by Sun for Java; http://java.sun.com/products/jfc/ | +| swingdoc-api-1.0.3/com/sun/java/swing/BoundedRangeModel.html | +|-----------------------------------------------------------------------------| +| Copyright (c) 2002, 2005, 2006 Erik Arvidsson | +|-----------------------------------------------------------------------------| +| Licensed under the Apache License, Version 2.0 (the "License"); you may not | +| use this file except in compliance with the License. You may obtain a copy | +| of the License at http://www.apache.org/licenses/LICENSE-2.0 | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| Unless required by applicable law or agreed to in writing, software | +| distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | +| WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the | +| License for the specific language governing permissions and limitations | +| under the License. | +|-----------------------------------------------------------------------------| +| 2002-10-14 | Original version released | +| 2005-10-27 | Use Math.round instead of Math.floor | +| 2006-05-28 | Changed license to Apache Software License 2.0. | +|-----------------------------------------------------------------------------| +| Created 2002-10-14 | All changes are in the log above. | Updated 2006-05-28 | +\----------------------------------------------------------------------------*/ + + +function Range() { + this._value = 0; + this._minimum = 0; + this._maximum = 100; + this._extent = 0; + + this._isChanging = false; +} + +Range.prototype.setValue = function (value) { + value = Math.round(parseFloat(value)); + if (isNaN(value)) return; + if (this._value != value) { + if (value + this._extent > this._maximum) + this._value = this._maximum - this._extent; + else if (value < this._minimum) + this._value = this._minimum; + else + this._value = value; + if (!this._isChanging && typeof this.onchange == "function") + this.onchange(); + } +}; + +Range.prototype.getValue = function () { + return this._value; +}; + +Range.prototype.setExtent = function (extent) { + if (this._extent != extent) { + if (extent < 0) + this._extent = 0; + else if (this._value + extent > this._maximum) + this._extent = this._maximum - this._value; + else + this._extent = extent; + if (!this._isChanging && typeof this.onchange == "function") + this.onchange(); + } +}; + +Range.prototype.getExtent = function () { + return this._extent; +}; + +Range.prototype.setMinimum = function (minimum) { + if (this._minimum != minimum) { + var oldIsChanging = this._isChanging; + this._isChanging = true; + + this._minimum = minimum; + + if (minimum > this._value) + this.setValue(minimum); + if (minimum > this._maximum) { + this._extent = 0; + this.setMaximum(minimum); + this.setValue(minimum) + } + if (minimum + this._extent > this._maximum) + this._extent = this._maximum - this._minimum; + + this._isChanging = oldIsChanging; + if (!this._isChanging && typeof this.onchange == "function") + this.onchange(); + } +}; + +Range.prototype.getMinimum = function () { + return this._minimum; +}; + +Range.prototype.setMaximum = function (maximum) { + if (this._maximum != maximum) { + var oldIsChanging = this._isChanging; + this._isChanging = true; + + this._maximum = maximum; + + if (maximum < this._value) + this.setValue(maximum - this._extent); + if (maximum < this._minimum) { + this._extent = 0; + this.setMinimum(maximum); + this.setValue(this._maximum); + } + if (maximum < this._minimum + this._extent) + this._extent = this._maximum - this._minimum; + if (maximum < this._value + this._extent) + this._extent = this._maximum - this._value; + + this._isChanging = oldIsChanging; + if (!this._isChanging && typeof this.onchange == "function") + this.onchange(); + } +}; + +Range.prototype.getMaximum = function () { + return this._maximum; +}; diff --git a/slider/js/slider.js b/slider/js/slider.js new file mode 100644 index 0000000..865a625 --- /dev/null +++ b/slider/js/slider.js @@ -0,0 +1,489 @@ +/*----------------------------------------------------------------------------\ +| Slider 1.02 | +|-----------------------------------------------------------------------------| +| Created by Erik Arvidsson | +| (http://webfx.eae.net/contact.html#erik) | +| For WebFX (http://webfx.eae.net/) | +|-----------------------------------------------------------------------------| +| A slider control that degrades to an input control for non supported | +| browsers. | +|-----------------------------------------------------------------------------| +| Copyright (c) 2002, 2003, 2006 Erik Arvidsson | +|-----------------------------------------------------------------------------| +| Licensed under the Apache License, Version 2.0 (the "License"); you may not | +| use this file except in compliance with the License. You may obtain a copy | +| of the License at http://www.apache.org/licenses/LICENSE-2.0 | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| Unless required by applicable law or agreed to in writing, software | +| distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | +| WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the | +| License for the specific language governing permissions and limitations | +| under the License. | +|-----------------------------------------------------------------------------| +| Dependencies: timer.js - an OO abstraction of timers | +| range.js - provides the data model for the slider | +| winclassic.css or any other css file describing the look | +|-----------------------------------------------------------------------------| +| 2002-10-14 | Original version released | +| 2003-03-27 | Added a test in the constructor for missing oElement arg | +| 2003-11-27 | Only use mousewheel when focused | +| 2006-05-28 | Changed license to Apache Software License 2.0. | +|-----------------------------------------------------------------------------| +| Created 2002-10-14 | All changes are in the log above. | Updated 2006-05-28 | +\----------------------------------------------------------------------------*/ + +Slider.isSupported = typeof document.createElement != "undefined" && + typeof document.documentElement != "undefined" && + typeof document.documentElement.offsetWidth == "number"; + + +function Slider(oElement, oInput, sOrientation) { + if (!oElement) return; + this._orientation = sOrientation || "horizontal"; + this._range = new Range(); + this._range.setExtent(0); + this._blockIncrement = 10; + this._unitIncrement = 1; + this._timer = new Timer(100); + + + if (Slider.isSupported && oElement) { + + this.document = oElement.ownerDocument || oElement.document; + + this.element = oElement; + this.element.slider = this; + this.element.unselectable = "on"; + + // add class name tag to class name + this.element.className = this._orientation + " " + this.classNameTag + " " + this.element.className; + + // create line + this.line = this.document.createElement("DIV"); + this.line.className = "line"; + this.line.unselectable = "on"; + this.line.appendChild(this.document.createElement("DIV")); + this.element.appendChild(this.line); + + // create handle + this.handle = this.document.createElement("DIV"); + this.handle.className = "handle"; + this.handle.unselectable = "on"; + this.handle.appendChild(this.document.createElement("DIV")); + this.handle.firstChild.appendChild( + this.document.createTextNode(String.fromCharCode(160))); + this.element.appendChild(this.handle); + } + + this.input = oInput; + + // events + var oThis = this; + this._range.onchange = function () { + oThis.recalculate(); + if (typeof oThis.onchange == "function") + oThis.onchange(); + }; + + if (Slider.isSupported && oElement) { + this.element.onfocus = Slider.eventHandlers.onfocus; + this.element.onblur = Slider.eventHandlers.onblur; + this.element.onmousedown = Slider.eventHandlers.onmousedown; + this.element.onmouseover = Slider.eventHandlers.onmouseover; + this.element.onmouseout = Slider.eventHandlers.onmouseout; + this.element.onkeydown = Slider.eventHandlers.onkeydown; + this.element.onkeypress = Slider.eventHandlers.onkeypress; + this.element.onmousewheel = Slider.eventHandlers.onmousewheel; + this.handle.onselectstart = + this.element.onselectstart = function () { return false; }; + + this._timer.ontimer = function () { + oThis.ontimer(); + }; + + // extra recalculate for ie + window.setTimeout(function() { + oThis.recalculate(); + }, 1); + } + else { + this.input.onchange = function (e) { + oThis.setValue(oThis.input.value); + }; + } +} + +Slider.eventHandlers = { + + // helpers to make events a bit easier + getEvent: function (e, el) { + if (!e) { + if (el) + e = el.document.parentWindow.event; + else + e = window.event; + } + if (!e.srcElement) { + var el = e.target; + while (el != null && el.nodeType != 1) + el = el.parentNode; + e.srcElement = el; + } + if (typeof e.offsetX == "undefined") { + e.offsetX = e.layerX; + e.offsetY = e.layerY; + } + + return e; + }, + + getDocument: function (e) { + if (e.target) + return e.target.ownerDocument; + return e.srcElement.document; + }, + + getSlider: function (e) { + var el = e.target || e.srcElement; + while (el != null && el.slider == null) { + el = el.parentNode; + } + if (el) + return el.slider; + return null; + }, + + getLine: function (e) { + var el = e.target || e.srcElement; + while (el != null && el.className != "line") { + el = el.parentNode; + } + return el; + }, + + getHandle: function (e) { + var el = e.target || e.srcElement; + var re = /handle/; + while (el != null && !re.test(el.className)) { + el = el.parentNode; + } + return el; + }, + // end helpers + + onfocus: function (e) { + var s = this.slider; + s._focused = true; + s.handle.className = "handle hover"; + }, + + onblur: function (e) { + var s = this.slider + s._focused = false; + s.handle.className = "handle"; + }, + + onmouseover: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + var s = this.slider; + if (e.srcElement == s.handle) + s.handle.className = "handle hover"; + }, + + onmouseout: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + var s = this.slider; + if (e.srcElement == s.handle && !s._focused) + s.handle.className = "handle"; + }, + + onmousedown: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + var s = this.slider; + if (s.element.focus) + s.element.focus(); + + Slider._currentInstance = s; + var doc = s.document; + + if (doc.addEventListener) { + doc.addEventListener("mousemove", Slider.eventHandlers.onmousemove, true); + doc.addEventListener("mouseup", Slider.eventHandlers.onmouseup, true); + } + else if (doc.attachEvent) { + doc.attachEvent("onmousemove", Slider.eventHandlers.onmousemove); + doc.attachEvent("onmouseup", Slider.eventHandlers.onmouseup); + doc.attachEvent("onlosecapture", Slider.eventHandlers.onmouseup); + s.element.setCapture(); + } + + if (Slider.eventHandlers.getHandle(e)) { // start drag + Slider._sliderDragData = { + screenX: e.screenX, + screenY: e.screenY, + dx: e.screenX - s.handle.offsetLeft, + dy: e.screenY - s.handle.offsetTop, + startValue: s.getValue(), + slider: s + }; + } + else { + var lineEl = Slider.eventHandlers.getLine(e); + s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0); + s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0); + s._increasing = null; + s.ontimer(); + } + }, + + onmousemove: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + + if (Slider._sliderDragData) { // drag + var s = Slider._sliderDragData.slider; + + var boundSize = s.getMaximum() - s.getMinimum(); + var size, pos, reset; + + if (s._orientation == "horizontal") { + size = s.element.offsetWidth - s.handle.offsetWidth; + pos = e.screenX - Slider._sliderDragData.dx; + reset = Math.abs(e.screenY - Slider._sliderDragData.screenY) > 100; + } + else { + size = s.element.offsetHeight - s.handle.offsetHeight; + pos = s.element.offsetHeight - s.handle.offsetHeight - + (e.screenY - Slider._sliderDragData.dy); + reset = Math.abs(e.screenX - Slider._sliderDragData.screenX) > 100; + } + s.setValue(reset ? Slider._sliderDragData.startValue : + s.getMinimum() + boundSize * pos / size); + return false; + } + else { + var s = Slider._currentInstance; + if (s != null) { + var lineEl = Slider.eventHandlers.getLine(e); + s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0); + s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0); + } + } + + }, + + onmouseup: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + var s = Slider._currentInstance; + var doc = s.document; + if (doc.removeEventListener) { + doc.removeEventListener("mousemove", Slider.eventHandlers.onmousemove, true); + doc.removeEventListener("mouseup", Slider.eventHandlers.onmouseup, true); + } + else if (doc.detachEvent) { + doc.detachEvent("onmousemove", Slider.eventHandlers.onmousemove); + doc.detachEvent("onmouseup", Slider.eventHandlers.onmouseup); + doc.detachEvent("onlosecapture", Slider.eventHandlers.onmouseup); + s.element.releaseCapture(); + } + + if (Slider._sliderDragData) { // end drag + Slider._sliderDragData = null; + } + else { + s._timer.stop(); + s._increasing = null; + } + Slider._currentInstance = null; + }, + + onkeydown: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + //var s = Slider.eventHandlers.getSlider(e); + var s = this.slider; + var kc = e.keyCode; + switch (kc) { + case 33: // page up + s.setValue(s.getValue() + s.getBlockIncrement()); + break; + case 34: // page down + s.setValue(s.getValue() - s.getBlockIncrement()); + break; + case 35: // end + s.setValue(s.getOrientation() == "horizontal" ? + s.getMaximum() : + s.getMinimum()); + break; + case 36: // home + s.setValue(s.getOrientation() == "horizontal" ? + s.getMinimum() : + s.getMaximum()); + break; + case 38: // up + case 39: // right + s.setValue(s.getValue() + s.getUnitIncrement()); + break; + + case 37: // left + case 40: // down + s.setValue(s.getValue() - s.getUnitIncrement()); + break; + } + + if (kc >= 33 && kc <= 40) { + return false; + } + }, + + onkeypress: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + var kc = e.keyCode; + if (kc >= 33 && kc <= 40) { + return false; + } + }, + + onmousewheel: function (e) { + e = Slider.eventHandlers.getEvent(e, this); + var s = this.slider; + if (s._focused) { + s.setValue(s.getValue() + e.wheelDelta / 120 * s.getUnitIncrement()); + // windows inverts this on horizontal sliders. That does not + // make sense to me + return false; + } + } +}; + + + +Slider.prototype.classNameTag = "dynamic-slider-control", + +Slider.prototype.setValue = function (v) { + this._range.setValue(v); + this.input.value = this.getValue(); +}; + +Slider.prototype.getValue = function () { + return this._range.getValue(); +}; + +Slider.prototype.setMinimum = function (v) { + this._range.setMinimum(v); + this.input.value = this.getValue(); +}; + +Slider.prototype.getMinimum = function () { + return this._range.getMinimum(); +}; + +Slider.prototype.setMaximum = function (v) { + this._range.setMaximum(v); + this.input.value = this.getValue(); +}; + +Slider.prototype.getMaximum = function () { + return this._range.getMaximum(); +}; + +Slider.prototype.setUnitIncrement = function (v) { + this._unitIncrement = v; +}; + +Slider.prototype.getUnitIncrement = function () { + return this._unitIncrement; +}; + +Slider.prototype.setBlockIncrement = function (v) { + this._blockIncrement = v; +}; + +Slider.prototype.getBlockIncrement = function () { + return this._blockIncrement; +}; + +Slider.prototype.getOrientation = function () { + return this._orientation; +}; + +Slider.prototype.setOrientation = function (sOrientation) { + if (sOrientation != this._orientation) { + if (Slider.isSupported && this.element) { + // add class name tag to class name + this.element.className = this.element.className.replace(this._orientation, + sOrientation); + } + this._orientation = sOrientation; + this.recalculate(); + + } +}; + +Slider.prototype.recalculate = function() { + if (!Slider.isSupported || !this.element) return; + + var w = this.element.offsetWidth; + var h = this.element.offsetHeight; + var hw = this.handle.offsetWidth; + var hh = this.handle.offsetHeight; + var lw = this.line.offsetWidth; + var lh = this.line.offsetHeight; + + // this assumes a border-box layout + + if (this._orientation == "horizontal") { + this.handle.style.left = (w - hw) * (this.getValue() - this.getMinimum()) / + (this.getMaximum() - this.getMinimum()) + "px"; + this.handle.style.top = (h - hh) / 2 + "px"; + + this.line.style.top = (h - lh) / 2 + "px"; + this.line.style.left = hw / 2 + "px"; + //this.line.style.right = hw / 2 + "px"; + this.line.style.width = Math.max(0, w - hw - 2)+ "px"; + this.line.firstChild.style.width = Math.max(0, w - hw - 4)+ "px"; + } + else { + this.handle.style.left = (w - hw) / 2 + "px"; + this.handle.style.top = h - hh - (h - hh) * (this.getValue() - this.getMinimum()) / + (this.getMaximum() - this.getMinimum()) + "px"; + + this.line.style.left = (w - lw) / 2 + "px"; + this.line.style.top = hh / 2 + "px"; + this.line.style.height = Math.max(0, h - hh - 2) + "px"; //hard coded border width + //this.line.style.bottom = hh / 2 + "px"; + this.line.firstChild.style.height = Math.max(0, h - hh - 4) + "px"; //hard coded border width + } +}; + +Slider.prototype.ontimer = function () { + var hw = this.handle.offsetWidth; + var hh = this.handle.offsetHeight; + var hl = this.handle.offsetLeft; + var ht = this.handle.offsetTop; + + if (this._orientation == "horizontal") { + if (this._mouseX > hl + hw && + (this._increasing == null || this._increasing)) { + this.setValue(this.getValue() + this.getBlockIncrement()); + this._increasing = true; + } + else if (this._mouseX < hl && + (this._increasing == null || !this._increasing)) { + this.setValue(this.getValue() - this.getBlockIncrement()); + this._increasing = false; + } + } + else { + if (this._mouseY > ht + hh && + (this._increasing == null || !this._increasing)) { + this.setValue(this.getValue() - this.getBlockIncrement()); + this._increasing = false; + } + else if (this._mouseY < ht && + (this._increasing == null || this._increasing)) { + this.setValue(this.getValue() + this.getBlockIncrement()); + this._increasing = true; + } + } + + this._timer.start(); +}; \ No newline at end of file diff --git a/slider/js/timer.js b/slider/js/timer.js new file mode 100644 index 0000000..e96fe19 --- /dev/null +++ b/slider/js/timer.js @@ -0,0 +1,62 @@ +/*----------------------------------------------------------------------------\ +| Timer Class | +|-----------------------------------------------------------------------------| +| Created by Erik Arvidsson | +| (http://webfx.eae.net/contact.html#erik) | +| For WebFX (http://webfx.eae.net/) | +|-----------------------------------------------------------------------------| +| Object Oriented Encapsulation of setTimeout fires ontimer when the timer | +| is triggered. Does not work in IE 5.00 | +|-----------------------------------------------------------------------------| +| Copyright (c) 2002, 2006 Erik Arvidsson | +|-----------------------------------------------------------------------------| +| Licensed under the Apache License, Version 2.0 (the "License"); you may not | +| use this file except in compliance with the License. You may obtain a copy | +| of the License at http://www.apache.org/licenses/LICENSE-2.0 | +| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | +| Unless required by applicable law or agreed to in writing, software | +| distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | +| WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the | +| License for the specific language governing permissions and limitations | +| under the License. | +|-----------------------------------------------------------------------------| +| 2002-10-14 | Original version released | +| 2006-05-28 | Changed license to Apache Software License 2.0. | +|-----------------------------------------------------------------------------| +| Created 2002-10-14 | All changes are in the log above. | Updated 2006-05-28 | +\----------------------------------------------------------------------------*/ + +function Timer(nPauseTime) { + this._pauseTime = typeof nPauseTime == "undefined" ? 1000 : nPauseTime; + this._timer = null; + this._isStarted = false; +} + +Timer.prototype.start = function () { + if (this.isStarted()) + this.stop(); + var oThis = this; + this._timer = window.setTimeout(function () { + if (typeof oThis.ontimer == "function") + oThis.ontimer(); + }, this._pauseTime); + this._isStarted = false; +}; + +Timer.prototype.stop = function () { + if (this._timer != null) + window.clearTimeout(this._timer); + this._isStarted = false; +}; + +Timer.prototype.isStarted = function () { + return this._isStarted; +}; + +Timer.prototype.getPauseTime = function () { + return this._pauseTime; +}; + +Timer.prototype.setPauseTime = function (nPauseTime) { + this._pauseTime = nPauseTime; +}; \ No newline at end of file diff --git a/slider/license.txt b/slider/license.txt new file mode 100644 index 0000000..75b5248 --- /dev/null +++ b/slider/license.txt @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. -- cgit v1.2.3-18-g5258