@oat-sa/tao-core-ui 3.24.0 → 3.24.1
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/dist/resourcemgr/assetSearch.js +3 -3
- package/dist/resourcemgr/assetSearchContract.js +1 -1
- package/dist/resourcemgr/css/resourcemgr.css +96 -3
- package/dist/resourcemgr/css/resourcemgr.css.map +1 -1
- package/dist/resourcemgr/fileBrowser.js +370 -15
- package/dist/resourcemgr/filePreview.js +42 -3
- package/dist/resourcemgr/fileSelector.js +15 -0
- package/dist/resourcemgr.js +15 -10
- package/package.json +1 -1
- package/src/resourcemgr/assetSearch.js +3 -3
- package/src/resourcemgr/assetSearchContract.js +1 -1
- package/src/resourcemgr/css/resourcemgr.css +96 -3
- package/src/resourcemgr/css/resourcemgr.css.map +1 -1
- package/src/resourcemgr/fileBrowser.js +434 -33
- package/src/resourcemgr/filePreview.js +43 -4
- package/src/resourcemgr/fileSelector.js +18 -0
- package/src/resourcemgr/scss/resourcemgr.scss +103 -5
- package/src/resourcemgr/tpl/layout.tpl +30 -18
- package/src/resourcemgr.js +9 -4
|
@@ -137,6 +137,8 @@ export default function (options) {
|
|
|
137
137
|
let $container = options.$target;
|
|
138
138
|
let $fileSelector = $('.file-selector', $container);
|
|
139
139
|
let $filesWrapper = $('.files-wrapper', $fileSelector);
|
|
140
|
+
let $filesListLoading = $('.files-list-loading', $filesWrapper);
|
|
141
|
+
let $filesListLoadingStatus = $('.files-list-loading-status', $filesListLoading);
|
|
140
142
|
let $fileContainer = $('.files-list', $fileSelector);
|
|
141
143
|
let $placeholder = $('.empty', $fileSelector);
|
|
142
144
|
let $uploader = $('.file-upload-container', $fileSelector);
|
|
@@ -165,6 +167,20 @@ export default function (options) {
|
|
|
165
167
|
$fileSelector.toggleClass('search-mode', searchMode);
|
|
166
168
|
});
|
|
167
169
|
|
|
170
|
+
function applyFilesListLoading(loading) {
|
|
171
|
+
$filesWrapper.toggleClass('is-files-loading', !!loading);
|
|
172
|
+
$filesWrapper.attr('aria-busy', loading ? 'true' : 'false');
|
|
173
|
+
$filesListLoading.toggleClass('hidden', !loading).attr('aria-hidden', loading ? 'false' : 'true');
|
|
174
|
+
$filesListLoadingStatus.attr('aria-busy', loading ? 'true' : 'false');
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
$container.on(`filesloading.${ns}`, function (e, loading) {
|
|
178
|
+
if (searchMode) {
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
applyFilesListLoading(loading);
|
|
182
|
+
});
|
|
183
|
+
|
|
168
184
|
//update current folder
|
|
169
185
|
$container.on(`folderselect.${ns}`, function (e, fullPath, data, activePath, content) {
|
|
170
186
|
let files;
|
|
@@ -173,6 +189,8 @@ export default function (options) {
|
|
|
173
189
|
return;
|
|
174
190
|
}
|
|
175
191
|
|
|
192
|
+
applyFilesListLoading(false);
|
|
193
|
+
|
|
176
194
|
//update title
|
|
177
195
|
if ($container[0].querySelector('.upload')) {
|
|
178
196
|
if (content && content.permissions && content.permissions.upload) {
|
|
@@ -873,9 +873,14 @@
|
|
|
873
873
|
}
|
|
874
874
|
}
|
|
875
875
|
|
|
876
|
-
&.is-searching .asset-search-submit-spinner:not(.hidden)
|
|
876
|
+
&.is-searching .asset-search-submit-spinner:not(.hidden) {
|
|
877
877
|
display: inline-block;
|
|
878
|
-
|
|
878
|
+
|
|
879
|
+
&.icon-loop::before {
|
|
880
|
+
display: inline-block;
|
|
881
|
+
transform-origin: 50% 50%;
|
|
882
|
+
animation: rm-search-button-spin 1.4s linear infinite;
|
|
883
|
+
}
|
|
879
884
|
}
|
|
880
885
|
|
|
881
886
|
&:disabled,
|
|
@@ -929,10 +934,57 @@
|
|
|
929
934
|
}
|
|
930
935
|
|
|
931
936
|
& .file-browser-wrapper {
|
|
932
|
-
|
|
937
|
+
position: relative;
|
|
938
|
+
display: flex;
|
|
939
|
+
flex-direction: column;
|
|
933
940
|
flex: 1 1 auto;
|
|
934
941
|
min-height: 0;
|
|
935
|
-
|
|
942
|
+
overflow: hidden;
|
|
943
|
+
|
|
944
|
+
&.is-tree-loading {
|
|
945
|
+
pointer-events: none;
|
|
946
|
+
|
|
947
|
+
.file-browser-scroll {
|
|
948
|
+
overflow: hidden;
|
|
949
|
+
}
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
.file-browser-scroll {
|
|
953
|
+
flex: 1 1 auto;
|
|
954
|
+
min-height: 0;
|
|
955
|
+
overflow: auto;
|
|
956
|
+
padding: 8px 4px 12px;
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
.file-browser-tree-loading {
|
|
960
|
+
position: absolute;
|
|
961
|
+
inset: 0;
|
|
962
|
+
z-index: 3;
|
|
963
|
+
display: flex;
|
|
964
|
+
align-items: center;
|
|
965
|
+
justify-content: center;
|
|
966
|
+
background-color: rgba($rmClickableBg, 0.75);
|
|
967
|
+
|
|
968
|
+
&.hidden {
|
|
969
|
+
display: none;
|
|
970
|
+
}
|
|
971
|
+
|
|
972
|
+
.icon-loop {
|
|
973
|
+
color: $rmActive;
|
|
974
|
+
|
|
975
|
+
@include font-size(22);
|
|
976
|
+
|
|
977
|
+
&::before {
|
|
978
|
+
display: inline-block;
|
|
979
|
+
transform-origin: 50% 50%;
|
|
980
|
+
animation: rm-search-button-spin 1.4s linear infinite;
|
|
981
|
+
}
|
|
982
|
+
}
|
|
983
|
+
|
|
984
|
+
.file-browser-tree-loading-status {
|
|
985
|
+
@include visuallyHidden;
|
|
986
|
+
}
|
|
987
|
+
}
|
|
936
988
|
}
|
|
937
989
|
|
|
938
990
|
ul {
|
|
@@ -1143,9 +1195,55 @@
|
|
|
1143
1195
|
|
|
1144
1196
|
.files-wrapper {
|
|
1145
1197
|
position: relative;
|
|
1198
|
+
display: flex;
|
|
1199
|
+
flex-direction: column;
|
|
1146
1200
|
flex-grow: 1;
|
|
1147
|
-
overflow-y: auto;
|
|
1148
1201
|
min-height: 0;
|
|
1202
|
+
overflow: hidden;
|
|
1203
|
+
|
|
1204
|
+
&.is-files-loading {
|
|
1205
|
+
pointer-events: none;
|
|
1206
|
+
|
|
1207
|
+
.files-scroll {
|
|
1208
|
+
overflow-y: hidden;
|
|
1209
|
+
}
|
|
1210
|
+
}
|
|
1211
|
+
|
|
1212
|
+
.files-scroll {
|
|
1213
|
+
flex: 1 1 auto;
|
|
1214
|
+
min-height: 0;
|
|
1215
|
+
overflow-y: auto;
|
|
1216
|
+
}
|
|
1217
|
+
|
|
1218
|
+
.files-list-loading {
|
|
1219
|
+
position: absolute;
|
|
1220
|
+
inset: 0;
|
|
1221
|
+
z-index: 2;
|
|
1222
|
+
display: flex;
|
|
1223
|
+
align-items: center;
|
|
1224
|
+
justify-content: center;
|
|
1225
|
+
background-color: rgba($rmSurface, 0.82);
|
|
1226
|
+
|
|
1227
|
+
&.hidden {
|
|
1228
|
+
display: none;
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1231
|
+
.icon-loop {
|
|
1232
|
+
color: $rmActive;
|
|
1233
|
+
|
|
1234
|
+
@include font-size(22);
|
|
1235
|
+
|
|
1236
|
+
&::before {
|
|
1237
|
+
display: inline-block;
|
|
1238
|
+
transform-origin: 50% 50%;
|
|
1239
|
+
animation: rm-search-button-spin 1.4s linear infinite;
|
|
1240
|
+
}
|
|
1241
|
+
}
|
|
1242
|
+
|
|
1243
|
+
.files-list-loading-status {
|
|
1244
|
+
@include visuallyHidden;
|
|
1245
|
+
}
|
|
1246
|
+
}
|
|
1149
1247
|
}
|
|
1150
1248
|
|
|
1151
1249
|
table.files {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
<div class="asset-search-actions">
|
|
42
42
|
<button type="button" class="asset-search-clear hidden" hidden>{{__ 'Clear all'}}</button>
|
|
43
43
|
<button type="button" class="btn-info small asset-search-submit" disabled>
|
|
44
|
-
<span class="asset-search-submit-spinner icon-loop" aria-hidden="true"
|
|
44
|
+
<span class="asset-search-submit-spinner icon-loop hidden" aria-hidden="true"></span>
|
|
45
45
|
<span class="asset-search-submit-label">{{__ 'Search'}}</span>
|
|
46
46
|
</button>
|
|
47
47
|
</div>
|
|
@@ -49,7 +49,13 @@
|
|
|
49
49
|
</div>
|
|
50
50
|
|
|
51
51
|
<h1 class="resources-title">{{__ 'Resources'}}</h1>
|
|
52
|
-
<div class="file-browser-wrapper"
|
|
52
|
+
<div class="file-browser-wrapper" aria-busy="false">
|
|
53
|
+
<div class="file-browser-tree-loading hidden" aria-hidden="true">
|
|
54
|
+
<span class="icon-loop" aria-hidden="true"></span>
|
|
55
|
+
<span class="file-browser-tree-loading-status" aria-live="polite" aria-atomic="true" aria-busy="false">{{__ 'Loading'}}</span>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="file-browser-scroll"></div>
|
|
58
|
+
</div>
|
|
53
59
|
</section>
|
|
54
60
|
|
|
55
61
|
<!-- center: asset listing -->
|
|
@@ -73,22 +79,28 @@
|
|
|
73
79
|
</div>
|
|
74
80
|
|
|
75
81
|
<div class="files-wrapper" aria-busy="false">
|
|
76
|
-
<
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
82
|
+
<div class="files-list-loading hidden" aria-hidden="true">
|
|
83
|
+
<span class="icon-loop" aria-hidden="true"></span>
|
|
84
|
+
<span class="files-list-loading-status" aria-live="polite" aria-atomic="true" aria-busy="false">{{__ 'Loading'}}</span>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="files-scroll">
|
|
87
|
+
<table class="files">
|
|
88
|
+
<thead>
|
|
89
|
+
<tr>
|
|
90
|
+
<th class="files-label sortable sorted sorted_asc" data-sort-by="label" aria-sort="ascending" tabindex="0">
|
|
91
|
+
<span class="sort-label">{{__ 'Label'}}</span>
|
|
92
|
+
</th>
|
|
93
|
+
<th class="files-location sortable" data-sort-by="location" aria-sort="none" tabindex="0">
|
|
94
|
+
<span class="sort-label">{{__ 'Location'}}</span>
|
|
95
|
+
</th>
|
|
96
|
+
<th class="files-updated sortable" data-sort-by="updatedAt" aria-sort="none" tabindex="0">
|
|
97
|
+
<span class="sort-label">{{__ 'Last modified on'}}</span>
|
|
98
|
+
</th>
|
|
99
|
+
</tr>
|
|
100
|
+
</thead>
|
|
101
|
+
<tbody class="files-list"></tbody>
|
|
102
|
+
</table>
|
|
103
|
+
</div>
|
|
92
104
|
</div>
|
|
93
105
|
|
|
94
106
|
<div class="file-upload-container"></div>
|
package/src/resourcemgr.js
CHANGED
|
@@ -25,7 +25,8 @@ var defaults = {
|
|
|
25
25
|
rootClassUri: 'http://www.tao.lu/Ontologies/TAOMedia.rdf#Media',
|
|
26
26
|
classMappingUrl: urlUtil.route('getWithMapping', 'ClassMetadata', 'tao'),
|
|
27
27
|
statusUrl: urlUtil.route('status', 'AdvancedSearch', 'tao'),
|
|
28
|
-
maxListSize: 5
|
|
28
|
+
maxListSize: 5,
|
|
29
|
+
ajaxTimeoutMs: 30000
|
|
29
30
|
};
|
|
30
31
|
|
|
31
32
|
/**
|
|
@@ -230,7 +231,7 @@ var resourceMgr = {
|
|
|
230
231
|
url: endpoint,
|
|
231
232
|
method: 'GET',
|
|
232
233
|
dataType: 'json',
|
|
233
|
-
timeout: Number(options.ajaxTimeoutMs) > 0 ? Number(options.ajaxTimeoutMs) :
|
|
234
|
+
timeout: Number(options.ajaxTimeoutMs) > 0 ? Number(options.ajaxTimeoutMs) : defaults.ajaxTimeoutMs,
|
|
234
235
|
data: params
|
|
235
236
|
})
|
|
236
237
|
.done(function(response) {
|
|
@@ -335,7 +336,9 @@ var resourceMgr = {
|
|
|
335
336
|
for (let i = 0; i < sources.length; i++) {
|
|
336
337
|
options.root = sources[i].root;
|
|
337
338
|
options.path = sources[i].path;
|
|
338
|
-
$fileBrowser.
|
|
339
|
+
$fileBrowser.children('.file-browser-scroll').append(
|
|
340
|
+
'<div class="' + options.root + '"><ul class="folders"></ul></div>'
|
|
341
|
+
);
|
|
339
342
|
fileBrowser(options);
|
|
340
343
|
}
|
|
341
344
|
};
|
|
@@ -359,7 +362,9 @@ var resourceMgr = {
|
|
|
359
362
|
}
|
|
360
363
|
|
|
361
364
|
if (options.path && options.root) {
|
|
362
|
-
$fileBrowser.
|
|
365
|
+
$fileBrowser.children('.file-browser-scroll').append(
|
|
366
|
+
'<div class="' + options.root + '"><ul class="folders"></ul></div>'
|
|
367
|
+
);
|
|
363
368
|
fileBrowser(options);
|
|
364
369
|
}
|
|
365
370
|
|