mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/juliandescottes/piskel

Browse Source
This commit is contained in:
jdescottes
2015-04-26 22:13:23 +02:00
parent 16362e1b13 6df145455e
commit cf62f2ac0b
9 changed files with 115 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/js/controller/settings/exportimage/GifExportController.js
View File

@@ -29,29 +29,35 @@
this.optionTemplate_ = pskl.utils.Template.get('gif-export-option-template');
this.uploadStatusContainerEl = document.querySelector('.gif-upload-status');
this.previewContainerEl = document.querySelector('.gif-export-preview');
this.selectResolutionEl = document.querySelector('.gif-export-select-resolution');
this.widthInput = document.querySelector('.export-gif-resize-width');
this.heightInput = document.querySelector('.export-gif-resize-height');
this.uploadButton = document.querySelector('.gif-upload-button');
this.addEventListener(this.uploadButton, 'click', this.onUploadButtonClick_);
this.downloadButton = document.querySelector('.gif-download-button');
this.addEventListener(this.downloadButton, 'click', this.onDownloadButtonClick_);
this.createOptionElements_();
this.sizeInputWidget = new pskl.widgets.SizeInput(
this.widthInput, this.heightInput,
this.piskelController.getWidth(), this.piskelController.getHeight());
this.addEventListener(this.uploadButton, 'click', this.onUploadButtonClick_);
this.addEventListener(this.downloadButton, 'click', this.onDownloadButtonClick_);
};
ns.GifExportController.prototype.destroy = function () {
this.sizeInputWidget.destroy();
this.superclass.destroy.call(this);
};
ns.GifExportController.prototype.onUploadButtonClick_ = function (evt) {
evt.preventDefault();
var zoom = this.getSelectedZoom_();
var zoom = this.getZoom_();
var fps = this.piskelController.getFPS();
this.renderAsImageDataAnimatedGIF(zoom, fps, this.uploadImageData_.bind(this));
};
ns.GifExportController.prototype.onDownloadButtonClick_ = function (evt) {
var zoom = this.getSelectedZoom_();
var zoom = this.getZoom_();
var fps = this.piskelController.getFPS();
this.renderAsImageDataAnimatedGIF(zoom, fps, this.downloadImageData_.bind(this));
@@ -92,31 +98,8 @@
this.previewContainerEl.innerHTML = '<div><img style="max-width:32px;"src="' + src + '"/></div>';
};
ns.GifExportController.prototype.getSelectedZoom_ = function () {
return this.selectResolutionEl.value;
};
ns.GifExportController.prototype.createOptionElements_ = function () {
var resolutions = ns.GifExportController.RESOLUTIONS;
for (var i = 0 ; i < resolutions.length ; i++) {
var option = this.createOptionForResolution_(resolutions[i]);
this.selectResolutionEl.appendChild(option);
}
};
ns.GifExportController.prototype.createOptionForResolution_ = function (resolution) {
var zoom = resolution.zoom;
var label = zoom * this.piskelController.getWidth() + 'x' + zoom * this.piskelController.getHeight();
var isSelected = zoom === DEFAULT_EXPORT_ZOOM;
var selected = isSelected ? 'selected' : '';
var optionHTML = pskl.utils.Template.replace(this.optionTemplate_, {
'value' : zoom,
'label' : label,
'selected' : selected
});
return pskl.utils.Template.createFromHTML(optionHTML);
ns.GifExportController.prototype.getZoom_ = function () {
return parseInt(this.widthInput.value, 10) / this.piskelController.getWidth();
};
ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {

5
src/js/controller/settings/exportimage/ImageExportController.js
View File

@@ -11,4 +11,9 @@
this.pngExportController.init();
this.gifExportController.init();
};
ns.ImageExportController.prototype.destroy = function () {
this.pngExportController.destroy();
this.gifExportController.destroy();
};
})();

13
src/js/controller/settings/exportimage/PngExportController.js
View File

