Skip to content

Commit

Permalink
[BaiscUI] Adjust the SVG icon in buttons to the current theme (openha…
Browse files Browse the repository at this point in the history 
…b#2257)

Only concerns SVG icons delivered by the openHAB icon servlet and having
"currentColor" as fill color.

Convertion to inline SVG is applied only if the "inline SVG" setting is
enabled.

Fix openhab#2249

Signed-off-by: Laurent Garnier <[email protected]>
  • Loading branch information
@lolodomo
lolodomo authored Jan 7, 2024
1 parent 225e61c commit 5a09f71
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 28 deletions.
3 changes: 2 additions & 1 deletion bundles/org.openhab.ui.basic/web-src/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,8 @@
}
.mdl-button-icon {
min-width: 0;
img {
img,
svg {
width: 24px;
height: 24px;
object-fit: contain;
Expand Down
72 changes: 45 additions & 27 deletions bundles/org.openhab.ui.basic/web-src/smarthome.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -412,26 +412,26 @@
}
};

function convertToInlineSVG() {
this.removeEventListener("load", convertToInlineSVG);
_t.convertToInlineSVG = function() {
this.removeEventListener("load", _t.convertToInlineSVG);
if (smarthome.UI.inlineSVG) {
_t.getSVGIconAndReplaceWithInline(this.src, true, null);
_t.getSVGIconAndReplaceWithInline(this, this.src, true, null);
}
}
};

function replaceImageWithNone() {
this.removeEventListener("load", convertToInlineSVG);
this.removeEventListener("error", replaceImageWithNone);
_t.replaceImageWithNone = function() {
this.removeEventListener("load", _t.convertToInlineSVG);
this.removeEventListener("error", _t.replaceImageWithNone);
this.src = noneImageSrc;
}
};

_t.findIcon();
if (_t.icon !== null && _t.iconSource === "oh") {
_t.icon.addEventListener("load", convertToInlineSVG);
_t.icon.addEventListener("error", replaceImageWithNone);
_t.icon.addEventListener("load", _t.convertToInlineSVG);
_t.icon.addEventListener("error", _t.replaceImageWithNone);
}

_t.replaceIconWithInlineSVG = function(svgText) {
_t.replaceIconWithInlineSVG = function(iconElement, svgText) {
var
parser,
docSvg,
Expand All @@ -444,32 +444,34 @@
newIconElement = docSvg.querySelector("svg");

// Keep the attribute data-icon
dataIcon = _t.icon.getAttribute("data-icon");
dataIcon = iconElement.getAttribute("data-icon");
if (dataIcon !== null) {
newIconElement.setAttribute("data-icon", dataIcon);
}

// Replace the current icon element with the built inline SVG
_t.iconContainer.replaceChild(newIconElement, _t.icon);
_t.findIcon();
iconElement.parentNode.replaceChild(newIconElement, iconElement);
if (iconElement === _t.icon) {
_t.findIcon();
}
};

_t.getSVGIconAndReplaceWithInline = function(srcUrl, checkCurrentColor, defaultSVG) {
_t.getSVGIconAndReplaceWithInline = function(iconElement, srcUrl, checkCurrentColor, defaultSVG) {
fetch(srcUrl).then(function(response) {
if (response.ok && response.headers.get("content-type") === "image/svg+xml") {
response.text().then(function(data) {
if (!checkCurrentColor || data.indexOf("currentColor") !== -1) {
_t.replaceIconWithInlineSVG(data);
_t.replaceIconWithInlineSVG(iconElement, data);
} else if (defaultSVG !== null) {
_t.replaceIconWithInlineSVG(defaultSVG);
_t.replaceIconWithInlineSVG(iconElement, defaultSVG);
}
});
} else if (defaultSVG !== null) {
_t.replaceIconWithInlineSVG(defaultSVG);
_t.replaceIconWithInlineSVG(iconElement, defaultSVG);
}
}).catch(function() {
if (defaultSVG !== null) {
_t.replaceIconWithInlineSVG(defaultSVG);
_t.replaceIconWithInlineSVG(iconElement, defaultSVG);
}
});
};
Expand All @@ -486,17 +488,17 @@
newIconElement = doc.body.firstChild;

if (_t.iconSource === "oh") {
_t.icon.removeEventListener("load", convertToInlineSVG);
_t.icon.removeEventListener("error", replaceImageWithNone);
_t.icon.removeEventListener("load", _t.convertToInlineSVG);
_t.icon.removeEventListener("error", _t.replaceImageWithNone);
}

// Replace the current icon element
_t.iconContainer.replaceChild(newIconElement, _t.icon);

_t.findIcon();
if (_t.iconSource === "oh") {
_t.icon.addEventListener("load", convertToInlineSVG);
_t.icon.addEventListener("error", replaceImageWithNone);
_t.icon.addEventListener("load", _t.convertToInlineSVG);
_t.icon.addEventListener("error", _t.replaceImageWithNone);
}
};

Expand Down Expand Up @@ -549,10 +551,10 @@
src = "<img data-icon=\"" + iconSet + ":" + iconName + "\" src=\".." + imgURL + "\" />";
_t.replaceIcon(src);
} else if (_t.icon.tagName.toLowerCase() === "img" && !_t.icon.src.endsWith(noneImageSrc)) {
_t.icon.addEventListener("error", replaceImageWithNone);
_t.icon.addEventListener("error", _t.replaceImageWithNone);
_t.icon.setAttribute("src", imgURL);
} else if (_t.icon.tagName.toLowerCase() === "svg" && smarthome.UI.inlineSVG) {
_t.getSVGIconAndReplaceWithInline(imgURL, false, "<svg/>");
_t.getSVGIconAndReplaceWithInline(_t.icon, imgURL, false, "<svg/>");
}
} else if (iconSrc === "if") {
_t.icon.setAttribute("icon", encodeURIComponent(iconSet) + ":" + encodeURIComponent(iconName));
Expand Down Expand Up @@ -632,8 +634,8 @@

_t.destroy = function() {
if (_t.icon !== null && _t.iconSource === "oh") {
_t.icon.removeEventListener("load", convertToInlineSVG);
_t.icon.removeEventListener("error", replaceImageWithNone);
_t.icon.removeEventListener("load", _t.convertToInlineSVG);
_t.icon.removeEventListener("error", _t.replaceImageWithNone);
}

[].forEach.call(_t.parentNode.querySelectorAll("video, audio"), function(media) {
Expand Down Expand Up @@ -1077,15 +1079,31 @@

_t.buttons.forEach.call(_t.buttons, function(button) {
var
icon,
value = button.getAttribute("data-value") + "";

_t.valueMap[value] = button;
button.addEventListener("click", _t.onclick);

icon = button.querySelector("img");
if (icon !== null) {
icon.addEventListener("load", _t.convertToInlineSVG);
icon.addEventListener("error", _t.replaceImageWithNone);
}
});

_t.destroy = function() {
_t.buttons.forEach(function(button) {
var
icon;

button.removeEventListener("click", _t.onclick);

icon = button.querySelector("img");
if (icon !== null) {
icon.removeEventListener("load", _t.convertToInlineSVG);
icon.removeEventListener("error", _t.replaceImageWithNone);
}
});
componentHandler.downgradeElements(_t.buttons);
};
Expand Down

0 comments on commit 5a09f71

Please sign in to comment.