Updating to Bootstrap v4

package.json

@@ -33,6 +33,7 @@
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
+    "bootstrap": "^4.1.1",
     "colors": "^1.3.0",
     "css-loader": "^0.28.11",
     "eslint": "^4.19.1",
@@ -55,12 +56,12 @@
     "ink-docstrap": "^1.3.2",
     "js-to-mjs": "^0.2.0",
     "jsdoc-babel": "^0.4.0",
-    "less": "^3.0.2",
-    "less-loader": "^4.1.0",
+    "node-sass": "^4.9.0",
     "postcss-css-variables": "^0.8.1",
     "postcss-import": "^11.1.0",
     "postcss-loader": "^2.1.4",
     "prompt": "^1.0.0",
+    "sass-loader": "^7.0.2",
     "sitemap": "^1.13.0",
     "style-loader": "^0.21.0",
     "url-loader": "^1.0.1",
@@ -71,13 +72,13 @@
     "worker-loader": "^1.1.1"
   },
   "dependencies": {
+    "arrive": "^2.4.1",
     "babel-plugin-transform-builtin-extend": "1.1.2",
     "babel-polyfill": "^6.26.0",
     "bcryptjs": "^2.4.3",
     "bignumber.js": "^7.0.1",
-    "bootstrap": "^3.3.7",
     "bootstrap-colorpicker": "^2.5.2",
-    "bootstrap-switch": "^3.3.4",
+    "bootstrap-material-design": "^4.1.1",
     "bson": "^2.0.6",
     "chi-squared": "^1.1.0",
     "crypto-api": "^0.8.0",
@@ -108,7 +109,9 @@
     "node-md6": "^0.1.0",
     "nwmatcher": "^1.4.4",
     "otp": "^0.1.3",
+    "popper.js": "^1.12.9",
     "scryptsy": "^2.0.0",
+    "snackbarjs": "^1.1.0",
     "sortablejs": "^1.7.0",
     "split.js": "^1.3.5",
     "ssdeep.js": "0.0.2",

src/core/Ingredient.mjs

@@ -21,7 +21,10 @@ class Ingredient {
         this.name  = "";
         this.type  = "";
         this._value = null;
+        this.disabled = false;
+        this.hint = "";
         this.toggleValues = [];
+        this.target = null;
 
         if (ingredientConfig) {
             this._parseConfig(ingredientConfig);
@@ -39,7 +42,10 @@ class Ingredient {
         this.name = ingredientConfig.name;
         this.type = ingredientConfig.type;
         this.defaultValue = ingredientConfig.value;
+        this.disabled = !!ingredientConfig.disabled;
+        this.hint = ingredientConfig.hint || false;
         this.toggleValues = ingredientConfig.toggleValues;
+        this.target = typeof ingredientConfig.target !== "undefined" ? ingredientConfig.target : null;
     }
 
 

src/core/Operation.mjs

@@ -170,12 +170,17 @@ class Operation {
      */
     get args() {
         return this._ingList.map(ing => {
-            return {
+            const conf = {
                 name: ing.name,
                 type: ing.type,
-                value: ing.defaultValue,
-                toggleValues: ing.toggleValues || []
+                value: ing.defaultValue
             };
+
+            if (ing.toggleValues) conf.toggleValues = ing.toggleValues;
+            if (ing.hint) conf.hint = ing.hint;
+            if (ing.disabled) conf.disabled = ing.disabled;
+            if (ing.target) conf.target = ing.target;
+            return conf;
         });
     }
 

src/core/Utils.mjs

@@ -828,11 +828,11 @@ class Utils {
      */
     static async displayFilesAsHTML(files) {
         const formatDirectory = function(file) {
-            const html = `<div class='panel panel-default' style='white-space: normal;'>
-                    <div class='panel-heading' role='tab'>
-                        <h4 class='panel-title'>
+            const html = `<div class='card' style='white-space: normal;'>
+                    <div class='card-header'>
+                        <h6 class="mb-0">
                             ${Utils.escapeHtml(file.name)}
-                        </h4>
+                        </h6>
                     </div>
                 </div>`;
             return html;
@@ -845,38 +845,38 @@ class Utils {
                 {type: "octet/stream"}
             );
 
-            const html = `<div class='panel panel-default' style='white-space: normal;'>
-                    <div class='panel-heading' role='tab' id='heading${i}'>
-                        <h4 class='panel-title'>
-                            <div>
-                                <a href='#collapse${i}'
-                                    class='collapsed'
-                                    data-toggle='collapse'
-                                    aria-expanded='true'
-                                    aria-controls='collapse${i}'
-                                    title="Show/hide contents of '${Utils.escapeHtml(file.name)}'">${Utils.escapeHtml(file.name)}</a>
-                                <a href='${URL.createObjectURL(blob)}'
-                                    title='Download ${Utils.escapeHtml(file.name)}'
-                                    download='${Utils.escapeHtml(file.name)}'>&#x1f4be;</a>
-                                <span class='pull-right'>
-                                    ${file.size.toLocaleString()} bytes
-                                </span>
-                            </div>
-                        </h4>
+            const html = `<div class='card' style='white-space: normal;'>
+                    <div class='card-header' id='heading${i}'>
+                        <h6 class='mb-0'>
+                            <a class='collapsed'
+                                data-toggle='collapse'
+                                href='#collapse${i}'
+                                aria-expanded='false'
+                                aria-controls='collapse${i}'
+                                title="Show/hide contents of '${Utils.escapeHtml(file.name)}'">
+                                ${Utils.escapeHtml(file.name)}</a>
+                            <span class='float-right' style="margin-top: -3px">
+                                ${file.size.toLocaleString()} bytes
+                                <a title="Download ${Utils.escapeHtml(file.name)}"
+                                    href='${URL.createObjectURL(blob)}'
+                                    download='${Utils.escapeHtml(file.name)}'>
+                                    <i class="material-icons" style="vertical-align: bottom">save</i>
+                                </a>
+                            </span>
+                        </h6>
                     </div>
-                    <div id='collapse${i}' class='panel-collapse collapse'
-                        role='tabpanel' aria-labelledby='heading${i}'>
-                        <div class='panel-body'>
-                            <pre><code>${Utils.escapeHtml(Utils.arrayBufferToStr(buff.buffer))}</code></pre>
+                    <div id='collapse${i}' class='collapse' aria-labelledby='heading${i}' data-parent="#files">
+                        <div class='card-body'>
+                            <pre>${Utils.escapeHtml(Utils.arrayBufferToStr(buff.buffer))}</pre>
                         </div>
                     </div>
                 </div>`;
             return html;
         };
 
         let html = `<div style='padding: 5px; white-space: normal;'>
-                ${files.length} file(s) found<NL>
-            </div>`;
+                ${files.length} file(s) found
+            </div><div id="files" style="padding: 20px">`;
 
         for (let i = 0; i < files.length; i++) {
             if (files[i].name.endsWith("/")) {
@@ -886,7 +886,7 @@ class Utils {
             }
         }
 
-        return html;
+        return html += "</div>";
     }
 
 

src/core/lib/CanvasComponents.mjs

@@ -48,7 +48,7 @@ export function drawBarChart(canvas, scores, xAxisLabel, yAxisLabel, numXLabels,
         leftPadding = canvas.width * 0.08,
         rightPadding = canvas.width * 0.03,
         topPadding = canvas.height * 0.08,
-        bottomPadding = canvas.height * 0.15,
+        bottomPadding = canvas.height * 0.2,
         graphHeight = canvas.height - topPadding - bottomPadding,
         graphWidth = canvas.width - leftPadding - rightPadding,
         base = topPadding + graphHeight,
@@ -146,7 +146,7 @@ export function drawScaleBar(canvas, score, max, markings) {
         leftPadding = canvas.width * 0.01,
         rightPadding = canvas.width * 0.01,
         topPadding = canvas.height * 0.1,
-        bottomPadding = canvas.height * 0.3,
+        bottomPadding = canvas.height * 0.35,
         barHeight = canvas.height - topPadding - bottomPadding,
         barWidth = canvas.width - leftPadding - rightPadding;
 

src/core/lib/DateTime.mjs

@@ -49,8 +49,8 @@ export const DATETIME_FORMATS = [
  * MomentJS DateTime formatting examples.
  */
 export const FORMAT_EXAMPLES = `Format string tokens:
-<table class="table table-striped table-hover table-condensed table-bordered" style="font-family: sans-serif">
-  <thead>
+<table class="table table-striped table-hover table-sm table-bordered" style="font-family: sans-serif">
+  <thead class="thead-dark">
     <tr>
       <th>Category</th>
       <th>Token</th>

src/core/operations/Diff.mjs

@@ -47,9 +47,10 @@ class Diff extends Operation {
                 "value": true
             },
             {
-                "name": "Ignore whitespace (relevant for word and line)",
+                "name": "Ignore whitespace",
                 "type": "boolean",
-                "value": false
+                "value": false,
+                "hint": "Relevant for word and line"
             }
         ];
     }

src/core/operations/Magic.mjs

@@ -77,7 +77,7 @@ class Magic extends Operation {
         const currentRecipeConfig = this.state.opList.map(op => op.config);
 
         let output = `<table
-                class='table table-hover table-condensed table-bordered'
+                class='table table-hover table-sm table-bordered'
                 style='table-layout: fixed;'>
             <tr>
                 <th>Recipe (click to load)</th>

src/core/operations/ParseColourCode.mjs

@@ -113,7 +113,7 @@ CMYK: ${cmyk}
         document.getElementById('input-text').value = 'rgba(' +
             color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')';
         window.app.autoBake();
-    });
+    }).children(".colorpicker").removeClass('dropdown-menu');
 </script>`;
     }
 

src/core/operations/ParseDateTime.mjs

@@ -7,7 +7,6 @@
 import Operation from "../Operation";
 import moment from "moment-timezone";
 import {DATETIME_FORMATS, FORMAT_EXAMPLES} from "../lib/DateTime";
-import OperationError from "../errors/OperationError";
 
 /**
  * Parse DateTime operation
@@ -60,7 +59,7 @@ class ParseDateTime extends Operation {
             date = moment.tz(input, inputFormat, inputTimezone);
             if (!date || date.format() === "Invalid date") throw Error;
         } catch (err) {
-            throw new OperationError(`Invalid format.\n\n${FORMAT_EXAMPLES}`);
+            return `Invalid format.\n\n${FORMAT_EXAMPLES}`;
         }
 
         output += "Date: " + date.format("dddd Do MMMM YYYY") +

src/core/operations/ParseIPv4Header.mjs

@@ -97,7 +97,7 @@ class ParseIPv4Header extends Operation {
             checksumResult = givenChecksum + " (incorrect, should be " + correctChecksum + ")";
         }
 
-        output = `<table class='table table-hover table-condensed table-bordered table-nonfluid'><tr><th>Field</th><th>Value</th></tr>
+        output = `<table class='table table-hover table-sm table-bordered table-nonfluid'><tr><th>Field</th><th>Value</th></tr>
 <tr><td>Version</td><td>${version}</td></tr>
 <tr><td>Internet Header Length (IHL)</td><td>${ihl} (${ihl * 4} bytes)</td></tr>
 <tr><td>Differentiated Services Code Point (DSCP)</td><td>${dscp}</td></tr>

src/core/operations/ToTable.mjs

@@ -147,12 +147,12 @@ class ToTable extends Operation {
          */
         function htmlOutput(tableData) {
             // Start the HTML output with suitable classes for styling.
-            let output = "<table class='table table-hover table-condensed table-bordered table-nonfluid'>";
+            let output = "<table class='table table-hover table-sm table-bordered table-nonfluid'>";
 
             // If the first row is a header then put it in <thead> with <th> cells.
             if (firstRowHeader) {
                 const row = tableData.shift();
-                output += "<thead>";
+                output += "<thead class='thead-light'>";
                 output += outputRow(row, "th");
                 output += "</thead>";
             }

src/core/operations/TranslateDateTimeFormat.mjs

@@ -7,7 +7,6 @@
 import Operation from "../Operation";
 import moment from "moment-timezone";
 import {DATETIME_FORMATS, FORMAT_EXAMPLES} from "../lib/DateTime";
-import OperationError from "../errors/OperationError";
 
 /**
  * Translate DateTime Format operation
@@ -68,7 +67,7 @@ class TranslateDateTimeFormat extends Operation {
             date = moment.tz(input, inputFormat, inputTimezone);
             if (!date || date.format() === "Invalid date") throw Error;
         } catch (err) {
-            throw new OperationError(`Invalid format.\n\n${FORMAT_EXAMPLES}`);
+            return `Invalid format.\n\n${FORMAT_EXAMPLES}`;
         }
 
         return date.tz(outputTimezone).format(outputFormat);