kimendisch/sbgg.jetzt
kimendisch
/
sbgg.jetzt
1
3
Fork 1
Code Issues 7 Pull Requests Projects Activity

✨ add link copy buttons to important headings (fix #39)

This commit is contained in:
DrMaxNix 2024-02-01 19:04:28 +01:00
parent 99ec44bb45
commit ff1986bcae
5 changed files with 184 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
page/start/copylink.js Normal file
View File

@ -0,0 +1,92 @@
window.onload = function(){
// REGISTER ONCLICK HANDLERS //
// iterate over all copylink buttons
let copylink_button_list = document.getElementsByClassName("copylink");
for(let one_copylink_button of copylink_button_list){
// register onclick function
one_copylink_button.onclick = function(){ copylink_click(this) };
// add descriptive title
one_copylink_button.title = copylink_hint_text;
}
}
/**
* CALLBACK: Copylink was clicked.
*
* @param self Copylink button element.
*/
async function copylink_click(self){
let success = true;
// RETRIEVE SECTION ID //
// try to find
let section_id = copylink_section_id(self);
// check whether search was successful
if(section_id === null) success = false;
// SAVE SECTION LINK TO CLIPBOARD //
if(success){
// build url
let section_url = new URL("#" + section_id, window.location.href);
// save to clipboard
try {
await navigator.clipboard.writeText(section_url);
} catch (error){
success = false;
}
}
// FEEDBACK //
if(success){
// positive feedback
self.classList.add("ti-check", "feedback-positive");
self.classList.remove("ti-link");
setTimeout(function(){
self.classList.add("ti-link");
self.classList.remove("ti-check", "feedback-positive");
}, 2500);
return;
}
// negative feedback
self.classList.add("ti-x", "feedback-negative");
self.classList.remove("ti-link");
setTimeout(function(){
self.classList.add("ti-link");
self.classList.remove("ti-x", "feedback-negative");
}, 2500);
}
/**
* HELPER: Find closest section id.
*
* @param self Base element.
*
* @return `null`: Unable to find a section id
* string: Closest section id to copylink button.
*/
function copylink_section_id(self){
// CHECK FOR ID ATTRIBUTE //
if(self.id !== undefined && self.id !== null && self.id.length > 0){
// found an id
return self.id;
}
// STOP SEARCHING //
// check whether element has parent
if(self.parentElement === null || self.parentElement === undefined) return null;
// CONTINUE SEARCHING //
return copylink_section_id(self.parentElement);
}

10
page/start/copylink_dict.js.php Normal file
View File

@ -0,0 +1,10 @@
<?php
declare(strict_types = 1);
namespace Kimendisch\Sbgg_Jetzt;
// MAKE TRANSLATION DICT AVAILABLE VIA JAVASCRIPT //
global $kimendisch_sbgg_jetzt_dict;
// `copylink_hint_text`
echo("let copylink_hint_text = " . json_encode($kimendisch_sbgg_jetzt_dict->get("copylink_hint_text")) . ";");
?>

35
page/start/index.php
View File

@ -36,6 +36,10 @@
$dict = new Lang_Dict($lang);
require("./page/strings.php");
// make available to `eval`-ed scripts
global $kimendisch_sbgg_jetzt_dict;
$kimendisch_sbgg_jetzt_dict = $dict;
// PAGE INIT //
Page::start();
@ -54,6 +58,8 @@
Page::$head["analytics"] = '<script defer data-domain="sbgg.jetzt" src="https://analytics.tjdev.de/js/script.js"></script>';
Page::css(__DIR__ . "/style.css");
Page::js(__DIR__ . "/copylink_dict.js.php", eval: true);
Page::js(__DIR__ . "/copylink.js");
Page::font("ubuntu");
Page::font("tabler");
@ -73,7 +79,7 @@
<div class="section">
<div id="why" class="content">
<div class="box">
<span class="title"><?= $dict->get("why_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("why_title") ?></span>
<?php
$why_text = $dict->get("why_text");
@ -89,6 +95,7 @@
<div class="header">
<span class="icon ti ti-clock"></span>
<span class="text"><?= $dict->get("timeline_title") ?></span>
<span class="copylink ti ti-link"></span>
</div>
<div class="content">
<div class="timeline">
@ -104,7 +111,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><?= $dict->get("timeline_koalitionsvertrag_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_koalitionsvertrag_title") ?></span>
<?php
$timeline_koalitionsvertrag_text = $dict->get("timeline_koalitionsvertrag_text");
@ -134,7 +141,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><?= $dict->get("timeline_eckpunktepapier_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_eckpunktepapier_title") ?></span>
<?php
$timeline_eckpunktepapier_text = $dict->get("timeline_eckpunktepapier_text");
@ -164,7 +171,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><?= $dict->get("timeline_referentenentwurf_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_referentenentwurf_title") ?></span>
<?php
$timeline_referentenentwurf_text = $dict->get("timeline_referentenentwurf_text");
@ -198,7 +205,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><?= $dict->get("timeline_regierungsentwurf_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_regierungsentwurf_title") ?></span>
<?php
$timeline_regierungsentwurf_text = $dict->get("timeline_regierungsentwurf_text");
@ -228,7 +235,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><?= $dict->get("timeline_bundesrat_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_bundesrat_title") ?></span>
<?php
$timeline_bundesrat_text = $dict->get("timeline_bundesrat_text");
@ -262,7 +269,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><?= $dict->get("timeline_lesung_1_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_lesung_1_title") ?></span>
<?php
$timeline_lesung_1_text = $dict->get("timeline_lesung_1_text");
@ -292,7 +299,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><?= $dict->get("timeline_ausschuss_anhoerung_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_ausschuss_anhoerung_title") ?></span>
<?php
$timeline_ausschuss_anhoerung_text = $dict->get("timeline_ausschuss_anhoerung_text");
@ -322,7 +329,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><?= $dict->get("timeline_lesung_2_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_lesung_2_title") ?></span>
<?php
$timeline_lesung_2_text = $dict->get("timeline_lesung_2_text");
@ -345,7 +352,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><?= $dict->get("timeline_lesung_3_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_lesung_3_title") ?></span>
<?php
$timeline_lesung_3_text = $dict->get("timeline_lesung_3_text");
@ -368,7 +375,7 @@
<span class="extra"><i class="ti ti-calendar"></i><?= $timeline_date ?></span>
<?php } ?>
<span class="title"><?= $dict->get("timeline_inkrafttreten_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("timeline_inkrafttreten_title") ?></span>
<?php
$timeline_inkrafttreten_text = $dict->get("timeline_inkrafttreten_text");
@ -386,16 +393,17 @@
<div class="header">
<span class="icon ti ti-bell"></span>
<span class="text"><?= $dict->get("news_title") ?></span>
<span class="copylink ti ti-link"></span>
</div>
<div class="content rows">
<div id="news-newsletter" class="box">
<span class="title"><?= $dict->get("news_newsletter_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("news_newsletter_title") ?></span>
</div>
<div id="news-social-media" class="box">
<span class="title"><?= $dict->get("news_social_media_title") ?></span>
<span class="title"><span class="copylink ti ti-link"></span><?= $dict->get("news_social_media_title") ?></span>
<div class="button-list">
<a href="https://www.instagram.com/sbgg.jetzt" target="_blank" class="button">
@ -415,6 +423,7 @@
<div class="header">
<span class="icon ti ti-heart"></span>
<span class="text"><?= $dict->get("about_title") ?></span>
<span class="copylink ti ti-link"></span>
</div>
<div class="content">
<div class="box">

52
page/start/style.css
View File

@ -181,11 +181,19 @@ span.inline {
/* SECTIONS */
.section {
display: flex;
flex-direction: column;
width: 100%;
}
.section > .header {
display: flex;
align-self: flex-start;
position: relative;
padding-right: 0.5rem;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
@ -242,6 +250,10 @@ span.inline {
gap: 0.5rem;
}
.box .title {
position: relative;
left: -0.5rem;
padding-left: 0.5rem;
color: var(--theme);
font-size: 1.5rem;
}
@ -457,6 +469,44 @@ span.inline {
/* COPYLINKS */
.copylink {
position: absolute;
padding: 0.5rem;
color: #0000;
}
.title .copylink {
left: -1.3rem;
padding-right: 0.2rem;
}
.header .copylink {
right: -1.3rem;
padding-left: 0.2rem;
}
*:hover > .copylink {
color: var(--color-gray);
}
.copylink:hover {
color: var(--color-white);
cursor: pointer;
}
.copylink.feedback-negative, .copylink.feedback-positive {
opacity: 0;
transition: opacity 1s 1.5s linear;
}
.copylink.feedback-negative {
color: var(--color-red);
}
.copylink.feedback-positive {
color: var(--color-green);
}
/* FOOTER */
.footer {
width: 100%;

9
page/strings.php
View File

@ -428,6 +428,15 @@
"link_privacy_policy" => [
"de" => "https://www.tjdev.de/datenschutz",
"en" => "https://www.tjdev.de/privacy"
],
"copylink_hint_text" => [
"de" => "Bereichs-Link kopieren",
"en" => "Copy section link"
]
]);
?>