@financial-times/n-myft-ui 30.0.2 → 30.1.0
Sign up to get free protection for your applications and to get access to all the features.
@@ -5,7 +5,7 @@
|
|
5
5
|
action="/myft/save/{{contentId}}"
|
6
6
|
data-js-action="/__myft/api/core/saved/content/{{contentId}}?method=put"
|
7
7
|
{{#if @root.flags.manageArticleLists}}data-myft-ui-save-new="manageArticleLists"{{/if}}
|
8
|
-
{{#if @root.flags.manageArticleLists}}data-myft-ui-save-new-config="{{#if
|
8
|
+
{{#if @root.flags.manageArticleLists}}data-myft-ui-save-new-config="{{#if modal}}modal{{/if}}"{{/if}}>
|
9
9
|
{{> n-myft-ui/components/csrf-token/input}}
|
10
10
|
<div
|
11
11
|
class="n-myft-ui__announcement o-normalise-visually-hidden"
|
package/myft/ui/lists.js
CHANGED
@@ -291,7 +291,7 @@ function initialEventListeners () {
|
|
291
291
|
// These will be used to build a sanity check dashboard, and will be removed after we get clean-up this test.
|
292
292
|
document.body.dispatchEvent(new CustomEvent('oTracking.event', {
|
293
293
|
detail: {
|
294
|
-
category: '
|
294
|
+
category: 'lists',
|
295
295
|
action: 'savedArticle',
|
296
296
|
article_id: contentId,
|
297
297
|
teamName: 'customer-products-us-growth',
|
@@ -14,7 +14,7 @@ let scrolledOnOpen;
|
|
14
14
|
let listOverlayBottom;
|
15
15
|
|
16
16
|
export default async function openSaveArticleToListVariant (contentId, options = {}) {
|
17
|
-
const { name,
|
17
|
+
const { name, modal = false } = options;
|
18
18
|
|
19
19
|
function createList (newList, cb) {
|
20
20
|
if(!newList || !newList.name) {
|
@@ -112,7 +112,7 @@ export default async function openSaveArticleToListVariant (contentId, options =
|
|
112
112
|
|
113
113
|
function openFormHandler () {
|
114
114
|
hideListElement();
|
115
|
-
const formElement = FormElement(createList,
|
115
|
+
const formElement = FormElement(createList, attachDescription, onFormListCreated, onFormCancel, modal);
|
116
116
|
const overlayContent = document.querySelector('.o-overlay__content');
|
117
117
|
removeDescription();
|
118
118
|
overlayContent.insertAdjacentElement('beforeend', formElement);
|
@@ -166,7 +166,7 @@ function getResizeHandler (target) {
|
|
166
166
|
};
|
167
167
|
}
|
168
168
|
|
169
|
-
function FormElement (createList,
|
169
|
+
function FormElement (createList, attachDescription, onListCreated, onCancel, modal=false) {
|
170
170
|
const formString = `
|
171
171
|
<form class="myft-ui-create-list-variant-form">
|
172
172
|
<label class="myft-ui-create-list-variant-form-name o-forms-field">
|
@@ -176,24 +176,21 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
|
|
176
176
|
</span>
|
177
177
|
</label>
|
178
178
|
|
179
|
-
|
180
|
-
|
181
|
-
<
|
182
|
-
<
|
183
|
-
|
184
|
-
<span class="
|
185
|
-
|
186
|
-
Public
|
187
|
-
</span>
|
188
|
-
<span id="myft-ui-create-list-variant-form-public-description" class="o-forms-input__label__prompt">
|
189
|
-
Your profession & list will be visible to others
|
190
|
-
</span>
|
179
|
+
<div class="myft-ui-create-list-variant-form-public o-forms-field" role="group">
|
180
|
+
<span class="o-forms-input o-forms-input--toggle">
|
181
|
+
<label>
|
182
|
+
<input class="myft-ui-create-list-variant-form-toggle" type="checkbox" name="is-public" value="public" checked data-trackable="private-link" text="private">
|
183
|
+
<span class="myft-ui-create-list-variant-form-toggle-label o-forms-input__label">
|
184
|
+
<span class="o-forms-input__label__main">
|
185
|
+
Public
|
191
186
|
</span>
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
187
|
+
<span id="myft-ui-create-list-variant-form-public-description" class="o-forms-input__label__prompt">
|
188
|
+
Your profession & list will be visible to others
|
189
|
+
</span>
|
190
|
+
</span>
|
191
|
+
</label>
|
192
|
+
</span>
|
193
|
+
</div>
|
197
194
|
|
198
195
|
<div class="myft-ui-create-list-variant-form-buttons">
|
199
196
|
<button class="o-buttons o-buttons--primary o-buttons--inverse o-buttons--big" type="button" data-trackable="cancel-link" text="cancel">
|
@@ -233,7 +230,6 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
|
|
233
230
|
function handleCancelClick (event) {
|
234
231
|
event.preventDefault();
|
235
232
|
event.stopPropagation();
|
236
|
-
triggerCancelEvent();
|
237
233
|
formElement.remove();
|
238
234
|
if (!lists.length) attachDescription();
|
239
235
|
onCancel();
|
@@ -242,9 +238,7 @@ function FormElement (createList, showPublicToggle, attachDescription, onListCre
|
|
242
238
|
formElement.querySelector('button[type="submit"]').addEventListener('click', handleSubmit);
|
243
239
|
formElement.querySelector('button[type="button"]').addEventListener('click', handleCancelClick);
|
244
240
|
|
245
|
-
|
246
|
-
addPublicToggleListener(formElement);
|
247
|
-
}
|
241
|
+
addPublicToggleListener(formElement);
|
248
242
|
|
249
243
|
return formElement;
|
250
244
|
}
|
@@ -253,7 +247,6 @@ function addPublicToggleListener (formElement) {
|
|
253
247
|
function onPublicToggleClick (event) {
|
254
248
|
event.target.setAttribute('data-trackable', event.target.checked ? 'private-link' : 'public-link');
|
255
249
|
event.target.setAttribute('text', event.target.checked ? 'private' : 'public');
|
256
|
-
triggerPublicToggleEvent(event.target.checked);
|
257
250
|
}
|
258
251
|
|
259
252
|
formElement.querySelector('input[name="is-public"]').addEventListener('click', onPublicToggleClick);
|
@@ -488,20 +481,6 @@ function triggerCreateListEvent (contentId, listId) {
|
|
488
481
|
}));
|
489
482
|
}
|
490
483
|
|
491
|
-
// Temporary event on the public toggle feature.
|
492
|
-
// These will be used to build a sanity check dashboard, and will be removed after we get clean-up this test.
|
493
|
-
function triggerPublicToggleEvent (isPublic) {
|
494
|
-
document.body.dispatchEvent(new CustomEvent('oTracking.event', {
|
495
|
-
detail: {
|
496
|
-
category: 'publicToggle',
|
497
|
-
action: `${isPublic ? 'setPublic' : 'setPrivate'}`,
|
498
|
-
teamName: 'customer-products-us-growth',
|
499
|
-
amplitudeExploratory: true
|
500
|
-
},
|
501
|
-
bubbles: true
|
502
|
-
}));
|
503
|
-
}
|
504
|
-
|
505
484
|
// Temporary event on the public toggle feature.
|
506
485
|
// These will be used to build a sanity check dashboard, and will be removed after we get clean-up this test.
|
507
486
|
function triggerAddToNewListEvent () {
|
@@ -516,20 +495,6 @@ function triggerAddToNewListEvent () {
|
|
516
495
|
}));
|
517
496
|
}
|
518
497
|
|
519
|
-
// Temporary event on the public toggle feature.
|
520
|
-
// These will be used to build a sanity check dashboard, and will be removed after we get clean-up this test.
|
521
|
-
function triggerCancelEvent () {
|
522
|
-
document.body.dispatchEvent(new CustomEvent('oTracking.event', {
|
523
|
-
detail: {
|
524
|
-
category: 'publicToggle',
|
525
|
-
action: 'cancel ',
|
526
|
-
teamName: 'customer-products-us-growth',
|
527
|
-
amplitudeExploratory: true
|
528
|
-
},
|
529
|
-
bubbles: true
|
530
|
-
}));
|
531
|
-
}
|
532
|
-
|
533
498
|
//Temporary event to determine whether users need to scroll to add to a list
|
534
499
|
function checkScrollToAdd () {
|
535
500
|
//if the bottom of the overlay was not showing and scrolling has occurred since it was opened
|