Merge branch 'json-validator' into develop

4 files changed, 290 insertions, 10 deletions

diff --git a/src/SMAPI.Web/wwwroot/Content/css/json-validator.css b/src/SMAPI.Web/wwwroot/Content/css/json-validator.css
new file mode 100644
index 00000000..d4a43032
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/css/json-validator.css
@@ -0,0 +1,102 @@
+/*********
+** Main layout
+*********/
+#content {
+    max-width: 100%;
+}
+
+#output {
+    padding: 10px;
+    overflow: auto;
+}
+
+#output table td {
+    font-family: monospace;
+}
+
+#output table tr th,
+#output table tr td {
+    padding: 0 0.75rem;
+    white-space: pre-wrap;
+}
+
+
+/*********
+** Result banner
+*********/
+.banner {
+    border: 2px solid gray;
+    border-radius: 5px;
+    margin-top: 1em;
+    padding: 1em;
+}
+
+.banner.success {
+    border-color: green;
+    background: #CFC;
+}
+
+.banner.error {
+    border-color: red;
+    background: #FCC;
+}
+
+/*********
+** Validation results
+*********/
+.table {
+    border-bottom: 1px dashed #888888;
+    margin-bottom: 5px;
+}
+
+#metadata th, #metadata td {
+    text-align: left;
+    padding-right: 0.7em;
+}
+
+.table {
+    border: 1px solid #000000;
+    background: #ffffff;
+    border-radius: 5px;
+    border-spacing: 1px;
+    overflow: hidden;
+    cursor: default;
+    box-shadow: 1px 1px 1px 1px #dddddd;
+}
+
+.table tr {
+    background: #eee;
+}
+
+.table tr:nth-child(even) {
+    background: #fff;
+}
+
+#output div.sunlight-line-highlight-active {
+    background-color: #eeeacc;
+}
+
+/*********
+** Upload form
+*********/
+#input {
+    width: 100%;
+    height: 20em;
+    max-height: 70%;
+    margin: auto;
+    box-sizing: border-box;
+    border-radius: 5px;
+    border: 1px solid #000088;
+    outline: none;
+    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 192, .2);
+}
+
+#submit {
+    font-size: 1.5em;
+    border-radius: 5px;
+    outline: none;
+    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, .2);
+    cursor: pointer;
+    border: 1px solid #008800;
+    background-color: #cfc;
+}
diff --git a/src/SMAPI.Web/wwwroot/Content/css/main.css b/src/SMAPI.Web/wwwroot/Content/css/main.css
index 57eeee88..dcc7a798 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/main.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/main.css
@@ -73,7 +73,7 @@ a {
 }
 
 #sidebar h4 {
-    margin: 0 0 0.2em 0;
+    margin: 1.5em 0 0.2em 0;
     width: 10em;
     border-bottom: 1px solid #CCC;
     font-size: 0.8em;
