include/javascript/tiny_mce/classes/dom/Element.js

   1 /**
   2  * Element.js
   3  *
   4  * Copyright 2009, Moxiecode Systems AB
   5  * Released under LGPL License.
   6  *
   7  * License: http://tinymce.moxiecode.com/license
   8  * Contributing: http://tinymce.moxiecode.com/contributing
   9  */
  10
  11 (function(tinymce) {
  12         /**
  13          * Element class, this enables element blocking in IE. Element blocking is a method to block out select blockes that
  14          * gets visible though DIVs on IE 6 it uses a iframe for this blocking. This class also shortens the length of some DOM API calls
  15          * since it's bound to an element.
  16          *
  17          * @class tinymce.dom.Element
  18          * @example
  19          * // Creates an basic element for an existing element
  20          * var elm = new tinymce.dom.Element('someid');
  21          *
  22          * elm.setStyle('background-color', 'red');
  23          * elm.moveTo(10, 10);
  24          */
  25
  26         /**
  27          * Constructs a new Element instance. Consult the Wiki for more details on this class.
  28          *
  29          * @constructor
  30          * @method Element
  31          * @param {String} id Element ID to bind/execute methods on.
  32          * @param {Object} settings Optional settings name/value collection.
  33          */
  34         tinymce.dom.Element = function(id, settings) {
  35                 var t = this, dom, el;
  36
  37                 t.settings = settings = settings || {};
  38                 t.id = id;
  39                 t.dom = dom = settings.dom || tinymce.DOM;
  40
  41                 // Only IE leaks DOM references, this is a lot faster
  42                 if (!tinymce.isIE)
  43                         el = dom.get(t.id);
  44
  45                 tinymce.each(
  46                                 ('getPos,getRect,getParent,add,setStyle,getStyle,setStyles,' +
  47                                 'setAttrib,setAttribs,getAttrib,addClass,removeClass,' +
  48                                 'hasClass,getOuterHTML,setOuterHTML,remove,show,hide,' +
  49                                 'isHidden,setHTML,get').split(/,/)
  50                         , function(k) {
  51                                 t[k] = function() {
  52                                         var a = [id], i;
  53
  54                                         for (i = 0; i < arguments.length; i++)
  55                                                 a.push(arguments[i]);
  56
  57                                         a = dom[k].apply(dom, a);
  58                                         t.update(k);
  59
  60                                         return a;
  61                                 };
  62                 });
  63
  64                 tinymce.extend(t, {
  65                         /**
  66                          * Adds a event handler to the element.
  67                          *
  68                          * @method on
  69                          * @param {String} n Event name like for example "click".
  70                          * @param {function} f Function to execute on the specified event.
  71                          * @param {Object} s Optional scope to execute function on.
  72                          * @return {function} Event handler function the same as the input function.
  73                          */
  74                         on : function(n, f, s) {
  75                                 return tinymce.dom.Event.add(t.id, n, f, s);
  76                         },
  77
  78                         /**
  79                          * Returns the absolute X, Y cordinate of the element.
  80                          *
  81                          * @method getXY
  82                          * @return {Object} Objext with x, y cordinate fields.
  83                          */
  84                         getXY : function() {
  85                                 return {
  86                                         x : parseInt(t.getStyle('left')),
  87                                         y : parseInt(t.getStyle('top'))
  88                                 };
  89                         },
  90
  91                         /**
  92                          * Returns the size of the element by a object with w and h fields.
  93                          *
  94                          * @method getSize
  95                          * @return {Object} Object with element size with a w and h field.
  96                          */
  97                         getSize : function() {
  98                                 var n = dom.get(t.id);
  99
 100                                 return {
 101                                         w : parseInt(t.getStyle('width') || n.clientWidth),
 102                                         h : parseInt(t.getStyle('height') || n.clientHeight)
 103                                 };
 104                         },
 105
 106                         /**
 107                          * Moves the element to a specific absolute position.
 108                          *
 109                          * @method moveTo
 110                          * @param {Number} x X cordinate of element position.
 111                          * @param {Number} y Y cordinate of element position.
 112                          */
 113                         moveTo : function(x, y) {
 114                                 t.setStyles({left : x, top : y});
 115                         },
 116
 117                         /**
 118                          * Moves the element relative to the current position.
 119                          *
 120                          * @method moveBy
 121                          * @param {Number} x Relative X cordinate of element position.
 122                          * @param {Number} y Relative Y cordinate of element position.
 123                          */
 124                         moveBy : function(x, y) {
 125                                 var p = t.getXY();
 126
 127                                 t.moveTo(p.x + x, p.y + y);
 128                         },
 129
 130                         /**
 131                          * Resizes the element to a specific size.
 132                          *
 133                          * @method resizeTo
 134                          * @param {Number} w New width of element.
 135                          * @param {Numner} h New height of element.
 136                          */
 137                         resizeTo : function(w, h) {
 138                                 t.setStyles({width : w, height : h});
 139                         },
 140
 141                         /**
 142                          * Resizes the element relative to the current sizeto a specific size.
 143                          *
 144                          * @method resizeBy
 145                          * @param {Number} w Relative width of element.
 146                          * @param {Numner} h Relative height of element.
 147                          */
 148                         resizeBy : function(w, h) {
 149                                 var s = t.getSize();
 150
 151                                 t.resizeTo(s.w + w, s.h + h);
 152                         },
 153
 154                         /**
 155                          * Updates the element blocker in IE6 based on the style information of the element.
 156                          *
 157                          * @method update
 158                          * @param {String} k Optional function key. Used internally.
 159                          */
 160                         update : function(k) {
 161                                 var b;
 162
 163                                 if (tinymce.isIE6 && settings.blocker) {
 164                                         k = k || '';
 165
 166                                         // Ignore getters
 167                                         if (k.indexOf('get') === 0 || k.indexOf('has') === 0 || k.indexOf('is') === 0)
 168                                                 return;
 169
 170                                         // Remove blocker on remove
 171                                         if (k == 'remove') {
 172                                                 dom.remove(t.blocker);
 173                                                 return;
 174                                         }
 175
 176                                         if (!t.blocker) {
 177                                                 t.blocker = dom.uniqueId();
 178                                                 b = dom.add(settings.container || dom.getRoot(), 'iframe', {id : t.blocker, style : 'position:absolute;', frameBorder : 0, src : 'javascript:""'});
 179                                                 dom.setStyle(b, 'opacity', 0);
 180                                         } else
 181                                                 b = dom.get(t.blocker);
 182
 183                                         dom.setStyles(b, {
 184                                                 left : t.getStyle('left', 1),
 185                                                 top : t.getStyle('top', 1),
 186                                                 width : t.getStyle('width', 1),
 187                                                 height : t.getStyle('height', 1),
 188                                                 display : t.getStyle('display', 1),
 189                                                 zIndex : parseInt(t.getStyle('zIndex', 1) || 0) - 1
 190                                         });
 191                                 }
 192                         }
 193                 });
 194         };
 195 })(tinymce);