File: /var/www/vhosts/greenclinic.kz/newsite/wp-content/themes/green-clinic/blocks/dsm_contacts.php
<?php
$list = get_sub_field('list');
$i = 1;
?>
<section class="section actions-sales_section">
<div class="container">
<div class="dms__details block1"></div>
</div>
</section>
<script>
var block1 = document.querySelector(".block1");
var animation1Triggered = false;
var options = {
root: null,
threshold: 0.5,
};
var observerBlock1 = new IntersectionObserver(function (
entries,
observer
) {
entries.forEach(function (entry) {
if (entry.isIntersecting && !animation1Triggered) {
block1.classList.add("visible");
animation1Triggered = true;
observerBlock1.unobserve(block1);
}
});
},
options);
observerBlock1.observe(block1);
</script>
<script>
let data = [
<?php $i = 1; foreach($list as $list_item): ?>
{
id: <?php echo $i ?>,
<?php if(strlen($list_item['title']) > 0): ?>title: "<?php echo $list_item['title'];?>",<?php else: ?>title: "",<?php endif;?>
<?php if(strlen($list_item['phone']) > 0): ?>phoneNumber: "<?php echo $list_item['phone'];?>",<?php else: ?>phoneNumber: "",<?php endif;?>
<?php if(strlen($list_item['email']) > 0): ?>email: "<?php echo $list_item['email'];?>",<?php else: ?>email: "",<?php endif;?>
<?php if(strlen($list_item['link']) > 0): ?>website: ["https://<?php echo $list_item['link'];?>", "<?php echo $list_item['link'];?>",]<?php else: ?>website: ["", ""],<?php endif;?>
},
<?php $i++; endforeach;?>
];
const dmsDetails = document.querySelector(".dms__details");
data.forEach((item, index) => {
dmsDetails.innerHTML += `
<div class="dms__detail-row">
<div class="dms__detail-row-top">
<h4>${item.title}</h4>
<svg
class="open-close"
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12.9706"
r="9"
transform="rotate(-90 12 12.9706)"
stroke="#27AE79"
/>
<path
d="M15 12.9706L9 12.9706"
stroke="#27AE79"
stroke-linecap="square"
/>
<path
d="M12 9.97058L12 15.9706"
stroke="#27AE79"
stroke-linecap="square"
/>
</svg>
</div>
<div class="dms__detail-innerrow">
<span class="phone"
><svg
width="25"
height="25"
viewBox="0 0 25 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.568 4.86071L15.5152 5.15935C15.368 5.6261 15.0024 5.9917 14.5357 6.13887C14.3036 6.21204 14.0506 6.20969 13.926 6.20853C13.9125 6.2084 13.9005 6.20829 13.8902 6.20829H11.1124C11.1021 6.20829 11.0901 6.2084 11.0766 6.20853C10.952 6.20969 10.699 6.21204 10.4669 6.13887C10.0002 5.9917 9.63456 5.6261 9.48739 5.15935C9.41422 4.92729 9.41657 4.67425 9.41773 4.54962C9.41786 4.53613 9.41797 4.52414 9.41797 4.51385C9.41797 4.51285 9.41792 4.51084 9.41784 4.5079C9.41677 4.46707 9.41097 4.24641 9.47582 4.04074C9.59846 3.65179 9.90313 3.34712 10.2921 3.22448C10.4978 3.15963 10.7184 3.16542 10.7592 3.1665C10.7622 3.16657 10.7642 3.16663 10.7652 3.16663H14.2374C14.2384 3.16663 14.2404 3.16657 14.2434 3.1665C14.2842 3.16542 14.5048 3.15963 14.7105 3.22448L14.4098 4.1782L14.7105 3.22448C15.0995 3.34712 15.4041 3.65178 15.5268 4.04074L14.568 4.86071ZM14.568 4.86071L15.5152 5.15935C15.5884 4.92729 15.586 4.67425 15.5849 4.54962C15.5847 4.53613 15.5846 4.52414 15.5846 4.51385C15.5846 4.51285 15.5847 4.51084 15.5848 4.5079M14.568 4.86071L15.5848 4.5079M15.5848 4.5079C15.5858 4.46707 15.5916 4.24642 15.5268 4.04075L15.5848 4.5079Z"
stroke="#27AE79"
stroke-width="2"
/>
<rect
x="6.25"
y="3.125"
width="12.5"
height="18.75"
rx="2"
stroke="#27AE79"
stroke-width="2"
/>
<circle cx="12.4987" cy="18.75" r="1.04167" fill="#27AE79" />
</svg>
${item.phoneNumber}</span
>
${
item.email !== ""
? `<span class="email">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="25" viewBox="0 0 256 256" xml:space="preserve">
<defs>
</defs>
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 75.546 78.738 H 14.455 C 6.484 78.738 0 72.254 0 64.283 V 25.716 c 0 -7.97 6.485 -14.455 14.455 -14.455 h 61.091 c 7.97 0 14.454 6.485 14.454 14.455 v 38.567 C 90 72.254 83.516 78.738 75.546 78.738 z M 14.455 15.488 c -5.64 0 -10.228 4.588 -10.228 10.228 v 38.567 c 0 5.64 4.588 10.229 10.228 10.229 h 61.091 c 5.64 0 10.228 -4.589 10.228 -10.229 V 25.716 c 0 -5.64 -4.588 -10.228 -10.228 -10.228 H 14.455 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #27AE79; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 11.044 25.917 C 21.848 36.445 32.652 46.972 43.456 57.5 c 2.014 1.962 5.105 -1.122 3.088 -3.088 C 35.74 43.885 24.936 33.357 14.132 22.83 C 12.118 20.867 9.027 23.952 11.044 25.917 L 11.044 25.917 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #27AE79; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 46.544 57.5 c 10.804 -10.527 21.608 -21.055 32.412 -31.582 c 2.016 -1.965 -1.073 -5.051 -3.088 -3.088 C 65.064 33.357 54.26 43.885 43.456 54.412 C 41.44 56.377 44.529 59.463 46.544 57.5 L 46.544 57.5 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #27AE79; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 78.837 64.952 c -7.189 -6.818 -14.379 -13.635 -21.568 -20.453 c -2.039 -1.933 -5.132 1.149 -3.088 3.088 c 7.189 6.818 14.379 13.635 21.568 20.453 C 77.788 69.973 80.881 66.89 78.837 64.952 L 78.837 64.952 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #27AE79; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 14.446 68.039 c 7.189 -6.818 14.379 -13.635 21.568 -20.453 c 2.043 -1.938 -1.048 -5.022 -3.088 -3.088 c -7.189 6.818 -14.379 13.635 -21.568 20.453 C 9.315 66.889 12.406 69.974 14.446 68.039 L 14.446 68.039 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #27AE79; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</svg>
<a href="mailto:${item.email}"
>${item.email}
</a>
</span>`
: ""
}
${
item.website[0] || item.website[1] !== ""
? `
<span class="site">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="25" viewBox="0 0 256 256" xml:space="preserve">
<defs>
</defs>
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
<path d="M 45 0 C 20.187 0 0 20.187 0 45 c 0 24.813 20.187 45 45 45 c 24.813 0 45 -20.187 45 -45 C 90 20.187 69.813 0 45 0 z M 4.051 47 H 20.07 c 0.142 6.123 0.934 11.89 2.255 17.096 H 8.735 C 6.011 58.944 4.348 53.149 4.051 47 z M 47 21.905 V 4.2 c 6.216 1.214 11.734 8.007 15.192 17.705 H 47 z M 63.455 25.905 C 64.89 31.084 65.772 36.89 65.931 43 H 47 V 25.905 H 63.455 z M 43 4.2 v 17.705 H 27.809 C 31.266 12.207 36.784 5.414 43 4.2 z M 43 25.905 V 43 H 24.069 c 0.159 -6.11 1.041 -11.916 2.476 -17.095 H 43 z M 20.07 43 H 4.051 c 0.297 -6.149 1.96 -11.944 4.684 -17.095 h 13.59 C 21.003 31.11 20.211 36.877 20.07 43 z M 24.069 47 H 43 v 17.096 H 26.545 C 25.111 58.917 24.228 53.111 24.069 47 z M 43 68.096 V 85.8 c -6.216 -1.214 -11.733 -8.007 -15.191 -17.705 H 43 z M 47 85.8 V 68.096 h 15.192 C 58.734 77.793 53.216 84.586 47 85.8 z M 47 64.096 V 47 h 18.931 c -0.159 6.111 -1.041 11.917 -2.476 17.096 H 47 z M 69.931 47 h 16.018 c -0.297 6.149 -1.96 11.944 -4.684 17.096 H 67.676 C 68.997 58.89 69.789 53.123 69.931 47 z M 69.931 43 c -0.142 -6.123 -0.934 -11.89 -2.255 -17.095 h 13.589 c 2.724 5.152 4.387 10.946 4.684 17.095 H 69.931 z M 78.855 21.905 H 66.523 c -2.153 -6.613 -5.219 -12.087 -8.909 -15.911 C 66.331 8.82 73.779 14.487 78.855 21.905 z M 32.386 5.994 c -3.689 3.824 -6.755 9.298 -8.909 15.911 H 11.145 C 16.221 14.487 23.669 8.82 32.386 5.994 z M 11.146 68.096 h 12.332 c 2.153 6.612 5.219 12.086 8.909 15.911 C 23.669 81.18 16.222 75.513 11.146 68.096 z M 57.614 84.006 c 3.689 -3.824 6.756 -9.298 8.909 -15.91 h 12.332 C 73.778 75.513 66.331 81.18 57.614 84.006 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #27AE79; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</svg>
<a href="${item.website[0]}" target="_blank">
${item.website[1]}
</a>
</span>
`
: ""
}
</div>
</div>
`;
});
</script>
<script>
const dmsInnerRows = document.querySelectorAll(".dms__detail-innerrow");
const buttons = document.querySelectorAll(".open-close");
const dmsDetailRows = document.querySelectorAll(".dms__detail-row");
dmsDetailRows.forEach((elem, index) => {
elem.addEventListener("click", () => {
dmsInnerRows[index].classList.toggle("visible");
buttons[index].classList.toggle("rotate");
});
});
</script>