Difference between revisions of "Widget:CrisisCommunicationList"

From LINKS Community Center
Jump to: navigation, search
(15 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
     <script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script>
 
     <script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script>
 
     <style>
 
     <style>
−
         #usecase-list-wrapper {
+
         #cc-list-wrapper {
 
             font-family: 'Open Sans';
 
             font-family: 'Open Sans';
 
             margin-top: 4em;
 
             margin-top: 4em;
 
         }
 
         }
  
−
         #usecase-list-wrapper h1,
+
         #cc-list-wrapper h1,
−
         #usecase-list-wrapper h2,
+
         #cc-list-wrapper h2,
−
         #usecase-list-wrapper h3,
+
         #cc-list-wrapper h3,
−
         #usecase-list-wrapper h4 {
+
         #cc-list-wrapper h4 {
 
             font-family: 'Raleway';
 
             font-family: 'Raleway';
 
             font-weight: 300;
 
             font-weight: 300;
Line 19: Line 19:
 
         }
 
         }
  
−
         #usecase-list-wrapper h1,
+
         #cc-list-wrapper h1,
 
         #usecase-filters h2 {
 
         #usecase-filters h2 {
−
             color: var(--links-cyan);
+
             color: var(--ccl-color);
 
             display: flex;
 
             display: flex;
 
             align-items: center;
 
             align-items: center;
 
         }
 
         }
  
−
         #usecase-list-wrapper h1 svg {
+
         #cc-list-wrapper h1 svg {
 
             height: 2.5em;
 
             height: 2.5em;
 
             width: 2.5em;
 
             width: 2.5em;
−
             fill: var(--links-cyan);
+
             fill: var(--ccl-color);
 
             margin-right: .5em;
 
             margin-right: .5em;
 +
        }
 +
 +
        #cc-list-wrapper h2 {
 +
            margin-bottom: 1em;
 
         }
 
         }
  
Line 44: Line 48:
 
             z-index: 100;
 
             z-index: 100;
 
             padding: 2em;
 
             padding: 2em;
−
            width: 45vw;
 
 
             background: #fff;
 
             background: #fff;
−
             border: 1px solid var(--links-cyan);
+
             border: 1px solid var(--ccl-color);
 
             clip-path: inset(0 0 100% 100%);
 
             clip-path: inset(0 0 100% 100%);
 
             box-shadow: -10px 10px 10px 5px rgb(0 0 0 / 10%);
 
             box-shadow: -10px 10px 10px 5px rgb(0 0 0 / 10%);
 
             transition: all 400ms ease-in-out;
 
             transition: all 400ms ease-in-out;
 +
        }
 +
 +
        @media only screen and (orientation: landscape) {
 +
            #cc-filters {
 +
                width: 45vw;
 +
            }
 
         }
 
         }
  
Line 63: Line 72:
 
             margin-top: -.2em;
 
             margin-top: -.2em;
 
             font-weight: 100;
 
             font-weight: 100;
−
             color: var(--links-cyan);
+
             color: var(--ccl-color);
 
         }
 
         }
  
