default search on enter and start focus on regex

This commit is contained in:
David Botton 2024-07-04 15:42:36 -04:00
parent 0e306f6f12
commit 4523916e74
2 changed files with 54 additions and 43 deletions

View file

@ -1,6 +1,8 @@
<data id="I3929109423" data-in-package="clog-tools" data-custom-slots="" <data id="I3929110633" data-in-package="clog-tools" data-custom-slots=""
data-clog-next-id="6" data-clog-title="panel-search"></data> data-clog-next-id="6" data-clog-title="panel-search"></data>
<div data-clog-type="grid" data-clog-name="result-grid" <form action="#" onsubmit="return false;" data-clog-name="search-form"
data-clog-type="form">
<div data-clog-type="grid" data-clog-name="result-grid"
style="display: grid; box-sizing: content-box; position: absolute; inset: 5px; grid-template: &quot;a a&quot; 1fr &quot;d d&quot; 28px &quot;b c&quot; 28px / 1fr 80px; gap: 5px;" style="display: grid; box-sizing: content-box; position: absolute; inset: 5px; grid-template: &quot;a a&quot; 1fr &quot;d d&quot; 28px &quot;b c&quot; 28px / 1fr 80px; gap: 5px;"
class=""><select data-clog-type="listbox" size="4" class=""><select data-clog-type="listbox" size="4"
data-clog-name="result-box" data-clog-name="result-box"
@ -12,10 +14,11 @@
placeholder="directory to search" tabindex="3"><input type="TEXT" placeholder="directory to search" tabindex="3"><input type="TEXT"
value="" data-clog-type="input" data-clog-name="grep-input" value="" data-clog-type="input" data-clog-name="grep-input"
style="box-sizing: content-box; position: static; left: 50px; top: 8px; grid-area: b;" style="box-sizing: content-box; position: static; left: 50px; top: 8px; grid-area: b;"
placeholder="search regex" tabindex="4"><button data-clog-type="button" placeholder="search regex" tabindex="4" data-on-create="(setf (attribute target &quot;autofocus&quot;) &quot;true&quot;)
(focus target)"><input type="submit" value="Search" data-clog-type="input"
data-clog-name="search-button" data-clog-name="search-button"
style="box-sizing: content-box; position: static; height: 22px; grid-area: c;" style="box-sizing: content-box; position: static; height: 22px; grid-area: c;"
data-on-click="(panel-search-on-click panel target)" class="" data-on-click="(panel-search-on-click panel target)" class=""
data-on-create="(setf (attribute target &quot;autofocus&quot;) &quot;true&quot;) tabindex="1">
(focus target)" tabindex="1">Search</button> </div>
</div> </form>

View file

