diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/README.md | 12 | ||||
| -rw-r--r-- | client/client.js | 48 | ||||
| -rw-r--r-- | client/index.html | 63 |
3 files changed, 120 insertions, 3 deletions
diff --git a/client/README.md b/client/README.md index 292daab..4172271 100644 --- a/client/README.md +++ b/client/README.md @@ -1 +1,11 @@ -(TODO) +## Development +A quick way to start a server is to use Node.js `http-server`: + +``` +npm install http-server -g +cd client +http-server +``` + +## Deployment +(TODO)
\ No newline at end of file diff --git a/client/client.js b/client/client.js index ff2decc..e597737 100644 --- a/client/client.js +++ b/client/client.js @@ -18,6 +18,7 @@ var frontpage = [ "Formatting:", "Whitespace is preserved, so source code can be pasted verbatim.", "Surround LaTeX with a dollar sign for inline style $\\zeta(2) = \\pi^2/6$, and two dollars for display. $$\\int_0^1 \\int_0^1 \\frac{1}{1-xy} dx dy = \\frac{\\pi^2}{6}$$", + "For syntax highlight, the first line of the code block must begin with #<format> where <format> can be html, js or any known format", "", "Current Github: https://github.com/hack-chat includes server and client source along with other resources", "", @@ -200,7 +201,18 @@ function pushMessage(args) { textEl.textContent = args.text || ''; textEl.innerHTML = textEl.innerHTML.replace(/(\?|https?:\/\/)\S+?(?=[,.!?:)]?\s|$)/g, parseLinks); - if ($('#parse-latex').checked) { + if ($('#syntax-highlight').checked) { + if (textEl.textContent.indexOf('#') == 0) { + var lang = textEl.textContent.split(/\s+/g)[0].replace('#', ''); + var codeEl = document.createElement('code'); + codeEl.classList.add(lang); + var content = textEl.textContent.replace('#' + lang, ''); + codeEl.textContent = content.trim(); + hljs.highlightBlock(codeEl); + textEl.innerHTML = ''; + textEl.appendChild(codeEl); + } + } else if ($('#parse-latex').checked) { // Temporary hotfix for \rule spamming, see https://github.com/Khan/KaTeX/issues/109 textEl.innerHTML = textEl.innerHTML.replace(/\\rule|\\\\\s*\[.*?\]/g, ''); try { @@ -522,7 +534,19 @@ var schemes = [ 'tomorrow' ]; +var highlights = [ + 'agate', + 'androidstudio', + 'darcula', + 'github', + 'rainbow', + 'tomorrow', + 'xcode', + 'zenburn' +] + var currentScheme = 'atelier-dune'; +var currentHighlight = 'darcula'; function setScheme(scheme) { currentScheme = scheme; @@ -530,6 +554,12 @@ function setScheme(scheme) { localStorageSet('scheme', scheme); } +function setHighlight(scheme) { + currentHighlight = scheme; + $('#highlight-link').href = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/" + scheme + ".min.css"; + localStorageSet('highlight', scheme); +} + // Add scheme options to dropdown selector schemes.forEach(function (scheme) { var option = document.createElement('option'); @@ -538,16 +568,32 @@ schemes.forEach(function (scheme) { $('#scheme-selector').appendChild(option); }); +highlights.forEach(function (scheme) { + var option = document.createElement('option'); + option.textContent = scheme; + option.value = scheme; + $('#highlight-selector').appendChild(option); +}); + $('#scheme-selector').onchange = function (e) { setScheme(e.target.value); } +$('#highlight-selector').onchange = function (e) { + setHighlight(e.target.value); +} + // Load sidebar configaration values from local storage if available if (localStorageGet('scheme')) { setScheme(localStorageGet('scheme')); } +if (localStorageGet('highlight')) { + setHighlight(localStorageGet('highlight')); +} + $('#scheme-selector').value = currentScheme; +$('#highlight-selector').value = currentHighlight; /* main */ diff --git a/client/index.html b/client/index.html index d71c62d..9abdebc 100644 --- a/client/index.html +++ b/client/index.html @@ -1 +1,62 @@ -<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="utf-8"><title>hack.chat</title><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="katex/katex.min.css"><link id="scheme-link" rel="stylesheet" href="schemes/atelier-dune.css"><script src="katex/katex.min.js"></script><script src="katex/contrib/auto-render.min.js"></script></head><body><article class="container"><div id="messages" class="messages"></div></article><footer id="footer"><div class="container"><form id="chatform" class="messages"><textarea id="chatinput" type="text" autocomplete="off" autofocus></textarea></form></div></footer><nav id="sidebar"><div id="sidebar-content" class="hidden"><p><input id="pin-sidebar" type="checkbox"><label for="pin-sidebar">Pin sidebar</label></p><h4>Settings</h4><p><input id="joined-left" type="checkbox" checked><label for="joined-left">Join/left notify</label></p><p><input id="parse-latex" type="checkbox" checked><label for="parse-latex">Parse LaTeX</label></p><p><button id="clear-messages">Clear messages</button></p><h4>Color scheme</h4><select id="scheme-selector"></select><h4>Users online</h4><p>(Click user to invite)</p><ul id="users"></ul></div></nav><script src="client.js"></script></body></html>
\ No newline at end of file +<!DOCTYPE html> +<html> + +<head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta charset="utf-8"> + <title>hack.chat</title> + <link rel="stylesheet" href="style.css"> + <link rel="stylesheet" href="katex/katex.min.css"> + <link id="scheme-link" rel="stylesheet" href="schemes/atelier-dune.css"> + <script src="katex/katex.min.js"></script> + <script src="katex/contrib/auto-render.min.js"></script> + <link id="highlight-link" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/hybrid.min.css"> + <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> +</head> + +<body> + <article class="container"> + <div id="messages" class="messages"></div> + </article> + <footer id="footer"> + <div class="container"> + <form id="chatform" class="messages"> + <textarea id="chatinput" type="text" autocomplete="off" autofocus></textarea> + </form> + </div> + </footer> + <nav id="sidebar"> + <div id="sidebar-content" class="hidden"> + <p> + <input id="pin-sidebar" type="checkbox"> + <label for="pin-sidebar">Pin sidebar</label> + </p> + <h4>Settings</h4> + <p> + <input id="joined-left" type="checkbox" checked> + <label for="joined-left">Join/left notify</label> + </p> + <p> + <input id="parse-latex" type="checkbox" checked> + <label for="parse-latex">Parse LaTeX</label> + </p> + <p> + <button id="clear-messages">Clear messages</button> + </p> + <h4>Color scheme</h4> + <select id="scheme-selector"></select> + <p> + <input id="syntax-highlight" type="checkbox" checked> + <label for="syntax-highlight">Syntax Highlight</label> + </p> + <h4>Highlight scheme</h4> + <select id="highlight-selector"></select> + <h4>Users online</h4> + <p>(Click user to invite)</p> + <ul id="users"></ul> + </div> + </nav> + <script src="client.js"></script> +</body> + +</html>
\ No newline at end of file |