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

UI : Use template for drawing tool markup

Browse Source 
Switched to templates instead of string concatenation.
Template for drawing tool LI is defined in drawing-tools template
This commit is contained in:
jdescottes 2014-03-05 00:01:47 +01:00
parent ab401d3013
commit 0072a2c8b0
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
js/controller/ToolController.js
View File

@ -1,7 +1,6 @@
(function () {
var ns = $.namespace("pskl.controller");
ns.ToolController = function () {
var toDescriptor = function (id, shortcut, instance) {
return {id:id, shortcut:shortcut, instance:instance};
@ -119,15 +118,23 @@
* @private
*/
ns.ToolController.prototype.getToolMarkup_ = function(tool) {
var instance = tool.instance;
var toolId = tool.instance.toolId;
var classList = ['tool-icon', instance.toolId];
var classList = ['tool-icon', toolId];
if (this.currentSelectedTool == tool) {
classList.push('selected');
}
return '<li rel="tooltip" data-placement="right" class="' + classList.join(' ') + '" data-tool-id="' + instance.toolId +
'" title="' + instance.helpText + ' (' + tool.shortcut + ')"></li>';
var tpl = pskl.utils.Template.get('drawing-tool-item-template');
return pskl.utils.Template.replace(tpl, {
cssclass : classList.join(' '),
toolid : toolId,
title : this.getTooltipText_(tool)
});
};
ns.ToolController.prototype.getTooltipText_ = function (tool) {
return tool.instance.helpText + ' (' + tool.shortcut + ')';
};
ns.ToolController.prototype.addKeyboardShortcuts_ = function () {

3
templates/drawing-tools.html
View File

@ -1,6 +1,9 @@
<div class="sticky-section left-sticky-section" id="tool-section">
<div class="sticky-section-wrap">
<div class="vertical-centerer">
<script type="text/template" id="drawing-tool-item-template">
<li rel="tooltip" data-placement="right" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
</script>
<ul id="tools-container" class="tools-wrapper"></ul>
<div class="palette-wrapper">
<div