kupshop/admin/templates/list/photos.tpl

{extends "../list.tpl"}

{block "list-filter"}
{/block}

{block "list-wrapper-class"}list-photos{/block}
{block "list-panel-class"}{/block}

{block listTable}
   <div class="row">
      <form data-photos-container class="photos-selection-container">
         <div class="{if $searchWnd}col-md-2 col-sm-3 col-xs-6{else}col-md-1 col-sm-2 col-xs-4{/if}" data-uploader-wrapper>
            <div class="file-uploader" data-file-upload>
               <div id="file-uploader"></div>
            </div>
         </div>

         <div data-file-upload-list
              class="{if $searchWnd}col-md-2 col-sm-3 col-xs-6{else}col-md-1 col-sm-2 col-xs-4{/if} photos photos-file-upload-list"></div>

         {foreach from=$SQL item=image}
            <div class="{if $searchWnd}col-md-2 col-sm-3 col-xs-6{else}col-md-1 col-sm-2 col-xs-4{/if} photos">
               {if getVal('multiSelect')}
                  <div class="checkbox">
                     <input type="checkbox" id="checkbox_{$image.id}" data-photo="{$image.id}" class="check">
                     <label for="checkbox_{$image.id}"></label>
                  </div>
               {/if}

               <div class="thumbnail">
                  {if $image.id_video}
                     <span class="glyphicon glyphicon-film"></span>
                  {/if}
                  {if $image.image_tablet || $image.image_mobile}
                     <span class="glyphicon glyphicon-phone"></span>
                  {/if}
                  <a href="{if getVal('multiSelect')}#photo{else}javascript:{if $searchWnd}searchResult('{$image.id}'){else}nw('photo', '{$image.id}'){/if};{/if}">
                     <img src="{static_url url=$image.img.src}" class="img-rounded img-responsive" alt="">
                  </a>
                  {if $image.descr}
                     <div class="caption text-center list_item">{$image.descr}</div>
                  {/if}
               </div>
            </div>
         {/foreach}
      </form>
   </div>
{/block}

{block bottomPagination}
   <div class="row footer window-btns">
      <div class="col-xs-8">
         {include "utils/pager.tpl"}
      </div>
      <div class="col-xs-4">
         {if getVal('multiSelect')}
            <button class="btn btn-primary btn-block submitPhotosSelectionBtn" data-submit-selection-btn>Vybrat obrázky</button>
         {/if}
      </div>
   </div>
{/block}

{* Image uploader *}
{block js append}
   <script src="/admin/static/fineuploader/jquery.fine-uploader.min.js"></script>
   <script type="text/template" id="qq-simple-thumbnails-template">
      <div class="qq-uploader-selector qq-uploader">
         <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
            <div>
               <span></span>Přesuňte soubory sem
            </div>
         </div>
         <div class="qq-upload-button-selector">
            <p>
               <strong>Nahrát obrázek{ifmodule VIDEOS} nebo video{/ifmodule}</strong>
               <small>podporované formáty jsou .jpg, .jpeg, .png, .webp, .avif, .gif{if {find_module name='videos'}}, .mp4, .mkv, .m4a{/if}</small>
            </p>
         </div>
         <span class="qq-drop-processing-selector qq-drop-processing">
            <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            <span>Zpracovávám soubory...</span>
         </span>

         <div class="qq-upload-list-selector qq-upload-list">
            <div class="qq-upload-instance">
               <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
               <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
               <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Zrušit <span class="fc icons_close"></span></a>
               <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
               <span class="qq-upload-file-selector qq-upload-file"></span>
            </div>
         </div>
      </div>
   </script>
{/block}

<script>
   {block onready append}
   // Keep in sync with engine/admin/templates/adminPhotos.tpl !!
   var $el = $('[data-file-upload]');
   var $fileUploader = $el.find('#file-uploader');
   var extensions = ['jpeg', 'jpg', 'png', 'svg', 'webp', 'avif', 'gif'];
   {ifModule VIDEOS}
   extensions.push('mp4', 'mkv', 'm4a', 'm4v', 'mov');
   {/ifModule}

   var uploaderOptions = {
      template: 'qq-simple-thumbnails-template',
      listElement: $('[data-file-upload-list]')[0],
      thumbnails: {
         placeholders: {
            waitingPath: 'static/fineuploader/placeholders/waiting-generic.png',
            notAvailablePath: 'static/fineuploader/placeholders/not_available-generic.png',
         },
      },
      request: {
         inputName: 'uploader',
         endpoint: 'launch.php?s=list.php&type=photos&acn=uploadImage&photos_type={$smarty.get.photos_type}',
      },
      blobProperties: {
         name: 'filename',
      },
      validation: {
         allowedExtensions: extensions,
      },
      callbacks: {
         onComplete: function(id, name, response) {
            var imageId = response.id;

            if (response.success) {
               var href = '#photo';
               {if !getVal('multiSelect')}
               href = "javascript:{if $searchWnd}searchResult('" + imageId + "'){else}nw('photo', '" + imageId + "'){/if};";
               {/if}

               var $photo = $('<div class="{if $searchWnd}col-md-2 col-sm-3 col-xs-6{else}col-md-1 col-sm-2 col-xs-4{/if} photos">\n' +
                       '{if getVal('multiSelect')}<div class="checkbox">' +
                       '<input type="checkbox"  id="checkbox_' + imageId + '" data-photo="' + imageId + '" class="check" checked="checked">' +
                       '<label for="checkbox_' + imageId + '"></label></div>{/if}' +
                       '             <div class="thumbnail">\n' +
                       '                <a href="' + href + '">\n' +
                       '                   <img src="" class="img-rounded img-responsive" alt="">\n' +
                       '                </a>' +
                       '                <div class="caption text-center list_item">' + name + '</div>' +
                       '             </div>' +
                       '          </div>');
               $fileUploader.fineUploader('drawThumbnail', id, $photo.find('img'), 250, false);
               $('[data-uploader-wrapper]').after($photo);
            }
         },
         onAllComplete: function(succeeded, failed) {
            if (!failed.length) {
               $('[data-file-upload-list]').empty();
            }
         },
      },
      maxConnections: 1,
   };

   $fileUploader.fineUploader(uploaderOptions);

   {if getVal('multiSelect')}
   var $photosContainer = $('[data-photos-container]');
   $photosContainer.on('click', '.thumbnail > a', function(event) {
      event.preventDefault();
      var $checkbox = $(this).closest('.photos').find('input[type=checkbox]');
      $checkbox.prop('checked', !$checkbox.prop('checked'));
   });

   $('[data-submit-selection-btn]').on('click', function(event) {
      event.preventDefault();
      var selectedIDs = [];
      $photosContainer.find('[data-photo]:checked').each(function(index, el) {
         selectedIDs.push($(el).attr('data-photo'));
      });
      searchResult(selectedIDs);
   });
   {/if}

   {/block}
</script>