From cfd3773a2b727c419356fc61ef5d08160104b73d Mon Sep 17 00:00:00 2001
From: juliandescottes <julian.descottes@gmail.com>
Date: Sun, 8 Oct 2017 19:23:50 +0200
Subject: [PATCH] Issue #751 - add repeat checkbox to GIF export panel

---
 .../settings/exportimage/GifExportController.js   | 15 +++++++++++++++
 src/js/utils/UserSettings.js                      |  2 ++
 src/templates/settings/export/gif.html            |  4 ++++
 3 files changed, 21 insertions(+)

diff --git a/src/js/controller/settings/exportimage/GifExportController.js b/src/js/controller/settings/exportimage/GifExportController.js
index 61d9f9e..c010474 100644
--- a/src/js/controller/settings/exportimage/GifExportController.js
+++ b/src/js/controller/settings/exportimage/GifExportController.js
@@ -18,9 +18,14 @@
     this.previewContainerEl = document.querySelector('.gif-export-preview');
     this.uploadButton = document.querySelector('.gif-upload-button');
     this.downloadButton = document.querySelector('.gif-download-button');
+    this.repeatCheckbox = document.querySelector('.gif-repeat-checkbox');
+
+    // Initialize repeatCheckbox state
+    this.repeatCheckbox.checked = this.getRepeatSetting_();
 
     this.addEventListener(this.uploadButton, 'click', this.onUploadButtonClick_);
     this.addEventListener(this.downloadButton, 'click', this.onDownloadButtonClick_);
+    this.addEventListener(this.repeatCheckbox, 'change', this.onRepeatCheckboxChange_);
 
     var currentColors = pskl.app.currentColorsService.getCurrentColors();
     var tooManyColors = currentColors.length >= MAX_GIF_COLORS;
@@ -108,6 +113,7 @@
       width: width * zoom,
       height: height * zoom,
       preserveColors : preserveColors,
+      repeat: this.getRepeatSetting_() ? 0 : 1,
       transparent : transparent
     });
 
@@ -152,6 +158,15 @@
     return transparentColor;
   };
 
+  ns.GifExportController.prototype.onRepeatCheckboxChange_ = function () {
+    var checked = this.repeatCheckbox.checked;
+    pskl.UserSettings.set(pskl.UserSettings.EXPORT_GIF_REPEAT, checked);
+  };
+
+  ns.GifExportController.prototype.getRepeatSetting_ = function () {
+    return pskl.UserSettings.get(pskl.UserSettings.EXPORT_GIF_REPEAT);
+  };
+
   ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
     if (imageUrl) {
       var linkTpl = '<a class="highlight" href="{{link}}" target="_blank">{{shortLink}}</a>';
diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js
index d0899e5..0dcb4b4 100644
--- a/src/js/utils/UserSettings.js
+++ b/src/js/utils/UserSettings.js
@@ -17,6 +17,7 @@
     LAYER_OPACITY : 'LAYER_OPACITY',
     EXPORT_SCALE: 'EXPORT_SCALE',
     EXPORT_TAB: 'EXPORT_TAB',
+    EXPORT_GIF_REPEAT: 'EXPORT_GIF_REPEAT',
     PEN_SIZE : 'PEN_SIZE',
     RESIZE_SETTINGS: 'RESIZE_SETTINGS',
     COLOR_FORMAT: 'COLOR_FORMAT',
@@ -41,6 +42,7 @@
       'LAYER_PREVIEW' : true,
       'EXPORT_SCALE' : 1,
       'EXPORT_TAB' : 'gif',
+      'EXPORT_GIF_REPEAT' : true,
       'PEN_SIZE' : 1,
       'RESIZE_SETTINGS': {
         maintainRatio : true,
diff --git a/src/templates/settings/export/gif.html b/src/templates/settings/export/gif.html
index 29c26cd..a7ba806 100644
--- a/src/templates/settings/export/gif.html
+++ b/src/templates/settings/export/gif.html
@@ -9,6 +9,10 @@
         Too many colors: can not preserve original colors or transparency.
       </div>
     </div>
+    <div class="export-panel-section export-panel-row">
+      <input id="gif-repeat-checkbox" class="gif-repeat-checkbox checkbox-fix" type="checkbox" />
+      <label for="gif-repeat-checkbox">Loop repeatedly</label>
+    </div>
     <div class="export-panel-section export-panel-row">
       <button type="button" class="button button-primary gif-download-button">Download</button>
       <div class="export-info">Download as an animated GIF.</div>