@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.
Files changed (19) hide show
  1. package/dist/resourcemgr/assetSearch.js +3 -3
  2. package/dist/resourcemgr/assetSearchContract.js +1 -1
  3. package/dist/resourcemgr/css/resourcemgr.css +96 -3
  4. package/dist/resourcemgr/css/resourcemgr.css.map +1 -1
  5. package/dist/resourcemgr/fileBrowser.js +370 -15
  6. package/dist/resourcemgr/filePreview.js +42 -3
  7. package/dist/resourcemgr/fileSelector.js +15 -0
  8. package/dist/resourcemgr.js +15 -10
  9. package/package.json +1 -1
  10. package/src/resourcemgr/assetSearch.js +3 -3
  11. package/src/resourcemgr/assetSearchContract.js +1 -1
  12. package/src/resourcemgr/css/resourcemgr.css +96 -3
  13. package/src/resourcemgr/css/resourcemgr.css.map +1 -1
  14. package/src/resourcemgr/fileBrowser.js +434 -33
  15. package/src/resourcemgr/filePreview.js +43 -4
  16. package/src/resourcemgr/fileSelector.js +18 -0
  17. package/src/resourcemgr/scss/resourcemgr.scss +103 -5
  18. package/src/resourcemgr/tpl/layout.tpl +30 -18
  19. package/src/resourcemgr.js +9 -4
package/dist/resourcemgr.js CHANGED
@@ -65,11 +65,13 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/assetSearch', 'u
65
65
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Search by name or label", options) : helperMissing.call(depth0, "__", "Search by name or label", options)))
66
66
  + "\"\n autocomplete=\"off\"\n />\n </div>\n <div class=\"asset-search-filters\"></div>\n <div class=\"asset-search-actions\">\n <button type=\"button\" class=\"asset-search-clear hidden\" hidden>"
67
67
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Clear all", options) : helperMissing.call(depth0, "__", "Clear all", options)))
68
- + "</button>\n <button type=\"button\" class=\"btn-info small asset-search-submit\" disabled>\n <span class=\"asset-search-submit-spinner icon-loop\" aria-hidden=\"true\" hidden></span>\n <span class=\"asset-search-submit-label\">"
68
+ + "</button>\n <button type=\"button\" class=\"btn-info small asset-search-submit\" disabled>\n <span class=\"asset-search-submit-spinner icon-loop hidden\" aria-hidden=\"true\"></span>\n <span class=\"asset-search-submit-label\">"
69
69
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Search", options) : helperMissing.call(depth0, "__", "Search", options)))
70
70
  + "</span>\n </button>\n </div>\n </div>\n </div>\n\n <h1 class=\"resources-title\">"
71
71
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Resources", options) : helperMissing.call(depth0, "__", "Resources", options)))
72
- + "</h1>\n <div class=\"file-browser-wrapper\"></div>\n </section>\n\n <!-- center: asset listing -->\n <section class=\"file-selector\">\n\n <h1>\n <div class=\"title lft\">"
72
+ + "</h1>\n <div class=\"file-browser-wrapper\" aria-busy=\"false\">\n <div class=\"file-browser-tree-loading hidden\" aria-hidden=\"true\">\n <span class=\"icon-loop\" aria-hidden=\"true\"></span>\n <span class=\"file-browser-tree-loading-status\" aria-live=\"polite\" aria-atomic=\"true\" aria-busy=\"false\">"
73
+ + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Loading", options) : helperMissing.call(depth0, "__", "Loading", options)))
74
+ + "</span>\n </div>\n <div class=\"file-browser-scroll\"></div>\n </div>\n </section>\n\n <!-- center: asset listing -->\n <section class=\"file-selector\">\n\n <h1>\n <div class=\"title lft\">"
73
75
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Assets", options) : helperMissing.call(depth0, "__", "Assets", options)))
74
76
  + "</div>\n <div class=\"upload-switcher rgt\">\n <a href=\"#\" class=\"btn-info small upload hidden\"><span class=\"icon-add\"></span>"
75
77
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Add file(s)", options) : helperMissing.call(depth0, "__", "Add file(s)", options)))
@@ -79,13 +81,15 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/assetSearch', 'u
79
81
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Retry", options) : helperMissing.call(depth0, "__", "Retry", options)))
80
82
  + "</button>\n </div>\n\n <div class=\"empty\">\n "
