@financial-times/n-myft-ui 30.0.2 → 30.1.1
Sign up to get free protection for your applications and to get access to all the features.
@@ -101,7 +101,6 @@
|
|
101
101
|
"@financial-times/o-overlay": "^4.0.0",
|
102
102
|
"@financial-times/o-spacing": "^3.0.0",
|
103
103
|
"@financial-times/o-tooltip": "^5.2.4",
|
104
|
-
"@financial-times/o-topper": "^5.2.3",
|
105
104
|
"n-ui-foundations": "^9.0.0"
|
106
105
|
}
|
107
106
|
},
|
@@ -2851,12 +2850,6 @@
|
|
2851
2850
|
"node": "12.x"
|
2852
2851
|
}
|
2853
2852
|
},
|
2854
|
-
"node_modules/@financial-times/n-map-content-to-topper": {
|
2855
|
-
"version": "1.6.0",
|
2856
|
-
"resolved": "https://registry.npmjs.org/@financial-times/n-map-content-to-topper/-/n-map-content-to-topper-1.6.0.tgz",
|
2857
|
-
"integrity": "sha512-7AezWXpfEEZkz21Taw47h9SoM6Ycg7vrKZ3SOVpo1f0vqRbK7VpnvLOTjhTGOkMdPi5z/5kvjN5ag5P4yvpRMg==",
|
2858
|
-
"peer": true
|
2859
|
-
},
|
2860
2853
|
"node_modules/@financial-times/n-notification": {
|
2861
2854
|
"version": "8.2.2",
|
2862
2855
|
"resolved": "https://registry.npmjs.org/@financial-times/n-notification/-/n-notification-8.2.2.tgz",
|
@@ -3117,24 +3110,6 @@
|
|
3117
3110
|
"@financial-times/o-visual-effects": "^4.0.1"
|
3118
3111
|
}
|
3119
3112
|
},
|
3120
|
-
"node_modules/@financial-times/o-topper": {
|
3121
|
-
"version": "5.2.3",
|
3122
|
-
"resolved": "https://registry.npmjs.org/@financial-times/o-topper/-/o-topper-5.2.3.tgz",
|
3123
|
-
"integrity": "sha512-4CoeEp5nG7ecmZuJMr7DlEs0w5mPS3jikHxOlVZqMP18qWlwXC6BgbPz1ZslxBt/+SnJmHlNN2VIQevPQLNtEQ==",
|
3124
|
-
"peer": true,
|
3125
|
-
"engines": {
|
3126
|
-
"npm": "^7 || ^8"
|
3127
|
-
},
|
3128
|
-
"peerDependencies": {
|
3129
|
-
"@financial-times/n-map-content-to-topper": "^1.5.0",
|
3130
|
-
"@financial-times/o-colors": "^6.0.1",
|
3131
|
-
"@financial-times/o-editorial-typography": "^2.0.1",
|
3132
|
-
"@financial-times/o-grid": "^6.0.0",
|
3133
|
-
"@financial-times/o-icons": "^7.0.1",
|
3134
|
-
"@financial-times/o-spacing": "^3.0.0",
|
3135
|
-
"@financial-times/o-typography": "^7.0.1"
|
3136
|
-
}
|
3137
|
-
},
|
3138
3113
|
"node_modules/@financial-times/o-typography": {
|
3139
3114
|
"version": "7.3.2",
|
3140
3115
|
"resolved": "https://registry.npmjs.org/@financial-times/o-typography/-/o-typography-7.3.2.tgz",
|
@@ -26123,12 +26098,6 @@
|
|
26123
26098
|
"winston": "^2.4.0"
|
26124
26099
|
}
|
26125
26100
|
},
|
26126
|
-
"@financial-times/n-map-content-to-topper": {
|
26127
|
-
"version": "1.6.0",
|
26128
|
-
"resolved": "https://registry.npmjs.org/@financial-times/n-map-content-to-topper/-/n-map-content-to-topper-1.6.0.tgz",
|
26129
|
-
"integrity": "sha512-7AezWXpfEEZkz21Taw47h9SoM6Ycg7vrKZ3SOVpo1f0vqRbK7VpnvLOTjhTGOkMdPi5z/5kvjN5ag5P4yvpRMg==",
|
26130
|
-
"peer": true
|
26131
|
-
},
|
26132
26101
|
"@financial-times/n-notification": {
|
26133
26102
|
"version": "8.2.2",
|
26134
26103
|
"resolved": "https://registry.npmjs.org/@financial-times/n-notification/-/n-notification-8.2.2.tgz",
|
@@ -26268,13 +26237,6 @@
|
|
26268
26237
|
"ftdomdelegate": "^4.0.6"
|
26269
26238
|
}
|
26270
26239
|
},
|
26271
|
-
"@financial-times/o-topper": {
|
26272
|
-
"version": "5.2.3",
|
26273
|
-
"resolved": "https://registry.npmjs.org/@financial-times/o-topper/-/o-topper-5.2.3.tgz",
|
26274
|
-
"integrity": "sha512-4CoeEp5nG7ecmZuJMr7DlEs0w5mPS3jikHxOlVZqMP18qWlwXC6BgbPz1ZslxBt/+SnJmHlNN2VIQevPQLNtEQ==",
|
26275
|
-
"peer": true,
|
26276
|
-
"requires": {}
|
26277
|
-
},
|
26278
26240
|
"@financial-times/o-typography": {
|
26279
26241
|
"version": "7.3.2",
|
26280
26242
|
"resolved": "https://registry.npmjs.org/@financial-times/o-typography/-/o-typography-7.3.2.tgz",
|
@@ -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
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@financial-times/n-myft-ui",
|
3
|
-
"version": "30.
|
3
|
+
"version": "30.1.1",
|
4
4
|
"description": "Client side component for interaction with myft",
|
5
5
|
"main": "server.js",
|
6
6
|
"scripts": {
|
@@ -96,7 +96,6 @@
|
|
96
96
|
"@financial-times/o-overlay": "^4.0.0",
|
97
97
|
"@financial-times/o-spacing": "^3.0.0",
|
98
98
|
"@financial-times/o-tooltip": "^5.2.4",
|
99
|
-
"@financial-times/o-topper": "^5.2.3",
|
100
99
|
"n-ui-foundations": "^9.0.0"
|
101
100
|
},
|
102
101
|
"dependencies": {
|