toggle

Author: jamiebrown201

index.js

@@ -172,8 +172,10 @@ app.get('/demo/:uuid', (req, res) => {
 app.get('/demo-static/:demoType', (req, res) => {
 	const demoType = req.params.demoType;
 	const availableDemos = ['side-by-side', 'toggle'];
+	let toggle = false;
+	if (demoType === 'toggle') toggle = true;
 	if (availableDemos.includes(demoType)) {
-		res.render('demoStatic', { demoType });
+		res.render('demoStatic', { demoType, toggle });
 	} else {
 		res
 			.status(500)

public/css/demoStatic/toggle.css

@@ -1,3 +1,24 @@
 .hidden {
 	display: none;
 }
+
+.translation-accordion {
+	background-color: #f3e0ce;
+	font-family: MetricWeb, sans-serif;
+	padding: 7px;
+	padding-left: 23px;
+}
+
+.translation-prompt {
+	font-weight: 500;
+	margin-top: 6px;
+}
+
+.accordion-button {
+	min-width: 97px;
+}
+
+.collapsed {
+	display: flex;
+	justify-content: space-between;
+}

public/js/demoStatic/toggle.js

@@ -1,15 +1,34 @@
-function init() {}
+var accordionButton = document.querySelector('.accordion-button');
 
-function toggleTranslation() {
-	Array.from(document.getElementsByClassName('text-body')).forEach(e => {
-		Array.from(e.classList).includes('hidden')
-			? (e.className = 'text-body')
-			: (e.className = 'text-body hidden');
+function init() {
+	document.querySelector('.translation-body').classList.add('hidden');
+}
+
+function toggleTranslationAccordion() {
+	document.querySelector('.demo-target').classList.toggle('hidden');
+
+	accordionButton.innerText =
+		accordionButton.innerText == 'Hide' ? 'Try it' : 'Hide';
+
+	accordionButton.classList.toggle('o-buttons-icon--arrow-down');
+	accordionButton.classList.toggle('o-buttons-icon--arrow-up');
+}
+
+function toggleTranslation(e) {
+	e.preventDefault();
+	Array.from(document.getElementsByClassName('text-body')).forEach(function(e) {
+		e.classList.toggle('hidden');
 	});
+
+	toggleTranslationAccordion();
 }
 
 document
-	.getElementById('translateButton')
+	.querySelector('.translate-button')
 	.addEventListener('click', toggleTranslation);
 
+accordionButton.addEventListener('click', () =>
+	toggleTranslationAccordion(accordionButton)
+);
+
 document.addEventListener('DOMContentLoaded', init);

views/demoStatic.hbs

@@ -57,10 +57,6 @@
                     </form>
                     <span class="o-share__text">Save to myFT</span>
                 </li>
-                <li class="o-share__action" data-share="twitter">
-                    <button class="n-myft-ui__button" id="translateButton">Translate</button>
-                </li>
-
             </ul>
         </div>
     </div>
@@ -142,6 +138,7 @@
                 </div>
             </div>
         </div>
+        {{#if toggle }} {{> translationAccordion }} {{/if}}
         <div class="articles">
             {{> articleContent}}
             <div class="divider"></div> {{> translatedArticleContent}}

views/partials/staticArticle.hbs

@@ -1,4 +1,4 @@
-<div class="text-body hidden">
+<div class="text-body translation-body">
     <p>Capita a obtenu la cote de risque la plus élevée possible dans une évaluation interne du ministère de la Défense, peu
         de temps avant de se voir attribuer un nouveau contrat pour la gestion des services militaires d'incendie et de sauvetage.</p>
     <p>Selon le document, qui a été mis à jour le 7 juin, Capita a obtenu une note de 10/10 pour le risque, 1 indiquant la probabilité

views/partials/translatedArticleContent.hbs

@@ -0,0 +1,28 @@
+<div class="translation-accordion">
+    <div class="collapsed">
+        <div class="translation-prompt">Now you can translate articles on the FT</div>
+        <button class="o-buttons o-buttons--big o-buttons-icon o-buttons-icon--arrow-down accordion-button" data-o-component="o-toggle">Try it</button>
+    </div>
+    <div class="demo-target hidden">
+        <div>This is an experimental feature. Translations might not be accurate.</div>
+        <div class="o-forms">
+            <label aria-describedby="select-box-info" for="select-standard" class="o-forms__label">Translate to</label>
+            <form>
+                <div>
+                    <select id="select-standard" class="o-forms__select">
+                        <option value="" disabled selected>Choose your language</option>
+                        <option value="option2">French</option>
+                    </select>
+                    <button class="o-buttons o-buttons--primary o-buttons--big translate-button">Show translation for current page</button>
+                </div>
+                <fieldset class="o-forms">
+                    <div class="o-forms__group o-forms__group--inline">
+                        <input type="checkbox" name="checkbox" value="1" class="o-forms__checkbox" id="checkbox61">
+                        <label for="checkbox61" class="o-forms__label">Translate all articles from now on.</label>
+                    </div>
+                </fieldset>
+            </form>
+        </div>
+    </div>
+
+</div>