test (72690fcf) · Commits · jan.koester / blogi

editor/widgets/list/list.cpp

+11 −2

Original line number	Diff line number	Diff line
		@@ -244,7 +244,7 @@ extern "C" {
		mkOpts({"ul", "ol"}), "simple");
		addField("list_style_type", "List Style", "select", nullptr, "all",
		mkOpts({"", "disc", "circle", "square", "decimal", "decimal-leading-zero",
		"lower-alpha", "upper-alpha", "lower-roman", "upper-roman", "none"}), "simple");
		"lower-alpha", "upper-alpha", "lower-roman", "upper-roman", "none", "emoji_circle"}), "simple");
		addField("direction", "Direction", "select", nullptr, "desktop",
		mkOpts({"vertical", "horizontal"}));
		addField("gap", "Gap", "text", "8px");
		@@ -651,7 +651,9 @@ extern "C" {
		if (!fontSize.empty()) style += " font-size: " + fontSize + ";";
		if (!fontColor.empty()) style += " color: " + fontColor + ";";
		if (!lineHeight.empty()) style += " line-height: " + lineHeight + ";";
		if (!listStyleType.empty()) style += " list-style-type: " + listStyleType + ";";
		bool useEmojiMarker = (listStyleType == "emoji_circle");
		if (useEmojiMarker) style += " list-style-type: none;";
		else if (!listStyleType.empty()) style += " list-style-type: " + listStyleType + ";";
		std::string paddingShorthand = joinSpacingShorthand(paddingTop, paddingRight, paddingBottom, paddingLeft);
		if (!paddingShorthand.empty()) style += " padding: " + paddingShorthand + ";";
		std::string marginShorthand = joinSpacingShorthand(marginTop, marginRight, marginBottom, marginLeft);
		@@ -666,6 +668,13 @@ extern "C" {

		for (const auto &item : items) {
		libhtmlpp::HtmlElement li("li");
		if (useEmojiMarker) {
		li.setAttribute("style", "display: flex; align-items: center; gap: 0.5em;");
		libhtmlpp::HtmlElement marker("span");
		marker.setAttribute("style", "flex: none;");
		marker.appendChild(libhtmlpp::TextElement("❗"));
		li.appendChild(marker);
		}
		if (!item.empty()) {
		try {
		libhtmlpp::HtmlString htmlBuf("<span>" + item + "</span>");

editor/widgets/slider/slider.cpp

+17 −2

Original line number	Diff line number	Diff line
		@@ -45,7 +45,7 @@ extern "C" {
		std::string height = "400px";
		std::string backgroundColor = "";
		std::string borderRadius = "0";
		std::string transition = "fade"; // fade, slide
		std::string transition = "fade"; // fade, slide, carousel
		std::string interval = "5000"; // ms between slides
		bool autoplay = true;
		bool showArrows = true;
		@@ -179,7 +179,7 @@ extern "C" {
		addField("background_gradient_angle", "Gradient Angle", "text", "e.g. 135deg", "desktop");
		addField("background_gradient_custom", "Gradient Custom", "text", "e.g. linear-gradient(135deg, #ff0000, #0000ff)", "desktop");
		addField("border_radius", "Border Radius", "text", "e.g. 8px");
		addField("transition", "Transition", "select", nullptr, "all", mkOpts({"fade","slide"}));
		addField("transition", "Transition", "select", nullptr, "all", mkOpts({"fade","slide","carousel"}));
		addField("interval", "Interval (ms)", "text", "e.g. 5000");
		addField("autoplay", "Autoplay", "checkbox", nullptr, "all", nullptr, "simple");
		addField("show_arrows", "Show Arrows", "checkbox", nullptr, "all", nullptr, "simple");
		@@ -567,6 +567,7 @@ extern "C" {
		} else {
		trackStyle = "display: flex; height: 100%; touch-action: pan-y; flex-wrap: nowrap; will-change: transform;";
		trackStyle += " transition: transform 0.5s ease-in-out;";
		if (transition == "carousel") trackStyle += " align-items: center;";
		}

		libhtmlpp::HtmlElement track("div");
		@@ -584,6 +585,12 @@ extern "C" {
		slideStyle = "grid-row: 1; grid-column: 1; width: 100%;"
		" opacity: 0; transition: opacity 0.5s ease-in-out;"
		" -webkit-user-drag: none; touch-action: pan-y; user-select: none; box-sizing: border-box;";
		} else if (transition == "carousel") {
		// Slides are narrower than the track so neighbors peek in on
		// both sides; the active slide is scaled/faded up in show().
		slideStyle = "width: 70%; flex: 0 0 70%; height: 90%; position: relative;"
		" overflow-x: hidden; -webkit-user-drag: none; touch-action: pan-y; user-select: none; box-sizing: border-box;"
		" transition: transform 0.4s ease, opacity 0.4s ease; opacity: 0.6; transform: scale(0.85);";
		} else {
		slideStyle = "width: 100%; flex: 0 0 100%; height: 100%; position: relative;"
		" overflow-x: hidden; -webkit-user-drag: none; touch-action: pan-y; user-select: none; box-sizing: border-box;";
		@@ -660,6 +667,9 @@ extern "C" {
		if (transition == "fade") {
		// Fade mode uses CSS grid stacking — no size override needed
		js << "function setSizes(){}";
		} else if (transition == "carousel") {
		// Slides are a fraction of the track width so neighbors peek in
		js << "function setSizes(){var w=el.offsetWidth,sw=w*0.7;for(var j=0;j<n;j++){slides[j].style.width=sw+'px';slides[j].style.flex='0 0 '+sw+'px';}}";
		} else {
		// Set slide widths in pixels for reliable mobile rendering
		js << "function setSizes(){var w=el.offsetWidth;for(var j=0;j<n;j++){slides[j].style.width=w+'px';slides[j].style.flex='0 0 '+w+'px';}}";
		@@ -669,6 +679,11 @@ extern "C" {
		js << " cur=((i%n)+n)%n;";
		if (transition == "fade") {
		js << " for(var j=0;j<n;j++){slides[j].style.opacity=j===cur?'1':'0';}";
		} else if (transition == "carousel") {
		js << " var track=el.querySelector('." << trackCls << "');";
		js << " var w=el.offsetWidth,sw=w*0.7;";
		js << " if(track)track.style.transform='translateX('+((w-sw)/2-cur*sw)+'px)';";
		js << " for(var j=0;j<n;j++){slides[j].style.transform=j===cur?'scale(1)':'scale(0.85)';slides[j].style.opacity=j===cur?'1':'0.6';}";
		} else {
		js << " var track=el.querySelector('." << trackCls << "');";
		js << " if(track)track.style.transform='translateX(-'+(cur*el.offsetWidth)+'px)';";