81
83
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "No files", options) : helperMissing.call(depth0, "__", "No files", options)))
82
- + "\n </div>\n\n <div class=\"files-wrapper\" aria-busy=\"false\">\n <table class=\"files\">\n <thead>\n <tr>\n <th class=\"files-label sortable sorted sorted_asc\" data-sort-by=\"label\" aria-sort=\"ascending\" tabindex=\"0\">\n <span class=\"sort-label\">"
84
+ + "\n </div>\n\n <div class=\"files-wrapper\" aria-busy=\"false\">\n <div class=\"files-list-loading hidden\" aria-hidden=\"true\">\n <span class=\"icon-loop\" aria-hidden=\"true\"></span>\n <span class=\"files-list-loading-status\" aria-live=\"polite\" aria-atomic=\"true\" aria-busy=\"false\">"
85
+ + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Loading", options) : helperMissing.call(depth0, "__", "Loading", options)))
86
+ + "</span>\n </div>\n <div class=\"files-scroll\">\n <table class=\"files\">\n <thead>\n <tr>\n <th class=\"files-label sortable sorted sorted_asc\" data-sort-by=\"label\" aria-sort=\"ascending\" tabindex=\"0\">\n <span class=\"sort-label\">"
83
87
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Label", options) : helperMissing.call(depth0, "__", "Label", options)))
84
- + "</span>\n </th>\n <th class=\"files-location sortable\" data-sort-by=\"location\" aria-sort=\"none\" tabindex=\"0\">\n <span class=\"sort-label\">"
88
+ + "</span>\n </th>\n <th class=\"files-location sortable\" data-sort-by=\"location\" aria-sort=\"none\" tabindex=\"0\">\n <span class=\"sort-label\">"
85
89
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Location", options) : helperMissing.call(depth0, "__", "Location", options)))
86
- + "</span>\n </th>\n <th class=\"files-updated sortable\" data-sort-by=\"updatedAt\" aria-sort=\"none\" tabindex=\"0\">\n <span class=\"sort-label\">"
90
+ + "</span>\n </th>\n <th class=\"files-updated sortable\" data-sort-by=\"updatedAt\" aria-sort=\"none\" tabindex=\"0\">\n <span class=\"sort-label\">"
87
91
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Last modified on", options) : helperMissing.call(depth0, "__", "Last modified on", options)))
88
- + "</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"files-list\"></tbody>\n </table>\n </div>\n\n <div class=\"file-upload-container\"></div>\n\n <div class=\"pagination-bottom\"></div>\n\n </section>\n\n <section class=\"file-preview\">\n\n <h1>"
92
+ + "</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"files-list\"></tbody>\n </table>\n </div>\n </div>\n\n <div class=\"file-upload-container\"></div>\n\n <div class=\"pagination-bottom\"></div>\n\n </section>\n\n <section class=\"file-preview\">\n\n <h1>"
89
93
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Preview", options) : helperMissing.call(depth0, "__", "Preview", options)))
90
94
  + "</h1>\n\n <div class=\"previewer\">\n <p class=\"nopreview\"></p>\n </div>\n\n <div class=\"file-properties\">\n\n <div class=\"grid-row\">\n <div class=\"col-2\">\n "
91
95
  + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Type", options) : helperMissing.call(depth0, "__", "Type", options)))
@@ -120,7 +124,8 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/assetSearch', 'u
120
124
  rootClassUri: 'http://www.tao.lu/Ontologies/TAOMedia.rdf#Media',
121
125
  classMappingUrl: urlUtil.route('getWithMapping', 'ClassMetadata', 'tao'),
122
126
  statusUrl: urlUtil.route('status', 'AdvancedSearch', 'tao'),
123
- maxListSize: 5
127
+ maxListSize: 5,
128
+ ajaxTimeoutMs: 30000
124
129
  };
125
130
 
