mirror of
https://github.com/rabbibotton/clog.git
synced 2025-12-06 02:30:42 -08:00
default search on enter and start focus on regex
This commit is contained in:
David Botton
parent
0e306f6f12
commit
4523916e74
2 changed files with 54 additions and 43 deletions
43
tools/panel-search.clog
vendored
43
tools/panel-search.clog
vendored
|
|
@ -1,21 +1,24 @@
|
|||
<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>
|
||||
<div data-clog-type="grid" data-clog-name="result-grid"
|
||||
style="display: grid; box-sizing: content-box; position: absolute; inset: 5px; grid-template: "a a" 1fr "d d" 28px "b c" 28px / 1fr 80px; gap: 5px;"
|
||||
class=""><select data-clog-type="listbox" size="4"
|
||||
data-clog-name="result-box"
|
||||
style="box-sizing: content-box; position: static; grid-area: a;"
|
||||
class="w3-small" tabindex="2"></select><input type="TEXT" value=""
|
||||
data-clog-type="input" data-clog-name="dir-input"
|
||||
style="box-sizing: content-box; position: static; grid-area: d;"
|
||||
data-on-change="(panel-search-dir-change panel target)"
|
||||
placeholder="directory to search" tabindex="3"><input type="TEXT"
|
||||
value="" data-clog-type="input" data-clog-name="grep-input"
|
||||
style="box-sizing: content-box; position: static; left: 50px; top: 8px; grid-area: b;"
|
||||
placeholder="search regex" tabindex="4"><button data-clog-type="button"
|
||||
data-clog-name="search-button"
|
||||
style="box-sizing: content-box; position: static; height: 22px; grid-area: c;"
|
||||
data-on-click="(panel-search-on-click panel target)" class=""
|
||||
data-on-create="(setf (attribute target "autofocus") "true")
|
||||
(focus target)" tabindex="1">Search</button>
|
||||
</div>
|
||||
<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: "a a" 1fr "d d" 28px "b c" 28px / 1fr 80px; gap: 5px;"
|
||||
class=""><select data-clog-type="listbox" size="4"
|
||||
data-clog-name="result-box"
|
||||
style="box-sizing: content-box; position: static; grid-area: a;"
|
||||
class="w3-small" tabindex="2"></select><input type="TEXT" value=""
|
||||
data-clog-type="input" data-clog-name="dir-input"
|
||||
style="box-sizing: content-box; position: static; grid-area: d;"
|
||||
data-on-change="(panel-search-dir-change panel target)"
|
||||
placeholder="directory to search" tabindex="3"><input type="TEXT"
|
||||
value="" data-clog-type="input" data-clog-name="grep-input"
|
||||
style="box-sizing: content-box; position: static; left: 50px; top: 8px; grid-area: b;"
|
||||
placeholder="search regex" tabindex="4" data-on-create="(setf (attribute target "autofocus") "true")
|
||||
(focus target)"><input type="submit" value="Search" data-clog-type="input"
|
||||
data-clog-name="search-button"
|
||||
style="box-sizing: content-box; position: static; height: 22px; grid-area: c;"
|
||||
data-on-click="(panel-search-on-click panel target)" class=""
|
||||
tabindex="1">
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -3,46 +3,54 @@
|
|||
(defclass panel-search (clog:clog-panel)
|
||||
((search-button :reader search-button)
|
||||
(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
|
||||
(clog-obj &key hidden class style html-id (auto-place t))
|
||||
(let ((panel
|
||||
(change-class
|
||||
(clog:create-div clog-obj :content
|
||||
"<div style=\"display: grid; box-sizing: content-box; position: absolute; inset: 5px; grid-template: "a a" 1fr "d d" 28px "b c" 28px / 1fr 80px; gap: 5px;\"
|
||||
class=\"\" id=\"CLOGB3929109399\" data-clog-name=\"result-grid\"><select size=\"4\"
|
||||
style=\"box-sizing: content-box; position: static; grid-area: a;\"
|
||||
class=\"w3-small\" tabindex=\"2\" id=\"CLOGB3929109400\"
|
||||
data-clog-name=\"result-box\"></select><input type=\"TEXT\" value=\"\"
|
||||
style=\"box-sizing: content-box; position: static; grid-area: d;\"
|
||||
placeholder=\"directory to search\" tabindex=\"3\" id=\"CLOGB3929109401\"
|
||||
data-clog-name=\"dir-input\"><input type=\"TEXT\" value=\"\"
|
||||
style=\"box-sizing: content-box; position: static; left: 50px; top: 8px; grid-area: b;\"
|
||||
placeholder=\"search regex\" tabindex=\"4\" id=\"CLOGB3929109402\"
|
||||
data-clog-name=\"grep-input\"><button
|
||||
style=\"box-sizing: content-box; position: static; height: 22px; grid-area: c;\"
|
||||
class=\"\" tabindex=\"1\" id=\"CLOGB3929109403\"
|
||||
data-clog-name=\"search-button\">Search</button>
|
||||
</div>"
|
||||
"<form action=\"#\" onsubmit=\"return false;\" id=\"CLOGB3929110554\"
|
||||
data-clog-name=\"search-form\">
|
||||
<div style=\"display: grid; box-sizing: content-box; position: absolute; inset: 5px; grid-template: "a a" 1fr "d d" 28px "b c" 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;\"
|
||||
class=\"w3-small\" tabindex=\"2\" id=\"CLOGB3929110556\"
|
||||
data-clog-name=\"result-box\"></select><input type=\"TEXT\" value=\"\"
|
||||
style=\"box-sizing: content-box; position: static; grid-area: d;\"
|
||||
placeholder=\"directory to search\" tabindex=\"3\" id=\"CLOGB3929110557\"
|
||||
data-clog-name=\"dir-input\"><input type=\"TEXT\" value=\"\"
|
||||
style=\"box-sizing: content-box; position: static; left: 50px; top: 8px; grid-area: b;\"
|
||||
placeholder=\"search regex\" tabindex=\"4\" id=\"CLOGB3929110558\"
|
||||
data-clog-name=\"grep-input\"><input type=\"submit\" value=\"Search\"
|
||||
style=\"box-sizing: content-box; position: static; height: 22px; grid-area: c;\"
|
||||
class=\"\" tabindex=\"1\" id=\"CLOGB3929110559\"
|
||||
data-clog-name=\"search-button\">
|
||||
</div>
|
||||
</form>"
|
||||
:hidden hidden :class class :style style :html-id
|
||||
html-id :auto-place auto-place)
|
||||
'panel-search)))
|
||||
(setf (slot-value panel 'search-button)
|
||||
(attach-as-child clog-obj "CLOGB3929109403" :clog-type
|
||||
'clog:clog-button :new-id t))
|
||||
(attach-as-child clog-obj "CLOGB3929110559" :clog-type
|
||||
'clog:clog-form-element :new-id t))
|
||||
(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))
|
||||
(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))
|
||||
(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))
|
||||
(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))
|
||||
(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))
|
||||
(setf (attribute target "autofocus") "true")
|
||||
(focus target))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue