css/index.html at main · sparkstonepdx/css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<style>
  body {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  body > * {
    width: 100%;
    height: 100%;
  }

  iframe {
    border: none;
  }

  iframe#b,
  iframe#d {
    color-scheme: light;
  }
</style>

<body>
  <iframe id="a" src="./kitchen-sink-theme.html"></iframe>
  <iframe id="b" data-theme="light" src="./kitchen-sink-theme.html"></iframe>
  <iframe id="c" src="./kitchen-sink-pico.html"></iframe>
  <iframe id="d" data-theme="light" src="./kitchen-sink-pico.html"></iframe>
</body>
<script>
  // Initial log to show access to iframes (optional)
  function init() {
    const iframes = Array.from(document.body.children);
    iframes.forEach(iframe => {
      try {
        console.log(iframe.contentDocument);
      } catch (error) {
        console.error('Cannot access iframe contentDocument:', error);
      }
    });
  }
  setTimeout(init, 100);

  (function () {
    // Lock to prevent recursive sync updates.
    var isSyncing = false;

    // Sync scroll of all iframes (except the source) to match scrollX and scrollY.
    function syncIframeScroll(sourceIframe, scrollX, scrollY) {
      if (isSyncing) {
        return;
      }
      isSyncing = true;
      var iframes = document.querySelectorAll('iframe');
      iframes.forEach(function (iframe) {
        // Only update if it's not the source iframe.
        if (iframe !== sourceIframe) {
          try {
            // Set the scroll position of the iframe's content.
            iframe.contentWindow.scrollTo(scrollX, scrollY);
          } catch (error) {
            console.error('Error syncing iframe scroll:', error);
          }
        }
      });
      // Reset the syncing flag shortly after update.
      setTimeout(function () {
        isSyncing = false;
      }, 50);
    }

    // Attaches a scroll event listener to a given iframe.
    function addScrollListener(iframe) {
      try {
        iframe.contentWindow.addEventListener('scroll', function () {
          var scrollX = iframe.contentWindow.scrollX;
          var scrollY = iframe.contentWindow.scrollY;
          // Save the current scroll positions to localStorage.
          localStorage.setItem('scrollX', scrollX);
          localStorage.setItem('scrollY', scrollY);
          // Synchronize the scrolling for all iframes.
          syncIframeScroll(iframe, scrollX, scrollY);
        });
      } catch (error) {
        console.error('Could not attach scroll listener to iframe:', error);
      }
    }

    // After the main window loads, attach scroll listeners to each iframe
    // and restore scroll positions from localStorage.
    window.addEventListener('load', function () {
      var iframes = document.querySelectorAll('iframe');

      // Retrieve the saved scroll positions from localStorage.
      var savedX = parseInt(localStorage.getItem('scrollX'), 10) || 0;
      var savedY = parseInt(localStorage.getItem('scrollY'), 10) || 0;

      iframes.forEach(function (iframe) {
        // Wait for the iframe's content to be fully loaded.
        if (iframe.contentDocument.readyState === 'complete') {
          // Restore the saved scroll position.
          iframe.contentWindow.scrollTo(savedX, savedY);
          addScrollListener(iframe);
        } else {
          iframe.addEventListener('load', function () {
            // Restore the saved scroll position after the iframe loads.
            iframe.contentWindow.scrollTo(savedX, savedY);
            addScrollListener(iframe);
          });
        }
      });
    });
  })();
</script>