Skip to content

Commit

Permalink
IBX-3619: Tag update helper (#633)
Browse files Browse the repository at this point in the history
  • Loading branch information
GrabowskiM authored Dec 2, 2022
1 parent 5fab2a7 commit 9abe3fb
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 4 deletions.
37 changes: 35 additions & 2 deletions src/bundle/Resources/public/js/scripts/helpers/middle.ellipsis.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,49 @@
(function (global, doc, ibexa) {
const parseAll = () => {
const middleEllipsisContainers = [...doc.querySelectorAll('.ibexa-middle-ellipsis')];
const resizeEllipsisObserver = new ResizeObserver((entries) => {
entries.forEach((entry) => {
parse(entry.target);
});
});
const parse = (baseElement = doc) => {
const isHTMLElement = baseElement instanceof Element || baseElement instanceof Document;

if (!isHTMLElement) {
console.warn('Provided element does not belong to Document interface');

return;
}

const middleEllipsisContainers = [...baseElement.querySelectorAll('.ibexa-middle-ellipsis')];

if (baseElement instanceof Element) {
middleEllipsisContainers.push(baseElement);
}

middleEllipsisContainers.forEach((middleEllipsisContainer) => {
const partStart = middleEllipsisContainer.querySelector('.ibexa-middle-ellipsis__name--start');

middleEllipsisContainer.classList.toggle('ibexa-middle-ellipsis--ellipsized', partStart.scrollWidth > partStart.offsetWidth);
ibexa.helpers.tooltips.parse(middleEllipsisContainer);

resizeEllipsisObserver.observe(middleEllipsisContainer);
});
};
// @deprecated, will be removed in 5.0
const parseAll = () => parse(doc);
const update = (baseElement, content) => {
const contentElements = [...baseElement.querySelectorAll('.ibexa-middle-ellipsis__name-ellipsized')];
const contentEscaped = ibexa.helpers.text.escapeHTML(content);

baseElement.dataset.bsOriginalTitle = contentEscaped;
contentElements.forEach((contentElement) => {
contentElement.innerHTML = contentEscaped;
});
parse(baseElement);
};

ibexa.addConfig('helpers.ellipsis.middle', {
parse,
parseAll,
update,
});
})(window, window.document, window.ibexa);
11 changes: 10 additions & 1 deletion src/bundle/Resources/public/scss/_tag.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
align-items: center;
position: relative;
height: calculateRem(24px);
padding: calculateRem(4px) calculateRem(24px) calculateRem(4px) calculateRem(10px);
padding: calculateRem(4px) calculateRem(10px);
border-radius: calculateRem(12px);
background-color: $ibexa-color-light-500;
max-width: 100%;
Expand All @@ -24,6 +24,7 @@
}

&__remove-btn {
display: none;
position: absolute;
right: calculateRem(8px);
cursor: pointer;
Expand All @@ -38,6 +39,14 @@
}
}

&--deletable {
padding-right: calculateRem(24px);

.ibexa-tag__remove-btn {
display: inline-block;
}
}

$color-versions: 'primary' $ibexa-color-primary $ibexa-color-primary-200, 'secondary' $ibexa-color-dark $ibexa-color-light-500,
'info' $ibexa-color-info $ibexa-color-info-200, 'danger' $ibexa-color-danger $ibexa-color-danger-200,
'success' $ibexa-color-success $ibexa-color-success-200, 'complementary' $ibexa-color-complementary $ibexa-color-complementary-200;
Expand Down
5 changes: 4 additions & 1 deletion src/bundle/Resources/views/themes/admin/ui/tag.html.twig
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
{% import '@ibexadesign/ui/component/macros.html.twig' as html %}

{% set tag_attributes = tag_attributes|default({})|merge({'class': (tag_attributes.class|default('') ~ ' ibexa-tag')|trim}) %}
{% set is_deletable = is_deletable is defined ? is_deletable : true %}
{% set tag_attributes = tag_attributes|default({})|merge({
class: (tag_attributes.class|default('') ~ ' ibexa-tag' ~ (is_deletable ? ' ibexa-tag--deletable'))|trim
}) %}

<div {{ html.attributes(tag_attributes) }}>
<div class="ibexa-tag__content" {% if is_loading_state %} hidden {% endif %}>
Expand Down

0 comments on commit 9abe3fb

Please sign in to comment.