From 4dfec145e974ff9d8706f6d55e8db888f51e00dc Mon Sep 17 00:00:00 2001 From: g2384 Date: Wed, 13 Mar 2019 16:54:26 +0000 Subject: [PATCH] add style.css, support all browsers --- README.md | 6 + VHDLFormatter.js | 4 +- VHDLFormatter.ts | 4 +- index.html | 357 +++++++++++++++-------------------------------- style.css | 305 ++++++++++++++++++++++++++++++++++++++++ 5 files changed, 430 insertions(+), 246 deletions(-) create mode 100644 style.css diff --git a/README.md b/README.md index 0db6daf..56cb888 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,12 @@ VHDL formatter web online written in javascript ## Release Notes +### 2.5 [2018-03-13] + +- keep the front page concise +- add `style.css` +- support all browsers (do not use `RegExp Lookbehind Assertions`) + ### 2.4 [2018-02-23] - use local storage to store settings diff --git a/VHDLFormatter.js b/VHDLFormatter.js index cde5b79..4c9b847 100644 --- a/VHDLFormatter.js +++ b/VHDLFormatter.js @@ -144,7 +144,7 @@ function SetNewLinesAfterSymbols(text, newLineSettings) { var rexString = "(" + upper + ")[ ]?([^ \r\n@])"; let regex = null; if (upper.regexStartsWith(/\w/)) { - regex = new RegExp("(? VHDL Beautifier, Formatter Online - + @@ -557,8 +370,34 @@ hljs.highlightBlock(document.getElementById("vhdl")); return; } - var remove_comments = document.getElementById("remove_comments").checked; + var remove_lines = document.getElementById("remove_lines").checked; + var mix_letter = document.getElementById("mix_letter").checked; + [beautifierSettings, compress] = CreateSettings(); + vhdlSettings = new VhdlSettings(beautifierSettings, remove_lines, compress, mix_letter); + saveSetting(vhdlSettings); + + input = beautify(input, beautifierSettings); + + if (remove_lines) { + input = input.replace(/(\r\n)*[ \t]*\r\n/g, '\r\n'); + } + + if (compress) { + input = Compress(input); + } + + if (mix_letter) { + input = MixLetters(input); + } + + document.getElementById("vhdl").innerHTML = input; + document.querySelector(".show").style.display = "inline-block"; + hljs.highlightBlock(document.getElementById("vhdl")); + } + + function CreateSettings() { + var remove_comments = document.getElementById("remove_comments").checked; var remove_report = document.getElementById("remove_report").checked; var check_alias = document.getElementById("check_alias").checked; var sign_align_port = document.getElementById("sign_align_port").checked; @@ -576,8 +415,7 @@ var compress = document.getElementById("compress").checked; var cust_indent = document.getElementById("customise_indentation").value; var keywordcase = document.getElementById("keyword_div").elements.namedItem("keywordcase").value; - var typenamecase = document.getElementById("typename_div").elements.namedItem("typenamecase").value; - var mix_letter = document.getElementById("mix_letter").checked; + var typenamecase = document.getElementById("typename_div").elements.namedItem("typenamecase").value; var endOfLine = document.getElementById("cust_eol").value; endOfLine = endOfLine.replace(/\\r/g, "\r"); endOfLine = endOfLine.replace(/\\n/g, "\n"); @@ -625,26 +463,13 @@ newLineSettings, endOfLine); - vhdlSettings = new VhdlSettings(beautifierSettings, remove_lines, compress, mix_letter); - saveSetting(vhdlSettings); - - input = beautify(input, beautifierSettings); - - if (remove_lines) { - input = input.replace(/(\r\n)*[ \t]*\r\n/g, '\r\n'); - } - - if (compress) { - input = Compress(input); - } - - if (mix_letter) { - input = MixLetters(input); - } + return [beautifierSettings, compress]; + } - document.getElementById("vhdl").innerHTML = input; - document.querySelector(".show").style.display = "inline-block"; - hljs.highlightBlock(document.getElementById("vhdl")); + function outputSetting() { + [beautifierSettings, compress] = CreateSettings(); + var json = JSON.stringify(beautifierSettings, null, 4); + document.getElementById("vhdl").innerHTML = json; } function saveSetting(setting) { @@ -679,6 +504,54 @@ this.mixLetter = mixLetter; } } + + var warning = document.getElementById('warning'); + var info = document.getElementById('info'); + var happy = document.getElementById('happy'); + + var closeInfo = document.getElementById("close-info"); + var closeWarning = document.getElementById("close-warning"); + var closeHappy = document.getElementById("close-happy"); + + function showWarning() { + warning.style.display = "block"; + } + + function showInfo() { + info.style.display = "block"; + } + + function showHappy() { + happy.style.display = "block"; + } + + closeInfo.onclick = function() { + hidePopups(); + } + + closeWarning.onclick = function() { + hidePopups(); + } + + closeHappy.onclick = function(){ + hidePopups(); + } + + function hidePopups() { + warning.style.display = "none"; + info.style.display = "none"; + happy.style.display = "none"; + } + + // When the user clicks anywhere outside of the modal, close it + window.onclick = function(event) { + var target = event.target; + if (target == warning + || target == info + || target == happy) { + hidePopups(); + } + } diff --git a/style.css b/style.css new file mode 100644 index 0000000..de14016 --- /dev/null +++ b/style.css @@ -0,0 +1,305 @@ +body { + margin: 0 auto; + max-width: 960px; + tab-size: 4; + font-family: arial, sans-serif; +} + +textarea { + width: 100%; + border: solid 1px #9a9a9a; + padding: 3px; + font-family: 'Consolas', Courier, monospace; +} + +fieldset { + width: fit-content; + border: 1px solid #9a9a9a; + margin: 25px 0 5px 0; + padding-left: 0; +} + +legend { + padding: 2px 5px; + background-color: #e0e0e0; + border-radius: 2px; + margin: -27px 0 0 -1px; + position: absolute; +} + +.subtitle { + font-weight: normal; +} + +.btn { + margin: 10px 10px; + padding: 5px 8px; + font-size: 16px; + line-height: 1.33; + border-radius: 3px; + color: #333; + border-color: #ccc; + cursor: pointer; + text-align: center; + white-space: nowrap; + border: 1px solid rgb(194, 194, 194); + background-color: #fff; +} + +.btn:hover { + background-color: #eee; +} + +.show { + display: none; +} + +.wordwrap { + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + word-wrap: break-word; +} + +label { + cursor: pointer; + line-height: 1.5em; +} + +label:hover { + color: #555; + text-decoration: underline; +} + +form { + margin-bottom: 0px; +} + +form span { + width: 170px; + display: inline-block; + text-align: right; +} + +a { + color: #4b9aff; + text-decoration: none; + background: #f0f8ff; + padding: 2px 5px; + border-radius: 3px; + font-size: 0.8em; + cursor: pointer; +} + +a:hover { + text-decoration: none; + background: #d6e8ff; +} + +.plain-link { + color: #000; + background: none; + text-decoration: none; +} + +.plain-link :hover { + text-decoration: none; + background: none; +} + +p { + line-height: 1em; + margin: 0.5em 0em; +} + +.content { + margin: 10px; +} + +.code { + font-family: 'Consolas', Courier, monospace; +} + +.inline { + display: inline-block; +} + +.disabled { + color: #ccc; + cursor: default; +} + +.disabled label:hover { + color: #ccc; + text-decoration: none; + cursor: default; +} + +.checkbox input[type="checkbox"] { + opacity: 0; + display: none; +} + +.checkbox label { + position: relative; + display: inline-block; + /*16px width of fake checkbox + 6px distance between fake checkbox and text*/ + padding-left: 22px; +} + +.checkbox label::before, +.checkbox label::after { + position: absolute; + content: ""; + /*Needed for the line-height to take effect*/ + display: inline-block; +} + +/*Outer box of the fake checkbox*/ + +.checkbox label::before { + height: 16px; + width: 16px; + border: 1px solid #9A9A9A; + left: 0px; + /*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border to vertically center it.*/ + top: 3px; +} + +/*Checkmark of the fake checkbox*/ + +.checkbox label::after { + height: 5px; + width: 9px; + border-left: 2px solid; + border-bottom: 2px solid; + transform: rotate(-45deg); + left: 4px; + top: 7px; + color: #333; +} + +/*Hide the checkmark by default*/ + +.checkbox input[type="checkbox"]+label::after { + content: none; +} + +/*Unhide on the checked state*/ + +.checkbox input[type="checkbox"]:checked+label::after { + content: ""; +} + +/*Adding focus styles on the outer-box of the fake checkbox*/ + +.checkbox input[type="checkbox"]:hover+label::after { + border-color: #888; + outline: #ccc; +} + +.checkbox input[type="checkbox"]:hover+label::before { + outline: #888; + border-color: #888; + background-color: #eee; +} + +.checkbox input[type="checkbox"]:disabled+label::before { + outline: #ccc; + border-color: #ccc; + background-color: #fff; + color: #ccc; +} + +.checkbox input[type="checkbox"]:disabled+label::after { + color: #888; +} + +.checkbox input[type="checkbox"]:focus+label::before { + outline: #333 auto 5px; +} + +.inline-note { + color: #888; + margin-left: 10px; + display: inline-block; +} + +.hide { + display: none; +} + +#settings_control { + margin: 10px 0px; + display: inline-block; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-content { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +.tooltip { + cursor: pointer; + position: relative; + display: inline-block; + border-bottom: 1px dotted black; +} + +.tooltip .tooltiptext { + visibility: hidden; + opacity: 0; + width: 220px; + background-color: black; + color: #fff; + text-align: left; + padding: 5px 3px; + border-radius: 5px; + top: 100%; + left: 50%; + position: absolute; + z-index: 1; + -webkit-transition: opacity 1s ease-in-out; + transition: opacity 1s ease-in-out; +} + +.tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +} + +.emoji { + padding: 2px; + font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol; +} \ No newline at end of file