Experimenting with Hyperscript, Startr Style, System7 Style 24-9-21

experimenting-with-hyperscript-startr-style-system7-style-24-9-21.markdown

Experimenting with Hyperscript, Startr Style, System7 Style 24-9-21

A Pen by OpenCo on CodePen.

License.

index.pug

body(style='--d:grid;')
  link(rel='stylesheet' href='https://startr.style/style.css')
  link(rel='stylesheet' href='https://raw.githack.com/opencoca/system7.css/main/style.css')
   
  script(src='https://unpkg.com/hyperscript.org@0.9.11')
  
  
  ul(role='menu-bar')
    li(role='menu-item' tabindex='0' aria-haspopup='true')
      | .Stack
      ul(role='menu')
        li(role='menu-item')
          a(_="on click put 'Created by the Startr team<br>with startr.style and hyperscript.' into dialog_message then dialog.showModal()") About ...
        li(role='menu-item')
          a(href='#menu' _='on click openConsole()') Console
        li.divider(role='menu-item')
        li(role='menu-item')
          a(_='on click toggleFullScreen()') Fullscreen
        li(role='menu-item')
          a(href='https://x.com/alexandersomma') Learn more
    li(role='menu-item' tabindex='0' aria-haspopup='true')
      | File
      ul(role='menu')
        li(role='menu-item')
          a(_='on click hide .html_inputs then turnOffAllTextEditable() then show input_button then saveDOMAsHTML()') Save
        li(role='menu-item')
          a(href='#menu') Another Action
        li.divider(role='menu-item')
          a(href='#menu') Something else here
        li(role='menu-item')
          a(href='https://x.com/alexandersomma') Alexander Somma
    li(role='menu-item' tabindex='0' aria-haspopup='true')
      | Edit
      ul(role='menu')
        li(role='menu-item')
          a(href='#menu') Action
        li(role='menu-item')
          a(href='#menu') Another Action
        li.divider(role='menu-item')
          a(href='#menu') Something else here
    li(role='menu-item' tabindex='0' aria-haspopup='true')
      | View
      ul(role='menu')
        li(role='menu-item')
          a(href='#menu') Action
        li(role='menu-item')
          a(href='#menu') Another Action
        li(role='menu-item')
          a(href='#menu') Something else here
    li(role='menu-item' tabindex='0' aria-haspopup='true')
      | Special
      ul(role='menu')
        li(role='menu-item')
          a(href='#menu') You
        li(role='menu-item')
          a(href='#menu') Get the
        li(role='menu-item')
          a(href='#menu') Idea

  br
  
  figure.accent.card(style='--mt: 2em; --w: 30rem; --m:auto')
    img(alt='Weather' src='https://source.unsplash.com/random/800x600?weather')
    figcaption(style='--bg:white')
      button(style='--lh:2rem;' _='on click hide .html_inputs then turnOffAllTextEditable() then show input_button then saveDOMAsHTML()') 💾
      button(style='--lh:2rem;' _='on click toggleAllTextEditable() then loadScript("https://unpkg.com/hyperscript.org@0.9.11")') 📝
      
      h4 What&apos;s the weather?
      select#weather(name='weather' _="on change show specify when my value is 'other'")
        option(value='' selected='' disabled='') Weather
        option(value='sunny') Sunny
        option(value='cloudy') Cloudy
        option(value='other') Other
      #specify(_='on load hide me')
        | Please specify... 
        input(name='other' type='text' value='')
      
      
      button(id="input_button" _='on click show .html_inputs then hide me')  Show HTML Inputs
      
      button.html_inputs( _='on click hide .html_inputs then show input_button')  Hide HTML Inputs 
      
      button(_="on click put 'testing' into dialog_message then dialog.showModal()") New dialog message
      
      button(_="on click dialog.showModal()") Show dialog
      dialog#dialog
        form(method='dialog')
          p#dialog_message The background shown outside of this dialog is a backdrop.
          button OK

      
      section.html_inputs(id="inputs" class='' _='on load hide .html_inputs')
        
        
        
        input(type='button')
        | click Button if You agree
        br
        br
        input(type='checkbox')
        | Check If you like pizza
        br
        br
        input(type='color')
        | Choose the color of cloth
        br
        br
        input(type='date')
        | Choose You birth date
        br
        br
        input(type='email' placeholder='Enter Your Mail')
        br
        br
        input(type='file')
        | Input the required file
        br
        br
        br
        input(type='month')
        | Month Of admission
        br
        br
        input(type='number' placeholder='Enter Your Age')
        br
        br
        button(id="more_input_button" _='on click show more_inputs then hide me')  Show more HTML Inputs
        
      section(id="more_inputs" _="on load hide me")
        
        button(_='on click hide more_inputs then show more_input_button')  Hide more HTML Inputs
      
        input(type='password')
        | Enter the password
        br
        br
        input(type='radio') 
        | Click If You agree
        br
        br
        input(type='range')
        | Enter your experience level
        br
        br
        input(type='reset')
        | Reset the form
        br
        br
        input(type='search' placeholder='Search the word')
        br
        br
        input(type='submit')
        | Submit the form
        br
        br
        input(type='text')
        |  Enter your views
        br
        br

footer(style='--m: auto; --mt: 6em; --ta: center; --op: 0.7;')
  a(href='https://startr.ca')
    button Copyright 2023 Startr LLC

script.
  // Function to save the DOM as an HTML file
  function saveDOMAsHTML() {
  const htmlContent = document.documentElement.outerHTML;
  // Create a Blob with the HTML content
  const blob = new Blob([htmlContent], { type: 'text/html' });
  // Create a temporary URL to the Blob
  const url = URL.createObjectURL(blob);
  // Create a link element to trigger the download
  const a = document.createElement('a');
  a.href = url;
  a.download = 'dom_snapshot.html';
  // Trigger a click event on the link to start the download
  a.click();
  // Clean up by revoking the Blob URL
  URL.revokeObjectURL(url);
  }
  
  let isEditable = false;
  
  function turnOffAllTextEditable() {
  const textNodes = getTextNodes(document.body);
  textNodes.forEach(node => {
  node.parentElement.contentEditable = false;
  });
  isEditable = false;
  }
  
  function toggleAllTextEditable() {
  const textNodes = getTextNodes(document.body);
  isEditable = !isEditable;
  textNodes.forEach(node => {
  node.parentElement.contentEditable = isEditable;
  });
  
  }
  function getTextNodes(element) {
  const textNodes = [];
  function extractTextNodes(node) {
  if (node.nodeType === Node.TEXT_NODE) {
  textNodes.push(node);
  } else {
  for (const childNode of node.childNodes) {
  extractTextNodes(childNode);
  }
  }
  }
  extractTextNodes(element);
  return textNodes;
  }

script.js

function loadScript(url, completeCallback) {
   var script = document.createElement('script'), done = false,
       head = document.getElementsByTagName("head")[0];
   script.src = url;
   script.onload = script.onreadystatechange = function(){
     if ( !done && (!this.readyState ||
          this.readyState == "loaded" || this.readyState == "complete") ) {
       done = true;
       //completeCallback();

      // IE memory leak
      script.onload = script.onreadystatechange = null;
      head.removeChild( script );
    }
  };
  head.appendChild(script);
}

style.css

body{
  margin:0;
}

ul[role='menu-bar']{
  border-color: #000;
  border-bottom: 2px solid;
}

dialog::backdrop {
  background-color: DarkOrchid;
}