Widget: DCTList: Difference between revisions

Revision as of 16:13, 8 June 2022

Development verstion of the DCT List.
Not ready for production!

@@ Line 128: / Line 128: @@
          filterState.dataSources = selectedSources;
-         document.querySelectorAll('.source-option').forEach(el => {
+         document.querySelectorAll('.data-source-cell .data-source-img').forEach(img => {
-            const box = el.querySelector('input[type="checkbox"]');
+             if (selectedSources.includes(img.dataset.value)) { img.classList.remove('unchecked') }
-             if (selectedSources.includes(box.value)) { el.classList.remove('unchecked') }
+             else { img.classList.add('unchecked'); }
-             else { el.classList.add('unchecked'); }
          });
@@ Line 146: / Line 145: @@
              const identifier = escapeAttr(curr.name);
              return prev +
-                 '<div class="source-option"><input type="checkbox" id="filter-' + identifier + '" value="' + curr.name + '" checked>' +
+                 '<div><input type="checkbox" id="filter-' + identifier + '" value="' + curr.name + '" checked>' +
                  '<label for="filter-' + identifier + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>'
          }, '');
@@ Line 167: / Line 166: @@
                      title: 'Data Sources',
                      field: 'dataSources',
+                    cssClass: 'data-source-cell',
                      formatter: function (cell) {
                          const output = cell.getValue().reduce((prev, curr) => {
                              const src = dataSources.find(src => src.name === curr);
                              const url = src ? src.image : '';
-                             return url ? prev + '<img class="data-source-img" src="' + url + '">' : prev + ' ' + curr;
+                             return url ? prev + '<img class="data-source-img" data-value="' + curr + '" src="' + url + '">' : prev + ' ' + curr;
                          }, '');
                          return output;