Make permission and status translatable

Move HTML from JS to EJS.
#1581 (comment)
#1581 (comment)

Signed-off-by: Tamotsu Takahashi <ttakah@gmail.com>

Author: Tamotsu Takahashi

public/js/index.js

@@ -237,21 +237,9 @@ const supportExtraTags = [
   }
 ]
 const statusType = {
-  connected: {
-    msg: 'CONNECTED',
-    label: 'label-warning',
-    fa: 'fa-wifi'
-  },
-  online: {
-    msg: 'ONLINE',
-    label: 'label-primary',
-    fa: 'fa-users'
-  },
-  offline: {
-    msg: 'OFFLINE',
-    label: 'label-danger',
-    fa: 'fa-plug'
-  }
+  connected: 1,
+  online: 2,
+  offline: 3
 }
 
 // global vars
@@ -723,43 +711,23 @@ function checkTocStyle () {
 
 function showStatus (type, num) {
   currentStatus = type
-  var shortStatus = ui.toolbar.shortStatus
-  var status = ui.toolbar.status
-  var label = $('<span class="label"></span>')
-  var fa = $('<i class="fa"></i>')
-  var msg = ''
-  var shortMsg = ''
 
-  shortStatus.html('')
-  status.html('')
+  ui.toolbar.statusConnected.hide()
+  ui.toolbar.statusOnline.hide()
+  ui.toolbar.statusOffline.hide()
 
   switch (currentStatus) {
     case statusType.connected:
-      label.addClass(statusType.connected.label)
-      fa.addClass(statusType.connected.fa)
-      msg = statusType.connected.msg
+      ui.toolbar.statusConnected.show()
       break
     case statusType.online:
-      label.addClass(statusType.online.label)
-      fa.addClass(statusType.online.fa)
-      shortMsg = num
-      msg = num + ' ' + statusType.online.msg
+      ui.toolbar.statusShortMsg.text(num)
+      ui.toolbar.statusOnline.show()
       break
     case statusType.offline:
-      label.addClass(statusType.offline.label)
-      fa.addClass(statusType.offline.fa)
-      msg = statusType.offline.msg
+      ui.toolbar.statusOffline.show()
       break
   }
-
-  label.append(fa)
-  var shortLabel = label.clone()
-
-  shortLabel.append(' ' + shortMsg)
-  shortStatus.append(shortLabel)
-
-  label.append(' ' + msg)
-  status.append(label)
 }
 
 function toggleMode () {
@@ -1647,41 +1615,34 @@ function updatePermission (newPermission) {
     permission = newPermission
     if (window.loaded) refreshView()
   }
-  var label = null
-  var title = null
+  ui.infobar.permission.label.hide()
   switch (permission) {
     case 'freely':
-      label = '<i class="fa fa-leaf"></i> Freely'
-      title = 'Anyone can edit'
+      $('#permissionLabelFreely').show()
       break
     case 'editable':
-      label = '<i class="fa fa-shield"></i> Editable'
-      title = 'Signed people can edit'
+      $('#permissionLabelEditable').show()
       break
     case 'limited':
-      label = '<i class="fa fa-id-card"></i> Limited'
-      title = 'Signed people can edit (forbid guest)'
+      $('#permissionLabelLimited').show()
       break
     case 'locked':
-      label = '<i class="fa fa-lock"></i> Locked'
-      title = 'Only owner can edit'
+      $('#permissionLabelLocked').show()
       break
     case 'protected':
-      label = '<i class="fa fa-umbrella"></i> Protected'
-      title = 'Only owner can edit (forbid guest)'
+      $('#permissionLabelProtected').show()
       break
     case 'private':
-      label = '<i class="fa fa-hand-stop-o"></i> Private'
-      title = 'Only owner can view & edit'
+      $('#permissionLabelPrivate').show()
       break
   }
   if (personalInfo.userid && window.owner && personalInfo.userid === window.owner) {
-    label += ' <i class="fa fa-caret-down"></i>'
+    ui.infobar.permission.labelCaretDown.show()
     ui.infobar.permission.label.removeClass('disabled')
   } else {
+    ui.infobar.permission.labelCaretDown.hide()
     ui.infobar.permission.label.addClass('disabled')
   }
-  ui.infobar.permission.label.html(label).attr('title', title)
 }
 
 function havePermission () {

public/js/lib/editor/ui-elements.js

@@ -9,6 +9,10 @@ export const getUIElements = () => ({
   toolbar: {
     shortStatus: $('.ui-short-status'),
     status: $('.ui-status'),
+    statusShortMsg: $('.ui-status-short-msg'),
+    statusConnected: $('.ui-status-connected'),
+    statusOnline: $('.ui-status-online'),
+    statusOffline: $('.ui-status-offline'),
     new: $('.ui-new'),
     publish: $('.ui-publish'),
     extra: {
@@ -46,6 +50,7 @@ export const getUIElements = () => ({
     permission: {
       permission: $('.ui-permission'),
       label: $('.ui-permission-label'),
+      labelCaretDown: $('.ui-permission-caret-down'),
       freely: $('.ui-permission-freely'),
       editable: $('.ui-permission-editable'),
       locked: $('.ui-permission-locked'),

public/views/codimd/body.ejs

@@ -12,15 +12,19 @@
                     <span class="ui-lastchange text-uppercase"></span>
                 </span>
                 <span class="ui-permission dropdown pull-right">
-                    <a id="permissionLabel" class="ui-permission-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                    </a>
-                    <ul class="dropdown-menu" aria-labelledby="permissionLabel">
-                        <li class="ui-permission-freely"<% if(!('freely' in permission)) { %> style="display: none;"<% } %>><a><i class="fa fa-leaf fa-fw"></i> <%= __('Freely - Anyone can edit') %></a></li>
-                        <li class="ui-permission-editable"<% if(!('editable' in permission)) { %> style="display: none;"<% } %>><a><i class="fa fa-shield fa-fw"></i> <%= __('Editable - Signed-in people can edit') %></a></li>
-                        <li class="ui-permission-limited"<% if(!('limited' in permission)) { %> style="display: none;"<% } %>><a><i class="fa fa-id-card fa-fw"></i> <%= __('Limited - Signed-in people can edit (forbid guests)') %></a></li>
-                        <li class="ui-permission-locked"<% if(!('locked' in permission)) { %> style="display: none;"<% } %>><a><i class="fa fa-lock fa-fw"></i> <%= __('Locked - Only owner can edit') %></a></li>
-                        <li class="ui-permission-protected"<% if(!('protected' in permission)) { %> style="display: none;"<% } %>><a><i class="fa fa-umbrella fa-fw"></i> <%= __('Protected - Only owner can edit (forbid guests)') %></a></li>
-                        <li class="ui-permission-private"<% if(!('private' in permission)) { %> style="display: none;"<% } %>><a><i class="fa fa-hand-stop-o fa-fw"></i> <%= __('Private - Only owner can view & edit') %></a></li>
+                    <a id="permissionLabelFreely" class="ui-permission-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="display: none;" title="<%= __('Anyone can edit') %>"><i class="fa fa-leaf"></i> <%= __('Freely') %> <i class="ui-permission-caret-down fa fa-caret-down" style="display: none;"></i></a>
+                    <a id="permissionLabelEditable" class="ui-permission-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="display: none;" title="<%= __('Signed-in people can edit') %>"><i class="fa fa-shield fa-fw"></i> <%= __('Editable') %> <i class="ui-permission-caret-down fa fa-caret-down" style="display: none;"></i></a>
+                    <a id="permissionLabelLimited" class="ui-permission-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="display: none;" title="<%= __('Signed-in people can edit (forbid guests)') %>"><i class="fa fa-id-card fa-fw"></i> <%= __('Limited') %> <i class="ui-permission-caret-down fa fa-caret-down" style="display: none;"></i></a>
+                    <a id="permissionLabelLocked" class="ui-permission-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="display: none;" title="<%= __('Only owner can edit') %>"><i class="fa fa-lock fa-fw"></i> <%= __('Locked') %> <i class="ui-permission-caret-down fa fa-caret-down" style="display: none;"></i></a>
+                    <a id="permissionLabelProtected" class="ui-permission-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="display: none;" title="<%= __('Only owner can edit (forbid guests)') %>"><i class="fa fa-umbrella fa-fw"></i> <%= __('Protected') %> <i class="ui-permission-caret-down fa fa-caret-down" style="display: none;"></i></a>
+                    <a id="permissionLabelPrivate" class="ui-permission-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="display: none;" title="<%= __('Only owner can view & edit') %>"><i class="fa fa-hand-stop-o fa-fw"></i> <%= __('Private') %> <i class="ui-permission-caret-down fa fa-caret-down" style="display: none;"></i></a>
+                    <ul class="dropdown-menu" aria-labelledby="permissionLabelFreely permissionLabelEditable permissionLabelLimited permissionLabelLocked permissionLabelProtected permissionLabelPrivate">
+                        <li class="ui-permission-freely"<% if(!('freely' in permission)) { %> style="display: none;"<% } %>><a><i class="fa fa-leaf fa-fw"></i> <%= __('Freely') %> - <%= __('Anyone can edit') %></a></li>
+                        <li class="ui-permission-editable"<% if(!('editable' in permission)) { %> style="display: none;"<% } %>><a><i class="fa fa-shield fa-fw"></i> <%= __('Editable') %> - <%= __('Signed-in people can edit') %></a></li>
+                        <li class="ui-permission-limited"<% if(!('limited' in permission)) { %> style="display: none;"<% } %>><a><i class="fa fa-id-card fa-fw"></i> <%= __('Limited') %> - <%= __('Signed-in people can edit (forbid guests)') %></a></li>
+                        <li class="ui-permission-locked"<% if(!('locked' in permission)) { %> style="display: none;"<% } %>><a><i class="fa fa-lock fa-fw"></i> <%= __('Locked') %> - <%= __('Only owner can edit') %></a></li>
+                        <li class="ui-permission-protected"<% if(!('protected' in permission)) { %> style="display: none;"<% } %>><a><i class="fa fa-umbrella fa-fw"></i> <%= __('Protected') %> - <%= __('Only owner can edit (forbid guests)') %></a></li>
+                        <li class="ui-permission-private"<% if(!('private' in permission)) { %> style="display: none;"<% } %>><a><i class="fa fa-hand-stop-o fa-fw"></i> <%= __('Private') %> - <%= __('Only owner can view & edit') %></a></li>
                         <li class="divider"></li>
                         <li class="ui-delete-note"><a><i class="fa fa-trash-o fa-fw"></i> <%= __('Delete this note') %></a></li>
                     </ul>

public/views/codimd/header.ejs

@@ -8,7 +8,10 @@
             <div class="visible-lg">&nbsp;</div>
         </div>
         <div class="nav-mobile nav-status visible-xs" id="short-online-user-list">
-            <a class="ui-short-status" data-toggle="dropdown"><span class="label label-danger"><i class="fa fa-plug"></i> </span>
+            <a class="ui-short-status" data-toggle="dropdown">
+                <span class="label label-warning ui-status-connected" style="display: none;"><i class="fa fa-wifi"></i></span>
+                <span class="label label-primary ui-status-online" style="display: none;"><i class="fa fa-users"></i> <span class="ui-status-short-msg"></span></span>
+                <span class="label label-danger ui-status-offline"><i class="fa fa-plug"></i></span>
             </a>
             <ul class="dropdown-menu list" role="menu" aria-labelledby="menu">
             </ul>
@@ -109,7 +112,9 @@
         <ul class="nav navbar-nav navbar-right">
             <li id="online-user-list">
                 <a class="ui-status" data-toggle="dropdown">
-                    <span class="label label-danger"><i class="fa fa-plug"></i> OFFLINE</span>
+                    <span class="label label-warning ui-status-connected" style="display: none;"><i class="fa fa-wifi"></i> <%= __('CONNECTED') %></span>
+                    <span class="label label-primary ui-status-online" style="display: none;"><i class="fa fa-users"></i> <span class="ui-status-short-msg"></span> <%= __('ONLINE') %></span>
+                    <span class="label label-danger ui-status-offline"><i class="fa fa-plug"></i> <%= __('OFFLINE') %></span>
                 </a>
                 <ul class="dropdown-menu list" role="menu" aria-labelledby="menu" style="right: 15px;width: 200px;">
                 </ul>