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 #312 : Improve layer preview tooltip + mutualize tooltip code

Browse Source
This commit is contained in:
jdescottes
2015-10-08 00:47:35 +02:00
parent 1e693e4e36
commit 0021de35b4
10 changed files with 102 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/js/controller/LayersListController.js
View File

@@ -1,6 +1,8 @@
(function () {
var ns = $.namespace('pskl.controller');
var TOGGLE_LAYER_SHORTCUT = 'alt+L';
ns.LayersListController = function (piskelController) {
this.piskelController = piskelController;
};
@@ -14,13 +16,12 @@
this.rootEl.addEventListener('click', this.onClick_.bind(this));
this.toggleLayerPreviewEl.addEventListener('click', this.toggleLayerPreview_.bind(this));
$.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));
pskl.app.shortcutService.addShortcut('alt+L', this.toggleLayerPreview_.bind(this));
this.initToggleLayerPreview_();
this.renderLayerList_();
this.updateToggleLayerPreview_();
$.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
};
@@ -31,6 +32,16 @@
this.updateButtonStatus_();
};
ns.LayersListController.prototype.initToggleLayerPreview_ = function () {
var descriptors = [{description : 'Opacity defined in PREFERENCES'}];
var helpText = 'Preview all layers';
var toggleLayerPreviewTooltip = pskl.utils.TooltipFormatter.format(helpText, TOGGLE_LAYER_SHORTCUT, descriptors);
this.toggleLayerPreviewEl.setAttribute('title', toggleLayerPreviewTooltip);
pskl.app.shortcutService.addShortcut(TOGGLE_LAYER_SHORTCUT, this.toggleLayerPreview_.bind(this));
};
ns.LayersListController.prototype.updateButtonStatus_ = function () {
var layers = this.piskelController.getLayers();
var currentLayer = this.piskelController.getCurrentLayer();

34
src/js/controller/preview/PreviewController.js
View File

@@ -4,6 +4,9 @@
// Preview is a square of PREVIEW_SIZE x PREVIEW_SIZE
var PREVIEW_SIZE = 200;
var ONION_SKIN_SHORTCUT = 'alt+O';
var ORIGINAL_SIZE_SHORTCUT = 'alt+1';
ns.PreviewController = function (piskelController, container) {
this.piskelController = piskelController;
this.container = container;
@@ -13,15 +16,23 @@
this.renderFlag = true;
/**
* !! WARNING !! ALL THE INITIALISATION BELOW SHOULD BE MOVED TO INIT()
* IT WILL STAY HERE UNTIL WE CAN REMOVE SETFPS (see comment below)
*/
this.fpsRangeInput = document.querySelector('#preview-fps');
this.fpsCounterDisplay = document.querySelector('#display-fps');
this.openPopupPreview = document.querySelector('.open-popup-preview-button');
this.originalSizeButton = document.querySelector('.original-size-button');
this.toggleOnionSkinButton = document.querySelector('.preview-toggle-onion-skin');
/**
* !! WARNING !! THIS SHOULD REMAIN HERE UNTIL, BECAUSE THE PREVIEW CONTROLLER
* IS THE SOURCE OF TRUTH AT THE MOMENT WHEN IT COMES TO FPSs
* IT WILL BE QUERIED BY OTHER OBJECTS SO DEFINE IT AS SOON AS POSSIBLE
*/
this.setFPS(Constants.DEFAULT.FPS);
var frame = this.piskelController.getCurrentFrame();
this.renderer = new pskl.rendering.frame.BackgroundImageFrameRenderer(this.container);
this.popupPreviewController = new ns.PopupPreviewController(piskelController);
};
@@ -32,21 +43,19 @@
document.querySelector('.right-column').style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
this.toggleOnionSkinEl = document.querySelector('.preview-toggle-onion-skin');
this.toggleOnionSkinEl.addEventListener('click', this.toggleOnionSkin_.bind(this));
pskl.utils.Event.addEventListener(this.toggleOnionSkinButton, 'click', this.toggleOnionSkin_, this);
pskl.utils.Event.addEventListener(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, this);
pskl.utils.Event.addEventListener(this.originalSizeButton, 'click', this.onOriginalSizeButtonClick_, this);
pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
pskl.app.shortcutService.addShortcut('alt+1', this.onOriginalSizeButtonClick_.bind(this));
pskl.app.shortcutService.addShortcut(ONION_SKIN_SHORTCUT, this.toggleOnionSkin_.bind(this));
pskl.app.shortcutService.addShortcut(ORIGINAL_SIZE_SHORTCUT, this.onOriginalSizeButtonClick_.bind(this));
$.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
$.subscribe(Events.PISKEL_SAVE_STATE, this.setRenderFlag_.bind(this, true));
$.subscribe(Events.PISKEL_RESET, this.setRenderFlag_.bind(this, true));
this.initTooltips_();
this.popupPreviewController.init();
this.updateZoom_();
@@ -56,6 +65,13 @@
this.updateContainerDimensions_();
};
ns.PreviewController.prototype.initTooltips_ = function () {
var onionSkinTooltip = pskl.utils.TooltipFormatter.format('Toggle onion skin', ONION_SKIN_SHORTCUT);
this.toggleOnionSkinButton.setAttribute('title', onionSkinTooltip);
var originalSizeTooltip = pskl.utils.TooltipFormatter.format('Original size preview', ORIGINAL_SIZE_SHORTCUT);
this.originalSizeButton.setAttribute('title', originalSizeTooltip);
};
ns.PreviewController.prototype.onOpenPopupPreviewClick_ = function () {
this.popupPreviewController.open();
};
@@ -80,7 +96,7 @@
ns.PreviewController.prototype.updateOnionSkinPreview_ = function () {
var enabledClassname = 'preview-toggle-onion-skin-enabled';
var isEnabled = pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN);
this.toggleOnionSkinEl.classList.toggle(enabledClassname, isEnabled);
this.toggleOnionSkinButton.classList.toggle(enabledClassname, isEnabled);
};
ns.PreviewController.prototype.updateOriginalSizeButton_ = function () {

29
src/js/tools/IconMarkupRenderer.js
View File

@@ -5,7 +5,6 @@
ns.IconMarkupRenderer.prototype.render = function (tool, shortcut, tooltipPosition) {
tooltipPosition = tooltipPosition || 'right';
shortcut = shortcut ? '(' + shortcut + ')' : '';
var tpl = pskl.utils.Template.get('drawingTool-item-template');
return pskl.utils.Template.replace(tpl, {
cssclass : ['tool-icon', tool.toolId].join(' '),
@@ -17,32 +16,6 @@
ns.IconMarkupRenderer.prototype.getTooltipText = function(tool, shortcut) {
var descriptors = tool.tooltipDescriptors;
var tpl = pskl.utils.Template.get('drawingTool-tooltipContainer-template');
return pskl.utils.Template.replace(tpl, {
helptext : tool.getHelpText(),
shortcut : shortcut,
descriptors : this.formatToolDescriptors_(descriptors)
});
};
ns.IconMarkupRenderer.prototype.formatToolDescriptors_ = function(descriptors) {
descriptors = descriptors || [];
return descriptors.reduce(function (p, descriptor) {
return p += this.formatToolDescriptor_(descriptor);
}.bind(this), '');
};
ns.IconMarkupRenderer.prototype.formatToolDescriptor_ = function(descriptor) {
var tpl;
if (descriptor.key) {
tpl = pskl.utils.Template.get('drawingTool-tooltipDescriptor-template');
descriptor.key = descriptor.key.toUpperCase();
if (pskl.utils.UserAgent.isMac) {
descriptor.key = descriptor.key.replace('CTRL', 'CMD');
}
} else {
tpl = pskl.utils.Template.get('drawingTool-simpleTooltipDescriptor-template');
}
return pskl.utils.Template.replace(tpl, descriptor);
return pskl.utils.TooltipFormatter.format(tool.getHelpText(), shortcut, descriptors);
};
})();

17
src/js/utils/TooltipFormatter.js
View File

@@ -3,32 +3,33 @@
ns.TooltipFormatter = {};
ns.TooltipFormatter.formatForTool = function(shortcut, descriptors, helpText) {
var tpl = pskl.utils.Template.get('drawingTool-tooltipContainer-template');
ns.TooltipFormatter.format = function(helpText, shortcut, descriptors) {
var tpl = pskl.utils.Template.get('tooltip-container-template');
shortcut = shortcut ? '(' + shortcut + ')' : '';
return pskl.utils.Template.replace(tpl, {
helptext : helpText,
shortcut : shortcut,
descriptors : this.formatToolDescriptors_(descriptors)
descriptors : this.formatDescriptors_(descriptors)
});
};
ns.TooltipFormatter.formatToolDescriptors_ = function(descriptors) {
ns.TooltipFormatter.formatDescriptors_ = function(descriptors) {
descriptors = descriptors || [];
return descriptors.reduce(function (p, descriptor) {
return p += this.formatToolDescriptor_(descriptor);
return p += this.formatDescriptor_(descriptor);
}.bind(this), '');
};
ns.TooltipFormatter.formatToolDescriptor_ = function(descriptor) {
ns.TooltipFormatter.formatDescriptor_ = function(descriptor) {
var tpl;
if (descriptor.key) {
tpl = pskl.utils.Template.get('drawingTool-tooltipDescriptor-template');
tpl = pskl.utils.Template.get('tooltip-modifier-descriptor-template');
descriptor.key = descriptor.key.toUpperCase();
if (pskl.utils.UserAgent.isMac) {
descriptor.key = descriptor.key.replace('CTRL', 'CMD');
}
} else {
tpl = pskl.utils.Template.get('drawingTool-simpleTooltipDescriptor-template');
tpl = pskl.utils.Template.get('tooltip-simple-descriptor-template');
}
return pskl.utils.Template.replace(tpl, descriptor);
};