Difference between revisions of "Widget:CrisisCommunicationList"
From LINKS Community Center
(16 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> | ||
− | # | + | #cc-list-wrapper { |
font-family: 'Open Sans'; | font-family: 'Open Sans'; | ||
margin-top: 4em; | margin-top: 4em; | ||
} | } | ||
− | # | + | #cc-list-wrapper h1, |
− | # | + | #cc-list-wrapper h2, |
− | # | + | #cc-list-wrapper h3, |
− | # | + | #cc-list-wrapper h4 { |
font-family: 'Raleway'; | font-family: 'Raleway'; | ||
font-weight: 300; | font-weight: 300; | ||
Line 19: | Line 19: | ||
} | } | ||
− | # | + | #cc-list-wrapper h1, |
#usecase-filters h2 { | #usecase-filters h2 { | ||
− | color: var(-- | + | color: var(--ccl-color); |
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
} | } | ||
− | # | + | #cc-list-wrapper h1 svg { |
height: 2.5em; | height: 2.5em; | ||
width: 2.5em; | width: 2.5em; | ||
− | fill: var(-- | + | 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; | ||
− | |||
background: #fff; | background: #fff; | ||
− | border: 1px solid var(-- | + | 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(-- | + | color: var(--ccl-color); |
} | } | ||
Line 74: | Line 83: | ||
.large-button { | .large-button { | ||
− | border: 1px solid var(-- | + | 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(-- | + | 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(-- | + | background-color: var(--ccl-color); |
color: #fff; | color: #fff; | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 102: | Line 107: | ||
.filter-wrapper button { | .filter-wrapper button { | ||
border: 0 none; | border: 0 none; | ||
− | color: var(-- | + | 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(-- | + | 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(-- | + | 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(-- | + | 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 280: | 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[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 332: | Line 338: | ||
: true; | : true; | ||
const scenarioCheck = filterState.scenario | const scenarioCheck = filterState.scenario | ||
− | ? | + | ? crisisComm[SCENARIO_PROP].some(event => filterState.scenario.includes(event)) |
: true; | : true; | ||
const phaseCheck = filterState.phases | const phaseCheck = filterState.phases | ||
Line 351: | Line 357: | ||
const usedScenarios = new Set(); | const usedScenarios = new Set(); | ||
for (const crisisComm of crisisComms) { | for (const crisisComm of crisisComms) { | ||
− | crisisComm[TYPE_PROP] | + | 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 386: | 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 397: | 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: ' | + | minWidth: '1000px' |
}, | }, | ||
{ | { | ||
Line 407: | 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 563: | Line 583: | ||
</script> | </script> | ||
− | <div id=" | + | <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"> | ||
− | < | + | <path |
− | + | 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="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" /> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | </ | ||
</svg> | </svg> | ||
<div> | <div> | ||
− | <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"> | |
− | + | <p> | |
− | <p>The | + | The best way to cope with a disaster is an efficient crisis communication before, during and after such |
− | + | situation. Risk awareness, preparedness and appropriate behaviour during and after a disaster is key to mitigate | |
− | + | 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 604: | 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: | + | <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 639: | Line 660: | ||
</div> | </div> | ||
<div class="filter-content" id="type-filter"></div> | <div class="filter-content" id="type-filter"></div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 672: | 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!