PageRenderTime 53ms CodeModel.GetById 26ms RepoModel.GetById 0ms app.codeStats 0ms

/tmpl/cms/field_html/field_html_asset.tmpl

https://github.com/usualoma/movabletype
Go Template | 224 lines | 205 code | 19 blank | 0 comment | 0 complexity | 9279ef3fe1654232b8991fdfcbb77b17 MD5 | raw file
  1. <div id="asset-field-<mt:var name="content_field_id" escape="html">" class="asset-field-container content-field" <mt:var name="required"> <mt:var name="multiple">>
  2. <mt:loop name="asset_loop">
  3. <div class="mt-draggable"<mt:if name="multiple"> draggable="true" aria-grabbed="false"</mt:if>>
  4. <input type="hidden" name="content-field-<mt:var name="content_field_id" escape="html">" value="<mt:var name="asset_id" escape="html">">
  5. <div class="col-auto">
  6. <mt:if name="multiple">
  7. <mtapp:svgicon id="ic_move" title="Draggable">
  8. <mt:else>
  9. <mtapp:svgicon id="ic_blank" title="Blank">
  10. </mt:if>
  11. </div>
  12. <div class="col-auto">
  13. <mt:if name="asset_type" eq="audio">
  14. <mtapp:svgicon id="ic_audio" title="Audio" color="secondary">
  15. <mt:elseif name="asset_type" eq="image">
  16. <mt:if name="asset_preview_url">
  17. <span class="asset-preview-image picture small mr-3 mb-3">
  18. <img src="<mt:var name="asset_preview_url" escape="html">" width="<mt:var name="asset_preview_width" escape="html">" height="<mt:var name="asset_preview_height" escape="html">">
  19. </span>
  20. <mt:else>
  21. <mtapp:svgicon id="ic_image" title="Image" color="secondary">
  22. </mt:if>
  23. <mt:elseif name="asset_type" eq="video">
  24. <mtapp:svgicon id="ic_movie" title="Video" color="secondary">
  25. <mt:else>
  26. <mtapp:svgicon id="ic_file" title="Asset" color="secondary">
  27. </mt:if>
  28. </div>
  29. <div class="col text-wrap">
  30. <span class="align-top">
  31. <mt:var name="asset_label" escape="html">
  32. </span>
  33. </div>
  34. <div class="col-auto mr-3 d-none d-md-block">
  35. <a href="javascript:void(0)" class="remove">
  36. <__trans phrase="Remove">
  37. </a>
  38. </div>
  39. <div class="col-auto">
  40. <a class="d-inline-block" data-toggle="collapse" href="#collapse-<mt:var name="content_field_id" escape="html">-<mt:var name="asset_id" escape="html">" aria-expanded="false" aria-controls="collapse-<mt:var name="content_field_id" escape="html">-<mt:var name="asset_id" escape="html">">
  41. <mtapp:svgicon id="ic_collapse" title="Collapse" color="secondary">
  42. </a>
  43. </div>
  44. <div class="mt-flexBreak"></div>
  45. <div class="collapse mt-collapse__content w-100 pb-2" id="collapse-<mt:var name="content_field_id" escape="html">-<mt:var name="asset_id" escape="html">">
  46. <div class="row py-5 py-md-0">
  47. <div class="col text-wrap">
  48. <ul class="list-unstyled">
  49. <li class="asset-preview-title">
  50. <strong><__trans phrase="File Name"></strong>: <mt:var name="asset_file_name" escape="html">
  51. </li>
  52. <mt:if name="asset_type" eq="image">
  53. <li class="asset-preview-meta">
  54. <strong><__trans phrase="Dimensions"></strong>: <mt:var name="asset_dimensions" escape="html">
  55. </li>
  56. </mt:if>
  57. </ul>
  58. </div>
  59. </div>
  60. <div class="row mobile-remove-asset border-top pt-4 d-md-none">
  61. <div class="col-auto mx-auto">
  62. <a href="javascript:void(0)" class="remove">
  63. <__trans phrase="Remove">
  64. </a>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. </mt:loop>
  70. <div class="alert alert-info mb-0">
  71. <mt:if name="multiple">
  72. <__trans phrase="No Assets">
  73. <mt:else>
  74. <__trans phrase="No Asset">
  75. </mt:if>
  76. </div>
  77. </div>
  78. <div class="mt-3">
  79. <a href="<mt:var name="script_url">?__mode=list_asset&_type=asset&blog_id=<mt:var name="blog_id">&dialog_view=1&no_insert=1&filter=class&filter_val=<mt:var name="asset_type_for_field">&require_type=<mt:var name="asset_type_for_field">&content_field_id=<mt:var name="content_field_id">" class="mt-open-dialog mt-modal-open d-inline-block" data-mt-modal-large>
  80. <mtapp:svgicon id="ic_add" title="Add" color="primary" size="sm">
  81. <mt:if name="multiple">
  82. <__trans phrase="Add Assets">
  83. <mt:else>
  84. <__trans phrase="Choose Asset">
  85. </mt:if>
  86. </a>
  87. </div>
  88. <mt:unless name="loaded_asset_field_js">
  89. <mt:var name="loaded_asset_field_js" value="1">
  90. <mt:setvarblock name="css_include" append="1">
  91. <style type="text/css">
  92. .asset-field-container {
  93. margin-bottom: 5px;
  94. margin-top: 5px;
  95. }
  96. .asset-field-container div:not(:first-child).alert {
  97. display: none;
  98. }
  99. .placeholder {
  100. border: 1px dashed #c0c6c9;
  101. background-color: #fbfbfb;
  102. margin-bottom: 2px;
  103. padding: 0.5rem 0;
  104. }
  105. @media (max-width: 767.98px) {
  106. .asset-field-container .mt-draggable {
  107. padding-right: 0;
  108. }
  109. .asset-field-container .mt-draggable .mt-collapse__content .row:first-child {
  110. background-color: #F4F4F4; /* $gray-lightest */
  111. }
  112. .asset-field-container .mt-draggable .mt-collapse__content .row:last-child {
  113. margin-right: -14px;
  114. }
  115. }
  116. </style>
  117. </mt:setvarblock>
  118. <mt:setvarblock name="jq_js_include" append="1">
  119. jQuery.mtValidateAddRules({
  120. 'div.asset-field-container': function ($e) {
  121. var multiple = $e.data('mt-multiple') ? true : false;
  122. var max = Number($e.data('mt-max-select')) || 0;
  123. var min = Number($e.data('mt-min-select')) || 0;
  124. var required = $e.data('mt-required') ? true : false;
  125. var selectedCount = $e.find('.mt-draggable').length;
  126. if ( multiple && max && max < selectedCount ) {
  127. this.error = true;
  128. this.errstr = trans('Assets less than or equal to [_1] must be selected', max);
  129. return false;
  130. }
  131. if ( multiple && min && min > selectedCount ) {
  132. this.error = true;
  133. this.errstr = trans('Assets greater than or equal to [_1] must be selected', min);
  134. return false;
  135. }
  136. if ( !multiple && selectedCount > 1 ) {
  137. this.error = true;
  138. this.errstr = trans('Only 1 asset can be selected');
  139. return false;
  140. }
  141. if ( required && selectedCount === 0 ) {
  142. this.error = true;
  143. this.errstr = trans('This field is required');
  144. return false;
  145. }
  146. return true;
  147. }
  148. });
  149. jQuery('.asset-field-container').on('click', 'a.remove', function () {
  150. var $container = jQuery(this).parents('.asset-field-container');
  151. jQuery(this).parents('.mt-draggable').remove();
  152. if ($container.data('mtValidator')) {
  153. $container.mtValid({ focus: false });
  154. }
  155. setDirty(true);
  156. log('found dirty form');
  157. app.setDirty();
  158. return false;
  159. });
  160. jQuery('.asset-field-container').on('click', '.mobile-remove-asset', function (e) {
  161. if (!MT.Util.isMobileView()) {
  162. return;
  163. }
  164. if (e.target.tagName == 'A') {
  165. return;
  166. }
  167. jQuery(this).find('a.remove').trigger('click');
  168. return false;
  169. });
  170. window.assetFieldSortableChanged = {};
  171. </mt:setvarblock>
  172. </mt:unless>
  173. <mt:setvarblock name="jq_js_include" append="1">
  174. jQuery('#asset-field-<mt:var name="content_field_id" escape="html">').sortable({
  175. items: 'div.mt-draggable[draggable=true][aria-grabbed]',
  176. handle: MT.Util.isMobileView() ? '.col-auto:first' : false,
  177. placeholder: 'placeholder',
  178. distance: 3,
  179. opacity: 0.8,
  180. cursor: 'move',
  181. forcePlaceholderSize: true,
  182. containment: '.mt-mainContent',
  183. start: function (event, ui) {
  184. ui.item.attr('aria-grabbed', true);
  185. if (window.assetFieldSortableChanged[<mt:var name="content_field_id" escape="js">]) {
  186. ui.helper.offset({
  187. top: ui.helper.offset().top + jQuery('body').scrollTop()
  188. });
  189. }
  190. },
  191. sort: function (event, ui) {
  192. if (window.assetFieldSortableChanged[<mt:var name="content_field_id" escape="js">]) {
  193. ui.helper.offset({
  194. top: ui.helper.offset().top + jQuery('body').scrollTop()
  195. });
  196. }
  197. },
  198. change: function (event, ui) {
  199. window.assetFieldSortableChanged[<mt:var name="content_field_id" escape="js">] = true;
  200. },
  201. stop: function (event, ui) {
  202. ui.item.attr('aria-grabbed', false);
  203. }
  204. });
  205. </mt:setvarblock>