diff --git a/src/SMAPI.Web/wwwroot/Content/js/json-validator.js b/src/SMAPI.Web/wwwroot/Content/js/json-validator.js
new file mode 100644
index 00000000..265e0c5e
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/js/json-validator.js
@@ -0,0 +1,179 @@
+/* globals $ */
+
+var smapi = smapi || {};
+
+/**
+ * Manages the logic for line range selections.
+ * @param {int} maxLines The maximum number of lines in the content.
+ */
+smapi.LineNumberRange = function (maxLines) {
+    var self = this;
+
+    /**
+     * @var {int} minLine The first line in the selection, or null if no lines selected.
+     */
+    self.minLine = null;
+
+    /**
+     * @var {int} maxLine The last line in the selection, or null if no lines selected.
+     */
+    self.maxLine = null;
+
+    /**
+     * Parse line numbers from a URL hash.
+     * @param {string} hash the URL hash to parse.
+     */
+    self.parseFromUrlHash = function (hash) {
+        self.minLine = null;
+        self.maxLine = null;
+
+        // parse hash
+        var hashParts = hash.match(/^#L(\d+)(?:-L(\d+))?$/);
+        if (!hashParts || hashParts.length <= 1)
+            return;
+
+        // extract min/max lines
+        self.minLine = parseInt(hashParts[1]);
+        self.maxLine = parseInt(hashParts[2]) || self.minLine;
+    };
+
+    /**
+     * Generate a URL hash for the current line range.
+     * @returns {string} The generated URL hash.
+     */
+    self.buildHash = function() {
+        if (!self.minLine)
+            return "";
+        else if (self.minLine === self.maxLine)
+            return "#L" + self.minLine;
+        else
+            return "#L" + self.minLine + "-L" + self.maxLine;
+    }
+
+    /**
+     * Get a list of all selected lines.
+     * @returns {Array<int>} The selected line numbers.
+     */
+    self.getLinesSelected = function() {
+        // format
+        if (!self.minLine)
+            return [];
+
+        var lines = [];
+        for (var i = self.minLine; i <= self.maxLine; i++)
+            lines.push(i);
+        return lines;
+    };
+
+    return self;
+};
+
+/**
+ * UI logic for the JSON validator page.
+ * @param {any} sectionUrl The base JSON validator page URL.
+ * @param {any} pasteID The Pastebin paste ID for the content being viewed, if any.
+ */
+smapi.jsonValidator = function (sectionUrl, pasteID) {
+    /**
+     * The original content element.
+     */
+    var originalContent = $("#raw-content").clone();
+
+    /**
+     * The currently highlighted lines.
+     */
+    var selection = new smapi.LineNumberRange();
+
+    /**
+     * Rebuild the syntax-highlighted element.
+     */
+    var formatCode = function () {
+        // reset if needed
+        $(".sunlight-container").replaceWith(originalContent.clone());
+
+        // apply default highlighting
+        Sunlight.highlightAll({
+            lineHighlight: selection.getLinesSelected()
+        });
+
+        // fix line links
+        $(".sunlight-line-number-margin a").each(function() {
+            var link = $(this);
+            var lineNumber = parseInt(link.text());
+            link
+                .attr("id", "L" + lineNumber)
+                .attr("href", "#L" + lineNumber)
+                .removeAttr("name")
+                .data("line-number", lineNumber);
+        });
+    };
+
+    /**
+     * Scroll the page so the selected range is visible.
+     */
+    var scrollToRange = function() {
+        if (!selection.minLine)
+            return;
+
+        var targetLine = Math.max(1, selection.minLine - 5);
+        $("#L" + targetLine).get(0).scrollIntoView();
+    };
+
+    /**
+     * Initialise the JSON validator page.
+     */
+    var init = function () {
+        // set initial code formatting
+        selection.parseFromUrlHash(location.hash);
+        formatCode();
+        scrollToRange();
+
+        // update code formatting on hash change
+        $(window).on("hashchange", function() {
+            selection.parseFromUrlHash(location.hash);
+            formatCode();
+            scrollToRange();
+        });
+
+        // change format
+        $("#output #format").on("change", function() {
+            var schemaName = $(this).val();
+            location.href = new URL(schemaName + "/" + pasteID, sectionUrl).toString();
+        });
+
+        // upload form
+        var input = $("#input");
+        if (input.length) {
+            // disable submit if it's empty
+            var toggleSubmit = function () {
+                var hasText = !!input.val().trim();
+                submit.prop("disabled", !hasText);
+            };
+            input.on("input", toggleSubmit);
+            toggleSubmit();
+
+            // drag & drop file
+            input.on({
+                'dragover dragenter': function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                },
+                'drop': function (e) {
+                    var dataTransfer = e.originalEvent.dataTransfer;
+                    if (dataTransfer && dataTransfer.files.length) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        var file = dataTransfer.files[0];
+                        var reader = new FileReader();
+                        reader.onload = $.proxy(function (file, $input, event) {
+                            $input.val(event.target.result);
+                            toggleSubmit();
+                        }, this, file, $("#input"));
+                        reader.readAsText(file);
+                    }
+                }
+            });
+        }
+    };
+    init();
+};
diff --git a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
index e87a1a5c..e6c7591c 100644
--- a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
+++ b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js
@@ -23,7 +23,7 @@ smapi.logParser = function (data, sectionUrl) {
     }
 
     // set local time started
-    if(data)
+    if (data)
         data.localTimeStarted = ("0" + data.logStarted.getHours()).slice(-2) + ":" + ("0" + data.logStarted.getMinutes()).slice(-2);
 
     // init app
@@ -100,7 +100,7 @@ smapi.logParser = function (data, sectionUrl) {
                 updateModFilters();
             },
 
-            filtersAllow: function(modId, level) {
+            filtersAllow: function (modId, level) {
                 return this.showMods[modId] !== false && this.showLevels[level] !== false;
             },
 
@@ -121,16 +121,15 @@ smapi.logParser = function (data, sectionUrl) {
         var submit = $("#submit");
 
         // instruction OS chooser
-        var chooseSystem = function() {
+        var chooseSystem = function () {
             systemInstructions.hide();
             systemInstructions.filter("[data-os='" + $("input[name='os']:checked").val() + "']").show();
-        }
+        };
         systemOptions.on("click", chooseSystem);
         chooseSystem();
 
         // disable submit if it's empty
-        var toggleSubmit = function()
-        {
+        var toggleSubmit = function () {
             var hasText = !!input.val().trim();
             submit.prop("disabled", !hasText);
         }
@@ -139,18 +138,18 @@ smapi.logParser = function (data, sectionUrl) {
 
         // drag & drop file
         input.on({
-            'dragover dragenter': function(e) {
+            'dragover dragenter': function (e) {
                 e.preventDefault();
                 e.stopPropagation();
             },
-            'drop': function(e) {
+            'drop': function (e) {
                 var dataTransfer = e.originalEvent.dataTransfer;
                 if (dataTransfer && dataTransfer.files.length) {
                     e.preventDefault();
                     e.stopPropagation();
                     var file = dataTransfer.files[0];
                     var reader = new FileReader();
-                    reader.onload = $.proxy(function(file, $input, event) {
+                    reader.onload = $.proxy(function (file, $input, event) {
                         $input.val(event.target.result);
                         toggleSubmit();
                     }, this, file, $("#input"));