diff --git a/bower.json b/bower.json
index c5c7cb1b9a..0298889768 100644
--- a/bower.json
+++ b/bower.json
@@ -13,6 +13,7 @@
],
"dependencies": {
"jquery": "~2.2.0",
- "underscore": "~1.8.3"
+ "underscore": "~1.8.3",
+ "urijs": "uri.js#~1.17.0"
}
}
diff --git a/gulpfile.js b/gulpfile.js
index ec31df092d..331596cf52 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -25,6 +25,7 @@ var buildCss = function() {
var buildJs = function() {
return gulp.src([
'src/web/js/dictionary.js',
+ 'src/web/js/url.js',
'src/web/js/script.js',
])
.pipe(concat('script.js'))
diff --git a/src/web/css/style.css b/src/web/css/style.css
index cb29d02a17..5068f9b690 100644
--- a/src/web/css/style.css
+++ b/src/web/css/style.css
@@ -1,7 +1,7 @@
h1 {
+ font-family: ubuntu, tahoma;
font-size: 1.8em;
- font-family: arial;
text-align: center;
color: #333;
}
@@ -64,3 +64,8 @@ button {
font-size: 0.8em;
color #777;
}
+
+ul#stats {
+ list-style-type: none;
+}
+
diff --git a/src/web/js/dictionary.js b/src/web/js/dictionary.js
index aeabe704ba..c4e95b3ec4 100644
--- a/src/web/js/dictionary.js
+++ b/src/web/js/dictionary.js
@@ -70,6 +70,14 @@
}
},
+ /**
+ * Process a raw sentence into a cleaned up sentence (no extra
+ * spaces, etc.). Returns a string sentence.
+ */
+ cleanSentence: function(rawSentence) {
+ return this.splitSentence(rawSentence).join(' ');
+ },
+
/** Process a raw sentence into words and other tokens. */
splitSentence: function(rawSentence) {
return _.filter(_.map(rawSentence.split(/\s+/),
diff --git a/src/web/js/script.js b/src/web/js/script.js
index 7d06ac5c6e..c7d723da3c 100644
--- a/src/web/js/script.js
+++ b/src/web/js/script.js
@@ -43,6 +43,8 @@
query = encodeURIComponent(sentence),
url = '/speak?q=' + query;
+ Url.setSentence(sentence);
+
$audio.attr('src', url)
$audio[0].addEventListener('canplaythrough', function() {
// Play after a short delay, just to make sure sound doesn't tear.
@@ -80,13 +82,21 @@
html += '
' + suggestedWord + '';
}
- $('ul').html(html);
+ $('#typeahead ul').html(html);
}
var uiDictionaryLoadCallback = function(dictionary) {
$('#wordcount').html(dictionary.words.length);
}
+ var uiInitialize = function() {
+ var sentence = Url.getSentence();
+ if (sentence.length > 0) {
+ $('input').val(sentence);
+ $('form').submit();
+ }
+ }
+
// TODO: Temp for debug.
window.setState = setState;
@@ -98,6 +108,8 @@
$('input').on('keyup', handleTyping);
$('body').on('keyup', handleBodyTyping);
Dictionary.load(uiDictionaryLoadCallback);
+
+ uiInitialize();
}
$(function() {
diff --git a/src/web/js/url.js b/src/web/js/url.js
new file mode 100644
index 0000000000..041a291bfa
--- /dev/null
+++ b/src/web/js/url.js
@@ -0,0 +1,37 @@
+'use strict';
+
+// TODO: Use real AMD.
+(function() {
+
+ // TODO: Don't install globally.
+ /** Manipulate the URL. */
+ window.Url = {
+
+ /** Get the sentence from the `window.location`. */
+ getSentence: function() {
+ return this.toSentence(window.location);
+ },
+
+ /** Set the `window.history` sentence. */
+ setSentence: function(rawSentence) {
+ var urlHash = this.fromSentence(rawSentence);
+ window.history.replaceState(null, null, urlHash);
+ },
+
+ /** Encode a sentence in a URL hash. */
+ fromSentence: function(rawSentence) {
+ var cleanedSentence = Dictionary.cleanSentence(rawSentence),
+ uriEncoded = encodeURIComponent(cleanedSentence);
+ return new URI("/").hash(uriEncoded).toString();
+ },
+
+ /** Decode a sentence from a URL. */
+ toSentence: function(url) {
+ var urlHash = new URI(url).hash(),
+ uriDecoded = decodeURIComponent(urlHash),
+ hashless = uriDecoded.replace('#', '');
+ return Dictionary.cleanSentence(hashless);
+ },
+ }
+
+}());
diff --git a/web/index.html b/web/index.html
index f111d0329a..f47e31cc3c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -17,9 +17,10 @@
-
- Currently featuring 0 words.
-
+
+ - Currently featuring 0 Trump words.
+ - Next up: Hillary.
+