Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

  (i = slide.nextElementSibling)?.className == "slidenote" ? i : slide
  ]),
An alternative approach:

  slide.querySelector(":scope+.slidenote") ?? slide
(|| would work just as well as ??, but ?? feels more appropriate.)


You could also make the notes mandatory.


Or put the notes inside the slide, and then CSS is enough, the JavaScript doesn’t even need to know about notes:

  Notes:
  <label><input type=radio name=notes id=notes-hide checked> Hide</label>
  <label><input type=radio name=notes id=notes-inline> Inline</label>
  <label><input type=radio name=notes id=notes-only> Only</label>

  <section>
      Slide

      <aside>
          Notes
      </aside>
  </section>

  <style>
      section {
          position: relative;
      }

      aside {
          background: #feb;
          padding: 1em;

          body:has(#notes-only:checked) & {
              position: absolute;
              inset: 0;
          }

          body:has(#notes-inline:checked) & {
              margin-top: auto; /* concept: if the slide uses flex, notes can try sticking to the bottom */
          }

          body:has(#notes-hide:checked) & {
              display: none;
          }
      }
  </style>


I think one would want either slides or notes?

This seems perfectly heretical.

    <script>
    document.write(`
    <style>
    .${location.search.replace(/\W/g, '')}{
      display:none
    }
    </style>
    `)
    </script>




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: