| 提交 | 用户 | 时间 | ||
| 1ac2bc | 1 | /** |
| 懒 | 2 | * Created with JetBrains PhpStorm. |
| 3 | * User: xuheng | |
| 4 | * Date: 12-12-19 | |
| 5 | * Time: 下午4:55 | |
| 6 | * To change this template use File | Settings | File Templates. | |
| 7 | */ | |
| 8 | (function () { | |
| 9 | var title = $G("J_title"), | |
| 10 | titleCol = $G("J_titleCol"), | |
| 11 | caption = $G("J_caption"), | |
| 12 | sorttable = $G("J_sorttable"), | |
| 13 | autoSizeContent = $G("J_autoSizeContent"), | |
| 14 | autoSizePage = $G("J_autoSizePage"), | |
| 15 | tone = $G("J_tone"), | |
| 16 | me, | |
| 17 | preview = $G("J_preview"); | |
| 18 | ||
| 19 | var editTable = function () { | |
| 20 | me = this; | |
| 21 | me.init(); | |
| 22 | }; | |
| 23 | editTable.prototype = { | |
| 24 | init:function () { | |
| 25 | var colorPiker = new UE.ui.ColorPicker({ | |
| 26 | editor:editor | |
| 27 | }), | |
| 28 | colorPop = new UE.ui.Popup({ | |
| 29 | editor:editor, | |
| 30 | content:colorPiker | |
| 31 | }); | |
| 32 | ||
| 33 | title.checked = editor.queryCommandState("inserttitle") == -1; | |
| 34 | titleCol.checked = editor.queryCommandState("inserttitlecol") == -1; | |
| 35 | caption.checked = editor.queryCommandState("insertcaption") == -1; | |
| 36 | sorttable.checked = editor.queryCommandState("enablesort") == 1; | |
| 37 | ||
| 38 | var enablesortState = editor.queryCommandState("enablesort"), | |
| 39 | disablesortState = editor.queryCommandState("disablesort"); | |
| 40 | ||
| 41 | sorttable.checked = !!(enablesortState < 0 && disablesortState >=0); | |
| 42 | sorttable.disabled = !!(enablesortState < 0 && disablesortState < 0); | |
| 43 | sorttable.title = enablesortState < 0 && disablesortState < 0 ? lang.errorMsg:''; | |
| 44 | ||
| 45 | me.createTable(title.checked, titleCol.checked, caption.checked); | |
| 46 | me.setAutoSize(); | |
| 47 | me.setColor(me.getColor()); | |
| 48 | ||
| 49 | domUtils.on(title, "click", me.titleHanler); | |
| 50 | domUtils.on(titleCol, "click", me.titleColHanler); | |
| 51 | domUtils.on(caption, "click", me.captionHanler); | |
| 52 | domUtils.on(sorttable, "click", me.sorttableHanler); | |
| 53 | domUtils.on(autoSizeContent, "click", me.autoSizeContentHanler); | |
| 54 | domUtils.on(autoSizePage, "click", me.autoSizePageHanler); | |
| 55 | ||
| 56 | domUtils.on(tone, "click", function () { | |
| 57 | colorPop.showAnchor(tone); | |
| 58 | }); | |
| 59 | domUtils.on(document, 'mousedown', function () { | |
| 60 | colorPop.hide(); | |
| 61 | }); | |
| 62 | colorPiker.addListener("pickcolor", function () { | |
| 63 | me.setColor(arguments[1]); | |
| 64 | colorPop.hide(); | |
| 65 | }); | |
| 66 | colorPiker.addListener("picknocolor", function () { | |
| 67 | me.setColor(""); | |
| 68 | colorPop.hide(); | |
| 69 | }); | |
| 70 | }, | |
| 71 | ||
| 72 | createTable:function (hasTitle, hasTitleCol, hasCaption) { | |
| 73 | var arr = [], | |
| 74 | sortSpan = '<span>^</span>'; | |
| 75 | arr.push("<table id='J_example'>"); | |
| 76 | if (hasCaption) { | |
| 77 | arr.push("<caption>" + lang.captionName + "</caption>") | |
| 78 | } | |
| 79 | if (hasTitle) { | |
| 80 | arr.push("<tr>"); | |
| 81 | if(hasTitleCol) { arr.push("<th>" + lang.titleName + "</th>"); } | |
| 82 | for (var j = 0; j < 5; j++) { | |
| 83 | arr.push("<th>" + lang.titleName + "</th>"); | |
| 84 | } | |
| 85 | arr.push("</tr>"); | |
| 86 | } | |
| 87 | for (var i = 0; i < 6; i++) { | |
| 88 | arr.push("<tr>"); | |
| 89 | if(hasTitleCol) { arr.push("<th>" + lang.titleName + "</th>") } | |
| 90 | for (var k = 0; k < 5; k++) { | |
| 91 | arr.push("<td>" + lang.cellsName + "</td>") | |
| 92 | } | |
| 93 | arr.push("</tr>"); | |
| 94 | } | |
| 95 | arr.push("</table>"); | |
| 96 | preview.innerHTML = arr.join(""); | |
| 97 | this.updateSortSpan(); | |
| 98 | }, | |
| 99 | titleHanler:function () { | |
| 100 | var example = $G("J_example"), | |
| 101 | frg=document.createDocumentFragment(), | |
| 102 | color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"), | |
| 103 | colCount = example.rows[0].children.length; | |
| 104 | ||
| 105 | if (title.checked) { | |
| 106 | example.insertRow(0); | |
| 107 | for (var i = 0, node; i < colCount; i++) { | |
| 108 | node = document.createElement("th"); | |
| 109 | node.innerHTML = lang.titleName; | |
| 110 | frg.appendChild(node); | |
| 111 | } | |
| 112 | example.rows[0].appendChild(frg); | |
| 113 | ||
| 114 | } else { | |
| 115 | domUtils.remove(example.rows[0]); | |
| 116 | } | |
| 117 | me.setColor(color); | |
| 118 | me.updateSortSpan(); | |
| 119 | }, | |
| 120 | titleColHanler:function () { | |
| 121 | var example = $G("J_example"), | |
| 122 | color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"), | |
| 123 | colArr = example.rows, | |
| 124 | colCount = colArr.length; | |
| 125 | ||
| 126 | if (titleCol.checked) { | |
| 127 | for (var i = 0, node; i < colCount; i++) { | |
| 128 | node = document.createElement("th"); | |
| 129 | node.innerHTML = lang.titleName; | |
| 130 | colArr[i].insertBefore(node, colArr[i].children[0]); | |
| 131 | } | |
| 132 | } else { | |
| 133 | for (var i = 0; i < colCount; i++) { | |
| 134 | domUtils.remove(colArr[i].children[0]); | |
| 135 | } | |
| 136 | } | |
| 137 | me.setColor(color); | |
| 138 | me.updateSortSpan(); | |
| 139 | }, | |
| 140 | captionHanler:function () { | |
| 141 | var example = $G("J_example"); | |
| 142 | if (caption.checked) { | |
| 143 | var row = document.createElement('caption'); | |
| 144 | row.innerHTML = lang.captionName; | |
| 145 | example.insertBefore(row, example.firstChild); | |
| 146 | } else { | |
| 147 | domUtils.remove(domUtils.getElementsByTagName(example, 'caption')[0]); | |
| 148 | } | |
| 149 | }, | |
| 150 | sorttableHanler:function(){ | |
| 151 | me.updateSortSpan(); | |
| 152 | }, | |
| 153 | autoSizeContentHanler:function () { | |
| 154 | var example = $G("J_example"); | |
| 155 | example.removeAttribute("width"); | |
| 156 | }, | |
| 157 | autoSizePageHanler:function () { | |
| 158 | var example = $G("J_example"); | |
| 159 | var tds = example.getElementsByTagName(example, "td"); | |
| 160 | utils.each(tds, function (td) { | |
| 161 | td.removeAttribute("width"); | |
| 162 | }); | |
| 163 | example.setAttribute('width', '100%'); | |
| 164 | }, | |
| 165 | updateSortSpan: function(){ | |
| 166 | var example = $G("J_example"), | |
| 167 | row = example.rows[0]; | |
| 168 | ||
| 169 | var spans = domUtils.getElementsByTagName(example,"span"); | |
| 170 | utils.each(spans,function(span){ | |
| 171 | span.parentNode.removeChild(span); | |
| 172 | }); | |
| 173 | if (sorttable.checked) { | |
| 174 | utils.each(row.cells, function(cell, i){ | |
| 175 | var span = document.createElement("span"); | |
| 176 | span.innerHTML = "^"; | |
| 177 | cell.appendChild(span); | |
| 178 | }); | |
| 179 | } | |
| 180 | }, | |
| 181 | getColor:function () { | |
| 182 | var start = editor.selection.getStart(), color, | |
| 183 | cell = domUtils.findParentByTagName(start, ["td", "th", "caption"], true); | |
| 184 | color = cell && domUtils.getComputedStyle(cell, "border-color"); | |
| 185 | if (!color) color = "#DDDDDD"; | |
| 186 | return color; | |
| 187 | }, | |
| 188 | setColor:function (color) { | |
| 189 | var example = $G("J_example"), | |
| 190 | arr = domUtils.getElementsByTagName(example, "td").concat( | |
| 191 | domUtils.getElementsByTagName(example, "th"), | |
| 192 | domUtils.getElementsByTagName(example, "caption") | |
| 193 | ); | |
| 194 | ||
| 195 | tone.value = color; | |
| 196 | utils.each(arr, function (node) { | |
| 197 | node.style.borderColor = color; | |
| 198 | }); | |
| 199 | ||
| 200 | }, | |
| 201 | setAutoSize:function () { | |
| 202 | var me = this; | |
| 203 | autoSizePage.checked = true; | |
| 204 | me.autoSizePageHanler(); | |
| 205 | } | |
| 206 | }; | |
| 207 | ||
| 208 | new editTable; | |
| 209 | ||
| 210 | dialog.onok = function () { | |
| 211 | editor.__hasEnterExecCommand = true; | |
| 212 | ||
| 213 | var checks = { | |
| 214 | title:"inserttitle deletetitle", | |
| 215 | titleCol:"inserttitlecol deletetitlecol", | |
| 216 | caption:"insertcaption deletecaption", | |
| 217 | sorttable:"enablesort disablesort" | |
| 218 | }; | |
| 219 | editor.fireEvent('saveScene'); | |
| 220 | for(var i in checks){ | |
| 221 | var cmds = checks[i].split(" "), | |
| 222 | input = $G("J_" + i); | |
| 223 | if(input["checked"]){ | |
| 224 | editor.queryCommandState(cmds[0])!=-1 &&editor.execCommand(cmds[0]); | |
| 225 | }else{ | |
| 226 | editor.queryCommandState(cmds[1])!=-1 &&editor.execCommand(cmds[1]); | |
| 227 | } | |
| 228 | } | |
| 229 | ||
| 230 | editor.execCommand("edittable", tone.value); | |
| 231 | autoSizeContent.checked ?editor.execCommand('adaptbytext') : ""; | |
| 232 | autoSizePage.checked ? editor.execCommand("adaptbywindow") : ""; | |
| 233 | editor.fireEvent('saveScene'); | |
| 234 | ||
| 235 | editor.__hasEnterExecCommand = false; | |
| 236 | }; | |
| 237 | })(); | |
