src/Eccube/Resource/template/admin/Content/file.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% extends '@admin/default_frame.twig' %}
  9. {% set menus = ['content', 'file'] %}
  10. {% block title %}{{ 'admin.content.file_management'|trans }}{% endblock %}
  11. {% block sub_title %}{{ 'admin.content.contents_management'|trans }}{% endblock %}
  12. {% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
  13. {% block stylesheet %}
  14.     <style>
  15.         .copy-file-path {
  16.             display: none;
  17.         }
  18.     </style>
  19. {% endblock stylesheet %}
  20. {% block javascript %}
  21.     <script src="{{ asset('assets/js/file_manager.js', 'admin') }}"></script>
  22.     <script>
  23.         arrTree = {{ tpl_javascript|raw }};
  24.         var paths = {{ paths|raw }}; // TODO 仮実装
  25.         $(function() {
  26.             var bread_crumbs = {{ now_dir_list|raw }};
  27.             var file_path = '';
  28.             var $delimiter = '<span>&nbsp;/&nbsp;</span>';
  29.             var $node = $('#bread');
  30.             var total = bread_crumbs.length;
  31.             for (var i in bread_crumbs) {
  32.                 file_path += '/' + bread_crumbs[i];
  33.                 if (i == total - 1) {
  34.                     $li = $('<li class="breadcrumb-item active" />').text(bread_crumbs[i]);
  35.                 } else {
  36.                     $a = $('<a href="javascript:;" onclick="eccube.fileManager.openFolder(\'' + file_path.replace(/user_data/, '') + '\'); return false;" />')
  37.                         .text(bread_crumbs[i]);
  38.                     $li = $('<li class="breadcrumb-item" />').append($a);
  39.                 }
  40.                 $li.appendTo($node);
  41.                 if (i < total - 1) $node.append($delimiter);
  42.             }
  43.             $('.action-copy').on('click',function(){
  44.                 var updated = $(this).parents('tr').find('.updated');
  45.                 var copy_file_path = $(this).parents('tr').find('.copy-file-path');
  46.                 if ($(updated).is(':visible')) {
  47.                     $('.updated').each(function() {
  48.                         $(this).show();
  49.                     });
  50.                     $('.copy-file-path').each(function() {
  51.                         $(this).hide();
  52.                     });
  53.                     $('.action-copy').each(function() {
  54.                         $(this).attr('title', '{{ 'admin.common.copy_path'|trans }}');
  55.                         $(this).tooltip('_fixTitle');
  56.                     });
  57.                        $(updated).hide();
  58.                     $(copy_file_path).show();
  59.                     $(copy_file_path).find('input:first').focus();
  60.                 } else {
  61.                     $(updated).show();
  62.                     $(copy_file_path).hide();
  63.                 }
  64.             });
  65.             $('.copy-file-path input').focus(function(){
  66.                 $(this).select();
  67.                 if (document.execCommand('copy')) {
  68.                     var action_copy = $(this).parents('tr').find('.action-copy');
  69.                     setTimeout(function() {
  70.                         action_copy.attr('title', '{{ 'admin.common.copy_path_complete'|trans }}');
  71.                         action_copy.tooltip('_fixTitle');
  72.                         action_copy.tooltip('show');
  73.                      }, 100);
  74.                 }
  75.             });
  76.         });
  77.         eccube.fileManager.viewFileTree('directory_userdata', arrTree, '{{ tpl_now_dir }}', 'tree_select_file', 'tree_status', 'move');
  78.     </script>
  79. {% endblock javascript %}
  80. {% block main %}
  81.     <form name="form1" id="form1" method="post" action="?" enctype="multipart/form-data">
  82.         <input type="hidden" name="mode" value=""/>
  83.         <input type="hidden" name="now_file" value="{{ tpl_now_dir }}"/>
  84.         <input type="hidden" name="now_dir" value="{{ tpl_now_dir }}"/>
  85.         <input type="hidden" name="tree_select_file" value="{{ tpl_now_dir }}"/>
  86.         <input type="hidden" name="tree_status" value=""/>
  87.         <input type="hidden" name="select_file" value=""/>
  88.         {{ form_widget(form._token) }}
  89.         <div class="c-outsideBlock">
  90.             <div class="c-outsideBlock__contents">
  91.                 <nav aria-label="breadcrumb" role="navigation">
  92.                     <ol class="breadcrumb mb-2 p-0" id="bread"></ol>
  93.                 </nav>
  94.                 <div class="card rounded border-0 mb-4">
  95.                     <div class="card-header"><span class="card-title">{{ 'admin.content.file.add_file__card_title'|trans }}</span></div>
  96.                     <div class="card-body">
  97.                         <div id="upload_box__file" class="row mb-2">
  98.                             <div class="col-2" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.content.file.upload_file'|trans }}"><span>{{ 'admin.content.file.add_file'|trans }}</span><i class="fa fa-question-circle fa-lg ms-1"></i></div>
  99.                             <div class="col mb-3">
  100.                                 <div class="mb-2">
  101.                                     {{ form_widget(form.file) }}{# TODO input type="file" の装飾 #}
  102.                                 </div>
  103.                                 <div class="mb-2">
  104.                                     <a class="btn btn-ec-conversion action-upload" href="javascript:;" onclick="eccube.fileManager.setTreeStatus('tree_status');eccube.setModeAndSubmit('upload','',''); return false;">{{ 'admin.common.upload'|trans }}</a>
  105.                                 </div>
  106.                             </div>
  107.                         </div>
  108.                         <div class="row mb-2">
  109.                             <div class="col-2"><span>{{ 'admin.content.file.add_directory'|trans }}</span></div>
  110.                             <div class="col">
  111.                                 <div class="row">
  112.                                     <div class="col-3">
  113.                                         {{ form_widget(form.create_file, {attr: {placeholder: 'admin.content.file.directory_name'}}) }}
  114.                                     </div>
  115.                                     <div class="col-auto">
  116.                                         <a class="btn btn-ec-regular action-create" href="javascript:" onclick="eccube.fileManager.setTreeStatus('tree_status');eccube.setModeAndSubmit('create','',''); return false;">{{ 'admin.common.create__new'|trans }}</a>
  117.                                     </div>
  118.                                 </div>
  119.                             </div>
  120.                         </div>
  121.                         {% for error in errors %}
  122.                             <p class="text-danger errormsg">{{ error.message|trans }}</p>
  123.                         {% endfor %}
  124.                     </div>
  125.                 </div>
  126.             </div>
  127.             <div class="c-contentsArea__cols">
  128.                 <div class="c-contentsArea__primaryCol">
  129.                     <div class="c-primaryCol">
  130.                         <div class="card rounded border-0 mb-4">
  131.                             <div class="card-header">
  132.                                 <div class="row">
  133.                                     <div class="col-8"><span class="card-title">{{ 'admin.content.file.file_list__card_title'|trans }}</span></div>
  134.                                     <div class="col-4 text-end"><a data-bs-toggle="collapse" href="#fileList" aria-expanded="false" aria-controls="fileList"><i class="fa fa-angle-up fa-lg"></i></a></div>
  135.                                 </div>
  136.                             </div>
  137.                             <div class="collapse show ec-cardCollapse" id="fileList">
  138.                                 <div class="card-body p-0">
  139.                                     <table class="table">
  140.                                         <tbody>
  141.                                         {% if tpl_is_top_dir != false %}
  142.                                             <tr>
  143.                                                 <td class="align-middle text-center" style="width: 10%"><i class="fa fa-folder-o fa-2x"></i></td>
  144.                                                 <td class="align-middle"><a href="javascript:;" onclick="eccube.fileManager.openFolder('{{ tpl_parent_dir }}')"><i class="fa fa-reply"></i></a></td>
  145.                                                 <td class="align-middle">&nbsp;</td>
  146.                                                 <td class="align-middle">&nbsp;</td>
  147.                                                 <td class="align-middle">&nbsp;</td>
  148.                                             </tr>
  149.                                         {% endif %}
  150.                                         {% for file in arrFileList %}
  151.                                             <tr id="{{ loop.index }}">
  152.                                                 <td class="align-middle text-center">
  153.                                                     {% if file.is_dir %}
  154.                                                         <i class="fa fa-folder-o fa-2x"></i>
  155.                                                     {% else %}
  156.                                                         {% if file.extension|file_ext_icon({}, true) == 'fa-file-image-o' %}
  157.                                                             <div class="d-inline-block p-3 bg-light"
  158.                                                                  style="background: no-repeat center center;
  159.                                                                     background-image: url('{{ asset(file.file_path|slice(1)|escape('css'), 'user_data') }}');
  160.                                                                     background-size: contain; width: 49px; height: 57px;">
  161.                                                             </div>
  162.                                                         {% else %}
  163.                                                             <div class="d-inline-block p-3 bg-light">
  164.                                                                 {{ file.extension|file_ext_icon({class: "fa-2x"}) }}
  165.                                                             </div>
  166.                                                         {% endif %}
  167.                                                     {% endif %}
  168.                                                 </td>
  169.                                                 <td class="align-middle">
  170.                                                     {% if file.is_dir %}
  171.                                                         <a href="javascript:;" onclick="eccube.setValue('tree_select_file', '{{ file.file_path }}', 'form1'); eccube.fileManager.selectFile('{{ loop.index }}', '#808080');eccube.setModeAndSubmit('move','',''); return false;">{{ file.file_name }}</a>
  172.                                                     {% else %}
  173.                                                         {{ file.file_name }}
  174.                                                     {% endif %}
  175.                                                 </td>
  176.                                                 <td class="align-middle">
  177.                                                     {% if not file.is_dir %}
  178.                                                         {{ file.file_size }}
  179.                                                     {% endif %}
  180.                                                 </td>
  181.                                                 <td class="align-middle">
  182.                                                     <span class="updated">{{ file.file_time|date_sec }} {{ 'admin.content.file.updated'|trans }}</span>
  183.                                                     {% if file.is_dir == false %}
  184.                                                         <span class="copy-file-path"><input type="text"  class="form-control" value="{{asset('', 'user_data')}}{{ file.file_path|slice(1) }}"></span>
  185.                                                     {% endif %}
  186.                                                 </td>
  187.                                                 {% if file.is_dir %}
  188.                                                     <td class="align-middle pe-3">
  189.                                                         <div class="text-end">
  190.                                                             <div class="px-1 d-inline-block">
  191.                                                                 <div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.delete'|trans }}">
  192.                                                                     <a class="btn btn-ec-actionIcon action-delete {% if file.is_empty == false %}disabled{% endif %}"
  193.                                                                    data-bs-toggle="modal" data-bs-target="#confirmModal-{{ loop.index }}">
  194.                                                                     <i class="fa fa-close fa-lg text-secondary" aria-hidden="true"></i></a>
  195.                                                                 </div>
  196.                                                                 <div class="modal fade" id="confirmModal-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="confirmModal-{{ loop.index }}" aria-hidden="true">
  197.                                                                     <div class="modal-dialog" role="document">
  198.                                                                         <div class="modal-content">
  199.                                                                             <div class="modal-header">
  200.                                                                                 <h5 class="modal-title fw-bold">{{ 'admin.common.delete_modal__title'|trans }}</h5>
  201.                                                                                 <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
  202.                                                                             </div>
  203.                                                                             <div class="modal-body text-start">
  204.                                                                                 <p class="text-start">{{ 'admin.common.delete_modal__message'|trans({ '%name%': file.file_name }) }}</p>
  205.                                                                             </div>
  206.                                                                             <div class="modal-footer">
  207.                                                                                 <button class="btn btn-ec-sub" type="button" data-bs-dismiss="modal">{{ 'admin.common.cancel'|trans }}</button>
  208.                                                                                 <a class="btn btn-ec-delete" data-confirm="false"
  209.                                                                                    href="{{ url('admin_content_file_delete', { 'select_file': file.file_path}) }}" {{ csrf_token_for_anchor() }} data-method="delete">
  210.                                                                                     {{ 'admin.common.delete'|trans }}
  211.                                                                                 </a>
  212.                                                                             </div>
  213.                                                                         </div>
  214.                                                                     </div>
  215.                                                                 </div>
  216.                                                             </div>
  217.                                                         </div>
  218.                                                     </td>
  219.                                                 {% else %}
  220.                                                     <td class="align-middle pe-3">
  221.                                                         <div class="text-end">
  222.                                                             <div class="px-1 d-inline-block">
  223.                                                                 <a class="btn btn-ec-actionIcon action-copy" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.copy_path'|trans }}">
  224.                                                                     <i class="fas fa-copy fa-lg text-secondary" aria-hidden="true"></i>
  225.                                                                 </a>
  226.                                                             </div>
  227.                                                             <div class="px-1 d-inline-block">
  228.                                                                 <a href="{{ url('admin_content_file_view') }}?file={{ file.file_path|e('url') }}" target="_blank" class="btn btn-ec-actionIcon action-view" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.display'|trans }}">
  229.                                                                     <i class="fa fa-eye fa-lg text-secondary" aria-hidden="true"></i>
  230.                                                                 </a>
  231.                                                             </div>
  232.                                                             <div class="px-1 d-inline-block">
  233.                                                                 <a href="{{ url('admin_content_file_download') }}?select_file={{ file.file_path|e('url') }}" class="btn btn-ec-actionIcon action-download" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.download'|trans }}">
  234.                                                                     <i class="fa fa-cloud-download fa-lg text-secondary" aria-hidden="true"></i>
  235.                                                                 </a>
  236.                                                             </div>
  237.                                                             <div class="px-1 d-inline-block">
  238.                                                                 <div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.delete'|trans }}">
  239.                                                                     <a class="btn btn-ec-actionIcon action-delete" data-bs-toggle="modal" data-bs-target="#confirmModal-{{ loop.index }}">
  240.                                                                         <i class="fa fa-close fa-lg text-secondary" aria-hidden="true"></i>
  241.                                                                     </a>
  242.                                                                 </div>
  243.                                                                 <div class="modal fade" id="confirmModal-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="confirmModal-{{ loop.index }}" aria-hidden="true">
  244.                                                                     <div class="modal-dialog" role="document">
  245.                                                                         <div class="modal-content">
  246.                                                                             <div class="modal-header">
  247.                                                                                 <h5 class="modal-title fw-bold">{{ 'admin.common.delete_modal__title'|trans }}</h5>
  248.                                                                                 <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
  249.                                                                             </div>
  250.                                                                             <div class="modal-body text-start">
  251.                                                                                 <p class="text-start">{{ 'admin.common.delete_modal__message'|trans({ '%name%': file.file_name }) }}</p>
  252.                                                                             </div>
  253.                                                                             <div class="modal-footer">
  254.                                                                                 <button class="btn btn-ec-sub" type="button" data-bs-dismiss="modal">{{ 'admin.common.cancel'|trans }}</button>
  255.                                                                                 <a class="btn btn-ec-delete" data-confirm="false"
  256.                                                                                    href="{{ url('admin_content_file_delete', { 'select_file': file.file_path}) }}" {{ csrf_token_for_anchor() }} data-method="delete">
  257.                                                                                     {{ 'admin.common.delete'|trans }}
  258.                                                                                 </a>
  259.                                                                             </div>
  260.                                                                         </div>
  261.                                                                     </div>
  262.                                                                 </div>
  263.                                                             </div>
  264.                                                         </div>
  265.                                                     </td>
  266.                                                 {% endif %}
  267.                                             </tr>
  268.                                         {% endfor %}
  269.                                         </tbody>
  270.                                     </table>
  271.                                 </div>
  272.                             </div>
  273.                         </div>
  274.                     </div>
  275.                 </div>
  276.                 <div class="c-contentsArea__secondaryCol">
  277.                     <div class="c-secondaryCol">
  278.                         <div class="card rounded border-0 mb-4">
  279.                             <div class="card-header">
  280.                                 <div class="row">
  281.                                     <div class="col-8"><span class="card-title">{{ 'admin.content.file.directory_tree'|trans }}</span></div>
  282.                                     <div class="col-4 text-end"><a data-bs-toggle="collapse" href="#folderDirectory" aria-expanded="false" aria-controls="folderDirectory"><i class="fa fa-lg fa-angle-down"></i></a></div>
  283.                                 </div>
  284.                             </div>
  285.                             <div class="collapse show ec-cardCollapse" id="folderDirectory">
  286.                                 <div class="card-body">
  287.                                     <div class="c-directoryTree--folder mb-3">
  288.                                         <ul id="directory_userdata" class="list-unstyled">
  289.                                             <li>
  290.                                                 <label class="collapsed" data-bs-toggle="collapse" href="#directory_userdata" aria-expanded="false" aria-controls="directory_userdata">user_data</label>
  291.                                             </li>
  292.                                         </ul>
  293.                                     </div>
  294.                                 </div>
  295.                             </div>
  296.                         </div>
  297.                     </div>
  298.                 </div>
  299.             </div>
  300.         </div>
  301.     </form>
  302. {% endblock %}