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

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