[BasicUI] Reload the chart with higher dimensions when zooming (#3183)
When zooming, instead of just upscaling the previously loaded chart, a new chart is built using available width as new chart width. Upscale is kept and will be used in case the user defined a maximum width for charts that is lower than the available width. Closes #3139 Signed-off-by: Laurent Garnier <lg.hc@free.fr>dependabot/npm_and_yarn/bundles/org.openhab.ui.habot/web/axios-0.30.0
parent
c12c18cdde
commit
f1bc650743
|
@ -21,7 +21,7 @@
|
||||||
%period_rows%
|
%period_rows%
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
<button id="button3-%widget_id%" class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect image-upscale-button">
|
<button id="button3-%widget_id%" class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect chart-upscale-button">
|
||||||
<!-- fullscreen -->
|
<!-- fullscreen -->
|
||||||
<i class="material-icons"></i>
|
<i class="material-icons"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -973,10 +973,12 @@
|
||||||
|
|
||||||
_t.legendButton = null;
|
_t.legendButton = null;
|
||||||
_t.periodButton = null;
|
_t.periodButton = null;
|
||||||
|
_t.chartUpscaleButton = null;
|
||||||
|
|
||||||
if (_t.headerRow !== null && _t.headerRow !== "") {
|
if (_t.headerRow !== null && _t.headerRow !== "") {
|
||||||
_t.legendButton = _t.formHeaderRow.querySelector(o.image.legendButton);
|
_t.legendButton = _t.formHeaderRow.querySelector(o.image.legendButton);
|
||||||
_t.periodButton = _t.formHeaderRow.querySelector(o.image.periodButton);
|
_t.periodButton = _t.formHeaderRow.querySelector(o.image.periodButton);
|
||||||
|
_t.chartUpscaleButton = _t.formHeaderRow.querySelector(o.image.chartUpscaleButton);
|
||||||
if (_t.legendButton !== null) {
|
if (_t.legendButton !== null) {
|
||||||
_t.displayLegend = _t.parentNode.getAttribute("data-legend") === "true";
|
_t.displayLegend = _t.parentNode.getAttribute("data-legend") === "true";
|
||||||
if (_t.displayLegend) {
|
if (_t.displayLegend) {
|
||||||
|
@ -988,6 +990,9 @@
|
||||||
if (_t.periodButton !== null) {
|
if (_t.periodButton !== null) {
|
||||||
_t.period = null;
|
_t.period = null;
|
||||||
}
|
}
|
||||||
|
if (_t.chartUpscaleButton !== null) {
|
||||||
|
_t.upscale = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onLegendClick() {
|
function onLegendClick() {
|
||||||
|
@ -1022,6 +1027,38 @@
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onUpscaleClick() {
|
||||||
|
var
|
||||||
|
splittedSize,
|
||||||
|
width,
|
||||||
|
height;
|
||||||
|
|
||||||
|
_t.upscale = !_t.upscale;
|
||||||
|
if (_t.upscale) {
|
||||||
|
_t.chartUpscaleButton.classList.add(o.buttonActiveClass);
|
||||||
|
} else {
|
||||||
|
_t.chartUpscaleButton.classList.remove(o.buttonActiveClass);
|
||||||
|
}
|
||||||
|
_t.url = _t.url.replace(/&w=\w+/, "");
|
||||||
|
_t.url = _t.url.replace(/&h=\w+/, "");
|
||||||
|
if (_t.upscale) {
|
||||||
|
height = Math.floor(_t.parentNode.parentNode.offsetWidth / 2);
|
||||||
|
width = height * 2;
|
||||||
|
_t.url = _t.url + "&w=" + width;
|
||||||
|
_t.url = _t.url + "&h=" + height;
|
||||||
|
} else if (smarthome.UI.chartSize !== null) {
|
||||||
|
splittedSize = smarthome.UI.chartSize.split("x");
|
||||||
|
_t.url = _t.url + "&w=" + splittedSize[0];
|
||||||
|
_t.url = _t.url + "&h=" + splittedSize[1];
|
||||||
|
}
|
||||||
|
_t.image.setAttribute("src", _t.url + "&t=" + Date.now());
|
||||||
|
if (_t.upscale) {
|
||||||
|
_t.parentNode.classList.add(o.image.upscaleClass);
|
||||||
|
} else {
|
||||||
|
_t.parentNode.classList.remove(o.image.upscaleClass);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
_t.showModalPeriods = function() {
|
_t.showModalPeriods = function() {
|
||||||
var
|
var
|
||||||
content = _t.formHeaderRow.querySelector(o.image.periodRows).innerHTML;
|
content = _t.formHeaderRow.querySelector(o.image.periodRows).innerHTML;
|
||||||
|
@ -1098,6 +1135,10 @@
|
||||||
componentHandler.downgradeElements([ _t.periodButton ]);
|
componentHandler.downgradeElements([ _t.periodButton ]);
|
||||||
_t.periodButton.removeEventListener("click", _t.showModalPeriods);
|
_t.periodButton.removeEventListener("click", _t.showModalPeriods);
|
||||||
}
|
}
|
||||||
|
if (_t.chartUpscaleButton !== null) {
|
||||||
|
componentHandler.downgradeElements([ _t.chartUpscaleButton ]);
|
||||||
|
_t.chartUpscaleButton.removeEventListener("click", onUpscaleClick);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
_t.applyLocalSettingsPrivate();
|
_t.applyLocalSettingsPrivate();
|
||||||
|
@ -1108,6 +1149,9 @@
|
||||||
if (_t.periodButton !== null) {
|
if (_t.periodButton !== null) {
|
||||||
_t.periodButton.addEventListener("click", _t.showModalPeriods);
|
_t.periodButton.addEventListener("click", _t.showModalPeriods);
|
||||||
}
|
}
|
||||||
|
if (_t.chartUpscaleButton !== null) {
|
||||||
|
_t.chartUpscaleButton.addEventListener("click", onUpscaleClick);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* class ControlMap */
|
/* class ControlMap */
|
||||||
|
@ -4075,6 +4119,7 @@
|
||||||
image: {
|
image: {
|
||||||
legendButton: ".chart-legend-button",
|
legendButton: ".chart-legend-button",
|
||||||
periodButton: ".chart-period-button",
|
periodButton: ".chart-period-button",
|
||||||
|
chartUpscaleButton: ".chart-upscale-button",
|
||||||
periodRows: ".mdl-form__header-rows",
|
periodRows: ".mdl-form__header-rows",
|
||||||
upscaleButton: ".image-upscale-button",
|
upscaleButton: ".image-upscale-button",
|
||||||
upscaleClass: "mdl-form__image-upscale",
|
upscaleClass: "mdl-form__image-upscale",
|
||||||
|
|
Loading…
Reference in New Issue