tableCell.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  1. /*
  2. Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. CKEDITOR.dialog.add("cellProperties", function(g) {
  6. function k(a) {
  7. return {
  8. isSpacer: !0,
  9. type: "html",
  10. html: "\x26nbsp;",
  11. requiredContent: a ? a : void 0
  12. };
  13. }
  14. function r() {
  15. return { type: "vbox", padding: 0, children: [] };
  16. }
  17. function t(a) {
  18. return {
  19. requiredContent: "td{" + a + "}",
  20. type: "hbox",
  21. widths: ["70%", "30%"],
  22. children: [
  23. {
  24. type: "text",
  25. id: a,
  26. width: "100px",
  27. label: d[a],
  28. validate: n.number(c["invalid" + CKEDITOR.tools.capitalize(a)]),
  29. onLoad: function() {
  30. var b = this.getDialog()
  31. .getContentElement("info", a + "Type")
  32. .getElement(),
  33. e = this.getInputElement(),
  34. c = e.getAttribute("aria-labelledby");
  35. e.setAttribute("aria-labelledby", [c, b.$.id].join(" "));
  36. },
  37. setup: f(function(b) {
  38. var e = parseFloat(b.getAttribute(a), 10);
  39. b = parseFloat(b.getStyle(a), 10);
  40. if (!isNaN(b)) return b;
  41. if (!isNaN(e)) return e;
  42. }),
  43. commit: function(b) {
  44. var e = parseFloat(this.getValue(), 10),
  45. c = this.getDialog().getValueOf("info", a + "Type") || u(b, a);
  46. isNaN(e) ? b.removeStyle(a) : b.setStyle(a, e + c);
  47. b.removeAttribute(a);
  48. },
  49. default: ""
  50. },
  51. {
  52. type: "select",
  53. id: a + "Type",
  54. label: g.lang.table[a + "Unit"],
  55. labelStyle: "visibility:hidden;display:block;width:0;overflow:hidden",
  56. default: "px",
  57. items: [[p.widthPx, "px"], [p.widthPc, "%"]],
  58. setup: f(function(b) {
  59. return u(b, a);
  60. })
  61. }
  62. ]
  63. };
  64. }
  65. function f(a) {
  66. return function(b) {
  67. for (var e = a(b[0]), c = 1; c < b.length; c++)
  68. if (a(b[c]) !== e) {
  69. e = null;
  70. break;
  71. }
  72. "undefined" != typeof e &&
  73. (this.setValue(e),
  74. CKEDITOR.env.gecko &&
  75. "select" == this.type &&
  76. !e &&
  77. (this.getInputElement().$.selectedIndex = -1));
  78. };
  79. }
  80. function u(a, b) {
  81. var c = /^(\d+(?:\.\d+)?)(px|%)$/.exec(a.getStyle(b) || a.getAttribute(b));
  82. if (c) return c[2];
  83. }
  84. var p = g.lang.table,
  85. c = p.cell,
  86. d = g.lang.common,
  87. n = CKEDITOR.dialog.validate,
  88. w = "rtl" == g.lang.dir,
  89. l = g.plugins.colordialog,
  90. q = [
  91. t("width"),
  92. t("height"),
  93. k(["td{width}", "td{height}"]),
  94. {
  95. type: "select",
  96. id: "wordWrap",
  97. requiredContent: "td{white-space}",
  98. label: c.wordWrap,
  99. default: "yes",
  100. items: [[c.yes, "yes"], [c.no, "no"]],
  101. setup: f(function(a) {
  102. var b = a.getAttribute("noWrap");
  103. if ("nowrap" == a.getStyle("white-space") || b) return "no";
  104. }),
  105. commit: function(a) {
  106. "no" == this.getValue()
  107. ? a.setStyle("white-space", "nowrap")
  108. : a.removeStyle("white-space");
  109. a.removeAttribute("noWrap");
  110. }
  111. },
  112. k("td{white-space}"),
  113. {
  114. type: "select",
  115. id: "hAlign",
  116. requiredContent: "td{text-align}",
  117. label: c.hAlign,
  118. default: "",
  119. items: [
  120. [d.notSet, ""],
  121. [d.left, "left"],
  122. [d.center, "center"],
  123. [d.right, "right"],
  124. [d.justify, "justify"]
  125. ],
  126. setup: f(function(a) {
  127. var b = a.getAttribute("align");
  128. return a.getStyle("text-align") || b || "";
  129. }),
  130. commit: function(a) {
  131. var b = this.getValue();
  132. b ? a.setStyle("text-align", b) : a.removeStyle("text-align");
  133. a.removeAttribute("align");
  134. }
  135. },
  136. {
  137. type: "select",
  138. id: "vAlign",
  139. requiredContent: "td{vertical-align}",
  140. label: c.vAlign,
  141. default: "",
  142. items: [
  143. [d.notSet, ""],
  144. [d.alignTop, "top"],
  145. [d.alignMiddle, "middle"],
  146. [d.alignBottom, "bottom"],
  147. [c.alignBaseline, "baseline"]
  148. ],
  149. setup: f(function(a) {
  150. var b = a.getAttribute("vAlign");
  151. a = a.getStyle("vertical-align");
  152. switch (a) {
  153. case "top":
  154. case "middle":
  155. case "bottom":
  156. case "baseline":
  157. break;
  158. default:
  159. a = "";
  160. }
  161. return a || b || "";
  162. }),
  163. commit: function(a) {
  164. var b = this.getValue();
  165. b ? a.setStyle("vertical-align", b) : a.removeStyle("vertical-align");
  166. a.removeAttribute("vAlign");
  167. }
  168. },
  169. k(["td{text-align}", "td{vertical-align}"]),
  170. {
  171. type: "select",
  172. id: "cellType",
  173. requiredContent: "th",
  174. label: c.cellType,
  175. default: "td",
  176. items: [[c.data, "td"], [c.header, "th"]],
  177. setup: f(function(a) {
  178. return a.getName();
  179. }),
  180. commit: function(a) {
  181. a.renameNode(this.getValue());
  182. }
  183. },
  184. k("th"),
  185. {
  186. type: "text",
  187. id: "rowSpan",
  188. requiredContent: "td[rowspan]",
  189. label: c.rowSpan,
  190. default: "",
  191. validate: n.integer(c.invalidRowSpan),
  192. setup: f(function(a) {
  193. if ((a = parseInt(a.getAttribute("rowSpan"), 10)) && 1 != a) return a;
  194. }),
  195. commit: function(a) {
  196. var b = parseInt(this.getValue(), 10);
  197. b && 1 != b
  198. ? a.setAttribute("rowSpan", this.getValue())
  199. : a.removeAttribute("rowSpan");
  200. }
  201. },
  202. {
  203. type: "text",
  204. id: "colSpan",
  205. requiredContent: "td[colspan]",
  206. label: c.colSpan,
  207. default: "",
  208. validate: n.integer(c.invalidColSpan),
  209. setup: f(function(a) {
  210. if ((a = parseInt(a.getAttribute("colSpan"), 10)) && 1 != a) return a;
  211. }),
  212. commit: function(a) {
  213. var b = parseInt(this.getValue(), 10);
  214. b && 1 != b
  215. ? a.setAttribute("colSpan", this.getValue())
  216. : a.removeAttribute("colSpan");
  217. }
  218. },
  219. k(["td[colspan]", "td[rowspan]"]),
  220. {
  221. type: "hbox",
  222. padding: 0,
  223. widths: l ? ["60%", "40%"] : ["100%"],
  224. requiredContent: "td{background-color}",
  225. children: (function() {
  226. var a = [
  227. {
  228. type: "text",
  229. id: "bgColor",
  230. label: c.bgColor,
  231. default: "",
  232. setup: f(function(a) {
  233. var c = a.getAttribute("bgColor");
  234. return a.getStyle("background-color") || c;
  235. }),
  236. commit: function(a) {
  237. this.getValue()
  238. ? a.setStyle("background-color", this.getValue())
  239. : a.removeStyle("background-color");
  240. a.removeAttribute("bgColor");
  241. }
  242. }
  243. ];
  244. l &&
  245. a.push({
  246. type: "button",
  247. id: "bgColorChoose",
  248. class: "colorChooser",
  249. label: c.chooseColor,
  250. onLoad: function() {
  251. this.getElement()
  252. .getParent()
  253. .setStyle("vertical-align", "bottom");
  254. },
  255. onClick: function() {
  256. g.getColorFromDialog(function(a) {
  257. a &&
  258. this.getDialog()
  259. .getContentElement("info", "bgColor")
  260. .setValue(a);
  261. this.focus();
  262. }, this);
  263. }
  264. });
  265. return a;
  266. })()
  267. },
  268. {
  269. type: "hbox",
  270. padding: 0,
  271. widths: l ? ["60%", "40%"] : ["100%"],
  272. requiredContent: "td{border-color}",
  273. children: (function() {
  274. var a = [
  275. {
  276. type: "text",
  277. id: "borderColor",
  278. label: c.borderColor,
  279. default: "",
  280. setup: f(function(a) {
  281. var c = a.getAttribute("borderColor");
  282. return a.getStyle("border-color") || c;
  283. }),
  284. commit: function(a) {
  285. this.getValue()
  286. ? a.setStyle("border-color", this.getValue())
  287. : a.removeStyle("border-color");
  288. a.removeAttribute("borderColor");
  289. }
  290. }
  291. ];
  292. l &&
  293. a.push({
  294. type: "button",
  295. id: "borderColorChoose",
  296. class: "colorChooser",
  297. label: c.chooseColor,
  298. style: (w ? "margin-right" : "margin-left") + ": 10px",
  299. onLoad: function() {
  300. this.getElement()
  301. .getParent()
  302. .setStyle("vertical-align", "bottom");
  303. },
  304. onClick: function() {
  305. g.getColorFromDialog(function(a) {
  306. a &&
  307. this.getDialog()
  308. .getContentElement("info", "borderColor")
  309. .setValue(a);
  310. this.focus();
  311. }, this);
  312. }
  313. });
  314. return a;
  315. })()
  316. }
  317. ],
  318. m = 0,
  319. v = -1,
  320. h = [r()],
  321. q = CKEDITOR.tools.array.filter(q, function(a) {
  322. var b = a.requiredContent;
  323. delete a.requiredContent;
  324. (b = g.filter.check(b)) && !a.isSpacer && m++;
  325. return b;
  326. });
  327. 5 < m && (h = h.concat([k(), r()]));
  328. CKEDITOR.tools.array.forEach(q, function(a) {
  329. a.isSpacer || v++;
  330. 5 < m && v >= m / 2 ? h[2].children.push(a) : h[0].children.push(a);
  331. });
  332. CKEDITOR.tools.array.forEach(h, function(a) {
  333. a.isSpacer || ((a = a.children), a[a.length - 1].isSpacer && a.pop());
  334. });
  335. return {
  336. title: c.title,
  337. minWidth: 1 === h.length ? 205 : 410,
  338. minHeight: 50,
  339. contents: [
  340. {
  341. id: "info",
  342. label: c.title,
  343. accessKey: "I",
  344. elements: [
  345. {
  346. type: "hbox",
  347. widths: 1 === h.length ? ["100%"] : ["40%", "5%", "40%"],
  348. children: h
  349. }
  350. ]
  351. }
  352. ],
  353. onShow: function() {
  354. this.cells = CKEDITOR.plugins.tabletools.getSelectedCells(
  355. this._.editor.getSelection()
  356. );
  357. this.setupContent(this.cells);
  358. },
  359. onOk: function() {
  360. for (
  361. var a = this._.editor.getSelection(),
  362. b = a.createBookmarks(),
  363. c = this.cells,
  364. d = 0;
  365. d < c.length;
  366. d++
  367. )
  368. this.commitContent(c[d]);
  369. this._.editor.forceNextSelectionCheck();
  370. a.selectBookmarks(b);
  371. this._.editor.selectionChange();
  372. },
  373. onLoad: function() {
  374. var a = {};
  375. this.foreach(function(b) {
  376. b.setup &&
  377. b.commit &&
  378. ((b.setup = CKEDITOR.tools.override(b.setup, function(c) {
  379. return function() {
  380. c.apply(this, arguments);
  381. a[b.id] = b.getValue();
  382. };
  383. })),
  384. (b.commit = CKEDITOR.tools.override(b.commit, function(c) {
  385. return function() {
  386. a[b.id] !== b.getValue() && c.apply(this, arguments);
  387. };
  388. })));
  389. });
  390. }
  391. };
  392. });