Text based HtmlDialog component browser

Continuing the discussion from Component Browser Alternative?:

there are actually quite a few differences between CEF functionality and the Chrome App [CA]…

the javascript to ‘mimic’ is <100 line of code, but most of that was for keyboard navigation…

up/down arrows, enter, alt+ent, and tabbing took far more effort than it did for CA…

there is also missing CSS functionality and scrolling the items list under the search box work on CA, but not CEF…

the gif I used a 'stay on top window as I haven;t added a shortcut key yet…

I was also getting a lot of repeat comps which I filtered out, but not sure where they originated,

it seems that either sending to ruby echoes 4 or 5 times or the in the other direction…

they are being feb from a hash so there is only one of each…

anyhow. here’s a gif if my test…

john

That is pretty slick! I am not 100% sure what is happening and what the “reload” button is doing but it looks great. Can it be manipulated by the keyboard (arrows, enter to select, etc?)

I think you have a winner but just for kicks, I tried like you suggested to develop something that was pure JS and very lean but even my attempt at vanilla JS does not seem to work in Chrome Embedded Framework (CEF), at least on Mac. Worked find on CodePen.

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
var s = document.getElementById('search');
s.addEventListener('keyup', function(event){
  var search_string = this.value;
  var options = document.getElementsByClassName("options");
  for(var i = 0; i < options.length; i++){
    var this_element = options[i];
    // compare strings - if no match, hide
    if(this_element.id.includes(search_string)){
      this_element.style.display = "block";
    } else {
      this_element.style.display = "none";
    }
  }
});
</script>
</head>
<body>
<input id="search" type="text" placeholder="Type the name of a Component"/>
<div id="1234" class="options">1234</div>
<div id="abcd" class="options">abcd</div>
<div id="xyz" class="options">xyz</div>
</body>
</html>

here’s one of my test scripts for finding the keys…

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
      font-family:sans-serif;
      height: 100%;
    }
    .from_keys {  
      height: 100%;
    }
    </style>
    <title>test_CEF</title>
  </head>
  <body id="doc_body" onload="dlg_listen()">
    <div class="from_keys" id="info"></div>
    <script>
    dlg_listen = function() {
    document.addEventListener( "keydown", function( event ) {
      var used = event.which // most reliable
      var enter = 13
      var up = 38
      var down = 40
      var tab = 9
      var alt = event.altKey
      // some de-bugg bits
      var msg = '<br><center>' +
                '<br>Identifier: ' + ( event.keyIdentifier || event.key ) +
                 '<br>     which: ' + event.which +
                  '<br>      Code: ' + event.keyCode +
                   '<br>       Alt: ' + event.altKey +
                    '<br>     Shift: ' + event.shiftKey +
                     '<br>      Ctrl: ' + event.ctrlKey +
                      '<br>      Meta: ' + event.metaKey +
                       '<\/center>'
      if ( used ) { info.innerHTML = msg }
    } )
    }
    </script> 
  </body>
</html>

BTW: don’t use numbers for the first char in an ‘id’ an js does’t like them and
you can use names directly like I have with info

**this** only works _inline_ i.e. `onClick="doSomethingWith(this.value)"` 

john

heres the basic keys in action…

the refresh button is for switching to images when you have a model full of un-named groups…

I haven’t plugged that in yet…

the size change is done from ruby, it just take the hash length and adds 19 of each line…

john

while I’m at it this is what I’m adding with the refresh button…

all vanilla javascript and ruby, no bloat…

john