Line 74: Line 83:
  
 
         .large-button {
 
         .large-button {
−
             border: 1px solid var(--links-cyan);
+
             border: 1px solid var(--ccl-color);
 
             font-size: 1.5em;
 
             font-size: 1.5em;
 
             font-family: 'Open Sans';
 
             font-family: 'Open Sans';
Line 80: Line 89:
 
             margin-bottom: 2em;
 
             margin-bottom: 2em;
 
             padding: 0.3em 0.8em;
 
             padding: 0.3em 0.8em;
−
             color: var(--links-cyan);
+
             color: var(--ccl-color);
 
             background: transparent;
 
             background: transparent;
 
             font-variant: small-caps;
 
             font-variant: small-caps;
Line 88: Line 97:
  
 
         .large-button:hover {
 
         .large-button:hover {
−
             background-color: var(--links-cyan);
+
             background-color: var(--ccl-color);
 
             color: #fff;
 
             color: #fff;
−
        }
 
−
 
−
        #usecases-list-wrapper h2 {
 
−
            margin-bottom: 1em;
 
 
         }
 
         }
  
Line 102: Line 107:
 
         .filter-wrapper button {
 
         .filter-wrapper button {
 
             border: 0 none;
 
             border: 0 none;
−
             color: var(--links-cyan);
+
             color: var(--ccl-color);
 
             background-color: transparent;
 
             background-color: transparent;
 
             font-variant: small-caps;
 
             font-variant: small-caps;
Line 186: Line 191:
  
 
         #tabulator-table.tabulator .tabulator-header .tabulator-col {
 
         #tabulator-table.tabulator .tabulator-header .tabulator-col {
−
             border-bottom: 4px double var(--links-cyan);
+
             border-bottom: 4px double var(--ccl-color);
 
             border-right: 0 none;
 
             border-right: 0 none;
 
             background: transparent;
 
             background: transparent;
Line 205: Line 210:
 
         #tabulator-table.tabulator .tabulator-cell {
 
         #tabulator-table.tabulator .tabulator-cell {
 
             border-right: 0 none;
 
             border-right: 0 none;
−
             border-top: 1px solid var(--links-cyan);
+
             border-top: 1px solid var(--ccl-color);
 
             padding: .5em .5em .5em 0;
 
             padding: .5em .5em .5em 0;
 
         }
 
         }
Line 238: Line 243:
 
         #tabulator-table.tabulator .usecase-title a,
 
         #tabulator-table.tabulator .usecase-title a,
 
         #tabulator-table.tabulator .tabulator-responsive-collapse table a {
 
         #tabulator-table.tabulator .tabulator-responsive-collapse table a {
−
             color: var(--links-cyan);
+
             color: var(--ccl-color);
 
         }
 
         }
 
     </style>
 
     </style>
Line 264: Line 269:
  
 
         const crisisCommsQuery = '[[Category:Crisis Communication]]'
 
         const crisisCommsQuery = '[[Category:Crisis Communication]]'
 +
            + '|limit=500'
 
             + '|?' + PHASE_PROP
 
             + '|?' + PHASE_PROP
 
             + '|?' + TYPE_PROP
 
             + '|?' + TYPE_PROP
