skins/layout_objects.js

   1 // (c) Benoît PIN 2006-2007
   2 // http://plinn.org
   3 // Licence GPL
   4
   5 var ELEMENTS_POOL = {};
   6
   7 function initElementsPool() {
   8         // Element pool (for cloning)
   9         ELEMENTS_POOL["DIV_ELEMENT"]    = {"node" : document.getElementById("div"),
  10                                                                            "beforeDraw" : null,
  11                                                                            "getRawData" : null,
  12                                                                            "putData" : null };
  13
  14         imgBeforeDraw = function() {
  15                 if (!this.node.src) {
  16                         var dispatch = document.getElementById("ImgDispatcher");
  17                         var strRatio = dispatch.value.split("_", 1)[0];
  18                         var src = dispatch.value.substring(strRatio.length+1);
  19                         this.ratio = new Number(strRatio).valueOf();
  20                         this.node.src = PLINN_DOCUMENT_URL + '/' + src;
  21                         var w = this.width;
  22                         var size = (this.ratio > 1) ?
  23                                 new Point(w, Math.round(w * this.ratio)) :
  24                                 new Point(Math.round(w / this.ratio), w);
  25
  26                         this.resizeTo(size);
  27                 }
  28         }
  29
  30         ELEMENTS_POOL["IMG_ELEMENT"]    = {"node" : document.getElementById("img"),
  31                                                                            "beforeDraw" : imgBeforeDraw,
  32                                                                            "getRawData" : function() {
  33                                                                                         var src = this.node.src;
  34                                                                                         src = src.split('/');
  35                                                                                         return "attachments/" + src[src.length - 2] + "/getThumbnail";
  36                                                                                         },
  37                                                                            "putData" : function(raw) {
  38                                                                                         this.node.src = PLINN_DOCUMENT_URL+"/attachments/"+raw;
  39                                                                                         }
  40                                                                             };
  41
  42         epozBeforeDraw = function() {
  43                 var rect = this
  44                 var iframe = this.node.childNodes[0];
  45                 var name = String(Math.floor(Math.random() * 10000));
  46                 addListener(iframe, 'load', function(){initTextRectangle(iframe, name, rect);});
  47
  48                 var ta = this.node.childNodes[1];
  49                 ta.name = name;
  50                 ta.id = name;
  51         }
  52
  53         ELEMENTS_POOL["EPOZ_ELEMENT"]   = {"node" : document.getElementById("epoz"),
  54                                                                            "beforeDraw" : epozBeforeDraw,
  55                                                                            "getRawData" : function() {
  56                                                                                         return this.node.childNodes[0].contentWindow.document.body.innerHTML;
  57                                                                                         },
  58                                                                            "putData" : function(raw) {
  59                                                                                         this.node.childNodes[1].value = raw;
  60                                                                                         }
  61                                                                                 };
  62
  63         for (var i = 0 ; i < ELEMENTS_POOL.length ; i++)
  64                 ELEMENTS_POOL[i].removeAttribute("id");
  65 }
  66
  67 function Rectangle(upperLeftCorner, width, height, elementKey, ddOptions, ratio) {
  68         this.meta_type = "Rectangle"; // ;-)
  69         this.upperLeftCorner = upperLeftCorner;
  70         this.width = width;
  71         this.height = height;
  72         this.elementKey = elementKey;
  73         this.node = ELEMENTS_POOL[elementKey]["node"].cloneNode(true);
  74         with (this.node.style) {
  75                 width="100%";
  76                 height="100%";
  77         }
  78         this.beforeDraw = ELEMENTS_POOL[elementKey]["beforeDraw"];
  79         this.getRawData = ELEMENTS_POOL[elementKey]["getRawData"];
  80         this.ddOptions = (!ddOptions) ? 11 : ddOptions; // 11-> drag, resize, delete
  81         this.ratio = ratio;
  82
  83         this.hostDiv = document.createElement("div");
  84         this.hostDiv.appendChild(this.node);
  85
  86         this.resizeHandle = document.createElement("span");
  87         this.resizeHandle.className = "resize_handle";
  88         this.hostDiv.appendChild(this.resizeHandle);
  89
  90         if((this.ddOptions & 8) == 8) { // move allowed
  91                 this.movDelHandle = document.createElement("div");
  92                 this.movDelHandle.className = "rectangle_header";
  93                 var delImg = document.createElement("img");
  94                 delImg.src = "delete_rectangle.gif";
  95                 delImg.className = "rectangle_delimg";
  96                 delImg.onmouseover=function(){this.src="delete_rectangle_hover.gif";}
  97                 delImg.onmouseout=function(){this.src="delete_rectangle.gif";}
  98                 this.movDelHandle.appendChild(delImg);
  99                 this.hostDiv.appendChild(this.movDelHandle);
 100                 this.movDelHandle.rectangle = this;
 101                 delImg.rectangle = this;
 102
 103         }
 104
 105         // backward references
 106         this.style = this.hostDiv.style;
 107         this.node.rectangle = this;
 108         this.hostDiv.rectangle = this;
 109         this.resizeHandle.rectangle = this;
 110 }
 111
 112 Rectangle.prototype.showHandles = function() {
 113         if (this.resizeHandle)
 114                 this.resizeHandle.style.visibility = "visible";
 115         if (this.movDelHandle)
 116                 this.movDelHandle.style.visibility = "visible";
 117 };
 118
 119 Rectangle.prototype.hideHandles = function() {
 120         if (this.resizeHandle)
 121                 this.resizeHandle.style.visibility = "hidden";
 122         if (this.movDelHandle)
 123                 this.movDelHandle.style.visibility = "hidden";
 124 };
 125
 126 Rectangle.prototype._mac_moveDelHandle = function() {
 127         // fix height
 128         var epozWindow = this.node.childNodes[0].contentWindow;
 129         if (epozWindow.scrollMaxY)
 130                 this.resizeHandle.style.right = "15px";
 131         else
 132                 this.resizeHandle.style.right = "0px";
 133
 134         // fix width
 135         if (epozWindow.scrollMaxX)
 136                 this.resizeHandle.style.bottom = "15px";
 137         else
 138                 this.resizeHandle.style.bottom = "0px";
 139 };
 140
 141
 142 Rectangle.prototype.draw = function(container, position) {
 143         if (this.beforeDraw)
 144                 this.beforeDraw();
 145         var style = this.style;
 146         style.left = String(this.upperLeftCorner.x) + "px";
 147         style.top = String(this.upperLeftCorner.y) + "px";
 148         style.width = String(this.width) + "px";
 149         style.height = String(this.height) + "px";
 150
 151         style.display="block";
 152         var pos;
 153         if (!position)
 154                 pos = "absolute";
 155         else
 156                 pos = position;
 157         style.position = pos;
 158         setBorderStyle(this, "solid");
 159         setBorderWidth(this, "1px");
 160         style.visibility = "inherit";
 161 /*      style.overflow = "hidden";*/
 162         if (container.meta_type == "Rectangle")
 163                 setBorderColor(this, container.style.borderTopColor);
 164
 165         container.appendChild(this.hostDiv);
 166 };
 167
 168
 169 Rectangle.prototype.moveTo = function(upperLeftCorner) {
 170         this.upperLeftCorner = upperLeftCorner;
 171         var style = this.style;
 172         style.left = String(this.upperLeftCorner.x) + "px";
 173         style.top = String(this.upperLeftCorner.y) + "px";
 174 };
 175
 176 Rectangle.prototype.resizeTo = function(size, cancelOnresize) {
 177         if (size.x >= 10)
 178                 this.width = size.x;
 179         if (size.y >= 10)
 180                 this.height = size.y;
 181
 182         var style = this.style;
 183         style.width = String(this.width) + "px";
 184         style.height = String(this.height) + "px";
 185         if (this.onresize && !cancelOnresize)
 186                 this.onresize();
 187 };
 188
 189 Rectangle.prototype.appendChild = function(node) {
 190         this.node.appendChild(node);
 191 };
 192
 193 Rectangle.prototype.setId = function(id) {
 194         this.node.id = id;
 195 };
 196
 197
 198
 199 function initTextRectangle(iframe, name, rect) {
 200         var ta = iframe.nextSibling; // ta -> textarea
 201         var data = ta.value;
 202
 203         if (browser.isGecko) {
 204                 // Just a few cleanups for Mozilla
 205                 data = data.replace(/<strong>/ig,'<b>');
 206                 data = data.replace(/<strong(\s[^>]*)>/ig,'<b$1>');
 207                 data = data.replace(/<\/strong>/ig,'</b>');
 208
 209                 data = data.replace(/<em>/ig,'<i>');
 210                 data = data.replace(/<em(\s[^>]*)>/ig,'<i$1>');
 211                 data = data.replace(/<\/em>/ig,'</i>');
 212         }
 213
 214         // change iframe id
 215         iframe.id = IFramePrefix + name;
 216         iframe.style.border = "0px none transparent";
 217
 218
 219         iframe.contentWindow.document.body.innerHTML = data;
 220         iframe.contentWindow.document.id = DocPrefix + name;
 221         addListener(iframe, "click", handlePlinnEpozRedirect);
 222         if (browser.isMac) {
 223                 addListener(iframe.contentWindow.document, 'overflow', function(){rect._mac_moveDelHandle();});
 224                 addListener(iframe.contentWindow.document, 'underflow', function(){rect._mac_moveDelHandle();});
 225         }
 226
 227         if (browser.isGecko) {
 228                 scriptExpr = 'EnableDesignMode("' + iframe.id + '");';
 229                 window.setTimeout(scriptExpr, 10);
 230         }
 231 }
 232
 233 // « overloads »
 234
 235 function handlePlinnEpozRedirect(evt) {
 236         redirectPlinnEpoz(getTargetedObject(evt));
 237 }
 238
 239 function redirectPlinnEpoz(iframe) {
 240         if(EpozElement) {
 241                 if (EpozElement == iframe)
 242                         return;
 243                 unwrapPlinnEpozVariables();
 244         }
 245
 246         // update Epoz variables
 247         wrapPlinnEpozVariables(iframe);
 248         EpozElement.contentWindow.focus();
 249 }
 250
 251 function wrapPlinnEpozVariables(iframe) {
 252         fieldId = iframe.contentWindow.document.id.slice(DocPrefixLength);
 253
 254         iframe.id = Epoz ;
 255         EpozElement=iframe;
 256         EpozTextArea = document.getElementById(fieldId);
 257 }
 258
 259
 260 function unwrapPlinnEpozVariables() {
 261         if (!EpozElement) // no redirection happens yet.
 262                 return;
 263         try {
 264         fieldId = EpozElement.contentWindow.document.id.slice(DocPrefixLength);
 265         }
 266         catch (e) { }
 267
 268         EpozElement.id = IFramePrefix + fieldId;
 269 }