/static/scripts/tiny_mce/plugins/inlinepopups/editor_plugin_src.js

  1/**
  2 * $Id: editor_plugin_src.js 809 2008-04-17 14:41:31Z spocke $
  3 *
  4 * @author Moxiecode
  5 * @copyright Copyright Š 2004-2008, Moxiecode Systems AB, All rights reserved.
  6 */
  7
  8(function() {
  9	var DOM = tinymce.DOM, Element = tinymce.dom.Element, Event = tinymce.dom.Event, each = tinymce.each, is = tinymce.is;
 10
 11	tinymce.create('tinymce.plugins.InlinePopups', {
 12		init : function(ed, url) {
 13			// Replace window manager
 14			ed.onBeforeRenderUI.add(function() {
 15				ed.windowManager = new tinymce.InlineWindowManager(ed);
 16				DOM.loadCSS(url + '/skins/' + (ed.settings.inlinepopups_skin || 'clearlooks2') + "/window.css");
 17			});
 18		},
 19
 20		getInfo : function() {
 21			return {
 22				longname : 'InlinePopups',
 23				author : 'Moxiecode Systems AB',
 24				authorurl : 'http://tinymce.moxiecode.com',
 25				infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/inlinepopups',
 26				version : tinymce.majorVersion + "." + tinymce.minorVersion
 27			};
 28		}
 29	});
 30
 31	tinymce.create('tinymce.InlineWindowManager:tinymce.WindowManager', {
 32		InlineWindowManager : function(ed) {
 33			var t = this;
 34
 35			t.parent(ed);
 36			t.zIndex = 300000;
 37			t.count = 0;
 38		},
 39
 40		open : function(f, p) {
 41			var t = this, id, opt = '', ed = t.editor, dw = 0, dh = 0, vp, po, mdf, clf, we, w, u;
 42
 43			f = f || {};
 44			p = p || {};
 45
 46			// Run native windows
 47			if (!f.inline)
 48				return t.parent(f, p);
 49
 50			// Only store selection if the type is a normal window
 51			if (!f.type)
 52				t.bookmark = ed.selection.getBookmark('simple');
 53
 54			id = DOM.uniqueId();
 55			vp = DOM.getViewPort();
 56			f.width = parseInt(f.width || 320);
 57			f.height = parseInt(f.height || 240) + (tinymce.isIE ? 8 : 0);
 58			f.min_width = parseInt(f.min_width || 150);
 59			f.min_height = parseInt(f.min_height || 100);
 60			f.max_width = parseInt(f.max_width || 2000);
 61			f.max_height = parseInt(f.max_height || 2000);
 62			f.left = f.left || Math.round(Math.max(vp.x, vp.x + (vp.w / 2.0) - (f.width / 2.0)));
 63			f.top = f.top || Math.round(Math.max(vp.y, vp.y + (vp.h / 2.0) - (f.height / 2.0)));
 64			f.movable = f.resizable = true;
 65			p.mce_width = f.width;
 66			p.mce_height = f.height;
 67			p.mce_inline = true;
 68			p.mce_window_id = id;
 69			p.mce_auto_focus = f.auto_focus;
 70
 71			// Transpose
 72//			po = DOM.getPos(ed.getContainer());
 73//			f.left -= po.x;
 74//			f.top -= po.y;
 75
 76			t.features = f;
 77			t.params = p;
 78			t.onOpen.dispatch(t, f, p);
 79
 80			if (f.type) {
 81				opt += ' mceModal';
 82
 83				if (f.type)
 84					opt += ' mce' + f.type.substring(0, 1).toUpperCase() + f.type.substring(1);
 85
 86				f.resizable = false;
 87			}
 88
 89			if (f.statusbar)
 90				opt += ' mceStatusbar';
 91
 92			if (f.resizable)
 93				opt += ' mceResizable';
 94
 95			if (f.minimizable)
 96				opt += ' mceMinimizable';
 97
 98			if (f.maximizable)
 99				opt += ' mceMaximizable';
100
101			if (f.movable)
102				opt += ' mceMovable';
103
104			// Create DOM objects
105			t._addAll(DOM.doc.body, 
106				['div', {id : id, 'class' : ed.settings.inlinepopups_skin || 'clearlooks2', style : 'width:100px;height:100px'}, 
107					['div', {id : id + '_wrapper', 'class' : 'mceWrapper' + opt},
108						['div', {id : id + '_top', 'class' : 'mceTop'}, 
109							['div', {'class' : 'mceLeft'}],
110							['div', {'class' : 'mceCenter'}],
111							['div', {'class' : 'mceRight'}],
112							['span', {id : id + '_title'}, f.title || '']
113						],
114
115						['div', {id : id + '_middle', 'class' : 'mceMiddle'}, 
116							['div', {id : id + '_left', 'class' : 'mceLeft'}],
117							['span', {id : id + '_content'}],
118							['div', {id : id + '_right', 'class' : 'mceRight'}]
119						],
120
121						['div', {id : id + '_bottom', 'class' : 'mceBottom'},
122							['div', {'class' : 'mceLeft'}],
123							['div', {'class' : 'mceCenter'}],
124							['div', {'class' : 'mceRight'}],
125							['span', {id : id + '_status'}, 'Content']
126						],
127
128						['a', {'class' : 'mceMove', tabindex : '-1', href : 'javascript:;'}],
129						['a', {'class' : 'mceMin', tabindex : '-1', href : 'javascript:;', onmousedown : 'return false;'}],
130						['a', {'class' : 'mceMax', tabindex : '-1', href : 'javascript:;', onmousedown : 'return false;'}],
131						['a', {'class' : 'mceMed', tabindex : '-1', href : 'javascript:;', onmousedown : 'return false;'}],
132						['a', {'class' : 'mceClose', tabindex : '-1', href : 'javascript:;', onmousedown : 'return false;'}],
133						['a', {id : id + '_resize_n', 'class' : 'mceResize mceResizeN', tabindex : '-1', href : 'javascript:;'}],
134						['a', {id : id + '_resize_s', 'class' : 'mceResize mceResizeS', tabindex : '-1', href : 'javascript:;'}],
135						['a', {id : id + '_resize_w', 'class' : 'mceResize mceResizeW', tabindex : '-1', href : 'javascript:;'}],
136						['a', {id : id + '_resize_e', 'class' : 'mceResize mceResizeE', tabindex : '-1', href : 'javascript:;'}],
137						['a', {id : id + '_resize_nw', 'class' : 'mceResize mceResizeNW', tabindex : '-1', href : 'javascript:;'}],
138						['a', {id : id + '_resize_ne', 'class' : 'mceResize mceResizeNE', tabindex : '-1', href : 'javascript:;'}],
139						['a', {id : id + '_resize_sw', 'class' : 'mceResize mceResizeSW', tabindex : '-1', href : 'javascript:;'}],
140						['a', {id : id + '_resize_se', 'class' : 'mceResize mceResizeSE', tabindex : '-1', href : 'javascript:;'}]
141					]
142				]
143			);
144
145			DOM.setStyles(id, {top : -10000, left : -10000});
146
147			// Fix gecko rendering bug, where the editors iframe messed with window contents
148			if (tinymce.isGecko)
149				DOM.setStyle(id, 'overflow', 'auto');
150
151			// Measure borders
152			if (!f.type) {
153				dw += DOM.get(id + '_left').clientWidth;
154				dw += DOM.get(id + '_right').clientWidth;
155				dh += DOM.get(id + '_top').clientHeight;
156				dh += DOM.get(id + '_bottom').clientHeight;
157			}
158
159			// Resize window
160			DOM.setStyles(id, {top : f.top, left : f.left, width : f.width + dw, height : f.height + dh});
161
162			u = f.url || f.file;
163			if (u) {
164				if (tinymce.relaxedDomain)
165					u += (u.indexOf('?') == -1 ? '?' : '&') + 'mce_rdomain=' + tinymce.relaxedDomain;
166
167				u = tinymce._addVer(u);
168			}
169
170			if (!f.type) {
171				DOM.add(id + '_content', 'iframe', {id : id + '_ifr', src : 'javascript:""', frameBorder : 0, style : 'border:0;width:10px;height:10px'});
172				DOM.setStyles(id + '_ifr', {width : f.width, height : f.height});
173				DOM.setAttrib(id + '_ifr', 'src', u);
174			} else {
175				DOM.add(id + '_wrapper', 'a', {id : id + '_ok', 'class' : 'mceButton mceOk', href : 'javascript:;', onmousedown : 'return false;'}, 'Ok');
176
177				if (f.type == 'confirm')
178					DOM.add(id + '_wrapper', 'a', {'class' : 'mceButton mceCancel', href : 'javascript:;', onmousedown : 'return false;'}, 'Cancel');
179
180				DOM.add(id + '_middle', 'div', {'class' : 'mceIcon'});
181				DOM.setHTML(id + '_content', f.content.replace('\n', '<br />'));
182			}
183
184			// Register events
185			mdf = Event.add(id, 'mousedown', function(e) {
186				var n = e.target, w, vp;
187
188				w = t.windows[id];
189				t.focus(id);
190
191				if (n.nodeName == 'A' || n.nodeName == 'a') {
192					if (n.className == 'mceMax') {
193						w.oldPos = w.element.getXY();
194						w.oldSize = w.element.getSize();
195
196						vp = DOM.getViewPort();
197
198						// Reduce viewport size to avoid scrollbars
199						vp.w -= 2;
200						vp.h -= 2;
201
202						w.element.moveTo(vp.x, vp.y);
203						w.element.resizeTo(vp.w, vp.h);
204						DOM.setStyles(id + '_ifr', {width : vp.w - w.deltaWidth, height : vp.h - w.deltaHeight});
205						DOM.addClass(id + '_wrapper', 'mceMaximized');
206					} else if (n.className == 'mceMed') {
207						// Reset to old size
208						w.element.moveTo(w.oldPos.x, w.oldPos.y);
209						w.element.resizeTo(w.oldSize.w, w.oldSize.h);
210						w.iframeElement.resizeTo(w.oldSize.w - w.deltaWidth, w.oldSize.h - w.deltaHeight);
211
212						DOM.removeClass(id + '_wrapper', 'mceMaximized');
213					} else if (n.className == 'mceMove')
214						return t._startDrag(id, e, n.className);
215					else if (DOM.hasClass(n, 'mceResize'))
216						return t._startDrag(id, e, n.className.substring(13));
217				}
218			});
219
220			clf = Event.add(id, 'click', function(e) {
221				var n = e.target;
222
223				t.focus(id);
224
225				if (n.nodeName == 'A' || n.nodeName == 'a') {
226					switch (n.className) {
227						case 'mceClose':
228							t.close(null, id);
229							return Event.cancel(e);
230
231						case 'mceButton mceOk':
232						case 'mceButton mceCancel':
233							f.button_func(n.className == 'mceButton mceOk');
234							return Event.cancel(e);
235					}
236				}
237			});
238
239			// Add window
240			t.windows = t.windows || {};
241			w = t.windows[id] = {
242				id : id,
243				mousedown_func : mdf,
244				click_func : clf,
245				element : new Element(id, {blocker : 1, container : ed.getContainer()}),
246				iframeElement : new Element(id + '_ifr'),
247				features : f,
248				deltaWidth : dw,
249				deltaHeight : dh
250			};
251
252			w.iframeElement.on('focus', function() {
253				t.focus(id);
254			});
255
256			// Setup blocker
257			if (t.count == 0 && t.editor.getParam('dialog_type') == 'modal') {
258				DOM.add(DOM.doc.body, 'div', {
259					id : 'mceModalBlocker',
260					'class' : (t.editor.settings.inlinepopups_skin || 'clearlooks2') + '_modalBlocker',
261					style : {left : vp.x, top : vp.y, zIndex : t.zIndex - 1}
262				});
263
264				DOM.show('mceModalBlocker'); // Reduces flicker in IE
265			} else
266				DOM.setStyle('mceModalBlocker', 'z-index', t.zIndex - 1);
267
268			t.focus(id);
269			t._fixIELayout(id, 1);
270
271			// Focus ok button
272			if (DOM.get(id + '_ok'))
273				DOM.get(id + '_ok').focus();
274
275			t.count++;
276
277			return w;
278		},
279
280		focus : function(id) {
281			var t = this, w = t.windows[id];
282
283			w.zIndex = this.zIndex++;
284			w.element.setStyle('zIndex', w.zIndex);
285			w.element.update();
286
287			id = id + '_wrapper';
288			DOM.removeClass(t.lastId, 'mceFocus');
289			DOM.addClass(id, 'mceFocus');
290			t.lastId = id;
291		},
292
293		_addAll : function(te, ne) {
294			var i, n, t = this, dom = tinymce.DOM;
295
296			if (is(ne, 'string'))
297				te.appendChild(dom.doc.createTextNode(ne));
298			else if (ne.length) {
299				te = te.appendChild(dom.create(ne[0], ne[1]));
300
301				for (i=2; i<ne.length; i++)
302					t._addAll(te, ne[i]);
303			}
304		},
305
306		_startDrag : function(id, se, ac) {
307			var t = this, mu, mm, d = DOM.doc, eb, w = t.windows[id], we = w.element, sp = we.getXY(), p, sz, ph, cp, vp, sx, sy, sex, sey, dx, dy, dw, dh;
308
309			// Get positons and sizes
310//			cp = DOM.getPos(t.editor.getContainer());
311			cp = {x : 0, y : 0};
312			vp = DOM.getViewPort();
313
314			// Reduce viewport size to avoid scrollbars while dragging
315			vp.w -= 2;
316			vp.h -= 2;
317
318			sex = se.screenX;
319			sey = se.screenY;
320			dx = dy = dw = dh = 0;
321
322			// Handle mouse up
323			mu = Event.add(d, 'mouseup', function(e) {
324				Event.remove(d, 'mouseup', mu);
325				Event.remove(d, 'mousemove', mm);
326
327				if (eb)
328					eb.remove();
329
330				we.moveBy(dx, dy);
331				we.resizeBy(dw, dh);
332				sz = we.getSize();
333				DOM.setStyles(id + '_ifr', {width : sz.w - w.deltaWidth, height : sz.h - w.deltaHeight});
334				t._fixIELayout(id, 1);
335
336				return Event.cancel(e);
337			});
338
339			if (ac != 'Move')
340				startMove();
341
342			function startMove() {
343				if (eb)
344					return;
345
346				t._fixIELayout(id, 0);
347
348				// Setup event blocker
349				DOM.add(d.body, 'div', {
350					id : 'mceEventBlocker',
351					'class' : 'mceEventBlocker ' + (t.editor.settings.inlinepopups_skin || 'clearlooks2'),
352					style : {left : vp.x, top : vp.y, zIndex : t.zIndex + 1}
353				});
354				eb = new Element('mceEventBlocker');
355				eb.update();
356
357				// Setup placeholder
358				p = we.getXY();
359				sz = we.getSize();
360				sx = cp.x + p.x - vp.x;
361				sy = cp.y + p.y - vp.y;
362				DOM.add(eb.get(), 'div', {id : 'mcePlaceHolder', 'class' : 'mcePlaceHolder', style : {left : sx, top : sy, width : sz.w, height : sz.h}});
363				ph = new Element('mcePlaceHolder');
364			};
365
366			// Handle mouse move/drag
367			mm = Event.add(d, 'mousemove', function(e) {
368				var x, y, v;
369
370				startMove();
371
372				x = e.screenX - sex;
373				y = e.screenY - sey;
374
375				switch (ac) {
376					case 'ResizeW':
377						dx = x;
378						dw = 0 - x;
379						break;
380
381					case 'ResizeE':
382						dw = x;
383						break;
384
385					case 'ResizeN':
386					case 'ResizeNW':
387					case 'ResizeNE':
388						if (ac == "ResizeNW") {
389							dx = x;
390							dw = 0 - x;
391						} else if (ac == "ResizeNE")
392							dw = x;
393
394						dy = y;
395						dh = 0 - y;
396						break;
397
398					case 'ResizeS':
399					case 'ResizeSW':
400					case 'ResizeSE':
401						if (ac == "ResizeSW") {
402							dx = x;
403							dw = 0 - x;
404						} else if (ac == "ResizeSE")
405							dw = x;
406
407						dh = y;
408						break;
409
410					case 'mceMove':
411						dx = x;
412						dy = y;
413						break;
414				}
415
416				// Boundary check
417				if (dw < (v = w.features.min_width - sz.w)) {
418					if (dx !== 0)
419						dx += dw - v;
420
421					dw = v;
422				}
423	
424				if (dh < (v = w.features.min_height - sz.h)) {
425					if (dy !== 0)
426						dy += dh - v;
427
428					dh = v;
429				}
430
431				dw = Math.min(dw, w.features.max_width - sz.w);
432				dh = Math.min(dh, w.features.max_height - sz.h);
433				dx = Math.max(dx, vp.x - (sx + vp.x));
434				dy = Math.max(dy, vp.y - (sy + vp.y));
435				dx = Math.min(dx, (vp.w + vp.x) - (sx + sz.w + vp.x));
436				dy = Math.min(dy, (vp.h + vp.y) - (sy + sz.h + vp.y));
437
438				// Move if needed
439				if (dx + dy !== 0) {
440					if (sx + dx < 0)
441						dx = 0;
442	
443					if (sy + dy < 0)
444						dy = 0;
445
446					ph.moveTo(sx + dx, sy + dy);
447				}
448
449				// Resize if needed
450				if (dw + dh !== 0)
451					ph.resizeTo(sz.w + dw, sz.h + dh);
452
453				return Event.cancel(e);
454			});
455
456			return Event.cancel(se);
457		},
458
459		resizeBy : function(dw, dh, id) {
460			var w = this.windows[id];
461
462			if (w) {
463				w.element.resizeBy(dw, dh);
464				w.iframeElement.resizeBy(dw, dh);
465			}
466		},
467
468		close : function(win, id) {
469			var t = this, w, d = DOM.doc, ix = 0, fw, id;
470
471			id = t._findId(id || win);
472
473			t.count--;
474
475			if (t.count == 0)
476				DOM.remove('mceModalBlocker');
477
478			// Probably not inline
479			if (!id && win) {
480				t.parent(win);
481				return;
482			}
483
484			if (w = t.windows[id]) {
485				t.onClose.dispatch(t);
486				Event.remove(d, 'mousedown', w.mousedownFunc);
487				Event.remove(d, 'click', w.clickFunc);
488				Event.clear(id);
489				Event.clear(id + '_ifr');
490
491				DOM.setAttrib(id + '_ifr', 'src', 'javascript:""'); // Prevent leak
492				w.element.remove();
493				delete t.windows[id];
494
495				// Find front most window and focus that
496				each (t.windows, function(w) {
497					if (w.zIndex > ix) {
498						fw = w;
499						ix = w.zIndex;
500					}
501				});
502
503				if (fw)
504					t.focus(fw.id);
505			}
506		},
507
508		setTitle : function(w, ti) {
509			var e;
510
511			w = this._findId(w);
512
513			if (e = DOM.get(w + '_title'))
514				e.innerHTML = DOM.encode(ti);
515		},
516
517		alert : function(txt, cb, s) {
518			var t = this, w;
519
520			w = t.open({
521				title : t,
522				type : 'alert',
523				button_func : function(s) {
524					if (cb)
525						cb.call(s || t, s);
526
527					t.close(null, w.id);
528				},
529				content : DOM.encode(t.editor.getLang(txt, txt)),
530				inline : 1,
531				width : 400,
532				height : 130
533			});
534		},
535
536		confirm : function(txt, cb, s) {
537			var t = this, w;
538
539			w = t.open({
540				title : t,
541				type : 'confirm',
542				button_func : function(s) {
543					if (cb)
544						cb.call(s || t, s);
545
546					t.close(null, w.id);
547				},
548				content : DOM.encode(t.editor.getLang(txt, txt)),
549				inline : 1,
550				width : 400,
551				height : 130
552			});
553		},
554
555		// Internal functions
556
557		_findId : function(w) {
558			var t = this;
559
560			if (typeof(w) == 'string')
561				return w;
562
563			each(t.windows, function(wo) {
564				var ifr = DOM.get(wo.id + '_ifr');
565
566				if (ifr && w == ifr.contentWindow) {
567					w = wo.id;
568					return false;
569				}
570			});
571
572			return w;
573		},
574
575		_fixIELayout : function(id, s) {
576			var w, img;
577
578			if (!tinymce.isIE6)
579				return;
580
581			// Fixes the bug where hover flickers and does odd things in IE6
582			each(['n','s','w','e','nw','ne','sw','se'], function(v) {
583				var e = DOM.get(id + '_resize_' + v);
584
585				DOM.setStyles(e, {
586					width : s ? e.clientWidth : '',
587					height : s ? e.clientHeight : '',
588					cursor : DOM.getStyle(e, 'cursor', 1)
589				});
590
591				DOM.setStyle(id + "_bottom", 'bottom', '-1px');
592
593				e = 0;
594			});
595
596			// Fixes graphics glitch
597			if (w = this.windows[id]) {
598				// Fixes rendering bug after resize
599				w.element.hide();
600				w.element.show();
601
602				// Forced a repaint of the window
603				//DOM.get(id).style.filter = '';
604
605				// IE has a bug where images used in CSS won't get loaded
606				// sometimes when the cache in the browser is disabled
607				// This fix tries to solve it by loading the images using the image object
608				each(DOM.select('div,a', id), function(e, i) {
609					if (e.currentStyle.backgroundImage != 'none') {
610						img = new Image();
611						img.src = e.currentStyle.backgroundImage.replace(/url\(\"(.+)\"\)/, '$1');
612					}
613				});
614
615				DOM.get(id).style.filter = '';
616			}
617		}
618	});
619
620	// Register plugin
621	tinymce.PluginManager.add('inlinepopups', tinymce.plugins.InlinePopups);
622})();
623