Line 271: Line 277:
 
         async function getInstances() {
 
         async function getInstances() {
 
             const response = await fetch(getQueryUrl(crisisCommsQuery)).then(res => res.json());
 
             const response = await fetch(getQueryUrl(crisisCommsQuery)).then(res => res.json());
−
 
−
            console.log(response)
 
  
 
             return Object.keys(response.query.results).map(pageTitle => {
 
             return Object.keys(response.query.results).map(pageTitle => {
Line 282: Line 286:
 
                 crisisComm.url = result.fullurl;
 
                 crisisComm.url = result.fullurl;
  
 +
                crisisComm[TYPE_PROP] = result.printouts[TYPE_PROP][0];
 
                 crisisComm[PHASE_PROP] = result.printouts[PHASE_PROP].map(value => value.fulltext);
 
                 crisisComm[PHASE_PROP] = result.printouts[PHASE_PROP].map(value => value.fulltext);
−
                crisisComm[TYPE_PROP] = result.printouts[TYPE_PROP].map(value => value.fulltext);
 
 
                 crisisComm[SCENARIO_PROP] = result.printouts[SCENARIO_PROP].map(value => value.fulltext);
 
                 crisisComm[SCENARIO_PROP] = result.printouts[SCENARIO_PROP].map(value => value.fulltext);
 
                 crisisComm[LANG_PROP] = result.printouts[LANG_PROP].map(value => value.fulltext);
 
                 crisisComm[LANG_PROP] = result.printouts[LANG_PROP].map(value => value.fulltext);
Line 334: Line 338:
 
                 : true;
 
                 : true;
 
             const scenarioCheck = filterState.scenario
 
             const scenarioCheck = filterState.scenario
−
                 ? filterState.scenario.every(event => crisisComm[SCENARIO_PROP].includes(event))
+
                 ? crisisComm[SCENARIO_PROP].some(event => filterState.scenario.includes(event))
 
                 : true;
 
                 : true;
 
             const phaseCheck = filterState.phases
 
             const phaseCheck = filterState.phases
Line 353: Line 357:
 
             const usedScenarios = new Set();
 
             const usedScenarios = new Set();
 
             for (const crisisComm of crisisComms) {
 
             for (const crisisComm of crisisComms) {
−
                 crisisComm[TYPE_PROP].forEach(type => usedTypes.add(type));
+
                 usedTypes.add(crisisComm[TYPE_PROP]);
 
                 crisisComm[LANG_PROP].forEach(lang => usedLanguages.add(lang));
 
                 crisisComm[LANG_PROP].forEach(lang => usedLanguages.add(lang));
 
                 crisisComm[SCENARIO_PROP].forEach(scenario => usedScenarios.add(scenario));
 
                 crisisComm[SCENARIO_PROP].forEach(scenario => usedScenarios.add(scenario));
Line 388: Line 392:
 
             }, '');
 
             }, '');
 
             document.getElementById('phases-filter').innerHTML = phaseHtml;
 
             document.getElementById('phases-filter').innerHTML = phaseHtml;
 +
 +
            let langHtml = languageOptions.reduce((acc, curr) => {
 +
                const identifier = escapeAttr(curr);
 +
                return acc
 +
                    + '<div><input type="checkbox" id="language-filter-' + identifier
 +
                    + '" value="' + curr + '">'
 +
                    + '<label for="language-filter-' + identifier + '">' + curr + '</label></div>'
 +
            }, '');
 +
            document.getElementById('language-filter').innerHTML = langHtml;
  
 
             const tabulator = new Tabulator('#tabulator-table', {
 
             const tabulator = new Tabulator('#tabulator-table', {
Line 399: Line 412:
 
                         cssClass: 'usecase-title',
 
                         cssClass: 'usecase-title',
 
                         formatter: cell => '<a href="' + cell.getData().url + '">' + cell.getValue() + '</a>',
 
                         formatter: cell => '<a href="' + cell.getData().url + '">' + cell.getValue() + '</a>',
−
                         minWidth: '800px'
+
                         minWidth: '1000px'
 
                     },
 
                     },
 
                     {
 
                     {
Line 409: Line 422:
 
                         title: 'Phase',
 
                         title: 'Phase',
 
                         field: PHASE_PROP,
 
                         field: PHASE_PROP,
 +
                        formatter: cell => cell.getValue().join(', ')
 +
                    },
 +
                    {
 +
                        title: 'Language',
 +
                        field: LANG_PROP,
 
                         formatter: cell => cell.getValue().join(', ')
 
                         formatter: cell => cell.getValue().join(', ')
 
                     }
 
                     }
Line 565: Line 583:
 
     </script>
 
     </script>
  
−
     <div id="usecase-list-wrapper">
+
     <div id="cc-list-wrapper">
 
         <h1>
 
         <h1>
 
             <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>
+
                 <path
−
                    <clipPath id="uc">
+
                     d="M78.6 17.005H17.4a3.436 3.436 0 0 0-3.4 3.4v41.312a3.367 3.367 0 0 0 3.34 3.4H54.8l13.6 13.9v-13.8h10.2a3.436 3.436 0 0 0 3.4-3.4V20.506a3.463 3.463 0 0 0-3.4-3.501ZM80 61.817c-.02.765-.64 1.38-1.4 1.4H66.4v10.9L56.23 63.72l-.59-.6H17.4a1.37 1.37 0 0 1-1.4-1.339V20.406c.02-.765.64-1.38 1.4-1.4h61.2c.8.03 1.43.7 1.4 1.5Z" />
−
                        <path d="M592 312h96v96h-96z" />
+
                 <path d="M46.88 27h2.25v21h-2.25ZM50 53.25c0 1.105-.9 2-2 2s-2-.895-2-2 .9-2 2-2 2 .895 2 2Z" />
−
                    </clipPath>
 
−
                </defs>
 
−
                <g clip-path="url(#uc)" transform="translate(-592 -312)">
 
−
                     <path d="m648.783 351.102 1.99-.204 2.359 23.001-1.989.204Z" />
 
−
                    <path
 
−
                        d="M674 387h-6v-5h-8.093l-3.531-36.291A2.99 2.99 0 0 0 653.39 343h-26.658a2.991 2.991 0 0 0-2.985 2.7L620.1 382H612v5h-6v7h68Zm-48.263-41.1a1 1 0 0 1 .995-.9h26.658a.999.999 0 0 1 1 .9l3.51 36.1h-35.795ZM672 392h-64v-3h6v-5h52v5h6ZM639 326h2v12h-2ZM606 355h10v2h-10ZM664 355h10v2h-10ZM611.293 332.707l1.414-1.414 8 8-1.414 1.414ZM659.293 339.293l8-8 1.414 1.414-8 8Z" />
 
−
                 </g>
 
 
             </svg>
 
             </svg>
 
             <div>
 
             <div>
−
                 <div>Use Cases</div>
+
                 <div>Crisis Communication</div>
 
                 <div style="font-size:small; letter-spacing:.03em; margin-left: .35em;">Social Media and Crowdsourcing
 
                 <div style="font-size:small; letter-spacing:.03em; margin-left: .35em;">Social Media and Crowdsourcing
 
                     Library</div>
 
                     Library</div>
 
             </div>
 
             </div>
 
         </h1>
 
         </h1>
−
 
+
         <div id="intro">
−
         <!-- <div id="intro">
+
             <p>
−
             <p>The overall goal of the Social Media and Crowdsourcing (SMCS) Use Cases Library is to collect experiences
+
                The best way to cope with a disaster is an efficient crisis communication before, during and after such
−
                 and use cases of how SMCS have been used or can be used in real world. This enables the opportunity to
+
                situation. Risk awareness, preparedness and appropriate behaviour during and after a disaster is key to mitigate
−
                 give disaster management organisations a concrete indication of how they can use SMCS in practice.</p>
+
                its effects on people. The purpose of this library is to ease communication with the public via Social Media
−
         </div> -->
+
                text messages taken from trustful resources.
 +
       
 +
            </p>
 +
            <p>
 +
                The user can narrow down the results via filters and may either use (part of) the content and/or provide the
 +
                 link to the source via the own Social Media account. The use of the translation tools available in the various
 +
                 browsers allow for easy transfer of the texts into own messages.
 +
            </p>
 +
         </div>
  
 
         <!-- FILTERS -->
 
         <!-- FILTERS -->
Line 606: Line 625:
 
             <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;">
 
             <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;">
 
                 <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2>
 
                 <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2>
−
                 <div><a href="/index.php/Form:Use_Cases" style="font-size: 1.5em; font-variant:small-caps; color: var(--links-cyan)">Add new use case</a></div>
+
                 <div><a href="/index.php/Form:Crisis_Communication" style="font-size: 1.5em; font-variant:small-caps; color: var(--ccl-color)">Add new Crisis Communication</a></div>
 
             </div>
 
             </div>
  
Line 641: Line 660:
 
                         </div>
 
                         </div>
 
                         <div class="filter-content" id="type-filter"></div>
 
                         <div class="filter-content" id="type-filter"></div>
−
                    </div>
 
−
                </div>
 
−
 
−
                <div class="filter-wrapper">
 
−
                    <h4 class="filter-toggle">Language <div class="plus icon"></div></h4>
 
−
                    <div class="filter-container">
 
−
                        <div class="filter-button-wrapper">
 
−
                            <button type="button" onclick="selectAll('#language-filter')">Select all</button> |
 
−
                            <button type="button" onclick="deselectAll('#language-filter')">Clear all</button>
 
−
                        </div>
 
−
                        <div class="filter-content" id="language-filter"></div>
 
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
Line 674: Line 682:
 
                         </div>
 
                         </div>
 
                         <div class="filter-content" id="phases-filter"></div>
 
                         <div class="filter-content" id="phases-filter"></div>
 +
                    </div>
 +
                </div>
 +
 +
                <div class="filter-wrapper">
 +
                    <h4 class="filter-toggle">Language <div class="plus icon"></div></h4>
 +
                    <div class="filter-container">
 +
                        <div class="filter-button-wrapper">
 +
                            <button type="button" onclick="selectAll('#language-filter')">Select all</button> |
 +
                            <button type="button" onclick="deselectAll('#language-filter')">Clear all</button>
 +
                        </div>
 +
                        <div class="filter-content" id="language-filter"></div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>

Revision as of 15:49, 6 May 2024

Current version of the Crisis Communication Library.
Currently in use – do not modify!


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