From 0072a2c8b02ff7b0cd15d5b5625bf93a4b4625ca Mon Sep 17 00:00:00 2001
From: jdescottes <julian.descottes@gmail.com>
Date: Wed, 5 Mar 2014 00:01:47 +0100
Subject: [PATCH] UI : Use template for drawing tool markup

Switched to templates instead of string concatenation.
Template for drawing tool LI is defined in drawing-tools template
---
 js/controller/ToolController.js | 17 ++++++++++++-----
 templates/drawing-tools.html    |  3 +++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/js/controller/ToolController.js b/js/controller/ToolController.js
index 3627dfa2..e3e77b07 100644
--- a/js/controller/ToolController.js
+++ b/js/controller/ToolController.js
@@ -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 () {
diff --git a/templates/drawing-tools.html b/templates/drawing-tools.html
index 47ac6c8e..f94f33b1 100644
--- a/templates/drawing-tools.html
+++ b/templates/drawing-tools.html
@@ -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