Difference between revisions of "Widget:Compass"
From LINKS Community Center
| Line 5: | Line 5: | ||
:root { | :root { | ||
--compass-color: #C31980; | --compass-color: #C31980; | ||
| + | --handbook-color: #C35C19; | ||
| + | --safe-color: #80C319; | ||
} | } | ||
| Line 166: | Line 168: | ||
.choice.handbook { | .choice.handbook { | ||
| − | color: | + | color: var(--handbook-color); |
} | } | ||
.choice.safe { | .choice.safe { | ||
| − | color: | + | color: var(--safe-color); |
} | } | ||
| Line 189: | Line 191: | ||
.choice.handbook:hover .button { | .choice.handbook:hover .button { | ||
| − | background-color: | + | background-color: var(--handbook-color); |
color: #fff; | color: #fff; | ||
} | } | ||
.choice.safe:hover .button { | .choice.safe:hover .button { | ||
| − | background-color: | + | background-color: var(--safe-color); |
color: #fff; | color: #fff; | ||
} | } | ||
| Line 210: | Line 212: | ||
<div class="answer"> | <div class="answer"> | ||
<div class="answer-wrapper"> | <div class="answer-wrapper"> | ||
| − | <div class="choice case"> | + | <div class="choice case" id="q1-case"> |
<div class="button">Use Cases</div> | <div class="button">Use Cases</div> | ||
<div class="desc"> | <div class="desc"> | ||
| Line 219: | Line 221: | ||
</div> | </div> | ||
</div> | </div> | ||
| − | <div class="choice guide"> | + | <div class="choice guide" id="q1-guide"> |
<div class="button">Guidelines</div> | <div class="button">Guidelines</div> | ||
<div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, | <div class="desc">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, | ||
| Line 232: | Line 234: | ||
<div class="answer"> | <div class="answer"> | ||
<div class="answer-wrapper"> | <div class="answer-wrapper"> | ||
| − | <div class="choice tech"> | + | <div class="choice tech" id="q2-tech"> |
<div class="button">Technologies</div> | <div class="button">Technologies</div> | ||
<div class="desc"> | <div class="desc"> | ||
| Line 562: | Line 564: | ||
</div> | </div> | ||
<script> | <script> | ||
| + | // Attach plus icon to the title of expandable blocks. | ||
document.querySelectorAll('.theme > h2, .subtheme > h3').forEach(el => { | document.querySelectorAll('.theme > h2, .subtheme > h3').forEach(el => { | ||
const icon = document.createElement('div'); | const icon = document.createElement('div'); | ||
| Line 568: | Line 571: | ||
}); | }); | ||
| + | // Set up toggles for expandable blocks. | ||
document.getElementById('cmp-container').addEventListener('click', event => { | document.getElementById('cmp-container').addEventListener('click', event => { | ||
if (event.target.tagName === 'H2') { | if (event.target.tagName === 'H2') { | ||
| Line 581: | Line 585: | ||
} | } | ||
}); | }); | ||
| + | |||
| + | 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 | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | document.getElementById('cmp-container').addEventListener('click', event => { | ||
| + | if (!event.target.classList.contains('choice')) return; | ||
| + | |||
| + | const id = event.target.id; | ||
| + | console.log('element id=' + id); | ||
| + | console.log('actions', actions[id].filter) | ||
| + | }, { passive: true }); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||
Revision as of 13:27, 24 November 2022
Development version of the Compass.
Not ready for production!