@webhandle/tree-file-browser 1.0.0
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 +144 -0
- package/client-lib/base-image-name.mjs +41 -0
- package/client-lib/data-to-image.mjs +45 -0
- package/client-lib/dynamic-load.mjs +21 -0
- package/client-lib/file-select-dialog.mjs +70 -0
- package/client-lib/form-answer-dialog.mjs +65 -0
- package/client-lib/format-bytes.mjs +10 -0
- package/client-lib/get-extension-from-mime.mjs +17 -0
- package/client-lib/get-file-image-stats.mjs +17 -0
- package/client-lib/get-image-stats.mjs +11 -0
- package/client-lib/image-browser-view-methods/create-directory.mjs +23 -0
- package/client-lib/image-browser-view-methods/delete.mjs +100 -0
- package/client-lib/image-browser-view-methods/drag-and-drop.mjs +57 -0
- package/client-lib/image-browser-view-methods/file-obj-manipulation.mjs +190 -0
- package/client-lib/image-browser-view-methods/sink.mjs +20 -0
- package/client-lib/image-browser-view-methods/upload.mjs +159 -0
- package/client-lib/image-browser-view-methods/utils.mjs +108 -0
- package/client-lib/image-browser-view-methods/view-interactions.mjs +96 -0
- package/client-lib/image-browser-view.mjs +227 -0
- package/client-lib/image-resize.mjs +32 -0
- package/client-lib/info-dialog.mjs +36 -0
- package/client-lib/load-styles.mjs +14 -0
- package/client-lib/make-image-set.mjs +75 -0
- package/client-lib/name-parts.mjs +24 -0
- package/client-lib/styles-loaded.mjs +18 -0
- package/less/components.less +357 -0
- package/package.json +80 -0
- package/public/tree-file-browser/resources/css/tree-browser.css +394 -0
- package/public/tree-file-browser/resources/css/tree-browser.css.map +1 -0
- package/public/tree-file-browser/resources/js/tree-file-browser.js +2 -0
- package/public/tree-file-browser/resources/js/tree-file-browser.js.map +1 -0
- package/server-lib/initialize-tree-browser-resources.cjs +17 -0
- package/server-lib/initialize-tree-browser-resources.mjs +15 -0
- package/views/load-browser-views.js +13 -0
- package/views/webhandle-tree-image-browser/extension-pill.tri +1 -0
- package/views/webhandle-tree-image-browser/guilded-file-upload-form.tri +11 -0
- package/views/webhandle-tree-image-browser/guilded-image-upload-form.tri +33 -0
- package/views/webhandle-tree-image-browser/image-browser-frame.tri +122 -0
- package/views/webhandle-tree-image-browser/variant-choice-box.tri +25 -0
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
<div class="image-browser-frame">
|
|
2
|
+
<div class="directory-side">
|
|
3
|
+
<div class="treebox">
|
|
4
|
+
|
|
5
|
+
</div>
|
|
6
|
+
<div class="directory-controls">
|
|
7
|
+
<button type="button" class="btn create-directory" title="create new directory">
|
|
8
|
+
<span class="material-icons thumbnail-icon">
|
|
9
|
+
create_new_folder
|
|
10
|
+
</span>
|
|
11
|
+
</button>
|
|
12
|
+
<button type="button" class="btn delete-directory" title="delete selected directory">
|
|
13
|
+
<span class="material-icons thumbnail-icon">
|
|
14
|
+
folder_delete
|
|
15
|
+
</span>
|
|
16
|
+
</button>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="node-view">
|
|
20
|
+
<div class="view-controls">
|
|
21
|
+
<div class="left">
|
|
22
|
+
<input name="filter" type="text" placeholder="filter" />
|
|
23
|
+
<button class="clear-filter">×</button>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="right">
|
|
26
|
+
<span class="view-icons">
|
|
27
|
+
<button type="button" class="show-large-tiles" title="show big tiles" data-show-class="grid-large">
|
|
28
|
+
<span class="material-icons thumbnail-icon">
|
|
29
|
+
grid_view
|
|
30
|
+
</span>
|
|
31
|
+
</button>
|
|
32
|
+
<button type="button" class="show-small-tiles" title="show small tiles"
|
|
33
|
+
data-show-class="grid-small">
|
|
34
|
+
<span class="material-icons thumbnail-icon">
|
|
35
|
+
grid_on
|
|
36
|
+
</span>
|
|
37
|
+
</button>
|
|
38
|
+
<button type="button" class="show-list-rows" title="show as rows" data-show-class="rows">
|
|
39
|
+
<span class="material-icons thumbnail-icon">
|
|
40
|
+
list
|
|
41
|
+
</span>
|
|
42
|
+
</button>
|
|
43
|
+
<button type="button" class="show-list-text" title="show as list" data-show-class="list-text">
|
|
44
|
+
<span class="material-icons thumbnail-icon">
|
|
45
|
+
table_rows
|
|
46
|
+
</span>
|
|
47
|
+
</button>
|
|
48
|
+
</span>
|
|
49
|
+
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="node-content">
|
|
53
|
+
<div class="box-holder">
|
|
54
|
+
<div class="choice-boxes">
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="bottom-controls">
|
|
59
|
+
<div class="file-controls">
|
|
60
|
+
<button type="button" class="btn delete-file" title="delete selected file(s)">
|
|
61
|
+
<span class="material-icons thumbnail-icon">
|
|
62
|
+
delete
|
|
63
|
+
</span>
|
|
64
|
+
</button>
|
|
65
|
+
<button type="button" class="btn upload-file" title="upload file(s)">
|
|
66
|
+
<span class="material-icons thumbnail-icon">
|
|
67
|
+
upload
|
|
68
|
+
</span>
|
|
69
|
+
</button>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="drop-cover file-drop-cover">
|
|
75
|
+
<div class="drop-type literal">
|
|
76
|
+
<div class="msg">
|
|
77
|
+
<h2>
|
|
78
|
+
Just Do It
|
|
79
|
+
</h2>
|
|
80
|
+
<p>
|
|
81
|
+
We won't mess the files at all, just upload them.
|
|
82
|
+
</p>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="drop-cover img-drop-cover">
|
|
87
|
+
<div class="drop-type guided-upload">
|
|
88
|
+
<div class="msg">
|
|
89
|
+
<h2>Guided Upload</h2>
|
|
90
|
+
<p>
|
|
91
|
+
Let us help you rename, and resize (if needed), the files by asking you questions
|
|
92
|
+
</p>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="drop-type automatic">
|
|
96
|
+
<div class="msg">
|
|
97
|
+
<h2>
|
|
98
|
+
Web Safe
|
|
99
|
+
</h2>
|
|
100
|
+
<p>
|
|
101
|
+
We'll rename the files so they fit better with the web and create multiple formats images.
|
|
102
|
+
</p>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="drop-type literal">
|
|
106
|
+
<div class="msg">
|
|
107
|
+
<h2>
|
|
108
|
+
Just Do It
|
|
109
|
+
</h2>
|
|
110
|
+
<p>
|
|
111
|
+
We won't mess the files at all, just upload them.
|
|
112
|
+
</p>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
</div>
|
|
117
|
+
<div class="hidden-elements">
|
|
118
|
+
<input name="fileUpload" type="file" placeholder="Upload a file" />
|
|
119
|
+
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
</div>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<div class="variant-choice-box">
|
|
2
|
+
<div class="img">
|
|
3
|
+
__!this.thumbnail??'<span class="material-icons thumbnail-icon">' + thumbnailIcon + '</span>'__
|
|
4
|
+
__this.thumbnail??'<img class="thumbnail-image" src="' + thumbnail + '" />'__
|
|
5
|
+
</div>
|
|
6
|
+
<div class="size-line">
|
|
7
|
+
__size__
|
|
8
|
+
</div>
|
|
9
|
+
<div class="bottom">
|
|
10
|
+
<div class="content">
|
|
11
|
+
<div class="basename">
|
|
12
|
+
__baseName__
|
|
13
|
+
</div>
|
|
14
|
+
<div class="extensions">
|
|
15
|
+
__extensions::./extension-pill__
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="actions">
|
|
19
|
+
<button class="details">
|
|
20
|
+
<span class="material-icons">more_vert</span>
|
|
21
|
+
</button>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
</div>
|