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

Remove JQuery from all setting controllers

Browse Source
This commit is contained in:
jdescottes 2015-02-26 01:25:33 +01:00
parent bcb709300c
commit bab3d6677e
8 changed files with 94 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/css/settings.css
View File

@ -184,12 +184,15 @@
border: gold 1px solid;
}
/************************************************************************************************/
/* Save panel */
/************************************************************************************************/
.anonymous .save-public-section,
.anonymous #save-online-button {
display : none;
}
.save-field {
width: 100%;
}

3
src/js/controller/settings/AbstractSettingController.js
View File

@ -3,6 +3,9 @@
ns.AbstractSettingController = function () {};
ns.AbstractSettingController.prototype.addEventListener = function (el, type, callback) {
if (typeof el === 'string') {
el = document.querySelector(el);
}
pskl.utils.Event.addEventListener(el, type, callback, this);
};

2
src/js/controller/settings/ApplicationSettingsController.js
View File

@ -30,7 +30,7 @@
var tiledPreview = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
var tiledPreviewCheckbox = document.querySelector('.tiled-preview-checkbox');
if (tiledPreview) {
tiledPreviewCheckbox.setAttribute('checked', true);
tiledPreviewCheckbox.setAttribute('checked', tiledPreview);
}
this.addEventListener(tiledPreviewCheckbox, 'change', this.onTiledPreviewChange_);

57
src/js/controller/settings/ImportController.js
View File

