@oat-sa/tao-core-ui 3.23.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 (31) hide show
  1. package/dist/figure/FigureStateActive.js +64 -32
  2. package/dist/image/ImgStateActive/initHelper.js +64 -32
  3. package/dist/image/ImgStateActive.js +64 -32
  4. package/dist/previewer.js +1 -1
  5. package/dist/resourcemgr/assetSearch.js +793 -0
  6. package/dist/resourcemgr/assetSearchContract.js +477 -0
  7. package/dist/resourcemgr/css/resourcemgr.css +1230 -97
  8. package/dist/resourcemgr/css/resourcemgr.css.map +1 -1
  9. package/dist/resourcemgr/fileBrowser.js +815 -83
  10. package/dist/resourcemgr/filePreview.js +82 -7
  11. package/dist/resourcemgr/fileSelector.js +377 -92
  12. package/dist/resourcemgr.js +314 -57
  13. package/dist/searchModal/advancedSearch.js +233 -31
  14. package/package.json +15 -6
  15. package/src/image/ImgStateActive/initHelper.js +69 -31
  16. package/src/previewer.js +1 -1
  17. package/src/resourcemgr/assetSearch.js +847 -0
  18. package/src/resourcemgr/assetSearchContract.js +489 -0
  19. package/src/resourcemgr/css/resourcemgr.css +1230 -97
  20. package/src/resourcemgr/css/resourcemgr.css.map +1 -1
  21. package/src/resourcemgr/fileBrowser.js +872 -92
  22. package/src/resourcemgr/filePreview.js +89 -8
  23. package/src/resourcemgr/fileSelector.js +356 -46
  24. package/src/resourcemgr/scss/resourcemgr.scss +1450 -89
  25. package/src/resourcemgr/tpl/advanced-search.tpl +10 -0
  26. package/src/resourcemgr/tpl/fileSelect.tpl +25 -28
  27. package/src/resourcemgr/tpl/folder.tpl +4 -1
  28. package/src/resourcemgr/tpl/layout.tpl +125 -54
  29. package/src/resourcemgr/tpl/rootFolder.tpl +3 -1
  30. package/src/resourcemgr.js +294 -47
  31. package/src/searchModal/advancedSearch.js +242 -31
