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

Issue #446: Add export tabs, move zoom controls

Browse Source
This commit is contained in:
Julian Descottes
2016-05-22 23:37:28 +02:00
parent 32e701aa55
commit f66c2578ab
23 changed files with 396 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/js/controller/settings/exportimage/ExportController.js
View File

@@ -1,48 +1,124 @@
(function () {
var ns = $.namespace('pskl.controller.settings.exportimage');
ns.ImageExportController = function (piskelController) {
this.piskelController = piskelController;
this.pngExportController = new ns.PngExportController(piskelController);
this.gifExportController = new ns.GifExportController(piskelController);
this.cExportController = new ns.CExportController(piskelController);
};
pskl.utils.inherit(ns.ImageExportController, pskl.controller.settings.AbstractSettingController);
ns.ImageExportController.prototype.init = function () {
// Output Scaling Factor
var scalingFactorInput = document.querySelector('.scaling-factor-input');
scalingFactorInput.value = pskl.UserSettings.get(pskl.UserSettings.EXPORT_SCALING);
this.addEventListener(scalingFactorInput, 'change', this.onScalingFactorChange_);
this.addEventListener(scalingFactorInput, 'input', this.onScalingFactorChange_);
this.updateScalingFactorText_(scalingFactorInput.value);
this.pngExportController.init();
this.gifExportController.init();
this.cExportController.init();
};
ns.ImageExportController.prototype.destroy = function () {
this.pngExportController.destroy();
this.gifExportController.destroy();
this.cExportController.destroy();
this.superclass.destroy.call(this);
};
ns.ImageExportController.prototype.onScalingFactorChange_ = function (evt) {
var target = evt.target;
var value = Math.round(parseFloat(target.value));
if (!isNaN(value)) {
this.updateScalingFactorText_(value);
pskl.UserSettings.set(pskl.UserSettings.EXPORT_SCALING, value);
} else {
target.value = pskl.UserSettings.get(pskl.UserSettings.EXPORT_SCALING);
var tabs = {
'png' : {
template : 'templates/settings/export/png.html',
controller : ns.PngExportController
},
'gif' : {
template : 'templates/settings/export/gif.html',
controller : ns.GifExportController
},
'zip' : {
template : 'templates/settings/export/zip.html',
controller : ns.ZipExportController
},
'misc' : {
template : 'templates/settings/export/misc.html',
controller : ns.MiscExportController
}
};
ns.ImageExportController.prototype.updateScalingFactorText_ = function (scale) {
var scalingFactorText = document.querySelector('.scaling-factor-text');
scalingFactorText.innerHTML = scale + 'x';
var DEFAULT_TAB = 'png';
ns.ExportController = function (piskelController) {
this.piskelController = piskelController;
this.onSizeInputChange_ = this.onSizeInputChange_.bind(this);
};
pskl.utils.inherit(ns.ExportController, pskl.controller.settings.AbstractSettingController);
ns.ExportController.prototype.init = function () {
// Initialize zoom controls
this.scaleInput = document.querySelector('.export-scale .scale-input');
this.addEventListener(this.scaleInput, 'change', this.onScaleChange_);
this.addEventListener(this.scaleInput, 'input', this.onScaleChange_);
this.widthInput = document.querySelector('.export-resize .resize-width');
this.heightInput = document.querySelector('.export-resize .resize-height');
var scale = pskl.UserSettings.get(pskl.UserSettings.EXPORT_SCALING);
this.sizeInputWidget = new pskl.widgets.SizeInput({
widthInput : this.widthInput,
heightInput : this.heightInput,
initWidth : this.piskelController.getWidth() * scale,
initHeight : this.piskelController.getHeight() * scale,
onChange : this.onSizeInputChange_
});
this.onSizeInputChange_();
// Initialize tabs and panel
this.exportPanel = document.querySelector('.export-panel');
this.exportTabs = document.querySelector('.export-tabs');
this.addEventListener(this.exportTabs, 'click', this.onTabsClicked_);
this.selectTab(DEFAULT_TAB);
};
ns.ExportController.prototype.destroy = function () {
this.sizeInputWidget.destroy();
this.currentController.destroy();
this.superclass.destroy.call(this);
};
ns.ExportController.prototype.selectTab = function (tabId) {
if (!tabs[tabId] || this.currentTab == tabId) {
return;
}
if (this.currentController) {
this.currentController.destroy();
}
this.exportPanel.innerHTML = pskl.utils.Template.get(tabs[tabId].template);
this.currentController = new tabs[tabId].controller(this.piskelController, this);
this.currentController.init();
this.currentTab = tabId;
var selectedTab = this.exportTabs.querySelector('.selected');
if (selectedTab) {
selectedTab.classList.remove('selected');
}
this.exportTabs.querySelector('[data-tab-id="' + tabId + '"]').classList.add('selected');
};
ns.ExportController.prototype.onTabsClicked_ = function (e) {
var tabId = pskl.utils.Dom.getData(e.target, 'tabId');
this.selectTab(tabId);
};
ns.ExportController.prototype.onScaleChange_ = function () {
var value = parseFloat(this.scaleInput.value);
if (!isNaN(value)) {
if (Math.round(this.getExportZoom()) != value) {
this.sizeInputWidget.setWidth(this.piskelController.getWidth() * value);
}
pskl.UserSettings.set(pskl.UserSettings.EXPORT_SCALING, value);
}
};
ns.ExportController.prototype.updateScaleText_ = function (scale) {
scale = scale.toFixed(1);
var scaleText = document.querySelector('.export-scale .scale-text');
scaleText.innerHTML = scale + 'x';
};
ns.ExportController.prototype.onSizeInputChange_ = function () {
var zoom = this.getExportZoom();
if (isNaN(zoom)) {
return;
}
this.updateScaleText_(zoom);
this.scaleInput.value = Math.round(zoom);
if (zoom >= 1 && zoom <= 32) {
this.onScaleChange_();
}
};
ns.ExportController.prototype.getExportZoom = function () {
return parseInt(this.widthInput.value, 10) / this.piskelController.getWidth();
};
})();