From d9e2173e5e2dc5907bda7cf85b3e72b766c6a8f2 Mon Sep 17 00:00:00 2001
From: Borys Levytskyi <blevtisky@yandex.ru>
Date: Sun, 12 Apr 2015 22:04:34 +0300
Subject: [PATCH] Implemented hash link for each expression

---
 src/css/styles.css     |  8 +++++++-
 src/index.html         |  7 ++++---
 src/js/app/models.js   |  1 +
 src/js/app/services.js | 11 +++++++++++
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/css/styles.css b/src/css/styles.css
index bd169df..1188331 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -9,6 +9,8 @@ code { font-size: 1.2em; font-weight: bold; }
 .result .input { margin-bottom: 10px; }
 .result .content { padding-left: 10px}
 .result .cur { color: lightgray; margin-right: 5px; }
+.hashLink { text-decoration: none; margin-left: 5px; }
+.hashLink:hover { text-decoration: underline; margin-left: 5px; }
 
 .expression .label { font-weight:  bold; padding-right: 5px; text-align: right; }
 .expression .bin { letter-spacing: 3px; }
@@ -38,6 +40,9 @@ code { font-size: 1.2em; font-weight: bold; }
 .light .on { color: #121212; }
 .light .prefix { color: #888}
 .light .other { color: #bbb }
+.light .hashLink, .light .hashLink:visited { color: #ddd }
+.light .hashLink:hover { color: #888 }
+
 
 /* Dark */
 .dark { background: #121212; color: white;}
@@ -48,5 +53,6 @@ code { font-size: 1.2em; font-weight: bold; }
 .dark .zero { color: #999;}
 .dark .prefix { color: #999}
 .dark  .other { color: #444;}
-
+.dark .hashLink, .dark .hashLink:visited { color: #333 }
+.dark .hashLink:hover { color: #999 }
 
diff --git a/src/index.html b/src/index.html
index 110fdb0..08cd21c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -116,9 +116,9 @@
     </div>
 </script>
 
-<script data-template="resultView" type="text/template">
+<script data-template="resultView" data-compiled="" type="text/template">
     <div class="result">
-        <div class="input mono"><span class="cur">&gt;</span>{input}</div>
+        <div class="input mono"><span class="cur">&gt;</span>{m.input}<a class="hashLink" title="Link for this expression" href="{window.location.pathname}#{m.inputHash}">#</a></div>
         <div class="content"></div>
     </div>
 </script>
@@ -199,7 +199,8 @@
     cmd.execute('help');
 
     if(window.location.hash.length > 1) {
-        cmd.execute(window.location.hash.substr(1).replace(/,/g,' '));
+
+        cmd.execute(app.get('hash').decodeHash(window.location.hash));
     }
     else {
 
diff --git a/src/js/app/models.js b/src/js/app/models.js
index 102307a..1627aab 100644
--- a/src/js/app/models.js
+++ b/src/js/app/models.js
@@ -27,6 +27,7 @@
 
     function DisplayResult (input, content) {
         this.input = input;
+        this.inputHash = app.get('hash').encodeHash(input);
         this.content = content;
     }
 
diff --git a/src/js/app/services.js b/src/js/app/services.js
index 6dc087f..62ca170 100644
--- a/src/js/app/services.js
+++ b/src/js/app/services.js
@@ -6,4 +6,15 @@
     app.set('should', core.should);
     app.set('bindr', core.bindr);
 
+    app.set('hash', function () {
+        return {
+            encodeHash: function(string) {
+                return encodeURI(string.trim()).replace(/\s/g,',');
+            },
+            decodeHash: function(hashValue) {
+                return decodeURI(hashValue).replace(/^\#/, '').replace(/,/g,' ');
+            }
+        }
+    })
+
 })(window.app, window.core);
\ No newline at end of file