You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

389 lines
13 KiB

7 years ago
  1. /**
  2. * Jindo Component
  3. * @version 1.0.3
  4. * NHN_Library:Jindo_Component-1.0.3;JavaScript Components for Jindo;
  5. * @include Component, UIComponent, FileUploader
  6. */
  7. jindo.Component = jindo.$Class({
  8. _htEventHandler: null,
  9. _htOption: null,
  10. $init: function () {
  11. var aInstance = this.constructor.getInstance();
  12. aInstance.push(this);
  13. this._htEventHandler = {};
  14. this._htOption = {};
  15. this._htOption._htSetter = {};
  16. },
  17. option: function (sName, vValue) {
  18. switch (typeof sName) {
  19. case "undefined":
  20. return this._htOption;
  21. case "string":
  22. if (typeof vValue != "undefined") {
  23. if (sName == "htCustomEventHandler") {
  24. if (typeof this._htOption[sName] == "undefined") {
  25. this.attach(vValue);
  26. } else {
  27. return this;
  28. }
  29. }
  30. this._htOption[sName] = vValue;
  31. if (typeof this._htOption._htSetter[sName] == "function") {
  32. this._htOption._htSetter[sName](vValue);
  33. }
  34. } else {
  35. return this._htOption[sName];
  36. }
  37. break;
  38. case "object":
  39. for (var sKey in sName) {
  40. if (sKey == "htCustomEventHandler") {
  41. if (typeof this._htOption[sKey] == "undefined") {
  42. this.attach(sName[sKey]);
  43. } else {
  44. continue;
  45. }
  46. }
  47. this._htOption[sKey] = sName[sKey];
  48. if (typeof this._htOption._htSetter[sKey] == "function") {
  49. this._htOption._htSetter[sKey](sName[sKey]);
  50. }
  51. }
  52. break;
  53. }
  54. return this;
  55. },
  56. optionSetter: function (sName, fSetter) {
  57. switch (typeof sName) {
  58. case "undefined":
  59. return this._htOption._htSetter;
  60. case "string":
  61. if (typeof fSetter != "undefined") {
  62. this._htOption._htSetter[sName] = jindo.$Fn(fSetter, this).bind();
  63. } else {
  64. return this._htOption._htSetter[sName];
  65. }
  66. break;
  67. case "object":
  68. for (var sKey in sName) {
  69. this._htOption._htSetter[sKey] = jindo.$Fn(sName[sKey], this).bind();
  70. }
  71. break;
  72. }
  73. return this;
  74. },
  75. fireEvent: function (sEvent, oEvent) {
  76. oEvent = oEvent || {};
  77. var fInlineHandler = this['on' + sEvent],
  78. aHandlerList = this._htEventHandler[sEvent] || [],
  79. bHasInlineHandler = typeof fInlineHandler == "function",
  80. bHasHandlerList = aHandlerList.length > 0;
  81. if (!bHasInlineHandler && !bHasHandlerList) {
  82. return true;
  83. }
  84. aHandlerList = aHandlerList.concat();
  85. oEvent.sType = sEvent;
  86. if (typeof oEvent._aExtend == 'undefined') {
  87. oEvent._aExtend = [];
  88. oEvent.stop = function () {
  89. if (oEvent._aExtend.length > 0) {
  90. oEvent._aExtend[oEvent._aExtend.length - 1].bCanceled = true;
  91. }
  92. };
  93. }
  94. oEvent._aExtend.push({
  95. sType: sEvent,
  96. bCanceled: false
  97. });
  98. var aArg = [oEvent],
  99. i, nLen;
  100. for (i = 2, nLen = arguments.length; i < nLen; i++) {
  101. aArg.push(arguments[i]);
  102. }
  103. if (bHasInlineHandler) {
  104. fInlineHandler.apply(this, aArg);
  105. }
  106. if (bHasHandlerList) {
  107. var fHandler;
  108. for (i = 0, fHandler;
  109. (fHandler = aHandlerList[i]); i++) {
  110. fHandler.apply(this, aArg);
  111. }
  112. }
  113. return !oEvent._aExtend.pop().bCanceled;
  114. },
  115. attach: function (sEvent, fHandlerToAttach) {
  116. if (arguments.length == 1) {
  117. jindo.$H(arguments[0]).forEach(jindo.$Fn(function (fHandler, sEvent) {
  118. this.attach(sEvent, fHandler);
  119. }, this).bind());
  120. return this;
  121. }
  122. var aHandler = this._htEventHandler[sEvent];
  123. if (typeof aHandler == 'undefined') {
  124. aHandler = this._htEventHandler[sEvent] = [];
  125. }
  126. aHandler.push(fHandlerToAttach);
  127. return this;
  128. },
  129. detach: function (sEvent, fHandlerToDetach) {
  130. if (arguments.length == 1) {
  131. jindo.$H(arguments[0]).forEach(jindo.$Fn(function (fHandler, sEvent) {
  132. this.detach(sEvent, fHandler);
  133. }, this).bind());
  134. return this;
  135. }
  136. var aHandler = this._htEventHandler[sEvent];
  137. if (aHandler) {
  138. for (var i = 0, fHandler;
  139. (fHandler = aHandler[i]); i++) {
  140. if (fHandler === fHandlerToDetach) {
  141. aHandler = aHandler.splice(i, 1);
  142. break;
  143. }
  144. }
  145. }
  146. return this;
  147. },
  148. detachAll: function (sEvent) {
  149. var aHandler = this._htEventHandler;
  150. if (arguments.length) {
  151. if (typeof aHandler[sEvent] == 'undefined') {
  152. return this;
  153. }
  154. delete aHandler[sEvent];
  155. return this;
  156. }
  157. for (var o in aHandler) {
  158. delete aHandler[o];
  159. }
  160. return this;
  161. }
  162. });
  163. jindo.Component.factory = function (aObject, htOption) {
  164. var aReturn = [],
  165. oInstance;
  166. if (typeof htOption == "undefined") {
  167. htOption = {};
  168. }
  169. for (var i = 0, el;
  170. (el = aObject[i]); i++) {
  171. oInstance = new this(el, htOption);
  172. aReturn[aReturn.length] = oInstance;
  173. }
  174. return aReturn;
  175. };
  176. jindo.Component.getInstance = function () {
  177. if (typeof this._aInstance == "undefined") {
  178. this._aInstance = [];
  179. }
  180. return this._aInstance;
  181. };
  182. jindo.UIComponent = jindo.$Class({
  183. $init: function () {
  184. this._bIsActivating = false;
  185. },
  186. isActivating: function () {
  187. return this._bIsActivating;
  188. },
  189. activate: function () {
  190. if (this.isActivating()) {
  191. return this;
  192. }
  193. this._bIsActivating = true;
  194. if (arguments.length > 0) {
  195. this._onActivate.apply(this, arguments);
  196. } else {
  197. this._onActivate();
  198. }
  199. return this;
  200. },
  201. deactivate: function () {
  202. if (!this.isActivating()) {
  203. return this;
  204. }
  205. this._bIsActivating = false;
  206. if (arguments.length > 0) {
  207. this._onDeactivate.apply(this, arguments);
  208. } else {
  209. this._onDeactivate();
  210. }
  211. return this;
  212. }
  213. }).extend(jindo.Component);
  214. jindo.FileUploader = jindo.$Class({
  215. _bIsActivating: false,
  216. _aHiddenInput: [],
  217. $init: function (elFileSelect, htOption) {
  218. var htDefaultOption = {
  219. sUrl: '',
  220. sCallback: '',
  221. htData: {},
  222. sFiletype: '*',
  223. sMsgNotAllowedExt: "업로드가 허용되지 않는 파일형식입니다",
  224. bAutoUpload: false,
  225. bAutoReset: true,
  226. bActivateOnload: true
  227. };
  228. this.option(htDefaultOption);
  229. this.option(htOption || {});
  230. this._el = jindo.$(elFileSelect);
  231. this._wel = jindo.$Element(this._el);
  232. this._elForm = this._el.form;
  233. this._aHiddenInput = [];
  234. this.constructor._oCallback = {};
  235. this._wfChange = jindo.$Fn(this._onFileSelectChange, this);
  236. if (this.option("bActivateOnload")) {
  237. this.activate();
  238. }
  239. },
  240. _appendIframe: function () {
  241. var sIframeName = 'tmpFrame_' + this._makeUniqueId();
  242. this._welIframe = jindo.$Element(jindo.$('<iframe name="' + sIframeName + '" src="' + this.option("sCallback") + '?blank">')).css({
  243. width: '10px',
  244. border: '2px',
  245. height: '10px',
  246. left: '10px',
  247. top: '10px'
  248. });
  249. document.body.appendChild(this._welIframe.$value());
  250. },
  251. _removeIframe: function () {
  252. this._welIframe.leave();
  253. },
  254. getBaseElement: function () {
  255. return this.getFileSelect();
  256. },
  257. getFileSelect: function () {
  258. return this._el;
  259. },
  260. getFormElement: function () {
  261. return this._elForm;
  262. },
  263. upload: function () {
  264. this._appendIframe();
  265. var elForm = this.getFormElement(),
  266. welForm = jindo.$Element(elForm),
  267. sIframeName = this._welIframe.attr("name"),
  268. sFunctionName = sIframeName + '_func',
  269. sAction = this.option("sUrl");
  270. welForm.attr({
  271. target: sIframeName,
  272. action: sAction
  273. });
  274. this._aHiddenInput.push(this._createElement('input', {
  275. 'type': 'hidden',
  276. 'name': 'callback',
  277. 'value': this.option("sCallback")
  278. }));
  279. this._aHiddenInput.push(this._createElement('input', {
  280. 'type': 'hidden',
  281. 'name': 'callback_func',
  282. 'value': sFunctionName
  283. }));
  284. for (var k in this.option("htData")) {
  285. this._aHiddenInput.push(this._createElement('input', {
  286. 'type': 'hidden',
  287. 'name': k,
  288. 'value': this.option("htData")[k]
  289. }));
  290. }
  291. for (var i = 0; i < this._aHiddenInput.length; i++) {
  292. elForm.appendChild(this._aHiddenInput[i]);
  293. }
  294. this.constructor._oCallback[sFunctionName + '_success'] = jindo.$Fn(function (oParameter) {
  295. this.fireEvent("success", {
  296. htResult: oParameter
  297. });
  298. delete this.constructor._oCallback[oParameter.callback_func + '_success'];
  299. delete this.constructor._oCallback[oParameter.callback_func + '_error'];
  300. for (var i = 0; i < this._aHiddenInput.length; i++) {
  301. jindo.$Element(this._aHiddenInput[i]).leave();
  302. }
  303. this._aHiddenInput.length = 0;
  304. this._removeIframe();
  305. }, this).bind();
  306. this.constructor._oCallback[sFunctionName + '_error'] = jindo.$Fn(function (oParameter) {
  307. this.fireEvent("error", {
  308. htResult: oParameter
  309. });
  310. delete this.constructor._oCallback[oParameter.callback_func + '_success'];
  311. delete this.constructor._oCallback[oParameter.callback_func + '_error'];
  312. for (var i = 0; i < this._aHiddenInput.length; i++) {
  313. jindo.$Element(this._aHiddenInput[i]).leave();
  314. }
  315. this._aHiddenInput.length = 0;
  316. this._removeIframe();
  317. }, this).bind();
  318. elForm.submit();
  319. if (this.option("bAutoReset")) {
  320. this.reset();
  321. }
  322. },
  323. reset: function () {
  324. var elWrapForm = jindo.$("<form>");
  325. this._wel.wrap(elWrapForm);
  326. elWrapForm.reset();
  327. jindo.$Element(elWrapForm).replace(this._el);
  328. var elForm = this.getFormElement(),
  329. welForm = jindo.$Element(elForm);
  330. welForm.attr({
  331. target: this._sPrevTarget,
  332. action: this._sAction
  333. });
  334. return this;
  335. },
  336. _onActivate: function () {
  337. var elForm = this.getFormElement(),
  338. welForm = jindo.$Element(elForm);
  339. this._sPrevTarget = welForm.attr("target");
  340. this._sAction = welForm.attr("action");
  341. this._el.value = "";
  342. this._wfChange.attach(this._el, "change");
  343. },
  344. _onDeactivate: function () {
  345. this._wfChange.detach(this._el, "change");
  346. },
  347. _makeUniqueId: function () {
  348. return new Date().getMilliseconds() + Math.floor(Math.random() * 100000);
  349. },
  350. _createElement: function (name, attributes) {
  351. var el = jindo.$("<" + name + ">");
  352. var wel = jindo.$Element(el);
  353. for (var k in attributes) {
  354. wel.attr(k, attributes[k]);
  355. }
  356. return el;
  357. },
  358. _checkExtension: function (sFile) {
  359. var aType = this.option("sFiletype").split(';');
  360. for (var i = 0, sType; i < aType.length; i++) {
  361. sType = (aType[i] == "*.*") ? "*" : aType[i];
  362. sType = sType.replace(/^\s+|\s+$/, '');
  363. sType = sType.replace(/\./g, '\\.');
  364. sType = sType.replace(/\*/g, '[^\\\/]+');
  365. if ((new RegExp(sType + '$', 'gi')).test(sFile)) {
  366. return true;
  367. }
  368. }
  369. return false;
  370. },
  371. _onFileSelectChange: function (we) {
  372. var sValue = we.element.value,
  373. bAllowed = this._checkExtension(sValue),
  374. htParam = {
  375. sValue: sValue,
  376. bAllowed: bAllowed,
  377. sMsgNotAllowedExt: this.option("sMsgNotAllowedExt")
  378. };
  379. if (sValue.length && this.fireEvent("select", htParam)) {
  380. if (bAllowed) {
  381. if (this.option("bAutoUpload")) {
  382. this.upload();
  383. }
  384. } else {
  385. alert(htParam.sMsgNotAllowedExt);
  386. }
  387. }
  388. }
  389. }).extend(jindo.UIComponent);