@financial-times/n-myft-ui 27.1.0 → 27.2.0

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

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

package/myft/main.scss

@@ -173,3 +173,148 @@ $spacing-unit: 20px;
 	}
 
 }
+
+.share-nav {
+	&.data-overlap-initialised {
+		.o-overlay {
+			transition: opacity 0.15s ease-in;
+			opacity: 0;
+			z-index: -1;
+		}
+	}
+
+	.myft-ui-create-list-variant {
+		border-radius: 10px;
+		border: 1px solid oColorsByName('black-5');
+		background: oColorsByName('white-80');
+
+		.o-overlay__heading {
+			border-radius: 10px 10px 0 0;
+			background: oColorsByName('white-60');
+			@include oTypographySans($scale: 2);
+			color: oColorsByName('black-80');
+		}
+
+		.o-overlay__content {
+			@include oTypographySans($scale: 0);
+			color: oColorsByName('black-80');
+			padding: 0;
+		}
+
+		.o-overlay__title {
+			margin: 8px 14px 0 8px;
+		}
+
+		&-container {
+			display: block;
+			width: 340px;
+			top: 115.5px;
+			left: 50px;
+		}
+
+		&-add {
+			border: 0;
+			background: none;
+			@include oTypographySans($scale: 1, $weight: 'semibold');
+			color: oColorsByName('black-80');
+
+			padding-left: 0;
+			margin-left: -8px;
+
+			&:hover {
+				text-decoration: underline;
+			}
+
+			&::before {
+				content: '';
+				@include oIconsContent(
+					'plus',
+					oColorsByName('black-80'),
+					28,
+					$iconset-version: 1
+				);
+				vertical-align: middle;
+				margin-top: -2px;
+			}
+		}
+
+		&-add-description {
+			margin: 4px 0;
+		}
+
+		&-heading {
+			&::before {
+				content: '';
+				@include oIconsContent(
+					'tick',
+					oColorsByName('teal'),
+					32,
+					$iconset-version: 1
+				);
+				vertical-align: middle;
+				margin-top: -2px;
+			}
+		}
+
+		&-footer {
+			border-top: 1px solid oColorsByName('black-5');
+			padding: 16px;
+		}
+
+		&-icon {
+			&::before {
+				content: "";
+				display: inline-block;
+				background-repeat: no-repeat;
+				background-size: contain;
+				background-position: 50%;
+				background-color: transparent;
+				background-image: url(https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1:brand-myft?source=next-article);
+				width: 42px;
+				height: 42px;
+				vertical-align: middle;
+				margin-top: -2px;
+			}
+
+			&-visually-hidden {
+				clip: rect(0 0 0 0);
+				clip-path: inset(50%);
+				height: 1px;
+				overflow: hidden;
+				position: absolute;
+				white-space: nowrap;
+				width: 1px;
+			}
+		}
+
+		&-form {
+			display: flex;
+			width: calc(100% - 32px);
+			justify-content: space-between;
+			height: 40px;
+			gap: 8px;
+			padding: 0 16px 16px;
+
+			& > * {
+				flex: 1 1 auto;
+			}
+
+			.o-forms-input {
+				margin-top: 0;
+			}
+		}
+
+		&-lists {
+			padding: 16px 16px 0;
+			@include oTypographySans($scale: 1);
+			&-text {
+				@include oTypographySans($weight: 'semibold');
+				color: oColorsByName('black-80');
+				margin-bottom: 16px;
+			}
+			&-container {
+				margin-top: 0;
+			}
+		}
+	}
+}

package/myft/ui/lists.js

@@ -6,6 +6,7 @@ import nNotification from 'n-notification';
 import { uuid } from 'n-ui-foundations';
 import getToken from './lib/get-csrf-token';
 import oForms from 'o-forms';
+import openSaveArticleToListVariant from './save-article-to-list-variant';
 
 const delegate = new Delegate(document.body);
 const csrfToken = getToken();
@@ -161,6 +162,10 @@ function showArticleSavedOverlay (contentId) {
 	showListsOverlay('Article saved', `/myft/list?fragment=true&fromArticleSaved=true&contentId=${contentId}`, contentId);
 }
 
+function showCreateListAndAddArticleOverlay (contentId, name = 'myft-ui-create-list-variant') {
+	return openSaveArticleToListVariant(name, contentId);
+}
+
 function handleArticleSaved (contentId) {
 	return myFtClient.getAll('created', 'list')
 		.then(createdLists => createdLists.filter(list => !list.isRedirect))
@@ -171,10 +176,27 @@ 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);
+		});
+}
+
 function initialEventListeners () {
 
 	document.body.addEventListener('myft.user.saved.content.add', event => {
 		const contentId = event.detail.subject;
+
+		// 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) {
+			return openCreateListAndAddArticleOverlay(contentId);
+		}
+
 		handleArticleSaved(contentId);
 	});
 

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

