www/playground.html - master - kopython/_hyperscript

www/playground.html
89 строк4 KB
Deniz Akşimşek
Missing.css (#281)
27 май 2022, 20:48
27 май 2022, 20:4825b6553
---
layout: layout.njk
title: ///_hyperscript
---

<h1>Playground</h1>

<p>Below is the hyperscript playground.  You can enter some HTML with hyperscript in it and click the load button
   or hit ctrl-enter in the editor, and the code will be loaded into the content.  You can also look at the source
   for this page, which is written entirely in hyperscript.  :)</p>

<div class="basicgrid">
    <div class="col-2">

        <div class="tool-bar">
            <h2 style="margin: 0;">HTML (ctrl-enter to load)</h2>
            <label>
                Load Example:
                <select style="width: 10ch;"
                        _="on change
                             if my value is not 'Clear'
                               fetch `/playground/${my value}`
                               put it into #code.value
                               send loadCode to #code
                             else
                               put '' into #code.value
                               put '' into #contents">
                    <option>Clear</option>
                    <option value="hide_remove">Hide Then Remove</option>
                    <option value="drag">Drag</option>
                    <option value="modal">Modal</option>
                    <option value="goto">Go To Buttons</option>
                    <option value="input_mirroring">Input Mirror</option>
                    <option value="password_visibility">Password Hiding</option>
                </select>
            </label>
          </div>
        <p><textarea id="code" class="monospace" rows="15" style="width: 100%;"
                  _="on keyup[ctrlKey and key is 'Enter'] or loadCode
                          transition #contents opacity to 0 over 10ms
                          put my value into #contents
                          transition #contents opacity to 1
                          call _hyperscript.processNode(#contents)

                     on exception from #contents
                          send showError(error: the message of the event's detail's error) to #eval-contents"></textarea>
        <div>
            <button class="btn primary" _="on click send loadCode to #code">
                Load HTML Into Content
            </button>
        </div>
    </div>
    <div class="col-1">
        <h2>Eval</h2>
        <input placeholder="Enter an expression..." type="text"
               _="def evalHyperscript(src)
                    send showResult(result: JSON.stringify(_hyperscript(src), null, 2)) to #eval-contents
                  catch e
                    send showError(error: e.message) to #eval-contents
                  end

                  on keyup[key is 'Enter']
                     if my value is not empty
                       call evalHyperscript(my value)
                     else
                       send showResult(result: '') to #eval-contents
                     end
                     select() me"/>
        <h2>Output</h2>
        <div id="eval-contents" style="width: 100%; height:100%;font-family:'Courier New', monospace; overflow: auto; max-height: 230px"
             _="on showResult(result)
                   transition #eval-contents opacity to 0 over 50ms
                   put result into me
                   transition #eval-contents opacity to 1 over 50ms

                on showError(error)
                   log event
                   trigger showResult(result: error)
                   transition background-color to orangered over 100ms
                   transition background-color to initial">

        </div>
        <small><a href="#" _="on click send showResult(result: '') to #eval-contents">clear</a></small>
    </div>
</div>
<div class="box">
    <h2>Content</h2>
    <div id="contents"></div>
</div>