Carousel ui

client/admin/scss/main.scss

@@ -1,53 +1,8 @@
-// Output @font-face declarations
-$o-fonts-is-silent: false;
-$o-forms-is-silent: false;
-$o-ft-icons-is-silent: false;
-
-// Import Origami components
-@import 'o-grid/main';
-@import 'o-fonts/main';
-@import 'o-colors/main';
-@import 'o-forms/main';
-@import 'o-buttons/main';
-@import 'o-header/main';
-@import 'o-hierarchical-nav/main';
-@import 'o-ft-icons/main';
+@import "../../common/scss/admin-common";
 
 $fa-font-path: "/fonts";
 @import './lib/font-awesome/font-awesome';
 
-// Store the default FT sans-serif font stack in a variable
-$sans-serif: oFontsGetFontFamilyWithFallbacks(BentonSans);
-
-html {
-	// The iconic pink background
-	@include oColorsFor(page, background);
-
-	// Set a font family on the whole document
-	font-family: $sans-serif;
-
-	// Prevent navigation menus from creating
-	// extra space on sides of the page
-	overflow-x: hidden;
-}
-
-body {
-	@include oGridRow;
-	font-family: metricweb;
-	margin: 0;
-	padding: 0;
-	flex-direction: column;
-	max-width: initial;
-}
-
-.o-header__primary__right.o-header__nav--tools-theme {
-	overflow: visible;
-	[data-o-hierarchical-nav-level='1'] > li > a {
-		width: auto;
-		font-size: 100%;
-	}
-}
-
 select {
 	@include oFormsCommonField;
 	@include oFormsSelect;
@@ -79,12 +34,6 @@ button {
 	@include oButtons(big, standout);
 }
 
-.page {
-	@include oGridColumn((default: 12, S: 11));
-	@include oGridCenter;
-	padding: 0 1em;
-}
-
 .filterbar {
 	display: flex;
 	align-items: center;

client/common/js/urls.js

@@ -39,17 +39,24 @@ function isImage(url){
 							}
 						});
 					});
+
+					responseStream.body.on('error', function(err){
+						console.log(err);
+						resolve();
+					});
+
 				});
 
 			})
 			.then(function(hexChunk) {
-
 				if(hexChunk !== undefined){
 					return (hexChunk.substring(0, 8) in lookup);
 				} else {
 					return false;
 				}
-
+			})
+			.catch(err => {
+				console.log(err);
 			})
 		;
 
@@ -134,6 +141,9 @@ module.exports = function transform (url, host) {
 
 					return url;
 					})
+					.catch(err => {
+						console.log(err);
+					})
 				;
 	}
 

client/common/scss/_admin-common.scss

@@ -0,0 +1,52 @@
+// Output @font-face declarations
+$o-fonts-is-silent: false;
+$o-forms-is-silent: false;
+$o-ft-icons-is-silent: false;
+
+// Import Origami components
+@import 'o-grid/main';
+@import 'o-fonts/main';
+@import 'o-colors/main';
+@import 'o-forms/main';
+@import 'o-buttons/main';
+@import 'o-header/main';
+@import 'o-hierarchical-nav/main';
+@import 'o-ft-icons/main';
+
+// Store the default FT sans-serif font stack in a variable
+$sans-serif: oFontsGetFontFamilyWithFallbacks(BentonSans);
+
+html {
+	// The iconic pink background
+	@include oColorsFor(page, background);
+
+	// Set a font family on the whole document
+	font-family: $sans-serif;
+
+	// Prevent navigation menus from creating
+	// extra space on sides of the page
+	overflow-x: hidden;
+}
+
+body {
+	@include oGridRow;
+	font-family: metricweb;
+	margin: 0;
+	padding: 0;
+	flex-direction: column;
+	max-width: initial;
+}
+
+.o-header__primary__right.o-header__nav--tools-theme {
+	overflow: visible;
+	[data-o-hierarchical-nav-level='1'] > li > a {
+		width: auto;
+		font-size: 100%;
+	}
+}
+
+.page {
+	@include oGridColumn((default: 12, S: 11));
+	@include oGridCenter;
+	padding: 0 1em;
+}

client/generator-carousel-admin/js/main.js

@@ -1,24 +1,31 @@
 'use strict';
-var transformUrl     = require('../../common/js/urls');
 var default_url      = 'https://en.wikipedia.org/wiki/Financial_Times';
 var default_duration = 10;
 var default_url = "https://en.wikipedia.org/wiki/Static_web_page";
 
 var keyUpTimeout = null,
-	table = undefined;
+	tableBody,
+	templateInputBox;
 
