@financial-times/n-myft-ui 28.0.7 → 28.1.0

package/components/save-for-later/save-for-later.html

@@ -4,7 +4,7 @@
 	data-myft-ui="saved"
 	action="/myft/save/{{contentId}}"
 	data-js-action="/__myft/api/core/saved/content/{{contentId}}?method=put"
-	{{#ifEquals @root.flags.professorLists 'variant'}}data-myft-ui-variant="createListAndSaveArticleVariant"{{/ifEquals}}>
+	{{#if @root.flags.manageArticleLists}}data-myft-ui-save-new="manageArticleLists"{{/if}}>
 	{{> n-myft-ui/components/csrf-token/input}}
 	<div
 		class="n-myft-ui__announcement o-normalise-visually-hidden"

package/myft/ui/lists.js

@@ -179,8 +179,8 @@ function handleArticleSaved (contentId) {
 function openCreateListAndAddArticleOverlay (contentId) {
 	return myFtClient.getAll('created', 'list')
 		.then(createdLists => createdLists.filter(list => !list.isRedirect))
-		.then(createdLists => {
-			return !createdLists.length ? showCreateListAndAddArticleOverlay(contentId) : showArticleSavedOverlay(contentId);
+		.then(() => {
+			return showCreateListAndAddArticleOverlay(contentId);
 		});
 }
 
@@ -192,8 +192,8 @@ function initialEventListeners () {
 		// Checks if the createListAndSaveArticle variant is active
 		// and will show the variant overlay if the user has no lists,
 		// otherwise it will show the classic overlay
-		const createListVariant = event.currentTarget.querySelector('[data-myft-ui-variant="createListAndSaveArticleVariant"]');
-		if (createListVariant) {
+		const createNewListDesign = event.currentTarget.querySelector('[data-myft-ui-save-new="manageArticleLists"]');
+		if (createNewListDesign) {
 			return openCreateListAndAddArticleOverlay(contentId);
 		}
 

package/myft/ui/save-article-to-list-variant.js

@@ -5,20 +5,14 @@ import getToken from './lib/get-csrf-token';
 
 const csrfToken = getToken();
 
-let lists;
+let lists = [];
+let haveLoadedLists = false;
 
-export default async function showSaveArticleToListVariant (name, contentId) {
-	try {
-		await openSaveArticleToListVariant (name, contentId);
-	} catch(error) {
-		handleError(error);
-	}
-}
-
-async function openSaveArticleToListVariant (name, contentId) {
+export default async function openSaveArticleToListVariant (name, contentId) {
 	function createList (list) {
 		if(!list) {
-			return;
+			if (!lists.length) attachDescription();
+			return contentElement.addEventListener('click', openFormHandler, { once: true });
 		}
 
 		myFtClient.add('user', null, 'created', 'list', uuid(), { name: list,	token: csrfToken })
@@ -33,6 +27,10 @@ async function openSaveArticleToListVariant (name, contentId) {
 					triggerCreateListEvent(contentId);
 					contentElement.addEventListener('click', openFormHandler, { once: true });
 				});
+			})
+			.catch(() => {
+				if (!lists.length) attachDescription();
+				return contentElement.addEventListener('click', openFormHandler, { once: true });
 			});
 	}
 
@@ -66,8 +64,9 @@ async function openSaveArticleToListVariant (name, contentId) {
 		});
 	}
 
-	if (!lists) {
+	if (!haveLoadedLists) {
 		lists = await getLists(contentId);
+		haveLoadedLists = true;
 	}
 
 	const overlays = Overlay.getOverlays();
@@ -77,7 +76,7 @@ async function openSaveArticleToListVariant (name, contentId) {
 	}
 
 	const headingElement = HeadingElement();
-	let [contentElement, removeDescription] = ContentElement(!lists.length);
+	let [contentElement, removeDescription, attachDescription] = ContentElement(!lists.length);
 
 	const createListOverlay = new Overlay(name, {
 		html: contentElement,
@@ -87,36 +86,37 @@ async function openSaveArticleToListVariant (name, contentId) {
 		class: 'myft-ui-create-list-variant',
 	});
 
-	const realignListener = realignOverlay(window.scrollY);
-
 	function outsideClickHandler (e) {
-		try {
-			const overlayContent = document.querySelector('.o-overlay__content');
-			if(!overlayContent || !overlayContent.contains(e.target)) {
-				createListOverlay.close();
-			}
-		} catch(error) {
-			handleError(error);
+		const overlayContent = document.querySelector('.o-overlay__content');
+		if(createListOverlay.visible && (!overlayContent || !overlayContent.contains(e.target))) {
+			createListOverlay.close();
 		}
 	}
 
 	function openFormHandler () {
-		try {
-			const formElement = FormElement(createList);
-			const overlayContent = document.querySelector('.o-overlay__content');
-			removeDescription();
-			overlayContent.insertAdjacentElement('beforeend', formElement);
-			formElement.elements[0].focus();
-		} catch(error) {
-			handleError(error);
-		}
+		const formElement = FormElement(createList);
+		const overlayContent = document.querySelector('.o-overlay__content');
+		removeDescription();
+		overlayContent.insertAdjacentElement('beforeend', formElement);
+		formElement.elements[0].focus();
+	}
+
+	function getScrollHandler (target) {
+		return realignOverlay(window.scrollY, target);
+	}
+
+	function resizeHandler () {
+		positionOverlay(createListOverlay.wrapper);
 	}
 
 	createListOverlay.open();
+
+	const scrollHandler = getScrollHandler(createListOverlay.wrapper);
+
 	createListOverlay.wrapper.addEventListener('oOverlay.ready', (data) => {
-		realignListener(data.currentTarget);
+		positionOverlay(data.currentTarget);
 
-		if (lists && lists.length) {
+		if (lists.length) {
 			const listElement = ListsElement(lists, addToList, removeFromList);
 			const overlayContent = document.querySelector('.o-overlay__content');
 			overlayContent.insertAdjacentElement('afterbegin', listElement);
@@ -125,12 +125,16 @@ async function openSaveArticleToListVariant (name, contentId) {
 		contentElement.addEventListener('click', openFormHandler, { once: true });
 
 		document.querySelector('.article-content').addEventListener('click', outsideClickHandler, { once: true });
+
+		window.addEventListener('scroll', scrollHandler);
+
+		window.addEventListener('oViewport.resize', resizeHandler);
 	});
 
-	window.addEventListener('scroll', realignListener(createListOverlay.wrapper, window.scrollY));
+	createListOverlay.wrapper.addEventListener('oOverlay.destroy', () => {
+		window.removeEventListener('scroll', scrollHandler);
 
-	window.addEventListener('oViewport.resize', () => {
-		realignListener(createListOverlay.wrapper);
+		window.removeEventListener('oViewport.resize', resizeHandler);
 	});
 }
 
@@ -157,16 +161,12 @@ function FormElement (createList) {
 	const formElement = stringToHTMLElement(formString);
 
 	function handleSubmit (event) {
-		try {
-			event.preventDefault();
-			event.stopPropagation();
-			const inputListName = formElement.querySelector('input[name="list-name"]');
-			createList(inputListName.value);
-			inputListName.value = '';
-			formElement.remove();
-		} catch(error) {
-			handleError(error);
-		}
+		event.preventDefault();
+		event.stopPropagation();
+		const inputListName = formElement.querySelector('input[name="list-name"]');
+		createList(inputListName.value);
+		inputListName.value = '';
+		formElement.remove();
 	}
 
 	formElement.querySelector('button[type="submit"]').addEventListener('click', handleSubmit);
@@ -174,12 +174,14 @@ function FormElement (createList) {
 	return formElement;
 }
 
-function ContentElement (description) {
+function ContentElement (hasDescription) {
+	const description = '<p class="myft-ui-create-list-variant-add-description">Lists are a simple way to curate your content</p>';
+
 	const content = `
 		<div class="myft-ui-create-list-variant-footer">
 			<button class="myft-ui-create-list-variant-add">Add to a new list</button>
-			${description ? `
-			<p class="myft-ui-create-list-variant-add-description">Lists are a simple way to curate your content</p>
+			${hasDescription ? `
+			${description}
 		` : ''}
 		</div>
 	`;
@@ -193,7 +195,12 @@ function ContentElement (description) {
 		}
 	}
 
-	return [contentElement, removeDescription];
+	function attachDescription () {
+		const descriptionElement = stringToHTMLElement(description);
+		contentElement.insertAdjacentElement('beforeend', descriptionElement);
+	}
+
+	return [contentElement, removeDescription, attachDescription];
 }
 
 function HeadingElement () {
@@ -256,36 +263,41 @@ function ListCheckboxElement (addToList, removeFromList) {
 	};
 }
 
-function realignOverlay (originalScrollPosition) {
-	return function (target, currentScrollPosition) {
-		try {
-			if(currentScrollPosition && Math.abs(currentScrollPosition - originalScrollPosition) < 120) {
-				return;
-			}
-
-			originalScrollPosition = currentScrollPosition;
-
-			target.style['min-width'] = '340px';
-			target.style['width'] = '100%';
-			target.style['margin-top'] = '-50px';
-			target.style['left'] = 0;
-
-			if (isMobile()) {
-				target.style['position'] = 'absolute';
-				target.style['margin-left'] = 0;
-				target.style['margin-top'] = 0;
-				target.style['top'] = calculateLargerScreenHalf(target) === 'ABOVE' ? '-120px' : '50px';
-			} else {
-				target.style['position'] = 'absolute';
-				target.style['margin-left'] = '45px';
-				target.style['top'] = '220px';
-			}
-		} catch (error) {
-			handleError(error);
+function realignOverlay (originalScrollPosition, target) {
+	return function () {
+		const currentScrollPosition = window.scrollY;
+
+		if(Math.abs(currentScrollPosition - originalScrollPosition) < 120) {
+			return;
 		}
+
+		if (currentScrollPosition) {
+			originalScrollPosition = currentScrollPosition;;
+		}
+
+		positionOverlay(target);
 	};
 }
 
+function positionOverlay (target) {
+	target.style['min-width'] = '340px';
+	target.style['width'] = '100%';
+	target.style['margin-top'] = '-50px';
+	target.style['left'] = 0;
+
+	if (isMobile()) {
+		const shareNavComponent = document.querySelector('.share-nav__horizontal');
+		target.style['position'] = 'absolute';
+		target.style['margin-left'] = 0;
+		target.style['margin-top'] = 0;
+		target.style['top'] = calculateLargerScreenHalf(shareNavComponent) === 'ABOVE' ? '-120px' : '50px';
+	} else {
+		target.style['position'] = 'absolute';
+		target.style['margin-left'] = '45px';
+		target.style['top'] = '220px';
+	}
+}
+
 function isMobile () {
 	const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
 
@@ -293,6 +305,10 @@ function isMobile () {
 }
 
 function calculateLargerScreenHalf (target) {
+	if (!target) {
+		return 'BELOW';
+	}
+
 	const vh = Math.min(document.documentElement.clientHeight || 0, window.innerHeight || 0);
 
 	const targetBox = target.getBoundingClientRect();
@@ -357,13 +373,3 @@ function triggerCreateListEvent (contentId) {
 		bubbles: true
 	}));
 }
-
-function handleError (error) {
-	document.body.dispatchEvent(new CustomEvent('oErrors.log', {
-		bubbles: true,
-		detail: {
-			error,
-			info: { component: 'professorLists' },
-		}
-	}));
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "28.0.7",
+  "version": "28.1.0",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {