js.phtml 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <?php
  2. /**
  3. * Copyright © Magento, Inc. All rights reserved.
  4. * See COPYING.txt for license details.
  5. */
  6. // @codingStandardsIgnoreFile
  7. ?>
  8. <?php /** @var $block \Magento\Backend\Block\Widget\Form\Renderer\Fieldset */ ?>
  9. <div id="js-file-uploader" class="uploader">
  10. </div>
  11. <script id="js-file-uploader-template" type="text/x-magento-template">
  12. <div id="<%- data.id %>" class="file-row">
  13. <span class="file-info"><%- data.name %> (<%- data.size %>)</span>
  14. <div class="progressbar-container">
  15. <div class="progressbar upload-progress" style="width: 0%;"></div>
  16. </div>
  17. <div class="clear"></div>
  18. </div>
  19. </script>
  20. <script id="js-uploaded-file-template" type="text/x-magento-template">
  21. <input class="up" type="button" value="">
  22. <input class="down" type="button" value="">
  23. <input type="hidden" name="js_order[<%- data.id %>]" value="1">
  24. <div class="js-file">
  25. <%- data.name %>
  26. <div class="remove-js">
  27. <input
  28. type="checkbox"
  29. id="remove_js_files_<%- data.id %>"
  30. name="js_removed_files[]"
  31. value="<%- data.id %>" />
  32. <label for="remove_js_files_<%- data.id %>"><?= /* @escapeNotVerified */ __('Remove') ?></label>
  33. </div>
  34. </div>
  35. <input type="hidden" name="js_uploaded_files[]" value="<%- data.temporary %>" />
  36. </script>
  37. <ul id="js-files-container" class="js-files-container ui-sortable" ></ul>
  38. <script>
  39. require([
  40. "jquery",
  41. "jquery/ui",
  42. "Magento_Theme/js/sortable",
  43. "Magento_Theme/js/custom-js-list"
  44. ], function(jQuery){
  45. jQuery(function($) {
  46. $('.ui-sortable').sortable();
  47. $('.ui-sortable').disableSelection();
  48. $('#js-files-container').themeJsList({
  49. templateId : '#js-uploaded-file-template',
  50. refreshFileListEvent : 'refreshJsList',
  51. prefixItemId : 'js-file-'
  52. });
  53. $('body').trigger(
  54. 'refreshJsList',
  55. {jsList: <?= /* @escapeNotVerified */ $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($block->getJsFiles()) ?>}
  56. );
  57. });
  58. });
  59. </script>