wip: migrate from deprecated swig templates to ejs

views/partials/tool/background.html

@@ -1,8 +1,8 @@
 
 <div class="dialog-tabs-wrapper">
   <div class="dialog-tabs">
-    <div class="dialog-tab" v-bind:class="{open:background_mode=='image'}" v-on:click="background_mode='image'"><span>[[__("background_image_caption")]]</span></div>
-    <div class="dialog-tab" v-bind:class="{open:background_mode=='color'}" v-on:click="background_mode='color'"><span>[[__("background_color_caption")]]</span></div>
+    <div class="dialog-tab" v-bind:class="{open:background_mode=='image'}" v-on:click="background_mode='image'"><span><%=__("background_image_caption")%></span></div>
+    <div class="dialog-tab" v-bind:class="{open:background_mode=='color'}" v-on:click="background_mode='color'"><span><%=__("background_color_caption")%></span></div>
   </div>
 </div>
 
@@ -69,9 +69,9 @@
   <!--div class="dialog-section" v-show="background_mode=='color'">
     <div class="tab-switch round options-2"  v-bind:class="{'option-2':color_mode=='picker'}">
       <div class="options">
-        <span class="option" v-on:click="activate_color_mode('palette')">[[__("palette")]]</span>
+        <span class="option" v-on:click="activate_color_mode('palette')"><%=__("palette")%></span>
         <span class="option" v-on:click="activate_color_mode('picker')">
-          <span>[[__("picker")]]</span>
+          <span><%=__("picker")%></span>
         </span>
       </div>
       <span class="option-highlight"></span>
@@ -91,7 +91,7 @@
         <span class="icon icon-picture-upload"></span>
         <input id="background-uploader" type="file" accept="image/*" v-on:change="handle_section_background_upload($event)">
       </label>
-      <p>[[__("upload_background_caption")]]</p>
+      <p><%=__("upload_background_caption")%></p>
     </div>
 
     <div class="dialog-section no-p no-flex" v-if="active_space.background_uri">

views/partials/tool/color.html

@@ -77,9 +77,9 @@
 <!--div class="dialog-section no-b" style="margin-top:-10px">
   <div class="tab-switch round options-2" v-bind:class="{'option-2':color_mode=='picker'}">
     <div class="options">
-      <span class="option" v-on:click="activate_color_mode('palette')">[[__("palette")]]</span>
+      <span class="option" v-on:click="activate_color_mode('palette')"><%=__("palette")%></span>
       <span class="option" v-on:click="activate_color_mode('picker')">
-        <span>[[__("picker")]]</span>
+        <span><%=__("picker")%></span>
       </span>
     </div>
     <span class="option-highlight"></span>
@@ -123,7 +123,7 @@
 <div class="dialog-section no-p-b no-p-h" v-show="opened_dialog=='color-text'">
   <div class="input-row">
     <div class="form-group no-m">
-      <label class="label label-sm text-center">[[__("font_size")]]</label>
+      <label class="label label-sm text-center"><%=__("font_size")%></label>
       <input class="input no-b no-p text-center text-large" spellcheck="false" type="text" pattern="[0-9]" maxlength="64" v-model="active_style.font_size">
       
       <button tabindex="-1" class="input-drag btn btn-transparent btn-icon" style="cursor: ns-resize;" v-sd-fader="true" sd-fader-var-y="active_style.font_size" sd-fader-min-y="30" sd-fader-max-y="200" sd-fader-sens="5">
@@ -133,7 +133,7 @@
     </div>
     
     <!--div class="form-group no-m">
-      <label class="label label-sm text-center">[[__("line_height")]]</label>
+      <label class="label label-sm text-center"><%=__("line_height")%></label>
       <input disabled class="input no-b no-p text-center text-large" spellcheck="false" type="text" pattern="[0-9\.]" maxlength="64" v-model="active_style.line_height">
       <button tabindex="-1" class="input-drag btn btn-transparent btn-icon" style="cursor: ns-resize;" v-sd-fader="true" sd-fader-var-y="active_style.line_height" sd-fader-min-y="0.5" sd-fader-max-y="4" sd-fader-step="0.1">
         <span class="icon icon-triangles-vertical"></span>

