${candidate.candidate_election_group_name}
@@ -434,54 +261,60 @@ function submitForm(e) {
// Return phone number to call
function formatNumberLink(phoneNo) {
const phoneNoStripped = phoneNo.replace(/\D/g, '');
-
- let formatedNo = phoneNoStripped;
- if (phoneNoStripped.startsWith('49')) {
- // has leading 49 - countrycode
- formatedNo = `00${phoneNoStripped}`;
- } else if (phoneNoStripped.startsWith('0')) {
- if (phoneNoStripped.startsWith('000')) {
- // has three leading zeros - countrycode with error?
- formatedNo = phoneNoStripped.substr(1);
- } else if (phoneNoStripped.startsWith('00')) {
- // has two leading zeros - countrycode
- // Do nothing
- } else {
- // has leading zero
- formatedNo = `0049${phoneNoStripped.substr(1)}`;
+ if (phoneNoStripped !== "") {
+ let formatedNo = phoneNoStripped;
+ if (phoneNoStripped.startsWith('49')) {
+ // has leading 49 - countrycode
+ formatedNo = `00${phoneNoStripped}`;
+ } else if (phoneNoStripped.startsWith('0')) {
+ if (phoneNoStripped.startsWith('000')) {
+ // has three leading zeros - countrycode with error?
+ formatedNo = phoneNoStripped.substr(1);
+ } else if (phoneNoStripped.startsWith('00')) {
+ // has two leading zeros - countrycode
+ // Do nothing
+ } else {
+ // has leading zero
+ formatedNo = `0049${phoneNoStripped.substr(1)}`;
+ }
}
+ return formatedNo;
}
- return formatedNo;
+ return phoneNo;
}
// Return phone number to show on website
function formatNumberOutput(phoneNo) {
const allowedChars = /[0-9\-\/\s]/g;
- const phoneNoStripped = phoneNo.match(allowedChars).join('');
- let formatedNo = phoneNoStripped;
-
- if (phoneNoStripped.startsWith('49')) {
- // has leading 49 - countrycode
- formatedNo = `+${phoneNoStripped}`;
- } else if (phoneNoStripped.startsWith('0')) {
- if (phoneNoStripped.startsWith('000')) {
- // has three leading zeros - countrycode with error?
- formatedNo = `+${phoneNoStripped.substr(3)}`;
- } else if (phoneNoStripped.startsWith('00')) {
- // has two leading zeros - countrycode
- formatedNo = `+${phoneNoStripped.substr(2)}`;
- } else {
- // has leading zero
- formatedNo = `+49 ${phoneNoStripped.substr(1)}`;
+ if (phoneNo.match(allowedChars) !== null) {
+ const phoneNoStripped = phoneNo.match(allowedChars).join('');
+ let formatedNo = phoneNoStripped;
+
+ if (phoneNoStripped.startsWith('49')) {
+ // has leading 49 - countrycode
+ formatedNo = `+${phoneNoStripped}`;
+ } else if (phoneNoStripped.startsWith('0')) {
+ if (phoneNoStripped.startsWith('000')) {
+ // has three leading zeros - countrycode with error?
+ formatedNo = `+${phoneNoStripped.substr(3)}`;
+ } else if (phoneNoStripped.startsWith('00')) {
+ // has two leading zeros - countrycode
+ formatedNo = `+${phoneNoStripped.substr(2, 2)} ${phoneNoStripped.substr(4)}`;
+
+ } else {
+ // has leading zero
+ formatedNo = `+49 ${phoneNoStripped.substr(1)}`;
+ }
}
- }
- // Überprüfe, ob nach "+49" ein Leerzeichen folgt, falls nicht, füge es hinzu
- if (formatedNo.startsWith('+49') && !formatedNo.includes(' ', 3)) {
- formatedNo = `${formatedNo.slice(0, 3)} ${formatedNo.slice(3)}`;
- }
+ // Überprüfe, ob nach "+49" ein Leerzeichen folgt, falls nicht, füge es hinzu
+ if (formatedNo.startsWith('+49') && !formatedNo.includes(' ', 3)) {
+ formatedNo = `${formatedNo.slice(0, 3)} ${formatedNo.slice(3)}`;
+ }
- return formatedNo;
+ return formatedNo;
+ }
+ return phoneNo;
}
// STEP 2B: CLICK BADGE (RELOAD SEARCH)
@@ -500,4 +333,220 @@ function badgeClick(e) {
searchElement.value = "";
}
submitForm();
-}
\ No newline at end of file
+}
+
+// STEP 3: LOAD DETAIL PAGE
+function showDetailPage(e, ihkIdValue, cValue) {
+ let electionDetail = document.querySelector(".election-detail"),
+ electionDetailText = electionDetail.querySelector('.election-detail--text'),
+ electionDetailVideo = electionDetail.querySelector('.election-detail--video'),
+ electionDetailInfo = electionDetail.querySelector('.election-detail--info'),
+ htmlText = '',
+ htmlVideo = '',
+ htmlInfo = '',
+ staticElectionOverviewElement = document.getElementById("static-election-overview"),
+ staticElectionDetailElement = document.getElementById("static-election-detail");
+
+ fetch("https://ihk-wahl.info/candidate?ihk_id=" + ihkIdValue + "&candidate=" + cValue)
+ .then(response => {
+ if (!response.ok) {
+ throw new Error('Network response was not ok');
+ }
+ return response.json();
+ })
+ .then(data => {
+ console.log(data);
+ // Build the detail page for the candidate
+
+ htmlText += data.img_path ? `
+
+ ` : '';
+
+ htmlText += '
';
+
+ htmlText += (data.first_name && data.last_name) ? `
+
${data.first_name} ${data.last_name}
+ ` : '';
+
+ htmlText += data.position ? `
+
${data.position}
+ ` : '';
+
+ htmlText += data.election_statement ? `
+
Was möchten Sie bewegen?
+
${data.election_statement}
+ ` : '';
+
+ if (data.twitter_link || data.facebook_link || data.xing_link ||
+ data.whatsapp_link || data.linkedin_link || data.threema_link ||
+ data.telegram_link) {
+ htmlText += `
+
+ `;
+ }
+
+ htmlText += '
';
+
+ electionDetailText.innerHTML = htmlText;
+
+ htmlVideo += data.video_path ? `
+
+
+
+ ` : '';
+
+ if (data.video_path && data.video_img_path) {
+ htmlVideo += `
+
+ `;
+ } else if (data.video_path) {
+ htmlVideo += `
+
+ `;
+ }
+
+ htmlVideo += data.video_path ? `
+
+
+
+ ` : '';
+
+ electionDetailVideo.innerHTML = htmlVideo;
+
+ htmlInfo += (data.candidate_election_group_id && data.candidate_election_group_name) ? `
+
+ ` : '';
+ htmlInfo += (data.candidate_election_district_id && data.candidate_election_district_name) ? `
+
+ ` : '';
+
+ htmlInfo += '
';
+
+ htmlInfo += data.company ? `
+
Unternehmen
+
+
${data.company}
+ ` : '';
+
+ htmlInfo += data.company_address ? `
+
${data.company_address}
+ ` : '';
+
+ htmlInfo += data.website ? `
+
+ Unternehmenswebseite
+
+ ` : '';
+
+ htmlInfo += data.email ? `
+
+ E-Mail
+
+ ` : '';
+
+ if (data.phone) {
+
+ htmlInfo += `
+
+ ${formatNumberOutput(data.phone)}
+
+ `;
+ console.log(data);
+ }
+
+ if (data.phone2) {
+
+ htmlInfo += `
+
+ ${formatNumberOutput(data.phone2)}
+
+ `;
+ }
+
+ htmlInfo += data.company ? `
+
+ ` : '';
+
+ htmlInfo += '
';
+
+ electionDetailInfo.innerHTML = htmlInfo;
+
+ staticElectionOverviewElement.style.display = "none";
+ staticElectionDetailElement.style.display = "block";
+
+ if (staticElectionDetailElement) {
+ staticElectionDetailElement.scrollIntoView({
+ behavior: "smooth",
+ block: "start",
+ });
+ }
+ })
+ .catch(error => {
+ // Handle errors here
+ console.error('Fetch error:', error);
+ });
+}
+
+function hideDetailPage(e) {
+ let staticElectionOverviewElement = document.getElementById("static-election-overview"),
+ staticElectionDetailElement = document.getElementById("static-election-detail");
+
+ staticElectionOverviewElement.style.display = "block";
+ staticElectionDetailElement.style.display = "none";
+
+ if (staticElectionOverviewElement) {
+ staticElectionOverviewElement.scrollIntoView({
+ behavior: "smooth",
+ block: "start",
+ });
+ }
+}
diff --git a/ihk-election-static-templates/styles.css b/ihk-election-static-templates/styles.css
new file mode 100644
index 0000000..c3e629d
--- /dev/null
+++ b/ihk-election-static-templates/styles.css
@@ -0,0 +1,532 @@
+#static-election static-election-overview {
+ display: block;
+}
+#static-election #static-election-detail {
+ display: none;
+}
+
+#static-election button.search-submit.secondary {
+ background-color: #003366;
+ color: #fff;
+}
+
+#static-election button.search-submit.secondary:hover {
+ background-color: #E3EBF5;
+ color: #003366;
+}
+
+
+#static-election .election-form {
+ --theme-color-link: #fff;
+ --theme-color-link-hover: #fff;
+ font-size: 16px;
+ background: linear-gradient(140deg, #003366 30%, #4BA490 75%, #AFCC7A 108%);
+ padding: 30px 30px 0 30px;
+ border-radius: 4px;
+ color: #fff;
+ margin-bottom: 20px;
+}
+
+@media (max-width: 567px) {
+ #static-election .election-form {
+ padding-bottom: 14px;
+ }
+}
+
+#static-election .election-form h2 {
+ margin-top: -0.3em;
+ margin-bottom: 0.9em;
+ font-size: 36px;
+}
+
+@media (max-width: 767px) {
+ #static-election .election-form h2 {
+ font-size: 24px;
+ }
+}
+
+#static-election .election-form--form {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: nowrap;
+}
+
+@media (max-width: 767px) {
+ #static-election .election-form--form {
+ flex-wrap: wrap;
+ }
+}
+
+@media (max-width: 567px) {
+ #static-election .election-form--form {
+ flex-wrap: nowrap;
+ flex-direction: column;
+ align-items: flex-end;
+ }
+}
+
+#static-election .election-form button.search-submit {
+ position: static;
+ margin-bottom: 14px;
+}
+
+@media (max-width: 567px) {
+ #static-election .election-form button.search-submit {
+ margin-bottom: 0;
+ }
+}
+
+#static-election .election-form .input-wrapper {
+ flex: 1;
+ display: flex;
+}
+
+@media (max-width: 767px) {
+ #static-election .election-form .input-wrapper {
+ flex: initial;
+ width: calc(50% - 15px);
+ }
+}
+
+@media (max-width: 567px) {
+ #static-election .election-form .input-wrapper {
+ width: 100%;
+ }
+}
+
+#static-election .election-form .input-wrapper input,
+#static-election .election-form .input-wrapper select {
+ margin: 0 30px 14px 0;
+}
+
+@media (max-width: 767px) {
+ #static-election .election-form .input-wrapper input,
+ #static-election .election-form .input-wrapper select {
+ margin-right: 0;
+ }
+}
+
+#static-election .election-form .input-wrapper input {
+ width: 100%;
+ flex-grow: 1;
+}
+
+@media (max-width: 567px) {
+ #static-election .election-form .input-wrapper {
+ display: block;
+ }
+}
+
+
+#static-election .election-result-list-badge .badge-inner {
+ padding: 6px 15px;
+ background: #E3EBF5;
+ border-radius: 18px;
+ margin-bottom: 8px;
+}
+
+#static-election .election-result-list-badge p {
+ font-family: "Korb", sans-serif;
+ font-weight: bold;
+ margin: 0;
+}
+
+#static-election .election-result-list-badge p span {
+ padding-left: 5px;
+ font-weight: normal;
+}
+
+#static-election .election-result-list-badge.inverted p {
+ color: #fff;
+ transition: 0.25s ease;
+}
+
+#static-election .election-result-list-badge.inverted .badge-inner {
+ background: #003366;
+ transition: 0.25s ease;
+}
+
+#static-election .election-result-list-badge.inverted .badge-inner:hover {
+ background-color: #E3EBF5;
+}
+
+#static-election .election-result-list-badge.inverted .badge-inner:hover p {
+ color: #003366;
+}
+
+#static-election .election-result-list-badge.closable {
+ cursor: pointer;
+}
+
+#static-election .election-result-list-badge.closable .badge-inner {
+ padding-left: 48px;
+ position: relative;
+}
+
+#static-election .election-result-list-badge.closable .badge-inner:before {
+ content: '\e82d';
+ font-family: 'Icons', sans-serif;
+ position: absolute;
+ left: 15px;
+ top: 50%;
+ margin-top: -9px;
+ color: #fff;
+ display: block;
+ text-align: center;
+ font-size: 18px;
+ line-height: 1;
+ transition: 0.25s ease;
+}
+
+#static-election .election-result-list-badge.closable .badge-inner:hover:before {
+ color: #003366;
+}
+
+
+#static-election .election-result-list-item {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ border-radius: 4px;
+ background: #EFF3F6;
+ text-decoration: none;
+ width: 312px;
+}
+
+@media (max-width: 693px) {
+ #static-election .election-result-list-item {
+ width: 100%;
+ }
+}
+
+@media (max-width: 356px) {
+ #static-election .election-result-list-item {
+ max-width: none;
+ }
+}
+
+#static-election .election-result-list-item .top-box {
+ display: block;
+ cursor: pointer;
+}
+
+#static-election .election-result-list-item .image-box {
+ position: relative;
+ width: 100%;
+ padding-bottom: 100%;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+}
+
+#static-election .election-result-list-item img {
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+}
+
+#static-election .election-result-list-item .text-box {
+ padding: 10px;
+}
+
+#static-election .election-result-list-item h3 {
+ font-size: 28px;
+ line-height: 32px;
+ margin: 5px 10px 15px 10px;
+ text-decoration: underline;
+ word-break: break-word;
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ hyphens: auto;
+}
+
+#static-election .election-result-list-item .job-box,
+#static-election .election-result-list-item .city-box {
+ margin-bottom: 5px;
+ background: #E3EBF5;
+ border-radius: 4px;
+ padding: 4px 0 2px 0;
+}
+
+@media (max-width: 567px) {
+ #static-election .election-result-list-item .job-box,
+ #static-election .election-result-list-item .city-box {
+ display: none;
+ }
+}
+
+#static-election .election-result-list-item .job-box a,
+#static-election .election-result-list-item .job-box span,
+#static-election .election-result-list-item .city-box a,
+#static-election .election-result-list-item .city-box span {
+ display: block;
+ position: relative;
+ width: calc(100% - 8px);
+ margin: 0;
+ padding: 0 0 0 26px;
+ font-size: 16px;
+ line-height: 18px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: pointer;
+}
+
+#static-election .election-result-list-item .job-box a:before,
+#static-election .election-result-list-item .job-box span:before,
+#static-election .election-result-list-item .city-box a:before,
+#static-election .election-result-list-item .city-box span:before {
+ position: absolute;
+ left: 4px;
+ top: 50%;
+ font-family: "Icons";
+ transform: translate(0, -50%);
+}
+
+
+#static-election .election-detail {
+ margin: 0 0 80px 0;
+}
+
+#static-election .election-detail--text {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ background: #E3EBF5;
+ padding: 0 0 30px 0;
+}
+
+@media (max-width: 1100px) {
+ #static-election .election-detail--text {
+ display: block;
+ }
+}
+
+#static-election .election-detail--text img {
+ display: block;
+ width: 545px;
+ margin: 0 40px 0 0;
+}
+
+@media (max-width: 1100px) {
+ #static-election .election-detail--text img {
+ width: 100%;
+ }
+}
+
+#static-election .election-detail--text .text-box {
+ flex: 1;
+ padding-right: 1.5rem;
+}
+
+@media (max-width: 1100px) {
+ #static-election .election-detail--text .text-box {
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+}
+
+#static-election .election-detail--text h1 {
+ margin: 1.5rem 0;
+}
+
+#static-election .election-detail--text h2 {
+ margin: 0 0 0.75rem 0;
+ font-size: 36px;
+ line-height: 42px;
+}
+
+#static-election .election-detail--text p {
+ margin: 0 0 1.5rem 0;
+}
+
+#static-election .election-detail--text p.subheadline {
+ margin: -1rem 0 1.5rem 0;
+ font-weight: 600;
+}
+
+#static-election .election-detail--text .social-media p {
+ font-size: 1rem;
+ text-transform: uppercase;
+ margin: 0 0 0.5rem 0;
+}
+
+#static-election .election-detail--text .social-media .social-icons a:before {
+ color: #003366;
+}
+
+#static-election .election-detail--text .social-media .social-icons a:hover:before {
+ color: #56BD66;
+}
+
+#static-election .election-detail--video {
+ padding: 30px 0;
+ background: #B0C4D6;
+}
+
+@media (max-width: 1100px) {
+ #static-election .election-detail--video {
+ background: none;
+ }
+}
+
+#static-election .election-detail--video .video-container {
+ margin: 0 auto;
+ max-width: 976px;
+}
+
+@media (max-width: 1100px) {
+ #static-election .election-detail--video .video-container {
+ width: 100%;
+ max-width: none;
+ }
+}
+
+#static-election .election-detail--video .video-container .video {
+ margin: 0;
+}
+
+#static-election .election-detail--info {
+ display: flex;
+ justify-content: space-between;
+ background: #003366;
+ color: #fff;
+}
+
+@media (max-width: 1023px) {
+ #static-election .election-detail--info {
+ display: block;
+ background: none;
+ }
+}
+
+#static-election .election-detail--info .info-box {
+ flex: 1;
+ padding: 30px 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+@media (max-width: 1023px) {
+ #static-election .election-detail--info .info-box {
+ background: #003366;
+ margin: 0 0 5px 0;
+ }
+}
+
+#static-election .election-detail--info .info-headline {
+ display: block;
+ font-size: 16px;
+ text-transform: uppercase;
+ margin-bottom: 2px;
+ letter-spacing: 0.3px;
+}
+
+@media (max-width: 767px) {
+ #static-election .election-detail--info .info-headline {
+ font-size: 14px;
+ }
+}
+
+#static-election .election-detail--info .info-headline + h1 {
+ margin-top: 0.1em;
+}
+
+#static-election .election-detail--info .info-headline + h2, .election-detail--info .info-headline + h3, .election-detail--info .info-headline + h4 {
+ margin-top: 0.2em;
+}
+
+#static-election .election-detail--info .info-box--content p {
+ font-size: 18px;
+ line-height: 27px;
+ margin: 0 0 5px 0;
+}
+
+#static-election .election-detail--info .info-box--content p.headline {
+ font-weight: 600;
+ margin: 0;
+}
+
+#static-election .election-detail--info .info-box--content p.address {
+ margin-bottom: 10px;
+}
+
+#static-election .election-detail--info .info-box--text {
+ font-size: 36px;
+ line-height: 44px;
+ margin: 0;
+ font-family: 'Korb', sans-serif;
+}
+
+@media (max-width: 767px) {
+ #static-election .election-detail--info .info-box--text {
+ font-size: 24px;
+ line-height: 29px;
+ }
+}
+
+#static-election .election-detail--info a {
+ color: #fff;
+}
+
+#static-election .election-detail--info a:hover {
+ color: #56BD66;
+}
+
+#static-election .election-detail--back {
+ background: #E3EBF5;
+ display: flex;
+ justify-content: center;
+ padding: 30px 15px;
+ margin: 20px 0 0 0;
+}
+
+#static-election .election-detail--more {
+ margin: 60px 0 0 0 !important;
+ max-width: none !important;
+}
+
+
+#static-election .election-result-list .election-result-list--header {
+ display: flex;
+ justify-content: space-between;
+ padding-bottom: 20px;
+}
+
+@media (max-width: 767px) {
+ #static-election .election-result-list .election-result-list--header {
+ display: block;
+ }
+}
+
+#static-election .election-result-list .election-result-list--header-left {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+@media (min-width: 768px) {
+ #static-election .election-result-list .election-result-list--header-left {
+ margin-right: 20px;
+ }
+}
+
+@media (max-width: 767px) {
+ #static-election .election-result-list .election-result-list-badge {
+ display: flex;
+ justify-content: flex-end;
+ }
+}
+
+#static-election .election-result-list .election-result-list--inner {
+ grid-gap: 30px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ padding: 20px 0 40px 0;
+}