@@ -10,7 +10,6 @@
pskl.utils.inherit(ns.PngExportController, pskl.controller.settings.AbstractSettingController);
ns.PngExportController.prototype.init = function () {
this.previewContainerEl = document.querySelector('.png-export-preview');
this.pngFilePrefixInput = document.getElementById('zip-prefix-name');
this.pngFilePrefixInput.value = 'sprite_';
@@ -19,8 +18,6 @@
var zipButton = document.querySelector('.zip-generate-button');
this.addEventListener(zipButton, 'click', this.onZipButtonClick_);
this.updatePreview_(this.getFramesheetAsCanvas().toDataURL('image/png'));
};
ns.PngExportController.prototype.onPngDownloadButtonClick_ = function (evt) {
@@ -65,12 +62,6 @@
return renderer.renderAsCanvas();
};
ns.PngExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
this.updatePreview_(imageUrl);
this.updateStatus_(imageUrl);
this.previewContainerEl.classList.remove('preview-upload-ongoing');
};
ns.PngExportController.prototype.updateStatus_ = function (imageUrl, error) {
if (imageUrl) {
var linkTpl = '<a class="image-link" href="{{link}}" target="_blank">{{shortLink}}</a>';
@@ -84,10 +75,6 @@
}
};
ns.PngExportController.prototype.updatePreview_ = function (src) {
this.previewContainerEl.innerHTML = '<img class="light-picker-background" src="' + src + '"/>';
};
ns.PngExportController.prototype.shorten_ = function (url, maxLength, suffix) {
if (url.length > maxLength) {
url = url.substring(0, maxLength);

55
src/js/controller/settings/resize/ResizeController.js
View File

@@ -16,30 +16,26 @@
ns.ResizeController.prototype.init = function () {
this.widthInput = this.container.querySelector('[name="resize-width"]');
this.heightInput = this.container.querySelector('[name="resize-height"]');
this.widthInput.value = this.piskelController.getWidth();
this.heightInput.value = this.piskelController.getHeight();
this.addEventListener(this.widthInput, 'keyup', this.onSizeInputKeyUp_);
this.addEventListener(this.heightInput, 'keyup', this.onSizeInputKeyUp_);
this.resizeForm = this.container.querySelector('form');
this.addEventListener(this.resizeForm, 'submit', this.onResizeFormSubmit_);
this.resizeContentCheckbox = this.container.querySelector('.resize-content-checkbox');
this.addEventListener(this.resizeContentCheckbox, 'change', this.onResizeContentChange_);
this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox');
this.addEventListener(this.maintainRatioCheckbox, 'change', this.onMaintainRatioChange_);
var initWidth = this.piskelController.getWidth();
var initHeight = this.piskelController.getHeight();
this.sizeInputWidget = new pskl.widgets.SizeInput(this.widthInput, this.heightInput, initWidth, initHeight);
this.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT);
this.lastInput = this.widthInput;
this.addEventListener(this.resizeForm, 'submit', this.onResizeFormSubmit_);
this.addEventListener(this.resizeContentCheckbox, 'change', this.onResizeContentChange_);
this.addEventListener(this.maintainRatioCheckbox, 'change', this.onMaintainRatioChange_);
this.defaultSizeController.init();
};
ns.ResizeController.prototype.destroy = function () {
this.anchorWidget.destroy();
this.sizeInputWidget.destroy();
this.superclass.destroy.call(this);
};
@@ -74,36 +70,9 @@
ns.ResizeController.prototype.onMaintainRatioChange_ = function (evt) {
var target = evt.target;
if (target.checked) {
this.synchronizeSizeInputs_(this.lastInput);
}
};
ns.ResizeController.prototype.onSizeInputKeyUp_ = function (evt) {
var target = evt.target;
if (this.maintainRatioCheckbox.checked) {
this.synchronizeSizeInputs_(target);
}
this.lastInput = target;
};
/**
* Based on the value of the provided sizeInput (considered as emitter)
* update the value of the other sizeInput to match the current width/height ratio
* @param {HTMLElement} origin either widthInput or heightInput
*/
ns.ResizeController.prototype.synchronizeSizeInputs_ = function (sizeInput) {
var value = parseInt(sizeInput.value, 10);
if (isNaN(value)) {
value = 0;
}
var height = this.piskelController.getHeight();
var width = this.piskelController.getWidth();
if (sizeInput === this.widthInput) {
this.heightInput.value = Math.round(value * height / width);
} else if (sizeInput === this.heightInput) {
this.widthInput.value = Math.round(value * width / height);
this.sizeInputWidget.enableSync();
} else {
this.sizeInputWidget.disableSync();
}
};