-function appendNewInputToForm(){
+function removeRow(e) {
 
-	var existingInput = table.getElementsByClassName('url-and-duration')[1],
-		clone = existingInput.cloneNode(true),
-		inputs = clone.getElementsByTagName('input');
-
-	for(var g = 0; g < inputs.length; g += 1){
-		inputs[g].value = "";
+	var row;
+	if(e.target.className === 'remove') {
+		row = e.currentTarget;
+		row.removeEventListener('click', removeRow);
+		tableBody.removeChild(row);
 	}
+	checkAndAddMoreForms();
+}
 
-	table.appendChild(clone);
-
+function appendNewInputToForm(n){
+	var newRow;
+	for (var i = 0,l = n||1; i<l; i++) {
+		newRow = templateInputBox.cloneNode(true);
+		tableBody.appendChild(newRow);
+		newRow.addEventListener('click', removeRow);
+	}
+	return newRow;
 }
 
 function allInputsHaveContent(inputs){
@@ -29,7 +36,7 @@ function allInputsHaveContent(inputs){
 	for(var f = 0; f < inputs.length; f += 1){
 
 		if(inputs[f].value !== ""){
-			numberOfInputsWithContent += 1
+			numberOfInputsWithContent += 1;
 		}
 
 	}
@@ -85,41 +92,32 @@ function getTitleAndFrames( params ) {
 	};
 }
 
+function getNextEmptySlot() {
+	var inputFields = Array.prototype.slice.call(tableBody.querySelectorAll('.url-and-duration'));
+	var i, l,field;
+	for (i=0, l=inputFields.length; i<l; i++) {
+		field = inputFields[i];
+		if (field.querySelector('input[type="url"]').value === "") return field;
+	}
+	return appendNewInputToForm();
+}
+
 function populateFields( titleAndFrames ) {
 	var title             = titleAndFrames['title'];
 	var frames            = titleAndFrames['frames'];
-	var inputFields       = document.getElementById('carouselForm').querySelectorAll('input');
 	var numGivenFrames    = frames.length;
-	var numInputFrames    = Math.round( inputFields.length / 2 );
-	var numCopiableFrames = Math.min( numGivenFrames, numInputFrames );
-	var url, duration;
-
-	// inputFields = [title, url, duration, url, duration, ...]
-
-	// clear the fields before we inject new content into them
-	if (numCopiableFrames !== 0) {
-		for (var i = 0; i < inputFields.length; i++) {
-			inputFields[i].value = "";
-		}
-	}
-
-	// don't forget the first input is the title
+	var url, duration, inputField;
 
-	inputFields[0].value = title;
+	document.querySelector('.title-form-item').value = title;
 
 	for (var j = 0; j < numGivenFrames; j++) {
 		url      = frames[j][0];
 		duration = frames[j][1];
-
-
-		if(inputFields[1 + (2 * j)] === undefined){
-			appendNewInputToForm(table);
-			inputFields = document.getElementById('carouselForm').querySelectorAll('input');
-		}
+		inputField  = getNextEmptySlot().querySelectorAll('input');
 
 		if(url !== ""){
-			inputFields[1 + (2 * j)    ].value = url;
-			inputFields[1 + (2 * j) + 1].value = duration;	
+			inputField[0].value = url;
+			inputField[1].value = duration;	
 		}
 	}
 }
@@ -159,26 +157,44 @@ function generateLinkForViewer(carouselForm){
 	return link;
 }
 
-document.addEventListener("DOMContentLoaded", function() {
-	// check for an example carousel being pasted in
-	// first unpack the copyFrom param (if it exists), then wait for a paste event
+function checkAndAddMoreForms() {
+
+	if(allInputsHaveContent(tableBody.querySelectorAll('input[type=url]') ) ){
 
-	table = document.getElementsByTagName('table')[0];
+		appendNewInputToForm();
 
+	}
+}
+
+document.addEventListener("DOMContentLoaded", function ready() {
+
+	// Prevent listeners being added multiple times with multiple DOM Content Loads
+	if (document.ready) return;
+	document.ready = true;
+
+	tableBody = document.getElementsByTagName('tbody')[0];
+	templateInputBox = tableBody.getElementsByClassName('url-and-duration')[0];
+	tableBody.removeChild(templateInputBox);
+
+	appendNewInputToForm(3);
+
+	// check for an example carousel being pasted in
+	// first unpack the copyFrom param (if it exists), then wait for a paste event
 	var copyFrom = findCopyFrom();
 	if (copyFrom !== "") {
 		unpackCarousel( copyFrom );
 	}
 
+	// When it is pasted in populate the rows
 	document.getElementById('templateCarousel')
 		.addEventListener("input", function(e) {
 			e.preventDefault();
 			e.stopPropagation();
 			unpackCarousel(e.target.value);
+			e.target.value = "";
 		});
 
 	// check for the submit of a carousel being generated
-
 	var carouselForm = document.getElementById('carouselForm');
 	// carouselForm[0].focus();
 
@@ -193,19 +209,11 @@ document.addEventListener("DOMContentLoaded", function() {
 
 	}, false);
 
-});
-
-window.addEventListener('keyup', function(){
-
-	clearTimeout(keyUpTimeout);
-	keyUpTimeout = setTimeout(function(){
-
-		if(allInputsHaveContent(table.querySelectorAll('input[type=url]') ) ){
+	carouselForm.addEventListener('keyup', function(){
 
-			appendNewInputToForm(table);
+		clearTimeout(keyUpTimeout);
+		keyUpTimeout = setTimeout(checkAndAddMoreForms, 200);
 
-		}
-
-	}, 200);
+	}, false);
 
-}, false);
+});

client/generator-carousel-admin/scss/main.scss

@@ -0,0 +1,49 @@
+@import "../../common/scss/admin-common";
+
+label {
+	font-weight: bold;
+}
+
+form {
+	table {
+		width: 100%;
+	}
+
+	tr.o-forms-group {
+		display: flex;
+		margin-bottom: 0.5em;
+		padding: 0;
+
+		label {
+			padding-right: 0.3em;
+		}
+
+		td.url-form-item {
+			flex-grow: 1;
+			display: flex;
+			margin-right: 1em;
+
+			input {
+				flex-grow: 1;
+			}
+		}
+	}
+
+	.remove {
+		font-weight: bold;
+		color: black;
+		text-decoration: none;
+		width: 1em;
+		text-align: center;
+		display: inline-block;
+	}
+
+
+	thead tr.o-forms-group {
+		margin-bottom: 1em;
+
+		td {
+			padding: 0 1em;
+		}
+	}
+}