@ -6,27 +6,41 @@
this.importedImage_ = null;
};
pskl.utils.inherit(ns.ImportController, pskl.controller.settings.AbstractSettingController);
ns.ImportController.prototype.init = function () {
this.browseLocalButton = document.querySelector('.browse-local-button');
this.browseLocalButton.addEventListener('click', this.onBrowseLocalClick_.bind(this));
this.hiddenFileInput = document.querySelector('[name=file-upload-input]');
this.addEventListener(this.hiddenFileInput, 'change', this.onFileUploadChange_);
this.hiddenFileInput = $('[name=file-upload-input]');
this.hiddenFileInput.change(this.onFileUploadChange_.bind(this));
this.hiddenOpenPiskelInput = document.querySelector('[name=open-piskel-input]');
this.addEventListener(this.hiddenOpenPiskelInput, 'change', this.onOpenPiskelChange_);
this.fileInputButton = $('.file-input-button');
this.fileInputButton.click(this.onFileInputClick_.bind(this));
this.addEventListener('.browse-local-button', 'click', this.onBrowseLocalClick_);
this.addEventListener('.file-input-button', 'click', this.onFileInputClick_);
this.addEventListener('.open-piskel-button', 'click', this.onOpenPiskelClick_);
this.hiddenOpenPiskelInput = $('[name=open-piskel-input]');
this.hiddenOpenPiskelInput.change(this.onOpenPiskelChange_.bind(this));
this.openPiskelInputButton = $('.open-piskel-button');
this.openPiskelInputButton.click(this.onOpenPiskelClick_.bind(this));
this.prevSessionContainer = $('.previous-session');
this.previousSessionTemplate_ = pskl.utils.Template.get("previous-session-info-template");
this.fillRestoreSession_();
};
ns.ImportController.prototype.initRestoreSession_ = function () {
var html = '';
var previousInfo = pskl.app.backupService.getPreviousPiskelInfo();
if (previousInfo) {
var previousSessionTemplate_ = pskl.utils.Template.get("previous-session-info-template");
var date = pskl.utils.DateUtils.format(previousInfo.date, "{{H}}:{{m}} - {{Y}}/{{M}}/{{D}}");
html = pskl.utils.Template.replace(previousSessionTemplate_, {
name : previousInfo.name,
date : date
});
this.addEventListener('.restore-session-button', 'click', this.onRestorePreviousSessionClick_);
} else {
html = "No piskel backup was found on this browser.";
}
document.querySelector('.previous-session').innerHTML = html;
};
ns.ImportController.prototype.closeDrawer_ = function () {
$.publish(Events.CLOSE_SETTINGS_DRAWER);
};
@ -39,7 +53,7 @@
};
ns.ImportController.prototype.onOpenPiskelChange_ = function (evt) {
var files = this.hiddenOpenPiskelInput.get(0).files;
var files = this.hiddenOpenPiskelInput.files;
if (files.length == 1) {
this.openPiskelFile_(files[0]);
}
@ -66,7 +80,7 @@
};
ns.ImportController.prototype.importPictureFromFile_ = function () {
var files = this.hiddenFileInput.get(0).files;
var files = this.hiddenFileInput.files;
if (files.length == 1) {
var file = files[0];
if (this.isImage_(file)) {
@ -90,21 +104,6 @@
return (/\.piskel$/).test(file.name);
};
ns.ImportController.prototype.fillRestoreSession_ = function () {
var previousInfo = pskl.app.backupService.getPreviousPiskelInfo();
if (previousInfo) {
var info = {
name : previousInfo.name,
date : pskl.utils.DateUtils.format(previousInfo.date, "{{H}}:{{m}} - {{Y}}/{{M}}/{{D}}")
};
this.prevSessionContainer.html(pskl.utils.Template.replace(this.previousSessionTemplate_, info));
$(".restore-session-button").click(this.onRestorePreviousSessionClick_.bind(this));
} else {
this.prevSessionContainer.html("No piskel backup was found on this browser.");
}
};
ns.ImportController.prototype.onRestorePreviousSessionClick_ = function () {
if (window.confirm('This will erase your current workspace. Continue ?')) {
pskl.app.backupService.load();

76
src/js/controller/settings/SaveController.js
View File

@ -5,57 +5,57 @@
this.piskelController = piskelController;
};
pskl.utils.inherit(ns.SaveController, pskl.controller.settings.AbstractSettingController);
/**
* @public
*/
ns.SaveController.prototype.init = function () {
// Only available in app-engine mode ...
this.piskelName = document.querySelector('.piskel-name');
this.saveOnlineStatus = $('#save-online-status');
this.saveFileStatus = $('#save-file-status');
// timestamp used to generate unique name when saving as .piskel
this.timestamp = new Date();
// Only available in app-engine mode
this.piskelName = document.querySelector('.piskel-name');
this.saveOnlineStatus = document.querySelector('#save-online-status');
this.saveFileStatus = document.querySelector('#save-file-status');
var descriptor = this.piskelController.getPiskel().getDescriptor();
this.descriptionInput = $('#save-description');
this.descriptionInput.val(descriptor.description);
this.descriptionInput = document.querySelector('#save-description');
this.descriptionInput.value = descriptor.description;
this.isPublicCheckbox = $('input[name=save-public-checkbox]');
this.isPublicCheckbox.prop('checked', descriptor.isPublic);
this.isPublicCheckbox = document.querySelector('input[name=save-public-checkbox]');
if (descriptor.isPublic) {
this.isPublicCheckbox.setAttribute('checked', true);
}
this.saveFileButton = $('#save-file-button');
this.saveFileButton.click(this.saveFile_.bind(this));
this.addEventListener('#save-file-button', 'click', this.saveFile_);
this.addEventListener('#save-browser-button', 'click', this.saveLocal_);
this.saveLocalButton = $('#save-browser-button');
this.saveLocalButton.click(this.saveLocal_.bind(this));
this.saveOnlineButton = document.querySelector('#save-online-button');
this.addEventListener(this.saveOnlineButton, 'click', this.saveOnline_);
this.saveOnlineButton = $('#save-online-button');
this.saveOnlineButton.click(this.saveOnline_.bind(this));
this.addEventListener('form[name=save-form]', 'submit', this.onSaveFormSubmit_);
this.saveForm = $('form[name=save-form]');
this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
this.nameInput = document.querySelector('#save-name');
this.nameInput.value = descriptor.name;
this.addEventListener(this.nameInput, 'keyup', this.updateLocalStatusFilename_);
this.nameInput = $('#save-name');
this.nameInput.val(descriptor.name);
this.nameInput.keyup(this.updateLocalStatusFilename_.bind(this));
if (!pskl.app.isLoggedIn()) {
this.saveOnlineButton.hide();
$('.save-public-section').hide();
this.saveOnlineStatus.html(pskl.utils.Template.get('save-please-login-partial'));
if (pskl.app.isLoggedIn()) {
this.saveOnlineStatus.innerHTML = pskl.utils.Template.get('save-online-status-partial');
} else {
this.saveOnlineStatus.html(pskl.utils.Template.get('save-online-status-partial'));
this.saveOnlineStatus.innerHTML = pskl.utils.Template.get('save-please-login-partial');
var container = document.querySelector('.setting-save-section');
container.classList.add('anonymous');
}
this.updateLocalStatusFilename_();
};
ns.SaveController.prototype.updateLocalStatusFilename_ = function () {
this.saveFileStatus.html(pskl.utils.Template.getAndReplace('save-file-status-template', {
this.saveFileStatus.innerHTML = pskl.utils.Template.getAndReplace('save-file-status-template', {
name : this.getLocalFilename_()
}));
});
};
ns.SaveController.prototype.getLocalFilename_ = function () {
@ -85,7 +85,7 @@
if (name) {
var description = this.getDescription();
var isPublic = !!this.isPublicCheckbox.prop('checked');
var isPublic = this.isPublic_();
var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
this.piskelController.getPiskel().setDescriptor(descriptor);
@ -93,7 +93,7 @@
this.beforeSaving_();
this.saveOnlineButton.attr('disabled', true);
this.saveOnlineStatus.html('Saving ...');
this.saveOnlineStatus.innerHTML = 'Saving ...';
pskl.app.storageService.store({
success : this.onSaveSuccess_.bind(this),
@ -132,11 +132,15 @@
};
ns.SaveController.prototype.getName = function () {
return this.nameInput.val();
return this.nameInput.value;
};
ns.SaveController.prototype.getDescription = function () {
return this.descriptionInput.val();
return this.descriptionInput.value;
};
ns.SaveController.prototype.isPublic_ = function () {
return !!this.isPublicCheckbox.checked;
};
ns.SaveController.prototype.beforeSaving_ = function () {
@ -150,7 +154,7 @@
ns.SaveController.prototype.updatePiskelDescriptor_ = function () {
var name = this.getName();
var description = this.getDescription();
var isPublic = !!this.isPublicCheckbox.prop('checked');
var isPublic = this.isPublic_();
var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
this.piskelController.getPiskel().setDescriptor(descriptor);
@ -168,7 +172,7 @@
ns.SaveController.prototype.afterOnlineSaving_ = function () {
this.saveOnlineButton.attr('disabled', false);
this.saveOnlineStatus.html('');
this.saveOnlineStatus.innerHTML = '';
this.afterSaving_();
};

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

@ -10,6 +10,8 @@
this.piskelController = piskelController;
};
pskl.utils.inherit(ns.GifExportController, pskl.controller.settings.AbstractSettingController);
/**
* List of Resolutions applicable for Gif export
* @static
@ -30,17 +32,17 @@
this.previewContainerEl = document.querySelector(".gif-export-preview");
this.selectResolutionEl = document.querySelector(".gif-export-select-resolution");
this.uploadButton = $(".gif-upload-button");
this.uploadButton.click(this.onUploadButtonClick_.bind(this));
this.uploadButton = document.querySelector(".gif-upload-button");
this.addEventListener(this.uploadButton, 'click', this.onUploadButtonClick_);
this.downloadButton = $(".gif-download-button");
this.downloadButton.click(this.onDownloadButtonClick_.bind(this));
this.downloadButton = document.querySelector(".gif-download-button");
this.addEventListener(this.downloadButton, 'click', this.onDownloadButtonClick_);
this.createOptionElements_();
};
ns.GifExportController.prototype.onUploadButtonClick_ = function (evt) {
evt.originalEvent.preventDefault();
evt.preventDefault();
var zoom = this.getSelectedZoom_(),
fps = this.piskelController.getFPS();

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

@ -7,14 +7,18 @@
this.piskelController = piskelController;
};
pskl.utils.inherit(ns.PngExportController, pskl.controller.settings.AbstractSettingController);
ns.PngExportController.prototype.init = function () {
this.previewContainerEl = document.querySelector(".png-export-preview");
this.previewContainerEl = document.querySelector('.png-export-preview');
this.pngFilePrefixInput = document.getElementById('zip-prefix-name');
this.pngFilePrefixInput.value = 'sprite_';
document.querySelector(".png-download-button").addEventListener('click', this.onPngDownloadButtonClick_.bind(this));
var downloadButton = document.querySelector(".png-download-button");
this.addEventListener(downloadButton, 'click', this.onPngDownloadButtonClick_);
document.querySelector(".zip-generate-button").addEventListener('click', this.onZipButtonClick_.bind(this));
var zipButton = document.querySelector(".zip-generate-button");
this.addEventListener(zipButton, 'click', this.onZipButtonClick_);
this.updatePreview_(this.getFramesheetAsCanvas().toDataURL("image/png"));
};
@ -29,7 +33,7 @@
ns.PngExportController.prototype.onZipButtonClick_ = function () {
var zip = new window.JSZip();
for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
for (var i = 0 ; i < this.piskelController.getFrameCount() ; i++) {
var frame = this.piskelController.getFrameAt(i);
var canvas = this.getFrameAsCanvas_(frame);
var basename = this.pngFilePrefixInput.value;

4
src/templates/settings/save.html
View File

@ -1,4 +1,4 @@
<div class="settings-section">
<div class="settings-section setting-save-section">
<form action="" method="POST" name="save-form">
<div class="settings-title">Describe your piskel</div>
<div class="settings-item">
@ -9,7 +9,7 @@
<div class="settings-form-section">
<textarea id="save-description" class="save-field textfield" placeholder="Description ..."></textarea>
</div>
<div class="settings-form-section save-public-section">
<div class="settings-form-section save-public-section">
<label class="row">
Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
</label>