@financial-times/n-myft-ui 28.2.4 → 28.2.6

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/ui/save-article-to-list-variant.js

@@ -10,6 +10,8 @@ const csrfToken = getToken();
 let lists = [];
 let haveLoadedLists = false;
 let createListOverlay;
+let scrolledOnOpen;
+let listOverlayBottom;
 
 export default async function openSaveArticleToListVariant (contentId, options = {}) {
 	const { name, showPublicToggle = false } = options;
@@ -118,6 +120,7 @@ export default async function openSaveArticleToListVariant (contentId, options =
 	}
 
 	createListOverlay.open();
+	scrolledOnOpen = window.scrollY;
 
 	const scrollHandler = getScrollHandler(createListOverlay.wrapper);
 	const resizeHandler = getResizeHandler(createListOverlay.wrapper);
@@ -130,6 +133,8 @@ export default async function openSaveArticleToListVariant (contentId, options =
 
 		positionOverlay(data.currentTarget);
 
+		listOverlayBottom = document.querySelector('.myft-ui-create-list-variant').getBoundingClientRect().bottom;
+
 		restoreFormHandler();
 
 		document.querySelector('.article-content').addEventListener('click', outsideClickHandler);
@@ -306,6 +311,7 @@ function ContentElement (hasDescription, onClick) {
 
 	const contentElement = stringToHTMLElement(content);
 
+	contentElement.querySelector('.myft-ui-create-list-variant-add').addEventListener('click', checkScrollToAdd);
 	contentElement.querySelector('.myft-ui-create-list-variant-add').addEventListener('click', triggerAddToNewListEvent);
 
 	function removeDescription () {
@@ -590,3 +596,19 @@ function triggerCancelEvent () {
 		bubbles: true
 	}));
 }
+
+//Temporary event to determine whether users need to scroll to add to a list
+function checkScrollToAdd () {
+	//if the bottom of the overlay was not showing and scrolling has occurred since it was opened
+	if(listOverlayBottom > window.innerHeight && window.scrollY > scrolledOnOpen) {
+		document.body.dispatchEvent(new CustomEvent('oTracking.event', {
+			detail: {
+				category: 'publicToggle',
+				action: 'scrollToAdd',
+				teamName: 'customer-products-us-growth',
+				amplitudeExploratory: true
+			},
+			bubbles: true
+		}));
+	}
+}

package/package.json

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