@@ -0,0 +1,10 @@
1
+ <div class="advanced-search-container">
2
+ <div class="add-criteria-container">
3
+ <a href="#" class="toggle-modal-button" role="button"><span class="icon-plus" aria-hidden="true"></span>{{__ "add criteria"}}</a>
4
+ <button type="button" class="applied-filters-summary hidden" hidden aria-expanded="false"></button>
5
+ <select name="criteria-select">
6
+ <option></option>
7
+ </select>
8
+ </div>
9
+ <div class="advanced-criteria-container"></div>
10
+ </div>
@@ -1,39 +1,36 @@
1
1
  {{#each files}}
2
- <li data-type="{{type}}"
2
+ <tr data-type="{{type}}"
3
3
  data-file="{{uri}}"
4
4
  data-display="{{display}}"
5
5
  data-mime="{{mime}}"
6
6
  data-size="{{size}}"
7
7
  data-url="{{viewUrl}}"
8
+ {{#if location}} data-location="{{location}}" {{/if}}
9
+ {{#if updatedAt}} data-updated="{{updatedAt}}" {{/if}}
8
10
  {{#if permissions.download}} data-download="true" {{/if}}
9
11
  {{#if permissions.preview}} data-preview="true" {{/if}}
10
12
  {{#if permissions.read}} data-select="true" {{/if}}
11
13
  data-alt="{{alt}}">
12
- <span class="desc truncate">{{name}}</span>
13
- <div class="actions">
14
- <div class="tlb">
15
- <div class="tlb-top">
16
- <span class="tlb-box">
17
- <span class="tlb-bar">
18
- <span class="tlb-start"></span>
19
- {{#if permissions.read }}
20
- <span class="tlb-group">
21
- {{#if permissions.read}}
22
- <a href="#" class="tlb-button-off select" title="{{__ 'Select this file'}}"><span class="icon-move-item"></span></a>
23
- {{/if}}
24
- {{#if permissions.download}}
25
- <a href="{{downloadUrl}}" download="{{name}}" target="_blank" class="tlb-button-off download" title="{{__ 'Download this file'}}"><span class="icon-download"></span></a>
26
- {{/if}}
27
- {{#if permissions.delete }}
28
- <a href="#" class="tlb-button-off delete" title="{{__ 'Remove this file'}}"><span class="icon-bin"></span></a>
29
- {{/if}}
30
- </span>
31
- {{/if}}
32
- <span class="tlb-end"></span>
33
- </span>
34
- </span>
35
- </div>
36
- </div>
37
- </div>
38
- </li>
14
+ <td class="files-label">
15
+ <span class="files-label-inner">
16
+ <span class="file-icon" aria-hidden="true"></span>
17
+ <span class="desc truncate">{{name}}</span>
18
+ </span>
19
+ </td>
20
+ <td class="files-location">
21
+ <span class="meta location truncate" title="{{locationDisplay}}">{{locationDisplay}}</span>
22
+ </td>
23
+ <td class="files-updated">
24
+ <span class="files-updated-inner">
25
+ <span class="meta updated truncate" title="{{updatedAtDisplay}}">{{updatedAtDisplay}}</span>
26
+ <span class="row-actions">
27
+ {{#if permissions.delete}}
28
+ <a href="#" class="delete" title="{{__ 'Remove this file'}}" aria-label="{{__ 'Remove this file'}}">
29
+ <span class="icon-bin" aria-hidden="true"></span>
30
+ </a>
31
+ {{/if}}
32
+ </span>
33
+ </span>
34
+ </td>
35
+ </tr>
39
36
  {{/each}}
@@ -6,7 +6,10 @@
6
6
  data-children-limit="{{childrenLimit}}"
7
7
  data-level="{{level}}"
8
8
  style="--tree-level: {{level}};"
9
- href="#">
9
+ href="#"
10
+ {{#unless showToggle}}class="is-leaf"{{/unless}}>
11
+ <span class="tree-toggle{{#if showToggle}} icon-right{{/if}}" aria-hidden="true"></span>
12
+ <span class="tree-folder icon-folder" aria-hidden="true"></span>
10
13
  {{label}}
11
14
  </a>
12
15
  </li>
@@ -4,81 +4,152 @@
4
4
 
5
5
  <div class="file-wrapper">
6
6
 
7
- <!-- left section: items selection -->
8
- <section class="file-browser">
9
- <h1>{{__ 'Browse resources'}}</h1>
10
- <div class="file-browser-wrapper"></div>
11
- </section>
12
-
13
- <!-- test editor -->
14
- <section class="file-selector">
15
-
16
- <h1>
17
- <div class="title lft"></div>
18
- <div class="upload-switcher rgt">
19
- <a href="#" class="btn-info small upload hidden"><span class="icon-add"></span>{{__ 'Add file(s)'}}</a>
20
- <a href="#" class="btn-info small listing"><span class="icon-undo"></span>{{__ 'Back to listing'}}</a>
7
+ <div class="file-panels">
8
+ <!-- left section: search, filters, folder tree -->
9
+ <section class="file-browser">
10
+ <div class="asset-search hidden" hidden>
11
+ <div class="asset-search-header">
12
+ <button
13
+ type="button"
14
+ class="asset-search-toggle"
15
+ aria-expanded="true"
16
+ aria-controls="{{assetSearchBodyId}}"
17
+ >
18
+ <span class="asset-search-title">{{__ 'Search'}}</span>
19
+ <span class="asset-search-applied-count hidden" hidden></span>
20
+ <span class="asset-search-scope" aria-live="polite">
21
+ <span class="asset-search-scope-prefix">{{__ 'Searching in:'}}</span>
22
+ <span class="asset-search-scope-name"></span>
23
+ <span class="asset-search-scope-subfolders hidden" hidden>{{__ 'and its subfolders'}}</span>
24
+ </span>
25
+ <span class="asset-search-chevron icon-up" aria-hidden="true"></span>
26
+ </button>
27
+ </div>
28
+ <div class="asset-search-body" id="{{assetSearchBodyId}}">
29
+ <div class="asset-search-field">
30
+ <span class="icon-find" aria-hidden="true"></span>
31
+ <label class="asset-search-label" for="{{assetSearchInputId}}">{{__ 'Search by name or label'}}</label>
32
+ <input
33
+ id="{{assetSearchInputId}}"
34
+ type="search"
35
+ class="asset-search-input"
36
+ placeholder="{{__ 'Search by name or label'}}"
37
+ autocomplete="off"
38
+ />
39
+ </div>
40
+ <div class="asset-search-filters"></div>
41
+ <div class="asset-search-actions">
42
+ <button type="button" class="asset-search-clear hidden" hidden>{{__ 'Clear all'}}</button>
43
+ <button type="button" class="btn-info small asset-search-submit" disabled>
44
+ <span class="asset-search-submit-spinner icon-loop hidden" aria-hidden="true"></span>
45
+ <span class="asset-search-submit-label">{{__ 'Search'}}</span>
46
+ </button>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <h1 class="resources-title">{{__ 'Resources'}}</h1>
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>
21
58
  </div>
22
- </h1>
59
+ </section>
60
+
61
+ <!-- center: asset listing -->
62
+ <section class="file-selector">
23
63
 
24
- <div class="empty">
25
- {{__ 'No files'}}
26
- </div>
64
+ <h1>
65
+ <div class="title lft">{{__ 'Assets'}}</div>
66
+ <div class="upload-switcher rgt">
67
+ <a href="#" class="btn-info small upload hidden"><span class="icon-add"></span>{{__ 'Add file(s)'}}</a>
68
+ <a href="#" class="btn-info small listing"><span class="icon-undo"></span>{{__ 'Back to listing'}}</a>
69
+ </div>
70
+ </h1>
71
+
72
+ <div class="asset-search-error hidden" hidden role="alert">
73
+ <p class="asset-search-error-message"></p>
74
+ <button type="button" class="btn-info small asset-search-retry">{{__ 'Retry'}}</button>
75
+ </div>
27
76
 
28
- <ul class="files"></ul>
77
+ <div class="empty">
78
+ {{__ 'No files'}}
79
+ </div>
29
80
 
30
- <div class="file-upload-container"></div>
81
+ <div class="files-wrapper" aria-busy="false">
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>
104
+ </div>
31
105
 
32
- <div class="pagination-bottom"></div>
106
+ <div class="file-upload-container"></div>
33
107
 
34
- </section>
108
+ <div class="pagination-bottom"></div>
35
109
 
36
- <section class="file-preview">
110
+ </section>
37
111
 
38
- <h1>{{__ 'Preview'}}</h1>
112
+ <section class="file-preview">
39
113
 
40
- <div class="previewer">
41
- <p class="nopreview"></p>
42
- </div>
114
+ <h1>{{__ 'Preview'}}</h1>
43
115
 
44
- <h2 class="toggler" data-toggle="~ .file-properties">{{__ 'File Properties'}}</h2>
116
+ <div class="previewer">
117
+ <p class="nopreview"></p>
118
+ </div>
45
119
 
46
- <div class="file-properties">
120
+ <div class="file-properties">
47
121
 
48
- <div class="grid-row">
49
- <div class="col-2">
50
- {{__ 'Type'}}
122
+ <div class="grid-row">
123
+ <div class="col-2">
124
+ {{__ 'Type'}}
125
+ </div>
126
+ <div class="col-10 prop-type">—</div>
51
127
  </div>
52
- <div class="col-10 prop-type"></div>
53
- </div>
54
128
 
55
- <div class="grid-row">
56
- <div class="col-2">
57
- {{__ 'Size'}}
129
+ <div class="grid-row">
130
+ <div class="col-2">
131
+ {{__ 'Size'}}
132
+ </div>
133
+ <div class="col-10 prop-size">—</div>
58
134
  </div>
59
- <div class="col-10 prop-size"></div>
60
- </div>
61
135
 
62
- <div class="grid-row prop-url">
63
- <div class="actions">
64
- <a href="#" download="" target="_blank" class="tlb-button-off download hidden" title="{{__ 'Download this file'}}">
65
- <button class="btn-info small">
136
+ <div class="grid-row prop-url">
137
+ <div class="actions">
138
+ <a href="#" download="" target="_blank" class="tlb-button-off download hidden" title="{{__ 'Download this file'}}">
66
139
  <span class="icon-download"></span>{{__ 'Download this file'}}
67
- </button>
68
- </a>
140
+ </a>
141
+ </div>
69
142
  </div>
70
143
  </div>
71
- </div>
72
144
 
73
- <h2 class="toggler" data-toggle="~ .actions">{{__ 'Actions'}}</h2>
74
-
75
- <div class="actions">
76
- <button class="btn-success select-action small" disabled>
77
- <span class="icon-move-item"></span>{{__ 'Select'}}
78
- </button>
79
- </div>
145
+ <div class="actions select-actions">
146
+ <button class="btn-success select-action small" disabled>
147
+ <span class="icon-move-item"></span>{{__ 'Select'}}
148
+ </button>
149
+ </div>
80
150
 
81
- </section>
151
+ </section>
152
+ </div>
82
153
 
83
154
  </div>
84
155
  </div>
@@ -1,13 +1,15 @@
1
1
  {{#if permissions.read }}
2
2
  <li class="root">
3
3
  <a
4
- class="root-folder active"
4
+ class="root-folder{{#unless showToggle}} is-leaf{{/unless}}"
5
5
  href="#"
6
6
  data-path="{{path}}"
7
7
  data-display="{{relPath}}"
8
8
  data-children-limit="{{childrenLimit}}"
9
9
  data-level="0"
10
10
  style="--tree-level: 0;">
11
+ <span class="tree-toggle{{#if showToggle}} icon-right{{/if}}" aria-hidden="true"></span>
12
+ <span class="tree-folder icon-folder" aria-hidden="true"></span>
11
13
  {{label}}
12
14
  </a>
13
15
  <ul></ul>