views/partials/tool/object-options.html

@@ -2,35 +2,35 @@
   <div class="btn-group">
     <button class="btn btn-transparent btn-icon-labeled" v-on:click="delete_selected_artifacts()">
       <span class="icon icon-trash"></span>
-      <span class="icon-label">[[__("delete")]]</span>
+      <span class="icon-label"><%=__("delete")%></span>
     </button>
 
     <button class="btn btn-divider"></button>
 
     <button class="btn btn-transparent btn-icon-labeled" v-on:click="toggle_lock_of_selected_artifacts()" v-if="active_space_role=='admin'">
       <span class="icon icon-lock-closed"></span>
-      <span class="icon-label">[[__("lock")]]</span>
+      <span class="icon-label"><%=__("lock")%></span>
     </button>
 
     <button class="btn btn-transparent btn-icon-labeled" v-on:click="toggle_lock_of_selected_artifacts()" v-if="active_space_role=='admin'">
       <span class="icon icon-lock-open"></span>
-      <span class="icon-label">[[__("unlock")]]</span>
+      <span class="icon-label"><%=__("unlock")%></span>
     </button>
 
     <button class="btn btn-transparent btn-icon-labeled" v-on:click="duplicate_selected_artifacts()">
       <span class="icon icon-duplicate"></span>
-      <span class="icon-label">[[__("copy")]]</span>
+      <span class="icon-label"><%=__("copy")%></span>
     </button>
 
     <button class="btn btn-transparent btn-icon-labeled" v-on:click="create_link_on_selected_artifacts()">
       <span class="icon icon-link"></span>
-      <span class="icon-label">[[__("link")]]</span>
+      <span class="icon-label"><%=__("link")%></span>
     </button>
     
     <span v-if="first_selected_artifact">
       <button class="btn btn-transparent btn-icon-labeled" v-on:click="download_selected_artifacts()" v-if="selection_metrics.count==1 && first_selected_artifact.payload_uri">
         <span class="icon icon-download"></span>
-        <span class="icon-label">[[__("download")]]</span>
+        <span class="icon-label"><%=__("download")%></span>
       </button>
     </span>
   </div>

views/partials/tool/search.html

@@ -30,7 +30,7 @@
     <!-- generic search box placeholder -->
     <div class="relative">
       <span class="icon icon-zoom absolute-top-left no-events" style="margin-top: -2px;"></span>
-      <input type="text" v-model="generic_search_query" v-focus class="input input-white input-round input-block no-b p-l-60" placeholder="[[__("search_media_placeholder")]]" v-on="keyup: search_generic(generic_search_query) | key enter">
+      <input type="text" v-model="generic_search_query" v-focus class="input input-white input-round input-block no-b p-l-60" placeholder="<%=__("search_media_placeholder")%>" v-on="keyup: search_generic(generic_search_query) | key enter">
     </div>
 
     <!-- <button type="button" class="btn btn-sm btn-icon btn-round btn-darken absolute-top-right clear-search" style="margin-right: 42px; margin-top: 40px;">

views/partials/tool/shapes.html

@@ -1,46 +1,46 @@
-<h4 class="dialog-title">[[__("tool_shape")]]</h4>
+<h4 class="dialog-title"><%=__("tool_shape")%></h4>
 
 <div id="shapes">
   <div class="dialog-section">
     <div class="btn-group">
       <button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('ellipse',$event)">
         <span class="icon icon-shape-circle"></span>
-        <span class="icon-label">[[__("tool_circle")]]</span>
+        <span class="icon-label"><%=__("tool_circle")%></span>
       </button>
       
       <button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('hexagon',$event)">
         <span class="icon icon-shape-hexagon"></span>
-        <span class="icon-label">[[__("tool_hexagon")]]</span>
+        <span class="icon-label"><%=__("tool_hexagon")%></span>
       </button>
       
       <button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('square',$event)">
         <span class="icon icon-shape-square"></span>
-        <span class="icon-label">[[__("tool_square")]]</span>
+        <span class="icon-label"><%=__("tool_square")%></span>
       </button>
       
       <button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('speechbubble',$event)">
         <span class="icon icon-shape-bubble"></span>
