Issue #751 - add repeat checkbox to GIF export panel

This commit is contained in:
juliandescottes 2017-10-08 19:23:50 +02:00 committed by Julian Descottes
parent 0eface45f1
commit cfd3773a2b
3 changed files with 21 additions and 0 deletions

View File

@ -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>';

View File

@ -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,

View File

@ -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>