ui-js-templates.php 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. <script type="text/html" id="tmpl-fl-node-template-block">
  2. <span class="fl-builder-block fl-builder-block-saved-{{data.type}}<# if ( data.global ) { #> fl-builder-block-global<# } #>" data-id="{{data.id}}">
  3. <span class="fl-builder-block-content">
  4. <div class="fl-builder-block-title">{{data.name}}</div>
  5. <# if ( data.global ) { #>
  6. <div class="fl-builder-badge fl-builder-badge-global">
  7. <?php _ex( 'Global', 'Indicator for global node templates.', 'vamtam-elements-b' ); ?>
  8. </div>
  9. <# } #>
  10. <# if ( data.global && FLBuilderConfig.userCanEditGlobalTemplates ) { #>
  11. <span class="fl-builder-node-template-actions">
  12. <a class="fl-builder-node-template-edit" href="{{data.link}}" target="_blank">
  13. <i class="fas fa-wrench"></i>
  14. </a>
  15. <a class="fl-builder-node-template-delete" href="javascript:void(0);">
  16. <i class="fas fa-times"></i>
  17. </a>
  18. </span>
  19. <# } #>
  20. </span>
  21. </span>
  22. </script>
  23. <!-- #tmpl-fl-node-template-block -->
  24. <script type="text/html" id="tmpl-fl-content-panel-saved-view">
  25. <div>
  26. <#
  27. var templates = data.queryResults.library.template.items;
  28. var rows = _.filter(templates, function(item) {
  29. return item.content === 'row';
  30. });
  31. var columns = _.filter(templates, function(item) {
  32. return item.content === 'column';
  33. });
  34. var modules = _.filter(templates, function(item) {
  35. return item.content === 'module';
  36. });
  37. #>
  38. <?php if ( ! FLBuilderModel::is_post_user_template( 'row' ) && ! FLBuilderModel::is_post_user_template( 'column' ) ) : ?>
  39. <div id="fl-builder-blocks-saved-rows" class="fl-builder-blocks-section fl-builder-blocks-node-template">
  40. <span class="fl-builder-blocks-section-title"><?php _e( 'Saved Rows', 'vamtam-elements-b' ) ?></span>
  41. <div class="fl-builder-blocks-section-content fl-builder-saved-rows">
  42. <# if (rows.length === 0) { #>
  43. <span class="fl-builder-block-no-node-templates"><?php _e( 'No saved rows found.', 'vamtam-elements-b' ); ?></span>
  44. <# } else { #>
  45. <# for( var i in rows) {
  46. var row = rows[i];
  47. var globalClass = row.isGlobal ? ' fl-builder-block-global' : '';
  48. #>
  49. <span class="fl-builder-block fl-builder-block-saved-row{{globalClass}}" data-id="{{row.id}}">
  50. <span class="fl-builder-block-content">
  51. <div class="fl-builder-block-details">
  52. <div class="fl-builder-block-title" title="{{row.name}}">{{row.name}}</div>
  53. <# if (row.isGlobal) { #>
  54. <div class="fl-builder-badge fl-builder-badge-global">
  55. <?php _ex( 'Global', 'Indicator for global node templates.', 'vamtam-elements-b' ); ?>
  56. </div>
  57. <# } #>
  58. <span class="fl-builder-node-template-actions">
  59. <a class="fl-builder-node-template-edit" href="{{row.link}}" target="_blank">
  60. <i class="fas fa-wrench"></i>
  61. </a>
  62. <a class="fl-builder-node-template-delete" href="javascript:void(0);">
  63. <i class="fas fa-times"></i>
  64. </a>
  65. </span>
  66. </div>
  67. </span>
  68. </span>
  69. <# } #>
  70. <# } #>
  71. </div>
  72. </div>
  73. <?php endif; ?>
  74. <?php if ( ! FLBuilderModel::is_post_user_template( 'column' ) ) : ?>
  75. <div id="fl-builder-blocks-saved-columns" class="fl-builder-blocks-section fl-builder-blocks-node-template">
  76. <span class="fl-builder-blocks-section-title"><?php _e( 'Saved Columns', 'vamtam-elements-b' ) ?></span>
  77. <div class="fl-builder-blocks-section-content fl-builder-saved-columns">
  78. <# if (columns.length === 0) { #>
  79. <span class="fl-builder-block-no-node-templates"><?php _e( 'No saved columns found.', 'vamtam-elements-b' ); ?></span>
  80. <# } else { #>
  81. <# for( var i in columns) {
  82. var column = columns[i];
  83. var globalClass = column.isGlobal ? ' fl-builder-block-global' : '';
  84. #>
  85. <span class="fl-builder-block fl-builder-block-saved-column{{globalClass}}" data-id="{{column.id}}">
  86. <span class="fl-builder-block-content">
  87. <div class="fl-builder-block-details">
  88. <div class="fl-builder-block-title" title="{{column.name}}">{{column.name}}</div>
  89. <# if (column.isGlobal) { #>
  90. <div class="fl-builder-badge fl-builder-badge-global">
  91. <?php _ex( 'Global', 'Indicator for global node templates.', 'vamtam-elements-b' ); ?>
  92. </div>
  93. <# } #>
  94. <span class="fl-builder-node-template-actions">
  95. <a class="fl-builder-node-template-edit" href="{{column.link}}" target="_blank">
  96. <i class="fas fa-wrench"></i>
  97. </a>
  98. <a class="fl-builder-node-template-delete" href="javascript:void(0);">
  99. <i class="fas fa-times"></i>
  100. </a>
  101. </span>
  102. </div>
  103. </span>
  104. </span>
  105. <# } #>
  106. <# } #>
  107. </div>
  108. </div>
  109. <?php endif; ?>
  110. <div id="fl-builder-blocks-saved-modules" class="fl-builder-blocks-section fl-builder-blocks-node-template">
  111. <span class="fl-builder-blocks-section-title"><?php _e( 'Saved Modules', 'vamtam-elements-b' ) ?></span>
  112. <div class="fl-builder-blocks-section-content fl-builder-saved-modules">
  113. <# if (modules.length === 0) { #>
  114. <span class="fl-builder-block-no-node-templates"><?php _e( 'No saved modules found.', 'vamtam-elements-b' ); ?></span>
  115. <# } else { #>
  116. <# for( var i in modules) {
  117. var module = modules[i];
  118. var globalClass = module.isGlobal ? ' fl-builder-block-global' : '';
  119. #>
  120. <span class="fl-builder-block fl-builder-block-saved-module{{globalClass}}" data-id="{{module.id}}">
  121. <span class="fl-builder-block-content">
  122. <div class="fl-builder-block-details">
  123. <div class="fl-builder-block-title" title="{{module.name}}">{{module.name}}</div>
  124. <# if (module.isGlobal) { #>
  125. <div class="fl-builder-badge fl-builder-badge-global">
  126. <?php _ex( 'Global', 'Indicator for global node templates.', 'vamtam-elements-b' ); ?>
  127. </div>
  128. <# } #>
  129. <span class="fl-builder-node-template-actions">
  130. <a class="fl-builder-node-template-edit" href="{{module.link}}" target="_blank">
  131. <i class="fas fa-wrench"></i>
  132. </a>
  133. <a class="fl-builder-node-template-delete" href="javascript:void(0);">
  134. <i class="fas fa-times"></i>
  135. </a>
  136. </span>
  137. </div>
  138. </span>
  139. </span>
  140. <# } #>
  141. <# } #>
  142. </div>
  143. </div>
  144. </script>
  145. <!-- #tmpl-fl-content-panel-saved-view -->
  146. <script type="text/html" id="tmpl-fl-content-panel-saved-modules">
  147. <#
  148. var modules = data.queryResults.library.template.items;
  149. #>
  150. <div id="fl-builder-blocks-saved-modules" class="fl-builder-blocks-section fl-builder-blocks-node-template">
  151. <div class="fl-builder-blocks-section-content fl-builder-saved-modules">
  152. <# if (modules.length === 0) { #>
  153. <span class="fl-builder-block-no-node-templates"><?php _e( 'No saved modules found.', 'vamtam-elements-b' ); ?></span>
  154. <# } else { #>
  155. <# for( var i in modules) {
  156. var module = modules[i],
  157. image = module.image,
  158. globalClass = module.isGlobal ? ' fl-builder-block-global' : '',
  159. image = module.image,
  160. hasImage = !_.isUndefined( image ) && !image.endsWith( 'blank.jpg' ),
  161. hasImageClass = hasImage ? 'fl-builder-block-has-thumbnail' : '' ;
  162. #>
  163. <span class="fl-builder-block fl-builder-block-saved-module {{globalClass}} {{hasImageClass}}" data-id="{{module.id}}">
  164. <span class="fl-builder-block-content">
  165. <# if (hasImage) { #>
  166. <div class="fl-builder-block-thumbnail" style="background-image:url({{image}})"></div>
  167. <# } #>
  168. <div class="fl-builder-block-details">
  169. <div class="fl-builder-block-title" title="{{module.name}}">{{module.name}}</div>
  170. <# if (module.isGlobal) { #>
  171. <div class="fl-builder-badge fl-builder-badge-global">
  172. <?php _ex( 'Global', 'Indicator for global node templates.', 'vamtam-elements-b' ); ?>
  173. </div>
  174. <# } #>
  175. <span class="fl-builder-node-template-actions">
  176. <a class="fl-builder-node-template-edit" href="{{module.link}}" target="_blank">
  177. <i class="fas fa-wrench"></i>
  178. </a>
  179. <a class="fl-builder-node-template-delete" href="javascript:void(0);">
  180. <i class="fas fa-times"></i>
  181. </a>
  182. </span>
  183. </div>
  184. </span>
  185. </span>
  186. <# } #>
  187. <# } #>
  188. </div>
  189. </script>
  190. <!-- #tmpl-fl-content-panel-saved-modules -->
  191. <script type="text/html" id="tmpl-fl-content-panel-saved-columns">
  192. <#
  193. var columns = data.queryResults.library.template.items;
  194. #>
  195. <div id="fl-builder-blocks-saved-columns" class="fl-builder-blocks-section fl-builder-blocks-node-template">
  196. <div class="fl-builder-blocks-section-content fl-builder-saved-columns">
  197. <# if (columns.length === 0) { #>
  198. <span class="fl-builder-block-no-node-templates"><?php _e( 'No saved columns found.', 'vamtam-elements-b' ); ?></span>
  199. <# } else { #>
  200. <# for( var i in columns) {
  201. var column = columns[i],
  202. image = column.image,
  203. globalClass = column.isGlobal ? ' fl-builder-block-global' : '',
  204. image = column.image,
  205. hasImage = !_.isUndefined( image ) && !image.endsWith( 'blank.jpg' ),
  206. hasImageClass = hasImage ? 'fl-builder-block-has-thumbnail' : '' ;
  207. #>
  208. <span class="fl-builder-block fl-builder-block-saved-column {{globalClass}} {{hasImageClass}}" data-id="{{column.id}}">
  209. <span class="fl-builder-block-content">
  210. <# if (hasImage) { #>
  211. <div class="fl-builder-block-thumbnail" style="background-image:url({{image}})"></div>
  212. <# } #>
  213. <div class="fl-builder-block-details">
  214. <div class="fl-builder-block-title" title="{{column.name}}">{{column.name}}</div>
  215. <# if (column.isGlobal) { #>
  216. <div class="fl-builder-badge fl-builder-badge-global">
  217. <?php _ex( 'Global', 'Indicator for global node templates.', 'vamtam-elements-b' ); ?>
  218. </div>
  219. <# } #>
  220. <span class="fl-builder-node-template-actions">
  221. <a class="fl-builder-node-template-edit" href="{{column.link}}" target="_blank">
  222. <i class="fas fa-wrench"></i>
  223. </a>
  224. <a class="fl-builder-node-template-delete" href="javascript:void(0);">
  225. <i class="fas fa-times"></i>
  226. </a>
  227. </span>
  228. </div>
  229. </span>
  230. </span>
  231. <# } #>
  232. <# } #>
  233. </div>
  234. </script>
  235. <!-- #tmpl-fl-content-panel-saved-columns -->
  236. <script type="text/html" id="tmpl-fl-content-panel-saved-rows">
  237. <#
  238. var rows = data.queryResults.library.template.items;
  239. #>
  240. <div id="fl-builder-blocks-saved-rows" class="fl-builder-blocks-section fl-builder-blocks-node-template">
  241. <div class="fl-builder-blocks-section-content fl-builder-saved-rows">
  242. <# if (rows.length === 0) { #>
  243. <span class="fl-builder-block-no-node-templates"><?php _e( 'No saved rows found.', 'vamtam-elements-b' ); ?></span>
  244. <# } else { #>
  245. <# for( var i in rows) {
  246. var row = rows[i],
  247. globalClass = row.isGlobal ? 'fl-builder-block-global' : '',
  248. image = row.image,
  249. hasImage = !_.isUndefined( image ) && !image.endsWith( 'blank.jpg' ),
  250. hasImageClass = hasImage ? 'fl-builder-block-has-thumbnail' : '' ;
  251. #>
  252. <span class="fl-builder-block fl-builder-block-saved-row {{globalClass}} {{hasImageClass}}" data-id="{{row.id}}">
  253. <span class="fl-builder-block-content">
  254. <# if (!_.isUndefined(image) && !image.endsWith('blank.jpg')) { #>
  255. <div class="fl-builder-block-thumbnail" style="background-image:url({{image}})"></div>
  256. <# } #>
  257. <div class="fl-builder-block-details">
  258. <div class="fl-builder-block-title" title="{{row.name}}">{{row.name}}</div>
  259. <# if (row.isGlobal) { #>
  260. <div class="fl-builder-badge fl-builder-badge-global">
  261. <?php _ex( 'Global', 'Indicator for global node templates.', 'vamtam-elements-b' ); ?>
  262. </div>
  263. <# } #>
  264. <span class="fl-builder-node-template-actions">
  265. <a class="fl-builder-node-template-edit" href="{{row.link}}" target="_blank">
  266. <i class="fas fa-wrench"></i>
  267. </a>
  268. <a class="fl-builder-node-template-delete" href="javascript:void(0);">
  269. <i class="fas fa-times"></i>
  270. </a>
  271. </span>
  272. </div>
  273. </span>
  274. </span>
  275. <# } #>
  276. <# } #>
  277. </div>
  278. </div>
  279. </script>
  280. <!-- #tmpl-fl-content-panel-saved-rows -->
  281. <script type="text/html" id="tmpl-fl-content-panel-saved-templates">
  282. <div class="fl-user-templates">
  283. <div class="fl-builder--user-templates-section-content">
  284. <div class="fl-user-template" data-id="blank">
  285. <div class="fl-user-template-thumbnail">
  286. <div class="fl-builder--template-thumbnail"></div>
  287. </div>
  288. <span class="fl-user-template-name"><?php _ex( 'Blank', 'Template name.', 'vamtam-elements-b' ); ?></span>
  289. <div class="fl-clear"></div>
  290. </div>
  291. </div>
  292. <#
  293. var queryResults = data.queryResults.library.template,
  294. templates = null,
  295. categories = {},
  296. showCategoryName = false,
  297. categoryName = '';
  298. if ( _.isUndefined( queryResults.categorized ) ) {
  299. for ( var slug in queryResults.items[0].category ) {
  300. categoryName = queryResults.items[0].category[ slug ];
  301. break;
  302. }
  303. categories[ categoryName ] = queryResults.items;
  304. } else {
  305. categories = data.queryResults.library.template.categorized,
  306. showCategoryName = true !== ( Object.keys( categories ).length <= 1 );
  307. }
  308. for ( var categoryHandle in categories ) {
  309. templates = categories[ categoryHandle ]
  310. if ( showCategoryName ) { #>
  311. <div class="fl-builder--user-templates-section-name">{{categoryHandle}}</div>
  312. <# } #>
  313. <div class="fl-builder--user-templates-section-content">
  314. <# for( var i in templates ) {
  315. var template = templates[ i ];
  316. #>
  317. <div class="fl-user-template" data-id="{{template.postId}}">
  318. <div class="fl-user-template-actions">
  319. <a class="fl-user-template-edit" href="{{template.link}}"><i class="fas fa-wrench"></i></a>
  320. <a class="fl-user-template-delete" href="javascript:void(0);" onclick="return false;"><i class="fas fa-times"></i></a>
  321. </div>
  322. <div class="fl-user-template-thumbnail">
  323. <div class="fl-builder--template-thumbnail" style="background-image:url({{template.image}})"></div>
  324. </div>
  325. <span class="fl-user-template-name">{{template.name}}</span>
  326. <div class="fl-clear"></div>
  327. </div>
  328. <# } /* #>
  329. <div class="fl-builder--save-new-user-template">
  330. <div class="fl-user-template-thumbnail">
  331. <div class="fl-builder--template-thumbnail"></div>
  332. </div>
  333. <div class="fl-save-control">
  334. <input name="template-name" placeholder="<?php _e( 'Save New Template', 'vamtam-elements-b' ) ?>" type="text">
  335. <button class="fl-button"><?php _e( 'Save', 'vamtam-elements-b' ) ?></button>
  336. <input type="hidden" name="template-category" value="{{categoryHandle}}" >
  337. </div>
  338. </div>
  339. <div class="fl-save-control-mask"></div>
  340. <# */ #>
  341. </div>
  342. <# } #>
  343. </div>
  344. </script>
  345. <!-- #tmpl-fl-content-panel-saved-templates -->