@@ -0,0 +1,376 @@
+import Overlay from 'o-overlay';
+import myFtClient from 'next-myft-client';
+import { uuid } from 'n-ui-foundations';
+import getToken from './lib/get-csrf-token';
+import oTooltip from 'o-tooltip';
+
+const csrfToken = getToken();
+
+let lists;
+
+export default async function showSaveArticleToListVariant (name, contentId) {
+	try {
+		await openSaveArticleToListVariant (name, contentId);
+	} catch(error) {
+		handleError(error);
+	}
+}
+
+async function openSaveArticleToListVariant (name, contentId) {
+	function createList (list) {
+		if(!list) {
+			return;
+		}
+
+		myFtClient.add('user', null, 'created', 'list', uuid(), { name: list,	token: csrfToken })
+			.then(detail => {
+				myFtClient.add('list', detail.subject, 'contained', 'content', contentId, { token: csrfToken }).then((createdList) => {
+					lists.push({ name: list, uuid: createdList.actorId, checked: true });
+					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 = `${list} created`;
+					triggerCreateListEvent(contentId);
+				});
+			});
+	}
+
+	function addToList (list) {
+		if(!list) {
+			return;
+		}
+
+		myFtClient.add('list', list.uuid, 'contained', 'content', contentId, { token: csrfToken }).then(() => {
+			const indexToUpdate = lists.indexOf(list);
+			lists[indexToUpdate] = { ...lists[indexToUpdate], checked: true };
+			const listElement = ListsElement(lists, addToList, removeFromList);
+			const overlayContent = document.querySelector('.o-overlay__content');
+			overlayContent.insertAdjacentElement('afterbegin', listElement);
+			triggerAddToListEvent(contentId);
+		});
+	}
+
+	function removeFromList (list) {
+		if(!list) {
+			return;
+		}
+
+		myFtClient.remove('list', list.uuid, 'contained', 'content', contentId, { token: csrfToken }).then(() => {
+			const indexToUpdate = lists.indexOf(list);
+			lists[indexToUpdate] = { ...lists[indexToUpdate], checked: false };
+			const listElement = ListsElement(lists, addToList, removeFromList);
+			const overlayContent = document.querySelector('.o-overlay__content');
+			overlayContent.insertAdjacentElement('afterbegin', listElement);
+			triggerRemoveFromListEvent(contentId);
+		});
+	}
+
+	if (!lists) {
+		lists = await getLists(contentId);
+	}
+
+	const overlays = Overlay.getOverlays();
+	const existingOverlay = overlays[name];
+	if (existingOverlay) {
+		existingOverlay.destroy();
+	}
+
+	const contentElement = ContentElement();
+	const headingElement = HeadingElement();
+
+	const createListOverlay = new Overlay(name, {
+		html: contentElement,
+		heading: { title: headingElement.outerHTML },
+		modal: false,
+		parentnode: isMobile() ? '.o-share--horizontal' : '.o-share--vertical',
+		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);
+		}
+	}
+
+	function openFormHandler () {
+		try {
+			const formElement = FormElement(createList);
+			const overlayContent = document.querySelector('.o-overlay__content');
+			overlayContent.insertAdjacentElement('beforeend', formElement);
+			formElement.elements[0].focus();
+		} catch(error) {
+			handleError(error);
+		}
+	}
+
+	createListOverlay.open();
+	createListOverlay.wrapper.addEventListener('oOverlay.ready', (data) => {
+		realignListener(data.currentTarget);
+
+		if (lists && lists.length) {
+			const listElement = ListsElement(lists, addToList, removeFromList);
+			const overlayContent = document.querySelector('.o-overlay__content');
+			overlayContent.insertAdjacentElement('afterbegin', listElement);
+		}
+
+		contentElement.addEventListener('click', openFormHandler);
+
+		document.querySelector('.article-content').addEventListener('click', outsideClickHandler);
+	});
+
+	createListOverlay.wrapper.addEventListener('oOverlay.destroy', () => {
+		const tooltipTemplate = document.createElement('div');
+		const opts = {
+			target: 'o-header-top-link-myft',
+			content: 'Go to saved articles in myFT to find your lists',
+			showOnConstruction: true,
+			closeAfter: 5,
+			position: 'below'
+		};
+
+		new oTooltip(tooltipTemplate, opts);
+
+		contentElement.removeEventListener('click', openFormHandler);
+
+		document.querySelector('.article-content').removeEventListener('click', outsideClickHandler);
+	});
+
+	window.addEventListener('scroll', function () {
+		realignListener(createListOverlay.wrapper, window.scrollY);
+	});
+
+	window.addEventListener('oViewport.resize', () => {
+		realignListener(createListOverlay.wrapper);
+	});
+}
+
+function stringToHTMLElement (string) {
+	const template = document.createElement('template');
+	template.innerHTML = string.trim();
+	return template.content.firstChild;
+}
+
+function FormElement (createList) {
+	const formString = `
+	<form class="myft-ui-create-list-variant-form">
+		<label class="o-forms-field">
+			<span class="o-forms-input o-forms-input--text">
+				<input type="text" name="list-name" aria-label="List name">
+			</span>
+		</label>
+		<button class="o-buttons o-buttons--secondary" type="submit">
+			Save
+		</button>
+	</form>
+	`;
+
+	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);
+		}
+	}
+
+	formElement.querySelector('button[type="submit"]').addEventListener('click', handleSubmit);
+
+	return formElement;
+}
+
+function ContentElement () {
+	let content = `
+		<div class="myft-ui-create-list-variant-footer">
+			<button class="myft-ui-create-list-variant-add">Add to a new list</button>
+			${!lists.length ? '<p class="myft-ui-create-list-variant-add-description">Lists are a simple way to curate your content</p>' : ''}
+		</div>
+	`;
+
+	return stringToHTMLElement(content);
+}
+
+function HeadingElement () {
+	const heading = `
+		<span class="myft-ui-create-list-variant-heading">Added to <a href="https://www.ft.com/myft/saved-articles">saved articles</a> in <span class="myft-ui-create-list-variant-icon"><span class="myft-ui-create-list-variant-icon-visually-hidden">my FT</span></span></span>
+		`;
+
+	return stringToHTMLElement(heading);
+}
+
+function ListsElement (lists, addToList, removeFromList) {
+	const currentList = document.querySelector('.myft-ui-create-list-variant-lists');
+	if (currentList) {
+		currentList.remove();
+	}
+
+	const listCheckboxElement = ListCheckboxElement(addToList, removeFromList);
+
+	const listsTemplate = `
+	<div class="myft-ui-create-list-variant-lists o-forms-field o-forms-field--optional" role="group">
+		<span class="myft-ui-create-list-variant-lists-text">Add to a list</span>
+		<span class="myft-ui-create-list-variant-lists-container o-forms-input o-forms-input--checkbox">
+		</span>
+	</div>
+	`;
+	const listsElement = stringToHTMLElement(listsTemplate);
+
+	const listsElementContainer = listsElement.querySelector('.myft-ui-create-list-variant-lists-container');
+
+	lists.map(list => listsElementContainer.insertAdjacentElement('beforeend', listCheckboxElement(list)));
+
+	return listsElement;
+}
+
+function ListCheckboxElement (addToList, removeFromList) {
+	return function (list) {
+		const listCheckbox = `<label>
+		<input type="checkbox" name="default" value="${list.name}" ${list.checked ? 'checked' : ''}>
+		<span class="o-forms-input__label">
+			<span class="o-normalise-visually-hidden">
+			${list.checked ? 'Remove article from ' : 'Add article to ' }
+			</span>
+			${list.name}
+		</span>
+	</label>
+	`;
+
+		const listCheckboxElement = stringToHTMLElement(listCheckbox);
+
+		const [ input ] = listCheckboxElement.children;
+
+		function handleCheck (event) {
+			event.preventDefault();
+			return event.target.checked ? addToList(list) : removeFromList(list);
+		}
+
+		input.addEventListener('click', handleCheck);
+
+		return listCheckboxElement;
+	};
+}
+
+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 isMobile () {
+	const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+
+	return vw <= 980;
+}
+
+function calculateLargerScreenHalf (target) {
+	const vh = Math.min(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+
+	const targetBox = target.getBoundingClientRect();
+	const spaceAbove = targetBox.top;
+	const spaceBelow = vh - targetBox.bottom;
+
+	return spaceBelow < spaceAbove ? 'ABOVE' : 'BELOW';
+}
+
+async function getLists () {
+	return myFtClient.getAll('created', 'list')
+		.then(lists => lists.filter(list => !list.isRedirect))
+		.then(lists => {
+			return lists.map(list => ({ name: list.name, uuid: list.uuid, checked: false }));
+		});
+}
+
+function triggerAddToListEvent (contentId) {
+	return document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+		detail: {
+			category: 'professorLists',
+			action: 'add-to-list',
+			article_id: contentId,
+			teamName: 'customer-products-us-growth',
+			amplitudeExploratory: true
+		},
+		bubbles: true
+	}));
+}
+
+function triggerRemoveFromListEvent (contentId) {
+	return document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+		detail: {
+			category: 'professorLists',
+			action: 'remove-from-list',
+			article_id: contentId,
+			teamName: 'customer-products-us-growth',
+			amplitudeExploratory: true
+		},
+		bubbles: true
+	}));
+}
+
+function triggerCreateListEvent (contentId) {
+	document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+		detail: {
+			category: 'professorLists',
+			action: 'create-list',
+			article_id: contentId,
+			teamName: 'customer-products-us-growth',
+			amplitudeExploratory: true
+		},
+		bubbles: true
+	}));
+
+	return document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+		detail: {
+			category: 'myFT',
+			action: 'create-list-success',
+			article_id: 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": "27.1.0",
+  "version": "27.2.0",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {