added JSON commands for picking a symbol

client/css/editor/dragtoolbar.css

@@ -6,7 +6,7 @@
   z-index: 1;
 }
 
-#editorDragToolbar.active {
+body:not(.overlayActive) #editorDragToolbar.active {
   display: flex;
 }
 

client/css/fonts.css

@@ -436,7 +436,7 @@
   overflow-y: auto;
   word-wrap: anywhere;
 }
-#symbolPickerOverlay.bigPreviews #symbolList {
+#symbolPickerOverlay.bigPreviews.fewResults #symbolList {
   --symbolSize: 64px;
 }
 
@@ -461,7 +461,7 @@
   word-break: break-all;
 }
 
-#symbolPickerOverlay .emoji:hover, #symbolPickerOverlay.fewResults .emoji {
+#symbolPickerOverlay .emoji:hover, #symbolPickerOverlay .emojiFlag, #symbolPickerOverlay.fewResults .emoji {
   background: var(--url) center no-repeat;
   color: transparent;
 }
@@ -486,7 +486,13 @@
   background: var(--url);
 }
 
-#symbolPickerOverlay .hidden {
+#symbolPickerOverlay .hidden,
+#symbolPickerOverlay.hideImages h2.imageCategory,
+#symbolPickerOverlay.hideImages .emoji,
+#symbolPickerOverlay.hideImages .gameicons,
+#symbolPickerOverlay.hideFonts h2.fontCategory,
+#symbolPickerOverlay.hideFonts .symbols,
+#symbolPickerOverlay.hideFonts .material-icons {
   display: none;
 }
 

client/js/domhelpers.js

@@ -412,19 +412,21 @@ export async function loadSymbolPicker() {
     let list = '';
     let gameIconsIndex = 0;
     for(const [ category, symbols ] of Object.entries(symbolData)) {
-      list += `<h2>${category}</h2>`;
+      list += `<h2 class="${category.match(/Material|VTT/)?'fontCategory':'imageCategory'}">${category}</h2>`;
       for(const [ symbol, keywords ] of Object.entries(symbols)) {
         if(symbol.includes('/')) {
           // increase resource limits in /etc/ImageMagick-6/policy.xml to 8GiB and then: montage -background none assets/game-icons.net/*/*.svg -geometry 48x48+0+0 -tile 60x assets/game-icons.net/overview.png
-          list += `<i class="gameicons" title="game-icons.net: ${symbol}" data-symbol="${symbol}" data-keywords="${symbol},${keywords.join().toLowerCase()}" style="--x:${gameIconsIndex%60};--y:${Math.floor(gameIconsIndex/60)};--url:url('i/game-icons.net/${symbol}.svg')"></i>`;
+          list += `<i class="gameicons" title="game-icons.net: ${symbol}" data-type="game-icons" data-symbol="${symbol}" data-keywords="${symbol},${keywords.join().toLowerCase()}" style="--x:${gameIconsIndex%60};--y:${Math.floor(gameIconsIndex/60)};--url:url('i/game-icons.net/${symbol}.svg')"></i>`;
           ++gameIconsIndex;
         } else {
           let className = 'emoji';
           if(symbol[0] == '[')
             className = 'symbols';
           else if(symbol.match(/^[a-z0-9_]+$/))
             className = 'material-icons';
-          list += `<i class="${className}" title="${className}: ${symbol}" data-keywords="${symbol},${keywords.join().toLowerCase()}" style="--url:url('i/noto-emoji/emoji_u${emojiToFilename(symbol)}.svg')">${symbol}</i>`;
+          if(category == 'Emoji - Flags')
+            className += ' emojiFlag';
+          list += `<i class="${className}" title="${className}: ${symbol}" data-type="${className}" data-symbol="${symbol}" data-keywords="${symbol},${keywords.join().toLowerCase()}" style="--url:url('i/noto-emoji/emoji_u${emojiToFilename(symbol)}.svg')">${symbol}</i>`;
         }
       }
     }
@@ -441,6 +443,40 @@ export async function loadSymbolPicker() {
   }
 }
 
