@financial-times/n-myft-ui 28.2.2 → 28.2.5

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

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

package/myft/main.scss

@@ -239,13 +239,12 @@ $spacing-unit: 20px;
 			color: oColorsByName('black-80');
 
 			padding-left: 0;
-			margin-left: -8px;
 
 			&:hover {
 				text-decoration: underline;
 			}
 
-			&::before {
+			&-collapsed::before {
 				content: '';
 				@include oIconsContent(
 					'plus',
@@ -255,6 +254,7 @@ $spacing-unit: 20px;
 				);
 				vertical-align: middle;
 				margin-top: -2px;
+				margin-left: -8px;
 			}
 		}
 

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

@@ -16,8 +16,7 @@ export default async function openSaveArticleToListVariant (contentId, options =
 
 	function createList (newList, cb) {
 		if(!newList || !newList.name) {
-			if (!lists.length) attachDescription();
-			return restoreFormHandler();
+			return restoreContent();
 		}
 
 		myFtClient.add('user', null, 'created', 'list', uuid(), { name: newList.name,	token: csrfToken })
@@ -25,18 +24,13 @@ export default async function openSaveArticleToListVariant (contentId, options =
 				myFtClient.add('list', detail.subject, 'contained', 'content', contentId, { token: csrfToken }).then((data) => {
 					const createdList = { name: newList.name, uuid: data.actorId, checked: true, isShareable: !!newList.isShareable };
 					lists.unshift(createdList);
-					const listElement = ListsElement(lists, addToList, removeFromList);
-					const overlayContent = document.querySelector('.o-overlay__content');
-					overlayContent.insertAdjacentElement('afterbegin', listElement);
 					const announceListContainer = document.querySelector('.myft-ui-create-list-variant-announcement');
 					announceListContainer.textContent = `${newList.name} created`;
-					restoreFormHandler();
 					cb(contentId, createdList);
 				});
 			})
 			.catch(() => {
-				if (!lists.length) attachDescription();
-				return restoreFormHandler();
+				return restoreContent();
 			});
 	}
 
@@ -62,6 +56,13 @@ export default async function openSaveArticleToListVariant (contentId, options =
 		});
 	}
 
