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

Sign up to get free protection for your applications and to get access to all the features.
@@ -2,7 +2,6 @@ import Overlay from 'o-overlay';
2
2
  import myFtClient from 'next-myft-client';
3
3
  import { uuid } from 'n-ui-foundations';
4
4
  import getToken from './lib/get-csrf-token';
5
- import oTooltip from 'o-tooltip';
6
5
 
7
6
  const csrfToken = getToken();
8
7
 
@@ -32,6 +31,7 @@ async function openSaveArticleToListVariant (name, contentId) {
32
31
  const announceListContainer = document.querySelector('.myft-ui-create-list-variant-announcement');
33
32
  announceListContainer.textContent = `${list} created`;
34
33
  triggerCreateListEvent(contentId);
34
+ contentElement.addEventListener('click', openFormHandler, { once: true });
35
35
  });
36
36
  });
37
37
  }
@@ -76,8 +76,8 @@ async function openSaveArticleToListVariant (name, contentId) {
76
76
  existingOverlay.destroy();
77
77
  }
78
78
 
79
- const contentElement = ContentElement();
80
79
  const headingElement = HeadingElement();
80
+ let [contentElement, removeDescription] = ContentElement(!lists.length);
81
81
 
82
82
  const createListOverlay = new Overlay(name, {
83
83
  html: contentElement,
@@ -104,6 +104,7 @@ async function openSaveArticleToListVariant (name, contentId) {
104
104
  try {
105
105
  const formElement = FormElement(createList);
106
106
  const overlayContent = document.querySelector('.o-overlay__content');
107
+ removeDescription();
107
108
  overlayContent.insertAdjacentElement('beforeend', formElement);
108
109
  formElement.elements[0].focus();
109
110
  } catch(error) {
@@ -121,31 +122,12 @@ async function openSaveArticleToListVariant (name, contentId) {
121
122
  overlayContent.insertAdjacentElement('afterbegin', listElement);
122
123
  }
123
124
 
124
- contentElement.addEventListener('click', openFormHandler);
125
+ contentElement.addEventListener('click', openFormHandler, { once: true });
125
126
 
126
- document.querySelector('.article-content').addEventListener('click', outsideClickHandler);
127
+ document.querySelector('.article-content').addEventListener('click', outsideClickHandler, { once: true });
127
128
  });
128
129
 
129
- createListOverlay.wrapper.addEventListener('oOverlay.destroy', () => {
130
- const tooltipTemplate = document.createElement('div');
131
- const opts = {
132
- target: 'o-header-top-link-myft',
133
- content: 'Go to saved articles in myFT to find your lists',
134
- showOnConstruction: true,
135
- closeAfter: 5,
136
- position: 'below'
137
- };
138
-
139
- new oTooltip(tooltipTemplate, opts);
140
-
141
- contentElement.removeEventListener('click', openFormHandler);
142
-
143
- document.querySelector('.article-content').removeEventListener('click', outsideClickHandler);
144
- });
145
-
146
- window.addEventListener('scroll', function () {
147
- realignListener(createListOverlay.wrapper, window.scrollY);
148
- });
130
+ window.addEventListener('scroll', realignListener(createListOverlay.wrapper, window.scrollY));
149
131
 
150
132
  window.addEventListener('oViewport.resize', () => {
151
133
  realignListener(createListOverlay.wrapper);
@@ -192,15 +174,26 @@ function FormElement (createList) {
192
174
  return formElement;
193
175
  }
194
176
 
195
- function ContentElement () {
196
- let content = `
177
+ function ContentElement (description) {
178
+ const content = `
197
179
  <div class="myft-ui-create-list-variant-footer">
198
180
  <button class="myft-ui-create-list-variant-add">Add to a new list</button>
199
- ${!lists.length ? '<p class="myft-ui-create-list-variant-add-description">Lists are a simple way to curate your content</p>' : ''}
181
+ ${description ? `
182
+ <p class="myft-ui-create-list-variant-add-description">Lists are a simple way to curate your content</p>
183
+ ` : ''}
200
184
  </div>
201
185
  `;
202
186
 
203
- return stringToHTMLElement(content);
187
+ const contentElement = stringToHTMLElement(content);
188
+
189
+ function removeDescription () {
190
+ const descriptionElement = contentElement.querySelector('.myft-ui-create-list-variant-add-description');
191
+ if (descriptionElement) {
192
+ descriptionElement.remove();
193
+ }
194
+ }
195
+
196
+ return [contentElement, removeDescription];
204
197
  }
205
198
 
206
199
  function HeadingElement () {
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@financial-times/n-myft-ui",
3
- "version": "27.2.0",
3
+ "version": "27.2.1",
4
4
  "description": "Client side component for interaction with myft",
5
5
  "main": "server.js",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1",
8
8
  "commit": "commit-wizard",
9
9
  "prepare": "npx snyk protect || npx snyk protect -d || true",
10
- "preinstall": "npm_config_yes=true npx check-engine"
10
+ "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
11
11
  },
12
12
  "repository": {
13
13
  "type": "git",