Difference between revisions of "Widget:Homepage"
From LINKS Community Center
| Line 137: | Line 137: | ||
#hp-changes { border-top: var(--hp-border); } | #hp-changes { border-top: var(--hp-border); } | ||
} | } | ||
| + | |||
| + | /* SNIPPETS */ | ||
| + | .snippet { display: inline-block; } | ||
</style> | </style> | ||
| Line 144: | Line 147: | ||
const searchString = document.getElementById('hp-search-input').value; | const searchString = document.getElementById('hp-search-input').value; | ||
window.location.assign('/index.php?search=' + encodeURIComponent(searchString) + '&title=Special%3ASearch&profile=default&fulltext=1'); | window.location.assign('/index.php?search=' + encodeURIComponent(searchString) + '&title=Special%3ASearch&profile=default&fulltext=1'); | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | <script> | ||
| + | const maxAmount = 6; // maximum number of snippets | ||
| + | const snippets = [ | ||
| + | { | ||
| + | "title": "Are you overwhelmed by too many social media technologies?", | ||
| + | "body": "Visit our Technologies Library to find the technology you need.", | ||
| + | "action": "/index.php/List_of_Disaster_Community_Technologies", | ||
| + | "product": "TL", | ||
| + | }, | ||
| + | { | ||
| + | "title": "Do you want to be prepared when disaster strikes?", | ||
| + | "body": "Learn from over 30 use cases about social media and crowdsourcing.", | ||
| + | "action": "/index.php/List_of_Use_Cases", | ||
| + | "product": "UCL", | ||
| + | }, | ||
| + | ]; | ||
| + | const container = document.getElementById('snippets'); | ||
| + | |||
| + | // Fisher-Yates shuffling algorithm | ||
| + | const shuffleArray = (array) => { | ||
| + | for (let i = array.length - 1; i > 0; i--) { | ||
| + | const j = Math.floor(Math.random() * (i + 1)); | ||
| + | [array[i], array[j]] = [array[j], array[i]]; | ||
| + | } | ||
| + | return array; | ||
| + | }; | ||
| + | |||
| + | const indices = Array.from({ length: snippets.length }, (_, index) => index); | ||
| + | |||
| + | // Array of randomly selected snippets (by index) | ||
| + | // TODO: Make sure there is at least one snippet per product. | ||
| + | let selection = shuffleArray(indices); | ||
| + | if (selection.length > maxAmount) selection = selection.slice(0, maxAmount); | ||
| + | |||
| + | for (const index of selection) { | ||
| + | const snippet = snippets[index]; | ||
| + | let el = '<a class="snippet ' + snippet.product + '" href="' + snippet.action + '">'; | ||
| + | el += '<div class="snippet-header">' + snippet.title + '</div>'; | ||
| + | el += '<div class="snippet-body"'> + snippet.body + '</div>'; | ||
| + | el += '</a>'; | ||
| + | container.innerHTML += el; | ||
} | } | ||
</script> | </script> | ||
| Line 171: | Line 218: | ||
</div> | </div> | ||
</div> | </div> | ||
| + | |||
| + | <div id="snippets" style="display: none"></div> | ||
<div id="hp-main"> | <div id="hp-main"> | ||
Revision as of 15:50, 15 October 2023
Second version of the LINKS Community Center homepage.
Do not modify!