Widget: DCTList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Eschmidt (talk | contribs)
No edit summary
Line 44: Line 44:
         .data-source-img { width: 2em; height: 2em; }
         .data-source-img { width: 2em; height: 2em; }
     </style>
     </style>
    <div id="dct-list-wrapper">
        <h1>Social Media and Crowdsourcing Technologies</h1>
        <h2>Filters</h2>
        <div id="data-source-filter-wrapper">
            <h3>Data Sources</h3>
            <button type="button" onclick="selectAll()">Select all</button>
            <button type="button" onclick="deselectAll()">Deselect all</button>
            <div id="data-source-filter"></div>
        </div>
        <div id="dct-tabulator"></div>
    </div>


     <script>
     <script>
Line 68: Line 56:
     */
     */


    /** @param {string} title */
    /** @param {string} title */
     const getUrl = title => {
     function getUrl(title) {
         return title ? '/index.php/Special:FilePath/' + title : title;
         return title ? '/index.php/Special:FilePath/' + title : title;
     }
     }


     /** @param {string} text */  
     /** @param {string} text */  
     const escapeAttr = text => {
     function escapeAttr(text) {
         return text ? text.replace(/\s/g, '-') : text;
         return text ? text.replace(/\s/g, '-') : text;
    }
    const table = 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: 'Data Sources',
                field: 'dataSources',
                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 output;
                }
            }
        ]
    });
    /**
    * @param {DCT} dct
    * @param {DCT} filterState
    */
    function dctFilter(dct, filterState) {
        return dct.dataSources.some(source => filterState.dataSources.includes(source));
    }
    function updateFilter() {
     }
     }


Line 149: Line 98:


         return dctList;
         return dctList;
    }
    /**
    * @param {DCT} dct
    * @param {DCT} filterState
    */
    function dctFilter(dct, filterState) {
        return dct.dataSources.some(source => filterState.dataSources.includes(source));
    }
    function updateFilter() {
       
     }
     }


Line 156: Line 117:
         const dcts = data[1];
         const dcts = data[1];


        console.log(data)
         // Set up filters.
 
         // Create filters.
         const filterHtml = dataSources.reduce((prev, curr) => {
         const filterHtml = dataSources.reduce((prev, curr) => {
             const identifier = escapeAttr(curr.name);
             const identifier = escapeAttr(curr.name);
Line 167: Line 126:
         document.getElementById('data-source-filter').innerHTML = filterHtml;
         document.getElementById('data-source-filter').innerHTML = filterHtml;


         console.log(table)
         // Set up table.
        table.setData(dcts);
        const table = new Tabulator("#dct-tabulator", {
         table.on('tableBuilt', () => { console.log('set data', dcts); });
            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: 'Data Sources',
                    field: 'dataSources',
                    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 output;
                    }
                }
            ]
        });
         table.on('tableBuilt', () => { table.setData(dcts); });
 
         table.on('dataFiltered', (filters, rows) => {
         table.on('dataFiltered', (filters, rows) => {
             console.log(filters)
             console.log(filters)
Line 195: Line 180:
     }
     }
     </script>
     </script>
    <div id="dct-list-wrapper">
        <h1>Social Media and Crowdsourcing Technologies</h1>
        <h2>Filters</h2>
        <div id="data-source-filter-wrapper">
            <h3>Data Sources</h3>
            <button type="button" onclick="selectAll()">Select all</button>
            <button type="button" onclick="deselectAll()">Deselect all</button>
            <div id="data-source-filter"></div>
        </div>
        <div id="dct-tabulator"></div>
    </div>
</includeonly>
</includeonly>

Revision as of 15:01, 8 June 2022

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

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