-        <span class="icon-label">[[__("tool_bubble")]]</span>
+        <span class="icon-label"><%=__("tool_bubble")%></span>
       </button>
       
       <button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('cloud',$event)">
         <span class="icon icon-shape-cloud"></span>
-        <span class="icon-label">[[__("tool_cloud")]]</span>
+        <span class="icon-label"><%=__("tool_cloud")%></span>
       </button>
       
       <button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('burst',$event)">
         <span class="icon icon-shape-burst"></span>
-        <span class="icon-label">[[__("tool_burst")]]</span>
+        <span class="icon-label"><%=__("tool_burst")%></span>
       </button>
       
       <button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('star',$event)">
         <span class="icon icon-shape-star"></span>
-        <span class="icon-label">[[__("tool_star")]]</span>
+        <span class="icon-label"><%=__("tool_star")%></span>
       </button>
       
       <button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('heart',$event)">
         <span class="icon icon-shape-heart"></span>
-        <span class="icon-label">[[__("tool_heart")]]</span>
+        <span class="icon-label"><%=__("tool_heart")%></span>
       </button>
 
     </div>

views/partials/tool/text-formats.html

@@ -1,12 +1,12 @@
-<h4 class="dialog-title">[[__("text_formats")]]</h4>
+<h4 class="dialog-title"><%=__("text_formats")%></h4>
 
 <ul class="select-list overflow-y-scroll" style="min-width: 200px;">
-  <li id="note-format-div" v-on="mousedown:apply_formatting($event, 'p')"> <span>[[__("format_p")]]</span> </li>
-  <li id="note-format-ul"  v-on="mousedown:apply_formatting($event, 'insertunorderedlist')"> <span>[[__("format_bullets")]]</span> </li>
-  <li id="note-format-ol"  v-on="mousedown:apply_formatting($event, 'insertorderedlist')"> <span>[[__("format_numbers")]]</span> </li>
-  <li id="note-format-h1"  v-on="mousedown:apply_formatting($event, 'h1')"> <span>[[__("format_h1")]]</span> </li>
-  <li id="note-format-h2"  v-on="mousedown:apply_formatting($event, 'h2')"> <span>[[__("format_h2")]]</span> </li>
-  <li id="note-format-h3"  v-on="mousedown:apply_formatting($event, 'h3')"> <span>[[__("format_h3")]]</span> </li>
+  <li id="note-format-div" v-on="mousedown:apply_formatting($event, 'p')"> <span><%=__("format_p")%></span> </li>
+  <li id="note-format-ul"  v-on="mousedown:apply_formatting($event, 'insertunorderedlist')"> <span><%=__("format_bullets")%></span> </li>
+  <li id="note-format-ol"  v-on="mousedown:apply_formatting($event, 'insertorderedlist')"> <span><%=__("format_numbers")%></span> </li>
+  <li id="note-format-h1"  v-on="mousedown:apply_formatting($event, 'h1')"> <span><%=__("format_h1")%></span> </li>
+  <li id="note-format-h2"  v-on="mousedown:apply_formatting($event, 'h2')"> <span><%=__("format_h2")%></span> </li>
+  <li id="note-format-h3"  v-on="mousedown:apply_formatting($event, 'h3')"> <span><%=__("format_h3")%></span> </li>
 </ul>
 
 <!-- 

views/partials/tool/toolbar-elements.html

@@ -3,7 +3,7 @@
   <div class="btn-group light vertical">
     
     <a class="btn btn-icon btn-transparent"
-       title="[[__("home")]]" href="/spaces"
+       title="<%=__("home")%>" href="/spaces"
        v-if="(!active_space.parent_space_id && !guest_nickname && !embedded)">
       <span class="icon icon-folder"></span>
     </a>
@@ -22,23 +22,23 @@
       <div class="btn-collapse in">
         <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='shapes'}" v-on:click="open_dialog('shapes')">
           <span class="icon icon-shapes"></span>
-          <span class="icon-label">[[__("tool_shape")]]</span>
+          <span class="icon-label"><%=__("tool_shape")%></span>
         </button>
       </div>
 
       <div class="dialog">
