includes/clientside/tinymce/plugins/advimage/jscripts/functions.js
changeset 1 fe660c52c48f
equal deleted inserted replaced
0:902822492a68 1:fe660c52c48f
       
     1 /* Functions for the advimage plugin popup */
       
     2 
       
     3 var preloadImg = null;
       
     4 var orgImageWidth, orgImageHeight;
       
     5 
       
     6 function preinit() {
       
     7 	// Initialize
       
     8 	tinyMCE.setWindowArg('mce_windowresize', false);
       
     9 
       
    10 	// Import external list url javascript
       
    11 	var url = tinyMCE.getParam("external_image_list_url");
       
    12 	if (url != null) {
       
    13 		// Fix relative
       
    14 		if (url.charAt(0) != '/' && url.indexOf('://') == -1)
       
    15 			url = tinyMCE.documentBasePath + "/" + url;
       
    16 
       
    17 		document.write('<sc'+'ript language="javascript" type="text/javascript" src="' + url + '"></sc'+'ript>');
       
    18 	}
       
    19 }
       
    20 
       
    21 function convertURL(url, node, on_save) {
       
    22 	return eval("tinyMCEPopup.windowOpener." + tinyMCE.settings['urlconverter_callback'] + "(url, node, on_save);");
       
    23 }
       
    24 
       
    25 function getImageSrc(str) {
       
    26 	var pos = -1;
       
    27 
       
    28 	if (!str)
       
    29 		return "";
       
    30 
       
    31 	if ((pos = str.indexOf('this.src=')) != -1) {
       
    32 		var src = str.substring(pos + 10);
       
    33 
       
    34 		src = src.substring(0, src.indexOf('\''));
       
    35 
       
    36 		if (tinyMCE.getParam('convert_urls'))
       
    37 			src = convertURL(src, null, true);
       
    38 
       
    39 		return src;
       
    40 	}
       
    41 
       
    42 	return "";
       
    43 }
       
    44 
       
    45 function init() {
       
    46 	tinyMCEPopup.resizeToInnerSize();
       
    47 
       
    48 	var formObj = document.forms[0];
       
    49 	var inst = tinyMCE.getInstanceById(tinyMCE.getWindowArg('editor_id'));
       
    50 	var elm = inst.getFocusElement();
       
    51 	var action = "insert";
       
    52 	var html = "";
       
    53 
       
    54 	// Image list src
       
    55 	html = getImageListHTML('imagelistsrc','src','onSelectMainImage');
       
    56 	if (html == "")
       
    57 		document.getElementById("imagelistsrcrow").style.display = 'none';
       
    58 	else
       
    59 		document.getElementById("imagelistsrccontainer").innerHTML = html;
       
    60 
       
    61 	// Image list oversrc
       
    62 	html = getImageListHTML('imagelistover','onmouseoversrc');
       
    63 	if (html == "")
       
    64 		document.getElementById("imagelistoverrow").style.display = 'none';
       
    65 	else
       
    66 		document.getElementById("imagelistovercontainer").innerHTML = html;
       
    67 
       
    68 	// Image list outsrc
       
    69 	html = getImageListHTML('imagelistout','onmouseoutsrc');
       
    70 	if (html == "")
       
    71 		document.getElementById("imagelistoutrow").style.display = 'none';
       
    72 	else
       
    73 		document.getElementById("imagelistoutcontainer").innerHTML = html;
       
    74 
       
    75 	// Src browser
       
    76 	html = getBrowserHTML('srcbrowser','src','image','advimage');
       
    77 	document.getElementById("srcbrowsercontainer").innerHTML = html;
       
    78 
       
    79 	// Over browser
       
    80 	html = getBrowserHTML('oversrcbrowser','onmouseoversrc','image','advimage');
       
    81 	document.getElementById("onmouseoversrccontainer").innerHTML = html;
       
    82 
       
    83 	// Out browser
       
    84 	html = getBrowserHTML('outsrcbrowser','onmouseoutsrc','image','advimage');
       
    85 	document.getElementById("onmouseoutsrccontainer").innerHTML = html;
       
    86 
       
    87 	// Longdesc browser
       
    88 	html = getBrowserHTML('longdescbrowser','longdesc','file','advimage');
       
    89 	document.getElementById("longdesccontainer").innerHTML = html;
       
    90 
       
    91 	// Resize some elements
       
    92 	if (isVisible('srcbrowser'))
       
    93 		document.getElementById('src').style.width = '260px';
       
    94 
       
    95 	if (isVisible('oversrcbrowser'))
       
    96 		document.getElementById('onmouseoversrc').style.width = '260px';
       
    97 
       
    98 	if (isVisible('outsrcbrowser'))
       
    99 		document.getElementById('onmouseoutsrc').style.width = '260px';
       
   100 
       
   101 	if (isVisible('longdescbrowser'))
       
   102 		document.getElementById('longdesc').style.width = '180px';
       
   103 
       
   104 	// Check action
       
   105 	if (elm != null && elm.nodeName == "IMG")
       
   106 		action = "update";
       
   107 
       
   108 	formObj.insert.value = tinyMCE.getLang('lang_' + action, 'Insert', true); 
       
   109 
       
   110 	if (action == "update") {
       
   111 		var src = tinyMCE.getAttrib(elm, 'src');
       
   112 		var onmouseoversrc = getImageSrc(tinyMCE.cleanupEventStr(tinyMCE.getAttrib(elm, 'onmouseover')));
       
   113 		var onmouseoutsrc = getImageSrc(tinyMCE.cleanupEventStr(tinyMCE.getAttrib(elm, 'onmouseout')));
       
   114 
       
   115 		src = convertURL(src, elm, true);
       
   116 
       
   117 		// Use mce_src if found
       
   118 		var mceRealSrc = tinyMCE.getAttrib(elm, 'mce_src');
       
   119 		if (mceRealSrc != "") {
       
   120 			src = mceRealSrc;
       
   121 
       
   122 			if (tinyMCE.getParam('convert_urls'))
       
   123 				src = convertURL(src, elm, true);
       
   124 		}
       
   125 
       
   126 		if (onmouseoversrc != "" && tinyMCE.getParam('convert_urls'))
       
   127 			onmouseoversrc = convertURL(onmouseoversrc, elm, true);
       
   128 
       
   129 		if (onmouseoutsrc != "" && tinyMCE.getParam('convert_urls'))
       
   130 			onmouseoutsrc = convertURL(onmouseoutsrc, elm, true);
       
   131 
       
   132 		// Setup form data
       
   133 		var style = tinyMCE.parseStyle(tinyMCE.getAttrib(elm, "style"));
       
   134 
       
   135 		// Store away old size
       
   136 		orgImageWidth = trimSize(getStyle(elm, 'width'))
       
   137 		orgImageHeight = trimSize(getStyle(elm, 'height'));
       
   138 
       
   139 		formObj.src.value    = src;
       
   140 		formObj.alt.value    = tinyMCE.getAttrib(elm, 'alt');
       
   141 		formObj.title.value  = tinyMCE.getAttrib(elm, 'title');
       
   142 		formObj.border.value = trimSize(getStyle(elm, 'border', 'borderWidth'));
       
   143 		formObj.vspace.value = tinyMCE.getAttrib(elm, 'vspace');
       
   144 		formObj.hspace.value = tinyMCE.getAttrib(elm, 'hspace');
       
   145 		formObj.width.value  = orgImageWidth;
       
   146 		formObj.height.value = orgImageHeight;
       
   147 		formObj.onmouseoversrc.value = onmouseoversrc;
       
   148 		formObj.onmouseoutsrc.value  = onmouseoutsrc;
       
   149 		formObj.id.value  = tinyMCE.getAttrib(elm, 'id');
       
   150 		formObj.dir.value  = tinyMCE.getAttrib(elm, 'dir');
       
   151 		formObj.lang.value  = tinyMCE.getAttrib(elm, 'lang');
       
   152 		formObj.longdesc.value  = tinyMCE.getAttrib(elm, 'longdesc');
       
   153 		formObj.usemap.value  = tinyMCE.getAttrib(elm, 'usemap');
       
   154 		formObj.style.value  = tinyMCE.serializeStyle(style);
       
   155 
       
   156 		// Select by the values
       
   157 		if (tinyMCE.isMSIE)
       
   158 			selectByValue(formObj, 'align', getStyle(elm, 'align', 'styleFloat'));
       
   159 		else
       
   160 			selectByValue(formObj, 'align', getStyle(elm, 'align', 'cssFloat'));
       
   161 
       
   162 		addClassesToList('classlist', 'advimage_styles');
       
   163 
       
   164 		selectByValue(formObj, 'classlist', tinyMCE.getAttrib(elm, 'class'));
       
   165 		selectByValue(formObj, 'imagelistsrc', src);
       
   166 		selectByValue(formObj, 'imagelistover', onmouseoversrc);
       
   167 		selectByValue(formObj, 'imagelistout', onmouseoutsrc);
       
   168 
       
   169 		updateStyle();
       
   170 		showPreviewImage(src, true);
       
   171 		changeAppearance();
       
   172 
       
   173 		window.focus();
       
   174 	} else
       
   175 		addClassesToList('classlist', 'advimage_styles');
       
   176 
       
   177 	// If option enabled default contrain proportions to checked
       
   178 	if (tinyMCE.getParam("advimage_constrain_proportions", true))
       
   179 		formObj.constrain.checked = true;
       
   180 
       
   181 	// Check swap image if valid data
       
   182 	if (formObj.onmouseoversrc.value != "" || formObj.onmouseoutsrc.value != "")
       
   183 		setSwapImageDisabled(false);
       
   184 	else
       
   185 		setSwapImageDisabled(true);
       
   186 }
       
   187 
       
   188 function setSwapImageDisabled(state) {
       
   189 	var formObj = document.forms[0];
       
   190 
       
   191 	formObj.onmousemovecheck.checked = !state;
       
   192 
       
   193 	setBrowserDisabled('overbrowser', state);
       
   194 	setBrowserDisabled('outbrowser', state);
       
   195 
       
   196 	if (formObj.imagelistover)
       
   197 		formObj.imagelistover.disabled = state;
       
   198 
       
   199 	if (formObj.imagelistout)
       
   200 		formObj.imagelistout.disabled = state;
       
   201 
       
   202 	formObj.onmouseoversrc.disabled = state;
       
   203 	formObj.onmouseoutsrc.disabled  = state;
       
   204 }
       
   205 
       
   206 function setAttrib(elm, attrib, value) {
       
   207 	var formObj = document.forms[0];
       
   208 	var valueElm = formObj.elements[attrib];
       
   209 
       
   210 	if (typeof(value) == "undefined" || value == null) {
       
   211 		value = "";
       
   212 
       
   213 		if (valueElm)
       
   214 			value = valueElm.value;
       
   215 	}
       
   216 
       
   217 	if (value != "") {
       
   218 		elm.setAttribute(attrib, value);
       
   219 
       
   220 		if (attrib == "style")
       
   221 			attrib = "style.cssText";
       
   222 
       
   223 		if (attrib == "longdesc")
       
   224 			attrib = "longDesc";
       
   225 
       
   226 		if (attrib == "width") {
       
   227 			attrib = "style.width";
       
   228 			value = value + "px";
       
   229 			value = value.replace(/%px/g, 'px');
       
   230 		}
       
   231 
       
   232 		if (attrib == "height") {
       
   233 			attrib = "style.height";
       
   234 			value = value + "px";
       
   235 			value = value.replace(/%px/g, 'px');
       
   236 		}
       
   237 
       
   238 		if (attrib == "class")
       
   239 			attrib = "className";
       
   240 
       
   241 		eval('elm.' + attrib + "=value;");
       
   242 	} else
       
   243 		elm.removeAttribute(attrib);
       
   244 }
       
   245 
       
   246 function makeAttrib(attrib, value) {
       
   247 	var formObj = document.forms[0];
       
   248 	var valueElm = formObj.elements[attrib];
       
   249 
       
   250 	if (typeof(value) == "undefined" || value == null) {
       
   251 		value = "";
       
   252 
       
   253 		if (valueElm)
       
   254 			value = valueElm.value;
       
   255 	}
       
   256 
       
   257 	if (value == "")
       
   258 		return "";
       
   259 
       
   260 	// XML encode it
       
   261 	value = value.replace(/&/g, '&amp;');
       
   262 	value = value.replace(/\"/g, '&quot;');
       
   263 	value = value.replace(/</g, '&lt;');
       
   264 	value = value.replace(/>/g, '&gt;');
       
   265 
       
   266 	return ' ' + attrib + '="' + value + '"';
       
   267 }
       
   268 
       
   269 function insertAction() {
       
   270 	var inst = tinyMCE.getInstanceById(tinyMCE.getWindowArg('editor_id'));
       
   271 	var elm = inst.getFocusElement();
       
   272 	var formObj = document.forms[0];
       
   273 	var src = formObj.src.value;
       
   274 	var onmouseoversrc = formObj.onmouseoversrc.value;
       
   275 	var onmouseoutsrc = formObj.onmouseoutsrc.value;
       
   276 
       
   277 	if (!AutoValidator.validate(formObj)) {
       
   278 		alert(tinyMCE.getLang('lang_invalid_data'));
       
   279 		return false;
       
   280 	}
       
   281 
       
   282 	if (tinyMCE.getParam("accessibility_warnings")) {
       
   283 		if (formObj.alt.value == "" && !confirm(tinyMCE.getLang('lang_advimage_missing_alt', '', true)))
       
   284 			return;
       
   285 	}
       
   286 
       
   287 	if (onmouseoversrc && onmouseoversrc != "")
       
   288 		onmouseoversrc = "this.src='" + convertURL(onmouseoversrc, tinyMCE.imgElement) + "';";
       
   289 
       
   290 	if (onmouseoutsrc && onmouseoutsrc != "")
       
   291 		onmouseoutsrc = "this.src='" + convertURL(onmouseoutsrc, tinyMCE.imgElement) + "';";
       
   292 
       
   293 	if (elm != null && elm.nodeName == "IMG") {
       
   294 		setAttrib(elm, 'src', convertURL(src, tinyMCE.imgElement));
       
   295 		setAttrib(elm, 'mce_src', src);
       
   296 		setAttrib(elm, 'alt');
       
   297 		setAttrib(elm, 'title');
       
   298 		setAttrib(elm, 'border');
       
   299 		setAttrib(elm, 'vspace');
       
   300 		setAttrib(elm, 'hspace');
       
   301 		setAttrib(elm, 'width');
       
   302 		setAttrib(elm, 'height');
       
   303 		setAttrib(elm, 'onmouseover', onmouseoversrc);
       
   304 		setAttrib(elm, 'onmouseout', onmouseoutsrc);
       
   305 		setAttrib(elm, 'id');
       
   306 		setAttrib(elm, 'dir');
       
   307 		setAttrib(elm, 'lang');
       
   308 		setAttrib(elm, 'longdesc');
       
   309 		setAttrib(elm, 'usemap');
       
   310 		setAttrib(elm, 'style');
       
   311 		setAttrib(elm, 'class', getSelectValue(formObj, 'classlist'));
       
   312 		setAttrib(elm, 'align', getSelectValue(formObj, 'align'));
       
   313 
       
   314 		//tinyMCEPopup.execCommand("mceRepaint");
       
   315 
       
   316 		// Repaint if dimensions changed
       
   317 		if (formObj.width.value != orgImageWidth || formObj.height.value != orgImageHeight)
       
   318 			inst.repaint();
       
   319 
       
   320 		// Refresh in old MSIE
       
   321 		if (tinyMCE.isMSIE5)
       
   322 			elm.outerHTML = elm.outerHTML;
       
   323 	} else {
       
   324 		var html = "<img";
       
   325 
       
   326 		html += makeAttrib('src', convertURL(src, tinyMCE.imgElement));
       
   327 		html += makeAttrib('mce_src', src);
       
   328 		html += makeAttrib('alt');
       
   329 		html += makeAttrib('title');
       
   330 		html += makeAttrib('border');
       
   331 		html += makeAttrib('vspace');
       
   332 		html += makeAttrib('hspace');
       
   333 		html += makeAttrib('width');
       
   334 		html += makeAttrib('height');
       
   335 		html += makeAttrib('onmouseover', onmouseoversrc);
       
   336 		html += makeAttrib('onmouseout', onmouseoutsrc);
       
   337 		html += makeAttrib('id');
       
   338 		html += makeAttrib('dir');
       
   339 		html += makeAttrib('lang');
       
   340 		html += makeAttrib('longdesc');
       
   341 		html += makeAttrib('usemap');
       
   342 		html += makeAttrib('style');
       
   343 		html += makeAttrib('class', getSelectValue(formObj, 'classlist'));
       
   344 		html += makeAttrib('align', getSelectValue(formObj, 'align'));
       
   345 		html += " />";
       
   346 
       
   347 		tinyMCEPopup.execCommand("mceInsertContent", false, html);
       
   348 	}
       
   349 
       
   350 	tinyMCE._setEventsEnabled(inst.getBody(), false);
       
   351 	tinyMCEPopup.close();
       
   352 }
       
   353 
       
   354 function cancelAction() {
       
   355 	tinyMCEPopup.close();
       
   356 }
       
   357 
       
   358 function changeAppearance() {
       
   359 	var formObj = document.forms[0];
       
   360 	var img = document.getElementById('alignSampleImg');
       
   361 
       
   362 	if (img) {
       
   363 		img.align = formObj.align.value;
       
   364 		img.border = formObj.border.value;
       
   365 		img.hspace = formObj.hspace.value;
       
   366 		img.vspace = formObj.vspace.value;
       
   367 	}
       
   368 }
       
   369 
       
   370 function changeMouseMove() {
       
   371 	var formObj = document.forms[0];
       
   372 
       
   373 	setSwapImageDisabled(!formObj.onmousemovecheck.checked);
       
   374 }
       
   375 
       
   376 function updateStyle() {
       
   377 	var formObj = document.forms[0];
       
   378 	var st = tinyMCE.parseStyle(formObj.style.value);
       
   379 
       
   380 	if (tinyMCE.getParam('inline_styles', false)) {
       
   381 		st['width'] = formObj.width.value == '' ? '' : formObj.width.value + "px";
       
   382 		st['height'] = formObj.height.value == '' ? '' : formObj.height.value + "px";
       
   383 		st['border-width'] = formObj.border.value == '' ? '' : formObj.border.value + "px";
       
   384 		st['margin-top'] = formObj.vspace.value == '' ? '' : formObj.vspace.value + "px";
       
   385 		st['margin-bottom'] = formObj.vspace.value == '' ? '' : formObj.vspace.value + "px";
       
   386 		st['margin-left'] = formObj.hspace.value == '' ? '' : formObj.hspace.value + "px";
       
   387 		st['margin-right'] = formObj.hspace.value == '' ? '' : formObj.hspace.value + "px";
       
   388 	} else {
       
   389 		st['width'] = st['height'] = st['border-width'] = null;
       
   390 
       
   391 		if (st['margin-top'] == st['margin-bottom'])
       
   392 			st['margin-top'] = st['margin-bottom'] = null;
       
   393 
       
   394 		if (st['margin-left'] == st['margin-right'])
       
   395 			st['margin-left'] = st['margin-right'] = null;
       
   396 	}
       
   397 
       
   398 	formObj.style.value = tinyMCE.serializeStyle(st);
       
   399 }
       
   400 
       
   401 function styleUpdated() {
       
   402 	var formObj = document.forms[0];
       
   403 	var st = tinyMCE.parseStyle(formObj.style.value);
       
   404 
       
   405 	if (st['width'])
       
   406 		formObj.width.value = st['width'].replace('px', '');
       
   407 
       
   408 	if (st['height'])
       
   409 		formObj.height.value = st['height'].replace('px', '');
       
   410 
       
   411 	if (st['margin-top'] && st['margin-top'] == st['margin-bottom'])
       
   412 		formObj.vspace.value = st['margin-top'].replace('px', '');
       
   413 
       
   414 	if (st['margin-left'] && st['margin-left'] == st['margin-right'])
       
   415 		formObj.hspace.value = st['margin-left'].replace('px', '');
       
   416 
       
   417 	if (st['border-width'])
       
   418 		formObj.border.value = st['border-width'].replace('px', '');
       
   419 }
       
   420 
       
   421 function changeHeight() {
       
   422 	var formObj = document.forms[0];
       
   423 
       
   424 	if (!formObj.constrain.checked || !preloadImg) {
       
   425 		updateStyle();
       
   426 		return;
       
   427 	}
       
   428 
       
   429 	if (formObj.width.value == "" || formObj.height.value == "")
       
   430 		return;
       
   431 
       
   432 	var temp = (parseInt(formObj.width.value) / parseInt(preloadImg.width)) * preloadImg.height;
       
   433 	formObj.height.value = temp.toFixed(0);
       
   434 	updateStyle();
       
   435 }
       
   436 
       
   437 function changeWidth() {
       
   438 	var formObj = document.forms[0];
       
   439 
       
   440 	if (!formObj.constrain.checked || !preloadImg) {
       
   441 		updateStyle();
       
   442 		return;
       
   443 	}
       
   444 
       
   445 	if (formObj.width.value == "" || formObj.height.value == "")
       
   446 		return;
       
   447 
       
   448 	var temp = (parseInt(formObj.height.value) / parseInt(preloadImg.height)) * preloadImg.width;
       
   449 	formObj.width.value = temp.toFixed(0);
       
   450 	updateStyle();
       
   451 }
       
   452 
       
   453 function onSelectMainImage(target_form_element, name, value) {
       
   454 	var formObj = document.forms[0];
       
   455 
       
   456 	formObj.alt.value = name;
       
   457 	formObj.title.value = name;
       
   458 
       
   459 	resetImageData();
       
   460 	showPreviewImage(formObj.elements[target_form_element].value, false);
       
   461 }
       
   462 
       
   463 function showPreviewImage(src, start) {
       
   464 	var formObj = document.forms[0];
       
   465 
       
   466 	selectByValue(document.forms[0], 'imagelistsrc', src);
       
   467 
       
   468 	var elm = document.getElementById('prev');
       
   469 	var src = src == "" ? src : tinyMCE.convertRelativeToAbsoluteURL(tinyMCE.settings['base_href'], src);
       
   470 
       
   471 	if (!start && tinyMCE.getParam("advimage_update_dimensions_onchange", true))
       
   472 		resetImageData();
       
   473 
       
   474 	if (src == "")
       
   475 		elm.innerHTML = "";
       
   476 	else
       
   477 		elm.innerHTML = '<img id="previewImg" src="' + src + '" border="0" onload="updateImageData();" onerror="resetImageData();" />'
       
   478 }
       
   479 
       
   480 function updateImageData() {
       
   481 	var formObj = document.forms[0];
       
   482 
       
   483 	preloadImg = document.getElementById('previewImg');
       
   484 
       
   485 	if (formObj.width.value == "")
       
   486 		formObj.width.value = preloadImg.width;
       
   487 
       
   488 	if (formObj.height.value == "")
       
   489 		formObj.height.value = preloadImg.height;
       
   490 
       
   491 	updateStyle();
       
   492 }
       
   493 
       
   494 function resetImageData() {
       
   495 	var formObj = document.forms[0];
       
   496 	formObj.width.value = formObj.height.value = "";	
       
   497 }
       
   498 
       
   499 function getSelectValue(form_obj, field_name) {
       
   500 	var elm = form_obj.elements[field_name];
       
   501 
       
   502 	if (elm == null || elm.options == null)
       
   503 		return "";
       
   504 
       
   505 	return elm.options[elm.selectedIndex].value;
       
   506 }
       
   507 
       
   508 function getImageListHTML(elm_id, target_form_element, onchange_func) {
       
   509 	if (typeof(tinyMCEImageList) == "undefined" || tinyMCEImageList.length == 0)
       
   510 		return "";
       
   511 
       
   512 	var html = "";
       
   513 
       
   514 	html += '<select id="' + elm_id + '" name="' + elm_id + '"';
       
   515 	html += ' class="mceImageList" onfocus="tinyMCE.addSelectAccessibility(event, this, window);" onchange="this.form.' + target_form_element + '.value=';
       
   516 	html += 'this.options[this.selectedIndex].value;';
       
   517 
       
   518 	if (typeof(onchange_func) != "undefined")
       
   519 		html += onchange_func + '(\'' + target_form_element + '\',this.options[this.selectedIndex].text,this.options[this.selectedIndex].value);';
       
   520 
       
   521 	html += '"><option value="">---</option>';
       
   522 
       
   523 	for (var i=0; i<tinyMCEImageList.length; i++)
       
   524 		html += '<option value="' + tinyMCEImageList[i][1] + '">' + tinyMCEImageList[i][0] + '</option>';
       
   525 
       
   526 	html += '</select>';
       
   527 
       
   528 	return html;
       
   529 
       
   530 	// tinyMCE.debug('-- image list start --', html, '-- image list end --');
       
   531 }
       
   532 
       
   533 // While loading
       
   534 preinit();