2013-10-11 02:04:40 +04:00
|
|
|
(function () {
|
|
|
|
var ns = $.namespace('pskl.controller.settings');
|
2013-10-22 09:40:08 +04:00
|
|
|
var DEFAULT_FILE_STATUS = 'No file selected ...';
|
2013-10-24 01:34:09 +04:00
|
|
|
var PREVIEW_HEIGHT = 60;
|
|
|
|
|
2013-10-17 01:14:41 +04:00
|
|
|
ns.ImportController = function (piskelController) {
|
|
|
|
this.piskelController = piskelController;
|
2013-10-22 09:40:08 +04:00
|
|
|
this.importedImage_ = null;
|
2013-10-17 01:14:41 +04:00
|
|
|
};
|
2013-10-11 02:04:40 +04:00
|
|
|
|
2013-10-17 01:14:41 +04:00
|
|
|
ns.ImportController.prototype.init = function () {
|
2013-11-02 14:02:03 +04:00
|
|
|
this.importForm = $('[name=import-form]');
|
|
|
|
this.hiddenFileInput = $('[name=file-upload-input]');
|
|
|
|
this.fileInputButton = $('.file-input-button');
|
|
|
|
this.fileInputStatus = $('.file-input-status');
|
2013-10-22 09:40:08 +04:00
|
|
|
this.fileInputStatus.html(DEFAULT_FILE_STATUS);
|
|
|
|
|
2013-11-02 14:02:03 +04:00
|
|
|
this.importPreview = $('.import-section-preview');
|
2013-10-24 01:34:09 +04:00
|
|
|
|
2013-11-02 14:02:03 +04:00
|
|
|
this.resizeWidth = $('[name=resize-width]');
|
|
|
|
this.resizeHeight = $('[name=resize-height]');
|
|
|
|
this.smoothResize = $('[name=smooth-resize-checkbox]');
|
|
|
|
this.submitButton = $('[name=import-submit]');
|
2013-10-22 09:40:08 +04:00
|
|
|
|
2013-10-17 01:14:41 +04:00
|
|
|
this.importForm.submit(this.onImportFormSubmit_.bind(this));
|
2013-10-22 09:40:08 +04:00
|
|
|
this.hiddenFileInput.change(this.onFileUploadChange_.bind(this));
|
|
|
|
this.fileInputButton.click(this.onFileInputClick_.bind(this));
|
2013-10-23 03:01:35 +04:00
|
|
|
|
|
|
|
this.resizeWidth.keyup(this.onResizeInputKeyUp_.bind(this, 'width'));
|
|
|
|
this.resizeHeight.keyup(this.onResizeInputKeyUp_.bind(this, 'height'));
|
2013-10-17 01:14:41 +04:00
|
|
|
};
|
|
|
|
|
2013-10-18 10:01:25 +04:00
|
|
|
ns.ImportController.prototype.reset_ = function () {
|
|
|
|
this.importForm.get(0).reset();
|
2013-10-22 09:40:08 +04:00
|
|
|
this.fileInputStatus.html(DEFAULT_FILE_STATUS);
|
2013-10-23 03:01:35 +04:00
|
|
|
$.publish(Events.CLOSE_SETTINGS_DRAWER);
|
|
|
|
};
|
2013-10-22 09:40:08 +04:00
|
|
|
|
2013-10-23 03:01:35 +04:00
|
|
|
ns.ImportController.prototype.onResizeInputKeyUp_ = function (from, evt) {
|
|
|
|
if (this.importedImage_) {
|
|
|
|
this.synchronizeResizeFields_(evt.target.value, from);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.ImportController.prototype.synchronizeResizeFields_ = function (value, from) {
|
|
|
|
value = parseInt(value, 10);
|
|
|
|
if (isNaN(value)) {
|
|
|
|
value = 0;
|
|
|
|
}
|
|
|
|
var height = this.importedImage_.height, width = this.importedImage_.width;
|
|
|
|
if (from === 'width') {
|
|
|
|
this.resizeHeight.val(Math.round(value * height / width));
|
|
|
|
} else {
|
|
|
|
this.resizeWidth.val(Math.round(value * width / height));
|
|
|
|
}
|
2013-10-18 10:01:25 +04:00
|
|
|
};
|
|
|
|
|
2013-10-17 01:14:41 +04:00
|
|
|
ns.ImportController.prototype.onImportFormSubmit_ = function (evt) {
|
|
|
|
evt.originalEvent.preventDefault();
|
2013-10-22 09:40:08 +04:00
|
|
|
this.importImageToPiskel_();
|
2013-10-18 10:01:25 +04:00
|
|
|
};
|
|
|
|
|
2013-10-22 09:40:08 +04:00
|
|
|
ns.ImportController.prototype.onFileUploadChange_ = function (evt) {
|
|
|
|
this.importFromFile_();
|
|
|
|
};
|
2013-10-18 10:01:25 +04:00
|
|
|
|
2013-10-22 09:40:08 +04:00
|
|
|
ns.ImportController.prototype.onFileInputClick_ = function (evt) {
|
|
|
|
this.hiddenFileInput.click();
|
2013-10-18 10:01:25 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
ns.ImportController.prototype.importFromFile_ = function () {
|
2013-10-22 09:40:08 +04:00
|
|
|
var files = this.hiddenFileInput.get(0).files;
|
2013-10-17 01:14:41 +04:00
|
|
|
if (files.length == 1) {
|
|
|
|
var file = files[0];
|
|
|
|
if (this.isImage_(file)) {
|
|
|
|
this.readImageFile_(file);
|
2013-10-24 01:34:09 +04:00
|
|
|
this.enableDisabledSections_();
|
2013-10-17 01:14:41 +04:00
|
|
|
} else {
|
2013-10-18 10:01:25 +04:00
|
|
|
this.reset_();
|
2013-11-02 14:02:03 +04:00
|
|
|
throw 'File is not an image : ' + file.type;
|
2013-10-17 01:14:41 +04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2013-10-24 01:34:09 +04:00
|
|
|
ns.ImportController.prototype.enableDisabledSections_ = function () {
|
2013-10-23 03:01:35 +04:00
|
|
|
this.resizeWidth.removeAttr('disabled');
|
|
|
|
this.resizeHeight.removeAttr('disabled');
|
|
|
|
this.smoothResize.removeAttr('disabled');
|
2013-10-24 01:34:09 +04:00
|
|
|
this.submitButton.removeAttr('disabled');
|
|
|
|
|
|
|
|
this.fileInputButton.removeClass('button-primary');
|
|
|
|
this.fileInputButton.blur();
|
|
|
|
|
|
|
|
$('.import-section-disabled').removeClass('import-section-disabled');
|
2013-10-23 03:01:35 +04:00
|
|
|
};
|
|
|
|
|
2013-10-17 01:14:41 +04:00
|
|
|
ns.ImportController.prototype.readImageFile_ = function (imageFile) {
|
2013-10-18 10:01:25 +04:00
|
|
|
pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this));
|
2013-10-17 01:14:41 +04:00
|
|
|
};
|
|
|
|
|
2013-10-18 10:01:25 +04:00
|
|
|
/**
|
|
|
|
* Create an image from the given source (url or data-url), and onload forward to onImageLoaded
|
|
|
|
* TODO : should be a generic utility method, should take a callback
|
|
|
|
* @param {String} imageSource url or data-url, will be used as src for the image
|
|
|
|
*/
|
|
|
|
ns.ImportController.prototype.processImageSource_ = function (imageSource) {
|
2013-10-22 09:40:08 +04:00
|
|
|
this.importedImage_ = new Image();
|
|
|
|
this.importedImage_.onload = this.onImageLoaded_.bind(this);
|
|
|
|
this.importedImage_.src = imageSource;
|
2013-10-17 01:14:41 +04:00
|
|
|
};
|
|
|
|
|
|
|
|
ns.ImportController.prototype.onImageLoaded_ = function (evt) {
|
2013-10-22 09:40:08 +04:00
|
|
|
var w = this.importedImage_.width,
|
|
|
|
h = this.importedImage_.height;
|
|
|
|
var filePath = this.hiddenFileInput.val();
|
|
|
|
var fileName = this.extractFileNameFromPath_(filePath);
|
|
|
|
this.fileInputStatus.html(fileName);
|
2013-10-24 01:34:09 +04:00
|
|
|
|
|
|
|
this.resizeWidth.val(w);
|
|
|
|
this.resizeHeight.val(h);
|
|
|
|
|
2013-11-02 14:02:03 +04:00
|
|
|
this.importPreview.width('auto');
|
|
|
|
this.importPreview.html('');
|
2013-10-24 01:34:09 +04:00
|
|
|
this.importPreview.append(this.createImagePreview_());
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.ImportController.prototype.createImagePreview_ = function () {
|
|
|
|
var image = document.createElement('IMG');
|
|
|
|
image.src = this.importedImage_.src;
|
|
|
|
image.setAttribute('height', PREVIEW_HEIGHT);
|
|
|
|
return image;
|
2013-10-22 09:40:08 +04:00
|
|
|
};
|
2013-10-17 01:14:41 +04:00
|
|
|
|
2013-10-22 09:40:08 +04:00
|
|
|
ns.ImportController.prototype.extractFileNameFromPath_ = function (path) {
|
|
|
|
var parts = [];
|
|
|
|
if (path.indexOf('/') !== -1) {
|
|
|
|
parts = path.split('/');
|
|
|
|
} else if (path.indexOf('\\') !== -1) {
|
|
|
|
parts = path.split('\\');
|
|
|
|
} else {
|
|
|
|
parts = [path];
|
|
|
|
}
|
|
|
|
return parts[parts.length-1];
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.ImportController.prototype.importImageToPiskel_ = function () {
|
|
|
|
if (this.importedImage_) {
|
2013-11-02 14:02:03 +04:00
|
|
|
if (window.confirm('You are about to create a new Piskel, unsaved changes will be lost.')) {
|
2013-10-24 01:34:09 +04:00
|
|
|
var w = this.resizeWidth.val(),
|
|
|
|
h = this.resizeHeight.val(),
|
|
|
|
smoothing = !!this.smoothResize.prop('checked');
|
|
|
|
|
|
|
|
var image = pskl.utils.ImageResizer.resize(this.importedImage_, w, h, smoothing);
|
|
|
|
var frame = pskl.utils.FrameUtils.createFromImage(image);
|
2013-10-22 09:40:08 +04:00
|
|
|
|
2013-11-15 02:03:29 +04:00
|
|
|
var layer = pskl.model.Layer.fromFrames('Layer 1', [frame]);
|
2013-12-11 00:25:36 +04:00
|
|
|
|
|
|
|
var descriptor = new pskl.model.piskel.Descriptor('Imported piskel', '');
|
|
|
|
var piskel = pskl.model.Piskel.fromLayers([layer], descriptor);
|
2013-11-15 02:03:29 +04:00
|
|
|
|
|
|
|
pskl.app.piskelController.setPiskel(piskel);
|
|
|
|
pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
|
|
|
|
this.reset_();
|
2013-10-23 03:01:35 +04:00
|
|
|
}
|
2013-10-22 09:40:08 +04:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2013-10-17 01:14:41 +04:00
|
|
|
ns.ImportController.prototype.isImage_ = function (file) {
|
|
|
|
return file.type.indexOf('image') === 0;
|
|
|
|
};
|
2013-10-11 02:04:40 +04:00
|
|
|
|
|
|
|
})();
|