Difference between revisions of "Widget:DCTList"

From LINKS Community Center
Jump to: navigation, search
Line 1: Line 1:
−
<noinclude>Development verstion of the DCT List.<br><span style="color: red; font-weight: bold;">Not ready for production!</span></noinclude>
+
<noinclude>Development verstion of the DCT List.<br><span style="color: red; font-weight: bold;">Not ready for
 +
        production!</span></noinclude>
 
<includeonly>
 
<includeonly>
 
     <link href="/resources/assets/tabulator.min.css" rel="stylesheet">
 
     <link href="/resources/assets/tabulator.min.css" rel="stylesheet">
Line 33: Line 34:
 
             color: var(--links-blue);
 
             color: var(--links-blue);
 
         }
 
         }
 +
 
         #dct-list-wrapper h1 svg {
 
         #dct-list-wrapper h1 svg {
 
             height: 2.5em;
 
             height: 2.5em;
Line 40: Line 42:
 
         }
 
         }
  
−
         #filter-bar { position: relative; margin: 1em 0 2em 0; }
+
         #filter-bar {
 +
            position: relative;
 +
            margin: 1em 0 2em 0;
 +
        }
 +
 
 
         #dct-filters {
 
         #dct-filters {
 
             position: absolute;
 
             position: absolute;
Line 54: Line 60:
 
             transition: all 400ms ease-in-out;
 
             transition: all 400ms ease-in-out;
 
         }
 
         }
 +
 
         #dct-filters.open {
 
         #dct-filters.open {
 
             clip-path: inset(0 0 -50px -50px);
 
             clip-path: inset(0 0 -50px -50px);
Line 111: Line 118:
 
             padding: 0;
 
             padding: 0;
 
         }
 
         }
−
       
+
 
 
         .filter-wrapper .filter-toggle {
 
         .filter-wrapper .filter-toggle {
 
             cursor: pointer;
 
             cursor: pointer;
 
         }
 
         }
  
−
         .filter-wrapper .filter-container { display: none; }
+
         .filter-wrapper .filter-container {
−
         .filter-wrapper.open .filter-container { display: block; }
+
            display: none;
 +
        }
 +
 
 +
         .filter-wrapper.open .filter-container {
 +
            display: block;
 +
        }
  
 
         .filter-wrapper.open .plus.icon::after {
 
         .filter-wrapper.open .plus.icon::after {
Line 130: Line 142:
 
             align-items: start;
 
             align-items: start;
 
         }
 
         }
−
       
+
 
 
         .filter-content.loose {
 
         .filter-content.loose {
 
             gap: .5em .5em;
 
             gap: .5em .5em;
Line 205: Line 217:
 
             filter: grayscale(1);
 
             filter: grayscale(1);
 
         }
 
         }
 +
 
         .func-img {
 
         .func-img {
 
             width: 1.5rem;
 
             width: 1.5rem;
Line 229: Line 242:
 
         }
 
         }
  
−
         #filter-summary { margin-right: 1em; }
+
         #filter-summary {
 +
            margin-right: 1em;
 +
        }
 +
 
 +
        #filter-summary table tr td {
 +
            vertical-align: top;
 +
        }
 +
 
 +
        #filter-summary table tr td:first-of-type {
 +
            padding-right: 10px;
 +
        }
  
−
        #filter-summary table tr td { vertical-align: top; }
 
−
        #filter-summary table tr td:first-of-type { padding-right: 10px; }
 
−
       
 
 
         #dct-tabulator .tabulator-row .tabulator-responsive-collapse table {
 
         #dct-tabulator .tabulator-row .tabulator-responsive-collapse table {
 
             font-size: smaller;
 
             font-size: smaller;
Line 242: Line 262:
 
             font-weight: 300;
 
             font-weight: 300;
 
         }
 
         }
 +
 
     </style>
 
     </style>
  
