diff options
| author | matthewsotoudeh <matthewsot@outlook.com> | 2015-02-19 17:04:56 -0800 |
|---|---|---|
| committer | matthewsotoudeh <matthewsot@outlook.com> | 2015-02-19 17:04:56 -0800 |
| commit | 41e3cc18b0c0d3335441fd27fecee77b2307d890 (patch) | |
| tree | 7504a14669a4acb831720eb334336f42f4b64798 | |
| parent | 3ab14bda7057093a11188ca72003e339ffcb3f17 (diff) | |
A basic location bar
| -rw-r--r-- | foopy.js | 33 | ||||
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | style.css | 9 |
3 files changed, 44 insertions, 0 deletions
@@ -42,6 +42,38 @@ return curr; } + function updateLocation(choice) { + $('#location').html(''); + + var pastStack = '#!/'; + for (var i = 0; i < stack.length; i++) { + var l10nId = $('[next-group="' + stack[i] + '"]').first().children('span').first().attr('data-l10n-id'); + + pastStack += stack[i] + '/'; + + var newLink = $('<a></a>').attr('href', pastStack).click(function () { + window.location.href = $(this).attr('href'); + window.location.reload(true); + }); + + if (stack[i] === 'progornoprog') { + newLink.text('~'); + } else { + if (document.webL10n.getReadyState() === 'complete') { + //L10n has already loaded, so we'll just set the text + newLink.text(document.webL10n.get(l10nId)); + } else { + //If it hasn't loaded, we'll se the data-l10n-id attribute and wait for L10n to load it + newLink.attr('data-l10n-id', l10nId); + } + } + + $('#location').append(newLink).append(' / '); + } + + $('#location').append($('<span></span>').text($(choice).text().split('\n')[0].trim())); + } + function updateCurrentChoice(lastIndex) { var lastChoice = $('.choices li', groupNode)[choices[choices.length - 1][lastIndex]]; var choice = $('.choices li', groupNode)[choices[choices.length - 1][choiceIndex[choiceIndex.length - 1]]]; @@ -63,6 +95,7 @@ button.addEventListener('click', trackExternalLink); } setLocationHashSuffix(getUIDAttribute(choice)); + updateLocation(choice); } function nextChoice(ev) { @@ -30,6 +30,8 @@ </head> <body> + <div id="location"></div> + <a href="http://www.mozilla.org/" id="tabzilla">mozilla</a> <div id="lang"> <span id="lang-selection" data-l10n-id="lang-selection">Language:</span> @@ -17,6 +17,15 @@ html { background-image: url("./bg.png"); } +#location { + float: left; + margin-left: 100px; + margin-top: 10px; +} + #location a { + color: #487dc3; + } + #tabzilla { margin-right: 100px; } |