2b:null 2c:["$","title",null,{"children":"Color input with code highlighting and cookie saving | Lao | Observable"}] 31:T1972,viewof palette = { let key = new URL(document.baseURI).pathname.substring(1).replace('/', '-') //unique cookie key for this notebook url // functions for processing text const isColor = (strColor) => { // checks to see if string is a valid HTML color const s = new Option().style; s.color = strColor; return s.color !== ''; } const parse = (s) => { // processes the input text into section that are valid HTML colors let sLength = s.length // length of string let A = [] // the array s is going to be parse into. Each element is going to be ({ string, startIndex, endIndex }) let left = 0, right = 0 // counts the number of left ( and right ) parentheses let char = '' // current character in the string let skip = [ `#` ] // characters skipped in phrase let cut = [ ',', ' ', '\n', 'x', `[`, `]`, `'`, `"`, `;` ] // characters that cut string into section if not in a parenthesis let section = '' // current string section being constructed one by one. Gets reset every section let startIndex = 0, endIndex = 0 // where the section begins and ends so the

 tag can be inserted with color highlighted  tags
    let fillColor = '', textColor = '' // color of highlight and text
    let keep = false // for testing if string is a valid HTML color

    for( let i=0; i<=sLength; i++ ){ // step for each character of the string
      char = s.charAt(i)

      // count how many left and right parentheses we have seen
      if( char ==='(' ) left++
      if( char ===')' ) right++
      
      if( left != 0 ){ // dealing with a parenthesis section
        section += char
        if( left === right ){ // resets parenthesis count
          left = 0
          right = 0
        }
        
      }else{ // not dealing with a parenthesis section
        if( skip.includes(char) ){
          // do nothing
        }else if( cut.includes(char) || i==sLength ){ // cut section
          //test to see if section is a valid HTML color
          keep = true
          if( isColor(section) ){
            fillColor = d3.color( section ).hex()
          }else if( isColor('#'+section)){
            fillColor = d3.color( '#'+section ).hex()
          }else{
            keep = false
          }

          // if it is a valid color, add it to the array
          if( keep ){
            if( d3.lab(d3.color(fillColor)).l > 65 ){
              textColor = '#000000'
            }else{
              textColor = '#FFFFFF'
            }
            A.push(
              ({string:section, startIndex:startIndex, endIndex:i, fillColor:fillColor, textColor:textColor})
            )
          }
          startIndex = i+1
          section = ''
        }else{ // if no skips or cuts, add character to section string
          section += char
        }
      }
      
    }

    return A
  }

  
  function resizeTextarea() {
      var textarea = document.getElementById("textArea_editing");
      if( textarea != null){
        textarea.style.height = "auto"; // Reset height to auto to get accurate scrollHeight
        textarea.style.height = (1*textarea.scrollHeight-19) + "px"; // Set the height to the scrollHeight
    }
  }
  function updatePre(text){
    if( document.getElementById('textArea_highlight') != null){ document.getElementById('textArea_highlight').innerHTML = text}
  }
  let formatPre = (text, highlight) => {
    for( let i = highlight.length-1; i>=0; i--){
      text = text.slice(0, highlight[i].startIndex)
        + ''
        + text.slice(highlight[i].startIndex, highlight[i].endIndex)
        + ''
        + text.slice(highlight[i].endIndex);
    }
    return text
  }

  // HTML element
  let savedText = localStorage.getItem(key)
  if(savedText === null || savedText == ''){savedText = `AntiqueWhite  756969  333  #dfd
rgb(230, 0, 153)  hsl(150, 30%, 60%)`}
  let form = html`
  
    
    
    
    
    
    ${formatPre(savedText, parse(savedText))}
    ${savedText}
  `;
  
  let output
  form.oninput = () => {
    localStorage.setItem(key, form.palleteInput.value);
    resizeTextarea() 
    output = parse(form.palleteInput.value)
    updatePre(formatPre(form.palleteInput.value, output))
    form.value = output.map( e => e.fillColor )
  };
  form.oninput();
  
  addEventListener("resize", (event) => { resizeTextarea() });
  
  return form;
}32:[]
2f:{"id":"61cc52f838fbc0ae","slug":null,"title":"Color input with code highlighting and cookie saving","thumbnail":"9affe25a1ce9c9c747eb059e90a6946d2b62704a3a21b8b18d9e8dadaebb9286","access_level":"public","create_time":"$D2023-11-29T18:33:57.926Z","update_time":"$D2023-12-04T18:54:47.725Z","view_time":null,"first_public_time":"$D2023-12-04T04:42:52.100Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":654,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Color input with code highlighting and cookie saving","cells":[{"id":0,"value":"# Color input with code highlighting and cookie saving","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"palette","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}}
30:"$2f:body"