home *** CD-ROM | disk | FTP | other *** search
/ Cricao de Sites - 650 Layouts Prontos / WebMasters.iso / Plugins / tinymce-advanced / mce / advimage / jscripts / functions.js
Encoding:
JavaScript  |  2008-02-20  |  15.9 KB  |  535 lines
  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, '&');
  262.     value = value.replace(/\"/g, '"');
  263.     value = value.replace(/</g, '<');
  264.     value = value.replace(/>/g, '>');
  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();
  535.