Widget: DCTList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Kiehl (talk | contribs)
No edit summary
Eschmidt (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 Homepage.<br><span style="color: red; font-weight: bold;">Not ready for production!</span></noinclude>
<includeonly>
<includeonly><style>
    <link href="https://unpkg.com/tabulator-tables@5.2.7/dist/css/tabulator.min.css" rel="stylesheet">
         #hp-wrapper {
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.7/dist/js/tabulator.min.js"></script>
            --hp-border: 1px solid rgba(0, 0, 0, .5);
 
            font-family: 'Open Sans';
    <style>
        }
         #dct-list-wrapper { font-family: 'Open Sans'; margin-top: 4em; }
         #hp-wrapper h1, #hp-wrapper h2, #hp-wrapper h3 {
         #dct-list-wrapper h1, #dct-list-wrapper h2, #dct-list-wrapper h3 {
             font-family: 'Raleway';
             font-family: 'Raleway';
             font-weight: 300;
             font-weight: 300;
             letter-spacing: .06em;
             letter-spacing: .06em;
         }
         }
         #dct-list-wrapper h1, #dct-filters h2 {
         #hp-heading {
            color: var(--links-blue);
             padding: 1em;
            display: flex;
            align-items: center;
        }
        #dct-intro {
             font-size: larger;
             margin-bottom: 4em;
             margin-bottom: 4em;
            background:
                linear-gradient(125deg, #FFFFFF 0%, #222222 100%),
                linear-gradient(200deg, #d5dde3 0%, #d5dde3 50%, #acbac8 calc(50% + 1px), #acbac8 60%, #5d758c calc(60% + 1px), #5d758c 75%, #415262 calc(75% + 1px), #415262 100%),
                linear-gradient(113deg, #d5dde3 0%, #d5dde3 40%, #acbac8 calc(40% + 1px), #acbac8 50%, #5d758c calc(50% + 1px), #5d758c 70%, #415262 calc(70% + 1px), #415262 100%);
            /* background:
                linear-gradient(125deg, #FFFFFF 0%, #000000 100%),
                linear-gradient(200deg, #D0F2F2 0%, #D0F2F2 50%, #34B8B8 calc(50% + 1px), #34B8B8 60%, #166EA9 calc(60% + 1px), #166EA9 75%, #125887 calc(75% + 1px), #125887 100%),
                linear-gradient(113deg, #D0F2F2 0%, #D0F2F2 40%, #34B8B8 calc(40% + 1px), #34B8B8 50%, #166EA9 calc(50% + 1px), #166EA9 70%, #125887 calc(70% + 1px), #125887 100%); */
            background-blend-mode: overlay, overlay, normal;
            clip-path: inset(0 100% 100% 0);
            transition: all 500ms ease-in-out;
         }
         }
         #dct-list-wrapper h1 svg {
         .loaded #hp-heading { clip-path: inset(0); }
            height: 2.5em;
        #hp-heading h1 { font-size: 3.4em; margin-bottom: .5em; color: var(--links-grey); }
            width: 2.5em;
        #hp-heading h1 span {
            fill: var(--links-blue);
            display: block;
             margin-right: .5em;
            white-space: nowrap;
            opacity: 0;
             transform: translateX(-1em);
            transition: all 500ms ease-in-out;
         }
         }
         #dct-filters h2 svg {
         .loaded #hp-heading h1 span { opacity: .95; transform: translateX(0);}
             height: 1.5em;
        #hp-heading h1 span:nth-child(1) { font-weight: 800; letter-spacing: .06em; transition-delay: 300ms; }
             width: 1.5em;
        #hp-heading h1 span:nth-child(2) { font-weight: 500; transition-delay: 400ms; }
             fill: var(--links-blue);
        #hp-heading h1 span:nth-child(3) { font-weight: 100; transition-delay: 500ms; }
             margin-right: .5em;
        #hp-heading .hp-lead { font-size: 1.4em; font-weight: 300; margin-bottom: 2em; opacity: 0; transition: all 500ms ease-in-out 1000ms; }
             margin-left: -.2em;
        .loaded #hp-heading .hp-lead { opacity: .95; }
        .hp-button-wrapper { text-align: center; }
        .hp-large-button {
             display: inline-block;
            font-weight: 600;
            font-size: 1.3em;
             padding: .5em;
             border: var(--hp-border);
             opacity: 0;
            transition: all 500ms ease-in-out 1300ms;
            text-decoration: none;
             cursor: pointer;
         }
         }
         #clear-filters-button {
         .hp-large-button:hover { text-decoration: none; }
            border: 1px solid var(--links-blue);
        .loaded .hp-large-button { opacity: 1; }
            font-size: 1.5em;
        .hp-search { margin-bottom: 4em; }
            font-family: 'Open Sans';
        .hp-areas { margin-bottom: 8em; }
            font-weight: 100;
        .hp-areas *, #hp-collections * { transition: all 400ms ease-in-out; }
            margin-bottom: 2em;
        .hp-areas h2 { text-align: center; margin-bottom: 1.5em; }
            padding: 0.3em 0.8em;
        .hp-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 2em; text-decoration: none; cursor: pointer; }
             color: var(--links-blue);
        .hp-area h3 { text-align: center; }
             background: transparent;
        .hp-area:hover { text-decoration: none; }
             font-variant: small-caps;
        .hp-area:hover h3 { font-weight: 700 !important; }
        .hp-area-icon { flex: 1 0; margin-right: 1em; user-select: none; }
        .hp-area-icon svg { width: 100px; height: 100px; }
        .hp-area-text { flex: 1 1 75%; }
        .hp-area-text p { font-size: 1.2em; margin: 0 0 0 .1em; }
        .hp-area-arrow { display: none; }
        .hp-compass {
            border-top: var(--hp-border);
             border-bottom: var(--hp-border);
             padding: 2em 1em;
             display: flex;
            justify-content: center;
         }
         }
         #dct-list-wrapper h2 {
         #hp-resources, #hp-networks { padding: 2em 1em; }
            margin-bottom: 1em;
         #hp-resources { border-top: var(--hp-border); }
         }
         #hp-resources .hp-area, #hp-networks .hp-area { margin-bottom: 0 !important; }
         .filter-button-wrapper {
        #hp-recent h3 { margin-bottom: 1em; }
            margin: 1.5em 0 1em 0;
         #forum-topics { padding: 2em 1em; }
         }
         #hp-changes { border-top: var(--hp-border); padding: 2em 1em; }
         .filter-wrapper button {
        .blue * {
            border: 0 none;
             color: var(--links-blue);
             color: var(--links-blue);
             background-color: transparent;
             border-color: var(--links-blue);
             font-variant: small-caps;
             fill: var(--links-blue);
            font-size: 1.2em;
            text-decoration: underline;
            padding: 0;
         }
         }
         .filter-content {
         .orange * {
             font-size: 1.2em;
             color: var(--links-orange);
             margin-bottom: 4em;
             border-color: var(--links-orange);
            display: grid;
             fill: var(--links-orange);
            grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
             gap: 1em 1em;
            align-items: end;
         }
         }
         .filter-group-header {
         .grey * {
             grid-column: 1/-1;
             color: var(--links-grey);
             margin-bottom: -.5em;
             border-color: var(--links-grey);
             margin-top: 1em;
             fill: var(--links-grey);
            font-family: 'Raleway';
            font-weight: 200;
            letter-spacing: .06em;
         }
         }
         .filter-group-start { grid-column-start: 1; }
         .cyan * {
        .filter-content img { width: 2em; height: 2em; margin: 0 .5em; }
            color: var(--links-cyan);
        #dct-tabulator.tabulator { border: 0 none; background-color: transparent; font-size: 1.2em; }
            border-color: var(--links-cyan);
        #dct-tabulator.tabulator .tabulator-header { border-bottom: 4px double var(--links-blue); background-color: transparent; }
            fill: var(--links-cyan);
        #dct-tabulator.tabulator .tabulator-header .tabulator-col { border-right: 0 none; background: transparent; }
        #dct-tabulator.tabulator .tabulator-header .tabulator-col-content { padding: .5em 0; }
        #dct-tabulator.tabulator .tabulator-header .tabulator-col-sorter { right: 1em; }
        #dct-tabulator.tabulator .tabulator-row { background-color: transparent; }
        #dct-tabulator.tabulator .tabulator-cell { border-right: 0 none; border-bottom: 1px solid var(--links-blue); padding: .5em 0; }
        .data-source-img, .func-img { width: 2em; height: 2em; margin-right: .4em; margin-bottom: .4em; }
        .source-img-placeholder { display:inline-block; width: 2em; height: 2em; }
        #dct-tabulator img.unselected {
            filter: grayscale(1);
            opacity: .25;
         }
         }
    </style>
    <script>
    'use strict';


    /**
        /* Quick fix for removed Compass. Delete when Compass is restored. */
    * @typedef {Object} DCT
        #forum-topics { border-top: var(--hp-border); }
    * @property {string} name
    * @property {string} url
    * @property {string[]} dataSources
    * @property {string[]} functions
    * @property {string} logo
    */


    let table;
        @media screen and (min-width: 992px) {
            #hp-heading { padding: 3em; margin-bottom: 8em; }
            #hp-heading h1 { font-size: 5em; }
            #hp-heading .hp-lead { max-width: 50%; font-size: 2em; }
            .hp-button-wrapper { text-align: left; }
            .hp-large-button { font-size: 1.6em; }
            #hp-main { width: 75%; margin: auto; }
            .hp-search { margin-bottom: 8em; }
            .hp-area { flex-direction: row; }
            .hp-area h3 { text-align: left; }
            .hp-areas h2 { margin-bottom: 2em; }
            .hp-area-icon svg { width: 130px; height: 130px; }
            .hp-area-arrow { display: block; flex: 1 0; font-size: 3em; margin-left: 1em; user-select: none; }
            .hp-area:hover .hp-area-arrow { transform: translateX(1em); }
            .hp-compass { padding: 5em; }
            #hp-collections { border-top: var(--hp-border); }
            #hp-resources { border-top: 0 none; }
            #forum-topics, #hp-resources { padding: 4em 1em 4em 0; border-right: var(--hp-border); }
            #hp-changes, #hp-networks { padding: 4em 0 4em 1em; border-top: 0 none; }
            .hp-compass .hp-area-text h2 { font-size: 3em; }
            .hp-compass .hp-area-text p { font-size: 1.8em; font-weight: 300 !important; }
            .hp-compass svg { width: 200px; height: 200px; }


    const FN_SEARCH = 'Search & Monitor';
            /* Quick fix for removed Compass. Delete when Compass is restored. */
    const FN_POST = 'Post & Schedule';
            #hp-resources {border-right: 0 none; }
    const FN_ANALYSIS = 'Analysis';
            #hp-changes { border-top: var(--hp-border); }
    const FN_METRICS = 'Metrics';
    const FN_REPORT = 'Report';
    const FN_COLLAB = 'Collaboration';
    const FN_INTEROP = 'Interoperability';
    const FN_META = 'Meta';
 
    const fnImages = {};
    fnImages[FN_SEARCH] = '/index.php/Special:FilePath/File:Func_search.svg';
    fnImages[FN_POST] = '/index.php/Special:FilePath/File:Func_post.svg';
    fnImages[FN_ANALYSIS] = '/index.php/Special:FilePath/File:Func_analysis.svg';
    fnImages[FN_METRICS] = '/index.php/Special:FilePath/File:Func_metrics.svg';
    fnImages[FN_REPORT] = '/index.php/Special:FilePath/File:Func_report.svg';
    fnImages[FN_COLLAB] = '/index.php/Special:FilePath/File:Func_collaboration.svg';
    fnImages[FN_INTEROP] = '/index.php/Special:FilePath/File:Func_interoperability.svg';
    fnImages[FN_META] = '/index.php/Special:FilePath/File:Func_meta.svg';
 
    const sourcesLayout = [
        {
            title: 'General',
            sources: ['Crowd', 'Web']
        },
        {
            title: 'Platforms',
            sources: ['Facebook', 'Twitter', 'Instagram', 'YouTube']
         }
         }
     ];
     </style>


     const getUrl = title =>  title ? '/index.php/Special:FilePath/' + title : title;
     <script>
 
         function search(event) {
    const escapeAttr = text => text ? text.replace(/\s/g, '-') : text;
             event.preventDefault();
 
             const searchString = document.getElementById('hp-search-input').value;
    const hasFunction = (dctResult, subfunctions) => subfunctions.some(func => {
            window.location.assign('/index.php?search=' + encodeURIComponent(searchString) + '&title=Special%3ASearch&profile=default&fulltext=1');
        const printoutResult = dctResult.printouts[func];
         return printoutResult && printoutResult[0] && printoutResult[0].fulltext.toLowerCase() === 'yes'
    });
 
    async function getSources() {
        const sourceQuery = '/api.php?action=ask&format=json&query=' + encodeURIComponent('[[Category:Social media platform]]|?IMAGE');
        const sourceResponse = await fetch(sourceQuery).then(response => response.json());
 
        const results = sourceResponse.query.results;
        const sources = Object.getOwnPropertyNames(results).map(platformName => ({
             name: platformName,
            image: getUrl(results[platformName].printouts['IMAGE'][0].fulltext.replace('PAGENAME:', ''))
        }));
 
        return sources;
    }
 
    async function getDcts() {
        const searchFunctions = [
            'Advanced search features',
            'Keyword search',
            'Hashtag search',
            'Keyword monitoring',
            'Hashtag monitoring',
            'Event monitoring',
            'Event notifications'
        ];
        const postFunctions = [
            'Posting content',
            'Scheduling content',
            'Post time optimization',
            'Content library'
        ];
        const analysisFunctions = [
            'Text analysis',
            'Image analysis',
            'Video analysis',
            'Topic analysis',
            'Sentiment analysis',
            'Trend analysis'
        ];
        const metricsFunctions = [
            'Post metrics',
            'Profile or Site metrics',
            'Network metrics',
            'Follower metrics',
            'Audience metrics',
            'Competitor metrics'
        ];
        const reportFunctions = [
            'Filtering sorting searching',
            'Clustering Aggregation',
            'Visualization options',
            'PDF export'
        ];
        const collaborationFunctions = [
            'Multiuser',
            'Permission management',
            'Inbox workflow',
            'Approval workflows'
        ];
        const interoperabilityFunctions = [
            'Data export',
            'Third party tool integration',
            'API support'
        ];
        const metaFunctions = [
            'White Label',
             'GDPR compliant',
            'Historical data access',
            'Multiple accounts per platform'
        ];
 
        const dctQuery = '[[Category:Disaster Community Technology]]' +
                        '[[Is Archived::No]]' +
                        '|limit=500' +
                        '|?Image' +
                        '|?Data Sources' +
                        '|?' + searchFunctions.join('|?') +
                        '|?' + postFunctions.join('|?') +
                        '|?' + analysisFunctions.join('|?') +
                        '|?' + metricsFunctions.join('|?') +
                        '|?' + reportFunctions.join('|?') +
                        '|?' + collaborationFunctions.join('|?') +
                        '|?' + interoperabilityFunctions.join('|?') +
                        '|?' + metaFunctions.join('|?');
 
        const dctQueryUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(dctQuery);
        const dctResponse = await fetch(dctQueryUrl).then(response => response.json());
 
        const results = dctResponse.query.results;
        const dctList = Object.getOwnPropertyNames(results).map(dctKey => {
 
            /** @type {DCT} */
            const dct = {};
            const dctResult = results[dctKey];
            dct.name = dctKey;
            dct.url = dctResult.fullurl;
            dct.dataSources = dctResult.printouts['Data Sources'].map(source => source.fulltext).sort();
            dct.logo = dctResult.printouts['Image'][0] ? getUrl(dctResult.printouts['Image'][0].fulltext) : void 0;
            dct.functions = [];
 
            if (hasFunction(dctResult, searchFunctions)) dct.functions.push(FN_SEARCH);
            if (hasFunction(dctResult, postFunctions)) dct.functions.push(FN_POST);
            if (hasFunction(dctResult, analysisFunctions)) dct.functions.push(FN_ANALYSIS);
            if (hasFunction(dctResult, metricsFunctions)) dct.functions.push(FN_METRICS);
            if (hasFunction(dctResult, reportFunctions)) dct.functions.push(FN_REPORT);
            if (hasFunction(dctResult, collaborationFunctions)) dct.functions.push(FN_COLLAB);
            if (hasFunction(dctResult, interoperabilityFunctions)) dct.functions.push(FN_INTEROP);
            if (hasFunction(dctResult, metaFunctions)) dct.functions.push(FN_META);
 
            return dct;
        });
 
        return dctList;
    }
 
    /**
    * @param {DCT} dct
    * @param {Partial<DCT>} filterState
    */
    function dctFilter(dct, filterState) {
        // If filtering property is empty, don't apply the filter (set the check to true).
        // Passing an empty object (as with applyFilters(true)) should result in an unfiltered table.
        const sourcesCheck = filterState.dataSources
            ? dct.dataSources.some(source => filterState.dataSources.includes(source))
            : true;
        const functionsCheck = filterState.functions
            ? dct.functions.some(func => filterState.functions.includes(func))
            : true;
        return sourcesCheck && functionsCheck;
    }
 
    function applyFilters(clear) {
        if (!table) return;
 
        // If clear=true, pass empty object to the filter to disable it.
        if (clear) {
            table.setFilter(dctFilter, {});
            return;
         }
         }
    </script>


         /** @type {Partial<DCT>} */
    <div id="hp-wrapper">
        const filterState = {};
         <div id="hp-heading">
            <h1>
                <span>LINKS</span>
                <span>Community</span>
                <span>Center</span>
            </h1>
            <p class="hp-lead">Strengthening links between technologies and&nbsp;society for&nbsp;European disaster resilience.</p>
            <div class="hp-button-wrapper">
                <a class="hp-large-button" href="https://links.communitycenter.eu/index.php/Getting_started">Get Started</a>
            </div>
        </div>


         const selectedFunctions = Array.from(document.querySelectorAll('#functions-filter input[type="checkbox"]:checked')).map(checkbox => checkbox.value);
         <div id="hp-main">
        filterState.functions = selectedFunctions;
            <form class="hp-search" onsubmit="search(event)">
                <input id="hp-search-input" class="form-control form-control-lg" type="text" placeholder="Search" aria-label="Search">
            </form>


        const selectedSources = Array.from(document.querySelectorAll('#data-source-filter input[type="checkbox"]:checked')).map(checkbox => checkbox.value);
            <div class="hp-areas">
        filterState.dataSources = selectedSources;
                <h2>
                    Social Media and Crowdsourcing Libraries
                </h2>
                <a class="hp-area blue" href="https://links.communitycenter.eu/index.php/List_of_Disaster_Community_Technologies">
                    <div class="hp-area-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="a"><path d="M65 334h96v96H65z"/></clipPath></defs><g clip-path="url(#a)" transform="translate(-65 -334)"><path d="m142 395.981.004-35.993H84.001v36.01Zm-55.999-33.993h54.003L140 393.981l-53.999.017Z"/><path d="M81.001 358.987a2.002 2.002 0 0 1 2-2h60.003a2.002 2.002 0 0 1 2 2V400h2v-41.013a4.003 4.003 0 0 0-4-4H83.001a4.003 4.003 0 0 0-4 4V400h2ZM118.003 402.981v2h-10.001v-2H67v1.999a5.006 5.006 0 0 0 5 5.001h82.004a5.006 5.006 0 0 0 5.001-5.001v-1.999Zm36.001 5H72a3.004 3.004 0 0 1-3-3h37.002a1.934 1.934 0 0 0 2 2h10.001a1.934 1.934 0 0 0 2-2h37.002a3.005 3.005 0 0 1-3.001 3Z"/><path d="M113 365c-7.18 0-13 5.82-13 13s5.82 13 13 13 13-5.82 13-13c-.008-7.176-5.824-12.992-13-13Zm10.949 12h-3.518a14.167 14.167 0 0 0-4.176-9.508 11.023 11.023 0 0 1 7.694 9.508ZM112 368.226V377h-4.426c.254-3.771 1.929-7.06 4.426-8.774ZM112 379v8.775c-2.494-1.717-4.17-5.017-4.425-8.775Zm2 8.774V379h4.425c-.255 3.754-1.932 7.056-4.425 8.774ZM114 377v-8.773c2.492 1.718 4.17 5.019 4.425 8.773Zm-4.273-9.502a14.124 14.124 0 0 0-4.158 9.502h-3.518a11.02 11.02 0 0 1 7.676-9.502ZM102.051 379h3.518a14.157 14.157 0 0 0 4.173 9.507 11.022 11.022 0 0 1-7.691-9.507Zm14.205 9.508a14.168 14.168 0 0 0 4.175-9.508h3.518a11.023 11.023 0 0 1-7.693 9.508Z"/></g></svg>
                    </div>
                    <div class="hp-area-text">
                        <h3>Technologies</h3>
                        <p>
                            Software for&nbsp;interaction with, within or&nbsp;among communities in&nbsp;case of a&nbsp;disaster and for&nbsp;analysis of&nbsp;these interactions.​
                        </p>
                    </div>
                    <div class="hp-area-arrow">&rarr;</div>
                </a>


        table.setFilter(dctFilter, filterState);
                <a class="hp-area orange" href="https://links.communitycenter.eu/index.php/List_of_Guidelines">
    }
                    <div class="hp-area-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="b"><path d="M65 455h96v96H65z"/></clipPath></defs><g clip-path="url(#b)" transform="translate(-65 -455)"><path d="M138 463H84v79.961h54a5.014 5.014 0 0 0 5.019-5V468a5.014 5.014 0 0 0-5.019-5Zm-52 2h6.261v75.961H86Zm55.019 72.963a3.012 3.012 0 0 1-3.019 3H94.261V465H138a3.013 3.013 0 0 1 3.019 3Z"/><path d="M104 489h28v2h-28ZM110 500h16v2h-16Z"/></g></svg>
                    </div>
                    <div class="hp-area-text">
                        <h3>Guidelines</h3>
                        <p>
                            Expert guidelines for&nbsp;usage of&nbsp;social media and&nbsp;crowdsourcing in&nbsp;disasters.​
                        </p>
                    </div>
                    <div class="hp-area-arrow">&rarr;</div>
                </a>
            </div>
        </div>


    // Load data and build page.
        <div id="hp-collections" class="container-fluid">
    Promise.all([getSources(), getDcts()]).then(data => {
            <div class="row">
        const dataSources = data[0];
                <div id="hp-resources" class="col-12 col-lg-6">
         const dcts = data[1];
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Helpful_resources">
                        <div class="hp-area-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="res"><path d="M592 312h96v96h-96z"/></clipPath></defs><g clip-path="url(#res)" transform="translate(-592 -312)"><path d="m675 366-10-10h-24v-35a1 1 0 0 0-2 0v11h-24l-10 10 10 10h24v48h2v-24h24Zm-59.172-16-8-8 8-8H639v16ZM641 374v-16h23.172l8 8-8 8Z"/></g></svg>
                        </div>
                        <div class="hp-area-text">
                            <h3>Collection of Helpful Resources</h3>
                            <p>
                                Browse some interesting or&nbsp;relevant websites and&nbsp;apps.​
                            </p>
                        </div>
                    </a>
                </div>
                <div id="hp-networks" class="col-12 col-lg-6">
                    <a class="hp-area grey" href="https://links.communitycenter.eu/index.php/Overview_of_Networks">
                        <div class="hp-area-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="net"><path d="M244 176h96v96h-96z"/></clipPath></defs><g clip-path="url(#net)" transform="translate(-244 -176)"><path d="M326.8 215c-.8 0-1.5.1-2.3.3l-2.2-6.7c6.1-3.2 8.5-10.7 5.3-16.8-3.2-6.1-10.7-8.5-16.8-5.3-3.3 1.7-5.7 4.9-6.5 8.5l-8.8-.8c-.1-4.6-3.8-8.2-8.4-8.1-4.6.1-8.2 3.8-8.1 8.4 0 1.7.6 3.3 1.5 4.7l-11 10.9c-5.2-4.5-13.1-4-17.6 1.2-4.5 5.2-4.1 13.1 1.1 17.6 2.3 2 5.2 3.1 8.2 3.1h.9l2.7 14.4c-4.4 1.3-6.8 5.9-5.5 10.3 1.3 4.4 5.9 6.8 10.3 5.5 4.4-1.3 6.8-5.9 5.5-10.3l-.6-1.5 8.9-4.5c4.9 6.7 14.3 8.1 20.9 3.2 5.1-3.8 7.3-10.3 5.5-16.4l9.7-5.3c2.3 3.9 7.3 5.3 11.3 3 3.9-2.3 5.3-7.3 3-11.3-1.4-2.5-4.1-4.1-7-4.1Zm-16.4-8.9c.3-3.3 3.3-5.8 6.6-5.5 2.9.3 5.2 2.6 5.5 5.5-3.6 2.5-8.4 2.5-12.1 0Zm3.3-10.3c0-1.5 1.2-2.8 2.8-2.8 1.6 0 2.8 1.2 2.8 2.8 0 1.5-1.2 2.8-2.8 2.8-1.5 0-2.8-1.3-2.8-2.8Zm2.8-8.8c5.8 0 10.5 4.7 10.5 10.5 0 2.6-1 5.1-2.7 7.1-.6-2.3-2.3-4.3-4.5-5.3 1.9-1.8 2-4.8.2-6.8-1.8-1.9-4.8-2-6.8-.2s-2 4.8-.2 6.8l.2.2c-2.2 1-3.9 2.9-4.5 5.3-3.9-4.3-3.6-10.9.7-14.8 2-1.8 4.5-2.8 7.1-2.8Zm-6.7 21.1-8.1 15.3c-7.1-3.3-15.4-.6-19.2 6.2l-9.7-5.3c1.8-4.3 1-9.2-1.9-12.8l11-11c3.4 3 8.6 2.6 11.6-.9.9-1 1.5-2.2 1.8-3.5l8.8.8v.6c-.1 4.3 2.1 8.3 5.7 10.6Zm-23.9-14.9c0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4 0 .8-.6 1.4-1.4 1.4-.8-.1-1.4-.7-1.4-1.4Zm1.4 3.3c1.7 0 3.1 1.2 3.4 2.9-2.1 1.4-4.7 1.4-6.8 0 .2-1.6 1.6-2.8 3.4-2.9Zm0-8.5c3.4 0 6.2 2.8 6.3 6.2 0 1.3-.4 2.6-1.2 3.7-.5-1.1-1.3-2.1-2.4-2.7.5-.6.7-1.3.7-2.1 0-1.9-1.5-3.4-3.4-3.4s-3.4 1.5-3.4 3.4c0 .8.3 1.5.7 2.1-1.1.6-1.9 1.5-2.4 2.7-2-2.8-1.4-6.7 1.3-8.7 1.1-.8 2.4-1.2 3.8-1.2Zm-36.5 31.5c0-5.8 4.7-10.5 10.5-10.5s10.5 4.7 10.5 10.5c0 2.6-1 5.1-2.7 7.1-.6-2.3-2.3-4.3-4.5-5.3 1.9-1.8 2-4.8.2-6.8s-4.8-2-6.8-.2c-1.9 1.8-2 4.8-.2 6.8l.2.2c-2.2 1-3.9 2.9-4.5 5.3-1.8-2-2.7-4.5-2.7-7.1Zm7.7-1.7c0-1.5 1.2-2.8 2.8-2.8 1.6 0 2.8 1.2 2.8 2.8 0 1.5-1.2 2.8-2.8 2.8-1.6 0-2.8-1.3-2.8-2.8Zm-3.3 10.3c.3-3.3 3.3-5.8 6.6-5.5 2.9.3 5.2 2.6 5.5 5.5-3.6 2.5-8.5 2.5-12.1 0Zm8.6 31.4c.3-1.9 2-3.2 3.9-2.9 1.5.2 2.7 1.4 2.9 2.9-2 1.3-4.7 1.3-6.8 0Zm2.1-6.3c0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4 0 .8-.6 1.4-1.4 1.4-.8-.1-1.4-.7-1.4-1.4Zm6.4 4.7c-.5-1.1-1.3-2.1-2.4-2.7.5-.6.7-1.3.7-2.1 0-1.9-1.5-3.4-3.4-3.4s-3.4 1.5-3.4 3.4c0 .8.3 1.5.7 2.1-1.1.6-1.9 1.5-2.4 2.7-2-2.8-1.4-6.7 1.4-8.7 2.8-2 6.7-1.4 8.7 1.4 1.7 2.1 1.7 5.1.1 7.3Zm1-9.2c-1.5-1.7-3.7-2.7-6-2.7h-.4l-2.7-14.4c3.2-.8 6-2.8 7.7-5.6l9.7 5.3c-1.7 4.2-1.4 8.9.7 12.8l-9 4.6Zm14.6-1.2c.3-4.2 4-7.3 8.2-7 3.7.3 6.7 3.3 7 7-4.5 3.3-10.7 3.3-15.2 0Zm4-12.6c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6-1.6 3.6-3.6 3.6-3.6-1.6-3.6-3.6Zm13 11.1c-.7-3.1-2.9-5.6-5.8-6.8 2.4-2 2.7-5.5.7-7.9-2-2.4-5.5-2.7-7.9-.7-2.4 2-2.7 5.5-.7 7.9.2.3.5.5.7.7-2.9 1.2-5.1 3.7-5.8 6.8-5-5.2-4.8-13.4.4-18.4 5.2-5 13.4-4.8 18.4.4 4.8 5 4.8 13 0 18Zm4.2-15.2c-1.2-2.7-3.2-4.9-5.6-6.5l8.1-15.3c2.8 1.2 5.9 1.3 8.8.4l2.2 6.7c-3.3 1.9-4.9 5.8-3.8 9.4l-9.7 5.3Zm14.2-2.3c.3-1.9 2-3.2 3.9-2.9 1.5.2 2.7 1.4 2.9 2.9-2 1.3-4.7 1.3-6.8 0Zm2.1-6.3c0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4 0 .8-.6 1.4-1.4 1.4-.8-.1-1.4-.7-1.4-1.4Zm6.4 4.7c-.5-1.1-1.3-2.1-2.4-2.7.5-.6.7-1.3.7-2.1 0-1.9-1.5-3.4-3.4-3.4s-3.4 1.5-3.4 3.4c0 .8.3 1.5.7 2.1-1.1.6-1.9 1.5-2.4 2.7-2-2.8-1.4-6.7 1.4-8.7 2.8-2 6.7-1.4 8.7 1.4 1.7 2.1 1.7 5.1.1 7.3Z"/></g></svg>
                        </div>
                        <div class="hp-area-text">
                            <h3>Collection of Networks</h3>
                            <p>
                                Communities and&nbsp;interest groups relevant for&nbsp;the context of&nbsp;social media in&nbsp;disaster management.​
                            </p>
                        </div>
                    </a>
                </div>
            </div>
         </div>


        // Set up filters.
        const functionFilterHtml = Object.getOwnPropertyNames(fnImages).reduce((acc, funcName) => {
            const identifier = escapeAttr(funcName);
            return acc + '<div><input type="checkbox" id="func-filter-' + identifier + '" value="' + funcName + '" checked>' +
                '<label for="func-filter-' + identifier + '"><img src="' + fnImages[funcName] + '"> ' + funcName + '</label></div>'
        }, '');
        document.getElementById('functions-filter').innerHTML = functionFilterHtml;


         const groupedSources = [];
         <!--kie: comment out until it is available.-->
         const sourcesCopy = Array.from(dataSources);
         <!-- <div class="hp-compass cyan">
        for (const layoutGroup of sourcesLayout) {
             <div class="d-flex align-items-center">
             const group = [];
                <div class="hp-area-icon">
            for (const source of layoutGroup.sources) {
                    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="c"><path d="M199 603h96v96h-96z"/></clipPath></defs><g clip-path="url(#c)" transform="translate(-199 -603)"><path d="m277.516 645.583 2.136.654c-2.126-14.416-13.438-25.741-27.852-27.884l.691 2.143a31.072 31.072 0 0 1 25.025 25.087ZM214.36 646.146l2.14-.646a31.07 31.07 0 0 1 25.02-25l.655-2.139c-14.368 2.147-25.652 13.42-27.815 27.785ZM241.386 681.481a31.073 31.073 0 0 1-24.87-24.881l-2.151-.7a33.075 33.075 0 0 0 27.679 27.727ZM279.654 655.746l-2.141.691a31.072 31.072 0 0 1-25.032 25.068l-.691 2.143c14.424-2.14 25.744-13.475 27.864-27.902Z"/><path d="m274.8 647.888-15.134-4.924 4.837-9.38-9.431 4.806-4.872-15.208-2-6.2-1.2-3.9-1.3 4-1.9 6.2-4.784 15.134-9.416-4.832 4.82 9.429-15.12 4.776-6.3 1.9-4 1.3 4 1.3 6.1 2 15.248 4.8-4.848 9.405 9.386-4.947L243.7 678.8l1.9 6.2 1.3 4 1.3-4 2-6.2 4.9-15.3 9.4 4.9-4.828-9.351 15.028-4.859 6.2-2 4-1.3-3.9-1.1Zm-.714 4.4-15.341 4.954-2.01-3.893a9.925 9.925 0 0 1-.951 2.519l4.045 7.832-7.723-4.027a9.93 9.93 0 0 1-2.361 1.027l3.555 1.854-5 15.629-1.382 4.283-1.308-4.271-4.925-15.595 3.594-1.894a9.95 9.95 0 0 1-2.36-1.017l-7.73 4.074 4.051-7.863a9.91 9.91 0 0 1-.959-2.505l-2 3.885-15.557-4.89-4.194-1.375 4.37-1.315 15.441-4.877 1.967 3.847a9.938 9.938 0 0 1 .981-2.475l-4.088-8 8.016 4.113a9.958 9.958 0 0 1 2.523-.953l-3.92-2.013 4.894-15.474 1.27-4.148 1.316 4.072 4.966 15.518-4.011 2.044a9.922 9.922 0 0 1 2.53.955l8.1-4.125-4.147 8.043c.433.78.76 1.614.971 2.481l2.033-3.943 15.475 5.035 3.883 1.192Z"/><path d="M247 644.088a7 7 0 1 0 7 7 7.009 7.009 0 0 0-7-7Zm0 12a5 5 0 1 1 5-5 5.007 5.007 0 0 1-5 5.003Z"/></g></svg>
                let idx = sourcesCopy.findIndex(src => src.name === source);
                </div>
                if (idx !== -1) { group.push(sourcesCopy.splice(idx, 1)[0]); }
                <div class="hp-area-text">
            }
                    <h2>Want to be guided?</h2>
            if (group.length > 0) { groupedSources.push({ title: layoutGroup.title, sources: group }); }
                    <p>
        }
                        Try the compass!
         groupedSources.push({ title: 'More platforms', sources: sourcesCopy });
                    </p>
                </div>
            </div>
         </div> -->


         let dataSourceFilterHtml = '';
         <div id="hp-recent" class="container-fluid">
        groupedSources.forEach(group => {
            <div class="row">
            dataSourceFilterHtml += '<div class="filter-group-header">' + group.title + '</div>';
                 <div id="forum-topics" class="col-12 col-lg-6">
            dataSourceFilterHtml += group.sources.reduce((acc, curr, idx) => {
                     <h3 class="text-center">Latest Discussions</h3>
                const identifier = escapeAttr(curr.name);
                    <script src="https://forum.links.communitycenter.eu/javascripts/embed-topics.js"></script>
                return acc +
                    <d-topics-list discourse-url="https://forum.links.communitycenter.eu" per-page="5" order="latest" sort-ascending="false" template="complete"></d-topics-list>
                '<div ' + (idx === 0 ? ' class="filter-group-start">' : '>') +
                '<input type="checkbox" id="filter-' + identifier + '" value="' + curr.name + '" checked>' +
                 '<label for="filter-' + identifier + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>'
            }, '');
        })
        document.getElementById('data-source-filter').innerHTML = dataSourceFilterHtml;
 
        // Set up table.
        const tabulator = new Tabulator("#dct-tabulator", {
            layout: 'fitColumns',
            columns: [
                {
                    title: 'Name',
                    field: 'name',
                    formatter: function (cell) {
                        /** @type {DCT} */
                        const dct = cell.getData();
                        return '<a href="' + dct.url + '">' + dct.name + '</a>';
                    }
                },
                {
                    title: 'Functions',
                    field: 'functions',
                    cssClass: 'functions-cell',
                    formatter: function (cell) {
                        const output = cell.getValue()
                            .map(func => '<img class="func-img" src="' + fnImages[func] +
                                '" data-value="' + func +
                                '" alt="' + func +
                                '" title="' + func +
                                '">')
                            .join('');
                        return output;
                    }
                },
                {
                    title: 'Supported Platforms',
                    field: 'dataSources',
                    cssClass: 'data-sources-cell',
                     formatter: function (cell) {
                        const val = cell.getValue();
                        let out = '';
                        groupedSources.forEach((group, gIndex) => {
                            // out += '<div>';
                            out += group.sources.reduce((prev, curr) => {
                                const idx = val.findIndex(src => src === curr.name);
                                if (idx === -1) {
                                    return prev // + '<div class="source-img-placeholder"> </div>'
                                } else {
                                    return curr.image
                                        ? prev + '<img class="data-source-img" data-value="' + curr.name + '" src="' + curr.image + '" alt="' + curr.name +'" title="' + curr.name + '">'
                                        : prev + ' ' + curr;
                                }
                            }, '');
                            // out += '</div>';
                        });
                        return out;
                    }
                }
            ]
        });
 
        tabulator.on('tableBuilt', () => {
            tabulator.setData(dcts);
            table = tabulator;
        });
 
        tabulator.on('dataFiltered', (filters, rows) => {
            if (!(filters[0] && filters[0].type)) { return; }
 
            const markImages = () => {
                const selectedSources = filters[0].type.dataSources;
                const selectedFunctions = filters[0].type.functions;
 
                // Mark data source images
                document.querySelectorAll('.data-sources-cell .data-source-img').forEach(img => {
                    if (!selectedSources || selectedSources.includes(img.dataset.value)) { img.classList.remove('unselected'); }
                    else { img.classList.add('unselected'); }
                });
 
                // Mark functions images
                document.querySelectorAll('.functions-cell .func-img').forEach(img => {
                    if (!selectedFunctions || selectedFunctions.includes(img.dataset.value)) { img.classList.remove('unselected'); }
                    else { img.classList.add('unselected'); }
                });
 
                tabulator.off('renderComplete', markImages);
            }
            tabulator.on('renderComplete', markImages);
        });
 
        document.getElementById('data-source-filter').addEventListener('change', event => {
            applyFilters();
        }, { passive: true });
        document.getElementById('functions-filter').addEventListener('change', event => {
            applyFilters();
        }, { passive: true });
    });
 
    function selectAll(context) {
        document.querySelectorAll(context + ' input[type="checkbox"]').forEach(checkbox => checkbox.checked = true);
        applyFilters();
    }
 
    function deselectAll(context) {
        document.querySelectorAll(context + ' input[type="checkbox"]').forEach(checkbox => checkbox.checked = false);
        applyFilters();
    }
 
    function clearFilters() {
        document.querySelectorAll('#dct-filters input[type="checkbox').forEach(checkbox => checkbox.checked = checkbox.defaultChecked);
        applyFilters(true);
    }
    </script>
 
    <div id="dct-list-wrapper">
        <h1>
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="a"><path d="M65 334h96v96H65z"/></clipPath></defs><g clip-path="url(#a)" transform="translate(-65 -334)"><path d="m142 395.981.004-35.993H84.001v36.01Zm-55.999-33.993h54.003L140 393.981l-53.999.017Z"/><path d="M81.001 358.987a2.002 2.002 0 0 1 2-2h60.003a2.002 2.002 0 0 1 2 2V400h2v-41.013a4.003 4.003 0 0 0-4-4H83.001a4.003 4.003 0 0 0-4 4V400h2ZM118.003 402.981v2h-10.001v-2H67v1.999a5.006 5.006 0 0 0 5 5.001h82.004a5.006 5.006 0 0 0 5.001-5.001v-1.999Zm36.001 5H72a3.004 3.004 0 0 1-3-3h37.002a1.934 1.934 0 0 0 2 2h10.001a1.934 1.934 0 0 0 2-2h37.002a3.005 3.005 0 0 1-3.001 3Z"/><path d="M113 365c-7.18 0-13 5.82-13 13s5.82 13 13 13 13-5.82 13-13c-.008-7.176-5.824-12.992-13-13Zm10.949 12h-3.518a14.167 14.167 0 0 0-4.176-9.508 11.023 11.023 0 0 1 7.694 9.508ZM112 368.226V377h-4.426c.254-3.771 1.929-7.06 4.426-8.774ZM112 379v8.775c-2.494-1.717-4.17-5.017-4.425-8.775Zm2 8.774V379h4.425c-.255 3.754-1.932 7.056-4.425 8.774ZM114 377v-8.773c2.492 1.718 4.17 5.019 4.425 8.773Zm-4.273-9.502a14.124 14.124 0 0 0-4.158 9.502h-3.518a11.02 11.02 0 0 1 7.676-9.502ZM102.051 379h3.518a14.157 14.157 0 0 0 4.173 9.507 11.022 11.022 0 0 1-7.691-9.507Zm14.205 9.508a14.168 14.168 0 0 0 4.175-9.508h3.518a11.023 11.023 0 0 1-7.693 9.508Z"/></g></svg>
            <span>Technologies</span>
        </h1>
        <div id="dct-intro">
 
        <p>This page provides an&nbsp;overview of&nbsp;various Technologies related to Social Media and Crowdsourcing. You can use the&nbsp;filters to&nbsp;identify
            relevant technologies according to your needs and then click on the name of a&nbsp;tool to&nbsp;get further information.</p>
        </div>
        <div id="dct-filters">
            <h2>
                <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96"><defs><clipPath id="b"><path d="M592 312h96v96h-96z"/></clipPath></defs><g clip-path="url(#b)" transform="translate(-592 -312)"><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"/></g></svg>
                <span>Filters</span>
            </h2>
            <div style="text-align: center;">
                <button id="clear-filters-button" type="button" onclick="clearFilters()">Clear Filters</button>
            </div>
            <div class="filter-wrapper">
                <h3>Functions</h3>
                <div class="filter-button-wrapper">
                    <button type="button" onclick="selectAll('#functions-filter')">Select all</button> |
                    <button type="button" onclick="deselectAll('#functions-filter')">Deselect all</button>
                 </div>
                 </div>
                 <div class="filter-content" id="functions-filter" ></div>
                 <div id="hp-changes" class="col-12 col-lg-6">
            </div>
                    <h3 class="text-center">News and Activities</h3>
            <div class="filter-wrapper">
                    <div class="h-100">
                <h3>Supported Platforms</h3>
                        <div id="recent-changes"></div>
                <div class="filter-button-wrapper">
                     </div>
                    <button type="button" onclick="selectAll('#data-source-filter')">Select all</button> |
                     <button type="button" onclick="deselectAll('#data-source-filter')">Deselect all</button>
                 </div>
                 </div>
                <div class="filter-content" id="data-source-filter"></div>
             </div>
             </div>
         </div>
         </div></div></includeonly>
        <div id="dct-tabulator"></div>
    </div>
</includeonly>

Revision as of 12:33, 30 June 2022

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

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