Widget: DCTList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Cschwentker (talk | contribs)
No edit summary
Cschwentker (talk | contribs)
No edit summary
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 15: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"