From: Michael M Slusarz Date: Thu, 28 Jan 2010 17:53:39 +0000 (-0700) Subject: Move DimpSlider to horde (rename to Slider2) X-Git-Url: https://git.internetallee.de/?a=commitdiff_plain;h=1ceacd58cf6a9caedf1eff4bb23221a1bb6e1963;p=horde.git Move DimpSlider to horde (rename to Slider2) --- diff --git a/horde/js/slider2.js b/horde/js/slider2.js new file mode 100644 index 000000000..91bd85885 --- /dev/null +++ b/horde/js/slider2.js @@ -0,0 +1,239 @@ +/** + * Slider2.js - A minimalist library to create a slider that acts like a + * browser's native scrollbar. + * + * Requires prototype.js 1.6.0.2+ + * + * + * Usage: + * ------ + * slider = new Slider2(track, opts); + * + * track - (element|string) TODO + * opts - (object) TODO + * + * Custom Events: + * -------------- + * Custom events are triggered on the track element. The parameters given + * below are available through the 'memo' property of the Event object. + * + * Slider2:change + * Fired when slidebar is released. + * params: NONE + * + * Slider2:slide + * Fired when slidebar is moved. + * params: NONE + * + * + * Adapted from script.aculo.us slider.js v1.8.0 + * (c) 2005-2007 Marty Haught, Thomas Fuchs + * http://script.aculo.us/ + * + * The original script was freely distributable under the terms of an + * MIT-style license. + * + * Permission is hereby granted, free of charge, to any person obtaining a + * copy of this software and associated documentation files (the "Software"), + * to deal in the Software without restriction, including without limitation + * the rights to use, copy, modify, merge, publish, distribute, sublicense, + * and/or sell copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following conditions: + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER + * DEALINGS IN THE SOFTWARE. + * + * Copyright 2007-2010 The Horde Project (http://www.horde.org/) + * + * @author Michael Slusarz + */ + +var Slider2 = Class.create({ + value: 0, + + initialize: function(track, options) + { + this.track = $(track); + this.options = Object.extend({ + buttonclass: null, + cursorclass: null, + pagesize: 0, + totalsize: 0 + }, options || {}); + + this.handle = new Element('DIV', { className: this.options.cursorclass }).makePositioned(); + this.track.insert(this.handle); + + if (this.options.buttonclass) { + this.sbup = new Element('DIV', { className: this.options.buttonclass.up }); + this.sbdown = new Element('DIV', { className: this.options.buttonclass.down }).makePositioned(); + this.handle.insert({ before: this.sbup, after: this.sbdown }); + [ this.sbup, this.sbdown ].invoke('observe', 'mousedown', this._arrowClick.bindAsEventListener(this)); + } + + if (Prototype.Browser.IE) { + [ this.track, this.sbup ].invoke('makePositioned'); + } + + this.value = 0; + this.active = this.dragging = false; + + if (this.needScroll()) { + this._initScroll(); + } + + this.eventMU = this._endDrag.bindAsEventListener(this); + this.eventMM = this._update.bindAsEventListener(this); + + [ this.handle, this.track ].invoke('observe', 'mousedown', this._startDrag.bindAsEventListener(this)); + }, + + _initScroll: function() + { + if (this.init) { + return; + } + this.init = true; + this.track.show(); + this._updateHandleLength(); + }, + + _startDrag: function(e) + { + if (!e.isLeftClick()) { + return; + } + + var dir, + hoffsets = this.handle.cumulativeOffset(); + + if (e.element() == this.track) { + dir = (e.pointerY() < hoffsets[1]) ? -1 : 1; + this.setScrollPosition(this.getValue() - dir + (this.options.pagesize * dir)); + } else { + this.curroffsets = this.track.cumulativeOffset(); + this.offsetY = e.pointerY() - hoffsets[1] + this.sbup.offsetHeight; + this.active = true; + + document.observe('mouseup', this.eventMU); + document.observe('mousemove', this.eventMM); + } + + e.stop(); + }, + + _update: function(e) + { + if (this.active) { + this.dragging = true; + this._setScrollPosition('px', Math.min(Math.max(0, e.pointerY() - this.offsetY - this.curroffsets[1]), this.handletop)); + this.track.fire('Slider2:slide'); + if (Prototype.Browser.WebKit) { + window.scrollBy(0,0); + } + e.stop(); + } + }, + + _endDrag: function(e) + { + if (this.active && this.dragging) { + this._updateFinished(); + e.stop(); + + document.stopObserving('mouseup', this.eventMU); + document.stopObserving('mousemove', this.eventMM); + } + this.active = this.dragging = false; + }, + + _arrowClick: function(e) + { + this.setScrollPosition(this.getValue() + ((e.element() == this.sbup) ? -1 : 1)); + }, + + _updateFinished: function() + { + this.track.fire('Slider2:change'); + }, + + setHandleLength: function(pagesize, totalsize) + { + this.options.pagesize = pagesize; + this.options.totalsize = totalsize; + }, + + updateHandleLength: function() + { + if (!this.needScroll()) { + this.value = 0; + this.track.hide(); + } else { + this.track.show(); + this._updateHandleLength(); + } + }, + + _updateHandleLength: function() + { + var t = this.track.offsetHeight - this.sbup.offsetHeight - this.sbdown.offsetHeight; + + // Minimum handle size = 10px + this.handle.setStyle({ height: Math.max(10, Math.round((this.options.pagesize / this.options.totalsize) * t)) + 'px' }); + this.handletop = t - this.handle.offsetHeight; + if (this.sbdown) { + this.sbdown.setStyle({ top: this.handletop + 'px' }); + } + this._setScrollPosition('val', this.getValue()); + }, + + getValue: function() + { + return this.value; + }, + + setScrollPosition: function(val) + { + var oldval = this.getValue(); + this._setScrollPosition('val', val); + if (oldval != this.getValue()) { + this._updateFinished(); + } + }, + + _setScrollPosition: function(type, data) + { + this.value = (type == 'val') + ? Math.min(Math.max(0, data), Math.max(0, this.options.totalsize - this.options.pagesize)) + : Math.max(0, Math.round(Math.min(data, this.handletop) / this.handletop * (this.options.totalsize - this.options.pagesize))); + + if (type == 'px') { + this.handlevalue = data; + } else { + this.handlevalue = Math.round(this.value / (this.options.totalsize - this.options.pagesize) * this.handletop); + + /* Always make sure there is at least 1 pixel if we are not at the + * absolute bottom or top. */ + if (isNaN(this.handlevalue)) { + this.handlevalue = 0; + } else if (this.handlevalue == 0 && this.value != 0) { + this.handlevalue += 1; + } else if (this.handlevalue == this.handletop && + ((this.options.totalsize - this.options.pagesize) != this.value)) { + this.handlevalue -= 1; + } + } + + this.handle.setStyle({ top: this.handlevalue + 'px' }); + }, + + needScroll: function() + { + return (this.options.pagesize < this.options.totalsize); + } +}); diff --git a/imp/index-dimp.php b/imp/index-dimp.php index 2905c493e..0892a20ab 100644 --- a/imp/index-dimp.php +++ b/imp/index-dimp.php @@ -18,14 +18,14 @@ Horde_Registry::appInit('imp'); $scripts = array( array('ContextSensitive.js', 'imp'), array('DimpBase.js', 'imp'), - array('DimpSlider.js', 'imp'), array('ViewPort.js', 'imp'), array('dialog.js', 'imp'), - array('dragdrop2.js', 'horde'), - array('imp.js', 'imp'), array('mailbox-dimp.js', 'imp'), + array('imp.js', 'imp'), + array('dragdrop2.js', 'horde'), array('popup.js', 'horde'), - array('redbox.js', 'horde') + array('redbox.js', 'horde'), + array('slider2.js', 'horde') ); /* Get site specific menu items. */ diff --git a/imp/js/DimpSlider.js b/imp/js/DimpSlider.js deleted file mode 100644 index 714ff7e45..000000000 --- a/imp/js/DimpSlider.js +++ /dev/null @@ -1,239 +0,0 @@ -/** - * DimpSlider.js - A minimalist library to create a slider that acts like a - * browser's native scrollbar. - * - * Requires prototype.js 1.6.0.2+ - * - * - * Usage: - * ------ - * slider = new DimpSlider(track, opts); - * - * track - (element|string) TODO - * opts - (object) TODO - * - * Custom Events: - * -------------- - * Custom events are triggered on the track element. The parameters given - * below are available through the 'memo' property of the Event object. - * - * DimpSlider:change - * Fired on TODO - * params: NONE - * - * DimpSlider:slide - * Fired on TODO - * params: NONE - * - * - * Adapted from script.aculo.us slider.js v1.8.0 - * (c) 2005-2007 Marty Haught, Thomas Fuchs - * http://script.aculo.us/ - * - * The original script was freely distributable under the terms of an - * MIT-style license. - * - * Permission is hereby granted, free of charge, to any person obtaining a - * copy of this software and associated documentation files (the "Software"), - * to deal in the Software without restriction, including without limitation - * the rights to use, copy, modify, merge, publish, distribute, sublicense, - * and/or sell copies of the Software, and to permit persons to whom the - * Software is furnished to do so, subject to the following conditions: - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER - * DEALINGS IN THE SOFTWARE. - * - * Copyright 2007-2010 The Horde Project (http://www.horde.org/) - * - * @author Michael Slusarz - */ - -var DimpSlider = Class.create({ - value: 0, - - initialize: function(track, options) - { - this.track = $(track); - this.options = Object.extend({ - buttonclass: null, - cursorclass: null, - pagesize: 0, - totalsize: 0 - }, options || {}); - - this.handle = new Element('DIV', { className: this.options.cursorclass }).makePositioned(); - this.track.insert(this.handle); - - if (this.options.buttonclass) { - this.sbup = new Element('DIV', { className: this.options.buttonclass.up }); - this.sbdown = new Element('DIV', { className: this.options.buttonclass.down }).makePositioned(); - this.handle.insert({ before: this.sbup, after: this.sbdown }); - [ this.sbup, this.sbdown ].invoke('observe', 'mousedown', this._arrowClick.bindAsEventListener(this)); - } - - if (Prototype.Browser.IE) { - [ this.track, this.sbup ].invoke('makePositioned'); - } - - this.value = 0; - this.active = this.dragging = false; - - if (this.needScroll()) { - this._initScroll(); - } - - this.eventMU = this._endDrag.bindAsEventListener(this); - this.eventMM = this._update.bindAsEventListener(this); - - [ this.handle, this.track ].invoke('observe', 'mousedown', this._startDrag.bindAsEventListener(this)); - }, - - _initScroll: function() - { - if (this.init) { - return; - } - this.init = true; - this.track.show(); - this._updateHandleLength(); - }, - - _startDrag: function(e) - { - if (!e.isLeftClick()) { - return; - } - - var dir, - hoffsets = this.handle.cumulativeOffset(); - - if (e.element() == this.track) { - dir = (e.pointerY() < hoffsets[1]) ? -1 : 1; - this.setScrollPosition(this.getValue() - dir + (this.options.pagesize * dir)); - } else { - this.curroffsets = this.track.cumulativeOffset(); - this.offsetY = e.pointerY() - hoffsets[1] + this.sbup.offsetHeight; - this.active = true; - - document.observe('mouseup', this.eventMU); - document.observe('mousemove', this.eventMM); - } - - e.stop(); - }, - - _update: function(e) - { - if (this.active) { - this.dragging = true; - this._setScrollPosition('px', Math.min(Math.max(0, e.pointerY() - this.offsetY - this.curroffsets[1]), this.handletop)); - this.track.fire('DimpSlider:slide'); - if (Prototype.Browser.WebKit) { - window.scrollBy(0,0); - } - e.stop(); - } - }, - - _endDrag: function(e) - { - if (this.active && this.dragging) { - this._updateFinished(); - e.stop(); - - document.stopObserving('mouseup', this.eventMU); - document.stopObserving('mousemove', this.eventMM); - } - this.active = this.dragging = false; - }, - - _arrowClick: function(e) - { - this.setScrollPosition(this.getValue() + ((e.element() == this.sbup) ? -1 : 1)); - }, - - _updateFinished: function() - { - this.track.fire('DimpSlider:change'); - }, - - setHandleLength: function(pagesize, totalsize) - { - this.options.pagesize = pagesize; - this.options.totalsize = totalsize; - }, - - updateHandleLength: function() - { - if (!this.needScroll()) { - this.value = 0; - this.track.hide(); - } else { - this.track.show(); - this._updateHandleLength(); - } - }, - - _updateHandleLength: function() - { - var t = this.track.offsetHeight - this.sbup.offsetHeight - this.sbdown.offsetHeight; - - // Minimum handle size = 10px - this.handle.setStyle({ height: Math.max(10, Math.round((this.options.pagesize / this.options.totalsize) * t)) + 'px' }); - this.handletop = t - this.handle.offsetHeight; - if (this.sbdown) { - this.sbdown.setStyle({ top: this.handletop + 'px' }); - } - this._setScrollPosition('val', this.getValue()); - }, - - getValue: function() - { - return this.value; - }, - - setScrollPosition: function(val) - { - var oldval = this.getValue(); - this._setScrollPosition('val', val); - if (oldval != this.getValue()) { - this._updateFinished(); - } - }, - - _setScrollPosition: function(type, data) - { - this.value = (type == 'val') - ? Math.min(Math.max(0, data), Math.max(0, this.options.totalsize - this.options.pagesize)) - : Math.max(0, Math.round(Math.min(data, this.handletop) / this.handletop * (this.options.totalsize - this.options.pagesize))); - - if (type == 'px') { - this.handlevalue = data; - } else { - this.handlevalue = Math.round(this.value / (this.options.totalsize - this.options.pagesize) * this.handletop); - - /* Always make sure there is at least 1 pixel if we are not at the - * absolute bottom or top. */ - if (isNaN(this.handlevalue)) { - this.handlevalue = 0; - } else if (this.handlevalue == 0 && this.value != 0) { - this.handlevalue += 1; - } else if (this.handlevalue == this.handletop && - ((this.options.totalsize - this.options.pagesize) != this.value)) { - this.handlevalue -= 1; - } - } - - this.handle.setStyle({ top: this.handlevalue + 'px' }); - }, - - needScroll: function() - { - return (this.options.pagesize < this.options.totalsize); - } -}); diff --git a/imp/js/ViewPort.js b/imp/js/ViewPort.js index c7c9078f5..bf7f339e8 100644 --- a/imp/js/ViewPort.js +++ b/imp/js/ViewPort.js @@ -210,8 +210,8 @@ * vpScrollDown - The DOWN arrow. * * - * Requires prototypejs 1.6+, DimpSlider.js, scriptaculous 1.8+ (effects.js - * only), and Horde's dragdrop2.js. + * Requires prototypejs 1.6+, scriptaculous 1.8+ (effects.js only), and + * Horde's dragdrop2.js and slider2.js. * * Copyright 2005-2010 The Horde Project (http://www.horde.org/) * @@ -1301,13 +1301,13 @@ ViewPort_Scroller = Class.create({ this.scrollDiv = new Element('DIV', { className: 'vpScroll' }).setStyle({ overflow: 'hidden' }).hide(); c.insert({ after: this.scrollDiv }); - this.scrollDiv.observe('DimpSlider:change', this._onScroll.bind(this)); + this.scrollDiv.observe('Slider2:change', this._onScroll.bind(this)); if (this.vp.opts.onSlide) { - this.scrollDiv.observe('DimpSlider:slide', this.vp.opts.onSlide); + this.scrollDiv.observe('Slider2:slide', this.vp.opts.onSlide); } // Create scrollbar object. - this.scrollbar = new DimpSlider(this.scrollDiv, { + this.scrollbar = new Slider2(this.scrollDiv, { buttonclass: { up: 'vpScrollUp', down: 'vpScrollDown' }, cursorclass: 'vpScrollCursor', pagesize: this.vp.getPageSize(),