Skip to content
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 our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: internalize FormBuilder #2420

Merged
merged 8 commits into from
Jan 11, 2025
Prev Previous commit
Next Next commit
chore(forms): refactor icon preview of IconURL field
yohanboniface committed Jan 8, 2025

Verified

This commit was signed with the committer’s verified signature.
jorisv Joris Vaillant
commit 63e84d94c4826e8c165476cc325c61f3b0f70fac
29 changes: 12 additions & 17 deletions umap/static/umap/css/form.css
Original file line number Diff line number Diff line change
@@ -382,16 +382,19 @@ input.switch:checked ~ label:after {
box-shadow: inset 0 0 6px 0px #2c3233;
color: var(--color-darkGray);
}
.inheritable .header,
.inheritable {
clear: both;
overflow: hidden;
.inheritable .header .buttons {
padding: 0;
}
.inheritable .header {
margin-bottom: 5px;
display: flex;
align-items: center;
align-content: center;
justify-content: space-between;
}
.inheritable .header label {
padding-top: 6px;
width: initial;
}
.inheritable + .inheritable {
border-top: 1px solid #222;
@@ -401,22 +404,11 @@ input.switch:checked ~ label:after {
.umap-field-iconUrl .action-button,
.inheritable .define,
.inheritable .undefine {
float: inline-end;
width: initial;
min-height: 18px;
line-height: 18px;
margin-bottom: 0;
}
.inheritable .quick-actions {
float: inline-end;
}
.inheritable .quick-actions .formbox {
margin-bottom: 0;
}
.inheritable .quick-actions input {
width: 100px;
margin-inline-end: 5px;
}
.inheritable .define,
.inheritable.undefined .undefine,
.inheritable.undefined .show-on-defined {
@@ -494,12 +486,15 @@ i.info {
padding: 0 5px;
}
.flat-tabs {
display: flex;
display: none;
justify-content: space-around;
font-size: 1.2em;
margin-bottom: 20px;
border-bottom: 1px solid #bebebe;
}
.flat-tabs:has(.flat) {
display: flex;
}
.flat-tabs button {
padding: 10px;
text-decoration: none;
@@ -535,7 +530,7 @@ i.info {
background-color: #999;
text-align: center;
margin-bottom: 5px;
display: block;
display: inline-block;
color: black;
font-weight: bold;
}
8 changes: 5 additions & 3 deletions umap/static/umap/js/modules/form/builder.js
Original file line number Diff line number Diff line change
@@ -205,10 +205,12 @@ export class MutatingForm extends Form {
template = `
<div class="umap-field-${helper.name} formbox inheritable${extraClassName}">
<div class="header" data-ref=header>
<a href="#" class="button undefine" data-ref=undefine>${translate('clear')}</a>
<a href="#" class="button define" data-ref=define>${translate('define')}</a>
<span class="quick-actions show-on-defined" data-ref=actions></span>
${helper.getLabelTemplate()}
<span class="actions show-on-defined" data-ref=actions></span>
<span class="buttons" data-ref=buttons>
<button type="button" class="button undefine" data-ref=undefine>${translate('clear')}</button>
<button type="button" class="button define" data-ref=define>${translate('define')}</button>
</span>
</div>
<div class="show-on-defined" data-ref=container>
${helper.getTemplate()}
24 changes: 11 additions & 13 deletions umap/static/umap/js/modules/form/fields.js
Original file line number Diff line number Diff line change
@@ -664,7 +664,6 @@ Fields.IconUrl = class extends Fields.BlurInput {
getTemplate() {
return `
<div>
<div data-ref=buttons></div>
<div class="flat-tabs" data-ref=tabs></div>
<div class="umap-pictogram-body" data-ref=body>
${super.getTemplate()}
@@ -676,30 +675,33 @@ Fields.IconUrl = class extends Fields.BlurInput {

build() {
super.build()
this.buttons = this.elements.buttons
this.tabs = this.elements.tabs
this.body = this.elements.body
this.footer = this.elements.footer
this.button = Utils.loadTemplate(
`<button type="button" class="button action-button" hidden>${translate('Change')}</button>`
)
this.button.addEventListener('click', () => this.onDefine())
this.elements.buttons.appendChild(this.button)
this.updatePreview()
}

async onDefine() {
this.buttons.innerHTML = ''
this.footer.innerHTML = ''
const [{ pictogram_list }, response, error] = await this.builder._umap.server.get(
this.builder._umap.properties.urls.pictogram_list_json
)
if (!error) this.pictogram_list = pictogram_list
this.buildTabs()
const value = this.value()
if (U.Icon.RECENT.length) this.showRecentTab()
if (Icon.RECENT.length) this.showRecentTab()
else if (!value || Utils.isPath(value)) this.showSymbolsTab()
else if (Utils.isRemoteUrl(value) || Utils.isDataImage(value)) this.showURLTab()
else this.showCharsTab()
const closeButton = Utils.loadTemplate(
`<button type="button" class="button action-button">${translate('Close')}</button>`
)
closeButton.addEventListener('click', () => {
closeButton.addEventListener('click', (event) => {
this.body.innerHTML = ''
this.tabs.innerHTML = ''
this.footer.innerHTML = ''
@@ -758,21 +760,16 @@ Fields.IconUrl = class extends Fields.BlurInput {
}

updatePreview() {
this.buttons.innerHTML = ''
this.elements.actions.innerHTML = ''
this.button.hidden = !this.value() || this.isDefault()
if (this.isDefault()) return
if (!Utils.hasVar(this.value())) {
// Do not try to render URL with variables
const box = Utils.loadTemplate('<div class="umap-pictogram-choice"></div>')
this.buttons.appendChild(box)
this.elements.actions.appendChild(box)
box.addEventListener('click', () => this.onDefine())
const icon = Icon.makeElement(this.value(), box)
}
const text = this.value() ? translate('Change') : translate('Add')
const button = Utils.loadTemplate(
`<button type="button" class="button action-button">${text}</button>`
)
button.addEventListener('click', () => this.onDefine())
this.buttons.appendChild(button)
}

addIconPreview(pictogram, parent) {
@@ -794,6 +791,7 @@ Fields.IconUrl = class extends Fields.BlurInput {
this.sync()
this.unselectAll(this.grid)
container.classList.add('selected')
this.updatePreview()
})
return true // Icon has been added (not filtered)
}
2 changes: 1 addition & 1 deletion umap/tests/integration/test_edit_datalayer.py
Original file line number Diff line number Diff line change
@@ -103,7 +103,7 @@ def test_can_change_icon_class(live_server, openmap, page):
expect(page.locator(".umap-circle-icon")).to_be_hidden()
page.locator(".panel.right").get_by_title("Edit", exact=True).click()
page.get_by_text("Shape properties").click()
page.locator(".umap-field-iconClass a.define").click()
page.locator(".umap-field-iconClass button.define").click()
page.get_by_text("Circle", exact=True).click()
expect(page.locator(".umap-circle-icon")).to_be_visible()
expect(page.locator(".umap-div-icon")).to_be_hidden()
16 changes: 8 additions & 8 deletions umap/tests/integration/test_picto.py
Original file line number Diff line number Diff line change
@@ -57,7 +57,7 @@ def test_can_change_picto_at_map_level(openmap, live_server, page, pictos):
define.click()
# No picto defined yet, so recent should not be visible
expect(page.get_by_text("Recent")).to_be_hidden()
symbols = page.locator(".umap-pictogram-choice")
symbols = page.locator(".umap-pictogram-body .umap-pictogram-choice")
expect(symbols).to_have_count(2)
search = page.locator(".umap-pictogram-body input")
search.type("star")
@@ -90,8 +90,8 @@ def test_can_change_picto_at_datalayer_level(openmap, live_server, page, pictos)
expect(define).to_be_visible()
expect(undefine).to_be_hidden()
define.click()
# Map has an icon defined, so it shold open on Recent tab
symbols = page.locator(".umap-pictogram-choice")
# Map has an icon defined, so it should open on Recent tab
symbols = page.locator(".umap-pictogram-body .umap-pictogram-choice")
expect(page.get_by_text("Recent")).to_be_visible()
expect(symbols).to_have_count(1)
symbol_tab = page.get_by_role("button", name="Symbol")
@@ -128,8 +128,8 @@ def test_can_change_picto_at_marker_level(openmap, live_server, page, pictos):
expect(define).to_be_visible()
expect(undefine).to_be_hidden()
define.click()
# Map has an icon defined, so it shold open on Recent tab
symbols = page.locator(".umap-pictogram-choice")
# Map has an icon defined, so it shuold open on Recent tab
symbols = page.locator(".umap-pictogram-body .umap-pictogram-choice")
expect(page.get_by_text("Recent")).to_be_visible()
expect(symbols).to_have_count(1)
symbol_tab = page.get_by_role("button", name="Symbol")
@@ -180,7 +180,7 @@ def test_can_use_remote_url_as_picto(openmap, live_server, page, pictos):
expect(modify).to_be_visible()
modify.click()
# Should be on Recent tab
symbols = page.locator(".umap-pictogram-choice")
symbols = page.locator(".umap-pictogram-body .umap-pictogram-choice")
expect(page.get_by_text("Recent")).to_be_visible()
expect(symbols).to_have_count(1)

@@ -215,10 +215,10 @@ def test_can_use_char_as_picto(openmap, live_server, page, pictos):
close.click()
edit_settings.click()
shape_settings.click()
preview = page.locator(".umap-pictogram-choice")
preview = page.locator(".header .umap-pictogram-choice")
expect(preview).to_be_visible()
preview.click()
# Should be on URL tab
symbols = page.locator(".umap-pictogram-choice")
symbols = page.locator(".umap-pictogram-body .umap-pictogram-choice")
expect(page.get_by_text("Recent")).to_be_visible()
expect(symbols).to_have_count(1)