Merge pull request #50 from ft-interactive/random-word-generator

Random word generator

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"

client/main-page.hbs

@@ -22,7 +22,7 @@
 				<div class="details">
 					{{#if definition}}
 						<p class="detail definition"><strong>Translation into plain English
-						</strong> {{definition}}</p>
+						</strong> <span>{{definition}}</span></p>
 					{{/if}}
 					{{#if usageexample}}
 						<p class="detail usageexample">{{usageexample}}</p>

client/scripts/main.js

@@ -1,12 +1,112 @@
 import oHoverable from 'o-hoverable';
 import attachFastClick from 'fastclick';
 
+let words = {};
+
 document.addEventListener('DOMContentLoaded', () => {
   // make hover effects work on touch devices
   oHoverable.init();
 
   // remove the 300ms tap delay on mobile browsers
   attachFastClick(document.body);
 
-  // YOUR CODE HERE!
+  if (document.documentElement.className === 'enhanced') {
+    let 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 newRandomGuff() {
+  let wordArray = Object.keys(words);
+
+  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;
+  }
+
+  const randomWord = words[wordArray[randomNumber]];
+
+  const randomGuffElement = document.getElementsByClassName('random-guff')[0];
+
+  let randomGuffClone = randomGuffElement.cloneNode(true);
+
+  randomGuffClone.setAttribute('style', 'visibility: visible;');
+
+  let refreshButton = randomGuffClone.getElementsByClassName('refresh')[0];
+
+  if (!refreshButton) {
+    refreshButton = document.createElement('span');
+    refreshButton.className = 'refresh';
+    randomGuffClone.getElementsByClassName('paraHeads')[0].appendChild(refreshButton);
+  }
+
+  refreshButton.addEventListener('click', () => {
+    newRandomGuff();
+  });
+
+  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 + '»';
+
+  if (definition) {
+    details.removeChild(definition);
+  }
+  if (randomWord.definition) {
+    let newDefinitionElement = document.createElement('p');
+
+    newDefinitionElement.className = 'detail definition';
+    newDefinitionElement.innerHTML = '<strong>Translation into plain English</strong> ' + randomWord.definition;
+
+    details.appendChild(newDefinitionElement);
+  }
+
+  if (usageExample) {
+    details.removeChild(usageExample);
+  }
+  if (randomWord.usageexample) {
+    let 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) {
+    let newRelatedWordsElement = document.createElement('p');
+
+    newRelatedWordsElement.className = 'detail relatedwords';
+    newRelatedWordsElement.innerHTML = 'Related: ';
+
+    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) {
+        newRelatedWordsElement.innerHTML += ', ';
+      }
+      newRelatedWordsElement.appendChild(relatedWordElement);
+    }
+
+    details.appendChild(newRelatedWordsElement);
+  }
+  document.getElementsByTagName('main')[0].insertBefore(randomGuffClone, randomGuffElement);
+  document.getElementsByTagName('main')[0].removeChild(randomGuffElement);
+}

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');

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;
+      }
     }
   }