126
131
  /**
@@ -307,7 +312,7 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/assetSearch', 'u
307
312
  url: endpoint,
308
313
  method: 'GET',
309
314
  dataType: 'json',
310
- timeout: Number(options.ajaxTimeoutMs) > 0 ? Number(options.ajaxTimeoutMs) : 10000,
315
+ timeout: Number(options.ajaxTimeoutMs) > 0 ? Number(options.ajaxTimeoutMs) : defaults.ajaxTimeoutMs,
311
316
  data: params
312
317
  }).done(function (response) {
313
318
  if (isStale()) {
@@ -399,7 +404,7 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/assetSearch', 'u
399
404
  for (let i = 0; i < sources.length; i++) {
400
405
  options.root = sources[i].root;
401
406
  options.path = sources[i].path;
402
- $fileBrowser.append('<div class="' + options.root + '"><ul class="folders"></ul></div>');
407
+ $fileBrowser.children('.file-browser-scroll').append('<div class="' + options.root + '"><ul class="folders"></ul></div>');
403
408
  fileBrowser(options);
404
409
  }
405
410
  };
@@ -417,7 +422,7 @@ define(['jquery', 'lodash', 'core/pluginifier', 'ui/resourcemgr/assetSearch', 'u
417
422
  });
418
423
  }
419
424
  if (options.path && options.root) {
420
- $fileBrowser.append('<div class="' + options.root + '"><ul class="folders"></ul></div>');
425
+ $fileBrowser.children('.file-browser-scroll').append('<div class="' + options.root + '"><ul class="folders"></ul></div>');
421
426
  fileBrowser(options);
422
427
  }
423
428
  return afterComponentsMounted();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oat-sa/tao-core-ui",
3
- "version": "3.24.0",
3
+ "version": "3.24.1",
4
4
  "displayName": "TAO Core UI",
5
5
  "description": "UI libraries of TAO",
6
6
  "scripts": {
package/src/resourcemgr/assetSearch.js CHANGED
@@ -46,7 +46,7 @@ import 'ui/searchModal/css/advancedSearch.css';
46
46
 
47
47
  const ns = 'resourcemgr';
48
48
  const EVENT_NS = 'resourcemgrAssetSearch';
49
- const DEFAULT_AJAX_TIMEOUT_MS = 10000;
49
+ const DEFAULT_AJAX_TIMEOUT_MS = 30000;
50
50
  const DEFAULT_ROOT_CLASS_URI = 'http://www.tao.lu/Ontologies/TAOMedia.rdf#Media';
51
51
  const SEARCH_MODE_MODAL_TITLE = __('Please select a file from the resource manager.');
52
52
 
@@ -811,7 +811,7 @@ export default function assetSearch(options) {
811
811
  function showLoading() {
812
812
  searchInFlight = true;
813
813
  $searchButton.prop('disabled', true).addClass('is-searching').attr('aria-busy', 'true');
814
- $searchButtonSpinner.removeClass('hidden').removeAttr('hidden');
814
+ $searchButtonSpinner.removeClass('hidden');
815
815
  $searchButtonLabel.text(__('Searching'));
816
816
  $resultsRegion.attr('aria-busy', 'true');
817
817
  }
@@ -822,7 +822,7 @@ export default function assetSearch(options) {
822
822
  function hideLoading() {
823
823
  searchInFlight = false;
824
824
  $searchButton.removeClass('is-searching').attr('aria-busy', 'false');
825
- $searchButtonSpinner.addClass('hidden').attr('hidden', 'hidden');
825
+ $searchButtonSpinner.addClass('hidden');
826
826
  $searchButtonLabel.text(__('Search'));
827
827
  $resultsRegion.attr('aria-busy', 'false');
828
828
  updateSearchActionState();
package/src/resourcemgr/assetSearchContract.js CHANGED
@@ -46,7 +46,7 @@ export const DEFAULT_SORT = {
46
46
  * Default page size for search results.
47
47
  * @type {number}
48
48
  */
49
- export const DEFAULT_PAGE_SIZE = 10;
49
+ export const DEFAULT_PAGE_SIZE = 11;
50
50
 
