From 75a482a47333b64fbf3a376e9a9948aced5abe40 Mon Sep 17 00:00:00 2001 From: Sumeet Adur Date: Fri, 11 Dec 2015 17:33:50 +0000 Subject: [PATCH 1/4] initial commit for random word generator - unfinished --- client/main-page.hbs | 2 +- client/scripts/main.js | 64 ++++++++++++++++++++++++++++++++++++++++-- client/top.hbs | 4 +++ 3 files changed, 66 insertions(+), 4 deletions(-) diff --git a/client/main-page.hbs b/client/main-page.hbs index 7395dc4..10b07e4 100644 --- a/client/main-page.hbs +++ b/client/main-page.hbs @@ -22,7 +22,7 @@
{{#if definition}}

Translation into plain English - {{definition}}

+ {{definition}}

{{/if}} {{#if usageexample}}

{{usageexample}}

diff --git a/client/scripts/main.js b/client/scripts/main.js index 3e87f68..28f00ad 100755 --- a/client/scripts/main.js +++ b/client/scripts/main.js @@ -1,12 +1,70 @@ import oHoverable from 'o-hoverable'; import attachFastClick from 'fastclick'; +var words = {}; + document.addEventListener('DOMContentLoaded', () => { - // make hover effects work on touch devices + // // make hover effects work on touch devices oHoverable.init(); - // remove the 300ms tap delay on mobile browsers + // // remove the 300ms tap delay on mobile browsers attachFastClick(document.body); - // YOUR CODE HERE! + if (document.documentElement.className === 'enhanced') { + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { + words = JSON.parse(xmlhttp.responseText); + } + }; + xmlhttp.open('GET', 'words.json', true); + xmlhttp.send(); + } + }); + +function replaceRandomGuff() { + var wordArray = Object.keys(words); + + var randomNumber = Math.floor(Math.random() * (wordArray.length - 1)) + 1; + + var randomWord = words[wordArray[randomNumber]]; + + var randomGuffElement = document.getElementsByClassName('random-guff')[0]; + + var randomGuffClone = randomGuffElement.cloneNode(true); + + var word = randomGuffClone.children[1]; + var details = randomGuffClone.children[2]; + var definition = details.children[0].children[1]; + var usageExample = details.children[1]; + var relatedWordsElement = details.children[2]; + + word.href = randomWord.slug + '/'; + word.innerHTML = randomWord.word + '»'; + definition.innerText = randomWord.definition; + usageExample.innerText = randomWord.usageexample; + + if (randomWord.relatedwords) { + var relatedWords = randomWord.relatedwords; + var newRelatedWordsElement = document.createElement('p'); + newRelatedWordsElement.className = 'detail relatedwords'; + newRelatedWordsElement.innerHTML = 'Related: '; + + for(var relatedWord of relatedWords) { + var relatedWordElement = document.createElement('a'); + relatedWordElement.href = relatedWord.slug + '/'; + relatedWordElement.innerHTML = relatedWord.word; + newRelatedWordsElement.appendChild(relatedWordElement); + } + if (relatedWordsElement) { + relatedWordsElement = newRelatedWordsElement; + } else { + details.appendChild(newRelatedWordsElement); + } + } else { + relatedWordsElement.remove() + } + randomGuffElement.innerHTML = randomGuffClone.innerHTML; + +} diff --git a/client/top.hbs b/client/top.hbs index 1fe2bdf..511ebe6 100644 --- a/client/top.hbs +++ b/client/top.hbs @@ -18,6 +18,10 @@ + + + + From 6dfa7dd18af9430f93eb6dd0cbb50d768109b029 Mon Sep 17 00:00:00 2001 From: Sumeet Adur Date: Sun, 13 Dec 2015 22:06:44 +0000 Subject: [PATCH 2/4] Working random word generator --- bower.json | 1 + client/scripts/main.js | 145 ++++++++++++++++++++++++++-------------- client/styles/main.scss | 15 +++++ 3 files changed, 110 insertions(+), 51 deletions(-) diff --git a/bower.json b/bower.json index fc6b8ea..96a2ab7 100755 --- a/bower.json +++ b/bower.json @@ -6,6 +6,7 @@ "o-hoverable": "~1.1.0", "o-fonts": "~1.6.4", "o-footer": "~4.0.0", + "o-ft-icons": "^3.0.1", "o-grid": "^4.0.0", "o-buttons": "2.0.4", "normalize-scss": "~3.0.3" diff --git a/client/scripts/main.js b/client/scripts/main.js index 28f00ad..6bfe7b7 100755 --- a/client/scripts/main.js +++ b/client/scripts/main.js @@ -11,60 +11,103 @@ document.addEventListener('DOMContentLoaded', () => { attachFastClick(document.body); if (document.documentElement.className === 'enhanced') { - var xmlhttp = new XMLHttpRequest(); - xmlhttp.onreadystatechange = function() { - if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { - words = JSON.parse(xmlhttp.responseText); - } - }; - xmlhttp.open('GET', 'words.json', true); - xmlhttp.send(); + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function () { + if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { + words = JSON.parse(xmlhttp.responseText); + newRandomGuff(); + } + }; + xmlhttp.open('GET', 'words.json', true); + xmlhttp.send(); } }); -function replaceRandomGuff() { - var wordArray = Object.keys(words); - - var randomNumber = Math.floor(Math.random() * (wordArray.length - 1)) + 1; - - var randomWord = words[wordArray[randomNumber]]; - - var randomGuffElement = document.getElementsByClassName('random-guff')[0]; - - var randomGuffClone = randomGuffElement.cloneNode(true); - - var word = randomGuffClone.children[1]; - var details = randomGuffClone.children[2]; - var definition = details.children[0].children[1]; - var usageExample = details.children[1]; - var relatedWordsElement = details.children[2]; - - word.href = randomWord.slug + '/'; - word.innerHTML = randomWord.word + '»'; - definition.innerText = randomWord.definition; - usageExample.innerText = randomWord.usageexample; - - if (randomWord.relatedwords) { - var relatedWords = randomWord.relatedwords; - var newRelatedWordsElement = document.createElement('p'); - newRelatedWordsElement.className = 'detail relatedwords'; - newRelatedWordsElement.innerHTML = 'Related: '; - - for(var relatedWord of relatedWords) { - var relatedWordElement = document.createElement('a'); - relatedWordElement.href = relatedWord.slug + '/'; - relatedWordElement.innerHTML = relatedWord.word; - newRelatedWordsElement.appendChild(relatedWordElement); - } - if (relatedWordsElement) { - relatedWordsElement = newRelatedWordsElement; - } else { - details.appendChild(newRelatedWordsElement); - } - } else { - relatedWordsElement.remove() - } - randomGuffElement.innerHTML = randomGuffClone.innerHTML; +function newRandomGuff() { + var wordArray = Object.keys(words); + var randomNumber = Math.floor(Math.random() * (wordArray.length - 1)) + 1; + + while (words[wordArray[randomNumber]].slug === document.getElementsByClassName('latest-guff')[0].id) { + randomNumber = Math.floor(Math.random() * (wordArray.length - 1)) + 1; + } + + var randomWord = words[wordArray[randomNumber]]; + + var randomGuffElement = document.getElementsByClassName('random-guff')[0]; + + var randomGuffClone = randomGuffElement.cloneNode(true); + + randomGuffClone.setAttribute('style', 'visibility: visible;'); + + var refreshButton = randomGuffClone.getElementsByClassName('refresh')[0]; + + if (!refreshButton) { + refreshButton = document.createElement('span'); + refreshButton.className = 'refresh'; + randomGuffClone.getElementsByClassName('paraHeads')[0].appendChild(refreshButton); + } + + refreshButton.addEventListener('click', () => { + newRandomGuff(); + }); + + var word = randomGuffClone.getElementsByClassName('word')[0]; + var details = randomGuffClone.getElementsByClassName('details')[0]; + var definition = details.getElementsByClassName('detail definition')[0]; + var usageExample = details.getElementsByClassName('detail usageexample')[0]; + var relatedWordsElement = details.getElementsByClassName('detail relatedwords')[0]; + + word.href = randomWord.slug + '/'; + word.innerHTML = randomWord.word + '»'; + + if (definition) { + details.removeChild(definition); + } + if (randomWord.definition) { + var newDefinitionElement = document.createElement('p'); + + newDefinitionElement.className = 'detail definition'; + newDefinitionElement.innerHTML = 'Translation into plain English ' + randomWord.definition; + + details.appendChild(newDefinitionElement); + } + + if (usageExample) { + details.removeChild(usageExample); + } + if (randomWord.usageexample) { + var newUsageExampleElement = document.createElement('p'); + + newUsageExampleElement.className = 'detail usageexample'; + newUsageExampleElement.innerHTML = randomWord.usageexample; + + details.appendChild(newUsageExampleElement); + } + + if (relatedWordsElement) { + details.removeChild(relatedWordsElement); + } + if (randomWord.relatedwords.length > 0) { + var newRelatedWordsElement = document.createElement('p'); + + newRelatedWordsElement.className = 'detail relatedwords'; + newRelatedWordsElement.innerHTML = 'Related: '; + + var relatedWords = randomWord.relatedwords; + for (var relatedWord of relatedWords) { + var relatedWordElement = document.createElement('a'); + relatedWordElement.href = relatedWord.slug + '/'; + relatedWordElement.innerHTML = relatedWord.word; + if (relatedWords.indexOf(relatedWord) > 0) { + newRelatedWordsElement.innerHTML += ', '; + } + newRelatedWordsElement.appendChild(relatedWordElement); + } + + details.appendChild(newRelatedWordsElement); + } + document.getElementsByTagName('main')[0].insertBefore(randomGuffClone, randomGuffElement); + document.getElementsByTagName('main')[0].removeChild(randomGuffElement); } diff --git a/client/styles/main.scss b/client/styles/main.scss index 6f83aab..cbe9243 100755 --- a/client/styles/main.scss +++ b/client/styles/main.scss @@ -11,6 +11,10 @@ $o-buttons-is-silent: false; @import 'o-footer/main'; @import 'o-grid/main'; @import 'o-buttons/main'; +@import "o-ft-icons/main"; + +// Load the webfont that contains all icons as glyphs +@include oFtIconsFontFace(); @import 'fonts'; @import 'colours'; @@ -118,6 +122,11 @@ body { text-decoration: none; } +.enhanced { + .random-guff { + visibility: hidden; + } +} main { @include oGridColspan((default: full-width, M: 10, L: 8, XL: 6)); @include oGridCenter; @@ -195,6 +204,12 @@ main { @include oGridRespondTo(S) { font-size: 0.8em; } + &.refresh { + @include oFtIconsBaseIconStyles(); + @extend %o-ft-icons-icon--refresh; + cursor: pointer; + margin: -0.2em 0 0 0.6em; + } } } From b8086d4900a1c87876fbacfab0ea1bd7c62efd3d Mon Sep 17 00:00:00 2001 From: Sumeet Adur Date: Sun, 13 Dec 2015 22:23:41 +0000 Subject: [PATCH 3/4] Add main.js to gulpfile. Use const or let instead of var --- client/scripts/main.js | 43 +++++++++++++++++++++--------------------- gulpfile.babel.js | 1 + 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/client/scripts/main.js b/client/scripts/main.js index 6bfe7b7..33f4b9b 100755 --- a/client/scripts/main.js +++ b/client/scripts/main.js @@ -1,17 +1,17 @@ import oHoverable from 'o-hoverable'; import attachFastClick from 'fastclick'; -var words = {}; +let words = {}; document.addEventListener('DOMContentLoaded', () => { - // // make hover effects work on touch devices + // make hover effects work on touch devices oHoverable.init(); - // // remove the 300ms tap delay on mobile browsers + // remove the 300ms tap delay on mobile browsers attachFastClick(document.body); if (document.documentElement.className === 'enhanced') { - var xmlhttp = new XMLHttpRequest(); + let xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { words = JSON.parse(xmlhttp.responseText); @@ -21,27 +21,26 @@ document.addEventListener('DOMContentLoaded', () => { xmlhttp.open('GET', 'words.json', true); xmlhttp.send(); } - }); function newRandomGuff() { - var wordArray = Object.keys(words); + let wordArray = Object.keys(words); - var randomNumber = Math.floor(Math.random() * (wordArray.length - 1)) + 1; + let randomNumber = Math.floor(Math.random() * (wordArray.length - 1)) + 1; while (words[wordArray[randomNumber]].slug === document.getElementsByClassName('latest-guff')[0].id) { randomNumber = Math.floor(Math.random() * (wordArray.length - 1)) + 1; } - var randomWord = words[wordArray[randomNumber]]; + const randomWord = words[wordArray[randomNumber]]; - var randomGuffElement = document.getElementsByClassName('random-guff')[0]; + const randomGuffElement = document.getElementsByClassName('random-guff')[0]; - var randomGuffClone = randomGuffElement.cloneNode(true); + let randomGuffClone = randomGuffElement.cloneNode(true); randomGuffClone.setAttribute('style', 'visibility: visible;'); - var refreshButton = randomGuffClone.getElementsByClassName('refresh')[0]; + let refreshButton = randomGuffClone.getElementsByClassName('refresh')[0]; if (!refreshButton) { refreshButton = document.createElement('span'); @@ -53,11 +52,11 @@ function newRandomGuff() { newRandomGuff(); }); - var word = randomGuffClone.getElementsByClassName('word')[0]; - var details = randomGuffClone.getElementsByClassName('details')[0]; - var definition = details.getElementsByClassName('detail definition')[0]; - var usageExample = details.getElementsByClassName('detail usageexample')[0]; - var relatedWordsElement = details.getElementsByClassName('detail relatedwords')[0]; + let word = randomGuffClone.getElementsByClassName('word')[0]; + let details = randomGuffClone.getElementsByClassName('details')[0]; + const definition = details.getElementsByClassName('detail definition')[0]; + const usageExample = details.getElementsByClassName('detail usageexample')[0]; + const relatedWordsElement = details.getElementsByClassName('detail relatedwords')[0]; word.href = randomWord.slug + '/'; word.innerHTML = randomWord.word + '»'; @@ -66,7 +65,7 @@ function newRandomGuff() { details.removeChild(definition); } if (randomWord.definition) { - var newDefinitionElement = document.createElement('p'); + let newDefinitionElement = document.createElement('p'); newDefinitionElement.className = 'detail definition'; newDefinitionElement.innerHTML = 'Translation into plain English ' + randomWord.definition; @@ -78,7 +77,7 @@ function newRandomGuff() { details.removeChild(usageExample); } if (randomWord.usageexample) { - var newUsageExampleElement = document.createElement('p'); + let newUsageExampleElement = document.createElement('p'); newUsageExampleElement.className = 'detail usageexample'; newUsageExampleElement.innerHTML = randomWord.usageexample; @@ -90,14 +89,14 @@ function newRandomGuff() { details.removeChild(relatedWordsElement); } if (randomWord.relatedwords.length > 0) { - var newRelatedWordsElement = document.createElement('p'); + let newRelatedWordsElement = document.createElement('p'); newRelatedWordsElement.className = 'detail relatedwords'; newRelatedWordsElement.innerHTML = 'Related: '; - var relatedWords = randomWord.relatedwords; - for (var relatedWord of relatedWords) { - var relatedWordElement = document.createElement('a'); + const relatedWords = randomWord.relatedwords; + for (const relatedWord of relatedWords) { + let relatedWordElement = document.createElement('a'); relatedWordElement.href = relatedWord.slug + '/'; relatedWordElement.innerHTML = relatedWord.word; if (relatedWords.indexOf(relatedWord) > 0) { diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 156b10f..56f603b 100755 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -38,6 +38,7 @@ const BROWSERIFY_TRANSFORMS = [ ]; const OTHER_SCRIPTS = [ + 'scripts/main.js', 'scripts/top.js' ]; From 201f32569511cc314ec3fe350be37b75dbf5a02e Mon Sep 17 00:00:00 2001 From: Sumeet Adur Date: Sun, 13 Dec 2015 22:45:59 +0000 Subject: [PATCH 4/4] use the addScript function to import main.js --- client/scripts/top.js | 1 + client/top.hbs | 4 ---- gulpfile.babel.js | 1 - 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/client/scripts/top.js b/client/scripts/top.js index 8bc7a01..e5c3506 100755 --- a/client/scripts/top.js +++ b/client/scripts/top.js @@ -36,3 +36,4 @@ if (cutsTheMustard) { // browsers (just to get basics like the HTML5 Shiv), and a special one (with // things like Promise) for CTM browsers. addScript('https://cdn.polyfill.io/v1/polyfill.min.js'); +addScript('scripts/main.js'); diff --git a/client/top.hbs b/client/top.hbs index 511ebe6..1fe2bdf 100644 --- a/client/top.hbs +++ b/client/top.hbs @@ -18,10 +18,6 @@ - - - - diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 56f603b..156b10f 100755 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -38,7 +38,6 @@ const BROWSERIFY_TRANSFORMS = [ ]; const OTHER_SCRIPTS = [ - 'scripts/main.js', 'scripts/top.js' ];