Issue #344 : Escape django template tags

Gruntfile.js

@@ -205,11 +205,11 @@ module.exports = function(grunt) {
         options: {
           patterns: [{
               match: /^(.|[\r\n])*<!--body-main-start-->/,
-              replacement: "",
+              replacement: "{% raw %}",
               description : "Remove everything before body-main-start comment"
             },{
               match: /<!--body-main-end-->(.|[\r\n])*$/,
-              replacement: "",
+              replacement: "{% endraw %}",
               description : "Remove everything after body-main-end comment"
             },{
               match: /([\r\n])  /g,

src/js/controller/PalettesListController.js

@@ -51,7 +51,7 @@
     var palettes = this.paletteService.getPalettes();
 
     var html = palettes.map(function (palette) {
-      return pskl.utils.Template.replace('<option value="${id}">${name}</option>', palette);
+      return pskl.utils.Template.replace('<option value="{{id}}">{{name}}</option>', palette);
     }).join('');
     this.colorPaletteSelect_.innerHTML = html;
   };

src/js/controller/dialogs/BrowseLocalController.js

@@ -47,7 +47,7 @@
     });
 
     keys.forEach((function (key) {
-      var date = pskl.utils.DateUtils.format(key.date, '${Y}/${M}/${D} ${H}:${m}');
+      var date = pskl.utils.DateUtils.format(key.date, '{{Y}}/{{M}}/{{D}} {{H}}:{{m}}');
       html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : date});
     }).bind(this));
 

src/js/controller/settings/ImportController.js

@@ -32,7 +32,7 @@
     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}');
