From f3da9d25f3c21cc1e1247ee43db0601703f6b24a Mon Sep 17 00:00:00 2001
From: Simpel <git@simpel.cc>
Date: Tue, 7 Dec 2021 17:09:16 +0100
Subject: [PATCH] initial commit
---
index.html | 47 ++++++++++++++++++++++++
script.js | 67 ++++++++++++++++++++++++++++++++++
style.css | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 219 insertions(+)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9311629
--- /dev/null
+++ b/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html dir="ltr" lang="en-US">
+
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui" />
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="translucent black" />
+ <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no" />
+ <link rel="stylesheet" href="style.css">
+ <title>Sort Lines</title>
+</head>
+
+<body onKeyDown="keys(event,'d')" onKeyUp="keys(event,'u')">
+ <header>
+ <nav>
+ <h1>Sort Lines</h1>
+ <a id="logo" class="cursordefault" href="/"><img src="../Simpel.png" alt="simpel icon" height="48" width="48"></a>
+ <a id="github" href="https://github.com/SimpelMe/sort-lines" target="_blank" title="watch source code">
+ <img id="github-cat" src="../github-cat-white.png" alt="github logo">
+ </a>
+ </nav>
+ </header>
+ <main>
+ <noscript>
+ <b>Warning: JavaScript had to be enabled.</b>
+ <br><br>
+ </noscript>
+ <details>
+ <summary>How to sort</summary>
+ <p>With this tool you can sort newline separated lines alphabetically.</p>
+ <p>You can either push the button "Paste, Sort, Unique & Copy" where the clipboard content is used as content or fill in your lines into textarea and push the button "Sort, Unique & Copy". In both cases the sorted result will be put back to clipboard.</p>
+ </details>
+<div class="flex">
+ <button class="button pastesortunique" title="click: paste + sort + unique + copy to clipboard" onclick="paste()">Paste, Sort, Unique & Copy [1]</button>
+ <span class="between_buttons">or</span>
+ <button class="button sortunique" title="click: sort + unique + copy to clipboard" onclick="sort_and_copy()">Sort, Unique & Copy [2]</button>
+ <input id="unique" type="checkbox" name="unique" checked>
+ <label for="unique">output unique lines only</label>
+</div>
+ <textarea autofocus placeholder="fill in lines to sort here …" spellcheck="false" autocomplete="off">
+</textarea>
+ </main>
+</body>
+<script src="script.js"></script>
+
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..d7703d1
--- /dev/null
+++ b/script.js
@@ -0,0 +1,67 @@
+var button_pastesortunique, button_sortunique, textarea;
+
+button_pastesortunique = document.querySelector("body > main > div > button.button.pastesortunique");
+button_sortunique = document.querySelector("body > main > div > button.button.sortunique");
+textarea = document.querySelector("body > main > textarea");
+
+function natural_compare(a, b){
+ var ax = []
+ ,bx = []
+ ;
+
+ a.replace(/(\d+)|(\D+)/g, function(_, $1, $2) { ax.push([$1 || Infinity, $2 || ""]) });
+ b.replace(/(\d+)|(\D+)/g, function(_, $1, $2) { bx.push([$1 || Infinity, $2 || ""]) });
+
+ while(ax.length > 0 && bx.length > 0) {
+ var an, bn, nn;
+ an = ax.shift();
+ bn = bx.shift();
+ nn = (an[0] - bn[0]) || an[1].localeCompare(bn[1]);
+ if(0 !== nn) return nn;
+ }
+
+ return ax.length - bx.length;
+}
+
+function sort_and_copy(ev){
+ var lines = textarea.value.replace(/[\r\n]+/gm,"\n").split("\n")
+ ,tmp = {}
+ ,i
+ ;
+
+ // make lines unique
+ let check_unique = document.querySelector("#unique");
+ if (check_unique.checked) {
+ for(i=0; i<lines.length; i++)
+ tmp[ lines[i] ] = "";
+ lines = Object.keys(tmp);
+ }
+
+ lines = lines.sort(natural_compare);
+ textarea.value = lines.join("\n");
+
+ window.getSelection().removeAllRanges();
+ try{
+ textarea.select();
+ document.execCommand("copy");
+ }catch(err){}
+
+ window.getSelection().removeAllRanges();
+ textarea.selectionStart = 0;
+ textarea.selectionEnd = 0;
+ textarea.focus();
+}
+
+function paste() {
+ navigator.clipboard.readText()
+ .then(text => {
+ textarea.value = text;
+ sort_and_copy();
+ });
+}
+
+function keys(e, r) // r fuer Richtung der Taste: 'd' down 'u' up
+{
+ if (e.key == "1" && r == 'd') paste();
+ if (e.key == "2" && r == 'd') sort_and_copy();
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d1e68da
--- /dev/null
+++ b/style.css
@@ -0,0 +1,105 @@
+body {
+ min-height: 50vh;
+ font-family: helvetica, Arial, sans-serif;
+ font-size: 2vmin;
+ background-color: #555;
+ color: white;
+ margin: 3vmin 4vmin 2vmin 4vmin;
+}
+
+/* iPad portait */
+@media (max-width: 768px) {
+ body {
+ font-size: 3vmin;
+ }
+}
+
+/* iPhone landscape only */
+@media (max-width: 568px) {
+ body {
+ font-size: 4vmin;
+ }
+}
+
+/* iPhone portait only */
+@media (max-width: 320px) {
+ body {
+ font-size: 4vmin;
+ }
+}
+
+*:focus {
+ outline: 2px solid white;
+ outline-offset: 2px;
+}
+
+a {
+ color: #ffffff;
+ text-decoration: none;
+}
+
+h1 {
+ padding-left: 60px;
+ line-height: 52px;
+ margin-top: 3vmin;
+}
+
+#logo {
+ float: left;
+ position: absolute;
+ top: 3vmin;
+}
+
+#github {
+ position: absolute;
+ top: 3.3vmin;
+ right: 4vmin;
+}
+
+#github-cat {
+ height: 4vh;
+}
+
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+ column-gap: 1.5rem;
+ row-gap: 0.5rem;
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+}
+
+.button {
+ align-self: flex-end;
+}
+
+.between_buttons, input[type="checkbox"], label {
+ align-self: center;
+}
+
+button {
+ font-size: 1em;
+ padding: 5px 10px;
+ color: white;
+ border: 2px solid white;
+ cursor: pointer;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ border-color: white;
+ background-color: #333;
+}
+
+input[type="checkbox"] {
+ margin-left: 1vmin;
+}
+
+label {
+ margin-left: -1vmin;
+}
+
+textarea {
+ font-size: larger;
+ width: calc(100vw - 8vmin);
+ height: 76vh;
+ margin-top: 2vmin;
+}
--
GitLab