+	function restoreContent () {
+		if (!lists.length) attachDescription();
+		refreshListElement();
+		showListElement();
+		return restoreFormHandler();
+	}
+
 	if (!haveLoadedLists) {
 		lists = await getLists(contentId);
 		haveLoadedLists = true;
@@ -75,6 +76,7 @@ export default async function openSaveArticleToListVariant (contentId, options =
 
 	const headingElement = HeadingElement();
 	let [contentElement, removeDescription, attachDescription, restoreFormHandler] = ContentElement(!lists.length, openFormHandler);
+	const [listElement, refreshListElement, hideListElement, showListElement] = ListsElement(lists, addToList, removeFromList);
 
 	createListOverlay = new Overlay(name, {
 		html: contentElement,
@@ -95,8 +97,20 @@ export default async function openSaveArticleToListVariant (contentId, options =
 		}
 	}
 
+	function onFormCancel () {
+		showListElement();
+		restoreFormHandler();
+	}
+
+	function onFormListCreated () {
+		refreshListElement();
+		showListElement();
+		restoreFormHandler();
+	}
+
 	function openFormHandler () {
-		const formElement = FormElement(createList, showPublicToggle, restoreFormHandler, attachDescription);
+		hideListElement();
+		const formElement = FormElement(createList, showPublicToggle, attachDescription, onFormListCreated, onFormCancel);
 		const overlayContent = document.querySelector('.o-overlay__content');
 		removeDescription();
 		overlayContent.insertAdjacentElement('beforeend', formElement);
@@ -110,7 +124,6 @@ export default async function openSaveArticleToListVariant (contentId, options =
 
 	createListOverlay.wrapper.addEventListener('oOverlay.ready', (data) => {
 		if (lists.length) {
-			const listElement = ListsElement(lists, addToList, removeFromList);
 			const overlayContent = document.querySelector('.o-overlay__content');
 			overlayContent.insertAdjacentElement('afterbegin', listElement);
 		}
@@ -183,7 +196,7 @@ function getResizeHandler (target) {
 	};
 }
 
-function FormElement (createList, showPublicToggle, restoreFormHandler, attachDescription) {
+function FormElement (createList, showPublicToggle, attachDescription, onListCreated, onCancel) {
 	const formString = `
 	<form class="myft-ui-create-list-variant-form">
 		<label class="myft-ui-create-list-variant-form-name o-forms-field">
@@ -245,6 +258,8 @@ function FormElement (createList, showPublicToggle, restoreFormHandler, attachDe
 				createListOverlay.close();
 				showMessageOverlay();
 			}
+
+			onListCreated();
 		}));
 		formElement.remove();
 	}
@@ -254,20 +269,27 @@ function FormElement (createList, showPublicToggle, restoreFormHandler, attachDe
 		event.stopPropagation();
 		formElement.remove();
 		if (!lists.length) attachDescription();
-		restoreFormHandler();
+		onCancel();
+	}
+
+	formElement.querySelector('button[type="submit"]').addEventListener('click', handleSubmit);
+	formElement.querySelector('button[type="button"]').addEventListener('click', handleCancelClick);
+
+	if (showPublicToggle) {
+		addPublicToggleListener(formElement);
 	}
 
+	return formElement;
+}
+
+function addPublicToggleListener (formElement) {
 	function onPublicToggleClick (event) {
 		event.target.setAttribute('data-trackable', event.target.checked ? 'private-link' : 'public-link');
 		event.target.setAttribute('text', event.target.checked ? 'private' : 'public');
 		triggerPublicToggleEvent(event.target.checked);
 	}
 
-	formElement.querySelector('button[type="submit"]').addEventListener('click', handleSubmit);
-	formElement.querySelector('button[type="button"]').addEventListener('click', handleCancelClick);
 	formElement.querySelector('input[name="is-shareable"]').addEventListener('click', onPublicToggleClick);
-
-	return formElement;
 }
 
 function ContentElement (hasDescription, onClick) {
@@ -275,7 +297,7 @@ function ContentElement (hasDescription, onClick) {
 
 	const content = `
 		<div class="myft-ui-create-list-variant-footer">
-			<button class="myft-ui-create-list-variant-add" data-trackable="add-to-new-list" text="add to new list">Add to a new list</button>
+			<button class="myft-ui-create-list-variant-add myft-ui-create-list-variant-add-collapsed" data-trackable="add-to-new-list" text="add to new list">Add to a new list</button>
 			${hasDescription ? `
 			${description}
 		` : ''}
@@ -299,7 +321,13 @@ function ContentElement (hasDescription, onClick) {
 	}
 
 	function restoreFormHandler () {
-		return contentElement.addEventListener('click', onClick, { once: true });
+		contentElement.querySelector('.myft-ui-create-list-variant-add').classList.add('myft-ui-create-list-variant-add-collapsed');
+		return contentElement.addEventListener('click', clickHandler, { once: true });
+	}
+
+	function clickHandler (event) {
+		contentElement.querySelector('.myft-ui-create-list-variant-add').classList.remove('myft-ui-create-list-variant-add-collapsed');
+		onClick(event);
 	}
 
 	return [contentElement, removeDescription, attachDescription, restoreFormHandler];
@@ -332,9 +360,21 @@ function ListsElement (lists, addToList, removeFromList) {
 
 	const listsElementContainer = listsElement.querySelector('.myft-ui-create-list-variant-lists-container');
 
-	lists.map(list => listsElementContainer.insertAdjacentElement('beforeend', listCheckboxElement(list)));
+	function refresh () {
+		listsElementContainer.replaceChildren(...lists.map(list => listCheckboxElement(list)));
+	}
+
+	function hide () {
+		listsElement.style.display = 'none';
+	}
+
+	function show () {
+		listsElement.style.display = 'flex';
+	}
+
+	refresh();
 
-	return listsElement;
+	return [listsElement, refresh, hide, show];
 }
 
 function ListCheckboxElement (addToList, removeFromList) {

package/package.json

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