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

enhancement : use size-input instead of select for export

Browse Source
This commit is contained in:
juliandescottes 2015-04-24 14:55:00 +02:00
parent 5fbadc0d80
commit daceb326c5
9 changed files with 115 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/css/dialogs-import-image.css
View File

@ -6,7 +6,7 @@
display : inline-block;
height : 60px;
width: 60px;
border : 1px dashed #999;
border: 1px dashed #999;
border-radius: 3px;
}
@ -15,15 +15,7 @@
width: 55px;
}
.import-size-field,
.resize-size-field {
width: 50px;
margin-right: 8px;
text-align: right;
}
.import-size-field:nth-of-type(2),
.resize-size-field:nth-of-type(2) {
.import-size-field:nth-of-type(2) {
margin-left: 5px;
}

8
src/css/forms.css
View File

@ -72,4 +72,12 @@
border-color: #666;
border-top-color: #999;
border-bottom-color: #555;
}
.import-size-field,
.resize-size-field,
.export-size-field {
width: 50px;
margin-right: 8px;
text-align: right;
}

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

@ -29,29 +29,33 @@
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 +96,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);

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

@ -16,30 +16,27 @@
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 +71,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();
}
};

61
src/js/widgets/SizeInput.js Normal file
View File

@ -0,0 +1,61 @@
(function () {
var ns = $.namespace('pskl.widgets');
ns.SizeInput = function (widthInput, heightInput, initWidth, initHeight) {
this.widthInput = widthInput;
this.heightInput = heightInput;
this.initWidth = initWidth;
this.initHeight = initHeight;
this.syncEnabled = true;
this.lastInput = this.widthInput;
this.widthInput.value = initWidth;
this.heightInput.value = initHeight;
pskl.utils.Event.addEventListener(this.widthInput, 'keyup', this.onSizeInputKeyUp_, this);
pskl.utils.Event.addEventListener(this.heightInput, 'keyup', this.onSizeInputKeyUp_, this);
};
ns.SizeInput.prototype.destroy = function () {
pskl.utils.Event.removeAllEventListeners(this);
this.widthInput = null;
this.heightInput = null;
this.lastInput = null;
};
ns.SizeInput.prototype.enableSync = function () {
this.syncEnabled = true;
this.synchronize_(this.lastInput);
};
ns.SizeInput.prototype.enableSync = function () {
this.syncEnabled = false;
};
ns.SizeInput.prototype.onSizeInputKeyUp_ = function (evt) {
var target = evt.target;
if (this.syncEnabled) {
this.synchronize_(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.SizeInput.prototype.synchronize_ = function (sizeInput) {
var value = parseInt(sizeInput.value, 10);
if (isNaN(value)) {
value = 0;
}
if (sizeInput === this.widthInput) {
this.heightInput.value = Math.round(value * this.initHeight / this.initWidth);
} else if (sizeInput === this.heightInput) {
this.widthInput.value = Math.round(value * this.initWidth / this.initHeight);
}
};
})();

1
src/piskel-script-list.js
View File

@ -133,6 +133,7 @@
// Widgets
"js/widgets/ColorsList.js",
"js/widgets/HslRgbColorPicker.js",
"js/widgets/SizeInput.js",
// Services
"js/service/LocalStorageService.js",

15
src/templates/settings/export.html
View File

@ -2,7 +2,6 @@
<div class="settings-title">
Export Spritesheet
</div>
<div class="png-export-preview settings-item"></div>
<div class="settings-item">
<span class="settings-description">PNG with all frames side by side.</span>
<button type="button" class="button button-primary png-download-button">Download PNG</button>
@ -26,10 +25,16 @@
<form action="" method="POST" class="gif-export-form">
<div class="settings-item">
<label>Select resolution:</label>
<select class="gif-export-select-resolution"></select>
<script type="text/template" id="gif-export-option-template">
<option value="{{value}}" {{selected}}>{{label}}</option>
</script>
<div class="resize-section">
<span class="resize-section-title">Width</span>
<input type="text" class="textfield export-size-field export-gif-resize-width" name="resize-width"/>
<span>px</span>
</div>
<div class="resize-section">
<span class="resize-section-title">Height</span>
<input type="text" class="textfield export-size-field export-gif-resize-height" name="resize-height"/>
<span>px</span>
</div>
</div>
<div class="settings-item">
<button type="button" class="button button-primary gif-download-button">Download GIF</button>