Widget: DCTList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Marterer (talk | contribs)
No edit summary
 
(110 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<noinclude>Development version of the Compass.<br><strong style="color:red;">Not ready for production!</strong>
<noinclude>DCT list widget.<br><span style="color: red; font-weight: bold;">Currently in use &ndash; do not modify!</span></noinclude>
</noinclude>
 
<includeonly>
<includeonly>
     <style>
     <link href="/resources/assets/tabulator/dist/css/tabulator.min.css" rel="stylesheet">
        :root {
    <script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script>
            --compass-color: #C31980;
            --handbook-color: #C35C19;
            --safe-color: #80C319;
        }


        .plus.icon {
    <!-- STYLES BEGIN -->
            color: currentColor;
<link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/lib?q=dct_list.css">
            display: inline-block;
<!-- STYLES END -->
            position: relative;
            top: -.3em;
            margin-left: .5em;
        }


        .plus.icon::before {
    <!-- SCRIPT BEGIN -->
            content: '';
    <script type="text/javascript" src="https://assets.links.communitycenter.eu/v2/links/lib?q=dct_list.js"></script>
            position: absolute;
    <!-- SCRIPT END -->
            width: 1em;
            height: 1px;
            background-color: currentColor;
        }


        .plus.icon::after {
    <!-- Icon definitons -->
            content: '';
    <!--<img src="https://assets.links.communitycenter.eu/v2/links/lib?q=unknown.svg">-->
            position: absolute;
            width: 1em;
            height: 1px;
            background-color: currentColor;
            transform: rotate(90deg);
            transition: all 0.4s ease;
        }


         h2.opened .plus.icon::after,
    <div id="dct-list-wrapper">
         h3.opened .plus.icon::after {
         <h1>
             transform: rotate(0);
            <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=1-dct_list.svg">
         }
            <div>
                <div>Technologies</div>
                <div style="font-size:small; letter-spacing:.03em; margin-left: .6em;">Social Media and Crowdsourcing Library</div>
            </div>
        </h1>
         <div id="dct-intro">
            <p>The overall goal of the Social Media and Crowdsourcing (SMCS) Technologies Library is to face the growing
                heterogeneous use of technologies in disasters and the overwhelming number of technologies on the
                market. It gathers and structures information about existing technologies to provide an up-to-date overview and
                thus support the selection of suitable technologies.
            </p>
            <p>
                You can use the filters to identify relevant technologies according to your needs and then click on the
                name of the technology to get further information.
             </p>
         </div>


         #cmp-container {
         <div id="filter-bar">
             font-family: 'Open Sans';
             <div style="display: flex; justify-content: space-between;">
            font-size: 120%;
                <div style="flex: 1 1;">
        }
                    <h2 style="margin-bottom: 1rem;">Selected Filters</h2>
 
                     <div id="filter-summary">No filter. Showing all results.</div>
        #cmp-container h1,
                </div>
        #cmp-container h2,
                <div>
        #cmp-container h3 {
                    <button class="large-button open-filters" type="button" onclick="toggleFilter()">Open Filters</button>
            font-family: 'Raleway';
            font-weight: 300;
            letter-spacing: .06em;
            position: relative;
        }
 
        #cmp-container h1 {
            letter-spacing: .06em;
        }
 
        #cmp-container h2 {
            margin-top: 2em;
            padding-bottom: 5px;
            color: var(--compass-color);
            cursor: pointer;
        }
 
        #cmp-container h2::before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: currentColor;
            letter-spacing: .06em;
            transition: all 0.4s ease;
            transform: scaleX(0);
            transform-origin: bottom left;
        }
 
        #cmp-container h2.opened::before {
            transform: scaleX(1);
        }
 
        #cmp-container h3 {
            font-weight: 1.4em;
            cursor: pointer;
        }
 
        .subtheme {
            margin-bottom: 2em;
        }
 
        .question {
            font-size: 1.2em;
            padding-left: 2em;
            cursor: pointer;
            margin-bottom: 1em;
        }
 
        .question::before {
            content: "→ ";
        }
 
        .answer {
            margin: 1.4em;
            font-size: 1.2rem;
        }
 
        .subtheme,
        .question,
        .answer {
            display: none;
        }
 
        .subtheme.opened,
        .question.opened,
        .answer.opened {
            display: block;
        }
 
        .answer-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1em;
        }
 
        .choice {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: flex-start;
        }
 
        .choice .button {
            flex: 0 0 8.2em;
            white-space: nowrap;
            transition: all 250ms;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1em;
            border: 1px solid currentColor;
        }
 
        .choice .desc {
            font-size: 75%;
            padding-left: 1em;
            transition: all 250ms;
        }
 
        .choice:hover .desc {
            font-weight: 600;
        }
 
        .choice.tech {
            color: var(--links-blue);
        }
 
        .choice.guide {
            color: var(--links-orange);
        }
 
        .choice.case {
            color: var(--links-cyan);
        }
 
        .choice.handbook {
            color: var(--handbook-color);
        }
 
        .choice.safe {
            color: var(--safe-color);
        }
 
        .choice.tech:hover .button {
            background-color: var(--links-blue);
            color: #fff;
        }
 
        .choice.guide:hover .button {
            background-color: var(--links-orange);
            color: #fff;
        }
 
        .choice.case:hover .button {
            background-color: var(--links-cyan);
            color: #fff;
        }
 
        .choice.handbook:hover .button {
            background-color: var(--handbook-color);
            color: #fff;
        }
 
        .choice.safe:hover .button {
            background-color: var(--safe-color);
            color: #fff;
        }
    </style>
 
    <div id="cmp-container">
        <div class="theme">
            <h2>Engaging Citizens</h2>
            <div class="subtheme">
                <h3>Collecting and Analysing Information from SMCS</h3>
                <div class="question" data-aspect="Social">
                     Whom do you want to include in your collection and analysis of information, and from whom do you
                    want to collect and analyse information?
 
                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice case" id="q1-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    It provides helpful information from social media and crowdsourcing
                                    examples around the theme “Collecting and Analysing Information from SMCS”. Also the
                                    question, which vulnerable groups (disabled, migrants, minorities,…) were
                                    specifically involved in social media and crowdsourcing activities is answered.
                                </div>
                            </div>
                            <div class="choice guide" id="q1-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
                <div class="question" data-aspect="Socio-/Technical">
            </div>
                    How to collect and analyse information from citizens?


                    <div class="answer">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;">
                        <div class="answer-wrapper">
                <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2>
                            <div class="choice tech" id="q2-tech">
                <div><a href="/index.php/Form:Disaster_Community_Technology" style="color: var(--links-blue); font-size: 1.5em; font-variant:small-caps">Add new technology</a></div>
                                <div class="button">Technologies</div>
                                <div class="desc">
                                    It allows filtering for software that covers the functions Search &
                                    Monitor and Analysis of information from social media.
                                </div>
                            </div>
                            <div class="choice guide" id="q2-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                            <div class="choice case" id="q2-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    It provides helpful information from social media and crowdsourcing
                                    examples around the theme “Collecting and Analysing Information from SMCS”. Also the
                                    question, which specific functionality SMCS has been used for and how (e.g.
                                    gathering of information) is answered.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
             </div>
             </div>
            <div class="subtheme">
                <h3>Mobilising Citizens</h3>
                <div class="question" data-aspect="Social">
                    Who do you want to mobilise, and from whom would you want mobility-affiliated information?


                    <div class="answer">
            <div id="dct-filters">
                        <div class="answer-wrapper">
 
                            <div class="choice case" id="q3-case">
                <h2 style="display: flex; justify-content: space-between;">
                                <div class="button">Use Cases</div>
                    <div>
                                <div class="desc">
                        <img src="https://www.safetyinnovation.center/lcc/dct_list/img/filters.svg">
                                    It provides helpful information from social media and crowdsourcing
                        <span>Filters</span>
                                    examples around the theme “Mobilising Citizens”.
                                </div>
                            </div>
                            <div class="choice handbook" id="q3-handbook">
                                <div class="button">Citizens Handbook</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                        </div>
                     </div>
                     </div>
                </div>
                    <a onclick="toggleFilter()" id="close-filter-button">&times;</a>
                <div class="question" data-aspect="Socio-/Technical">
                </h2>
                    How can you mobilise the citizens?


                    <div class="answer">
                <div style="text-align: center;">
                        <div class="answer-wrapper">
                    <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
                            <div class="choice tech" id="q4-tech">
                                <div class="button">Technologies</div>
                                <div class="desc">
                                    It allows filtering for software that covers the function Post &
                                    Schedule, which aims at publishing information on social media.
                                </div>
                            </div>
                            <div class="choice guide" id="q4-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                            <div class="choice case" id="q4-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    It provides helpful information from social media and crowdsourcing
                                    examples around the theme “Mobilising Citizens”.
                                </div>
                            </div>
                            <div class="choice safe" id="q4-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                        </div>
                    </div>
                 </div>
                 </div>
            </div>
            <div class="subtheme">
                <h3>Mobilising Volunteers</h3>
                <div class="question" data-aspect="Social">
                    Who do you want to mobilise (interested in volunteering), and from whom in such volunteering
                    positions would you want mobility-affiliated information?


                    <div class="answer">
                <div class="filter-wrapper">
                        <div class="answer-wrapper">
                    <h4 class="filter-toggle">Functions <div class="plus icon"></div>
                            <div class="choice guide" id="q5-guide">
                    </h4>
                                <div class="button">Guidelines</div>
                    <div class="filter-container">
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                        <div class="filter-button-wrapper">
                                    consectetur, adipisci velit...</div>
                             <button type="button" onclick="selectAll('#functions-filter')">Select all</button> |
                            </div>
                             <button type="button" onclick="deselectAll('#functions-filter')">Clear all</button>
                            <div class="choice case" id="q5-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    It provides helpful information from social media and crowdsourcing
                                    examples around the theme “Mobilising Volunteers”.
                                </div>
                             </div>
                            <div class="choice handbook" id="q5-handbook">
                                <div class="button">Citizens Handbook</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                             </div>
                            <div class="choice safe" id="q5-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                         </div>
                         </div>
                        <div class="filter-content loose" id="functions-filter"></div>
                     </div>
                     </div>
                 </div>
                 </div>
                <div class="question" data-aspect="Socio-/Technical">
                    How can you mobilise the volunteers?


                    <div class="answer">
                <div class="filter-wrapper">
                        <div class="answer-wrapper">
                    <h4 class="filter-toggle">Supported Platforms <div class="plus icon"></div>
                            <div class="choice tech" id="q6-tech">
                    </h4>
                                <div class="button">Technologies</div>
                    <div class="filter-container">
                                <div class="desc">
                        <div class="filter-button-wrapper">
                                    It allows filtering for software that covers the function Post &
                             <button type="button" onclick="selectAll('#data-source-filter')">Select all</button> |
                                    Schedule, which aims at publishing information on social media.
                             <button type="button" onclick="deselectAll('#data-source-filter')">Clear all</button>
                                </div>
                            </div>
                            <div class="choice guide" id="q6-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                             </div>
                            <div class="choice case" id="q6-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    It provides helpful information from social media and crowdsourcing
                                    examples around the theme “Mobilising Volunteers”.
                                </div>
                             </div>
                            <div class="choice safe" id="q6-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                         </div>
                         </div>
                        <div class="filter-content loose" id="data-source-filter"></div>
                     </div>
                     </div>
                 </div>
                 </div>
            </div>
        </div>
        <div class="theme">
            <h2>Improving Communication</h2>
            <div class="subtheme">
                <h3>Making Information Accessible</h3>
                <div class="question" data-aspect="Social">
                    Who do you want to access your information, and from whom do you want to access information?


                    <div class="answer">
                <div class="filter-wrapper">
                        <div class="answer-wrapper">
                    <h4 class="filter-toggle">Pricing <div class="plus icon"></div>
                            <div class="choice case" id="q7-case">
                    </h4>
                                <div class="button">Use Cases</div>
                    <div class="filter-container">
                                <div class="desc">
                        <div class="filter-button-wrapper">
                                    It provides helpful information from social media and crowdsourcing
                             <button type="button" onclick="selectAll('#business-model-filter')">Select all</button> |
                                    examples around the theme “Making Information Accessible”.
                            <button type="button" onclick="deselectAll('#business-model-filter')">Clear all</button>
                                </div>
                            </div>
                            <div class="choice handbook" id="q7-handbook">
                                <div class="button">Citizens Handbook</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                             </div>
                            <div class="choice safe" id="q7-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                         </div>
                         </div>
                        <div class="filter-content" id="business-model-filter"></div>
                     </div>
                     </div>
                 </div>
                 </div>
                <div class="question" data-aspect="Socio-/Technical">
                    How can you make your information accessible?


                    <div class="answer">
                <!-- <div class="filter-wrapper">
                        <div class="answer-wrapper">
                    <h4 class="filter-toggle">Used by Practitioners <div class="plus icon"></div>
                            <div class="choice tech" id="q8-tech">
                    </h4>
                                <div class="button">Technologies</div>
                    <div class="filter-container">
                                <div class="desc">
                        <div class="filter-button-wrapper">
                                    It allows filtering for software that covers the function Post &
                             <button type="button" onclick="selectAll('#dm-use-filter')">Select all</button> |
                                    Schedule, which aims at publishing information on social media.
                             <button type="button" onclick="deselectAll('#dm-use-filter')">Clear all</button>
                                </div>
                            </div>
                            <div class="choice case" id="q8-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    It provides helpful information from social media and crowdsourcing
                                    examples around the theme “Making Information Accessible”.
                                </div>
                             </div>
                            <div class="choice handbook" id="q8-handbook">
                                <div class="button">Citizens Handbook</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                             </div>
                            <div class="choice safe" id="q8-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                         </div>
                         </div>
                        <div class="filter-content" id="dm-use-filter"></div>
                     </div>
                     </div>
                 </div>
                 </div> -->
            </div>
            <div class="subtheme">
                <h3>Targeting Communication</h3>
                <div class="question" data-aspect="Social">
                    Who do you want to target with your communication plan?


                    <div class="answer">
                <div id="bool-filters"
                        <div class="answer-wrapper">
                    style="border-top: 1px solid var(--links-blue); margin-top: 1em; padding-top: 1em;">
                            <div class="choice case" id="q9-case">
                    <div>
                                <div class="button">Use Cases</div>
                        <input type="checkbox" id="used-by-practitioners" value="yes">
                                <div class="desc">
                        <label for="used-by-practitioners">Used by practitioners</label>
                                    It provides helpful information from social media and crowdsourcing
                                    examples around the theme “Targeting Communication”.
                                </div>
                            </div>
                            <div class="choice handbook" id="q9-handbook">
                                <div class="button">Citizens Handbook</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                            <div class="choice safe" id="q9-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                        </div>
                     </div>
                     </div>
                </div>
                     <div>
                <div class="question" data-aspect="Socio-/Technical">
                         <input type="checkbox" id="has-use-case" value="yes">
                    How can you target your communication?
                        <label for="has-use-case">Use case available</label>
 
                     <div class="answer">
                         <div class="answer-wrapper">
                            <div class="choice tech" id="q10-tech">
                                <div class="button">Technologies</div>
                                <div class="desc">
                                    It allows filtering for software that covers the function Post &
                                    Schedule, which aims at publishing information on social media. It is also possible
                                    to filter by different platforms.
                                </div>
                            </div>
                            <div class="choice guide" id="q10-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                            <div class="choice case" id="q10-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    It provides helpful information from social media and crowdsourcing
                                    examples around the theme “Targeting Communication”.
                                </div>
                            </div>
                            <div class="choice safe" id="q10-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                        </div>
                     </div>
                     </div>
                </div>
                     <div>
            </div>
                         <input type="checkbox" id="show-archived" value="yes">
            <div class="subtheme">
                        <label for="show-archived">Show archived</label>
                <h3>Ensuring Credible Information</h3>
                <div class="question" data-aspect="Social">
                    Who do you want to share credible information with, and from whom do you receive credible
                    information?
 
                     <div class="answer">
                         <div class="answer-wrapper">
                            <div class="choice case" id="q11-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    It provides helpful information from social media and crowdsourcing
                                    examples around the theme “Ensuring Credible Information”.
                                </div>
                            </div>
                            <div class="choice safe" id="q11-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                        </div>
                     </div>
                     </div>
                 </div>
                 </div>
                <div class="question" data-aspect="Socio-/Technical">
                    How can you ensure credible information exchange?


                    <div class="answer">
                        <div class="answer-wrapper">
                            <div class="choice tech" id="q12-tech">
                                <div class="button">Technologies</div>
                                <div class="desc">
                                    There are no mature technologies on the market yet that can examine
                                    information for credibility.
                                </div>
                            </div>
                            <div class="choice guide" id="q12-guide">
                                <div class="button">Guidelines</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                            <div class="choice case" id="q12-case">
                                <div class="button">Use Cases</div>
                                <div class="desc">
                                    It provides helpful information from social media and crowdsourcing
                                    examples around the theme “Ensuring Credible Information”.
                                </div>
                            </div>
                            <div class="choice safe" id="q12-safe">
                                <div class="button">Feel Safe</div>
                                <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
                                    consectetur, adipisci velit...</div>
                            </div>
                        </div>
                    </div>
                </div>
             </div>
             </div>
         </div>
         </div>
        <div id="dct-tabulator"></div>
     </div>
     </div>
    <script>
        // Attach plus icon to the title of expandable blocks.
        document.querySelectorAll('.theme > h2, .subtheme > h3').forEach(el => {
            const icon = document.createElement('div');
            icon.classList.add('plus', 'icon');
            el.appendChild(icon);
        });
        // Set up toggles for expandable blocks.
        document.getElementById('cmp-container').addEventListener('click', event => {
            if (event.target.tagName === 'H2') {
                event.target.classList.toggle('opened');
                event.target.closest('.theme').querySelectorAll('.subtheme').forEach(el => el.classList.toggle('opened'));
            }
            if (event.target.tagName === 'H3') {
                event.target.classList.toggle('opened');
                event.target.closest('.subtheme').querySelectorAll('.question').forEach(el => el.classList.toggle('opened'));
            }
            if (event.target.classList.contains('question')) {
                event.target.querySelector('.answer')?.classList.toggle('opened');
            }
        });
        const search = 'Search and Monitor',
            post = 'Post and Schedule',
            analysis = 'Analysis',
            metrics = 'Metrics',
            report = 'Report',
            collab = 'Collaboration',
            interop = 'Interoperability',
            meta = 'Meta';
        // Click actions.
        const actions = {
            'q2-tech': {
                filter: {
                    functions: {
                        [search]: true,
                        [analysis]: true,
                        [post]: false,
                        [metrics]: false,
                        [report]: false,
                        [collab]: false,
                        [interop]: false,
                        [meta]: false,
                    }
                }
            },
            'q4-tech': {
                filter: {
                    functions: {
                        [search]: false,
                        [analysis]: false,
                        [post]: true,
                        [metrics]: false,
                        [report]: false,
                        [collab]: false,
                        [interop]: false,
                        [meta]: false,
                    }
                }
            },
            'q6-tech': {
                filter: {
                    functions: {
                        [search]: false,
                        [analysis]: false,
                        [post]: true,
                        [metrics]: false,
                        [report]: false,
                        [collab]: false,
                        [interop]: false,
                        [meta]: false,
                    }
                }
            },
            'q8-tech': {
                filter: {
                    functions: {
                        [search]: false,
                        [analysis]: false,
                        [post]: true,
                        [metrics]: false,
                        [report]: false,
                        [collab]: false,
                        [interop]: false,
                        [meta]: false,
                    }
                }
            },
            'q10-tech': {
                filter: {
                    functions: {
                        [search]: false,
                        [analysis]: false,
                        [post]: true,
                        [metrics]: false,
                        [report]: false,
                        [collab]: false,
                        [interop]: false,
                        [meta]: false,
                    }
                }
            }
        };
        const handler = event => {
            const answerId = event.currentTarget.id;
            const act = actions[answerId];
            if (!actions) return;
            if (answerId.indexOf('tech') !== -1) {
                // Action takes us to Tech Library
                const enc = btoa(encodeURIComponent(JSON.stringify(act)));
                window.location.assign('/index.php/List_of_Disaster_Community_Technologies?do=' + enc);
            }
            if (answerId.indexOf('safe') !== -1) {
                // Action takes us to Feel Safe
                window.location.assign('/index.php/Feel_Safe');
            }
        }


        document.querySelectorAll('.choice').forEach(el => el.addEventListener('click', handler, { passive: true }));
       
    </script>
</includeonly>
</includeonly>

Latest revision as of 09:46, 2 October 2024

DCT list widget.
Currently in use – do not modify!


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