Line 283: Line 304:
 
         // This object defines the sort order of function categories and matches them to icons.
 
         // This object defines the sort order of function categories and matches them to icons.
 
         const fnImages = {
 
         const fnImages = {
−
             'Search and Monitor':   '/index.php/Special:FilePath/File:Func_search.svg',
+
             'Search and Monitor': '/index.php/Special:FilePath/File:Func_search.svg',
−
             'Post and Schedule':   '/index.php/Special:FilePath/File:Func_post.svg',
+
             'Post and Schedule': '/index.php/Special:FilePath/File:Func_post.svg',
−
             'Analysis':             '/index.php/Special:FilePath/File:Func_analysis.svg',
+
             'Analysis': '/index.php/Special:FilePath/File:Func_analysis.svg',
−
             'Metrics':             '/index.php/Special:FilePath/File:Func_metrics.svg',
+
             'Metrics': '/index.php/Special:FilePath/File:Func_metrics.svg',
−
             'Report':               '/index.php/Special:FilePath/File:Func_report.svg',
+
             'Report': '/index.php/Special:FilePath/File:Func_report.svg',
−
             'Collaboration':       '/index.php/Special:FilePath/File:Func_collaboration.svg',
+
             'Collaboration': '/index.php/Special:FilePath/File:Func_collaboration.svg',
−
             'Interoperability':     '/index.php/Special:FilePath/File:Func_interoperability.svg',
+
             'Interoperability': '/index.php/Special:FilePath/File:Func_interoperability.svg',
−
             'Meta':                 '/index.php/Special:FilePath/File:Func_meta.svg',
+
             'Meta': '/index.php/Special:FilePath/File:Func_meta.svg',
 
         };
 
         };
  
Line 318: Line 339:
 
         async function getDcts() {
 
         async function getDcts() {
 
             const functionsQuery = '[[Category:Function_category]]'
 
             const functionsQuery = '[[Category:Function_category]]'
−
                                + '|?-Subproperty_of=' + FUNC_KEY
+
                + '|?-Subproperty_of=' + FUNC_KEY
−
                                + '|?Has_description=' + DESC_KEY;
+
                + '|?Has_description=' + DESC_KEY;
 
             const functionsQueryResponse = await fetch(getQueryUrl(functionsQuery)).then(response => response.json());
 
             const functionsQueryResponse = await fetch(getQueryUrl(functionsQuery)).then(response => response.json());
−
       
+
 
 
             const sortOrder = Object.keys(fnImages);
 
             const sortOrder = Object.keys(fnImages);
 
             Object.entries(functionsQueryResponse.query.results)
 
             Object.entries(functionsQueryResponse.query.results)
Line 346: Line 367:
 
             const DMO_PROP = 'Used by Practitioners';
 
             const DMO_PROP = 'Used by Practitioners';
 
             const dctQuery = '[[Category:Disaster Community Technology]]'
 
             const dctQuery = '[[Category:Disaster Community Technology]]'
−
                          + '[[Is Archived::No]]'
+
                + '[[Is Archived::No]]'
−
                          + '|limit=500'
+
                + '|limit=500'
−
                          + '|?' + IMG_PROP
+
                + '|?' + IMG_PROP
−
                          + '|?' + DATASRC_PROP
+
                + '|?' + DATASRC_PROP
−
                          + '|?' + BUSINESS_PROP
+
                + '|?' + BUSINESS_PROP
−
                          + '|?' + DMO_PROP
+
                + '|?' + DMO_PROP
−
                          + '|?' + allFunctions.join('|?');
+
                + '|?' + allFunctions.join('|?');
  
 
             const dctResponse = await fetch(getQueryUrl(dctQuery)).then(response => response.json());
 
             const dctResponse = await fetch(getQueryUrl(dctQuery)).then(response => response.json());
Line 398: Line 419:
 
                     if (subs.length > 0) { nonemptyCategories.push(key); } else { emptyCategories.push(key); }
 
                     if (subs.length > 0) { nonemptyCategories.push(key); } else { emptyCategories.push(key); }
 
                 });
 
                 });
−
               
+
 
 
                 // Empty categories should only be checked by their name, nonempty - ONLY by subfunctions.
 
                 // Empty categories should only be checked by their name, nonempty - ONLY by subfunctions.
 
                 const checkEmpty = emptyCategories.some(cat => dct.functions.has(cat));
 
                 const checkEmpty = emptyCategories.some(cat => dct.functions.has(cat));
Line 441: Line 462:
 
                 document.querySelectorAll('#functions-filter input[type="checkbox"]').length !==
 
                 document.querySelectorAll('#functions-filter input[type="checkbox"]').length !==
 
                 document.querySelectorAll('#functions-filter input[type="checkbox"]:checked').length
 
                 document.querySelectorAll('#functions-filter input[type="checkbox"]:checked').length