-        {% include "./shapes.html" %}
+        <%- include("./shapes.html") %>
       </div>
     </div>
 
     <button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_scribble()" v-bind:class="{active:active_tool=='scribble'}">
       <span class="icon icon-tool-scribble"></span>
-      <span class="icon-label">[[__("tool_scribble")]]</span>
+      <span class="icon-label"><%=__("tool_scribble")%></span>
     </button>
     
     <button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_arrow()" v-bind:class="{active:active_tool=='arrow'}">
       <span class="icon icon-tool-arrow"></span>
-      <span class="icon-label">[[__("tool_arrow")]]</span>
+      <span class="icon-label"><%=__("tool_arrow")%></span>
     </button>
     
     <div class="dropdown bottom light center">
@@ -54,7 +54,7 @@
       <div class="btn-collapse in">
         <button class="btn btn-transparent btn-icon-labeled" v-on:click="active_tool='note'" v-bind:class="{active:active_tool=='note'}">
           <span class="icon icon-tool-text"></span>
-          <span class="icon-label">[[__("tool_text")]]</span>
+          <span class="icon-label"><%=__("tool_text")%></span>
         </button>
       </div>
     </div>
@@ -63,12 +63,12 @@
       <div class="btn-collapse">
         <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='image'}" v-on:click="open_dialog('image')">
           <span class="icon icon-picture"></span>
-          <span class="icon-label">[[__("image")]]</span>
+          <span class="icon-label"><%=__("image")%></span>
         </button>
       </div>
 
       <div class="dialog">
-        {% include "./image.html" %}
+        <%- include("./image.html") %>
       </div>
     </div>
 
@@ -76,12 +76,12 @@
       <div class="btn-collapse in">
         <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='zones'}" v-on:click="open_dialog('zones')">
           <span class="icon icon-zone"></span>
-          <span class="icon-label">[[__("tool_zones")]]</span>
+          <span class="icon-label"><%=__("tool_zones")%></span>
         </button>
       </div>
 
       <div class="dialog">
-        {% include "./zones.html" %}
+        <%- include("./zones.html") %>
       </div>
     </div>
     
@@ -91,12 +91,12 @@
       <div class="btn-collapse in">
         <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='background'}" v-on:click="open_dialog('background')">
           <span class="letter">bg</span>
-          <span class="icon-label">[[__("tool_canvas")]]</span>
+          <span class="icon-label"><%=__("tool_canvas")%></span>
         </button>
       </div>
 
       <div class="dialog">
-        {% include "./background.html" %}
+        <%- include("./background.html") %>
       </div>
     </div>
 
@@ -104,20 +104,20 @@
             v-if="active_space_role=='admin'"
             v-on:click="activate_access()">
       <span class="icon icon-share"></span>
-      <span class="icon-label">[[  __('share') ]]</span>
+      <span class="icon-label"><%=  __('share') %></span>
     </button>
     
     <!--        
             <li v-on:click="edit_space_title()" v-if="logged_in">
               <span>
                 <span class="icon icon-sm icon-tag"></span>
-                <span>[[  __('rename') ]]</span>
+                <span><%=  __('rename') %></span>
               </span>
             </li>
             -->
     <button class="btn btn-transparent btn-icon-labeled" title="Start Presentation (others follow what you see)" v-on:click="toggle_present_mode()" v-bind:class="{open:present_mode}">
       <span class="icon icon-presentation"></span>
-      <span class="icon-label">[[  __('present') ]]</span>
+      <span class="icon-label"><%=  __('present') %></span>
     </button>
 
   </div>

views/partials/tool/toolbar-object.html

@@ -1,4 +1,4 @@
-<div class="toolbar toolbar-properties" v-cloak v-show="active_space_loaded && !is_active_space_role('viewer')" v-bind:class="{in:toolbar_props_in,out:!toolbar_props_in}" v-if="active_space_loaded">
+'<div class="toolbar toolbar-properties" v-cloak v-show="active_space_loaded && !is_active_space_role('viewer')" v-bind:class="{in:toolbar_props_in,out:!toolbar_props_in}" v-if="active_space_loaded">
 
   <div class="btn-group light vertical">
     <div class="dropdown top right light"
