From 8991febab3704ec1c9878a9371aeffb96acb557f Mon Sep 17 00:00:00 2001 From: Boris Kubiak Date: Sun, 26 Apr 2020 17:45:06 +0200 Subject: [PATCH] Add line-wrapping feature & a few icons --- README.md | 4 +- index.html | 110 +++++++++++++++++++++++++++++++++++++++++------------ index.js | 16 +++++++- style.css | 30 ++++++++++----- 4 files changed, 124 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index cf1da4d..c5a6e5d 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Instead, the data is **compressed** then **stored** into a unique URL that can b As a result, there is no risk of data being lost, censored or deleted. The whole data stored is **in the link** and nowhere else! 🤯 -**Note:** This project is a copy of [Topaz's paste service][topaz-example], with a reworked design and a few additional features (syntax highlighting, line numbers, embedding...) +**Note:** This project is a copy of [Topaz's paste service][topaz-example], with a reworked design and a few additional features (syntax highlighting, line numbers, line wrapping, embedding...) ## How it works @@ -25,5 +25,5 @@ You can include NoPaste code snippets into your own website by clicking the _Emb Feel free to edit the generated `height` and `width` attributes, so they suit your needs [intro-img]: https://nopaste.ml/XQAAAQA6BAAAAAAAAAAFYH9Ev4Ly6wIDoAZQ25VXENWodOrWpmx8bfd8j6jeNeL/0fGICEpU6gh9GhXuFjqBBpJFOvefaxUXJquUWRQarmV+S0SHFOLUFyg/dw8OQI6RB6Y1yliOBWGL916HxAGqgwyLqjkH4w450OLk+q9oJYS6PrZfXU5uBC5DLe76OkG25ibvbsasKN51JuVyRedgoF/d7F9d6L7p02q0jHAM9pnPpKOKqlIVsNnXwYKXK10tnZ0GdiwJ3EeT//52uhw=?lang=python -[example]: https://nopaste.ml/XQAAAQAJCgAAAAAAAAAXioAj/ZZaukKWizx++f8w08qY4GA8LGtu7D/+DJgBVbs7/H2nJiaW8ID1VsHyIYWju5V2entWd4LyJ3xLdIHOdqb6g4zCuKHW0LDkvxJASgscbV2ZWQYLqVAGQt2rZZb+5p53hL6Z3WVof2ddJK47JK2Q1NCpMOZAcKeH9qzh9kDYOOB3NrWiyPoQMYdvZrGIhl7witUWpqgp6yr+ktHW4199Cdzdx1pOwNcRHkMIf8lCsLbb3O0QELaOwY11bn1qgoSFSRSNdClnM3V8rZkAAhE3RbRh0zUBGqjBkDqa0Yjw5ZrNIIm1v8aSd0s2ygAcrwfWhm1vQEfJLbScPHXYJ2zeB6QYodQyRb47gvQ2KTVGJhmfJaeh4/9Vz1lArsRUhbXrTOl4fS1tOI+etrSMv1tkPP12MrEGUjFPiioVd+RIOWG+g9AFKte9YJM5E5XQgOiOAnt/O4eHw+Hd3ssC+Y5MpZXlSUck3v0Vzn3mW0NyygeT3VpdvtruJ2WMXvPAkF9nHbf2DCIVf5TOCqhLOtDrhYENn225Suw3XVhp9U7mzCNLIXFMZdFGNMhXQDaGgo9gxRiSVurY6BeUKGezHjcSCJKszaweI3/+FDdb7hKVHXzCppXITy5tEI41fOzJ54l3cDn9G0oGl8wrNdP5Enp5y/R+NwXq2LJra1oDYUO8E1A+Kk3c5w6z5Vq1+qgWlzjdIgkQ+7a3Aycnl43zA+cPNMHJaJ+HyaMUxCOp/NX++0Cq3EVfuPAQddyP+hewz0q479ktMOQf+f6a+D0Kkz4U47LIBA+6cN9vy07MSZyy0txqWbXVC6HmxeVrhfR9VrshwwvZniXuDewi8+jm0hhr0KosTLs+8pjbqrB7du2szOIJUEzdB5AaFROEoTUL8BWHFGnLmh42kujEKrGdaMrDdm6MgA9qRg7ioyFAvhvrLZ33zMDgNRtQ3rMmtYusQOx2XAtTtHQQI5fwuRck0ZWPeVMUFLo8AcCl06kNwtG8XxnRzkRaoiieulaOi2kVEUl/FBBgKt08Xar1j5xTlV0VtL0NLIAC8LqGtyjqvZUxafmwAHZc/16zBnylT1v4mJfCgJa+Y/Inj9OFDQL5yPa5crUoDEdjtyFQCOo6pVd189UkR/PhNp4LyZT9llIyzfcSqtMN235OxHcwc6WWek5P0/sN+Kq1PS//UrDrBtvl0XFegyPa3AO5F+67vjmJNdmogMVxI3cffIsYG123ujkiRHNcU/uT7XJhw6xMPu/e10HiMEz/8VclWg==?lang=css +[example]: https://nopaste.ml/XQAAAQAWDQAAAAAAAAAXioAj/ZZaukKWizx++f8w08qY+xe+w0AeNB0EtEDMR1jPECOrMSz2rcy5XqUVTzusmFXo407ujwufsB1Va3cy02BV4Chx15I+SbM8Ei2WS8/MaZa0wIOjHf0s6B9Kcwi1J73qYeIcKm39PEWGnBM4Ym5aXFOF1Irrn1N95vEcl4YI+98rydudZHmsNCmt995GvCpLImwH7yj3SlMadWaQA0jHCrY1ZBvhjSJ9mAAdYjCJLduITZuXomgpqtr3sYI1WKeRGNmPSD8J8WRLtCx0BZl3yWZZrUxJbmVod8cYiPJnlO+CzQA03qA/GZnxhMYd9TPc2Xlq8UIhBX6gmvo/xhHJc/WHnuBFB32xJ37O5FZlZuXGy6wFE/lakVteoqEqgvyaoBBB7p/UrGWZ0h4Wd8Hc3ceZ7KjJwmu2wLmbnWNnZ+bpusiwWhRNzdD/7u4a0FLd21QpiH8iXr9oQOFOctkswDCs8h1dio2ZWUFDAqVC586qrdFgrKRtCuJF9Zwlf2tQLY0BvyiK0c5EedA1rXK55OevIfKb6FVCUIbJVbcV/F9HpOY94Dha5mrokfqF7zj2fzRHR/1y2LEfmnt/wxN3Y5nwbm5rH6NDsCKadz9f0HzqVmgXW6p5SaxcT472M8dwmLM6yxNp5af7bpn33zyJhBhQifJciHOVJX+7oU7hfU/dmmt2fknBqRYv1WDbypIDe1TeKBba9sW7XFJChXGjZRhtinSL94WtDc7/l/USbiv9iAfBAVHs0XzU7naUtAKUFLyDqo4UWpauv4sNzaA7n5BbvPm+/xz+0uVgBsZBUyLpz/OUNGYaqbGFv44IVt99K3/cJwu8najWju0S6JJzZsSdI4CY4fHQ8bcI+WPUDzf49CE9hxZIVO5dCjmtnXs68RqSD4/wq6IwIGS6d8oku/0R/InHjqE2dZa0tU2Ko8DIIgrDnW1DNt89D/gWOQFOXN5+o3Mp1vgQL6AImLzudbiVamcAkrAVbRDcaq3AeI3dH1gKkvDUvpbSJuc+yPFRtnDByfTxt1EQCmbbCLck2UHQF4tWtJ2eQT4ICYborFh6Ams1TsOAUua5xqYGo9HXtDLeWcz21rNOtnc+Jtc+AtMg2UmEMZJXm+Jk/n280FNm+B6hbkafsHDJNQKyxCFX+N7/1yfwgVCkCKd3Hrad8ETI5rgso718tUiC0i4odYMpHCw2WfKUZm2DCUzmcEW9v8PWIM8okPFM+NgWNhusqQsilOu3RePRWdzdMpz/vt4w6qMJZMKDq/7C8eDPoxomrVCd++WA1v7qL46pT9ivyEMoQtagUsCaaj92Y9EoVkL5BbSl9yEkRA2LEIZf//FGYpQ97eu0KWgHDpGIdoQPh7RQB7oJgSA4i2x9n6iYn0HrlJKGgw+QXskkrBlWZsxua/6MWK/bqga14G3PqoB0CFXMhRcf4d4xUJiwUURFsaisIaMQM6Sy2O9TQN8wjEE7XYRTAgLfVIG8QyH3sBqXp00UaFouDRv0jRybuh0I1weudvBlJXcpTb6S0r2DjVr0u7Uy5b9LojNdXkuMZh4vGX5ZfW0bs2H0WPG5+11buP4A4u8IXIMD76Yt+p3GylpzO1PXbIjLhP5FnEc=?lang=css [topaz-example]: https://topaz.github.io/paste/#XQAAAQDzAAAAAAAAAAAFFgvDUiqpf8dDPleMqfsqtbQYE28suCtDTB9iyFgGByXgSRMepMuokjoACV4UPgBzwM3p+V/N2rCi8m90FkQfsRuMJ4LrZVFgr81wKDc2okcywbJBz7OGNPpc8xu2lAkpSekqRO+I/OYMpqBE6w6JLw+cFocCptTbd+jBPuNfBVQrhYyQ3mN0BXmj+rejvVB8jG6J/HPP4u+m32pm0UBS0eb8rmaeDnanRkVI8/gs09nh8YK93sjVfIOAYOXoB2da//bUcos= diff --git a/index.html b/index.html index e267413..1959db0 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@ npm/codemirror@5.52.0/theme/dracula.min.css @@ -53,18 +53,48 @@ npm/codemirror@5.52.0/theme/dracula.min.css
-
+

