From 07833e57e1161611d1db6abc5a6d03439fb043bd Mon Sep 17 00:00:00 2001 From: gaetanbrl Date: Wed, 27 Nov 2024 16:49:50 +0100 Subject: [PATCH 1/3] fix get active layer by dom query roll back id retrieve method pretty code add free component and adapt Display free component pretty code add free component doc ref --- docs/doc_user/param_data.rst | 1 + js/mviewerstudio.js | 2 +- lib/mv.js | 9 ++++ lib/template-generator/ComponentsSelector.js | 2 + lib/template-generator/TemplateGenerator.js | 2 + .../components/forms/TextArea.js | 35 +++++++++++++ .../components/library/FreeComponent.js | 51 +++++++++++++++++++ .../components/library/TemplateComponent.js | 33 +++++++----- mviewerstudio.i18n.json | 2 + 9 files changed, 124 insertions(+), 13 deletions(-) create mode 100644 lib/template-generator/components/forms/TextArea.js create mode 100644 lib/template-generator/components/library/FreeComponent.js diff --git a/docs/doc_user/param_data.rst b/docs/doc_user/param_data.rst index b1440c76..5cae20a4 100644 --- a/docs/doc_user/param_data.rst +++ b/docs/doc_user/param_data.rst @@ -276,6 +276,7 @@ Il est maintenant nécessaire de peupler le bloc de gauche avec des composants e * ``Chiffre clé`` : composant permettant d’afficher un chiffre clé à mettre en avant et nécessitant une valeur de type « nombre » en entrée. * ``Liste`` : composant permettant d’afficher une liste et nécessitant un champ composé d’une liste comme indiqué dans la `documentation mviewer `_. * ``Texte`` : composant permettant d’afficher un texte et nécessitant une valeur de type texte en entrée. +* ``Libre`` : composant permettant de saisir librement le contenu du template comme dans un fichier Mustache (.mst). Sélectionnez un composant et cliquez sur "Enregistrer" pour l’ajouter. Il n’est possible d’ajouter qu’un composant à la fois, veuillez réitérer l’opération pour ajouter des composants supplémentaires. diff --git a/js/mviewerstudio.js b/js/mviewerstudio.js index 953c35ec..12c2beae 100644 --- a/js/mviewerstudio.js +++ b/js/mviewerstudio.js @@ -412,7 +412,7 @@ var editLayer = function (item, themeid, layerid) { mv.setCurrentLayerId(layerid); var element = $(item).parent().parent(); var layerid = element.attr("data-layerid"); - + element.addClass("active"); if (layerid != "undefined") { $("#mod-layerOptions").modal("show"); mv.showLayerOptions(element, themeid, layerid); diff --git a/lib/mv.js b/lib/mv.js index 6c5eed45..a83613a7 100755 --- a/lib/mv.js +++ b/lib/mv.js @@ -49,6 +49,15 @@ var mv = (function () { layerid = el.attr("data-layerid"); } var themeid = mv.getCurrentThemeId(); + if (!themeid) { + // search theme id from config object + themeid = Object.keys(config.themes) + .filter((f) => { + const them = config.themes[f]; + return them.layers.filter((l) => l.id === layerid)?.length; + }) + .filter((x) => x)[0]; + } return config.themes[themeid].layers.find((l) => l.id === layerid); }, diff --git a/lib/template-generator/ComponentsSelector.js b/lib/template-generator/ComponentsSelector.js index 89700571..2549de76 100644 --- a/lib/template-generator/ComponentsSelector.js +++ b/lib/template-generator/ComponentsSelector.js @@ -6,6 +6,7 @@ import { header as imageHeader } from "./components/library/ImageComponent.js"; import { header as buttonHeader } from "./components/library/ButtonComponent.js"; import { header as numberHeader } from "./components/library/NumbersComponent.js"; import { header as listHeader } from "./components/library/ListComponent.js"; +import { header as freeHeader } from "./components/library/FreeComponent.js"; const headers = [ h1Header(), @@ -16,6 +17,7 @@ const headers = [ numberHeader(), listHeader(), textHeader(), + freeHeader(), ]; /** diff --git a/lib/template-generator/TemplateGenerator.js b/lib/template-generator/TemplateGenerator.js index 37726e80..0871d0c1 100644 --- a/lib/template-generator/TemplateGenerator.js +++ b/lib/template-generator/TemplateGenerator.js @@ -12,6 +12,7 @@ import ButtonComponent from "./components/library/ButtonComponent.js"; import ListComponent from "./components/library/ListComponent.js"; import NumbersComponent from "./components/library/NumbersComponent.js"; import IframeComponent from "./components/library/IframeComponent.js"; +import FreeComponent from "./components/library/FreeComponent.js"; import { RightPanelLocation } from "./components/content/RightPanelLocation.js"; import { BottomPanelLocation } from "./components/content/BottomPanelLocation.js"; import { BottomPanelHtmlPreview } from "./components/content/BottomPanelLocation.js"; @@ -24,6 +25,7 @@ const components = [ new NumbersComponent(), new IframeComponent(), new ImageComponent(), + new FreeComponent(), ]; const maxItemsByCol = 3; diff --git a/lib/template-generator/components/forms/TextArea.js b/lib/template-generator/components/forms/TextArea.js new file mode 100644 index 00000000..e46ab6b6 --- /dev/null +++ b/lib/template-generator/components/forms/TextArea.js @@ -0,0 +1,35 @@ +class TextArea { + uuid = mv.uuidv4(); + value = ""; + label = "Saisir un contenu"; + constructor(value = "", label) { + this.value = value; + this.label = label; + } + render = () => { + return ` +
+ +
+ +
+
+ `; + }; + set = ({ label, value }) => { + this.value = value || this.value; + this.label = label || this.label; + }; + getValue = () => { + return document.getElementById(this.uuid).value; + }; +} + +export default TextArea; diff --git a/lib/template-generator/components/library/FreeComponent.js b/lib/template-generator/components/library/FreeComponent.js new file mode 100644 index 00000000..ad8c908a --- /dev/null +++ b/lib/template-generator/components/library/FreeComponent.js @@ -0,0 +1,51 @@ +import TemplateComponent from "./TemplateComponent.js"; +import TextArea from "../forms/TextArea.js"; + +export const header = () => ({ + icon: "bi bi-body-text", + id: mv.uuidv4(), + title: "template.free.title", + click: () => FreeComponent, + class: "FreeComponent", +}); + +const defaultTypeFields = []; + +const attributes = ["data-type-selector", "data-value"]; + +export default class FreeComponent extends TemplateComponent { + constructor(customHeader, defaultAttrValues) { + let defaultValues = new Map([ + //["data-type-selector", "static"] + ]); + if (defaultAttrValues) { + attributes.forEach((a) => { + defaultValues.set(a, defaultAttrValues[a]); + }); + } + const textArea = new TextArea(defaultValues.get("data-value"), "template.free.label"); + super(customHeader || header(), defaultTypeFields, [textArea], defaultValues); + this.textArea = textArea; + } + + getAttributes = () => attributes; + + render = () => { + let values = { + value: this.textArea.getValue(), + }; + return this.template(values); + }; + + template = ({ value }) => { + return ` +
+ ${value.replaceAll('"', "'")} +
+ `; + }; +} diff --git a/lib/template-generator/components/library/TemplateComponent.js b/lib/template-generator/components/library/TemplateComponent.js index c49b35f5..23b29c98 100644 --- a/lib/template-generator/components/library/TemplateComponent.js +++ b/lib/template-generator/components/library/TemplateComponent.js @@ -11,6 +11,7 @@ export default class TemplateComponent { customFields = []; defaultType = ""; defaultValues = null; + typeFieldSelector = ""; constructor( header = { icon: "", title: "" }, defaultTypeFields = ["field", "multi", "static"], @@ -23,10 +24,12 @@ export default class TemplateComponent { this.defaultValues = defaultValues; this.defaultType = defaultValues.get("data-type-selector"); } - this.typeFieldSelector = new TypeFieldSelector({ - fields: defaultTypeFields, - defaultType: this.defaultType, - }); + if (defaultTypeFields && defaultTypeFields.length) { + this.typeFieldSelector = new TypeFieldSelector({ + fields: defaultTypeFields, + defaultType: this.defaultType, + }); + } this.customFields = customFields; } @@ -138,7 +141,7 @@ export default class TemplateComponent { return `
${this.cardHeader()} - ${this.typeFieldSelector.render()} + ${this.typeFieldSelector ? this.typeFieldSelector.render() : ""}
${this.tooltipContent()}
`; @@ -149,14 +152,20 @@ export default class TemplateComponent { this.componentsArea = document .getElementById(this.uuid) .querySelector(".subcomponents"); - const typeFieldSelectorFromDOM = document.getElementById(this.typeFieldSelector.uuid); - typeFieldSelectorFromDOM.addEventListener("change", (el) => { - this.getForms(el.target.value); + if (this.typeFieldSelector) { + const typeFieldSelectorFromDOM = document.getElementById( + this.typeFieldSelector.uuid + ); + typeFieldSelectorFromDOM.addEventListener("change", (el) => { + this.getForms(el.target.value); + this.getCustomFields(); + _elementTranslate("body"); + }); + if (this.defaultType) { + typeFieldSelectorFromDOM.dispatchEvent(new Event("change")); + } + } else { this.getCustomFields(); - _elementTranslate("body"); - }); - if (this.defaultType) { - typeFieldSelectorFromDOM.dispatchEvent(new Event("change")); } _elementTranslate("body"); }; diff --git a/mviewerstudio.i18n.json b/mviewerstudio.i18n.json index 31c49b79..8c1d21ea 100644 --- a/mviewerstudio.i18n.json +++ b/mviewerstudio.i18n.json @@ -377,6 +377,8 @@ "template.typefield.static": "Saisie libre", "template.typefield.liField": "A partir d'un champ JSON", "template.typefield.select": "Choisir un type...", + "template.free.title": "Saisie libre", + "template.free.label": "Contenu du template :", "version.comment": "Ajouter une description à cette version", "version.comment.ph": "Exemple : Version de test sans données", "publish.message": "Version publiée", From 82b0f6eb0bf38c475610f43a545923611a72619f Mon Sep 17 00:00:00 2001 From: gaetanbrl Date: Thu, 28 Nov 2024 16:01:46 +0100 Subject: [PATCH 2/3] fix https://github.com/mviewer/mviewerstudio/issues/334 with default featurecount number --- lib/mv.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/mv.js b/lib/mv.js index a83613a7..5b351842 100755 --- a/lib/mv.js +++ b/lib/mv.js @@ -636,7 +636,7 @@ var mv = (function () { $("#frm-layerid").val(layer.id); $("#frm-url").val(layer.url); $("#frm-queryable").prop("checked", layer.queryable); - $("#frm-featurecount").val(layer.featurecount); + $("#frm-featurecount").val(layer.featurecount || 5); $("#frm-infopanel option[value='" + layer.infopanel + "']").prop("selected", true); $("#frm-secure").val(layer.secure); $("#frm-useproxy").prop("checked", layer.useproxy); @@ -812,7 +812,9 @@ var mv = (function () { layer.fusesearchkeys = $("#frm-fusesearchkeys").val(); layer.fusesearchresult = $("#frm-fusesearchresult").val(); layer.infoformat = $("#frm-infoformat").val(); - layer.featurecount = $("#frm-featurecount").val(); + layer.featurecount = document + .querySelector("#frm-featurecount") + .getAttribute("value"); layer.infopanel = $("#frm-infopanel").val(); layer.metadata = $("#frm-metadata").val(); layer["metadata-csw"] = $("#frm-metadata-csw").val(); From da333f559a12fd2960f8b8f4874c8eaf429d97a9 Mon Sep 17 00:00:00 2001 From: gaetanbrl Date: Thu, 28 Nov 2024 16:02:05 +0100 Subject: [PATCH 3/3] Free component - read and write remove useless code --- lib/template-generator/components/forms/TextArea.js | 7 ++----- .../components/library/FreeComponent.js | 10 ++++------ 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/lib/template-generator/components/forms/TextArea.js b/lib/template-generator/components/forms/TextArea.js index e46ab6b6..b71d25f8 100644 --- a/lib/template-generator/components/forms/TextArea.js +++ b/lib/template-generator/components/forms/TextArea.js @@ -3,7 +3,7 @@ class TextArea { value = ""; label = "Saisir un contenu"; constructor(value = "", label) { - this.value = value; + this.value = value.value; this.label = label; } render = () => { @@ -13,12 +13,9 @@ class TextArea {
+ name="">${this.value ? decodeURI(this.value).trim() : ""}
`; diff --git a/lib/template-generator/components/library/FreeComponent.js b/lib/template-generator/components/library/FreeComponent.js index ad8c908a..dc00526c 100644 --- a/lib/template-generator/components/library/FreeComponent.js +++ b/lib/template-generator/components/library/FreeComponent.js @@ -11,13 +11,11 @@ export const header = () => ({ const defaultTypeFields = []; -const attributes = ["data-type-selector", "data-value"]; +const attributes = ["data-value"]; export default class FreeComponent extends TemplateComponent { constructor(customHeader, defaultAttrValues) { - let defaultValues = new Map([ - //["data-type-selector", "static"] - ]); + let defaultValues = new Map(); if (defaultAttrValues) { attributes.forEach((a) => { defaultValues.set(a, defaultAttrValues[a]); @@ -41,10 +39,10 @@ export default class FreeComponent extends TemplateComponent { return `
- ${value.replaceAll('"', "'")} + ${value}
`; };