51
51
  /**
52
52
  * Minimum universal query length before Search is enabled (matches indexed prefix rules).
package/src/resourcemgr/css/resourcemgr.css CHANGED
@@ -764,8 +764,12 @@ Usage:
764
764
  .resourcemgr .file-browser .asset-search-actions .asset-search-submit .asset-search-submit-spinner.hidden, .resourcemgr .file-browser .asset-search-actions .asset-search-submit .asset-search-submit-spinner[hidden] {
765
765
  display: none;
766
766
  }
767
- .resourcemgr .file-browser .asset-search-actions .asset-search-submit.is-searching .asset-search-submit-spinner:not(.hidden):not([hidden]) {
767
+ .resourcemgr .file-browser .asset-search-actions .asset-search-submit.is-searching .asset-search-submit-spinner:not(.hidden) {
768
768
  display: inline-block;
769
+ }
770
+ .resourcemgr .file-browser .asset-search-actions .asset-search-submit.is-searching .asset-search-submit-spinner:not(.hidden).icon-loop::before {
771
+ display: inline-block;
772
+ transform-origin: 50% 50%;
769
773
  animation: rm-search-button-spin 1.4s linear infinite;
770
774
  }
771
775
  .resourcemgr .file-browser .asset-search-actions .asset-search-submit:disabled, .resourcemgr .file-browser .asset-search-actions .asset-search-submit[disabled] {
@@ -805,11 +809,56 @@ Usage:
805
809
  }
806
810
  }
807
811
  .resourcemgr .file-browser .file-browser-wrapper {
808
- overflow: auto;
812
+ position: relative;
813
+ display: flex;
814
+ flex-direction: column;
809
815
  flex: 1 1 auto;
810
816
  min-height: 0;
817
+ overflow: hidden;
818
+ }
819
+ .resourcemgr .file-browser .file-browser-wrapper.is-tree-loading {
820
+ pointer-events: none;
821
+ }
822
+ .resourcemgr .file-browser .file-browser-wrapper.is-tree-loading .file-browser-scroll {
823
+ overflow: hidden;
824
+ }
825
+ .resourcemgr .file-browser .file-browser-wrapper .file-browser-scroll {
826
+ flex: 1 1 auto;
827
+ min-height: 0;
828
+ overflow: auto;
811
829
  padding: 8px 4px 12px;
812
830
  }
831
+ .resourcemgr .file-browser .file-browser-wrapper .file-browser-tree-loading {
832
+ position: absolute;
833
+ inset: 0;
834
+ z-index: 3;
835
+ display: flex;
836
+ align-items: center;
837
+ justify-content: center;
838
+ background-color: rgba(255, 255, 255, 0.75);
839
+ }
840
+ .resourcemgr .file-browser .file-browser-wrapper .file-browser-tree-loading.hidden {
841
+ display: none;
842
+ }
843
+ .resourcemgr .file-browser .file-browser-wrapper .file-browser-tree-loading .icon-loop {
844
+ color: #286d9c;
845
+ font-size: 22px;
846
+ font-size: 2.2rem;
847
+ }
848
+ .resourcemgr .file-browser .file-browser-wrapper .file-browser-tree-loading .icon-loop::before {
849
+ display: inline-block;
850
+ transform-origin: 50% 50%;
851
+ animation: rm-search-button-spin 1.4s linear infinite;
852
+ }
853
+ .resourcemgr .file-browser .file-browser-wrapper .file-browser-tree-loading .file-browser-tree-loading-status {
854
+ position: absolute;
855
+ width: 1px;
856
+ height: 1px;
857
+ overflow: hidden;
858
+ clip: rect(1px, 1px, 1px, 1px);
859
+ margin: 0;
860
+ padding: 0;
861
+ }
813
862
  .resourcemgr .file-browser ul {
814
863
  list-style-type: none;
815
864
  padding-left: 5px;
@@ -974,9 +1023,53 @@ Usage:
974
1023
  }
975
1024
  .resourcemgr .file-selector .files-wrapper {
976
1025
  position: relative;
1026
+ display: flex;
1027
+ flex-direction: column;
977
1028
  flex-grow: 1;
978
- overflow-y: auto;
979
1029
  min-height: 0;
1030
+ overflow: hidden;
1031
+ }
1032
+ .resourcemgr .file-selector .files-wrapper.is-files-loading {
1033
+ pointer-events: none;
1034
+ }
1035
+ .resourcemgr .file-selector .files-wrapper.is-files-loading .files-scroll {
1036
+ overflow-y: hidden;
1037
+ }
1038
+ .resourcemgr .file-selector .files-wrapper .files-scroll {
1039
+ flex: 1 1 auto;
1040
+ min-height: 0;
1041
+ overflow-y: auto;
1042
+ }
1043
+ .resourcemgr .file-selector .files-wrapper .files-list-loading {
1044
+ position: absolute;
1045
+ inset: 0;
1046
+ z-index: 2;
1047
+ display: flex;
1048
+ align-items: center;
1049
+ justify-content: center;
1050
+ background-color: rgba(255, 255, 255, 0.82);
1051
+ }
1052
+ .resourcemgr .file-selector .files-wrapper .files-list-loading.hidden {
1053
+ display: none;
1054
+ }
1055
+ .resourcemgr .file-selector .files-wrapper .files-list-loading .icon-loop {
1056
+ color: #286d9c;
1057
+ font-size: 22px;
1058
+ font-size: 2.2rem;
1059
+ }
1060
+ .resourcemgr .file-selector .files-wrapper .files-list-loading .icon-loop::before {
1061
+ display: inline-block;
1062
+ transform-origin: 50% 50%;
1063
+ animation: rm-search-button-spin 1.4s linear infinite;
1064
+ }
1065
+ .resourcemgr .file-selector .files-wrapper .files-list-loading .files-list-loading-status {
1066
+ position: absolute;
1067
+ width: 1px;
1068
+ height: 1px;
1069
+ overflow: hidden;
1070
+ clip: rect(1px, 1px, 1px, 1px);
1071
+ margin: 0;
1072
+ padding: 0;
980
1073
  }
981
1074
  .resourcemgr .file-selector table.files {
982
1075
  width: 100%;