−
             ) {  
+
             ) {
 
                 const functionFilterBlocks = document.querySelectorAll('#functions-filter .func-filter-block');
 
                 const functionFilterBlocks = document.querySelectorAll('#functions-filter .func-filter-block');
 
                 const funcOpts = new Map();
 
                 const funcOpts = new Map();
Line 469: Line 490:
  
 
             const dmUseOptions = Array.from(document.querySelectorAll('#dm-use-filter input[type="checkbox"]'));
 
             const dmUseOptions = Array.from(document.querySelectorAll('#dm-use-filter input[type="checkbox"]'));
−
              
+
 
 +
             const yesWithUseCase = document.querySelector('#dm-use-filter-Yes');
 +
            if (dmUseOptions.length.includes(yesWithUseCase)) {
 +
 
 +
            }
 
             console.log("dmuseOptions", dmUseOptions);
 
             console.log("dmuseOptions", dmUseOptions);
  
Line 678: Line 703:
 
                 // Set result counter
 
                 // Set result counter
 
                 document.getElementById('result-count').textContent = rows.length;
 
                 document.getElementById('result-count').textContent = rows.length;
−
               
+
 
 
                 // Exit if filter object/type doesn't exist (happens after Tabulator's own filter reset).
 
                 // Exit if filter object/type doesn't exist (happens after Tabulator's own filter reset).
 
                 if (!(filter && filter.type)) { summary.textContent = 'No filter. Showing all results.'; return; }
 
                 if (!(filter && filter.type)) { summary.textContent = 'No filter. Showing all results.'; return; }
Line 703: Line 728:
 
                             summaryHtml = summaryHtml.substring(0, summaryHtml.length - 2);
 
                             summaryHtml = summaryHtml.substring(0, summaryHtml.length - 2);
 
                         }
 
                         }
−
                         summaryHtml   += '</td></tr>';
+
                         summaryHtml += '</td></tr>';
 
                     }
 
                     }
 
                     if (filter.type.dataSources) {
 
                     if (filter.type.dataSources) {
Line 770: Line 795:
 
             }, { passive: true });
 
             }, { passive: true });
 
             document.getElementById('dm-use-filter').addEventListener('change', event => {
 
             document.getElementById('dm-use-filter').addEventListener('change', event => {
 +
               
 +
              console.log("change dm use filter", event)
 +
 
                 applyFilters();
 
                 applyFilters();
 
             }, { passive: true });
 
             }, { passive: true });
Line 780: Line 808:
  
 
             // Fix bug where the table is truncated to zero height despite having visible rows.
 
             // Fix bug where the table is truncated to zero height despite having visible rows.
