src/jp/sourceforge/manganetwork/page/javascripts/spinelz_lib/resize.js

   1 // Copyright (c) 2005 Thomas Fakes (http://craz8.com)
   2 //
   3 // This code is substantially based on code from script.aculo.us which has the
   4 // following copyright and permission notice
   5 //
   6 // Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
   7 //
   8 // Permission is hereby granted, free of charge, to any person obtaining
   9 // a copy of this software and associated documentation files (the
  10 // "Software"), to deal in the Software without restriction, including
  11 // without limitation the rights to use, copy, modify, merge, publish,
  12 // distribute, sublicense, and/or sell copies of the Software, and to
  13 // permit persons to whom the Software is furnished to do so, subject to
  14 // the following conditions:
  15 //
  16 // The above copyright notice and this permission notice shall be
  17 // included in all copies or substantial portions of the Software.
  18 //
  19 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  20 // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  21 // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  22 // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
  23 // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
  24 // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
  25 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  26
  27 var Resizeable = Class.create();
  28 Resizeable.prototype = {
  29   initialize: function(element) {
  30     var options = Object.extend({
  31       top: 6,
  32       bottom: 6,
  33       left: 6,
  34       right: 6,
  35       minHeight: 0,
  36       minWidth: 0,
  37       zindex: 1000,
  38       resize: null
  39     }, arguments[1] || {});
  40
  41     this.element      = $(element);
  42     this.handle           = this.element;
  43
  44     Element.makePositioned(this.element); // fix IE
  45
  46     this.options      = options;
  47
  48     this.active       = false;
  49     this.resizing     = false;
  50     this.currentDirection = '';
  51
  52     this.eventMouseDown = this.startResize.bindAsEventListener(this);
  53     this.eventMouseUp   = this.endResize.bindAsEventListener(this);
  54     this.eventMouseMove = this.update.bindAsEventListener(this);
  55     this.eventCursorCheck = this.cursor.bindAsEventListener(this);
  56     this.eventKeypress  = this.keyPress.bindAsEventListener(this);
  57
  58     this.registerEvents();
  59   },
  60   destroy: function() {
  61     Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
  62     this.unregisterEvents();
  63   },
  64   registerEvents: function() {
  65     Event.observe(document, "mouseup", this.eventMouseUp);
  66     Event.observe(document, "mousemove", this.eventMouseMove);
  67     Event.observe(document, "keypress", this.eventKeypress);
  68     Event.observe(this.handle, "mousedown", this.eventMouseDown);
  69     Event.observe(this.element, "mousemove", this.eventCursorCheck);
  70   },
  71   unregisterEvents: function() {
  72     //if(!this.active) return;
  73     //Event.stopObserving(document, "mouseup", this.eventMouseUp);
  74     //Event.stopObserving(document, "mousemove", this.eventMouseMove);
  75     //Event.stopObserving(document, "mousemove", this.eventCursorCheck);
  76     //Event.stopObserving(document, "keypress", this.eventKeypress);
  77   },
  78   startResize: function(event) {
  79     if(Event.isLeftClick(event)) {
  80
  81       // abort on form elements, fixes a Firefox issue
  82       var src = Event.element(event);
  83       if(src.tagName && (
  84         src.tagName=='INPUT' ||
  85         src.tagName=='SELECT' ||
  86         src.tagName=='BUTTON' ||
  87         src.tagName=='TEXTAREA')) return;
  88
  89           var dir = this.directions(event);
  90           if (dir.length > 0) {
  91               this.active = true;
  92           var offsets = Position.cumulativeOffset(this.element);
  93               this.startTop = offsets[1];
  94               this.startLeft = offsets[0];
  95               this.startWidth = parseInt(Element.getStyle(this.element, 'width'));
  96               this.startHeight = parseInt(Element.getStyle(this.element, 'height'));
  97               this.startX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  98               this.startY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  99
 100               this.currentDirection = dir;
 101               Event.stop(event);
 102           }
 103     }
 104   },
 105   finishResize: function(event, success) {
 106     // this.unregisterEvents();
 107
 108     this.active = false;
 109     this.resizing = false;
 110
 111     if(this.options.zindex)
 112       this.element.style.zIndex = this.originalZ;
 113
 114     if (this.options.resize) {
 115         this.options.resize(this.element);
 116     }
 117   },
 118   keyPress: function(event) {
 119     if(this.active) {
 120       if(event.keyCode==Event.KEY_ESC) {
 121         this.finishResize(event, false);
 122         Event.stop(event);
 123       }
 124     }
 125   },
 126   endResize: function(event) {
 127     if(this.active && this.resizing) {
 128       this.finishResize(event, true);
 129       Event.stop(event);
 130     }
 131     this.active = false;
 132     this.resizing = false;
 133   },
 134   draw: function(event) {
 135     var pointer = [Event.pointerX(event), Event.pointerY(event)];
 136     var style = this.element.style;
 137     if (this.currentDirection.indexOf('n') != -1) {
 138         var pointerMoved = this.startY - pointer[1];
 139         var margin = Element.getStyle(this.element, 'margin-top') || "0";
 140         var newHeight = this.startHeight + pointerMoved;
 141         if (newHeight > this.options.minHeight) {
 142                 style.height = newHeight + "px";
 143                 style.top = (this.startTop - pointerMoved - parseInt(margin)) + "px";
 144         }
 145     }
 146     if (this.currentDirection.indexOf('w') != -1) {
 147         var pointerMoved = this.startX - pointer[0];
 148         var margin = Element.getStyle(this.element, 'margin-left') || "0";
 149         var newWidth = this.startWidth + pointerMoved;
 150         if (newWidth > this.options.minWidth) {
 151                 style.left = (this.startLeft - pointerMoved - parseInt(margin))  + "px";
 152                 style.width = newWidth + "px";
 153         }
 154     }
 155     if (this.currentDirection.indexOf('s') != -1) {
 156         var newHeight = this.startHeight + pointer[1] - this.startY;
 157         if (newHeight > this.options.minHeight) {
 158                 style.height = newHeight + "px";
 159         }
 160     }
 161     if (this.currentDirection.indexOf('e') != -1) {
 162         var newWidth = this.startWidth + pointer[0] - this.startX;
 163         if (newWidth > this.options.minWidth) {
 164                 style.width = newWidth + "px";
 165         }
 166     }
 167     if(style.visibility=="hidden") style.visibility = ""; // fix gecko rendering
 168   },
 169   between: function(val, low, high) {
 170         return (val >= low && val < high);
 171   },
 172   directions: function(event) {
 173     var pointer = [Event.pointerX(event), Event.pointerY(event)];
 174     var offsets = Position.cumulativeOffset(this.element);
 175
 176         var cursor = '';
 177         if (this.between(pointer[1] - offsets[1], 0, this.options.top)) cursor += 'n';
 178         if (this.between((offsets[1] + this.element.offsetHeight) - pointer[1], 0, this.options.bottom)) cursor += 's';
 179         if (this.between(pointer[0] - offsets[0], 0, this.options.left)) cursor += 'w';
 180         if (this.between((offsets[0] + this.element.offsetWidth) - pointer[0], 0, this.options.right)) cursor += 'e';
 181
 182         return cursor;
 183   },
 184   cursor: function(event) {
 185         var cursor = this.directions(event);
 186         if (cursor.length > 0) {
 187                 cursor += '-resize';
 188         } else {
 189                 cursor = '';
 190         }
 191         this.element.style.cursor = cursor;
 192   },
 193   update: function(event) {
 194    if(this.active) {
 195       if(!this.resizing) {
 196         var style = this.element.style;
 197         this.resizing = true;
 198
 199         if(Element.getStyle(this.element,'position')=='')
 200           style.position = "relative";
 201
 202         if(this.options.zindex) {
 203           this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0);
 204           style.zIndex = this.options.zindex;
 205         }
 206       }
 207       this.draw(event);
 208
 209       // fix AppleWebKit rendering
 210       if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
 211       Event.stop(event);
 212       return false;
 213    }
 214   }
 215 }