includes/clientside/tinymce/themes/advanced/js/image.js
changeset 1344 dc96d6c5cd1e
parent 1343 2a31905a567d
child 1345 1de01205143b
equal deleted inserted replaced
1343:2a31905a567d 1344:dc96d6c5cd1e
     1 var ImageDialog = {
       
     2 	preInit : function() {
       
     3 		var url;
       
     4 
       
     5 		tinyMCEPopup.requireLangPack();
       
     6 
       
     7 		if (url = tinyMCEPopup.getParam("external_image_list_url"))
       
     8 			document.write('<script language="javascript" type="text/javascript" src="' + tinyMCEPopup.editor.documentBaseURI.toAbsolute(url) + '"></script>');
       
     9 	},
       
    10 
       
    11 	init : function() {
       
    12 		var f = document.forms[0], ed = tinyMCEPopup.editor;
       
    13 
       
    14 		// Setup browse button
       
    15 		document.getElementById('srcbrowsercontainer').innerHTML = getBrowserHTML('srcbrowser','src','image','theme_advanced_image');
       
    16 		if (isVisible('srcbrowser'))
       
    17 			document.getElementById('src').style.width = '180px';
       
    18 
       
    19 		e = ed.selection.getNode();
       
    20 
       
    21 		this.fillFileList('image_list', 'tinyMCEImageList');
       
    22 
       
    23 		if (e.nodeName == 'IMG') {
       
    24 			f.src.value = ed.dom.getAttrib(e, 'src');
       
    25 			f.alt.value = ed.dom.getAttrib(e, 'alt');
       
    26 			f.border.value = this.getAttrib(e, 'border');
       
    27 			f.vspace.value = this.getAttrib(e, 'vspace');
       
    28 			f.hspace.value = this.getAttrib(e, 'hspace');
       
    29 			f.width.value = ed.dom.getAttrib(e, 'width');
       
    30 			f.height.value = ed.dom.getAttrib(e, 'height');
       
    31 			f.insert.value = ed.getLang('update');
       
    32 			this.styleVal = ed.dom.getAttrib(e, 'style');
       
    33 			selectByValue(f, 'image_list', f.src.value);
       
    34 			selectByValue(f, 'align', this.getAttrib(e, 'align'));
       
    35 			this.updateStyle();
       
    36 		}
       
    37 	},
       
    38 
       
    39 	fillFileList : function(id, l) {
       
    40 		var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;
       
    41 
       
    42 		l = window[l];
       
    43 
       
    44 		if (l && l.length > 0) {
       
    45 			lst.options[lst.options.length] = new Option('', '');
       
    46 
       
    47 			tinymce.each(l, function(o) {
       
    48 				lst.options[lst.options.length] = new Option(o[0], o[1]);
       
    49 			});
       
    50 		} else
       
    51 			dom.remove(dom.getParent(id, 'tr'));
       
    52 	},
       
    53 
       
    54 	update : function() {
       
    55 		var f = document.forms[0], nl = f.elements, ed = tinyMCEPopup.editor, args = {}, el;
       
    56 
       
    57 		tinyMCEPopup.restoreSelection();
       
    58 
       
    59 		if (f.src.value === '') {
       
    60 			if (ed.selection.getNode().nodeName == 'IMG') {
       
    61 				ed.dom.remove(ed.selection.getNode());
       
    62 				ed.execCommand('mceRepaint');
       
    63 			}
       
    64 
       
    65 			tinyMCEPopup.close();
       
    66 			return;
       
    67 		}
       
    68 
       
    69 		if (!ed.settings.inline_styles) {
       
    70 			args = tinymce.extend(args, {
       
    71 				vspace : nl.vspace.value,
       
    72 				hspace : nl.hspace.value,
       
    73 				border : nl.border.value,
       
    74 				align : getSelectValue(f, 'align')
       
    75 			});
       
    76 		} else
       
    77 			args.style = this.styleVal;
       
    78 
       
    79 		tinymce.extend(args, {
       
    80 			src : f.src.value,
       
    81 			alt : f.alt.value,
       
    82 			width : f.width.value,
       
    83 			height : f.height.value
       
    84 		});
       
    85 
       
    86 		el = ed.selection.getNode();
       
    87 
       
    88 		if (el && el.nodeName == 'IMG') {
       
    89 			ed.dom.setAttribs(el, args);
       
    90 		} else {
       
    91 			ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" />', {skip_undo : 1});
       
    92 			ed.dom.setAttribs('__mce_tmp', args);
       
    93 			ed.dom.setAttrib('__mce_tmp', 'id', '');
       
    94 			ed.undoManager.add();
       
    95 		}
       
    96 
       
    97 		tinyMCEPopup.close();
       
    98 	},
       
    99 
       
   100 	updateStyle : function() {
       
   101 		var dom = tinyMCEPopup.dom, st, v, f = document.forms[0];
       
   102 
       
   103 		if (tinyMCEPopup.editor.settings.inline_styles) {
       
   104 			st = tinyMCEPopup.dom.parseStyle(this.styleVal);
       
   105 
       
   106 			// Handle align
       
   107 			v = getSelectValue(f, 'align');
       
   108 			if (v) {
       
   109 				if (v == 'left' || v == 'right') {
       
   110 					st['float'] = v;
       
   111 					delete st['vertical-align'];
       
   112 				} else {
       
   113 					st['vertical-align'] = v;
       
   114 					delete st['float'];
       
   115 				}
       
   116 			} else {
       
   117 				delete st['float'];
       
   118 				delete st['vertical-align'];
       
   119 			}
       
   120 
       
   121 			// Handle border
       
   122 			v = f.border.value;
       
   123 			if (v || v == '0') {
       
   124 				if (v == '0')
       
   125 					st['border'] = '0';
       
   126 				else
       
   127 					st['border'] = v + 'px solid black';
       
   128 			} else
       
   129 				delete st['border'];
       
   130 
       
   131 			// Handle hspace
       
   132 			v = f.hspace.value;
       
   133 			if (v) {
       
   134 				delete st['margin'];
       
   135 				st['margin-left'] = v + 'px';
       
   136 				st['margin-right'] = v + 'px';
       
   137 			} else {
       
   138 				delete st['margin-left'];
       
   139 				delete st['margin-right'];
       
   140 			}
       
   141 
       
   142 			// Handle vspace
       
   143 			v = f.vspace.value;
       
   144 			if (v) {
       
   145 				delete st['margin'];
       
   146 				st['margin-top'] = v + 'px';
       
   147 				st['margin-bottom'] = v + 'px';
       
   148 			} else {
       
   149 				delete st['margin-top'];
       
   150 				delete st['margin-bottom'];
       
   151 			}
       
   152 
       
   153 			// Merge
       
   154 			st = tinyMCEPopup.dom.parseStyle(dom.serializeStyle(st));
       
   155 			this.styleVal = dom.serializeStyle(st);
       
   156 		}
       
   157 	},
       
   158 
       
   159 	getAttrib : function(e, at) {
       
   160 		var ed = tinyMCEPopup.editor, dom = ed.dom, v, v2;
       
   161 
       
   162 		if (ed.settings.inline_styles) {
       
   163 			switch (at) {
       
   164 				case 'align':
       
   165 					if (v = dom.getStyle(e, 'float'))
       
   166 						return v;
       
   167 
       
   168 					if (v = dom.getStyle(e, 'vertical-align'))
       
   169 						return v;
       
   170 
       
   171 					break;
       
   172 
       
   173 				case 'hspace':
       
   174 					v = dom.getStyle(e, 'margin-left')
       
   175 					v2 = dom.getStyle(e, 'margin-right');
       
   176 					if (v && v == v2)
       
   177 						return parseInt(v.replace(/[^0-9]/g, ''));
       
   178 
       
   179 					break;
       
   180 
       
   181 				case 'vspace':
       
   182 					v = dom.getStyle(e, 'margin-top')
       
   183 					v2 = dom.getStyle(e, 'margin-bottom');
       
   184 					if (v && v == v2)
       
   185 						return parseInt(v.replace(/[^0-9]/g, ''));
       
   186 
       
   187 					break;
       
   188 
       
   189 				case 'border':
       
   190 					v = 0;
       
   191 
       
   192 					tinymce.each(['top', 'right', 'bottom', 'left'], function(sv) {
       
   193 						sv = dom.getStyle(e, 'border-' + sv + '-width');
       
   194 
       
   195 						// False or not the same as prev
       
   196 						if (!sv || (sv != v && v !== 0)) {
       
   197 							v = 0;
       
   198 							return false;
       
   199 						}
       
   200 
       
   201 						if (sv)
       
   202 							v = sv;
       
   203 					});
       
   204 
       
   205 					if (v)
       
   206 						return parseInt(v.replace(/[^0-9]/g, ''));
       
   207 
       
   208 					break;
       
   209 			}
       
   210 		}
       
   211 
       
   212 		if (v = dom.getAttrib(e, at))
       
   213 			return v;
       
   214 
       
   215 		return '';
       
   216 	},
       
   217 
       
   218 	resetImageData : function() {
       
   219 		var f = document.forms[0];
       
   220 
       
   221 		f.width.value = f.height.value = "";	
       
   222 	},
       
   223 
       
   224 	updateImageData : function() {
       
   225 		var f = document.forms[0], t = ImageDialog;
       
   226 
       
   227 		if (f.width.value == "")
       
   228 			f.width.value = t.preloadImg.width;
       
   229 
       
   230 		if (f.height.value == "")
       
   231 			f.height.value = t.preloadImg.height;
       
   232 	},
       
   233 
       
   234 	getImageData : function() {
       
   235 		var f = document.forms[0];
       
   236 
       
   237 		this.preloadImg = new Image();
       
   238 		this.preloadImg.onload = this.updateImageData;
       
   239 		this.preloadImg.onerror = this.resetImageData;
       
   240 		this.preloadImg.src = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.src.value);
       
   241 	}
       
   242 };
       
   243 
       
   244 ImageDialog.preInit();
       
   245 tinyMCEPopup.onInit.add(ImageDialog.init, ImageDialog);