templates.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. /**
  2. *
  3. * @author: Malishev Dmitry <dima.malishev@gmail.com>
  4. */
  5. App.Templates.html = {
  6. WEB: {
  7. hint: [''],
  8. notification: [
  9. '<li class="~!:UNSEEN~!"><span class="mark-seen" id="notification-~!:ID~!">&nbsp;</span>\
  10. <span class="title"><span class="icon ~!:TYPE~!">&nbsp;</span>~!:TOPIC~!</span>\
  11. ~!:NOTICE~!\
  12. </li>'
  13. ]
  14. },
  15. // file manager
  16. //
  17. FM: {
  18. reload_in_time: [
  19. '<div id="reload-in-time" class="warning-box reload">\
  20. <div class="message-small">'+App.Constants.FM_HIT+' <span>F5</span> '+App.Constants.FM_TO_RELOAD_THE_PAGE+'</div>\
  21. </div>'
  22. ],
  23. entry_line: ['<li class="dir">\
  24. <span class="marker">\
  25. </span>\
  26. <span class="icon ~!:ITEM_TYPE~!" ></span>\
  27. <input type="hidden" class="source" value=\'~!:SOURCE~!\'/>\
  28. <span class="filename-holder"><div class="filename ripple" ~!:CL_ACTION_1~!>~!:NAME~!</div></span>\
  29. <span class="mode">~!:PERMISSIONS~!</span>\
  30. <span class="owner">~!:OWNER~!</span>\
  31. <span class="size-unit">~!:SIZE_UNIT~!</span>\
  32. <span class="size-value">~!:SIZE_VALUE~!</span>\
  33. <span class="date">~!:DATE~!</span>\
  34. <span class="time">~!:TIME~!</span>\
  35. <!-- span class="subcontext-control ~!:SUBMENU_CLASS~!" onClick="FM.toggleSubContextMenu(this)">&#8226;&#8226;&#8226;&nbsp;\
  36. <ul class="subcontext-menu subcontext-menu-hidden"><li onClick="FM.downloadFileFromSubcontext(this);">Download</li><li onClick="FM.editFileFromSubcontext(this);">Edit</li></ul>\
  37. </span -->\
  38. </li>'],
  39. popup_alert: ['<div class="confirm-box alarm popup-box">\
  40. <div class="message">~!:TEXT~!</div>\
  41. <div class="controls">\
  42. <p class="ok" onClick="FM.popupClose();">'+App.Constants.FM_CLOSE+'</p>\
  43. </div>\
  44. </div>'],
  45. popup_bulk_remove: ['<div class="confirm-box delete popup-box">\
  46. <div class="message">'+App.Constants.FM_CONFIRM_DELETE_BULK+' (~!:NUMBER_OF_ITEMS~!)?</div>\
  47. <div class="results"></div>\
  48. <div class="controls">\
  49. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  50. <p class="ok" onClick="FM.bulkRemoveDo();">'+App.Constants.FM_DELETE+'</p>\
  51. </div>\
  52. </div>'],
  53. popup_bulk_copy: ['<div class="confirm-box copy popup-box">\
  54. <div class="message">'+App.Constants.FM_COPY_BULK+' (~!:NUMBER_OF_ITEMS~!) '+ App.Constants.FM_INTO_KEYWORD +':</div>\
  55. <div class="actions">\
  56. <input type="text" id="copy_dest" value="~!:DST_FILENAME~!" class="new-title">\
  57. </div>\
  58. <div class="results"></div>\
  59. <div class="warning">'+App.Constants.FM_EXISTING_FILES_WILL_BE_REPLACED+'</div>\
  60. <div class="controls">\
  61. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  62. <p class="ok" onClick="FM.bulkCopyDo();">'+App.Constants.FM_COPY+'</p>\
  63. </div>\
  64. </div>'],
  65. popup_bulk_move: ['<div class="confirm-box copy popup-box">\
  66. <div class="message">'+App.Constants.FM_MOVE_BULK+' (~!:NUMBER_OF_ITEMS~!) '+ App.Constants.FM_INTO_KEYWORD +':</div>\
  67. <div class="actions">\
  68. <input type="text" id="dst-name" value="~!:DST_NAME~!" class="new-title">\
  69. </div>\
  70. <div class="results"></div>\
  71. <div class="warning">'+App.Constants.FM_EXISTING_FILES_WILL_BE_REPLACED+'</div>\
  72. <div class="controls">\
  73. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  74. <p class="ok" onClick="FM.bulkMoveDo();">'+App.Constants.FM_MOVE+'</p>\
  75. </div>\
  76. </div>'],
  77. popup_delete: ['<div class="confirm-box delete popup-box">\
  78. <div class="message">'+App.Constants.FM_CONFIRM_DELETE+' <span class="title">"~!:FILENAME~!"</span>?</div>\
  79. <div class="warning warning-message"></div>\
  80. <div class="controls">\
  81. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  82. <p class="ok" onClick="FM.confirmDelete();">'+App.Constants.FM_DELETE+'</p>\
  83. </div>\
  84. </div>'],
  85. popup_copy: ['<div class="confirm-box copy popup-box">\
  86. <div class="message">'+App.Constants.FM_COPY+' <span class="title">"~!:SRC_FILENAME~!"</span> '+App.Constants.FM_INTO_KEYWORD+':</div>\
  87. <div class="actions">\
  88. <input type="text" id="copy_dest" value="~!:DST_FILENAME~!" class="new-title">\
  89. </div>\
  90. <div class="message"></div>\
  91. <div class="warning warning-message">'+App.Constants.FM_EXISTING_FILES_WILL_BE_REPLACED+'</div>\
  92. <div class="controls">\
  93. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  94. <p class="ok" onClick="FM.confirmCopyItems();">'+App.Constants.FM_COPY+'</p>\
  95. </div>\
  96. </div>'],
  97. popup_move: ['<div class="confirm-box copy popup-box">\
  98. <div class="message">'+App.Constants.FM_MOVE+' <span class="title">"~!:FILENAME~!"</span> '+App.Constants.FM_INTO_KEYWORD+':</div>\
  99. <div class="actions">\
  100. <input type="text" id="dst-name" value="~!:DST_NAME~!" class="new-title">\
  101. </div>\
  102. <div class="message"></div>\
  103. <div class="warning warning-message">'+App.Constants.FM_EXISTING_FILES_WILL_BE_REPLACED+'</div>\
  104. <div class="controls">\
  105. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  106. <p class="ok" onClick="FM.confirmMove();">'+App.Constants.FM_MOVE+'</p>\
  107. </div>\
  108. </div>'],
  109. popup_rename: ['<div class="confirm-box rename warning">\
  110. <div class="message">'+App.Constants.FM_RENAME+': <span class="title">"~!:FILENAME~!"</span></div>\
  111. <div class="warning warning-message"></div>\
  112. <div class="actions">\
  113. <input type="text" id="rename-title" class="new-title" value="~!:NEW_NAME~!" />\
  114. </div>\
  115. <div class="controls">\
  116. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  117. <p class="ok" onClick="FM.confirmRename();">'+App.Constants.FM_RENAME+'</p>\
  118. </div>\
  119. <div class="controls replace">\
  120. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  121. <p class="ok" onClick="FM.confirmRename();">'+App.Constants.FM_RENAME+'</p>\
  122. </div>\
  123. </div>'],
  124. popup_chmod: ['<div class="confirm-box chmod warning">\
  125. <div class="message">'+App.Constants.FM_CHMOD+': <span class="title">"~!:FILENAME~!"</span></div>\
  126. <div class="warning warning-message"></div>\
  127. <div class="actions">\
  128. <ul>\
  129. <li><label><input type="checkbox" name="read-by-owner" value="1" ~!:READ_BY_OWNER~! /> '+App.Constants.FM_READ_BY_OWNER+'</label></li>\
  130. <li><label><input type="checkbox" name="write-by-owner" value="1" ~!:WRITE_BY_OWNER~! /> '+App.Constants.FM_WRITE_BY_OWNER+'</label></li>\
  131. <li><label><input type="checkbox" name="execute-by-owner" value="1" ~!:EXECUTE_BY_OWNER~! /> '+App.Constants.FM_EXECUTE_BY_OWNER+'</label></li>\
  132. </ul><ul>\
  133. <li><label><input type="checkbox" name="read-by-group" value="1" ~!:READ_BY_GROUP~! /> '+App.Constants.FM_READ_BY_GROUP+'</label></li>\
  134. <li><label><input type="checkbox" name="write-by-group" value="1" ~!:WRITE_BY_GROUP~! /> '+App.Constants.FM_WRITE_BY_GROUP+'</label></li>\
  135. <li><label><input type="checkbox" name="execute-by-group" value="1" ~!:EXECUTE_BY_GROUP~! /> '+App.Constants.FM_EXECUTE_BY_GROUP+'</label></li>\
  136. </ul><ul>\
  137. <li><label><input type="checkbox" name="read-by-others" value="1" ~!:READ_BY_OTHERS~! /> '+App.Constants.FM_READ_BY_OTHERS+'</label></li>\
  138. <li><label><input type="checkbox" name="write-by-others" value="1" ~!:WRITE_BY_OTHERS~! /> '+App.Constants.FM_WRITE_BY_OTHERS+'</label></li>\
  139. <li><label><input type="checkbox" name="execute-by-others" value="1" ~!:EXECUTE_BY_OTHERS~! /> '+App.Constants.FM_EXECUTE_BY_OTHERS+'</label></li>\
  140. </ul>\
  141. </div>\
  142. <div class="controls">\
  143. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  144. <p class="ok" onClick="FM.confirmChmod();">'+App.Constants.FM_OK+'</p>\
  145. </div>\
  146. </div>'],
  147. popup_bulk_chmod: ['<div class="confirm-box chmod warning">\
  148. <div class="message">'+App.Constants.FM_CHMOD+' (~!:NUMBER_OF_ITEMS~!)</div>\
  149. <div class="warning warning-message"></div>\
  150. <div class="actions">\
  151. <ul>\
  152. <li><label><input type="checkbox" name="read-by-owner" value="1" checked /> '+App.Constants.FM_READ_BY_OWNER+'</label></li>\
  153. <li><label><input type="checkbox" name="write-by-owner" value="1" checked /> '+App.Constants.FM_WRITE_BY_OWNER+'</label></li>\
  154. <li><label><input type="checkbox" name="execute-by-owner" value="1" checked /> '+App.Constants.FM_EXECUTE_BY_OWNER+'</label></li>\
  155. </ul><ul>\
  156. <li><label><input type="checkbox" name="read-by-group" value="1" checked /> '+App.Constants.FM_READ_BY_GROUP+'</label></li>\
  157. <li><label><input type="checkbox" name="write-by-group" value="1" checked /> '+App.Constants.FM_WRITE_BY_GROUP+'</label></li>\
  158. <li><label><input type="checkbox" name="execute-by-group" value="1" checked /> '+App.Constants.FM_EXECUTE_BY_GROUP+'</label></li>\
  159. </ul><ul>\
  160. <li><label><input type="checkbox" name="read-by-others" value="1" checked /> '+App.Constants.FM_READ_BY_OTHERS+'</label></li>\
  161. <li><label><input type="checkbox" name="write-by-others" value="1" checked /> '+App.Constants.FM_WRITE_BY_OTHERS+'</label></li>\
  162. <li><label><input type="checkbox" name="execute-by-others" value="1" checked /> '+App.Constants.FM_EXECUTE_BY_OTHERS+'</label></li>\
  163. </ul>\
  164. </div>\
  165. <div class="controls">\
  166. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  167. <p class="ok" onClick="FM.confirmBulkChmod();">'+App.Constants.FM_OK+'</p>\
  168. </div>\
  169. </div>'],
  170. popup_pack: ['<div class="confirm-box pack warning">\
  171. <div class="message">'+App.Constants.FM_PACK+' <span class="title">"~!:FILENAME~!"</span></div>\
  172. <div class="actions">\
  173. <input type="text" id="pack-destination" class="new-title" value="~!:DST_DIRNAME~!">\
  174. </div>\
  175. <div class="warning warning-message"></div>\
  176. <!-- div class="actions">\
  177. <label><input type="checkbox" name="overwrite" class="title" />Overwrite exising files</label>\
  178. </div -->\
  179. <div class="controls">\
  180. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  181. <p class="ok" onClick="FM.confirmPackItem();">'+App.Constants.FM_PACK_BUTTON+'</p>\
  182. </div>\
  183. </div>'],
  184. popup_bulk_pack: ['<div class="confirm-box pack warning">\
  185. <div class="message">'+App.Constants.FM_PACK+' (~!:NUMBER_OF_ITEMS~!)</div>\
  186. <div class="actions">\
  187. <input type="text" id="pack-destination" class="new-title" value="~!:DST_DIRNAME~!">\
  188. </div>\
  189. <div class="warning warning-message"></div>\
  190. <!-- div class="actions">\
  191. <label><input type="checkbox" name="overwrite" class="title" />Overwrite exising files</label>\
  192. </div -->\
  193. <div class="controls">\
  194. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  195. <p class="ok" onClick="FM.confirmPackItem();">'+App.Constants.FM_PACK_BUTTON+'</p>\
  196. </div>\
  197. </div>'],
  198. popup_unpack: ['<div class="confirm-box unpack warning">\
  199. <div class="message">'+App.Constants.FM_EXTRACT+' <span class="title">"~!:FILENAME~!"</span> '+App.Constants.FM_INTO_KEYWORD+':</div>\
  200. <div class="actions">\
  201. <input type="text" id="unpack-destination" class="new-title" value="~!:DST_DIRNAME~!">\
  202. </div>\
  203. <div class="warning warning-message"></div>\
  204. <!-- div class="actions">\
  205. <label><input type="checkbox" name="overwrite" class="title" />Overwrite exising files</label>\
  206. </div -->\
  207. <div class="controls">\
  208. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  209. <p class="ok" onClick="FM.confirmUnpackItem();">'+App.Constants.FM_EXTRACT+'</p>\
  210. </div>\
  211. </div>'],
  212. popup_create_file: ['<div class="confirm-box rename warning">\
  213. <div class="message">'+App.Constants.FM_CREATE_FILE+'</div>\
  214. <!-- div class="warning">File <span class="title">"reading.txt"</span> already exists</div -->\
  215. <div class="warning warning-message"></div>\
  216. <div class="actions">\
  217. <input type="text" id="rename-title" class="new-title" />\
  218. </div>\
  219. <div class="controls replace">\
  220. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  221. <p class="ok" onClick="FM.confirmCreateFile();">'+App.Constants.FM_CREATE+'</p>\
  222. </div>\
  223. </div>'],
  224. popup_create_dir: ['<div class="confirm-box rename warning">\
  225. <div class="message">'+App.Constants.FM_CREATE_DIRECTORY+'</div>\
  226. <!-- div class="warning">File <span class="title">"reading.txt"</span> already exists</div -->\
  227. <div class="warning warning-message"></div>\
  228. <div class="actions">\
  229. <input type="text" id="rename-title" class="new-title" />\
  230. </div>\
  231. <div class="controls replace">\
  232. <p class="cancel" onClick="FM.popupClose();">'+App.Constants.FM_CANCEL+'</p>\
  233. <p class="ok" onClick="FM.confirmCreateDir();">'+App.Constants.FM_CREATE+'</p>\
  234. </div>\
  235. </div>'],
  236. popup_no_file_selected: ['<div class="confirm-box no-file-selected">\
  237. <div class="message">Please select a file</div>\
  238. <div class="controls">\
  239. <p class="ok" onClick="FM.confirmCreateDir();">'+App.Constants.FM_OK+'</p>\
  240. </div>\
  241. </div>']
  242. }
  243. };
  244. // Internals
  245. var Tpl = App.Templates;
  246. var Templator = function()
  247. {
  248. var init = function()
  249. {
  250. fb.info('Templator work');
  251. Templator.splitThemAll();
  252. Templator.freezeTplIndexes();
  253. };
  254. /**
  255. * Split the tpl strings into arrays
  256. */
  257. Templator.splitThemAll = function(){
  258. fb.info('splitting tpls');
  259. jQuery.each(App.Templates.html, function(o){
  260. //try{
  261. var tpls = App.Templates.html[o];
  262. jQuery.each(tpls, function(t){
  263. tpls[t] = tpls[t][0].split('~!');
  264. });
  265. //}catch(e){fb.error('%o %o', o, e);}
  266. });
  267. },
  268. /**
  269. * Iterates tpls
  270. */
  271. Templator.freezeTplIndexes = function(){
  272. fb.info('freezing tpl keys');
  273. jQuery.each(App.Templates.html, Templator.cacheTplIndexes);
  274. },
  275. /**
  276. * Grab the tpl group key and process it
  277. */
  278. Templator.cacheTplIndexes = function(key)
  279. {
  280. var tpls = App.Templates.html[key];
  281. jQuery.each(tpls, function(o)
  282. {
  283. var tpl = tpls[o];
  284. Templator.catchIndex(key, o, tpl);
  285. });
  286. },
  287. /**
  288. * Set the indexes
  289. */
  290. Templator.catchIndex = function(key, ref_key, tpl)
  291. {
  292. 'undefined' == typeof App.Templates._indexes[key] ? App.Templates._indexes[key] = {} : false;
  293. 'undefined' == typeof App.Templates._indexes[key][ref_key] ?
  294. App.Templates._indexes[key][ref_key] = {} : false;
  295. jQuery(tpl).each(function(index, o) {
  296. if (':' == o.charAt(0)) {
  297. App.Templates._indexes[key][ref_key][o.toString()] = index;
  298. }
  299. });
  300. }
  301. /**
  302. * Get concrete templates
  303. */
  304. init();
  305. return Templator;
  306. };
  307. Templator.getTemplate = function(ns, key){
  308. return [
  309. App.Templates._indexes[ns][key],
  310. App.Templates.html[ns][key].slice(0)
  311. ];
  312. }
  313. // init templator
  314. Tpl.Templator = Templator();
  315. Tpl.get = function(key, group){
  316. return Tpl.Templator.getTemplate(group, key);
  317. }