Difference between revisions of "Widget:DCTList"
From LINKS Community Center
Line 1: | Line 1: | ||
− | <noinclude>Development | + | <noinclude>Development version of the Compass.<br><strong style="color:red;">Not ready for production!</strong> |
+ | </noinclude> | ||
<includeonly> | <includeonly> | ||
− | |||
− | |||
− | |||
<style> | <style> | ||
− | + | :root { | |
− | + | --compass-color: #C31980; | |
− | + | --handbook-color: #C35C19; | |
+ | --safe-color: #80C319; | ||
} | } | ||
− | + | .plus.icon { | |
− | + | color: currentColor; | |
− | + | display: inline-block; | |
− | + | position: relative; | |
− | + | top: -.3em; | |
− | + | margin-left: .5em; | |
− | |||
} | } | ||
− | + | .plus.icon::before { | |
− | + | content: ''; | |
− | + | position: absolute; | |
− | + | width: 1em; | |
− | + | height: 1px; | |
− | + | background-color: currentColor; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | width: | ||
− | |||
− | |||
} | } | ||
− | + | .plus.icon::after { | |
− | + | content: ''; | |
position: absolute; | position: absolute; | ||
− | + | width: 1em; | |
− | + | height: 1px; | |
− | + | background-color: currentColor; | |
− | + | transform: rotate(90deg); | |
− | width: | + | transition: all 0.4s ease; |
− | |||
− | |||
− | |||
− | |||
− | transition: all | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | h2.opened .plus.icon::after, | |
− | + | h3.opened .plus.icon::after { | |
− | + | transform: rotate(0); | |
− | |||
− | |||
} | } | ||
− | + | #cmp-container { | |
− | |||
− | |||
font-family: 'Open Sans'; | font-family: 'Open Sans'; | ||
− | font- | + | font-size: 120%; |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | #cmp-container h1, | |
− | + | #cmp-container h2, | |
− | + | #cmp-container h3 { | |
+ | font-family: 'Raleway'; | ||
+ | font-weight: 300; | ||
+ | letter-spacing: .06em; | ||
+ | position: relative; | ||
} | } | ||
− | # | + | #cmp-container h1 { |
− | + | letter-spacing: .06em; | |
} | } | ||
− | + | #cmp-container h2 { | |
− | margin-bottom: | + | margin-top: 2em; |
+ | padding-bottom: 5px; | ||
+ | color: var(--compass-color); | ||
+ | cursor: pointer; | ||
} | } | ||
− | + | #cmp-container h2::before { | |
− | + | content: ''; | |
− | + | display: block; | |
− | background-color: | + | 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; | cursor: pointer; | ||
} | } | ||
− | . | + | .subtheme { |
− | + | margin-bottom: 2em; | |
} | } | ||
− | . | + | .question { |
font-size: 1.2em; | 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> | </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 class="question" data-aspect="Socio-/Technical"> | ||
+ | How to collect and analyse information from citizens? | ||
− | + | <div class="answer"> | |
+ | <div class="answer-wrapper"> | ||
+ | <div class="choice tech" id="q2-tech"> | ||
+ | <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 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 class="answer-wrapper"> | |
+ | <div class="choice case" id="q3-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 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 class="question" data-aspect="Socio-/Technical"> | ||
+ | How can you mobilise the citizens? | ||
− | + | <div class="answer"> | |
− | + | <div class="answer-wrapper"> | |
− | + | <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 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="answer-wrapper"> | ||
+ | <div class="choice guide" id="q5-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="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> | ||
+ | <div class="question" data-aspect="Socio-/Technical"> | ||
+ | How can you mobilise the volunteers? | ||
− | + | <div class="answer"> | |
− | + | <div class="answer-wrapper"> | |
− | + | <div class="choice tech" id="q6-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="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> | ||
+ | </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="answer-wrapper"> | |
− | + | <div class="choice case" id="q7-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="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> | ||
+ | <div class="question" data-aspect="Socio-/Technical"> | ||
+ | How can you make your information accessible? | ||
− | + | <div class="answer"> | |
− | + | <div class="answer-wrapper"> | |
− | + | <div class="choice tech" id="q8-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 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> | ||
+ | </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 class="answer-wrapper"> | |
− | + | <div class="choice case" id="q9-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 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 class="question" data-aspect="Socio-/Technical"> | ||
+ | How can you target your communication? | ||
− | + | <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 class="subtheme"> | ||
+ | <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 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> | |
− | + | <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'); | |
− | |||
− | |||
− | if ( | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
+ | }); | ||
− | + | 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> | </script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</includeonly> | </includeonly> |
Revision as of 16:02, 24 November 2022
Development version of the Compass.
Not ready for production!