diff options
Diffstat (limited to 'src/SMAPI.Web/wwwroot/Content')
-rw-r--r-- | src/SMAPI.Web/wwwroot/Content/css/file-upload.css | 25 | ||||
-rw-r--r-- | src/SMAPI.Web/wwwroot/Content/css/json-validator.css | 25 | ||||
-rw-r--r-- | src/SMAPI.Web/wwwroot/Content/css/log-parser.css | 21 | ||||
-rw-r--r-- | src/SMAPI.Web/wwwroot/Content/js/file-upload.js | 71 | ||||
-rw-r--r-- | src/SMAPI.Web/wwwroot/Content/js/json-validator.js | 51 | ||||
-rw-r--r-- | src/SMAPI.Web/wwwroot/Content/js/log-parser.js | 38 |
6 files changed, 117 insertions, 114 deletions
diff --git a/src/SMAPI.Web/wwwroot/Content/css/file-upload.css b/src/SMAPI.Web/wwwroot/Content/css/file-upload.css new file mode 100644 index 00000000..ff170691 --- /dev/null +++ b/src/SMAPI.Web/wwwroot/Content/css/file-upload.css @@ -0,0 +1,25 @@ +#inputFile { + display: none; +} + +#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/json-validator.css b/src/SMAPI.Web/wwwroot/Content/css/json-validator.css index 18195098..de0f8fed 100644 --- a/src/SMAPI.Web/wwwroot/Content/css/json-validator.css +++ b/src/SMAPI.Web/wwwroot/Content/css/json-validator.css @@ -90,28 +90,3 @@ .footer-tip a { color: gray; } - -/********* -** 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/log-parser.css b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css index 4d4ab326..bfbc8982 100644 --- a/src/SMAPI.Web/wwwroot/Content/css/log-parser.css +++ b/src/SMAPI.Web/wwwroot/Content/css/log-parser.css @@ -301,24 +301,3 @@ div[data-os] { display: none; } -#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/js/file-upload.js b/src/SMAPI.Web/wwwroot/Content/js/file-upload.js new file mode 100644 index 00000000..411efad3 --- /dev/null +++ b/src/SMAPI.Web/wwwroot/Content/js/file-upload.js @@ -0,0 +1,71 @@ +/* globals $ */ +var smapi = smapi || {}; + +/** + * Implements the logic for a log/JSON file upload form. + * + * @param {object} opts The file upload form options. + * @param {jQuery} opts.chooseFileLink The clickable link which shows the file chooser. + * @param {jQuery} opts.chooseFileInput The file input element. + * @param {jQuery} opts.contentArea The file content area. + * @param {jQuery} opts.submitButton The submit button. + */ +smapi.fileUpload = function (opts) { + /** + * Toggle the submit button if the form has content. + */ + var toggleSubmit = function () { + var hasText = !!opts.contentArea.val().trim(); + opts.submitButton.prop("disabled", !hasText); + }; + + /** + * Paste the content of a file into the content area. + * @param {File} file The file whose content to paste. + */ + var pasteFile = function (file) { + var reader = new FileReader(); + reader.onload = $.proxy(function (file, $input, event) { + $input.val(event.target.result); + toggleSubmit(); + }, this, file, $("#input")); + reader.readAsText(file); + }; + + // initialize + if (opts.contentArea.length) { + // disable submit button if it's empty + opts.contentArea.on("input", toggleSubmit); + toggleSubmit(); + + // drag & drop file + opts.contentArea.on({ + "dragover dragenter": function (e) { + e.preventDefault(); + }, + "drop": function (e) { + e.preventDefault(); + + var transfer = e.originalEvent.dataTransfer; + if (transfer && transfer.files.length) + pasteFile(transfer.files[0]); + } + }); + + // choose file + opts.chooseFileLink.on({ + "click": function (e) { + e.preventDefault(); + opts.chooseFileInput.click(); + } + }); + opts.chooseFileInput.on({ + "change": function (e) { + if (!e.target.files || !e.target.files.length) + return; + + pasteFile(e.target.files[0]); + } + }); + } +}; diff --git a/src/SMAPI.Web/wwwroot/Content/js/json-validator.js b/src/SMAPI.Web/wwwroot/Content/js/json-validator.js index 72b8192b..e9f72226 100644 --- a/src/SMAPI.Web/wwwroot/Content/js/json-validator.js +++ b/src/SMAPI.Web/wwwroot/Content/js/json-validator.js @@ -41,7 +41,7 @@ smapi.LineNumberRange = function (maxLines) { * Generate a URL hash for the current line range. * @returns {string} The generated URL hash. */ - self.buildHash = function() { + self.buildHash = function () { if (!self.minLine) return ""; else if (self.minLine === self.maxLine) @@ -54,7 +54,7 @@ smapi.LineNumberRange = function (maxLines) { * Get a list of all selected lines. * @returns {Array<int>} The selected line numbers. */ - self.getLinesSelected = function() { + self.getLinesSelected = function () { // format if (!self.minLine) return []; @@ -97,7 +97,7 @@ smapi.jsonValidator = function (urlFormat, fileId) { }); // fix line links - $(".sunlight-line-number-margin a").each(function() { + $(".sunlight-line-number-margin a").each(function () { var link = $(this); var lineNumber = parseInt(link.text()); link @@ -111,7 +111,7 @@ smapi.jsonValidator = function (urlFormat, fileId) { /** * Scroll the page so the selected range is visible. */ - var scrollToRange = function() { + var scrollToRange = function () { if (!selection.minLine) return; @@ -123,56 +123,33 @@ smapi.jsonValidator = function (urlFormat, fileId) { * Initialize the JSON validator page. */ var init = function () { + var input = $("#input"); + // set initial code formatting selection.parseFromUrlHash(location.hash); formatCode(); scrollToRange(); // update code formatting on hash change - $(window).on("hashchange", function() { + $(window).on("hashchange", function () { selection.parseFromUrlHash(location.hash); formatCode(); scrollToRange(); }); // change format - $("#output #format").on("change", function() { + $("#output #format").on("change", function () { var schemaName = $(this).val(); location.href = urlFormat.replace("$schemaName", schemaName).replace("$id", fileId); }); - // upload form - var submit = $("#submit"); - 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); - } - } + // upload form + smapi.fileUpload({ + chooseFileLink: $("#choose-file-link"), + chooseFileInput: $("#inputFile"), + contentArea: input, + submitButton: $("#submit") }); } }; diff --git a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js index e6c7591c..6ae1707e 100644 --- a/src/SMAPI.Web/wwwroot/Content/js/log-parser.js +++ b/src/SMAPI.Web/wwwroot/Content/js/log-parser.js @@ -115,12 +115,10 @@ smapi.logParser = function (data, sectionUrl) { *********/ var input = $("#input"); if (input.length) { - // get elements + // instructions per OS var systemOptions = $("input[name='os']"); var systemInstructions = $("div[data-os]"); - var submit = $("#submit"); - // instruction OS chooser var chooseSystem = function () { systemInstructions.hide(); systemInstructions.filter("[data-os='" + $("input[name='os']:checked").val() + "']").show(); @@ -128,34 +126,12 @@ smapi.logParser = function (data, sectionUrl) { systemOptions.on("click", chooseSystem); chooseSystem(); - // 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); - } - } + // file upload + smapi.fileUpload({ + chooseFileLink: $("#choose-file-link"), + chooseFileInput: $("#inputFile"), + contentArea: input, + submitButton: $("#submit") }); } }; |