@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
|
-
|
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
|
-
|
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
|
-
${
|
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
|
-
|
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.
|
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",
|