@@ -30,7 +30,7 @@
         <span class="jewel" v-bind:style="{'border-color':active_style.text_color}">{{active_style.font_size}}</span>
       </button>
       <div class="dialog">
-        {% include "./color.html" %}
+        <%- include("./color.html") %>
       </div>
     </div>
     <!--     <button class="btn btn-transparent btn-icon-labeled">
@@ -50,7 +50,7 @@
       </div>
 
       <div class="dialog">
-        {% include "./text-styles.html" %}
+        <%- include("./text-styles.html") %>
       </div>
     </div>
     
@@ -58,12 +58,12 @@
       <div class="btn-collapse" v-bind:class="{in:selection_metrics.contains_text}">
         <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('type-align')" v-bind:class="{open : opened_dialog=='type-align'}">
           <span class="icon icon-text-align-left-alt"></span>
-          <span class="icon-label">[[__("tool_align")]]</span>
+          <span class="icon-label"><%=__("tool_align")%></span>
         </button>
       </div>
 
       <div class="dialog">
-        {% include "./text-align.html" %}
+        <%- include("./text-align.html") %>
       </div>
     </div>
 
@@ -72,12 +72,12 @@
       <div class="btn-collapse in">
         <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('layout')"  v-bind:class="{open : opened_dialog=='layout'}">
           <span class="icon icon-cluster"></span>
-          <span class="icon-label">[[__("tool_layout")]]</span>
+          <span class="icon-label"><%=__("tool_layout")%></span>
         </button>
       </div>
 
       <div class="dialog">
-        {% include "./layout.html" %}
+        <%- include("./layout.html") %>
       </div>
     </div>
     
@@ -91,7 +91,7 @@
       </div>
 
       <div class="dialog">
-        {% include "./text-digits.html" %}
+        <%- include("./text-digits.html") %>
       </div>
     </div>
 
@@ -100,11 +100,11 @@
     <div class="dropdown top light right" v-bind:class="{open:opened_dialog=='object-options'}">
       <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('object-options')" v-bind:class="{open : opened_dialog=='object-options'}">
         <span class="icon icon-cogwheel"></span>
-        <span class="icon-label">[[__("more")]]</span>
+        <span class="icon-label"><%=__("more")%></span>
       </button>
 
       <div class="dialog no-min-w">
-        {% include "./object-options.html" %}
+        <%- include("./object-options.html") %>
       </div>
     </div>
     

views/partials/tool/toolbar-text.html

@@ -9,7 +9,7 @@
       </div>
 
       <div class="dialog">
-          {% include "./text-formats.html" %}
+          <%- include "./text-formats.html" %>
       </div>
     </div>
 
@@ -23,7 +23,7 @@
       </button>
 
       <div class="dialog">
-        {% include "./text-digits.html" %}
+        <%- include "./text-digits.html" %>
       </div>
     </div>
 
@@ -36,7 +36,7 @@
       </button>
 
       <div class="dialog">
-        {% include "./text-align.html" %}
+        <%- include "./text-align.html" %>
       </div>
     </div>
 
@@ -47,7 +47,7 @@
       </button>
 
       <div class="dialog">
-        {% include "./text-styles.html" %}
+        <%- include "./text-styles.html" %>
       </div>
     </div>
   </div>

views/partials/tool/zones.html

@@ -1,4 +1,4 @@
-<h4 class="dialog-title">[[__("tool_zones")]]</h4>
+<h4 class="dialog-title"><%=__("tool_zones")%></h4>
 
 <div id="zones" style="max-height:500px;overflow-y:scroll">
   <div class="dialog-section">
@@ -6,7 +6,7 @@
       Turn your Space into a zooming presentation by placing some Zones and switch through them when presenting.
     </p-->
     
-    <button v-on:click="add_zone()" class="btn btn-sm btn-dark">[[__("add_zone")]]</button>
+    <button v-on:click="add_zone()" class="btn btn-sm btn-dark"><%=__("add_zone")%></button>
   </div>
 
   <div class="dialog-section no-p" v-for="z in zones | orderBy 'order'" style="white-space: nowrap;text-align:left;cursor:pointer" v-on:click="zoom_to_zone(z)">