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

Dan editable header update#1061

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
chillenberger merged 2 commits intomasterfromdan-editable-header-update
Oct 10, 2023
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
static targets = ["input", "header"]
static targets = ["input", "header", "error"]

initialize() {
this.inputTarget.addEventListener("focusout", (e) => {
this.headerTarget.innerHTML = e.target.value
this.toggleEditor()
})
focusout(e) {
this.headerTarget.innerHTML = e.target.value
this.toggleEditor()
}

// blur input on enter
this.inputTarget.addEventListener("keydown", (e) => {
if(e.key == "Enter") {
this.inputTarget.blur()
}
})
blur() {
this.inputTarget.blur()
}

toggleEditor(e) {
Expand All@@ -32,4 +27,13 @@ export default class extends Controller {
this.headerTarget.style.display = "flex"
}
}

error(e) {
this.errorTarget.innerHTML = e.detail
this.errorTarget.style.display = "block"
}

clear() {
this.errorTarget.style.display = "none"
}
}
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,7 @@ pub struct EditableHeader {
header_type: Headers,
input_target: StimulusTarget,
input_name: Option<String>,
id: String,
}

impl EditableHeader {
Expand All@@ -41,6 +42,7 @@ impl EditableHeader {
header_type: Headers::H3,
input_target: StimulusTarget::new(),
input_name: None,
id: String::from(""),
}
}

Expand All@@ -63,6 +65,11 @@ impl EditableHeader {
self.input_name = Some(input_name.to_string());
self
}

pub fn id(mut self, id: &str) -> Self {
self.id = id.to_string();
self
}
}

component!(EditableHeader);
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
<div data-controller="inputs-text-editable-header">
<div
id="<%= id %>"
data-controller="inputs-text-editable-header"
data-action="error->inputs-text-editable-header#error clear->inputs-text-editable-header#clear">
<div class="editable-header-container" style="display: block"
data-action="click->inputs-text-editable-header#toggleEditor">
<<%= header_type.to_string() %> class="align-items-center <%= header_type.to_string() %> d-flex gap-3">
Expand All@@ -9,6 +12,7 @@
<input type="text" class="form-control" value="<%= value %>" style="display: none" maxlength="50" autocomplete="off"
name='<%= input_name.unwrap_or_else(|| "".to_string()) %>'
data-inputs-text-editable-header-target="input"
data-action="keydown.enter->inputs-text-editable-header#blur focusout->inputs-text-editable-header#focusout"
<%- input_target %> >

<div>
Expand All@@ -17,6 +21,7 @@
</span>
</div>
</<%= header_type.to_string() %>>
<div class="text-legal text-error" style="margin-top: -0.5rem; display: none" data-inputs-text-editable-header-target="error">error message</div>
</div>


Expand Down
3 changes: 3 additions & 0 deletionspgml-dashboard/static/css/scss/base/_typography.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -26,6 +26,9 @@
line-height: 16px;
}

.text-error {
color: #{$error} !important;
}
.text-black {
color: #{$gray-900} !important;
}
Expand Down
27 changes: 27 additions & 0 deletionspgml-dashboard/static/js/playground.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,34 @@
import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
static targets = ["test"]

initialize() {
this.errorH3 = new CustomEvent("error", { detail: "message passed through event h3" })
this.clearH3 = new Event("clear")
this.errorH2 = new CustomEvent("error", { detail: "message passed through event h2" })
this.clearH2 = new Event("clear")
}


selectRow(event) {
console.log('dataset: ', event.currentTarget.dataset)
}

addError(event) {
document.getElementById("header-3").dispatchEvent(this.errorH3)
}

clearError(event) {
document.getElementById("header-3").dispatchEvent(this.clearH3)
}

addErrorH2() {
document.getElementById("header-2").dispatchEvent(this.errorH2)
}

clearErrorH2() {
document.getElementById("header-2").dispatchEvent(this.clearH2)
}

}
11 changes: 7 additions & 4 deletionspgml-dashboard/templates/content/playground.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -133,9 +133,11 @@ <h3 class="h3">Inputs</h3>
<div class="d-flex flex-row justify-content-between">
<%+ EditableHeader::new()
.value("Size H2")
.header_type(Headers::H2) %>
.header_type(Headers::H2)
.id("header-2") %>
<div>
this is a thing that takes up space
<button data-action="playground#addErrorH2">Add an Error</button>
<button data-action="playground#clearErrorH2">Clear Error</button>
</div>
</div>
<div class="d-flex flex-row justify-content-between">
Expand All@@ -147,9 +149,10 @@ <h3 class="h3">Inputs</h3>
StimulusTarget::new()
.controller("some-existing-controller")
.name("desired-target-name")
) %>
).id("header-3") %>
<div>
this is a thing that takes up space
<button data-action="playground#addError">Add an Error</button>
<button data-action="playground#clearError">Clear Error</button>
</div>
</div>
</div>
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp