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. -
    +