update web build

svenkreiss · Jul 8, 2020 · 1cd97f4 · 1cd97f4
1 parent 581b026
commit 1cd97f4
Show file tree

Hide file tree

Showing 7 changed files with 356 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -44,3 +44,4 @@ nosetests.xml
 # js
 ts_dist/
 node_modules
+web/ui.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,5 +34,9 @@
     "typescript": "^3.9.6",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12"
+  },
+  "dependencies": {
+    "@types/typeahead": "^0.11.32",
+    "typeahead": "^0.2.2"
   }
 }
diff --git a/ts_src/ui.ts b/ts_src/ui.ts
@@ -0,0 +1,75 @@
+import {replacements} from './data';
+import {replace} from './replace';
+
+const latexInput = $('#latexInput');
+const unicodeOutput = $('#unicodeOutput');
+const permaLink = $('.permalink');
+
+
+// copy replacements and sort case insensitive
+var listOfReplacements = replacements
+  .map(function(r) { return { value: r[0], unicode: r[1] }; })
+  .sort(function(a, b) { return a.value.toLowerCase().localeCompare(b.value.toLowerCase()); });
+
+// reorder such that when just typing '\' suggestions starting with '\a' appear
+var indexOfFirstA = listOfReplacements
+  .map(function(r) { return r.value.slice(0, 2).toLowerCase(); })
+  .indexOf('\\a');
+listOfReplacements = listOfReplacements.slice(indexOfFirstA).concat(listOfReplacements.slice(0, indexOfFirstA));
+
+
+// Bloodhound: the source (dataset) for typeahead
+var mySource = new Bloodhound({
+  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
+  queryTokenizer: function(d) { var i = d.lastIndexOf('\\'); var r = [d.substr(0, i), d.substr(i)]; console.log(r); return r; },
+  local: listOfReplacements,
+});
+mySource.initialize();
+
+// apply typeahead to input text field
+latexInput.typeahead({
+  hint: false,
+  highlight: true,
+  minLength: 0,
+}, {
+  display: 'value',
+  source: mySource.ttAdapter(),
+  limit: 15,
+  templates: {
+    suggestion: function(datum: {unicode:string, value:string}) {
+      return '<div><span style="display:inline-block;width:3em;">'+datum.unicode+'</span><strong>'+datum.value+'</strong></div>';
+    },
+  },
+});
+
+
+latexInput.on('typeahead:selected', function (object, datum) {
+  $('input#unicodeOutput').val(datum.unicode);
+});
+// $('.tt-query').css('background-color','#fff');
+latexInput.focus();
+
+
+// click handler for LaTeX examples
+$('.latexExample').on('click', function(e) {
+  latexInput
+    .typeahead('val', $(this).html())
+    .trigger('change')
+    .focus();
+});
+
+// generate unicode output and permalink
+latexInput.on('keyup change', function(e) {
+  const input = <string>$(this).val();
+  unicodeOutput.val(replace(input));
+  permaLink.attr('href', 'https://www.unicodeit.net/?'+encodeURIComponent(input));
+});
+
+
+if (location.search) {
+  var latex = decodeURIComponent(location.search.slice(1));
+  latexInput
+    .typeahead('val', latex)
+    .trigger('change')
+    .focus();
+}
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,106 @@
+
+<!DOCTYPE html>
+<html class="no-js">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>unicodeit.net</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="style.css?version=0.7.0" />
+  </head>
+  <body>
+<div class="container page">
+<div class="row">
+  <div class="col-sm-4 leftColumn">
+    <h1>unicode<span class="banner_it">it</span>.net <small>β&nbsp;testing</small></h1>
+  </div>
+
+  <div class="col-sm-8 rightColumn">
+    <h3>Online Demo</h3>
+    <div class="row">
+      <div class="col-md-6">
+        <input type="text" class="form-control input-lg" placeholder="latex expression" id="latexInput">
+      </div>
+      <div class="col-md-6">
+        <input type="text" class="form-control input-lg" placeholder="unicode output" id="unicodeOutput">
+      </div>
+    </div>
+    <p>
+      <a class="permalink" href="">Permalink</a>
+    </p>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-sm-4 leftColumn">
+    <p>Created by <a href="https://www.svenkreiss.com">Sven Kreiss</a> and <a href="http://www.theoryandpractice.org">Kyle Cranmer</a>.<br />
+    Maintained on <a href="https://github.com/svenkreiss/unicodeit">GitHub</a>.</p>
+
+
+    <p>
+
+<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://www.unicodeit.net" data-text="LaTeX to unicode symbols: \mathcal{H} → ℋ." data-via="svenkreiss" data-hashtags="unicodeit">Tweet</a>
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
+
+    </p>
+
+
+
+  </div>
+  <div class="col-sm-8 rightColumn">
+
+    <br /><br />
+
+    <!-- <h3>Download</h3>
+
+    <p>
+    Download the Mac OS X app: <a href="https://bit.ly/PURul8">unicodeit062.zip</a>.<br />
+    And here is a modified version for Keynote 6 that copies the output to the clipboard: <a href="https://bit.ly/1hltYID">unicodeit062clipboard.zip</a>.<br />
+    More info and an app for linux is here: <a href="https://www.svenkreiss.com/UnicodeIt">www.svenkreiss.com/UnicodeIt</a>.
+    </p> -->
+
+
+    <h3>Help</h3>
+
+    <p>Type LaTeX expressions in the input box on the left. The converted text in the box on the right can be copied to most programs including PowerPoint and Keynote, e-mail clients like Outlook and Mail and even apps on smart phones. UnicodeIt can create greek letters, arrows, mathematical symbols and many more for presentations, emails, chats, facebook, etc.</p>
+
+    <div class="panel panel-default">
+      <!-- Default panel contents -->
+      <div class="panel-heading" style="color:#999; font-weight:bold;">Examples</div>
+
+      <!-- Table -->
+      <table class="table examplesTable">
+        <tr><td></td><td class="latexExample">x \in (-\infty, \infty)</td><td>x ∈ (-∞, ∞)</td></tr>
+        <tr><td></td><td class="latexExample">p\bar{p} \to \mu^+\mu^-</td><td>pp̅ → μ⁺μ⁻</td></tr>
+        <tr><td></td><td class="latexExample">\alpha\omega\epsilon\S\om\in</td><td>αωε§øm∈</td></tr>
+        <tr><td></td><td class="latexExample">^2H ^6Li ^{10}B ^{14}N</td><td>²H ⁶Li ¹⁰B ¹⁴N</td></tr>
+        <tr><td></td><td class="latexExample">\mathcal{L} \mathcal{H} \mathbb{R} \mathbb{C}</td><td>ℒ ℋ ℝ ℂ</td></tr>
+      </table>
+    </div>
+
+  </div>
+</div>
+<br /><br /><br /><br />
+</div>
+
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
+    <script src="//twitter.github.com/typeahead.js/releases/latest/typeahead.bundle.min.js"></script>
+    <script src="ui.js?version=0.7.0"></script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-4070485-7', 'unicodeit.net');
+      ga('set', 'anonymizeIp', true);
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>
diff --git a/web/style.css b/web/style.css
@@ -0,0 +1,103 @@
+      body {
+        font-family: "Helvetica Neue", helvetica, arial;
+        padding: 30px 15px 30px 15px;
+        color:#999;
+      }
+
+      h1 { color:#55C; margin-top:0; }
+      .banner_it { color:#000; }
+      h1 small { font-size:40%; }
+
+      .leftColumn, .rightColumn { margin-top:50px; }
+
+      #content_manage { display:none; }
+      #content_participate { display:none; }
+
+      .subtitle { font-size:50%; color:#888; }
+      .beta { font-size:40%; color:#ccc; }
+
+      .large_stat { font-size:300%; }
+      .raw { word-wrap:break-word; }
+
+      .footer { color:#ccc; font-size:80%; }
+      .footer a { color:#ccc; }
+
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      ul li {
+        line-height: 1.4;
+      }
+
+      input { margin:5px; }
+      .latexExample {
+        cursor:pointer;
+        max-width:9em;
+        overflow:hidden;
+        text-overflow:ellipsis;
+      }
+
+      .permalink {
+        display: inline-block;
+        margin: 1em 1em 1em 0.5em;
+        font-size: 85%;
+      }
+
+
+
+
+
+
+.twitter-typeahead{
+  width:100%;
+}
+
+.twitter-typeahead .tt-query,
+.twitter-typeahead .tt-hint {
+  margin-bottom: 0;
+}
+.tt-menu {
+  min-width: 160px;
+  margin-top: 2px;
+  padding: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+          box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+  width:100%;
+}
+
+.tt-suggestion {
+  display: block;
+  padding: 3px 20px;
+}
+
+.tt-suggestion:hover {
+  cursor: pointer;
+  color: #fff;
+  background-color: #0081c2;
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
+}
+
+.tt-suggestion p {
+  margin: 0;
+}