easier editor gui and translated widget properities (605bd1fb) · Commits · jan.koester / blogi

editor/html/css/editor.css

+33 −0

Changes for editor/html/css/editor.css: 33 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -431,6 +431,39 @@ body {
		padding-top: 4px;
		}

		/* Property panel level toggle (Simple / Expert) */
		.prop-level-toggle {
		display: flex;
		gap: 2px;
		background: var(--bg-tertiary);
		border: 1px solid var(--border);
		border-radius: 999px;
		padding: 2px;
		margin-bottom: 10px;
		}

		.prop-level-btn {
		flex: 1;
		padding: 5px 10px;
		background: none;
		color: var(--text-secondary);
		border: none;
		border-radius: 999px;
		cursor: pointer;
		font-size: 12px;
		font-weight: 500;
		transition: all 0.15s;
		}

		.prop-level-btn:hover {
		color: var(--text-primary);
		}

		.prop-level-btn.active {
		color: var(--bg-primary);
		background: var(--accent);
		}

		/* Rich Text Editor */
		.rte-wrap {
		border: 1px solid var(--border);

editor/html/js/properties.js

+57 −1

Changes for editor/html/js/properties.js: 57 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -11,6 +11,11 @@ var PropertiesPanel = (function() {
		var isSaving = false;
		var dirty = false;

		var currentLevel = 'simple';
		try {
		currentLevel = localStorage.getItem('blogi-properties-level') \|\| 'simple';
		} catch(e) {}

		// The properties panel is docked in #sidebar-right; rect (formerly used to
		// position a floating panel near a canvas click) is no longer needed but
		// still accepted so callers (Canvas selection) don't need special-casing.
		@@ -88,6 +93,31 @@ var PropertiesPanel = (function() {
		}
		}

		// Simple / Expert level toggle
		var levelToggle = document.createElement('div');
		levelToggle.className = 'prop-level-toggle';
		var levelLabels = {
		simple: (typeof I18n !== 'undefined') ? I18n.t('I18N_PROP_LEVEL_SIMPLE', 'Einfach') : 'Einfach',
		expert: (typeof I18n !== 'undefined') ? I18n.t('I18N_PROP_LEVEL_EXPERT', 'Experte') : 'Experte'
		};
		var levelBtns = {};
		['simple', 'expert'].forEach(function(lvl) {
		var btn = document.createElement('button');
		btn.type = 'button';
		btn.className = 'prop-level-btn' + (currentLevel === lvl ? ' active' : '');
		btn.textContent = levelLabels[lvl];
		btn.addEventListener('click', function() {
		if (currentLevel === lvl) return;
		currentLevel = lvl;
		try { localStorage.setItem('blogi-properties-level', lvl); } catch(e) {}
		for (var k in levelBtns) levelBtns[k].classList.toggle('active', k === lvl);
		_applyLevelVisibility(container);
		});
		levelBtns[lvl] = btn;
		levelToggle.appendChild(btn);
		});
		container.appendChild(levelToggle);

		// Tab bar
		var tabBar = document.createElement('div');
		tabBar.className = 'prop-tabs';
		@@ -347,6 +377,7 @@ var PropertiesPanel = (function() {
		var field = fields[i];
		var group = document.createElement('div');
		group.className = 'prop-group';
		group.setAttribute('data-level', field.level \|\| 'simple');

		var value = properties[field.key] \|\| '';

		@@ -826,9 +857,20 @@ var PropertiesPanel = (function() {
		}

		_applyConditionalVisibility(panel, fields);
		_applyLevelVisibility(panel);
		_bindAspectRatioFields(panel, fields);
		}

		// A .prop-group can be hidden independently by two unrelated mechanisms
		// (visibleWhen-based conditional visibility, and the Simple/Expert level
		// toggle) — both write into dataset flags instead of style.display
		// directly, so neither clobbers the other's decision.
		function _updateGroupDisplay(group) {
		var condHidden = group.getAttribute('data-cond-hidden') === '1';
		var levelHidden = group.getAttribute('data-level-hidden') === '1';
		group.style.display = (condHidden \|\| levelHidden) ? 'none' : '';
		}

		// Fields carrying a "visibleWhen: {key, value}" schema entry (e.g. Button's
		// link_url only makes sense when link_type === "url") are hidden until the
		// watched field's live value matches, and re-evaluated on every change —
		@@ -850,7 +892,8 @@ var PropertiesPanel = (function() {
		var expected = String(field.visibleWhen.value);
		var evaluate = function(watchedEl, groupEl, expectedVal) {
		var actual = watchedEl.type === 'checkbox' ? String(watchedEl.checked) : watchedEl.value;
		groupEl.style.display = (actual === expectedVal) ? '' : 'none';
		groupEl.setAttribute('data-cond-hidden', (actual === expectedVal) ? '0' : '1');
		_updateGroupDisplay(groupEl);
		};
		(function(watchedEl, groupEl, expectedVal) {
		evaluate(watchedEl, groupEl, expectedVal);
		@@ -860,6 +903,19 @@ var PropertiesPanel = (function() {
		}
		}

		// Simple/Expert level toggle: fields with data-level="expert" are hidden
		// unless the Expert view is active. Re-run over the whole form (not just
		// one panel) when the toggle button is clicked.
		function _applyLevelVisibility(scope) {
		var groups = scope.querySelectorAll('.prop-group[data-level]');
		for (var i = 0; i < groups.length; i++) {
		var group = groups[i];
		var isExpertField = group.getAttribute('data-level') === 'expert';
		group.setAttribute('data-level-hidden', (isExpertField && currentLevel !== 'expert') ? '1' : '0');
		_updateGroupDisplay(group);
		}
		}

		// Loads the picked image off-DOM to read its natural pixel size, then
		// seeds real_width/real_height so a freshly-picked image gets sane
		// dimensions immediately instead of waiting for a save round-trip.

editor/src/nodewidget_adapter_stub.cpp

+19 −2

Changes for editor/src/nodewidget_adapter_stub.cpp: 19 added lines, 2 removed lines.
Original line number	Diff line number	Diff line
		#include "../widgets/nodewidget/nodewidget_adapter.h"
		#include "nodewidget_translations.h"

		#include <cctype>
		#include <cstring>
		@@ -296,7 +297,8 @@ json_object *NodeWidgetAdapter::getSchemaJson() {
		json_object *arr = json_object_new_array();

		auto addField = [&](const char key, const char label, const char *type,
		const char placeholder = nullptr, const char target = "all") {
		const char placeholder = nullptr, const char target = "all",
		const char *level = "expert") {
		json_object *f = json_object_new_object();
		json_object_object_add(f, "key", json_object_new_string(key));
		json_object_object_add(f, "label", json_object_new_string(label));
		@@ -304,6 +306,7 @@ json_object *NodeWidgetAdapter::getSchemaJson() {
		json_object_object_add(f, "target", json_object_new_string(target));
		if (placeholder)
		json_object_object_add(f, "placeholder", json_object_new_string(placeholder));
		json_object_object_add(f, "level", json_object_new_string(level));
		json_object_array_add(arr, f);
		};

		@@ -312,7 +315,21 @@ json_object *NodeWidgetAdapter::getSchemaJson() {
		addField("props_json", "Properties JSON", "textarea", "{\"title\":\"Hello\"}");
		addField("fallback_html", "Fallback HTML", "textarea", "Shown if Node render fails");
		addField("wrapper_tag", "Wrapper Tag", "text", "div");
		addField("can_have_children", "Can Have Children", "checkbox");
		addField("can_have_children", "Can Have Children", "checkbox", nullptr, "all", "simple");

		if (_lang == "de") {
		const auto &labelMap = nodewidget_i18n::de();
		int n = json_object_array_length(arr);
		for (int i = 0; i < n; i++) {
		json_object *f = json_object_array_get_idx(arr, i);
		json_object *labelObj = nullptr;
		if (json_object_object_get_ex(f, "label", &labelObj)) {
		auto it = labelMap.find(json_object_get_string(labelObj));
		if (it != labelMap.end())
		json_object_object_add(f, "label", json_object_new_string(it->second.c_str()));
		}
		}
		}

		return arr;
		}

editor/src/nodewidget_translations.h

0 → 100644

+52 −0

Changes for editor/src/nodewidget_translations.h: 52 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		/*******************************************************************************
		Copyright (c) 2025, Jan Koester jan.koester@gmx.net
		All rights reserved.

		Redistribution and use in source and binary forms, with or without
		modification, are permitted provided that the following conditions are met:
		* Redistributions of source code must retain the above copyright
		notice, this list of conditions and the following disclaimer.
		* Redistributions in binary form must reproduce the above copyright
		notice, this list of conditions and the following disclaimer in the
		documentation and/or other materials provided with the distribution.
		* Neither the name of the <organization> nor the
		names of its contributors may be used to endorse or promote products
		derived from this software without specific prior written permission.

		THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
		ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
		WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
		DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
		DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
		(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
		LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
		ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
		(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
		SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
		*******************************************************************************/

		#pragma once

		#include <string>
		#include <unordered_map>

		namespace blogi { namespace webedit { namespace nodewidget_i18n {

		inline const std::unordered_map<std::string, std::string>& de() {
		static const std::unordered_map<std::string, std::string> m = {
		{"Can Have Children", "Kann Kindelemente enthalten"},
		{"Fallback HTML", "Fallback-HTML"},
		{"Node Widget Script", "Node-Widget-Skript"},
		{"Properties JSON", "Eigenschaften-JSON"},
		{"Type ID", "Typ-ID"},
		{"Wrapper Tag", "Wrapper-Tag"},
		};
		return m;
		}

		inline const std::unordered_map<std::string, std::string>& en() {
		static const std::unordered_map<std::string, std::string> m = {};
		return m;
		}

		}}}

editor/src/webedit_api.cpp

+20 −0

Changes for editor/src/webedit_api.cpp: 20 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -1589,6 +1589,26 @@ void webedit::Api::handleGetSchema(libhttppp::HttpRequest &curreq,
		return;
		}

		// Resolve the UI language (cookie "lang" > DB option > "en") so the
		// widget can emit already-localized field labels in its schema.
		std::string lang;
		try {
		libhttppp::HttpCookie cookie;
		cookie.parse(curreq);
		for (auto *cd = cookie.getfirstCookieData(); cd; cd = cd->nextCookieData()) {
		if (cd->getKey() == "lang") {
		lang = cd->getValue();
		break;
		}
		}
		} catch (...) {
		}
		if (lang.empty())
		lang = _db.getOption("LANGUAGE", "en");
		for (auto &c : lang) c = std::tolower(c);
		if (lang != "de") lang = "en";
		el->setLanguage(lang);

		json_object *reqJson = json_object_new_object();
		json_object *respJson = json_object_new_object();
		json_object_object_add(reqJson, "action", json_object_new_string("get_schema"));