@abcnews/components-builder 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ A two column frame you can use to scaffold your builder.
|
|
|
16
16
|
|
|
17
17
|
```svelte
|
|
18
18
|
<script lang="ts">
|
|
19
|
-
import { BuilderFrame } from '@abcnews/components-builder';
|
|
19
|
+
import { BuilderStyleRoot, BuilderFrame } from '@abcnews/components-builder';
|
|
20
20
|
</script>
|
|
21
21
|
|
|
22
22
|
{#snippet Viz()}
|
|
@@ -70,7 +70,7 @@ Note that the screenshot tool is not fast. We haven't been able to speed up the
|
|
|
70
70
|
/>
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
-
The `defaultMarkerName` Function provides a user-friendly version of the marker for the preview step. This is the same
|
|
73
|
+
The `defaultMarkerName` Function provides a user-friendly version of the marker for the preview step. This is the same function as the `MarkerAdmin` component.
|
|
74
74
|
|
|
75
75
|
Prefixes correlate to the different marker types that have been implemented in the app. This is the same object as the `MarkerAdmin` component.
|
|
76
76
|
|
|
@@ -149,7 +149,7 @@ This uses the native dialogue element, so focus will always be inside the modal.
|
|
|
149
149
|
|
|
150
150
|
## Google Doc Scrollyteller
|
|
151
151
|
|
|
152
|
-
This component lets edits draft stories in Google Docs and preview to
|
|
152
|
+
This component lets edits draft stories in Google Docs and preview to scrollyteller in real time. This is useful because multiple people can be editing at once and have a real-time preview, whereas the CMS is single user and can be slow to iterate on.
|
|
153
153
|
|
|
154
154
|
This component must be set up on its own page, as it has two different routes built into it. An example implementation follows:
|
|
155
155
|
|
|
@@ -194,7 +194,7 @@ As a prerequisite your builder must store its state in window.location.hash. E.g
|
|
|
194
194
|
|
|
195
195
|
`defaultMarkerName` is a function that returns a user friendly name for the marker when the user clicks the save button. You can use this to customise default marker names based on the current hash, which can be useful if you have several different visualisations with distinct names.
|
|
196
196
|
|
|
197
|
-
Prefixes correlate to the different marker types that have been implemented in the app. Users can choose which type of marker they want to copy. This is the same object as the `
|
|
197
|
+
Prefixes correlate to the different marker types that have been implemented in the app. Users can choose which type of marker they want to copy. This is the same object as the `ScreenshotTool` component.
|
|
198
198
|
|
|
199
199
|
## Developing
|
|
200
200
|
|
|
@@ -210,12 +210,6 @@ Everything inside `src/lib` is part of the library, everything inside `src/route
|
|
|
210
210
|
|
|
211
211
|
To build the library:
|
|
212
212
|
|
|
213
|
-
```bash
|
|
214
|
-
npm run package
|
|
215
|
-
```
|
|
216
|
-
|
|
217
|
-
To create a production version of the showcase app:
|
|
218
|
-
|
|
219
213
|
```bash
|
|
220
214
|
npm run build
|
|
221
215
|
```
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { untrack } from "svelte";
|
|
3
3
|
import JSZip from "jszip";
|
|
4
|
-
import { saveAs } from "file-saver";
|
|
5
4
|
import eachLimit from "async/eachLimit";
|
|
6
5
|
import Modal from "../Modal/Modal.svelte";
|
|
6
|
+
import saveAs from "./saveAs";
|
|
7
7
|
|
|
8
8
|
const GENERATOR_URL = "https://fallback-automations-yknow.kyd.au/api";
|
|
9
9
|
const GENERATOR_MAX_PARALLEL = 3;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function saveAs(blob: any, name: any): void;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* FileSaver.js
|
|
3
|
+
* A saveAs() FileSaver implementation.
|
|
4
|
+
*
|
|
5
|
+
* By Eli Grey, http://eligrey.com
|
|
6
|
+
*
|
|
7
|
+
* License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
|
|
8
|
+
* source : http://purl.eligrey.com/github/FileSaver.js
|
|
9
|
+
*/
|
|
10
|
+
export function saveAs(blob, name) {
|
|
11
|
+
var a = document.createElement("a");
|
|
12
|
+
name = name || blob.name || "download";
|
|
13
|
+
|
|
14
|
+
a.download = name;
|
|
15
|
+
a.rel = "noopener";
|
|
16
|
+
|
|
17
|
+
// Support blobs
|
|
18
|
+
a.href = URL.createObjectURL(blob);
|
|
19
|
+
setTimeout(function () {
|
|
20
|
+
URL.revokeObjectURL(a.href);
|
|
21
|
+
}, 4e4); // 40s
|
|
22
|
+
setTimeout(function () {
|
|
23
|
+
a.click();
|
|
24
|
+
}, 0);
|
|
25
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abcnews/components-builder",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "vite build && npm run prepack",
|
|
@@ -64,7 +64,6 @@
|
|
|
64
64
|
"@abcnews/svelte-scrollyteller": "github:abcnews/svelte-scrollyteller#feature/future-news",
|
|
65
65
|
"async": "^3.2.6",
|
|
66
66
|
"bootstrap-icons": "^1.11.3",
|
|
67
|
-
"file-saver": "^2.0.5",
|
|
68
67
|
"jszip": "^3.10.1",
|
|
69
68
|
"svelte-bootstrap-icons": "^3.1.2"
|
|
70
69
|
}
|