{ NoPaste }

+
+ + + + + + +
+
-
- - + +
+
+ + - +
@@ -73,25 +103,56 @@ npm/codemirror@5.52.0/theme/dracula.min.css
-
- What is NoPaste? - - -
-
- Github -
- - - + + diff --git a/index.js b/index.js index 9b5a75e..5c4bdcc 100644 --- a/index.js +++ b/index.js @@ -20,6 +20,7 @@ const initCodeEditor = () => { lineNumbers: true, theme: 'dracula', readOnly: readOnly, + lineWrapping: true, scrollbarStyle: 'simple', }); if (readOnly) { @@ -90,10 +91,11 @@ const generateLink = (mode) => { // Open the "Copy" bar and select the content const showCopyBar = (dataToCopy) => { + byId('copy').classList.remove('hidden'); const linkInput = byId('copy-link'); linkInput.value = dataToCopy; + linkInput.focus(); linkInput.setSelectionRange(0, dataToCopy.length); - byId('copy').classList.remove('hidden'); }; // Close the "Copy" bar @@ -111,6 +113,18 @@ const hideCopyBar = (success) => { }, 800); }; +const disableLineWrapping = () => { + byId('disable-line-wrapping').classList.add('hidden'); + byId('enable-line-wrapping').classList.remove('hidden'); + editor.setOption('lineWrapping', false); +}; + +const enableLineWrapping = () => { + byId('enable-line-wrapping').classList.add('hidden'); + byId('disable-line-wrapping').classList.remove('hidden'); + editor.setOption('lineWrapping', true); +}; + // Build a shareable URL const buildUrl = (rawData, mode) => { const url = `${location.protocol}//${location.host}/` + rawData + `?lang=${encodeURIComponent(select.selected())}`; diff --git a/style.css b/style.css index fa0a540..101c2dd 100644 --- a/style.css +++ b/style.css @@ -56,6 +56,7 @@ a, a:hover, a:active { color: #fff; + text-decoration: none; } .CodeMirror { height: 100%; @@ -68,23 +69,23 @@ a:active { .mono { font-family: JetBrainsMono, sans-serif; } -.description-trigger:hover + #description { +#description { display: block; position: fixed; - bottom: 20px; - margin: 40px; - right: 0; - max-width: 350px; + top: 0; + margin: 45px; + left: 0; + max-width: 370px; } -.description-trigger:hover + #description + #overlay { +#overlay { /* Used to un-hover on mobile */ - display: block; position: fixed; - background: transparent; + background: rgba(0, 0, 0, 0.3); right: 0; top: 0; left: 0; - bottom: 25px; + bottom: 0; + z-index: 20; } #description b { @@ -155,3 +156,14 @@ button:hover { unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } + +/* Icons */ +.icon { + display: inline-block; + font-size: 21px; + width: 1em; + height: 1em; + stroke-width: 0; + stroke: currentColor; + fill: currentColor; +}