+export async function pickSymbol(type='all', bigPreviews=true, closeOverlay=true) {
+  await loadSymbolPicker();
+  return new Promise((resolve, reject) => {
+    showOverlay('symbolPickerOverlay');
+    $('#symbolPickerOverlay').classList.toggle('bigPreviews', bigPreviews);
+    $('#symbolPickerOverlay').classList.toggle('hideFonts',   type=='images');
+    $('#symbolPickerOverlay').classList.toggle('hideImages',  type=='fonts');
+    $('#symbolPickerOverlay').scrollTop = 0;
+    $('#symbolPickerOverlay input').value = '';
+    $('#symbolPickerOverlay input').focus();
+    $('#symbolPickerOverlay input').onkeyup();
+
+    $('#symbolPickerOverlay [icon=close]').onclick = function(e) {
+      if(closeOverlay)
+        showOverlay(null);
+      resolve(null);
+    };
+
+    for(const icon of $a('#symbolList i')) {
+      icon.onclick = function(e) {
+        if(closeOverlay)
+          showOverlay(null);
+        const isImage = ['emoji','game-icons'].indexOf(icon.dataset.type) != -1;
+        let url = null;
+        if(icon.dataset.type == 'emoji')
+          url = `/i/noto-emoji/emoji_u${emojiToFilename(icon.dataset.symbol)}.svg`;
+        if(icon.dataset.type == 'game-icons')
+          url = `/i/game-icons.net/${icon.dataset.symbol}.svg`;
+        resolve(Object.assign({...icon.dataset}, { isImage, url }));
+      };
+    }
+  });
+}
+
 export function addRichtextControls(dom) {
   const controls = domByTemplate('template-richtext-controls');
   controls.classList.add('richtext-controls');

client/js/jsonedit.js

@@ -258,27 +258,54 @@ const jeCommands = [
   {
     id: 'je_uploadAsset',
     name: 'upload a different asset',
-    context: '.*"(/assets/[0-9_-]+)"|^.* ↦ image$|^deck ↦ faceTemplates ↦ [0-9]+ ↦ objects ↦ [0-9]+ ↦ value$',
+    context: '.*"(/assets/[0-9_-]+|/i/[^"]+)"|^.* ↦ image$|^deck ↦ faceTemplates ↦ [0-9]+ ↦ objects ↦ [0-9]+ ↦ value$',
     call: async function() {
-      uploadAsset().then(a=> {
-        if(a) {
-          jeInsert(null, jeGetLastKey(), a);
-          jeApplyChanges();
-        }
-      });
+      const a = await uploadAsset();
+      if(a) {
+        jeInsert(null, jeGetLastKey(), a);
+        await jeApplyChanges();
+      }
+    }
+  },
+  {
+    id: 'je_symbolPickerAsset',
+    name: 'pick an asset from the symbol picker',
+    context: '.*"(/assets/[0-9_-]+|/i/[^"]+)"|^.* ↦ image$|^deck ↦ faceTemplates ↦ [0-9]+ ↦ objects ↦ [0-9]+ ↦ value$',
+    call: async function() {
+      const a = await pickSymbol('images');
+      if(a) {
+        jeInsert(null, jeGetLastKey(), a.url);
+        await jeApplyChanges();
+      }
+    }
+  },
+  {
+    id: 'je_symbolPickerText',
+    name: 'pick an asset from the symbol picker',
+    context: '^button ↦ text$',
+    call: async function() {
+      const a = await pickSymbol('fonts');
+      if(a) {
+        jeStateNow.classes = a.type;
+        jeStateNow.text = a.symbol;
+        jeSetAndSelect();
+        await jeApplyChanges();
+      }
+    },
+    show: function() {
+      return [ 'symbols', 'material-icons' ].indexOf(jeStateNow.classes) != -1;
     }
   },
   {
     id: 'je_uploadAudio',
     name: 'upload audio file',
     context: '^.*\\(AUDIO\\) ↦ source|^.* ↦ clickSound',
     call: async function() {
-      uploadAsset().then(a=> {
-        if(a) {
-          jeInsert(null, jeGetLastKey(), a);
-          jeApplyChanges();
-        }
-      });
+      const a = await uploadAsset();
+      if(a) {
+        jeInsert(null, jeGetLastKey(), a);
+        await jeApplyChanges();
+      }
     }
   },
   {

client/js/main.js

@@ -109,6 +109,7 @@ export function showOverlay(id, forced) {
   } else {
     overlayActive = false;
   }
+  $('body').classList.toggle('overlayActive', overlayActive);
 }
 
 export function showStatesOverlay(id) {
@@ -378,7 +379,7 @@ async function loadEditMode() {
       addWidgetLocal, removeWidgetLocal,
       loadJSZip, waitForJSZip,
       generateUniqueWidgetID, unescapeID, regexEscape, setScale, getScale, getRoomRectangle, getMaxZ,
-      uploadAsset, selectFile, triggerDownload,
+      uploadAsset, pickSymbol, selectFile, triggerDownload,
       config, getPlayerDetails, roomID, getDeltaID, widgets, widgetFilter, isOverlayActive,
       formField,
       Widget, BasicWidget, Button, Canvas, Card, Deck, Dice, Holder, Label, Pile, Scoreboard, Seat, Spinner, Timer,