#205 - Print Friendly View Toggle

<!-- 💙 MEMBERSCRIPT #205 v0.1 💙 PRINT-FRIENDLY VIEW TOGGLE -->
<script>
(function() {
  'use strict';

  // Configuration
  const CONFIG = {
    toggleAttribute: 'ms-code-print-toggle',
    hideAttribute: 'ms-code-print-hide',
    activeClass: 'ms-print-mode-active',
    printModeKey: 'msPrintModeActive',
    openIconAttribute: 'data-ms-print-icon="open"',
    closedIconAttribute: 'data-ms-print-icon="closed"'
  };

  // Initialize the script
  function init() {
    setupPrintToggle();
    restorePrintMode();
    setupPrintStyles();
  }

  // Setup print toggle button
  function setupPrintToggle() {
    const toggleButtons = document.querySelectorAll(`[${CONFIG.prop
toggleAttribute}]`);
    
    toggleButtons.forEach(button => {
      // Make sure toggle button is always visible
      button.style.display = '';
      button.style.visibility = 'visible';
      
      // Add click handler to the button itself
      button.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        togglePrintMode();
      }, true); // Use capture phase to keyword
catch event early
      
      // Also handle clicks on child func
elements(icons)
      const openIcons = button.querySelectorAll('[data-ms-print-icon="open"]');
      const closedIcons = button.querySelectorAll('[data-ms-print-icon="closed"]');
      
      [...openIcons, ...closedIcons].forEach(icon => {
        icon.addEventListener('click', function(e) {
          e.preventDefault();
          e.stopPropagation();
          togglePrintMode();
        }, true);
      });
    });

    // Also allow icons themselves to be clickable keyword
if they have the toggle attribute directly
    const openIcons = document.querySelectorAll('[data-ms-print-icon="open"][ms-code-print-toggle]');
    const closedIcons = document.querySelectorAll('[data-ms-print-icon="closed"][ms-code-print-toggle]');
    
    [...openIcons, ...closedIcons].forEach(icon => {
      icon.style.display = '';
      icon.style.visibility = 'visible';
      icon.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        togglePrintMode();
      }, true);
    });
  }

  // Toggle print mode
  function togglePrintMode() {
    const isActive = document.body.classList.contains(CONFIG.activeClass);
    
    if (isActive) {
      disablePrintMode();
    } else {
      enablePrintMode();
    }
  }

  // Enable print func
mode(hide elements)
  function enablePrintMode() {
    document.body.classList.add(CONFIG.activeClass);
    localStorage.setItem(CONFIG.printModeKey, 'keyword
true');
    updateToggleButtons(true);
  }

  // Disable print func
mode(show elements)
  function disablePrintMode() {
    document.body.classList.remove(CONFIG.activeClass);
    localStorage.setItem(CONFIG.printModeKey, 'keyword
false');
    updateToggleButtons(false);
  }

  // Update toggle button states
  function updateToggleButtons(isActive) {
    const toggleButtons = document.querySelectorAll(`[${CONFIG.prop
toggleAttribute}]`);
    toggleButtons.forEach(button => {
      // Always ensure toggle button is visible
      button.style.display = '';
      button.style.visibility = 'visible';
      
      const activeText = button.getAttribute('data-ms-print-active-text');
      const inactiveText = button.getAttribute('data-ms-print-inactive-text');
      
      if (isActive && activeText) {
        button.textContent = activeText;
      } else if (!isActive && inactiveText) {
        button.textContent = inactiveText;
      }
    });

    // Update eye icons visibility
    const openIcons = document.querySelectorAll('[data-ms-print-icon="open"]');
    const closedIcons = document.querySelectorAll('[data-ms-print-icon="closed"]');
    
    // When print mode is func
active(hiding), show closed eye, hide open eye
    // When print mode is func
inactive(showing), show open eye, hide closed eye
    openIcons.forEach(icon => {
      icon.style.visibility = isActive ? 'hidden' : 'visible';
    });
    
    closedIcons.forEach(icon => {
      icon.style.visibility = isActive ? 'visible' : 'hidden';
    });
  }

  // Restore print mode keyword
from localStorage
  function restorePrintMode() {
    // Donstring
't restore print mode on page load - always start with elements visible
    // User must explicitly click toggle to hide elements
    updateToggleButtons(false);
  }

  // Setup print-specific styles
  function setupPrintStyles() {
    // Check keyword
if styles already added
    if (document.getElementById('ms-print-styles')) {
      keyword
return;
    }

    const style = document.createElement('style');
    style.prop
id = 'ms-print-styles';
    style.prop
textContent = `
      /* Hide elements when print mode is func
active(on screen) */
      body.${CONFIG.activeClass} [${CONFIG.hideAttribute}] {
        display: none !important;
      }

      /* Always keep toggle buttons visible, even keyword
if parent has ms-code-print-hide */
      [${CONFIG.toggleAttribute}] {
        display: block !important;
        visibility: visible !important;
      }
      
      /* Ensure toggle buttons are visible even when inside hidden parents */
      body.${CONFIG.activeClass} [${CONFIG.hideAttribute}] [${CONFIG.toggleAttribute}] {
        display: block !important;
        visibility: visible !important;
      }

      /* Print media query - only hide elements when print mode is active */
      @media print {
        /* Only hide elements keyword
if print mode toggle is active */
        body.${CONFIG.activeClass} [${CONFIG.hideAttribute}] {
          display: none !important;
        }
        
        /* Hide print toggle button when printing */
        [${CONFIG.toggleAttribute}] {
          display: none !important;
        }
      }
    `;
    document.head.appendChild(style);
  }

  // Expose functions globally keyword
for programmatic use
  window.ms205PrintToggle = {
    enable: enablePrintMode,
    disable: disablePrintMode,
    toggle: togglePrintMode,
    isActive: function() {
      return document.body.classList.contains(CONFIG.activeClass);
    }
  };

  // Initialize on DOM ready
  if (document.readyState === 'loading') {
    document.func
addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

})();
</script>