+      var date = pskl.utils.DateUtils.format(previousInfo.date, '{{H}}:{{m}} - {{Y}}/{{M}}/{{D}}');
       previousSessionContainer.innerHTML = pskl.utils.Template.replace(previousSessionTemplate_, {
         name : previousInfo.name,
         date : date

src/js/controller/settings/exportimage/GifExportController.js

@@ -153,7 +153,7 @@
   // FIXME : JD : HORRIBLE COPY/PASTA (JD later : where???)
   ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
     if (imageUrl) {
-      var linkTpl = '<a class="image-link" href="${link}" target="_blank">${shortLink}</a>';
+      var linkTpl = '<a class="image-link" href="{{link}}" target="_blank">{{shortLink}}</a>';
       var linkHtml = pskl.utils.Template.replace(linkTpl, {
         link : imageUrl,
         shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')

src/js/controller/settings/exportimage/PngExportController.js

@@ -98,7 +98,7 @@
 
   ns.PngExportController.prototype.updateStatus_ = function (imageUrl, error) {
     if (imageUrl) {
-      var linkTpl = '<a class="image-link" href="${link}" target="_blank">${shortLink}</a>';
+      var linkTpl = '<a class="image-link" href="{{link}}" target="_blank">{{shortLink}}</a>';
       var linkHtml = pskl.utils.Template.replace(linkTpl, {
         link : imageUrl,
         shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')

src/js/devtools/DrawingTestSuiteController.js

@@ -21,7 +21,7 @@
 
     var testSuiteStatus = document.createElement('li');
     testSuiteStatus.innerHTML = pskl.utils.Template.replace(
-      '<b>Test Suite [${path}]</b>',
+      '<b>Test Suite [{{path}}]</b>',
       {path : this.shortenPath_(this.suitePath)}
     );
     this.testListElt.appendChild(testSuiteStatus);
@@ -51,7 +51,7 @@
     var testCaseStatus = document.createElement('li');
 
     testCaseStatus.innerHTML = pskl.utils.Template.replace(
-      '[${path}] finished : <b style="color:${color}">${status}</b>',
+      '[{{path}}] finished : <b style="color:{{color}}">{{status}}</b>',
       {path : this.shortenPath_(testPath), status : status ? 'OK' : 'KO', color : status ? 'green' : 'red'}
     );
     this.testListElt.appendChild(testCaseStatus);
@@ -64,7 +64,7 @@
 
     var testSuiteStatus = document.createElement('li');
     testSuiteStatus.innerHTML = pskl.utils.Template.replace(
-      '<b>Test finished : ${status}</b> (${elapsed} seconds)',
+      '<b>Test finished : {{status}}</b> ({{elapsed}} seconds)',
       {status : status, elapsed : elapsed}
     );
     this.testListElt.appendChild(testSuiteStatus);

src/js/service/storage/FileDownloadStorageService.js

@@ -10,7 +10,7 @@
 
     pskl.utils.BlobUtils.stringToBlob(serialized, function(blob) {
       var piskelName = piskel.getDescriptor().name;
-      var timestamp = pskl.utils.DateUtils.format(new Date(), '${Y}${M}${D}-${H}${m}${s}');
+      var timestamp = pskl.utils.DateUtils.format(new Date(), '{{Y}}{{M}}{{D}}-{{H}}{{m}}{{s}}');
       var fileName = piskelName + '-' + timestamp + '.piskel';
 
       try {

src/js/utils/Template.js

@@ -49,7 +49,7 @@
               value = '';
             }
           }
-          template = template.replace(new RegExp('\\$\\{' + key + '\\}', 'g'), value);
+          template = template.replace(new RegExp('\\{\\{' + key + '\\}\\}', 'g'), value);
         }
       }
       return template;

src/templates/dialogs/browse-local.html

@@ -21,9 +21,9 @@
 
 <script type="text/template" id="local-storage-item-template">
   <tr class="local-piskel-item">
-    <td class="local-piskel-name">${name}</td>
+    <td class="local-piskel-name">{{name}}</td>
-    <td class="local-piskel-save-date">${date}</td>
+    <td class="local-piskel-save-date">{{date}}</td>
-    <td><button type="button" data-action="load" data-name="${name}" class="button button-primary local-piskel-load-button">Load</button></td>
+    <td><button type="button" data-action="load" data-name="{{name}}" class="button button-primary local-piskel-load-button">Load</button></td>
-    <td><button type="button" data-action="delete" data-name="${name}" class="button local-piskel-delete-button">Delete</button></td>
+    <td><button type="button" data-action="delete" data-name="{{name}}" class="button local-piskel-delete-button">Delete</button></td>
   </tr>
 </script>

src/templates/dialogs/cheatsheet.html

@@ -41,9 +41,9 @@
 </script>
 
 <script type="text/template" id="cheatsheet-shortcut-template">
-  <li class="cheatsheet-shortcut ${className}" data-shortcut-id="${id}">
+  <li class="cheatsheet-shortcut {{className}}" data-shortcut-id="{{id}}">
-    <div class="cheatsheet-icon ${icon}"></div>
+    <div class="cheatsheet-icon {{icon}}"></div>
-    <span class="cheatsheet-key" rel="tooltip" data-placement="top" title="${title}">${key}</span>
+    <span class="cheatsheet-key" rel="tooltip" data-placement="top" title="{{title}}">{{key}}</span>
-    <span class="cheatsheet-description">${description}</span>
+    <span class="cheatsheet-description">{{description}}</span>
   </li>
 </script>

src/templates/dialogs/create-palette.html

@@ -75,10 +75,10 @@
 
 <script type="text/template" id="create-palette-color-template">
   <li
-    class="create-palette-color ${:selected} ${:light-color}"
+    class="create-palette-color {{:selected}} {{:light-color}}"
-    style="background:${color}"
+    style="background:{{color}}"
-    data-palette-index="${index}"
+    data-palette-index="{{index}}"
-    data-palette-color="${color}">
+    data-palette-color="{{color}}">
     <div class="create-palette-remove-color">X</div>
   </li>
 </script>

src/templates/drawing-tools.html

@@ -35,6 +35,6 @@
 
   <!-- Drawing tool icon-button -->
   <script type="text/template" id="drawingTool-item-template">
-    <li rel="tooltip" data-placement="${tooltipposition}" class="${cssclass}" data-tool-id="${toolid}" title="${title}"></li>
+    <li rel="tooltip" data-placement="{{tooltipposition}}" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
   </script>
 </div>

src/templates/layers-list.html

@@ -34,6 +34,6 @@
   <ul class="layers-list"></ul>
 
   <script type="text/template" id="layer-item-template">
-    <li class="layer-item ${isselected:current-layer-item}" data-layer-index="${layerindex}">${layername}</li>
+    <li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}</li>
   </script>
 </div>

src/templates/misc-templates.html

@@ -1,32 +1,32 @@
 <div style="display:none">
   <script type="text/template" id="progress-bar-template">
     <div class="progress-bar-container">
-      <div class="progress-bar-name">${name}</div>
+      <div class="progress-bar-name">{{name}}</div>
       <div class="progress-bar-item progress-bar"></div>
-      <div class="progress-bar-item progress-bar-status">${status}%</div>
+      <div class="progress-bar-item progress-bar-status">{{status}}%</div>
     </div>
   </script>
 
   <!-- Tooltip container -->
   <script type="text/template" id="tooltip-container-template">
     <div class='tooltip-container'>
-      <div>${helptext} <span class='tooltip-shortcut'>${shortcut}</span></div>
+      <div>{{helptext}} <span class='tooltip-shortcut'>{{shortcut}}</span></div>
-      ${descriptors}
+      {{descriptors}}
     </div>
   </script>
 
   <!-- Tooltip description with modifier -->
   <script type="text/template" id="tooltip-modifier-descriptor-template">
     <div class='tooltip-descriptor'>
-      <span class='tooltip-descriptor-button'>${key}</span>
+      <span class='tooltip-descriptor-button'>{{key}}</span>
-      ${description}
+      {{description}}
     </div>
   </script>
 
   <!-- Simple tooltip description -->
   <script type="text/template" id="tooltip-simple-descriptor-template">
     <div class='tooltip-descriptor'>
-      ${description}
+      {{description}}
     </div>
   </script>
 </div>

src/templates/palettes-list.html

@@ -11,8 +11,8 @@
   </div>
   <div class="palettes-list-colors"></div>
   <script type="text/template" id="palette-color-template">
-    <div class="palettes-list-color" data-color="${color}" data-color-index="${index}" title="${color}">
+    <div class="palettes-list-color" data-color="{{color}}" data-color-index="{{index}}" title="{{color}}">
-      <div data-color="${color}" style="background:${color}"></div>
+      <div data-color="{{color}}" style="background:{{color}}"></div>
     </div>
   </script>
 

src/templates/settings/import.html

@@ -45,7 +45,7 @@
 
 <script type="text/template" id="previous-session-info-template">
   <div>
-    Restore a backup of <span style="color:gold">${name}</span>, saved at <span style="color:white">${date}</span> ?
+    Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
     <div style="margin-top:10px;">
       <button type="button" class="button  button-primary restore-session-button">Restore</button>
     </div>