Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitedb4074

Browse files
Dan editable header update (#1061)
1 parentff02581 commitedb4074

File tree

6 files changed

+66
-17
lines changed

6 files changed

+66
-17
lines changed
Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
import{Controller}from'@hotwired/stimulus'
22

33
exportdefaultclassextendsController{
4-
statictargets=["input","header"]
4+
statictargets=["input","header","error"]
55

6-
initialize(){
7-
this.inputTarget.addEventListener("focusout",(e)=>{
8-
this.headerTarget.innerHTML=e.target.value
9-
this.toggleEditor()
10-
})
6+
focusout(e){
7+
this.headerTarget.innerHTML=e.target.value
8+
this.toggleEditor()
9+
}
1110

12-
// blur input on enter
13-
this.inputTarget.addEventListener("keydown",(e)=>{
14-
if(e.key=="Enter"){
15-
this.inputTarget.blur()
16-
}
17-
})
11+
blur(){
12+
this.inputTarget.blur()
1813
}
1914

2015
toggleEditor(e){
@@ -32,4 +27,13 @@ export default class extends Controller {
3227
this.headerTarget.style.display="flex"
3328
}
3429
}
30+
31+
error(e){
32+
this.errorTarget.innerHTML=e.detail
33+
this.errorTarget.style.display="block"
34+
}
35+
36+
clear(){
37+
this.errorTarget.style.display="none"
38+
}
3539
}

‎pgml-dashboard/src/components/inputs/text/editable_header/mod.rs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ pub struct EditableHeader {
3232
header_type:Headers,
3333
input_target:StimulusTarget,
3434
input_name:Option<String>,
35+
id:String,
3536
}
3637

3738
implEditableHeader{
@@ -41,6 +42,7 @@ impl EditableHeader {
4142
header_type:Headers::H3,
4243
input_target:StimulusTarget::new(),
4344
input_name:None,
45+
id:String::from(""),
4446
}
4547
}
4648

@@ -63,6 +65,11 @@ impl EditableHeader {
6365
self.input_name =Some(input_name.to_string());
6466
self
6567
}
68+
69+
pubfnid(mutself,id:&str) ->Self{
70+
self.id = id.to_string();
71+
self
72+
}
6673
}
6774

6875
component!(EditableHeader);

‎pgml-dashboard/src/components/inputs/text/editable_header/template.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
<divdata-controller="inputs-text-editable-header">
1+
<div
2+
id="<%= id %>"
3+
data-controller="inputs-text-editable-header"
4+
data-action="error->inputs-text-editable-header#error clear->inputs-text-editable-header#clear">
25
<divclass="editable-header-container"style="display: block"
36
data-action="click->inputs-text-editable-header#toggleEditor">
47
<<%= header_type.to_string() %> class="align-items-center<%= header_type.to_string() %> d-flex gap-3">
@@ -9,6 +12,7 @@
912
<inputtype="text"class="form-control"value="<%= value %>"style="display: none"maxlength="50"autocomplete="off"
1013
name='<%= input_name.unwrap_or_else(|| "".to_string()) %>'
1114
data-inputs-text-editable-header-target="input"
15+
data-action="keydown.enter->inputs-text-editable-header#blur focusout->inputs-text-editable-header#focusout"
1216
<%- input_target %>>
1317

1418
<div>
@@ -17,6 +21,7 @@
1721
</span>
1822
</div>
1923
</<%= header_type.to_string() %>>
24+
<divclass="text-legal text-error"style="margin-top: -0.5rem; display: none"data-inputs-text-editable-header-target="error">error message</div>
2025
</div>
2126

2227

‎pgml-dashboard/static/css/scss/base/_typography.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@
2626
line-height:16px;
2727
}
2828

29+
.text-error {
30+
color:#{$error}!important;
31+
}
2932
.text-black {
3033
color:#{$gray-900}!important;
3134
}
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,34 @@
11
import{Controller}from'@hotwired/stimulus'
22

33
exportdefaultclassextendsController{
4+
statictargets=["test"]
5+
6+
initialize(){
7+
this.errorH3=newCustomEvent("error",{detail:"message passed through event h3"})
8+
this.clearH3=newEvent("clear")
9+
this.errorH2=newCustomEvent("error",{detail:"message passed through event h2"})
10+
this.clearH2=newEvent("clear")
11+
}
12+
13+
414
selectRow(event){
515
console.log('dataset: ',event.currentTarget.dataset)
616
}
17+
18+
addError(event){
19+
document.getElementById("header-3").dispatchEvent(this.errorH3)
20+
}
21+
22+
clearError(event){
23+
document.getElementById("header-3").dispatchEvent(this.clearH3)
24+
}
25+
26+
addErrorH2(){
27+
document.getElementById("header-2").dispatchEvent(this.errorH2)
28+
}
29+
30+
clearErrorH2(){
31+
document.getElementById("header-2").dispatchEvent(this.clearH2)
32+
}
33+
734
}

‎pgml-dashboard/templates/content/playground.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -133,9 +133,11 @@ <h3 class="h3">Inputs</h3>
133133
<divclass="d-flex flex-row justify-content-between">
134134
<%+ EditableHeader::new()
135135
.value("Size H2")
136-
.header_type(Headers::H2) %>
136+
.header_type(Headers::H2)
137+
.id("header-2") %>
137138
<div>
138-
this is a thing that takes up space
139+
<buttondata-action="playground#addErrorH2">Add an Error</button>
140+
<buttondata-action="playground#clearErrorH2">Clear Error</button>
139141
</div>
140142
</div>
141143
<divclass="d-flex flex-row justify-content-between">
@@ -147,9 +149,10 @@ <h3 class="h3">Inputs</h3>
147149
StimulusTarget::new()
148150
.controller("some-existing-controller")
149151
.name("desired-target-name")
150-
) %>
152+
).id("header-3") %>
151153
<div>
152-
this is a thing that takes up space
154+
<buttondata-action="playground#addError">Add an Error</button>
155+
<buttondata-action="playground#clearError">Clear Error</button>
153156
</div>
154157
</div>
155158
</div>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp