public/javascripts/tiny_mce/plugins/xhtmlxtras/jscripts/element_common.js

   1  /**
   2  * $Id: editor_plugin_src.js 42 2006-08-08 14:32:24Z spocke $
   3  *
   4  * @author Moxiecode - based on work by Andrew Tetlaw
   5  * @copyright Copyright © 2004-2006, Moxiecode Systems AB, All rights reserved.
   6  */
   7
   8 function initCommonAttributes(elm) {
   9         var formObj = document.forms[0];
  10
  11         // Setup form data for common element attributes
  12         setFormValue('title', tinyMCE.getAttrib(elm, 'title'));
  13         setFormValue('id', tinyMCE.getAttrib(elm, 'id'));
  14         selectByValue(formObj, 'class', tinyMCE.getAttrib(elm, 'class'), true);
  15         setFormValue('style', tinyMCE.getAttrib(elm, 'style'));
  16         selectByValue(formObj, 'dir', tinyMCE.getAttrib(elm, 'dir'));
  17         setFormValue('lang', tinyMCE.getAttrib(elm, 'lang'));
  18         setFormValue('onfocus', tinyMCE.getAttrib(elm, 'onfocus'));
  19         setFormValue('onblur', tinyMCE.getAttrib(elm, 'onblur'));
  20         setFormValue('onclick', tinyMCE.getAttrib(elm, 'onclick'));
  21         setFormValue('ondblclick', tinyMCE.getAttrib(elm, 'ondblclick'));
  22         setFormValue('onmousedown', tinyMCE.getAttrib(elm, 'onmousedown'));
  23         setFormValue('onmouseup', tinyMCE.getAttrib(elm, 'onmouseup'));
  24         setFormValue('onmouseover', tinyMCE.getAttrib(elm, 'onmouseover'));
  25         setFormValue('onmousemove', tinyMCE.getAttrib(elm, 'onmousemove'));
  26         setFormValue('onmouseout', tinyMCE.getAttrib(elm, 'onmouseout'));
  27         setFormValue('onkeypress', tinyMCE.getAttrib(elm, 'onkeypress'));
  28         setFormValue('onkeydown', tinyMCE.getAttrib(elm, 'onkeydown'));
  29         setFormValue('onkeyup', tinyMCE.getAttrib(elm, 'onkeyup'));
  30 }
  31
  32 function setFormValue(name, value) {
  33         if(document.forms[0].elements[name]) document.forms[0].elements[name].value = value;
  34 }
  35
  36 function insertDateTime(id) {
  37         document.getElementById(id).value = getDateTime(new Date(), "%Y-%m-%dT%H:%M:%S");
  38 }
  39
  40 function getDateTime(d, fmt) {
  41         fmt = fmt.replace("%D", "%m/%d/%y");
  42         fmt = fmt.replace("%r", "%I:%M:%S %p");
  43         fmt = fmt.replace("%Y", "" + d.getFullYear());
  44         fmt = fmt.replace("%y", "" + d.getYear());
  45         fmt = fmt.replace("%m", addZeros(d.getMonth()+1, 2));
  46         fmt = fmt.replace("%d", addZeros(d.getDate(), 2));
  47         fmt = fmt.replace("%H", "" + addZeros(d.getHours(), 2));
  48         fmt = fmt.replace("%M", "" + addZeros(d.getMinutes(), 2));
  49         fmt = fmt.replace("%S", "" + addZeros(d.getSeconds(), 2));
  50         fmt = fmt.replace("%I", "" + ((d.getHours() + 11) % 12 + 1));
  51         fmt = fmt.replace("%p", "" + (d.getHours() < 12 ? "AM" : "PM"));
  52         fmt = fmt.replace("%%", "%");
  53
  54         return fmt;
  55 }
  56
  57 function addZeros(value, len) {
  58         var i;
  59
  60         value = "" + value;
  61
  62         if (value.length < len) {
  63                 for (i=0; i<(len-value.length); i++)
  64                         value = "0" + value;
  65         }
  66
  67         return value;
  68 }
  69
  70 function selectByValue(form_obj, field_name, value, add_custom, ignore_case) {
  71         if (!form_obj || !form_obj.elements[field_name])
  72                 return;
  73
  74         var sel = form_obj.elements[field_name];
  75
  76         var found = false;
  77         for (var i=0; i<sel.options.length; i++) {
  78                 var option = sel.options[i];
  79
  80                 if (option.value == value || (ignore_case && option.value.toLowerCase() == value.toLowerCase())) {
  81                         option.selected = true;
  82                         found = true;
  83                 } else
  84                         option.selected = false;
  85         }
  86
  87         if (!found && add_custom && value != '') {
  88                 var option = new Option('Value: ' + value, value);
  89                 option.selected = true;
  90                 sel.options[sel.options.length] = option;
  91         }
  92
  93         return found;
  94 }
  95
  96 function setAttrib(elm, attrib, value) {
  97         var formObj = document.forms[0];
  98         var valueElm = formObj.elements[attrib.toLowerCase()];
  99
 100         if (typeof(value) == "undefined" || value == null) {
 101                 value = "";
 102
 103                 if (valueElm)
 104                         value = valueElm.value;
 105         }
 106
 107         if (value != "") {
 108                 if (attrib == "style")
 109                         attrib = "style.cssText";
 110
 111                 if (attrib.substring(0, 2) == 'on')
 112                         value = 'return true;' + value;
 113
 114                 if (attrib == "class") {
 115                         tinyMCE.addCSSClass(elm, value);
 116                         return;
 117                 }
 118
 119                 elm.setAttribute(attrib.toLowerCase(), value);
 120         } else
 121                 elm.removeAttribute(attrib);
 122 }
 123
 124 function setAllCommonAttribs(elm) {
 125         setAttrib(elm, 'title');
 126         setAttrib(elm, 'id');
 127         setAttrib(elm, 'class');
 128         setAttrib(elm, 'style');
 129         setAttrib(elm, 'dir');
 130         setAttrib(elm, 'lang');
 131         /*setAttrib(elm, 'onfocus');
 132         setAttrib(elm, 'onblur');
 133         setAttrib(elm, 'onclick');
 134         setAttrib(elm, 'ondblclick');
 135         setAttrib(elm, 'onmousedown');
 136         setAttrib(elm, 'onmouseup');
 137         setAttrib(elm, 'onmouseover');
 138         setAttrib(elm, 'onmousemove');
 139         setAttrib(elm, 'onmouseout');
 140         setAttrib(elm, 'onkeypress');
 141         setAttrib(elm, 'onkeydown');
 142         setAttrib(elm, 'onkeyup');*/
 143 }
 144
 145 SXE = {
 146         currentAction : "insert",
 147         inst : tinyMCE.getInstanceById(tinyMCE.getWindowArg('editor_id')),
 148         updateElement : null
 149 }
 150
 151 SXE.focusElement = SXE.inst.getFocusElement();
 152
 153 SXE.initElementDialog = function(element_name) {
 154         addClassesToList('class', 'xhtmlxtras_styles');
 155         TinyMCE_EditableSelects.init();
 156
 157         element_name = element_name.toLowerCase();
 158         var elm = tinyMCE.getParentElement(SXE.focusElement, element_name);
 159         if (elm != null && elm.nodeName == element_name.toUpperCase()) {
 160                 SXE.currentAction = "update";
 161         }
 162
 163         if (SXE.currentAction == "update") {
 164                 initCommonAttributes(elm);
 165                 SXE.updateElement = elm;
 166         }
 167
 168         document.forms[0].insert.value = tinyMCE.getLang('lang_' + SXE.currentAction, 'Insert', true);
 169 }
 170
 171 SXE.insertElement = function(element_name) {
 172         var elm = tinyMCE.getParentElement(SXE.focusElement, element_name), h, tagName;
 173
 174         tinyMCEPopup.execCommand('mceBeginUndoLevel');
 175         if (elm == null) {
 176                 var s = SXE.inst.selection.getSelectedHTML();
 177                 if(s.length > 0) {
 178                         tagName = element_name;
 179
 180                         if (tinyMCE.isIE && !tinyMCE.isOpera && element_name.indexOf('html:') == 0)
 181                                 element_name = element_name.substring(5).toLowerCase();
 182
 183                         h = '<' + tagName + ' id="#sxe_temp_' + element_name + '#">' + s + '</' + tagName + '>';
 184
 185                         tinyMCEPopup.execCommand('mceInsertContent', false, h);
 186
 187                         var elementArray = tinyMCE.getElementsByAttributeValue(SXE.inst.getBody(), element_name, 'id', '#sxe_temp_' + element_name + '#');
 188                         for (var i=0; i<elementArray.length; i++) {
 189                                 var elm = elementArray[i];
 190
 191                                 elm.id = '';
 192                                 elm.setAttribute('id', '');
 193                                 elm.removeAttribute('id');
 194
 195                                 setAllCommonAttribs(elm);
 196                         }
 197                 }
 198         } else {
 199                 setAllCommonAttribs(elm);
 200         }
 201         tinyMCE.triggerNodeChange();
 202         tinyMCEPopup.execCommand('mceEndUndoLevel');
 203 }
 204
 205 SXE.removeElement = function(element_name){
 206         element_name = element_name.toLowerCase();
 207         elm = tinyMCE.getParentElement(SXE.focusElement, element_name);
 208         if(elm && elm.nodeName == element_name.toUpperCase()){
 209                 tinyMCEPopup.execCommand('mceBeginUndoLevel');
 210                 tinyMCE.execCommand('mceRemoveNode', false, elm);
 211                 tinyMCE.triggerNodeChange();
 212                 tinyMCEPopup.execCommand('mceEndUndoLevel');
 213         }
 214 }
 215
 216 SXE.showRemoveButton = function() {
 217                 document.getElementById("remove").style.display = 'block';
 218 }
 219
 220 SXE.containsClass = function(elm,cl) {
 221         return (elm.className.indexOf(cl) > -1) ? true : false;
 222 }
 223
 224 SXE.removeClass = function(elm,cl) {
 225         if(elm.className == null || elm.className == "" || !SXE.containsClass(elm,cl)) {
 226                 return true;
 227         }
 228         var classNames = elm.className.split(" ");
 229         var newClassNames = "";
 230         for (var x = 0, cnl = classNames.length; x < cnl; x++) {
 231                 if (classNames[x] != cl) {
 232                         newClassNames += (classNames[x] + " ");
 233                 }
 234         }
 235         elm.className = newClassNames.substring(0,newClassNames.length-1); //removes extra space at the end
 236 }
 237
 238 SXE.addClass = function(elm,cl) {
 239         if(!SXE.containsClass(elm,cl)) elm.className ? elm.className += " " + cl : elm.className = cl;
 240         return true;
 241 }