IBX-2940: Introduced middle ellipsis component

src/bundle/Resources/encore/ibexa.js.config.js

@@ -16,6 +16,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/helpers/cookies.helper.js'),
     path.resolve(__dirname, '../public/js/scripts/helpers/tag.view.select.helper.js'),
     path.resolve(__dirname, '../public/js/scripts/helpers/object.instances.js'),
+    path.resolve(__dirname, '../public/js/scripts/helpers/middle.ellipsis.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.format.date.js'),
     path.resolve(__dirname, '../public/js/scripts/core/draggable.js'),
     path.resolve(__dirname, '../public/js/scripts/core/dropdown.js'),
@@ -52,6 +53,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/double.click.mark.js'),
     path.resolve(__dirname, '../public/js/scripts/autogenerate.identifier.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.back.to.top.js'),
+    path.resolve(__dirname, '../public/js/scripts/admin.middle.ellipsis.js'),
 ];
 const fieldTypes = [];
 

src/bundle/Resources/public/js/scripts/admin.middle.ellipsis.js

@@ -0,0 +1,3 @@
+(function (global, doc, ibexa) {
+    ibexa.helpers.ellipsis.middle.parseAll();
+})(window, window.document, window.ibexa);

src/bundle/Resources/public/js/scripts/core/tag.view.select.js

@@ -21,11 +21,10 @@
             this.removeItems = this.removeItems.bind(this);
             this.removeItem = this.removeItem.bind(this);
             this.toggleDeleteButtons = this.toggleDeleteButtons.bind(this);
-            this.ellipsizeTags = this.ellipsizeTags.bind(this);
             this.attachDeleteEvents = this.attachDeleteEvents.bind(this);
             this.adjustButtonLabel = this.adjustButtonLabel.bind(this);
 
-            this.ellipsizeTags();
+            ibexa.helpers.ellipsis.middle.parseAll();
             this.attachDeleteEvents();
 
             this.disabledObserver = new MutationObserver((mutationsList) => {
@@ -79,7 +78,7 @@
             });
 
             this.inputField.dispatchEvent(new Event('change'));
-            this.ellipsizeTags();
+            ibexa.helpers.ellipsis.middle.parseAll();
             this.toggleDeleteButtons();
             this.adjustButtonLabel();
         }
@@ -117,20 +116,6 @@
             );
         }
 
-        ellipsizeTags() {
-            const selectedItems = [...this.listContainer.querySelectorAll('[data-id]')];
-
-            selectedItems.forEach((item) => {
-                const partStart = item.querySelector('.ibexa-tag-view-select__selected-item-tag-content--start');
-
-                item.classList.toggle(
-                    'ibexa-tag-view-select__selected-item-tag--ellipsized',
-                    partStart.scrollWidth > partStart.offsetWidth,
-                );
-                ibexa.helpers.tooltips.parse(item);
-            });
-        }
-
         attachDeleteEvents() {
             const selectedItems = [...this.listContainer.querySelectorAll('[data-id]')];
 

src/bundle/Resources/public/js/scripts/helpers/middle.ellipsis.js

@@ -0,0 +1,16 @@
+(function (global, doc, ibexa) {
+    const parseAll = () => {
+        const middleEllipsisContainers = [...doc.querySelectorAll('.ibexa-middle-ellipsis')];
+
+        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);
+        });
+    };
+
+    ibexa.addConfig('helpers.ellipsis.middle', {
+        parseAll,
+    });
+})(window, window.document, window.ibexa);

src/bundle/Resources/public/scss/_middle-ellipsis.scss

@@ -0,0 +1,51 @@
+.ibexa-middle-ellipsis {
+    display: inline-flex;
+    max-width: 100%;
+
+    &--ellipsized {
+        .ibexa-middle-ellipsis {
+            &__name {
+                &--start {
+                    margin-right: calculateRem(-10px);
+                }
+
+                &--end {
+                    margin-left: calculateRem(-10px);
+                    width: initial;
+                }
+            }
+
+            &__separator {
+                display: inline-block;
+            }
+        }
+    }
+
+    &__separator {
+        display: none;
+    }
+
+    &__name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: transparent;
+
+        &--start,
+        &--end {
+            .ibexa-middle-ellipsis__name-ellipsized {
+                color: $ibexa-color-black;
+            }
+        }
+
+        &--start {
+            width: 100%;
+        }
+
+        &--end {
+            width: 0;
+            direction: rtl;
+            text-align: right;
+        }
+    }
+}

src/bundle/Resources/public/scss/_tag-view-select.scss

@@ -36,51 +36,8 @@
             margin-right: calculateRem(8px);
         }
 
