[RFC] Option for batch compression?

[zomars]

Is it doable? Is it considered? I would like to help to make it happen if possible.

[cdowdy]

yeah it's doable.. It'll just take a lot of refactoring.

For the files list you'd see on http://your-site.com/bolt/extensions/tinypng/files I copied bolt's file listing from http://your-site.com/bolt/files which doesn't use a form but multiple anchor tags as buttons that send an ajax request.

That is it Bolt produces something like this in a table body tag where it's file actions are "done":

<tr>
    <td class="filename" colspan="1">
    <!-- filename and popup --> 
    </td>
    <td class="listthumb">
      <!-- thumbnail --> 
    </td>
    <td class="actions">
        <!-- where the "actions" are performed --> 
        <div class="btn-group">
            <a href="#" class="btn btn-default btn-sm" data-bolt-addtostack="FileName.jpg">
                <i class="fa fa-paperclip"></i>
                <span class="visible-sm-inline visible-xs-inline">Stack</span>
                <span class="hidden-sm hidden-xs">Place on stack</span>
            </a>

            <a class="btn dropdown-toggle btn-default btn-sm hidden-xs" style="padding-left: 9px; padding-right: 9px;" data-toggle="dropdown">
                <i class="fa fa-info-circle"></i>
                Options
                <span class="caret"></span>
            </a>

            <ul class="dropdown-menu pull-right hidden-xs">
                <li>
                    <a href="#" data-action="Bolt.files.renameFile('files', '', 'FileName.jpg', this);">

                        <i class="fa fa-keyboard-o"></i>
                        Rename FileName.jpg
                    </a>
                </li>
                <li>
                    <a href="#" data-action="Bolt.files.deleteFile('files', 'FileName.jpg', this);">
                        <i class="fa fa-ban"></i>
                        Delete FileName.jpg
                    </a>
                </li>
                <li>
                    <a href="#" data-action="Bolt.files.duplicateFile('files', 'FileName.jpg')">
                        <i class="fa fa-files-o"></i>
                        Duplicate FileName.jpg
                    </a>
                </li>
            </ul>
        </div>

    </td>
</tr>

and this extension has almost a carbon copy

<tr id="tnypng-list-1" class="tinyPNG-buttons">
    <!-- file name and popup --> 
    <td>
        <i class="fa fa-fw fa-file-image-o"></i>
        <a href="/thumbs/1000x1000r/FileName.jpg" class="magnific" title="Image: FileName.jpg">
            <strong>FileName.jpg</strong>
        </a>
        <br>
        <strong>Location:</strong> Files
    </td>
    <!-- lightbox trigger  -->
    <td class="listthumb">
        <img src="/thumbs/54x40c/FileName.jpg" width="54" height="40" alt="Thumbnail">
    </td>
    <td class="hidden-xs hidden-sm">
        <strong class="imgFileSize">108.96 KB</strong>
        <div class="image-dimensions">800
            <span class="times">×</span>598 px
        </div>
    </td>

    <td>
        <div class="btn-group">
            <button type="button" 
                class="btn btn-default btn-sm tinyPNG-optimize" 
                data-imagepath="FileName.jpg" 
                data-optiparam="none"
                data-toggle="modal" 
                data-target="#working-modal" 
                data-tinypngpath="/bolt/extensions/tinypng/optimize">
                optimize image
            </button>
            <button type="button" 
                class="btn btn-default btn-sm dropdown-toggle tinyPNG-dropdown" 
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
                <li>
                    <a class="tnypng-copy" 
                        href="#" 
                        data-imagepath="FileName.jpg" 
                        data-optiparam="copyright" 
                        data-tinypngpath="/bolt/extensions/tinypng/optimize">Preserve Copyright</a>
                </li>
                <li>
                    <a class="tnypng-create" 
                        href="#" 
                        data-imagepath="FileName.jpg" 
                        data-optiparam="creation" 
                        data-tinypngpath="/bolt/extensions/tinypng/optimize">Preserve Creation</a>
                </li>
                <li>
                    <a class="tnypng-location" 
                        href="#" 
                        data-imagepath="FileName.jpg" 
                        data-optiparam="location" 
                        data-tinypngpath="/bolt/extensions/tinypng/optimize">Preserve Location</a>
                </li>
                <li>
                    <a class="tnypng-allthree" 
                        href="#" 
                        data-imagepath="FileName.jpg" 
                        data-optiparam="all" 
                        data-tinypngpath="/bolt/extensions/tinypng/optimize">Preserve All Three (3)</a>
                </li>
            </ul>
        </div>
        <div class="btn-group">
            <button type="button" 
                class="btn btn-default btn-sm" 
                data-toggle="modal" 
                data-target="#1-renameModal">
                Optimize &amp; Rename
            </button>
        </div>
        <div class="btn-group">
            <button class="btn btn-danger btn-sm tinypng-delete" 
                type="button" 
                data-tinypngpath="/bolt/extensions/tinypng/delete" 
                data-imagepath="FileName.jpg"
                data-rowid="1">
                <i class="fa fa-trash" aria-hidden="true"></i>
                Delete Image
            </button>
        </div>
    </td>
</tr>

So instead of having individual buttons send an ajax request we'd need to rewrite all this to have one containing form for the file list and a checkbox and hide other options.

I'm putting this here for me :) haha

also have to think about how to send multiple files to the Tinypng/tinyjpg api without blocking a bunch of UI "stuff" or slowing down anything or if its possible.

since I'm tinkering with Vue making this a vue component will probably be a ton easier and DRY up the button / options creation a lot.

[zomars]

PR comming soon. I'm playing around with it a little bit.

[cdowdy]

Hey @zomars I moved to Vue for the backend and implemented some batch optimization. Thanks for the Pull and the issue!