−
             tabulator.on('renderComplete', function() {
+
             tabulator.on('renderComplete', function () {
 
                 // TODO: Check the bugfix for a possible infinite event loop.
 
                 // TODO: Check the bugfix for a possible infinite event loop.
 
                 // This will help detect it, in case it happens.
 
                 // This will help detect it, in case it happens.
 
                 // console.log('Table height bugfix: render complete.');
 
                 // console.log('Table height bugfix: render complete.');
−
               
+
 
 
                 try {
 
                 try {
 
                     const holderHeight = tabulator.rowManager.element.offsetHeight;
 
                     const holderHeight = tabulator.rowManager.element.offsetHeight;
Line 838: Line 866:
 
                 </clipPath>
 
                 </clipPath>
 
                 <g clip-path="url(#chev)" transform="translate(-592 -312)">
 
                 <g clip-path="url(#chev)" transform="translate(-592 -312)">
−
                     <path d="m640 370.586-25.293-25.293-1.414 1.414L640 373.414l26.707-26.707-1.414-1.414L640 370.586Z" />
+
                     <path
 +
                        d="m640 370.586-25.293-25.293-1.414 1.414L640 373.414l26.707-26.707-1.414-1.414L640 370.586Z" />
 
                 </g>
 
                 </g>
 
             </symbol>
 
             </symbol>
Line 862: Line 891:
 
             <div>
 
             <div>
 
                 <div>Technologies</div>
 
                 <div>Technologies</div>
−
                 <div style="font-size:small; letter-spacing:.03em; margin-left: .6em;">Social Media and Crowdsourcing Library</div>
+
                 <div style="font-size:small; letter-spacing:.03em; margin-left: .6em;">Social Media and Crowdsourcing
 +
                    Library</div>
 
             </div>
 
             </div>
 
         </h1>
 
         </h1>
Line 880: Line 910:
 
                 </div>
 
                 </div>
 
                 <div>
 
                 <div>
−
                     <button class="large-button open-filters" type="button" onclick="toggleFilter()">Open Filters</button>
+
                     <button class="large-button open-filters" type="button" onclick="toggleFilter()">Open
 +
                        Filters</button>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
  
 
             <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2>
 
             <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2>
−
       
+
 
 
             <div id="dct-filters">
 
             <div id="dct-filters">
 
                 <h2 style="display: flex; justify-content: space-between;">
 
                 <h2 style="display: flex; justify-content: space-between;">
 
                     <div>
 
                     <div>
−
                         <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
+
                         <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden"
 +
                            viewBox="0 0 96 96">
 
                             <defs>
 
                             <defs>
 
                                 <clipPath id="b">
 
                                 <clipPath id="b">
Line 897: Line 929:
 
                             <g clip-path="url(#b)" transform="translate(-592 -312)">
 
                             <g clip-path="url(#b)" transform="translate(-592 -312)">
 
                                 <path
 
                                 <path
−
                                d="M636 356.012v38.011l8-8v-30.011L674 326h-68Zm6.588-1.412-.588.584v30.008l-4 4v-34.008l-.585-.586L610.828 328h58.348Z" />
+
                                    d="M636 356.012v38.011l8-8v-30.011L674 326h-68Zm6.588-1.412-.588.584v30.008l-4 4v-34.008l-.585-.586L610.828 328h58.348Z" />
 
                             </g>
 
                             </g>
 
                         </svg>
 
                         </svg>
Line 908: Line 940:
 
                 </div>
 
                 </div>
 
                 <div class="filter-wrapper">
 
                 <div class="filter-wrapper">
−
                     <h4 class="filter-toggle">Functions <div class="plus icon"></div></h4>
+
                     <h4 class="filter-toggle">Functions <div class="plus icon"></div>
 +
                    </h4>
 
                     <div class="filter-container">
 
                     <div class="filter-container">
 
                         <div class="filter-button-wrapper">
 
                         <div class="filter-button-wrapper">
Line 918: Line 951:
 
                 </div>
 
                 </div>
 
                 <div class="filter-wrapper">
 
                 <div class="filter-wrapper">
−
                     <h4 class="filter-toggle">Supported Platforms <div class="plus icon"></div></h4>
+
                     <h4 class="filter-toggle">Supported Platforms <div class="plus icon"></div>
 +
                    </h4>
 
                     <div class="filter-container">
 
                     <div class="filter-container">
 
                         <div class="filter-button-wrapper">
 
                         <div class="filter-button-wrapper">
Line 928: Line 962:
 
                 </div>
 
                 </div>
 
                 <div class="filter-wrapper">
 
                 <div class="filter-wrapper">
−
                     <h4 class="filter-toggle">Pricing <div class="plus icon"></div></h4>
+
                     <h4 class="filter-toggle">Pricing <div class="plus icon"></div>
 +
                    </h4>
 
                     <div class="filter-container">
 
                     <div class="filter-container">
 
                         <div class="filter-button-wrapper">
 
                         <div class="filter-button-wrapper">
Line 938: Line 973:
 
                 </div>
 
                 </div>
 
                 <div class="filter-wrapper">
 
                 <div class="filter-wrapper">
−
                     <h4 class="filter-toggle">Used by Practitioners <div class="plus icon"></div></h4>
+
                     <h4 class="filter-toggle">Used by Practitioners <div class="plus icon"></div>
 +
                    </h4>
 
                     <div class="filter-container">
 
                     <div class="filter-container">
 
                         <div class="filter-button-wrapper">
 
                         <div class="filter-button-wrapper">

Revision as of 16:28, 6 December 2022

Development verstion of the DCT List.
Not ready for 

       production!
Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:DCTList&oldid=9269"