forked from adobe/helix-importer-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
import.html
119 lines (106 loc) · 6.14 KB
/
import.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Import - Workbench Tool</title>
<link rel="stylesheet" href="./css/styles.css" />
<link rel="stylesheet" href="./css/import/import.css" />
<script src="./js/dist/spectrum-web-components.js"></script>
<script src="./js/libs/vendors/codemirror/codemirror.js"></script>
<script src="./js/libs/vendors/codemirror/xml.js"></script>
<script src="./js/libs/vendors/codemirror/javascript.js"></script>
<script src="./js/libs/vendors/codemirror/css.js"></script>
<script src="./js/libs/vendors/codemirror/htmlmixed.js"></script>
<script src="./js/libs/vendors/codemirror/markdown.js"></script>
<script src="./js/libs/vendors/js-beautify/beautify-html.min.js"></script>
<script src="./js/libs/vendors/showdown/showdown.min.js"></script>
<script src="./js/libs/vendors/babel-polyfill/polyfill.js"></script>
<script src="./js/libs/vendors/exceljs/exceljs.min.js"></script>
<script src="./js/dist/helix-importer.js"></script>
<script src="./js/import/import.ui.js" type="module"></script>
</head>
<body class="tool">
<sp-theme color="dark" scale="medium">
<main>
<!-- IMPORT SECTION -->
<section class="import">
<div class="section-title">
<h2>Import - Workbench</h2>
<p>Prepare your import.js with the Import - Workbench.</p>
<sp-divider size="l"></sp-divider>
</div>
<div class="section-cols">
<div class="section-col">
<form class="import-form">
<sp-field-label for="import-url" required>URL</sp-field-label>
<sp-textfield class="option-field" id="import-url" type="url">
<sp-help-text slot="help-text">https://www.example.com</sp-help-text>
<sp-help-text slot="negative-help-text">Please enter a valid URL.</sp-help-text>
</sp-textfield>
<sp-accordion>
<sp-accordion-item label="Import Options">
<div>
<sp-field-label for="import-file-url" required>Transformation file URL</sp-field-label>
<sp-textfield class="option-field" id="import-file-url" type="url" value="http://localhost:3001/tools/importer/import.js"></sp-textfield>
<sp-field-label for="import-pageload-timeout">Page load timeout</sp-field-label>
<sp-number-field class="option-field" id="import-pageload-timeout" value="100" min="0" step="100" format-options='{ "style": "unit", "unit": "millisecond", "unitDisplay": "short" }'></sp-number-field>
<sp-checkbox class="option-field" id="import-local-save" checked>
Save locally as .docx
</sp-checkbox>
<sp-checkbox class="option-field" id="import-enable-js" checked>
Enable JavaScript
</sp-checkbox>
<sp-checkbox class="option-field" id="import-scroll-to-bottom" checked>
Scroll to bottom
</sp-checkbox>
</div>
</sp-accordion-item>
</sp-accordion>
<sp-button-group>
<sp-button id="import-doimport-button">Import</sp-button>
</sp-button-group>
</form>
<span id="folder-name"></span>
<div class="page-preview hidden">
<sp-divider size="s"></sp-divider>
<h3>Page preview</h3>
<iframe id="import-content-frame" frameborder="0"></iframe>
</div>
</div>
<div class="section-col">
<sp-tabs selected="import-preview">
<sp-tab label="Preview" value="import-preview"></sp-tab>
<sp-tab label="Markdown" value="import-markdown"></sp-tab>
<sp-tab label="HTML" value="import-html"></sp-tab>
<div id="import-file-picker-container"></div>
<sp-tab-panel value="import-preview">
<sp-theme color="light" scale="medium">
<div id="import-markdown-preview"></div>
</sp-theme>
</sp-tab-panel>
<sp-tab-panel value="import-markdown">
<div data-panel="source">
<div class="code">
<textarea id="import-markdown-source" rows="4" cols="10"></textarea>
</div>
</div>
</sp-tab-panel>
<sp-tab-panel value="import-html">
<div data-panel="source">
<div class="code">
<textarea id="import-transformed-html" rows="4" cols="10"></textarea>
</div>
</div>
</sp-tab-panel>
</sp-tabs>
<sp-button-group>
<sp-button id="import-downloadImportReport" class="hidden">Download import report</sp-button>
</sp-button-group>
</div>
</div>
</section>
</main>
<div id="alert-container"></div>
</sp-theme>
</body>
</html>