ea6965537b4b240c7ca8a188833f4fddf9214327.svn-base 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326
  1. // ================================================================
  2. // CHEditor 5
  3. // ================================================================
  4. var activeImage = null,
  5. browser = null,
  6. button,
  7. debug = false,
  8. destinationObject = null,
  9. divHeight = [],
  10. divWidth = [],
  11. divXPositions = [],
  12. divYPositions = [],
  13. dragDropDiv,
  14. eventDiff_x = 0,
  15. eventDiff_y = 0,
  16. fileTypeRe = /^image\/(png|jpeg|gif)$/i,
  17. geckoOffsetX_marker = -3,
  18. geckoOffsetY_marker = -1,
  19. imageCompleted = 0,
  20. imageCompletedList = [],
  21. imageListWrapper,
  22. imageResizeInput,
  23. imageResizeWidth = 0,
  24. insertionMarker,
  25. inputFileName = 'file',
  26. modifyImages = [],
  27. moveTimer = -1,
  28. oEditor = null,
  29. offsetX_marker = -3,
  30. offsetY_marker = -3,
  31. readyToMove = false,
  32. showThumbnailSize = { width: 120, height: 90 },
  33. tmpLeft = 0,
  34. tmpTop = 0,
  35. uploadImagePath = '',
  36. uploadMaxNumber = 12,
  37. uploadScript;
  38. // deleteScript;
  39. if (ArrayBuffer && !ArrayBuffer.prototype.slice) {
  40. ArrayBuffer.prototype.slice = function (start, end) {
  41. var len = this.byteLength;
  42. start || (isFinite(start) && 0 < start && start < len) || (start = 0);
  43. end || (isFinite((end) && start < end && end < len) || (end = len - 1));
  44. return (new DataView(this, start, end)).buffer;
  45. };
  46. }
  47. function createInsertionMaker() {
  48. var wrapper = document.getElementById('insertionMarker'),
  49. topIco = new Image(),
  50. middleIco = new Image(),
  51. bottomIco = new Image();
  52. topIco.src = uploadImagePath + '/marker_top.gif';
  53. topIco.style.width = '6px';
  54. topIco.style.height = '1px';
  55. wrapper.appendChild(topIco);
  56. middleIco.src = uploadImagePath + '/marker_middle.gif';
  57. middleIco.style.height = '96px';
  58. middleIco.style.width = '6px';
  59. wrapper.appendChild(middleIco);
  60. bottomIco.src = uploadImagePath + '/marker_bottom.gif';
  61. bottomIco.style.width = '6px';
  62. bottomIco.style.height = '1px';
  63. wrapper.appendChild(bottomIco);
  64. }
  65. function popupClose() {
  66. oEditor.popupWinCancel();
  67. }
  68. function showContents() {
  69. var spacer = function (id) {
  70. var clear = document.createElement('div');
  71. clear.style.height = '0px';
  72. clear.style.width = '0px';
  73. clear.className = 'clear';
  74. clear.id = 'spacer' + id;
  75. return clear;
  76. },
  77. spacerNo = 1, i, imgBox, theImg, lastSpacer;
  78. for (i = 0; i < uploadMaxNumber; i++) {
  79. if (i > 0 && ((i % 4) === 0)) {
  80. imageListWrapper.appendChild(spacer(spacerNo++));
  81. }
  82. imgBox = document.createElement('div');
  83. imgBox.id = 'imgBox' + i;
  84. imgBox.className = 'imageBox';
  85. theImg = document.createElement('div');
  86. theImg.id = 'img_' + i;
  87. theImg.className = 'imageBox_theImage';
  88. imgBox.appendChild(theImg);
  89. imageListWrapper.appendChild(imgBox);
  90. if (i === (uploadMaxNumber - 1)) {
  91. lastSpacer = spacer(spacerNo);
  92. lastSpacer.style.height = "7px";
  93. imageListWrapper.appendChild(lastSpacer);
  94. }
  95. }
  96. imageListWrapper.style.padding = '5px 7px 0px 5px';
  97. document.getElementById('imageInfoBox').style.height = '298px';
  98. document.getElementById('imageInfoBox').style.width = '130px';
  99. }
  100. function setImageCount() {
  101. imageCompleted++;
  102. document.getElementById('imageCount').innerHTML = imageCompleted.toString();
  103. }
  104. function getImageCount() {
  105. return imageCompleted;
  106. }
  107. function allowedMaxImage() {
  108. return uploadMaxNumber - getImageCount();
  109. }
  110. function getUploadedCount() {
  111. return imageListWrapper.getElementsByTagName('img').length;
  112. }
  113. function uploadedImageCount() {
  114. imageCompleted = getUploadedCount();
  115. document.getElementById('imageCount').innerHTML = imageCompleted.toString();
  116. }
  117. function getTopPos(inputObj) {
  118. // ----------------------------------------------------------------------------------
  119. var returnValue = inputObj.offsetTop;
  120. inputObj = inputObj.offsetParent;
  121. while (inputObj) {
  122. if (inputObj.tagName.toLowerCase() !== 'html') {
  123. returnValue += (inputObj.offsetTop - inputObj.scrollTop);
  124. if (browser.msie) {
  125. returnValue += inputObj.clientTop;
  126. }
  127. }
  128. inputObj = inputObj.offsetParent;
  129. }
  130. return returnValue;
  131. }
  132. function getLeftPos(inputObj) {
  133. // ----------------------------------------------------------------------------------
  134. var returnValue = inputObj.offsetLeft;
  135. inputObj = inputObj.offsetParent;
  136. while (inputObj) {
  137. if (inputObj.id !== 'imageListWrapper') {
  138. returnValue += inputObj.offsetLeft;
  139. }
  140. inputObj = inputObj.offsetParent;
  141. }
  142. return returnValue;
  143. }
  144. function getDivCoordinates() {
  145. // ----------------------------------------------------------------------------------
  146. var imgBox = imageListWrapper.getElementsByTagName('DIV'),
  147. i = 0;
  148. for (; i < imgBox.length; i++) {
  149. if ((imgBox[i].className === 'imageBox' || imgBox[i].className === 'imageBoxHighlighted') && imgBox[i].id) {
  150. divXPositions[imgBox[i].id] = getLeftPos(imgBox[i]);
  151. divYPositions[imgBox[i].id] = getTopPos(imgBox[i]);
  152. divWidth[imgBox[i].id] = imgBox[i].offsetWidth;
  153. divHeight[imgBox[i].id] = imgBox[i].offsetHeight;
  154. }
  155. }
  156. }
  157. function reOrder() {
  158. // ----------------------------------------------------------------------------------
  159. var imgBox = imageListWrapper.getElementsByTagName('div'),
  160. imgNum = 0, i, spacer, breakline = [];
  161. for (i = 0; i < imgBox.length; i++) {
  162. if (imgBox[i].id.indexOf('imgBox') === -1) {
  163. continue;
  164. }
  165. imgBox[i].className = 'imageBox';
  166. imgBox[i].firstChild.className = 'imageBox_theImage';
  167. if (imgNum > 0 && (imgNum % 4) === 0) {
  168. breakline.push(imgBox[i].id);
  169. }
  170. imgNum++;
  171. }
  172. for (i = 0; i < breakline.length; i++) {
  173. spacer = document.getElementById('spacer' + (i + 1));
  174. if (i + 1 === breakline.length) {
  175. imageListWrapper.appendChild(spacer);
  176. } else {
  177. imageListWrapper.insertBefore(spacer, document.getElementById(breakline[i]));
  178. }
  179. }
  180. }
  181. function showDelete() {
  182. var self = this, btn;
  183. if (readyToMove) {
  184. return;
  185. }
  186. getDivCoordinates();
  187. self.className = 'imageBox_theImage_over';
  188. btn = document.getElementById('removeImageButton');
  189. btn.style.left = (showThumbnailSize.width - parseInt(btn.style.width, 10) - 1) + 'px';
  190. btn.style.top = '-1px';
  191. self.appendChild(btn);
  192. btn.style.display = 'block';
  193. btn.onmouseover = function (ev) {
  194. oEditor.stopEvent(ev);
  195. this.style.display = 'block';
  196. this.className = 'removeButton_over';
  197. self.className = 'imageBox_theImage_over';
  198. };
  199. btn.onmouseout = function () {
  200. this.className = 'removeButton';
  201. };
  202. btn.onmousedown = function (ev) {
  203. var images = self.getElementsByTagName('img'), i, moveobj, target;
  204. for (i = 0; i < images.length; i++) {
  205. self.removeChild(images[i]);
  206. }
  207. self.removeChild(self.firstChild);
  208. self.className = 'imageBox_theImage';
  209. if (self.parentNode.nextSibling && self.parentNode.nextSibling.id) {
  210. moveobj = self.parentNode.nextSibling;
  211. target = self.parentNode;
  212. while (moveobj !== null) {
  213. if (moveobj.firstChild && !moveobj.firstChild.firstChild) {
  214. break;
  215. }
  216. if (/^spacer/.test(moveobj.id)) {
  217. moveobj = moveobj.nextSibling;
  218. continue;
  219. }
  220. imageListWrapper.insertBefore(moveobj, target);
  221. moveobj = target.nextSibling;
  222. }
  223. }
  224. reOrder();
  225. uploadedImageCount();
  226. this.style.display = 'none';
  227. document.body.appendChild(ev.target);
  228. oEditor.removeEvent(self, 'mouseover', showDelete);
  229. self.removeAttribute('title');
  230. };
  231. }
  232. function hideDelete() {
  233. // ----------------------------------------------------------------------------------
  234. document.getElementById('removeImageButton').style.display = 'none';
  235. }
  236. function startUpload(list) {
  237. // ----------------------------------------------------------------------------------
  238. var el = imageListWrapper.getElementsByTagName('div'), i, imgBox,
  239. count = 0, len = list.length;
  240. for (i = 0; i < el.length; i++) {
  241. imgBox = el[i];
  242. if (imgBox.className !== 'imageBox_theImage') {
  243. continue;
  244. }
  245. if (count === len) {
  246. break;
  247. }
  248. if (!imgBox.firstChild || imgBox.firstChild.tagName.toLowerCase() !== 'img') {
  249. imgBox.style.backgroundImage = "url('" + uploadImagePath + "/loader.gif')";
  250. list[count++].boxElem = imgBox;
  251. }
  252. }
  253. }
  254. function fileFilterError(file) {
  255. alert("선택하신 '" + file + "' 파일은 전송할 수 없습니다.\n" +
  256. "gif, png, jpg 사진 파일만 전송할 수 있습니다.");
  257. }
  258. function imgComplete(img, imgSize, boxId) {
  259. var resizeW, resizeH, M, elem;
  260. img.setAttribute("border", '0');
  261. if (imgSize.width > showThumbnailSize.width || imgSize.height > showThumbnailSize.height) {
  262. if (imgSize.width > imgSize.height) {
  263. resizeW = (imgSize.width > showThumbnailSize.width) ? showThumbnailSize.width : imgSize.width;
  264. resizeH = Math.round((imgSize.height * resizeW) / imgSize.width);
  265. } else {
  266. resizeH = (imgSize.height > showThumbnailSize.height) ? showThumbnailSize.height : imgSize.height;
  267. resizeW = Math.round((imgSize.width * resizeH) / imgSize.height);
  268. }
  269. if (resizeH > showThumbnailSize.height) {
  270. resizeH = (imgSize.height > showThumbnailSize.height) ? showThumbnailSize.height : imgSize.height;
  271. resizeW = Math.round((imgSize.width * resizeH) / imgSize.height);
  272. }
  273. } else {
  274. resizeW = imgSize.width;
  275. resizeH = imgSize.height;
  276. }
  277. img.style.width = resizeW - 2 + 'px';
  278. img.style.height = resizeH - 2 + 'px';
  279. img.style.margin = "1px";
  280. if (resizeW < showThumbnailSize.width) {
  281. M = showThumbnailSize.width - resizeW;
  282. img.style.marginLeft = Math.round(M / 2) + 'px';
  283. }
  284. if (resizeH < showThumbnailSize.height) {
  285. M = showThumbnailSize.height - resizeH;
  286. img.style.marginTop = Math.round(M / 2) + 'px';
  287. }
  288. elem = document.getElementById(boxId);
  289. boxId = boxId.replace(/img_/, '');
  290. if (boxId % 12 === 0) {
  291. imageListWrapper.scrollTop = elem.offsetTop - 6;
  292. }
  293. elem.style.backgroundImage = "url('" + uploadImagePath + "/dot.gif')";
  294. setElemTitle(elem, imgSize.width, imgSize.height);
  295. oEditor.addEvent(elem, 'mouseover', showDelete);
  296. elem.onmouseout = function () {
  297. this.className = 'imageBox_theImage';
  298. hideDelete();
  299. };
  300. setImageCount();
  301. }
  302. function setElemTitle(elem, width, height) {
  303. elem.setAttribute('title', 'Width: ' + width + 'px, Height: ' + height + 'px');
  304. }
  305. function showUploadWindow() {
  306. // ----------------------------------------------------------------------------------
  307. var uploadWindow = document.getElementById("uploadWindow"),
  308. uploadWindowWidth = 700,
  309. winWidth, el, i, j, imgBox, img;
  310. if (!(oEditor.undefined(window.innerWidth))) {
  311. winWidth = window.innerWidth;
  312. } else if (document.documentElement &&
  313. (!(oEditor.undefined(document.documentElement.clientWidth))) &&
  314. document.documentElement.clientWidth !== 0) {
  315. winWidth = document.documentElement.clientWidth;
  316. } else if (document.body && (!(oEditor.undefined(document.body.clientWidth)))) {
  317. winWidth = document.body.clientWidth;
  318. } else {
  319. alert('현재 브라우저를 지원하지 않습니다.');
  320. return;
  321. }
  322. uploadWindow.style.left = winWidth / 2 - (uploadWindowWidth / 2) + 'px';
  323. uploadWindow.style.display = "block";
  324. uploadWindow.style.width = uploadWindowWidth + 'px';
  325. if (modifyImages.length > 0) {
  326. el = imageListWrapper.getElementsByTagName('div');
  327. for (i = 0; i < modifyImages.length; i++) {
  328. if (i > 7) {
  329. break;
  330. }
  331. for (j = 0; j < el.length; j++) {
  332. imgBox = el[j];
  333. if (imgBox.className !== 'imageBox_theImage') {
  334. continue;
  335. }
  336. if (imgBox.firstChild && (imgBox.firstChild.src === modifyImages[i])) {
  337. break;
  338. }
  339. if (imgBox.firstChild === null) {
  340. img = new Image();
  341. img.src = modifyImages[i];
  342. img.border = 0;
  343. img.alt = '';
  344. img.style.width = '120px';
  345. img.style.height = '90px';
  346. imgBox.appendChild(img);
  347. break;
  348. }
  349. }
  350. }
  351. }
  352. }
  353. function removeImages() {
  354. var images = [], i, j, theImage, img, remove;
  355. document.body.appendChild(document.getElementById('removeImageButton'));
  356. for (i = 0; i < uploadMaxNumber; i++) {
  357. theImage = document.getElementById('img_' + i);
  358. if (theImage.hasChildNodes() && theImage.firstChild.tagName.toLowerCase() === 'img') {
  359. images.push(theImage);
  360. }
  361. }
  362. for (i = 0; i < images.length; i++) {
  363. img = images[i];
  364. if (img.firstChild !== null) {
  365. oEditor.removeEvent(img, 'mouseover', showDelete);
  366. remove = img.getElementsByTagName('img');
  367. for (j = 0; j < remove.length; j++) {
  368. img.removeChild(remove[j]);
  369. }
  370. img.parentNode.className = 'imageBox';
  371. img.removeAttribute('title');
  372. oEditor.removeEvent(img, 'mouseover', showDelete);
  373. }
  374. }
  375. uploadedImageCount();
  376. imageCompletedList = [];
  377. }
  378. function removeImage() {
  379. // ----------------------------------------------------------------------------------
  380. var i, theImage, found = false;
  381. for (i = 0; i < uploadMaxNumber; i++) {
  382. theImage = document.getElementById('img_' + i);
  383. if (theImage.hasChildNodes() && theImage.firstChild.tagName.toLowerCase() === 'img') {
  384. found = true;
  385. break;
  386. }
  387. }
  388. if (found) {
  389. if (!confirm('추가하신 사진이 있습니다. 사진 넣기를 취소하시겠습니까?')) {
  390. return false;
  391. }
  392. removeImages();
  393. }
  394. return true;
  395. }
  396. function closeWindow() {
  397. // ----------------------------------------------------------------------------------
  398. if (removeImage()) {
  399. popupClose();
  400. }
  401. }
  402. function cancelEvent() {
  403. // ----------------------------------------------------------------------------------
  404. return false;
  405. }
  406. function startMoveTimer() {
  407. // ----------------------------------------------------------------------------------
  408. var subElements, newDiv;
  409. if (moveTimer >= 0 && moveTimer < 10) {
  410. moveTimer++;
  411. setTimeout(startMoveTimer(), 8);
  412. }
  413. if (moveTimer === 5) {
  414. getDivCoordinates();
  415. subElements = dragDropDiv.getElementsByTagName('div');
  416. if (subElements.length > 0) {
  417. dragDropDiv.removeChild(subElements[0]);
  418. }
  419. dragDropDiv.style.display = 'block';
  420. newDiv = activeImage.cloneNode(true);
  421. newDiv.className = 'imageBox';
  422. newDiv.style.opacity = 0.5;
  423. newDiv.id = '';
  424. newDiv.style.padding = '2px';
  425. dragDropDiv.appendChild(newDiv);
  426. dragDropDiv.style.top = tmpTop + 'px';
  427. dragDropDiv.style.left = tmpLeft + 'px';
  428. }
  429. return false;
  430. }
  431. function getMouseButtn(e) {
  432. var code;
  433. e = e || window.event;
  434. code = e.button;
  435. if (code) {
  436. if (browser.msie && browser.version < 9) {
  437. code = code === 1 ? 0 : (code === 4 ? 1 : code);
  438. }
  439. }
  440. return code;
  441. }
  442. function selectImage(e) {
  443. // ----------------------------------------------------------------------------------
  444. var el = this.parentNode.firstChild.firstChild, obj;
  445. if (!el) {
  446. return;
  447. }
  448. e = e || window.event;
  449. if (getMouseButtn(e) === 2) {
  450. return;
  451. }
  452. obj = this.parentNode;
  453. hideDelete();
  454. obj.className = 'imageBoxHighlighted';
  455. activeImage = obj;
  456. readyToMove = true;
  457. moveTimer = 0;
  458. tmpLeft = e.clientX + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
  459. tmpTop = e.clientY + Math.max(document.body.scrollTop, document.documentElement.scrollTop);
  460. startMoveTimer();
  461. return false;
  462. }
  463. function dragDropEnd() {
  464. // ----------------------------------------------------------------------------------
  465. var parentObj, chkObj, turn = false;
  466. readyToMove = false;
  467. moveTimer = -1;
  468. dragDropDiv.style.display = 'none';
  469. insertionMarker.style.display = 'none';
  470. if (!activeImage) {
  471. return;
  472. }
  473. if (destinationObject && destinationObject !== activeImage) {
  474. parentObj = destinationObject.parentNode;
  475. chkObj = destinationObject.previousSibling;
  476. turn = false;
  477. if (chkObj === null) {
  478. chkObj = imageListWrapper.firstChild;
  479. turn = true;
  480. }
  481. if (chkObj.id.indexOf('spacer') !== -1) {
  482. chkObj = chkObj.previousSibling;
  483. }
  484. if (chkObj.firstChild.firstChild === null) {
  485. reOrder();
  486. return;
  487. }
  488. if (chkObj && chkObj.id !== null) {
  489. while (chkObj) {
  490. if (chkObj.firstChild.firstChild !== null) {
  491. break;
  492. }
  493. chkObj = chkObj.previousSibling;
  494. }
  495. destinationObject = turn ? chkObj : chkObj.nextSibling;
  496. }
  497. parentObj.insertBefore(activeImage, destinationObject);
  498. reOrder();
  499. activeImage = null;
  500. destinationObject = null;
  501. getDivCoordinates();
  502. return false;
  503. }
  504. activeImage.className = "imageBox";
  505. return true;
  506. }
  507. function dragDropMove(e) {
  508. // ----------------------------------------------------------------------------------
  509. var elementFound = false, prop, offsetX, offsetY, leftPos, topPos;
  510. if (moveTimer === -1 || !readyToMove) {
  511. return;
  512. }
  513. e = e || window.event;
  514. leftPos = e.clientX + document.documentElement.scrollLeft - eventDiff_x;
  515. topPos = e.clientY + document.documentElement.scrollTop - eventDiff_y;
  516. dragDropDiv.style.top = topPos + 'px';
  517. dragDropDiv.style.left = leftPos + 'px';
  518. leftPos = leftPos + eventDiff_x;
  519. topPos = topPos + eventDiff_y;
  520. if (getMouseButtn(e) !== 0) {
  521. dragDropEnd();
  522. }
  523. for (prop in divXPositions) {
  524. if (!divXPositions.hasOwnProperty(prop) || divXPositions[prop].className === 'clear') {
  525. continue;
  526. }
  527. if (divXPositions[prop] < leftPos &&
  528. (divXPositions[prop] + divWidth[prop] * 0.7) > leftPos &&
  529. divYPositions[prop] < topPos &&
  530. (divYPositions[prop] + divWidth[prop]) > topPos) {
  531. if (browser.msie) {
  532. offsetX = offsetX_marker;
  533. offsetY = offsetY_marker;
  534. } else {
  535. offsetX = geckoOffsetX_marker;
  536. offsetY = geckoOffsetY_marker;
  537. }
  538. insertionMarker.style.top = divYPositions[prop] + offsetY + 'px';
  539. insertionMarker.style.left = divXPositions[prop] + offsetX + 'px';
  540. insertionMarker.style.display = 'block';
  541. destinationObject = document.getElementById(prop);
  542. elementFound = true;
  543. break;
  544. }
  545. }
  546. if (!elementFound) {
  547. insertionMarker.style.display = 'none';
  548. destinationObject = false;
  549. }
  550. return false;
  551. }
  552. function initGallery() {
  553. // ----------------------------------------------------------------------------------
  554. var imgBox = imageListWrapper.getElementsByTagName('div'),
  555. i;
  556. for (i = 0; i < imgBox.length; i++) {
  557. if (imgBox[i].className === 'imageBox_theImage') {
  558. imgBox[i].onmousedown = selectImage;
  559. }
  560. }
  561. document.body.onselectstart = cancelEvent;
  562. document.body.ondragstart = cancelEvent;
  563. document.body.onmouseup = dragDropEnd;
  564. document.body.onmousemove = dragDropMove;
  565. dragDropDiv = document.getElementById('dragDropContent');
  566. insertionMarker = document.getElementById('insertionMarker');
  567. getDivCoordinates();
  568. }
  569. function doSubmit() {
  570. // ----------------------------------------------------------------------------------
  571. var el = imageListWrapper.getElementsByTagName('div'),
  572. imageArray = [],
  573. num = 0,
  574. elem = document.getElementById('id_alignment').elements,
  575. imgParagraph = false,
  576. useSpacer = false,
  577. imgAlign = 'top', i, imgBox, input;
  578. for (i = 0; i < elem.length; i++) {
  579. input = elem[i];
  580. switch (input.name) {
  581. case "alignment" :
  582. if (input.checked) {
  583. imgAlign = input.value;
  584. }
  585. break;
  586. case "para" :
  587. imgParagraph = input.checked;
  588. break;
  589. case "use_spacer" :
  590. useSpacer = input.checked;
  591. break;
  592. }
  593. }
  594. for (i = 0; i < el.length; i++) {
  595. imgBox = el[i];
  596. if (imgBox.className !== "imageBox_theImage") {
  597. continue;
  598. }
  599. if (imgBox.firstChild !== null) {
  600. imageArray[num] = imageCompletedList[imgBox.id];
  601. if (imgAlign === "break") {
  602. imageArray[num].alt = "break";
  603. } else {
  604. imageArray[num].alt = '';
  605. imageArray[num].align = imgAlign;
  606. }
  607. num++;
  608. }
  609. }
  610. if (imageArray.length > 0) {
  611. oEditor.doInsertImage(imageArray, imgParagraph, useSpacer);
  612. }
  613. oEditor.popupWinClose();
  614. }
  615. function selectedFiles(evt) {
  616. var upload = new DoUpload(),
  617. files = evt.target.files || [];
  618. oEditor.stopEvent(evt);
  619. if (files) {
  620. upload.select(files);
  621. }
  622. }
  623. function DoUpload() {
  624. this.list = [];
  625. this.reader = new FileReader();
  626. this.URL = window.URL || window.webkitURL;
  627. this.reader.onprogress = null;
  628. this.reader.onloadstart = null;
  629. this.reader.onabort = null;
  630. this.reader.onerror = null;
  631. this.MyBlob = (function () {
  632. var key, blob, self = this;
  633. function MYBLOB(blob) {
  634. var url = null;
  635. this.blob = blob;
  636. blob = null;
  637. this.getURL = function () {
  638. if (url) {
  639. return url;
  640. }
  641. url = self.URL.createObjectURL(this.blob);
  642. return url;
  643. };
  644. this.dispose = function () {
  645. if (url) {
  646. url = self.URL.revokeObjectURL(url);
  647. }
  648. if (typeof this.blob.msClose !== 'undefined') {
  649. this.blob.msClose();
  650. }
  651. this.blob = null;
  652. if (debug) {
  653. console.log("Blob Data Clear");
  654. }
  655. };
  656. }
  657. blob = new Blob();
  658. for (key in blob) {
  659. if (blob.hasOwnProperty(key)) {
  660. (function (key) {
  661. Object.defineProperty(MYBLOB.prototype,
  662. key,
  663. {
  664. enumerable: true,
  665. configurable: true,
  666. get: function () {
  667. return this.blob[key];
  668. }
  669. }
  670. );
  671. }(key));
  672. }
  673. }
  674. key = undefined;
  675. return MYBLOB;
  676. }());
  677. return this;
  678. }
  679. DoUpload.prototype = {
  680. select: function (files) {
  681. var self = this,
  682. num = files.length,
  683. i = 0,
  684. file = null;
  685. if (num > allowedMaxImage()) {
  686. num = allowedMaxImage();
  687. }
  688. for (; i < num; i++) {
  689. file = files[i];
  690. if (!file.type.match(fileTypeRe)) {
  691. fileFilterError(file.name);
  692. continue;
  693. }
  694. this.list.push(file);
  695. }
  696. if (this.list.length < 1) {
  697. return;
  698. }
  699. this.reader.addEventListener("error", function (evt) {
  700. self.onReadDataErrorHandler(evt);
  701. }, false);
  702. this.reader.onloadend = function (evt) {
  703. self.dataLoadHandler(evt);
  704. };
  705. setResizeWidth();
  706. startUpload(this.list);
  707. this.load();
  708. },
  709. getDateTime : function () {
  710. var date = new Date(),
  711. year = date.getFullYear(),
  712. month = date.getMonth() + 1,
  713. day = date.getDate(),
  714. hours = date.getHours(),
  715. minutes = date.getMinutes(),
  716. seconds = date.getSeconds();
  717. return String(10000 * year + 100 * month + day +
  718. ('0' + hours).slice(-2) + ('0' + minutes).slice(-2) + ('0' + seconds).slice(-2));
  719. },
  720. makeFilename : function (type) {
  721. var chars = "abcdefghiklmnopqrstuvwxyz",
  722. len = 8, clen = chars.length, rData = '', i, rnum;
  723. for (i = 0; i < len; i++) {
  724. rnum = Math.floor(Math.random() * clen);
  725. rData += chars.substring(rnum, rnum + 1);
  726. }
  727. if (type !== '') {
  728. rData += type.toLowerCase();
  729. }
  730. return this.getDateTime() + '_' + rData;
  731. },
  732. getOrientation : function (data) {
  733. var view = new DataView(data),
  734. length = view.byteLength,
  735. offset = 2,
  736. marker, little, tags, i;
  737. if (view.getUint16(0, false) !== 0xffd8) {
  738. return -2;
  739. }
  740. while (offset < length) {
  741. marker = view.getUint16(offset, false);
  742. offset += 2;
  743. if (marker === 0xffe1) {
  744. if (view.getUint32(offset += 2, false) !== 0x45786966) {
  745. return -1;
  746. }
  747. little = view.getUint16(offset += 6, false) === 0x4949;
  748. offset += view.getUint32(offset + 4, little);
  749. tags = view.getUint16(offset, little);
  750. offset += 2;
  751. for (i = 0; i < tags; i++) {
  752. if (view.getUint16(offset + (i * 12), little) === 0x0112) {
  753. return view.getUint16(offset + (i * 12) + 8, little);
  754. }
  755. }
  756. } else if ((marker & 0xff00) !== 0xff00) {
  757. break;
  758. } else {
  759. offset += view.getUint16(offset, false);
  760. }
  761. }
  762. return -1;
  763. },
  764. NewBlob : function (data, datatype) {
  765. var blob = null, blobb;
  766. try {
  767. blob = new Blob([data], {type: datatype});
  768. } catch (e) {
  769. window.BlobBuilder = window.BlobBuilder
  770. || window.WebKitBlobBuilder
  771. || window.MozBlobBuilder
  772. || window.MSBlobBuilder;
  773. if (e.name === 'TypeError' && window.BlobBuilder) {
  774. blobb = new BlobBuilder();
  775. blobb.append(data);
  776. blob = blobb.getBlob(datatype);
  777. console.log("TypeError");
  778. } else if (e.name === "InvalidStateError") {
  779. console.log("InvalidStateError");
  780. } else {
  781. console.log("Error");
  782. }
  783. }
  784. return blob;
  785. },
  786. imageResize : function (image, filetype, resizeWidth, orientation, addWaterMark) {
  787. var canvas = document.createElement("canvas"),
  788. width = image.width,
  789. height = image.height,
  790. ctx, angle, step, offcanvas, offctx, dHeight, dWidth;
  791. // 카메라를 돌려서 찍은 경우, 높이를 가로 사이즈로 정한 다음 리사이징 처리. 이 경우, 파일 크기와 처리 속도가
  792. // 증가한다.
  793. // if (orientation === 6 || orientation === 8) {
  794. // var ratio = resizeWidth / height;
  795. // dHeight = height * ratio;
  796. // dWidth = width * ratio;
  797. // } else {
  798. dHeight = Math.ceil(resizeWidth / width * height);
  799. dWidth = resizeWidth;
  800. // }
  801. canvas.width = dWidth;
  802. canvas.height = dHeight;
  803. ctx = canvas.getContext("2d");
  804. if (image.width > resizeWidth) {
  805. step = Math.ceil(Math.log(image.width / resizeWidth) / Math.log(2));
  806. if (step > 1) {
  807. offcanvas = document.createElement('canvas');
  808. offctx = offcanvas.getContext('2d');
  809. offcanvas.width = width / 2;
  810. offcanvas.height = height / 2;
  811. offctx.drawImage(image, 0, 0, offcanvas.width, offcanvas.height);
  812. offctx.drawImage(offcanvas, 0, 0, offcanvas.width / 2, offcanvas.height / 2);
  813. ctx.drawImage(offcanvas, 0, 0, offcanvas.width / 2, offcanvas.height / 2, 0, 0, dWidth, dHeight);
  814. } else {
  815. ctx.drawImage(image, 0, 0, dWidth, dHeight);
  816. }
  817. } else {
  818. ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  819. }
  820. if (orientation === 6 || orientation === 8 || orientation === 3) {
  821. angle = orientation === 6 ? Math.PI / 2 : (orientation === 8 ? -Math.PI / 2 : 90 * Math.PI / 2);
  822. canvas.width = orientation !== 3 ? dHeight : dWidth;
  823. canvas.height = orientation !== 3 ? dWidth : dHeight;
  824. ctx.clearRect(0, 0, canvas.width, canvas.height);
  825. ctx.save();
  826. ctx.translate(canvas.width / 2, canvas.height / 2);
  827. ctx.rotate(angle);
  828. ctx.drawImage(image, -dWidth / 2, -dHeight / 2, dWidth, dHeight);
  829. ctx.restore();
  830. }
  831. if (this.reader.watermark && addWaterMark) {
  832. ctx.globalAlpha = oEditor.config.imgWaterMarkAlpha;
  833. ctx.drawImage(this.reader.watermark,
  834. canvas.width - this.reader.watermark.width, canvas.height - this.reader.watermark.height);
  835. }
  836. return canvas.toDataURL(filetype, oEditor.config.imgJpegQuality);
  837. },
  838. canvasToBlob : function (bitmapData, mimetype) {
  839. var i = 0,
  840. intArray = [],
  841. len = bitmapData.length,
  842. raw = atob(bitmapData.split(',')[1]);
  843. for (; i < len; i++) {
  844. intArray.push(raw.charCodeAt(i));
  845. }
  846. return new Blob([new Uint8Array(intArray)], {type: mimetype});
  847. },
  848. makeThumbnail : function (image, type, name, orientation) {
  849. var width,
  850. xhr = new XMLHttpRequest(),
  851. data = new FormData(),
  852. bitmapData, file;
  853. xhr.open('POST', uploadScript, true);
  854. width = oEditor.config.thumbnailWidth;
  855. bitmapData = this.imageResize(image, type, width, orientation);
  856. file = this.canvasToBlob(bitmapData, type);
  857. data.append(inputFileName, file, 'thumb_' + name); // RFC Level 2
  858. xhr.addEventListener("loadend", function () {
  859. // loadend
  860. }, false);
  861. xhr.addEventListener("error", function () {
  862. alert("Thumbnail 파일 전송 중 오류:");
  863. }, false);
  864. xhr.send(data);
  865. },
  866. dataLoadHandler: function (evt) {
  867. var self = this,
  868. filename = evt.target.file.name,
  869. filetype = evt.target.file.type,
  870. file = evt.target.file,
  871. blob, image, orientation = 1, slice = 64 * 1024;
  872. if (slice > file.size - 1) {
  873. slice = file.size;
  874. }
  875. if (evt.target.readyState === FileReader.DONE) {
  876. blob = new self.MyBlob(self.NewBlob(evt.target.result, filetype));
  877. orientation = self.getOrientation(evt.target.result.slice(0, slice));
  878. image = new Image();
  879. image.onload = function () {
  880. var bitmapData = null,
  881. data = new FormData(),
  882. fileFormat,
  883. imgBox = file.boxElem,
  884. imgInfo = {},
  885. randomName,
  886. xhr = new XMLHttpRequest();
  887. xhr.open('POST', uploadScript, true);
  888. if (imageResizeWidth > 0) {
  889. bitmapData = self.imageResize(this, filetype, imageResizeWidth, orientation, true);
  890. file = self.canvasToBlob(bitmapData, filetype);
  891. }
  892. fileFormat = filename.substring(filename.lastIndexOf('.'));
  893. randomName = self.makeFilename(fileFormat);
  894. data.append('origname', filename);
  895. data.append(inputFileName, file, randomName); // RFC Level 2
  896. if (debug) {
  897. console.log('Successed: ' + filename);
  898. }
  899. xhr.addEventListener("error", function (evt) {
  900. alert("파일 전송 중 오류: " + evt.toString());
  901. }, false);
  902. xhr.addEventListener("loadend", function onLoadendImageHandler(xhrevt) {
  903. if (xhrevt.target.readyState === xhrevt.target.DONE) {
  904. if (oEditor.config.makeThumbnail) {
  905. self.makeThumbnail(image, filetype, randomName, orientation, false);
  906. }
  907. }
  908. image.src = '';
  909. image = null;
  910. }, false);
  911. xhr.addEventListener("load", function (xhrevt) {
  912. var jsonText, jsonData, img, onLoadHandler;
  913. data = null;
  914. if (xhrevt.target.status === 200) {
  915. jsonText = decodeURI(oEditor.trimSpace(this.responseText));
  916. jsonText = jsonText.replace(/\+/g, ' ').replace(/\\/g, '\\\\');
  917. jsonData = JSON.parse(jsonText);
  918. onLoadHandler = function () {
  919. imgInfo = {
  920. fileName: jsonData.fileName,
  921. filePath: jsonData.filePath,
  922. fileSize: jsonData.fileSize,
  923. fileUrl: jsonData.fileUrl,
  924. origName: filename,
  925. origSize: file.size,
  926. height: img.height,
  927. width: img.width
  928. };
  929. imageCompletedList[imgBox.id] = imgInfo;
  930. imgComplete(this, imgInfo, imgBox.id);
  931. imgBox.appendChild(img);
  932. if (debug) {
  933. console.log('Image URL: ' + img.src + ', size:' + file.size);
  934. }
  935. setTimeout(function () {
  936. self.load();
  937. }, 100);
  938. if (debug) {
  939. console.log('Uploaded');
  940. }
  941. };
  942. img = new Image();
  943. img.onload = onLoadHandler;
  944. img.src = decodeURIComponent(jsonData.fileUrl);
  945. } else {
  946. alert("HTTP 오류: " + xhr.status);
  947. }
  948. }, false);
  949. blob.dispose();
  950. blob = null;
  951. xhr.send(data);
  952. };
  953. image.src = blob.getURL();
  954. }
  955. },
  956. onReadDataErrorHandler: function (evt) {
  957. var status = '';
  958. switch (evt.target.error.code) {
  959. case evt.target.error.NOT_FOUND_ERR:
  960. status = "파일을 찾을 수 없습니다.";
  961. break;
  962. case evt.target.error.NOT_READABLE_ERR:
  963. status = "파일을 읽을 수 없습니다.";
  964. break;
  965. case evt.target.error.ABORT_ERR:
  966. status = "파일 읽기가 중지되었습니다.";
  967. break;
  968. case evt.target.error.SECURITY_ERR:
  969. status = "파일이 잠겨 있습니다.";
  970. break;
  971. case evt.target.error.ENCODING_ERR:
  972. status = "data:// URL의 파일 인코딩 길이가 너무 깁니다.";
  973. break;
  974. default:
  975. status = "파일 읽기 오류: " + evt.target.error.code;
  976. }
  977. this.removeEventListener('error', this.onReadDataErrorHandler);
  978. alert("'" + evt.target.filename + "' " + status);
  979. },
  980. load: function () {
  981. var file = this.list.shift(), self = this, watermark = null;
  982. if (file) {
  983. if (debug) {
  984. console.log('File ' + this.index + ', Name: ' + file.name + ', Size: ' + file.size);
  985. }
  986. this.reader.file = file;
  987. this.reader.watermark = null;
  988. if (oEditor.config.imgWaterMarkUrl !== '' && oEditor.config.imgWaterMarkUrl !== null) {
  989. watermark = new Image();
  990. watermark.onerror = function () {
  991. alert('워터마크 이미지를 읽을 수 없습니다. (' + oEditor.config.imgWaterMarkUrl + ')');
  992. self.reader.readAsArrayBuffer(file);
  993. };
  994. watermark.onload = function () {
  995. self.reader.watermark = this;
  996. self.reader.readAsArrayBuffer(file);
  997. };
  998. watermark.src = oEditor.config.imgWaterMarkUrl;
  999. } else {
  1000. this.reader.readAsArrayBuffer(file);
  1001. }
  1002. } else {
  1003. this.clear();
  1004. }
  1005. },
  1006. clear: function () {
  1007. var inputFile = document.getElementById('inputImageUpload'),
  1008. theForm = document.createElement('form'),
  1009. fileSelectButton = document.getElementById('fileSelectButton');
  1010. this.list = [];
  1011. theForm.appendChild(inputFile);
  1012. theForm.reset();
  1013. fileSelectButton.parentNode.insertBefore(inputFile, fileSelectButton);
  1014. fileSelectButton.style.marginLeft = '-1px';
  1015. }
  1016. };
  1017. function fileSelectDrop(evt) {
  1018. var files,
  1019. upload = new DoUpload();
  1020. oEditor.stopEvent(evt);
  1021. this.className = "imageListWrapperHtml5";
  1022. files = evt.dataTransfer.files;
  1023. upload.select(files);
  1024. }
  1025. function dragOver(ev) {
  1026. oEditor.stopEvent(ev);
  1027. this.className = "dragOver";
  1028. }
  1029. function dragOut(ev) {
  1030. oEditor.stopEvent(ev);
  1031. this.className = "imageListWrapperHtml5";
  1032. }
  1033. function setResizeWidth() {
  1034. var value = oEditor.trimSpace(imageResizeInput.value);
  1035. if (value) {
  1036. value = Math.ceil(parseInt(value, 10));
  1037. if (!isNaN(value) && value < oEditor.config.imgMaxWidth) {
  1038. imageResizeWidth = value;
  1039. } else {
  1040. imageResizeInput.value = '';
  1041. imageResizeInput.setAttribute('placeholder', oEditor.config.imgMaxWidth.toString());
  1042. }
  1043. }
  1044. }
  1045. function init(dialog) {
  1046. var dlg, i, elem, input, select, value, name;
  1047. oEditor = this;
  1048. oEditor.dialog = dialog;
  1049. dlg = new Dialog(oEditor);
  1050. browser = oEditor.getBrowser();
  1051. uploadImagePath = oEditor.config.iconPath + 'imageUpload';
  1052. uploadMaxNumber = oEditor.config.imgUploadNumber;
  1053. uploadScript = oEditor.config.editorPath + 'imageUpload/upload.asp';
  1054. imageListWrapper = document.getElementById("imageListWrapper");
  1055. imageResizeWidth = oEditor.config.imgMaxWidth;
  1056. imageResizeInput = document.getElementById('idResizeWidth');
  1057. select = document.getElementById('idResizeSelectBox');
  1058. if (imageResizeWidth > 0) {
  1059. for (i = 0; i < oEditor.config.imgResizeValue.length; i++) {
  1060. name = value = oEditor.config.imgResizeValue[i];
  1061. if (value > oEditor.config.imgMaxWidth) {
  1062. continue;
  1063. }
  1064. if (value === -1) {
  1065. name = '<입력>';
  1066. }
  1067. select.options[select.options.length] = new Option(name, value, false, value === oEditor.config.imgResizeSelected);
  1068. }
  1069. select.onchange = function () {
  1070. if (this.value < 0) {
  1071. document.getElementById('idUserInputWrapper').style.display = '';
  1072. imageResizeInput.value = '';
  1073. } else {
  1074. document.getElementById('idUserInputWrapper').style.display = 'none';
  1075. imageResizeWidth = this.value;
  1076. }
  1077. };
  1078. imageResizeInput.setAttribute('placeholder', imageResizeWidth.toString());
  1079. imageResizeWidth = select.value;
  1080. } else {
  1081. select.options[0] = new Option('원본', 0);
  1082. select.setAttribute('disabled', 'disabled');
  1083. imageResizeWidth = 0;
  1084. }
  1085. document.getElementById("maxImageNum").appendChild(document.createTextNode(uploadMaxNumber.toString()));
  1086. button = [
  1087. { alt: "", img: 'submit.gif', cmd: doSubmit, hspace: 2 },
  1088. { alt: "", img: 'cancel.gif', cmd: closeWindow, hspace: 2 }
  1089. ];
  1090. dlg.setDialogHeight(370);
  1091. dlg.showButton(button);
  1092. showContents();
  1093. initGallery();
  1094. showUploadWindow();
  1095. createInsertionMaker();
  1096. oEditor.addEvent(imageListWrapper, 'dragover', dragOver);
  1097. oEditor.addEvent(imageListWrapper, 'dragleave', dragOut);
  1098. oEditor.addEvent(imageListWrapper, 'drop', fileSelectDrop);
  1099. elem = document.getElementById('id_alignment').elements;
  1100. for (i = 0; i < elem.length; i++) {
  1101. if (elem[i].name === "alignment" && elem[i].value === oEditor.config.imgDefaultAlign) {
  1102. elem[i].checked = "checked";
  1103. break;
  1104. }
  1105. }
  1106. if (browser.mobile) {
  1107. input = document.getElementById('inputImageUpload');
  1108. input.setAttribute('capture', 'gallery');
  1109. }
  1110. }