Added new checkbox to zip export html template and use layer name as …

…prefix to file names (in ZipExportController) if checkbox is selected.

src/js/controller/settings/exportimage/ZipExportController.js

@@ -12,12 +12,21 @@
     this.pngFilePrefixInput = document.querySelector('.zip-prefix-name');
     this.pngFilePrefixInput.value = 'sprite_';
 
-    this.splitByLayersCheckbox =  document.querySelector('.zip-split-layers-checkbox');
+    this.splitByLayersCheckbox = document.querySelector('.zip-split-layers-checkbox');
+    this.addEventListener(this.splitByLayersCheckbox, 'change', this.onSplitLayersClick_);
+
+    this.useLayerNamesCheckboxContainer = document.querySelector('.use-layer-names-checkbox-container');
+    this.useLayerNamesCheckbox = document.querySelector('.zip-use-layer-names-checkbox');
+    this.useLayerNamesCheckboxContainer.hidden = !this.splitByLayersCheckbox.checked;
 
     var zipButton = document.querySelector('.zip-generate-button');
     this.addEventListener(zipButton, 'click', this.onZipButtonClick_);
   };
 
+  ns.ZipExportController.prototype.onSplitLayersClick_ = function () {
+    this.useLayerNamesCheckboxContainer.hidden = !this.splitByLayersCheckbox.checked;
+  };
+
   ns.ZipExportController.prototype.onZipButtonClick_ = function () {
     var zip = new window.JSZip();
 
@@ -63,6 +72,9 @@
         var basename = this.pngFilePrefixInput.value;
         var frameid = pskl.utils.StringUtils.leftPad(i + 1, framePaddingLength, '0');
         var filename = 'l' + layerid + '_' + basename + frameid + '.png';
+        if (this.useLayerNamesCheckbox.checked) {
+          filename = layer.getName() + '_' + basename + frameid + '.png';
+        }
         zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
       }
     }

src/templates/settings/export/zip.html

@@ -11,7 +11,11 @@
         <input id="zip-split-layers" class="zip-split-layers-checkbox checkbox-fix" type="checkbox" />
         <label for="zip-split-layers">Split by layers</label>
       </div>
+      <div class="use-layer-names-checkbox-container" style="margin: 5px 0;">
+        <input id="zip-use-layer-names" class="zip-use-layer-names-checkbox checkbox-fix" type="checkbox" />
+        <label for="zip-use-layer-names">Index by layer names</label>
+      </div>
       <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
     </div>
   </div>
-</script>
+</script>