include/javascript/tiny_mce/plugins/xhtmlxtras/js/element_common.js

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