jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: show recent picto in a separate tab

Browse source
This commit is contained in:
Yohan Boniface 2024-02-13 10:17:42 +01:00
parent 126e47eef9
commit 2dd7266d21
3 changed files with 71 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
umap/static/umap/js/umap.forms.js
View file

@ -546,7 +546,8 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
if (!error) this.pictogram_list = pictogram_list
this.buildTabs()
const value = this.value()
if (!value || L.Util.isPath(value)) this.showSymbolsTab()
if (U.Icon.RECENT.length) this.showRecentTab()
else if (!value || L.Util.isPath(value)) this.showSymbolsTab()
else if (L.Util.isRemoteUrl(value) || L.Util.isDataImage(value)) this.showURLTab()
else this.showCharsTab()
const closeButton = L.DomUtil.createButton(
@ -566,6 +567,20 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
buildTabs: function () {
this.tabs.innerHTML = ''
if (U.Icon.RECENT.length) {
const recent = L.DomUtil.add(
'button',
'flat tab-recent',
this.tabs,
L._('Recent')
)
L.DomEvent.on(recent, 'click', L.DomEvent.stop).on(
recent,
'click',
this.showRecentTab,
this
)
}
const symbol = L.DomUtil.add(
'button',
'flat tab-symbols',
@ -656,10 +671,10 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
this.updatePreview()
},
addCategory: function (category, items) {
addCategory: function (items, name) {
const parent = L.DomUtil.create('div', 'umap-pictogram-category'),
title = L.DomUtil.add('h6', '', parent, category),
grid = L.DomUtil.create('div', 'umap-pictogram-grid', parent)
if (name) L.DomUtil.add('h6', '', parent, name)
let status = false
for (let item of items) {
status = this.addIconPreview(item, grid) || status
@ -667,15 +682,6 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
if (status) this.grid.appendChild(parent)
},
showLastUsed: function () {
if (U.Icon.LAST_USED.length) {
const items = U.Icon.LAST_USED.map((src) => ({
src,
}))
this.addCategory(L._('Used in this map'), items)
}
},
buildSymbolsList: function () {
this.grid.innerHTML = ''
const categories = {}
@ -688,23 +694,41 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
const sorted = Object.entries(categories).toSorted(([a], [b]) =>
L.Util.naturalSort(a, b)
)
this.showLastUsed()
for (let [category, items] of sorted) {
this.addCategory(category, items)
for (let [name, items] of sorted) {
this.addCategory(items, name)
}
},
buildRecentList: function () {
this.grid.innerHTML = ''
const items = U.Icon.RECENT.map((src) => ({
src,
}))
this.addCategory(items)
},
isDefault: function () {
return !this.value() || this.value() === U.DEFAULT_ICON_URL
},
showSymbolsTab: async function () {
this.openTab('symbols')
addGrid: function (onSearch) {
this.searchInput = L.DomUtil.create('input', '', this.body)
this.searchInput.type = 'search'
this.searchInput.placeholder = L._('Search')
this.grid = L.DomUtil.create('div', '', this.body)
L.DomEvent.on(this.searchInput, 'input', this.buildSymbolsList, this)
L.DomEvent.on(this.searchInput, 'input', onSearch, this)
},
showRecentTab: function () {
if (!U.Icon.RECENT.length) return
this.openTab('recent')
this.addGrid(this.buildRecentList)
this.buildRecentList()
},
showSymbolsTab: function () {
this.openTab('symbols')
this.addGrid(this.buildSymbolsList)
this.buildSymbolsList()
},

12
umap/static/umap/js/umap.icon.js
View file

@ -1,6 +1,6 @@
U.Icon = L.DivIcon.extend({
statics: {
LAST_USED: [],
RECENT: [],
},
initialize: function (map, options) {
this.map = map
@ -17,11 +17,11 @@ U.Icon = L.DivIcon.extend({
}
},
_setLastUsed: function (url) {
_setRecent: function (url) {
if (L.Util.hasVar(url)) return
if (url === this.map.options.default_iconUrl) return
if (U.Icon.LAST_USED.indexOf(url) === -1) {
U.Icon.LAST_USED.push(url)
if (url === U.DEFAULT_ICON_URL) return
if (U.Icon.RECENT.indexOf(url) === -1) {
U.Icon.RECENT.push(url)
}
},
@ -29,7 +29,7 @@ U.Icon = L.DivIcon.extend({
let url
if (this.feature && this.feature._getIconUrl(name)) {
url = this.feature._getIconUrl(name)
this._setLastUsed(url)
this._setRecent(url)
} else {
url = this.options[`${name}Url`]
}

37
umap/tests/integration/test_picto.py
View file

@ -58,6 +58,8 @@ def test_can_change_picto_at_map_level(map, live_server, page, pictos):
expect(define).to_be_visible()
expect(undefine).to_be_hidden()
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")
expect(symbols).to_have_count(2)
search = page.locator(".umap-pictogram-body input")
@ -93,8 +95,14 @@ def test_can_change_picto_at_datalayer_level(map, 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")
expect(symbols).to_have_count(3)
expect(page.get_by_text("Recent")).to_be_visible()
expect(symbols).to_have_count(1)
symbol_tab = page.get_by_role("button", name="Symbol")
expect(symbol_tab).to_be_visible()
symbol_tab.click()
expect(symbols).to_have_count(2)
search = page.locator(".umap-pictogram-body input")
search.type("circle")
expect(symbols).to_have_count(1)
@ -127,8 +135,14 @@ def test_can_change_picto_at_marker_level(map, 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")
expect(symbols).to_have_count(3) # Include "Last used" picto
expect(page.get_by_text("Recent")).to_be_visible()
expect(symbols).to_have_count(1)
symbol_tab = page.get_by_role("button", name="Symbol")
expect(symbol_tab).to_be_visible()
symbol_tab.click()
expect(symbols).to_have_count(2)
search = page.locator(".umap-pictogram-body input")
search.type("circle")
expect(symbols).to_have_count(1)
@ -157,10 +171,6 @@ def test_can_use_remote_url_as_picto(map, live_server, page, pictos):
define = page.locator(".umap-field-iconUrl .define")
expect(define).to_be_visible()
define.click()
expect(page.get_by_text("Used in this map")).to_be_hidden()
# Only default symbols
symbols = page.locator(".umap-pictogram-choice")
expect(symbols).to_have_count(2)
url_tab = page.get_by_role("button", name="URL")
input_el = page.get_by_placeholder("Add image URL")
expect(input_el).to_be_hidden()
@ -179,13 +189,10 @@ def test_can_use_remote_url_as_picto(map, live_server, page, pictos):
modify = page.locator(".umap-field-iconUrl").get_by_text("Change")
expect(modify).to_be_visible()
modify.click()
# Should be on URL tab
expect(input_el).to_be_visible()
# Symbol should be visible in symbols b
symbols_tab = page.get_by_role("button", name="Symbol")
symbols_tab.click()
expect(page.get_by_text("Used in this map")).to_be_visible()
expect(symbols).to_have_count(3)
# Should be on Recent tab
symbols = page.locator(".umap-pictogram-choice")
expect(page.get_by_text("Recent")).to_be_visible()
expect(symbols).to_have_count(1)
def test_can_use_char_as_picto(map, live_server, page, pictos):
@ -225,4 +232,6 @@ def test_can_use_char_as_picto(map, live_server, page, pictos):
expect(preview).to_be_visible()
preview.click()
# Should be on URL tab
expect(input_el).to_be_visible()
symbols = page.locator(".umap-pictogram-choice")
expect(page.get_by_text("Recent")).to_be_visible()
expect(symbols).to_have_count(1)