Merge pull request #23 from misode/dev/help-tooltips

Info tooltips for fields

custom.css

@@ -1,4 +1,18 @@
 
+.help-tooltip {
+    width: 30px;
+    height: 30px;
+    padding: 6px 0px;
+    border-radius: 20px;
+    text-align: center;
+    font-size: 1rem;
+    line-height: 1;
+    margin: auto;
+    background-color: #E9ECEF;
+    border-width: 1px;
+    border-color: #CED4DA;
+}
+
 .card.bg-info {
   background-color: #91cdd6 !important;
   color: black !important;

i18n.js

@@ -17,11 +17,11 @@ i18next
   })
   .then(() => {
     jqueryI18next.init(i18next, $, { parseDefaultValueFromContent: false })
-    $('html').localize()
+    updateView()
   })
 
 function changeLng(code) {
   i18next.changeLanguage(code).then(() => {
-    $('html').localize()
+    updateView()
   })
 }

locales/en.json

@@ -218,6 +218,16 @@
     "function.zoom": "Zoom",
     "function_add": "Add Function",
     "function_remove": "Remove Function",
+    "help.entry.expand": "If false, entry will return all contents of tag, otherwise entry will behave as multiple item entries",
+    "help.entry.type.alternatives": "Tests conditions of the child entries and executes the first that can run",
+    "help.entry.type.dynamic": "Gets block specific drops",
+    "help.entry.type.empty": "Adds nothing to the pool",
+    "help.entry.type.group": "Executes all child entries when own conditions pass",
+    "help.entry.type.item": "Adds a single item",
+    "help.entry.type.loot_table": "Adds the contents of another loot table",
+    "help.entry.type.sequence": "Executes child entries until the first one that can't run due to conditions",
+    "help.entry.type.tag": "Adds the contents of an item tag",
+    "help.pool.rolls": "The amount of entries that are randomly chosen",
     "gamemode.adventure": "Adventure",
     "gamemode.creative": "Creative",
     "gamemode.spectator": "Spectator",

schemas/1.13.json

@@ -53,6 +53,7 @@
           "type": "enum",
           "translate": "entry.type",
           "translateValue": "entry.type",
+          "help": true,
           "default": "minecraft:item",
           "values": [
             "minecraft:empty",

schemas/1.14.json

@@ -34,7 +34,8 @@
         {
           "id": "rolls",
           "type": "random",
-          "translate": "pool.rolls"
+          "translate": "pool.rolls",
+          "help": true
         },
         {
           "id": "bonus_rolls",
@@ -75,6 +76,7 @@
           "type": "enum",
           "translate": "entry.type",
           "translateValue": "entry.type",
+          "help": true,
           "default": "minecraft:item",
           "values": [
             "minecraft:empty",
@@ -114,6 +116,7 @@
           "type": "boolean",
           "default": "false",
           "translate": "entry.expand",
+          "help": true,
           "require": [
             "minecraft:tag"
           ]

schemas/1.15.json

@@ -86,6 +86,7 @@
           "type": "enum",
           "translate": "entry.type",
           "translateValue": "entry.type",
+          "help": true,
           "default": "minecraft:item",
           "values": [
             "minecraft:empty",
@@ -125,6 +126,7 @@
           "type": "boolean",
           "default": "false",
           "translate": "entry.expand",
+          "help": true,
           "require": [
             "minecraft:tag"
           ]

view.js

@@ -113,6 +113,9 @@ function generateString(data, struct) {
   $el.attr('data-index', struct.id);
   $el.find('[data-name]').attr('data-i18n', struct.translate);
   $el.find('input').val(data);
+  if (struct.help) {
+    $el.append(generateTooltip(struct.translate));
+  }
   return {out: data, component: $el};
 }
 
@@ -125,6 +128,9 @@ function generateBoolean(data, struct) {
   } else if (data === false) {
     $el.find('[value="false"]').addClass('active');
   }
+  if (struct.help) {
+    $el.append(generateTooltip(struct.translate));
+  }
   return {out: data, component: $el};
 }
 
@@ -146,6 +152,9 @@ function generateRandom(data, struct) {
     $el.find('.exact').removeClass('d-none');
     $el.find('.exact').val(data);
   }
+  if (struct.help) {
+    $el.append(generateTooltip(struct.translate));
+  }
   return {out: data, component: $el};
 }
 
@@ -161,6 +170,9 @@ function generateRange(data, struct) {
     $el.find('.exact').removeClass('d-none');
     $el.find('.exact').val(data);
   }
+  if (struct.help) {
+    $el.append(generateTooltip(struct.translate));
+  }
   return {out: data, component: $el};
 }
 
@@ -172,6 +184,9 @@ function generateBoundary(data, struct) {
     $el.find('.range.min').val(data.min);
     $el.find('.range.max').val(data.max);
   }
+  if (struct.help) {
+    $el.append(generateTooltip(struct.translate));
+  }
   return {out: data, component: $el};
 }
 
@@ -196,6 +211,9 @@ function generateEnum(data, struct) {
     }
   }
   $el.find('select').val(collection.includes(data) ? data : correctNamespace(data));
+  if (struct.help) {
+    $el.append(generateTooltip(struct.translateValue + '.' + data.replace(/.*:/, '')));
+  }
   return {out: data, component: $el};
 }
 
@@ -273,6 +291,9 @@ function generateJson(data, struct) {
     data = JSON.stringify(data);
   }
   $el.find('textarea').val(data).keydown(e => preventNewline(e));
+  if (struct.help) {
+    $el.append(generateTooltip(struct.translate));
+  }
   return {out: data, component: $el};
 }
 
@@ -450,6 +471,12 @@ function generateField(data, field, parent) {
   return false;
 }
 
+function generateTooltip(str) {
+  let $el = $('<button type="button" class="btn help-tooltip ml-2" data-toggle="tooltip" data-help="' + str + '">?</button>');
+  $el.tooltip({title: i18next.t('help.' + str)});
+  return $el;
+}
+
 function preventNewline(e) {
   if (e.which === 13) {
     $(e.target).trigger('change');