diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..d1d49cb --- /dev/null +++ b/css/style.css @@ -0,0 +1,150 @@ +body { + margin: 0; + padding: .5em .5em 0; + background-color: #fafafa; + + height: 100vh; + max-height: 100vh; + + overflow-x: hidden; + overflow-y: auto; + + display: flex; + flex-direction: column; + gap: 1em; +} + +* { + font-family: Arial sans-serif; + font-size: 15pt; + + box-sizing: border-box; +} + +.settings { + display: flex; + flex-direction: column; + gap: .5em; +} + +.setting-group { + display: flex; + width: 50%; +} + +.setting-group:last-child{ + flex-direction: column; + gap: .5em; +} + +.input { + display: flex; +} + + +.setting-group:first-child, .input { + justify-content: space-between; +} + + +.setting-group label { + display: flex; + width: 50%; +} + +.setting-group input { + width: 100%; +} + +.input-field { + width: 100%; + display: flex; + gap: .5em; +} + +.args { + width: 100%; + + display: flex; + gap: .5em; + + flex-wrap: wrap; +} + +.arg { + padding: 5px 10px; + border: 1px solid; + + border-radius: 15px; + + display: flex; + + gap: .25em; + align-items: center; +} + +.delete-arg { + font-size: 15px; + color: red; + font-weight: 600; + + cursor: pointer; +} + +.content { + flex-grow: 1; + width: 100%; + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: .5em; +} + +.content .buttons { + width: 100%; + display: flex; + + justify-content: space-between; +} + +.content .buttons div { + display: flex; + justify-content: space-between; + align-items: center; + width: 49%; +} + +.content textarea { + height: 100%; + width: 49%; +} + +footer { + display: flex; + width: 100%; + padding: .5em; + margin-top: .5em; + + font-size: 12pt; + + text-align: center; + align-items: center; + justify-content: center; + + font-weight: 600; + + + color: #333; +} + +footer a { + text-decoration: none; + + color: #333; + transition: color .5s ease; +} + +footer a:hover { + color: blueviolet; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..034f0de --- /dev/null +++ b/index.html @@ -0,0 +1,97 @@ + + + + + + Text Transformer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+ +
+
+
+
+
+
+
+
Input
+
Output
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..50f57c1 --- /dev/null +++ b/js/main.js @@ -0,0 +1,130 @@ +const lang = { + langKeyEmpty: "Please enter a language key" +} + +const prefixInput = document.getElementById("key"); +const tagInput = document.getElementById("add_arg") + +const argsElement = document.getElementById("args"); + +const inputEl = document.getElementById("input"); +const outputEl = document.getElementById("output"); + +function handleInput(){ + let prefix = prefixInput.value; + console.log(prefix); + if(!prefix){ + outputEl.value = lang.langKeyEmpty; + return; + } + + let value = inputEl.value.split("\n"); + + outputEl.value = ""; + + let regex = getRegex(); + let args = getArgs(); + + let counter = 0; + + value.forEach(line => { + if(line.startsWith("#")) { + outputEl.value+=line + "\n"; + return; + } + let isListItem = false + if(line.match(/:\s+["']|-\s+["']/i) == null){ + outputEl.value+=line + "\n"; + return; + } + + isListItem = line.match(/-\s+["']/i) !=null; + + let matches = line.match(regex); + let key = isListItem ? line.split("-")[0] +"- " : line.split(":")[0] + ": "; + + if(matches == null || args.length === 0){ + outputEl.value += key + "\"[lang]"+prefix +"_"+counter+"[/lang]\"\n"; + counter++; + return; + } + + let re = /[%<\[<\{]{1}[a-zA-Z_-]+[%>\]\}]{1}/g; + + outputEl.value += key + "\"[lang]" +prefix + "_"+counter+"[args]"; + let m; + do { + m = re.exec(line); + if (m) { + if(args.indexOf(m+"") > -1){ + outputEl.value+= "[arg]" + m + "[/arg]"; + } + } + } while (m); + outputEl.value += "[/args][/lang]\"\n"; + counter++; + }); +} + + +function handleTagInput(e) { + let tagDiv = document.createElement("div"); + tagDiv.classList.add("arg") + let el = document.createElement("span"); + el.innerHTML = tagInput.value.replace("<", "<").replace(">", ">"); + tagDiv.append(el); + + let tagCloser = document.createElement("span") + tagCloser.classList.add("delete-arg"); + tagCloser.innerHTML = "X"; + tagDiv.append(tagCloser); + + tagCloser.addEventListener("click", deleteArg); + + argsElement.append(tagDiv); + tagInput.value = ""; + + handleInput() +} + +function copyResult(){ + outputEl.focus(); + outputEl.select(); + + document.execCommand("copy"); +} + +function deleteArg(e) { + e.target.removeEventListener("click", deleteArg); + e.target.parentElement.remove(); + handleInput() +} + +function getArgs(){ + let args = []; + for(let i = 0; i < argsElement.children.length; i++){ + args[i] = argsElement.children[i].children[0].innerHTML.trim().replace("<", "<").replace(">", ">"); + } + return args; +} + +function getRegex(){ + let args = getArgs(); + let regex = ""; + for(let i =0; i < args.length; i ++){ + if(i !== args.length-1) regex += args[i] + "|" + else regex += args[i]; + } + return new RegExp(regex); +} + +tagInput.addEventListener("change", handleTagInput); +prefixInput.addEventListener("input", handleInput); +inputEl.addEventListener("input", handleInput); + + +document.getElementById("date").innerHTML = new Date().getFullYear(); + +// (() => { +// let dateElem = document.getElementById("date"); +// })(); \ No newline at end of file