Annotations for a debate toggle

www/docs/js/main.js

@@ -782,3 +782,58 @@ function toggleDetails() {
 $(document).ready(function() {
   initRegisterToggles();
 });
+
+// Annotations Toggle
+document.addEventListener('DOMContentLoaded', function() {
+  const commentTeasers = document.querySelectorAll('.js-comment-teaser');
+  if (commentTeasers.length > 0) {
+    document.body.classList.add('js-annotations-enabled');
+  }
+
+  // There are two switches, one in the footer and one in the header
+  const toggles = document.querySelectorAll('.js-annotation-toggle input[type="checkbox"]');
+  if (toggles.length === 0) return;
+
+  function updateVisibility(isChecked) {
+    const isHidden = !isChecked;
+    commentTeasers.forEach((teaser, index) => {
+      setTimeout(() => {
+        if (isHidden) {
+          teaser.setAttribute('aria-hidden', 'true');
+          teaser.classList.add('is-hidden');
+        } else {
+          teaser.removeAttribute('aria-hidden');
+          teaser.classList.remove('is-hidden');
+        }
+      }, index * 50);
+    });
+
+    const statusElements = document.querySelectorAll('#annotation-status');
+    statusElements.forEach(status => {
+      status.textContent = isHidden
+        ? 'Annotations are hidden'
+        : 'Annotations are visible';
+    });
+  }
+
+  function syncToggles(changedToggle) {
+    const newState = changedToggle.checked;
+    toggles.forEach(toggle => {
+      if (toggle !== changedToggle) {
+        toggle.checked = newState;
+      }
+    });
+    updateVisibility(newState);
+  }
+
+  toggles.forEach(toggle => {
+    toggle.addEventListener('change', function() {
+      syncToggles(this);
+    });
+  });
+
+  toggles.forEach(toggle => {
+    toggle.checked = true;
+  });
+  updateVisibility(true);
+});

www/docs/style/sass/app.scss

@@ -308,6 +308,7 @@ form {
 @import "parts/sidebar_right";
 @import "parts/dataframe";
 @import "parts/accordion";
+@import "parts/annotation";
 @import "parts/table-of-contents";
 
 @import "print";

www/docs/style/sass/pages/_section.scss

@@ -548,13 +548,10 @@ span.hi {
   @media (min-width: $medium-screen) {
     margin-left: 70px;
     padding-left: 26px;
-    background-image: url('../img/elbow.png');
-    background-position: 0 3px;
+    background-image: url('../img/elbow.svg');
+    background-position: 0 0;
     background-repeat: no-repeat;
     background-size: 24px;
-    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
-      background-image: url('../img/elbow@2.png');
-    }
   }
 
   .morecomments {
@@ -574,16 +571,16 @@ span.hi {
 .comment-teaser__avatar {
   background-color: #a94ca6;
   display: inline-block;
-  @include radius(emCalc(24));
+  @include radius(24px);
   color: #fff;
   text-align: center;
-  width: emCalc(24);
-  height: emCalc(24);
+  width: 24px;
+  height: 24px;
   float: left;
   .initial {
       font-size: emCalc(14);
       vertical-align: middle;
-      line-height: 1em;
+      line-height: 24px;
       font-weight: 600;
   }
 }

www/docs/style/sass/parts/_annotation.scss

@@ -0,0 +1,83 @@
+.js-comment-teaser {
+  max-height: 1000px;
+  opacity: 1;
+  transform: translateY(0);
+  transition: max-height 0.6s ease, opacity 0.6s ease, transform 0.6s ease, margin 0.6s ease;
+  overflow: hidden;
+
+  &.is-hidden {
+    max-height: 0;
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+.annotations-toggle-switch {
+  // Hide when JS is disabled
+  display: none;
+}
+
+body.js-annotations-enabled {
+    .annotations-toggle-switch {
+      display: inline-block;
+      margin-top: 0.5rem;
+      label {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin: 0 1rem 0 1rem;
+        vertical-align: middle;
+        cursor: pointer;
+      }
+
+      input[type="checkbox"] {
+        position: relative;
+        appearance: none;
+        width: 52px;
+        height: 28px;
+        background: $primary-color-100;
+        border-radius: 28px;
+        transition: background 0.3s ease;
+        flex-shrink: 0;
+        margin: 0;
+        cursor: pointer;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 2px;
+          left: 2px;
+          width: 24px;
+          height: 24px;
+          background: #fff;
+          border-radius: 50%;
+          transition: transform 0.3s ease;
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+
+        &:checked {
+          background: $primary-color;
+
+          &::before {
+            transform: translateX(24px);
+          }
+        }
+
+        &:focus {
+          outline: none;
+          box-shadow: 0 0 0 3px $primary-color-300;
+        }
+      }
+    }
+
+    @media (min-width: $large-screen) {
+      .annotations-toggle-switch {
+        margin-top: 0;
+      }
+      .debate-navigation--footer {
+        position: sticky;
+        bottom: 0;
+      }
+    }
+}
+

www/includes/easyparliament/templates/html/section/_section_content.php

@@ -243,7 +243,7 @@ function ($matches) {
                 } # End of voting HTML
 
                 if (isset($speech['commentteaser'])) { ?>
-                <div class="comment-teaser">
+                <div class="comment-teaser js-comment-teaser">
                     <div class="comment-teaser__avatar">
                         <span class="initial"><?= substr($speech['commentteaser']['username'], 0, 1); ?></span>
                     </div>

www/includes/easyparliament/templates/html/section/_section_footer.php

@@ -1,6 +1,18 @@
 <nav class="debate-navigation debate-navigation--footer" role="navigation">
         <div class="full-page__row">
             <div class="debate-navigation__pagination">
+                <?php if (isset($section_annotation_url)) { ?>
+                <div class="js-annotation-toggle annotations-toggle-switch">
+                    <label for="annotation-toggle">
+                        <span><?= gettext('Show annotations') ?></span>
+                        <input type="checkbox" id="annotation-toggle" checked>
+                    </label>
+                </div>
+                <div id="annotation-status" class="visuallyhidden" aria-live="polite" aria-atomic="true"></div>
+                <div class="debate-navigation__all-debates">
+                    <a href="<?= $section_annotation_url ?>">Annotate!</a>
+                </div>
+                    <?php } ?>
                 <?php if (isset($nextprev['prev'])) { ?>
                 <div class="debate-navigation__previous-debate">
                     <a href="<?= $nextprev['prev']['url'] ?>" rel="prev">&laquo; <?= $nextprev['prev']['body'] ?></a>

www/includes/easyparliament/templates/html/section/_section_nav.php

@@ -3,6 +3,13 @@
             <div class="full-page__unit">
                 <div class="debate-navigation__pagination">
                     <?php if (isset($section_annotation_url)) { ?>
+                    <div class="js-annotation-toggle annotations-toggle-switch">
+                        <label for="annotation-toggle">
+                            <span><?= gettext('Show annotations') ?></span>
+                            <input type="checkbox" id="annotation-toggle" checked>
+                        </label>
+                    </div>
+                    <div id="annotation-status" class="visuallyhidden" aria-live="polite" aria-atomic="true"></div>
                     <div class="debate-navigation__all-debates">
                         <a href="<?= $section_annotation_url ?>">Annotate!</a>
                     </div>