@ -3,46 +3,54 @@
(defclass panel-search (clog:clog-panel) (defclass panel-search (clog:clog-panel)
((search-button :reader search-button) ((search-button :reader search-button)
(grep-input :reader grep-input) (dir-input :reader dir-input) (grep-input :reader grep-input) (dir-input :reader dir-input)
(result-box :reader result-box) (result-grid :reader result-grid))) (result-box :reader result-box) (result-grid :reader result-grid)
(search-form :reader search-form)))
(defun create-panel-search (defun create-panel-search
(clog-obj &key hidden class style html-id (auto-place t)) (clog-obj &key hidden class style html-id (auto-place t))
(let ((panel (let ((panel
(change-class (change-class
(clog:create-div clog-obj :content (clog:create-div clog-obj :content
"<div style=\"display: grid; box-sizing: content-box; position: absolute; inset: 5px; grid-template: &quot;a a&quot; 1fr &quot;d d&quot; 28px &quot;b c&quot; 28px / 1fr 80px; gap: 5px;\" "<form action=\"#\" onsubmit=\"return false;\" id=\"CLOGB3929110554\"
class=\"\" id=\"CLOGB3929109399\" data-clog-name=\"result-grid\"><select size=\"4\" data-clog-name=\"search-form\">
<div style=\"display: grid; box-sizing: content-box; position: absolute; inset: 5px; grid-template: &quot;a a&quot; 1fr &quot;d d&quot; 28px &quot;b c&quot; 28px / 1fr 80px; gap: 5px;\"
class=\"\" id=\"CLOGB3929110555\" data-clog-name=\"result-grid\"><select
size=\"4\"
style=\"box-sizing: content-box; position: static; grid-area: a;\" style=\"box-sizing: content-box; position: static; grid-area: a;\"
class=\"w3-small\" tabindex=\"2\" id=\"CLOGB3929109400\" class=\"w3-small\" tabindex=\"2\" id=\"CLOGB3929110556\"
data-clog-name=\"result-box\"></select><input type=\"TEXT\" value=\"\" data-clog-name=\"result-box\"></select><input type=\"TEXT\" value=\"\"
style=\"box-sizing: content-box; position: static; grid-area: d;\" style=\"box-sizing: content-box; position: static; grid-area: d;\"
placeholder=\"directory to search\" tabindex=\"3\" id=\"CLOGB3929109401\" placeholder=\"directory to search\" tabindex=\"3\" id=\"CLOGB3929110557\"
data-clog-name=\"dir-input\"><input type=\"TEXT\" value=\"\" data-clog-name=\"dir-input\"><input type=\"TEXT\" value=\"\"
style=\"box-sizing: content-box; position: static; left: 50px; top: 8px; grid-area: b;\" style=\"box-sizing: content-box; position: static; left: 50px; top: 8px; grid-area: b;\"
placeholder=\"search regex\" tabindex=\"4\" id=\"CLOGB3929109402\" placeholder=\"search regex\" tabindex=\"4\" id=\"CLOGB3929110558\"
data-clog-name=\"grep-input\"><button data-clog-name=\"grep-input\"><input type=\"submit\" value=\"Search\"
style=\"box-sizing: content-box; position: static; height: 22px; grid-area: c;\" style=\"box-sizing: content-box; position: static; height: 22px; grid-area: c;\"
class=\"\" tabindex=\"1\" id=\"CLOGB3929109403\" class=\"\" tabindex=\"1\" id=\"CLOGB3929110559\"
data-clog-name=\"search-button\">Search</button> data-clog-name=\"search-button\">
</div>" </div>
</form>"
:hidden hidden :class class :style style :html-id :hidden hidden :class class :style style :html-id
html-id :auto-place auto-place) html-id :auto-place auto-place)
'panel-search))) 'panel-search)))
(setf (slot-value panel 'search-button) (setf (slot-value panel 'search-button)
(attach-as-child clog-obj "CLOGB3929109403" :clog-type (attach-as-child clog-obj "CLOGB3929110559" :clog-type
'clog:clog-button :new-id t)) 'clog:clog-form-element :new-id t))
(setf (slot-value panel 'grep-input) (setf (slot-value panel 'grep-input)
(attach-as-child clog-obj "CLOGB3929109402" :clog-type (attach-as-child clog-obj "CLOGB3929110558" :clog-type
'clog:clog-form-element :new-id t)) 'clog:clog-form-element :new-id t))
(setf (slot-value panel 'dir-input) (setf (slot-value panel 'dir-input)
(attach-as-child clog-obj "CLOGB3929109401" :clog-type (attach-as-child clog-obj "CLOGB3929110557" :clog-type
'clog:clog-form-element :new-id t)) 'clog:clog-form-element :new-id t))
(setf (slot-value panel 'result-box) (setf (slot-value panel 'result-box)
(attach-as-child clog-obj "CLOGB3929109400" :clog-type (attach-as-child clog-obj "CLOGB3929110556" :clog-type
'clog:clog-select :new-id t)) 'clog:clog-select :new-id t))
(setf (slot-value panel 'result-grid) (setf (slot-value panel 'result-grid)
(attach-as-child clog-obj "CLOGB3929109399" :clog-type (attach-as-child clog-obj "CLOGB3929110555" :clog-type
'clog:clog-div :new-id t)) 'clog:clog-div :new-id t))
(let ((target (search-button panel))) (setf (slot-value panel 'search-form)
(attach-as-child clog-obj "CLOGB3929110554" :clog-type
'clog:clog-form :new-id t))
(let ((target (grep-input panel)))
(declare (ignorable target)) (declare (ignorable target))
(setf (attribute target "autofocus") "true") (setf (attribute target "autofocus") "true")
(focus target)) (focus target))