-        &--ellipsized {
-            .ibexa-tag-view-select {
-                &__selected-item-tag-content {
-                    &--start {
-                        margin-right: calculateRem(-10px);
-                    }
-
-                    &--end {
-                        margin-left: calculateRem(-10px);
-                        width: initial;
-                    }
-                }
-
-                &__selected-item-tag-ellipsize {
-                    display: inline-block;
-                }
-            }
-        }
-    }
-
-    &__selected-item-tag-ellipsize {
-        display: none;
-    }
-
-    &__selected-item-tag-content {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: transparent;
-
-        &--start,
-        &--end {
-            .ibexa-tag-view-select__selected-item-tag-content-ellipsized {
-                color: $ibexa-color-black;
-            }
-        }
-
-        &--start {
-            width: 100%;
-        }
-
-        &--end {
-            width: 0;
-            direction: rtl;
-            text-align: right;
+        .ibexa-middle-ellipsis {
+            max-width: calc(100% - #{calculateRem(20px)});
         }
     }
 

src/bundle/Resources/public/scss/_tag.scss

@@ -6,10 +6,12 @@
     padding: calculateRem(4px) calculateRem(24px) calculateRem(4px) calculateRem(10px);
     border-radius: calculateRem(12px);
     background-color: $ibexa-color-light-500;
+    max-width: 100%;
 
     &__content {
         font-size: $ibexa-text-font-size-small;
         font-weight: normal;
+        max-width: 100%;
     }
 
     &__spinner {

src/bundle/Resources/public/scss/ibexa.scss

@@ -113,3 +113,4 @@
 @import 'object-state-group-view';
 @import 'back-to-top';
 @import 'date-time-picker';
+@import 'middle-ellipsis';

src/bundle/Resources/views/themes/admin/ui/component/middle_ellipsis/middle_ellipsis.html.twig

@@ -0,0 +1,15 @@
+<span class="ibexa-middle-ellipsis" title="{{ name }}">
+    <span class="ibexa-middle-ellipsis__name ibexa-middle-ellipsis__name--start">
+        <span class="ibexa-middle-ellipsis__name-ellipsized">
+            {{ name }}
+        </span>
+    </span>
+    <span class="ibexa-middle-ellipsis__separator">
+        ...
+    </span>
+    <span class="ibexa-middle-ellipsis__name ibexa-middle-ellipsis__name--end">
+        <span class="ibexa-middle-ellipsis__name-ellipsized">
+            {{ name }}
+        </span>
+    </span>
+</span>

src/bundle/Resources/views/themes/admin/ui/component/tag_view_select/tag_view_select_selected_item_tag.html.twig

@@ -1,31 +1,16 @@
 {% set is_deletable = is_deletable is defined ? is_deletable : true %}
 {% set is_disabled = is_disabled is defined ? is_disabled : false %}
 
-<div
-    class="ibexa-tag-view-select__selected-item-tag"
-    data-id="{{ id }}"
-    data-name="{{ name }}"
-    title="{{ name }}"
->
-    <span class="ibexa-tag-view-select__selected-item-tag-content ibexa-tag-view-select__selected-item-tag-content--start">
-        <span class="ibexa-tag-view-select__selected-item-tag-content-ellipsized">
-            {{ name }}
-        </span>
-    </span>
-    <span class="ibexa-tag-view-select__selected-item-tag-ellipsize">
-        ...
-    </span>
-    <span class="ibexa-tag-view-select__selected-item-tag-content ibexa-tag-view-select__selected-item-tag-content--end">
-        <span class="ibexa-tag-view-select__selected-item-tag-content-ellipsized">
-            {{ name }}
-        </span>
-    </span>
-    <button
+<div class="ibexa-tag-view-select__selected-item-tag" data-id="{{ id }}" data-name="{{ name }}">
+    {{ include('@ibexadesign/ui/component/middle_ellipsis/middle_ellipsis.html.twig', {
+        name,
+    }) }}
+    <button 
         type="button"
         class="btn ibexa-tag-view-select__selected-item-tag-remove-btn"
         tabindex="-1"
-        {% if not is_deletable %}hidden{% endif %}
-        {% if is_disabled %}disabled{% endif %}
+        {% if not is_deletable %} hidden {% endif %}
+        {% if is_disabled %} disabled {% endif %}
     >
         <svg class="ibexa-icon ibexa-icon--tiny">
             <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>

src/bundle/Resources/views/themes/admin/ui/tag.html.twig

@@ -4,7 +4,9 @@
 
 <div {{ html.attributes(tag_attributes) }}>
     <div class="ibexa-tag__content" {% if is_loading_state %} hidden {% endif %}>
-        {{ content }}
+        {{ include('@ibexadesign/ui/component/middle_ellipsis/middle_ellipsis.html.twig', {
+            name: content,
+        }) }}
     </div>
     <div class="ibexa-tag__spinner" {% if not is_loading_state %} hidden {% endif %}>
         <svg class="ibexa-icon ibexa-icon--small ibexa-spin">