image.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. var ImageDialog = {
  2. preInit : function() {
  3. var url;
  4. tinyMCEPopup.requireLangPack();
  5. if (url = tinyMCEPopup.getParam("external_image_list_url"))
  6. document.write('<script language="javascript" type="text/javascript" src="' + tinyMCEPopup.editor.documentBaseURI.toAbsolute(url) + '"></script>');
  7. },
  8. init : function() {
  9. var f = document.forms[0], ed = tinyMCEPopup.editor;
  10. // Setup browse button
  11. document.getElementById('srcbrowsercontainer').innerHTML = getBrowserHTML('srcbrowser','src','image','theme_advanced_image');
  12. if (isVisible('srcbrowser'))
  13. document.getElementById('src').style.width = '180px';
  14. e = ed.selection.getNode();
  15. this.fillFileList('image_list', tinyMCEPopup.getParam('external_image_list', 'tinyMCEImageList'));
  16. if (e.nodeName == 'IMG') {
  17. f.src.value = ed.dom.getAttrib(e, 'src');
  18. f.alt.value = ed.dom.getAttrib(e, 'alt');
  19. f.border.value = this.getAttrib(e, 'border');
  20. f.vspace.value = this.getAttrib(e, 'vspace');
  21. f.hspace.value = this.getAttrib(e, 'hspace');
  22. f.width.value = ed.dom.getAttrib(e, 'width');
  23. f.height.value = ed.dom.getAttrib(e, 'height');
  24. f.insert.value = ed.getLang('update');
  25. this.styleVal = ed.dom.getAttrib(e, 'style');
  26. selectByValue(f, 'image_list', f.src.value);
  27. selectByValue(f, 'align', this.getAttrib(e, 'align'));
  28. this.updateStyle();
  29. }
  30. },
  31. fillFileList : function(id, l) {
  32. var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;
  33. l = typeof(l) === 'function' ? l() : window[l];
  34. if (l && l.length > 0) {
  35. lst.options[lst.options.length] = new Option('', '');
  36. tinymce.each(l, function(o) {
  37. lst.options[lst.options.length] = new Option(o[0], o[1]);
  38. });
  39. } else
  40. dom.remove(dom.getParent(id, 'tr'));
  41. },
  42. update : function() {
  43. var f = document.forms[0], nl = f.elements, ed = tinyMCEPopup.editor, args = {}, el;
  44. tinyMCEPopup.restoreSelection();
  45. if (f.src.value === '') {
  46. if (ed.selection.getNode().nodeName == 'IMG') {
  47. ed.dom.remove(ed.selection.getNode());
  48. ed.execCommand('mceRepaint');
  49. }
  50. tinyMCEPopup.close();
  51. return;
  52. }
  53. if (!ed.settings.inline_styles) {
  54. args = tinymce.extend(args, {
  55. vspace : nl.vspace.value,
  56. hspace : nl.hspace.value,
  57. border : nl.border.value,
  58. align : getSelectValue(f, 'align')
  59. });
  60. } else
  61. args.style = this.styleVal;
  62. tinymce.extend(args, {
  63. src : f.src.value.replace(/ /g, '%20'),
  64. alt : f.alt.value,
  65. width : f.width.value,
  66. height : f.height.value
  67. });
  68. el = ed.selection.getNode();
  69. if (el && el.nodeName == 'IMG') {
  70. ed.dom.setAttribs(el, args);
  71. tinyMCEPopup.editor.execCommand('mceRepaint');
  72. tinyMCEPopup.editor.focus();
  73. } else {
  74. tinymce.each(args, function(value, name) {
  75. if (value === "") {
  76. delete args[name];
  77. }
  78. });
  79. ed.execCommand('mceInsertContent', false, tinyMCEPopup.editor.dom.createHTML('img', args), {skip_undo : 1});
  80. ed.undoManager.add();
  81. }
  82. tinyMCEPopup.close();
  83. },
  84. updateStyle : function() {
  85. var dom = tinyMCEPopup.dom, st = {}, v, f = document.forms[0];
  86. if (tinyMCEPopup.editor.settings.inline_styles) {
  87. tinymce.each(tinyMCEPopup.dom.parseStyle(this.styleVal), function(value, key) {
  88. st[key] = value;
  89. });
  90. // Handle align
  91. v = getSelectValue(f, 'align');
  92. if (v) {
  93. if (v == 'left' || v == 'right') {
  94. st['float'] = v;
  95. delete st['vertical-align'];
  96. } else {
  97. st['vertical-align'] = v;
  98. delete st['float'];
  99. }
  100. } else {
  101. delete st['float'];
  102. delete st['vertical-align'];
  103. }
  104. // Handle border
  105. v = f.border.value;
  106. if (v || v == '0') {
  107. if (v == '0')
  108. st['border'] = '0';
  109. else
  110. st['border'] = v + 'px solid black';
  111. } else
  112. delete st['border'];
  113. // Handle hspace
  114. v = f.hspace.value;
  115. if (v) {
  116. delete st['margin'];
  117. st['margin-left'] = v + 'px';
  118. st['margin-right'] = v + 'px';
  119. } else {
  120. delete st['margin-left'];
  121. delete st['margin-right'];
  122. }
  123. // Handle vspace
  124. v = f.vspace.value;
  125. if (v) {
  126. delete st['margin'];
  127. st['margin-top'] = v + 'px';
  128. st['margin-bottom'] = v + 'px';
  129. } else {
  130. delete st['margin-top'];
  131. delete st['margin-bottom'];
  132. }
  133. // Merge
  134. st = tinyMCEPopup.dom.parseStyle(dom.serializeStyle(st), 'img');
  135. this.styleVal = dom.serializeStyle(st, 'img');
  136. }
  137. },
  138. getAttrib : function(e, at) {
  139. var ed = tinyMCEPopup.editor, dom = ed.dom, v, v2;
  140. if (ed.settings.inline_styles) {
  141. switch (at) {
  142. case 'align':
  143. if (v = dom.getStyle(e, 'float'))
  144. return v;
  145. if (v = dom.getStyle(e, 'vertical-align'))
  146. return v;
  147. break;
  148. case 'hspace':
  149. v = dom.getStyle(e, 'margin-left')
  150. v2 = dom.getStyle(e, 'margin-right');
  151. if (v && v == v2)
  152. return parseInt(v.replace(/[^0-9]/g, ''));
  153. break;
  154. case 'vspace':
  155. v = dom.getStyle(e, 'margin-top')
  156. v2 = dom.getStyle(e, 'margin-bottom');
  157. if (v && v == v2)
  158. return parseInt(v.replace(/[^0-9]/g, ''));
  159. break;
  160. case 'border':
  161. v = 0;
  162. tinymce.each(['top', 'right', 'bottom', 'left'], function(sv) {
  163. sv = dom.getStyle(e, 'border-' + sv + '-width');
  164. // False or not the same as prev
  165. if (!sv || (sv != v && v !== 0)) {
  166. v = 0;
  167. return false;
  168. }
  169. if (sv)
  170. v = sv;
  171. });
  172. if (v)
  173. return parseInt(v.replace(/[^0-9]/g, ''));
  174. break;
  175. }
  176. }
  177. if (v = dom.getAttrib(e, at))
  178. return v;
  179. return '';
  180. },
  181. resetImageData : function() {
  182. var f = document.forms[0];
  183. f.width.value = f.height.value = "";
  184. },
  185. updateImageData : function() {
  186. var f = document.forms[0], t = ImageDialog;
  187. if (f.width.value == "")
  188. f.width.value = t.preloadImg.width;
  189. if (f.height.value == "")
  190. f.height.value = t.preloadImg.height;
  191. },
  192. getImageData : function() {
  193. var f = document.forms[0];
  194. this.preloadImg = new Image();
  195. this.preloadImg.onload = this.updateImageData;
  196. this.preloadImg.onerror = this.resetImageData;
  197. this.preloadImg.src = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.src.value);
  198. }
  199. };
  200. ImageDialog.preInit();
  201. tinyMCEPopup.onInit.add(ImageDialog.init, ImageDialog);