#451 fixed collect elements to work with new CSS grid layout

asterics · Nov 27, 2024 · c508204 · c508204
1 parent db838b4
commit c508204
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 15 deletions.
diff --git a/src/js/service/collectElementService.js b/src/js/service/collectElementService.js
@@ -73,18 +73,17 @@ collectElementService.initWithElements = function (elements, dontAutoPredict) {
     });
     keyboardLikeFactor = oneCharacterElements / normalElements;
     if (registeredCollectElements.length > 0) {
-        let intervalHandler = setInterval(() => {
-            if ($('.item[data-type="ELEMENT_TYPE_COLLECT"]').length > 0) {
-                clearInterval(intervalHandler);
-                updateCollectElements();
-                if (!dontAutoPredict) {
-                    predictionService.predict(getPredictText(), dictionaryKey);
-                }
-            }
-        }, 100);
+        updateCollectElements();
+        if (!dontAutoPredict) {
+            predictionService.predict(getPredictText(), dictionaryKey);
+        }
     }
 };
 
+collectElementService.clearCollectElements = function() {
+    $('.collect-container').empty();
+}
+
 collectElementService.doCollectElementActions = async function (action) {
     if (!action) {
         return;
@@ -306,7 +305,7 @@ async function updateCollectElements(isSecondTry) {
                             ${text}
                         </span>`;
             outerContainerJqueryElem.html(
-                (html = `<div class="collect-container" dir="auto" style="flex: 1; background-color: #e8e8e8; text-align: justify;">${html}</div>`)
+                (html = `<div class="collect-container" dir="auto" style="height: 100%; flex: 1; background-color: #e8e8e8; text-align: justify;">${html}</div>`)
             );
             fontUtil.adaptFontSize($(`#${collectElement.id}`));
         } else {
@@ -381,15 +380,15 @@ async function updateCollectElements(isSecondTry) {
                                 <div style="display:flex; justify-content: center">
                                         ${imgHTML}
                                 </div>
-                                <div style="text-align: center; font-size: ${textHeight}px; line-height: ${lineHeight}px; height: ${lineHeight}px; width: ${elemWidth}px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; ${
+                                <div style="text-align: center; font-weight: bold; font-size: ${textHeight}px; line-height: ${lineHeight}px; height: ${lineHeight}px; width: ${elemWidth}px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; ${
                     !showLabel ? 'display: none' : ''
                 }">
                                     ${image ? label : ''}
                                 </div>
                              </div>`;
             }
             let additionalCSS = useSingleLine ? 'overflow-x: auto; overflow-y: hidden;' : 'flex-wrap: wrap;';
-            html = `<div class="collect-container" dir="auto" style="flex: 1; display: flex; flex-direction: row; background-color: #e8e8e8; text-align: justify; ${additionalCSS}">${html}</div>`;
+            html = `<div class="collect-container" dir="auto" style="height: 100%; flex: 1; display: flex; flex-direction: row; background-color: #e8e8e8; text-align: justify; ${additionalCSS}">${html}</div>`;
             outerContainerJqueryElem.html(html);
             if (useSingleLine) {
                 let scroll =

diff --git a/src/vue-components/grid-display/grid-display.vue b/src/vue-components/grid-display/grid-display.vue
@@ -2,7 +2,8 @@
     <grid-layout class="grid-layout-container" v-if="renderGrid" :rows="renderGrid.rowCount" :columns="columns" :options="{backgroundColor: metadata.colorConfig.gridBackgroundColor, componentType: 'ol'}">
         <grid-element v-for="elem in renderGrid.gridElements" :key="elem.id" :x="elem.x" :y="elem.y" :width="elem.width" :height="elem.height" component-type="li">
             <div class="element-container" :id="elem.id" tabindex="40" :aria-label="getAriaLabel(elem)" :data-empty="isEmpty(elem)" :style="`margin: 2px; border-radius: 3px; border: 1px solid ${getBorderColor()}; background-color: ${getBackgroundColor(elem)};`">
-                <grid-element-normal :grid-element="elem" :metadata="metadata" aria-hidden="true"/>
+                <grid-element-normal v-if="elem.type === GridElementModel.ELEMENT_TYPE_NORMAL" :grid-element="elem" :metadata="metadata" aria-hidden="true"/>
+                <grid-element-collect v-if="elem.type === GridElementModel.ELEMENT_TYPE_COLLECT" aria-hidden="true"/>
             </div>
         </grid-element>
     </grid-layout>
@@ -27,14 +28,16 @@ import { GridActionCollectElement } from '../../js/model/GridActionCollectElemen
 import { GridActionNavigate } from '../../js/model/GridActionNavigate';
 import { GridActionWebradio } from '../../js/model/GridActionWebradio';
 import { GridActionYoutube } from '../../js/model/GridActionYoutube';
+import GridElementCollect from './gridElementCollect.vue';
 
 export default {
-    components: { GridElement, GridElementNormal, GridLayout },
+    components: { GridElementCollect, GridElement, GridElementNormal, GridLayout },
     props: ["gridData", "metadata"],
     data() {
         return {
             renderGrid: null,
-            columns: null
+            columns: null,
+            GridElementModel: GridElementModel
         }
     },
     watch: {

diff --git a/src/vue-components/grid-display/gridElementCollect.vue b/src/vue-components/grid-display/gridElementCollect.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="grid-item-content">
+        <div class="collect-outer-container text-container" style="position: absolute; display: flex; top: 5px; right: 5px; bottom: 5px; left: 5px;">
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: [],
+    data() {
+        return {
+        }
+    },
+    methods: {
+    },
+    mounted() {
+    },
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/vue-components/views/gridView.vue b/src/vue-components/views/gridView.vue
@@ -84,6 +84,7 @@
     import { systemActionService } from '../../js/service/systemActionService';
     import GridDisplay from '../grid-display/grid-display.vue';
     import { gridUtil } from '../../js/util/gridUtil';
+    import { collectElementService } from '../../js/service/collectElementService';
 
     let vueApp = null;
     let UNLOCK_COUNT = 8;
@@ -280,6 +281,7 @@
             async loadGrid(gridData, options = {}) {
                 options.continueInputMethods = options.continueInputMethods || false;
                 options.forceReload = options.forceReload || false;
+                collectElementService.clearCollectElements();
                 if (gridData && (options.forceReload || !this.renderGridData || this.renderGridData.id !== gridData.id)) {
                     if (gridUtil.hasAREModel(gridData)) {
                         let areModel = gridUtil.getAREModel(gridData);
@@ -314,6 +316,7 @@
                 initContextmenu();
                 this.initInputMethods(options);
                 this.highlightElements();
+                collectElementService.initWithElements(this.renderGridData.gridElements);
                 $(document).trigger(constants.EVENT_GRID_LOADED);
             },
             highlightElements() {