Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Elements: Scope style rules to element template only #2825

Open
wants to merge 3 commits into
base: kopff
Choose a base branch
from
Open

Elements: Scope style rules to element template only #2825

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
debfdc9
Elements: Scope style rules to element template only
maurofmferrao Dec 4, 2024
2d7bf15
Make code consistent and fix entended templates
maurofmferrao Dec 5, 2024
78c07e0
Wrong variable fix
maurofmferrao Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion lib/Widget/Render/WidgetHtmlRenderer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -774,7 +774,14 @@ private function render(
&& !$isExtensionHasStyle
&& $moduleTemplate->type === 'element'
) {
$twig['style'][] = $moduleTemplate->stencil->style;
// Add more info to the element style
// so we can use it to create CSS scope
$twig['style'][] = [
'content' => $moduleTemplate->stencil->style,
'type' => $moduleTemplate->type,
'dataType' => $moduleTemplate->dataType,
'templateId' => $moduleTemplate->templateId,
];
}

if ($moduleTemplate->onTemplateRender !== null) {
Expand Down
44 changes: 41 additions & 3 deletions modules/player.bundle.min.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3039,6 +3039,7 @@ __webpack_require__(/*! core-js/modules/es.array.from.js */ "./node_modules/core
__webpack_require__(/*! core-js/modules/es.array.includes.js */ "./node_modules/core-js/modules/es.array.includes.js");
__webpack_require__(/*! core-js/modules/es.array.is-array.js */ "./node_modules/core-js/modules/es.array.is-array.js");
__webpack_require__(/*! core-js/modules/es.array.iterator.js */ "./node_modules/core-js/modules/es.array.iterator.js");
__webpack_require__(/*! core-js/modules/es.array.join.js */ "./node_modules/core-js/modules/es.array.join.js");
__webpack_require__(/*! core-js/modules/es.array.map.js */ "./node_modules/core-js/modules/es.array.map.js");
__webpack_require__(/*! core-js/modules/es.array.push.js */ "./node_modules/core-js/modules/es.array.push.js");
__webpack_require__(/*! core-js/modules/es.array.reduce.js */ "./node_modules/core-js/modules/es.array.reduce.js");
Expand Down Expand Up @@ -3068,6 +3069,7 @@ __webpack_require__(/*! core-js/modules/es.string.includes.js */ "./node_modules
__webpack_require__(/*! core-js/modules/es.string.iterator.js */ "./node_modules/core-js/modules/es.string.iterator.js");
__webpack_require__(/*! core-js/modules/es.string.match.js */ "./node_modules/core-js/modules/es.string.match.js");
__webpack_require__(/*! core-js/modules/es.string.search.js */ "./node_modules/core-js/modules/es.string.search.js");
__webpack_require__(/*! core-js/modules/es.string.trim.js */ "./node_modules/core-js/modules/es.string.trim.js");
__webpack_require__(/*! core-js/modules/web.dom-collections.for-each.js */ "./node_modules/core-js/modules/web.dom-collections.for-each.js");
__webpack_require__(/*! core-js/modules/web.dom-collections.iterator.js */ "./node_modules/core-js/modules/web.dom-collections.iterator.js");
__webpack_require__(/*! core-js/modules/web.timers.js */ "./node_modules/core-js/modules/web.timers.js");
Expand Down Expand Up @@ -3684,6 +3686,19 @@ XiboPlayer.prototype.init = function () {
// Create global render array of functions
window.renders = [];

// If we have scoped styles
// convert the CSS rules to use it
$('[data-style-scope]').each(function (_idx, styleEl) {
var scopeName = $(styleEl).data('style-scope');
var styleContent = $(styleEl).html();
function scopeCSS(css, scope) {
return css.split('}').map(function (rule) {
return rule.trim() ? "".concat(scope, " ").concat(rule.trim(), "}") : '';
}).join('\n').trim();
}
$(styleEl).html(scopeCSS(styleContent, '[data-style-scope="' + scopeName + '"]'));
});

// Loop through each widget from widgetData
if (widgetData.length > 0) {
widgetData.forEach(function (inputWidget, widgetIndex) {
Expand Down Expand Up @@ -4208,7 +4223,16 @@ XiboPlayer.prototype.renderGlobalElements = function (currentWidget) {
var _groupItem$templateDa;
// Load element functions
self.loadElementFunctions(groupItem, {});
groupItem.hbs && $content.append(PlayerHelper.renderElement(groupItem.hbs, groupItem.templateData, true));
if (groupItem.hbs) {
var $elementContent = $(PlayerHelper.renderElement(groupItem.hbs, groupItem.templateData, true));

// Add style scope to container
var $elementContentContainer = $('<div>');
$elementContentContainer.append($elementContent).attr('data-style-scope', 'element_' + groupItem.templateData.type + '__' + groupItem.templateData.id);

// Append to main container
$content.append($elementContentContainer);
}
var itemID = groupItem.uniqueID || ((_groupItem$templateDa = groupItem.templateData) === null || _groupItem$templateDa === void 0 ? void 0 : _groupItem$templateDa.uniqueID);

// Call onTemplateRender
Expand All @@ -4225,7 +4249,16 @@ XiboPlayer.prototype.renderGlobalElements = function (currentWidget) {
// Single elements
// Load element functions
self.loadElementFunctions(elemObj, {});
elemObj.hbs && $content.append(PlayerHelper.renderElement(elemObj.hbs, elemObj.templateData, true));
if (elemObj.hbs) {
var $elementContent = $(PlayerHelper.renderElement(elemObj.hbs, elemObj.templateData, true));

// Add style scope to container
var $elementContentContainer = $('<div>');
$elementContentContainer.append($elementContent).attr('data-style-scope', "element_".concat(elemObj.templateData.type, "__").concat(elemObj.templateData.id));

// Append to main container
$content.append($elementContentContainer);
}
var itemID = elemObj.uniqueID || ((_elemObj$templateData = elemObj.templateData) === null || _elemObj$templateData === void 0 ? void 0 : _elemObj$templateData.uniqueID);

// Call onTemplateRender
Expand Down Expand Up @@ -7389,7 +7422,12 @@ var PlayerHelper = function () {
}
}
}
$itemContainer.append(self.renderElement(item.hbs, props));
var $elementContent = $(self.renderElement(item.hbs, props));

// Add style scope to container
var $elementContentContainer = $('<div>');
$elementContentContainer.append($elementContent).attr('data-style-scope', 'element_' + props.type + '__' + props.id);
$itemContainer.append($elementContentContainer);
var itemID = item.uniqueID || ((_item$templateData = item.templateData) === null || _item$templateData === void 0 ? void 0 : _item$templateData.uniqueID);
// Handle the rendering of the template
item.onTemplateRender() !== undefined && item.onTemplateRender()(item.elementId, $itemContainer.find(".".concat(itemID, "--item")), $content.find(".".concat(itemID, "--item")), _objectSpread(_objectSpread({
Expand Down
2 changes: 1 addition & 1 deletion modules/player.bundle.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

64 changes: 56 additions & 8 deletions modules/src/xibo-player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -704,6 +704,28 @@ XiboPlayer.prototype.init = function() {
// Create global render array of functions
window.renders = [];

// If we have scoped styles
// convert the CSS rules to use it
$('[data-style-scope]').each((_idx, styleEl) => {
maurofmferrao marked this conversation as resolved.
Show resolved Hide resolved
const scopeName = $(styleEl).data('style-scope');
const styleContent = $(styleEl).html();

function scopeCSS(css, scope) {
return css
.split('}')
.map((rule) => rule.trim() ? `${scope} ${rule.trim()}}` : '')
.join('\n')
.trim();
}

$(styleEl).html(
scopeCSS(
styleContent,
'[data-style-scope="' + scopeName + '"]',
),
);
});

// Loop through each widget from widgetData
if (widgetData.length > 0) {
widgetData.forEach(function(inputWidget, widgetIndex) {
Expand Down Expand Up @@ -1377,13 +1399,27 @@ XiboPlayer.prototype.renderGlobalElements = function(currentWidget) {
// Load element functions
self.loadElementFunctions(groupItem, {});

(groupItem.hbs) && $content.append(
PlayerHelper.renderElement(
if (groupItem.hbs) {
const $elementContent = $(PlayerHelper.renderElement(
groupItem.hbs,
groupItem.templateData,
true,
),
);
));

// Add style scope to container
const $elementContentContainer = $('<div>');
$elementContentContainer.append($elementContent).attr(
'data-style-scope',
'element_' +
groupItem.templateData.type + '__' +
groupItem.templateData.id,
);

// Append to main container
$content.append(
$elementContentContainer,
);
}

const itemID =
groupItem.uniqueID || groupItem.templateData?.uniqueID;
Expand All @@ -1405,13 +1441,25 @@ XiboPlayer.prototype.renderGlobalElements = function(currentWidget) {
// Load element functions
self.loadElementFunctions(elemObj, {});

(elemObj.hbs) && $content.append(
PlayerHelper.renderElement(
if (elemObj.hbs) {
const $elementContent = $(PlayerHelper.renderElement(
elemObj.hbs,
elemObj.templateData,
true,
),
);
));

// Add style scope to container
const $elementContentContainer = $('<div>');
$elementContentContainer.append($elementContent).attr(
'data-style-scope',
`element_${elemObj.templateData.type}__${elemObj.templateData.id}`,
);

// Append to main container
$content.append(
$elementContentContainer,
);
}

const itemID =
elemObj.uniqueID || elemObj.templateData?.uniqueID;
Expand Down
12 changes: 9 additions & 3 deletions modules/widget-html-render.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,17 @@
}
</style>
{% if style|length > 0 %}
<style type="text/css">
{% for item in style %}
{{ item|raw }}
{% if item.content %}
<style type="text/css" data-style-scope="{{item.type}}_{{item.dataType}}__{{item.templateId}}">
{{ item.content|raw }}
</style>
{% else %}
maurofmferrao marked this conversation as resolved.
Show resolved Hide resolved
<style type="text/css">
{{ item|raw }}
</style>
{% endif %}
{% endfor %}
</style>
{% endif %}
</head>
<body>
Expand Down
19 changes: 15 additions & 4 deletions ui/src/helpers/player-helper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,11 +302,22 @@ const PlayerHelper = function() {
}
}

const $elementContent = $(self.renderElement(
item.hbs,
props,
));

// Add style scope to container
const $elementContentContainer = $('<div>');
$elementContentContainer.append($elementContent).attr(
'data-style-scope',
'element_' +
props.type + '__' +
props.id,
);

$itemContainer.append(
self.renderElement(
item.hbs,
props,
),
$elementContentContainer,
);

const itemID = item.uniqueID || item.templateData?.uniqueID;
Expand Down
16 changes: 14 additions & 2 deletions ui/src/layout-editor/viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1862,10 +1862,22 @@ Viewer.prototype.renderElementContent = function(
$assetContainer.find('[data-style-template=' + template.templateId + ']')
.length === 0
) {
function scopeCSS(css, scope) {
return css
.split('}')
.map((rule) => rule.trim() ? `${scope} ${rule.trim()}}` : '')
.join('\n')
.trim();
}

const styleTemplate = Handlebars.compile(
(stencil?.style) ?
stencil.style :
'',
scopeCSS(
stencil.style,
'[data-style-scope="' +
template.type + '_' + template.dataType +
'__' + template.templateId + '"]',
) : '',
);

$(`<style data-style-template="${template.templateId}">`)
Expand Down
1 change: 1 addition & 0 deletions ui/src/templates/viewer-element.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
data-type="element"
data-element-type="{{#if element.elementType}}{{element.elementType}}{{else}}global{{/if}}"
data-sub-type="{{element.id}}"
data-style-scope="element_{{#if element.elementType}}{{element.elementType}}{{else}}global{{/if}}__{{element.id}}"
data-widget-id="{{element.widgetId}}"
data-region-id="{{element.regionId}}"
style="
Expand Down
Loading