feat: add "Scroll up" action in loop elements block

src/components/newtab/workflow/edit/EditLoopElements.vue

@@ -35,7 +35,7 @@
       <ui-select
         :model-value="data.loadMoreAction"
         :label="t('common.action')"
-        class="mt-2"
+        class="mt-2 w-full"
         @change="updateData({ loadMoreAction: $event })"
       >
         <option v-for="action in actions" :key="action" :value="action">
@@ -62,7 +62,9 @@
         />
       </edit-autocomplete>
       <ui-input
-        v-if="['click-element', 'scroll'].includes(data.loadMoreAction)"
+        v-if="
+          ['click-element', 'scroll', 'scroll-up'].includes(data.loadMoreAction)
+        "
         :model-value="data.actionElMaxWaitTime"
         label="Max seconds wait for more elements"
         class="w-full mt-2"
@@ -71,12 +73,20 @@
         @change="updateData({ actionElMaxWaitTime: +$event })"
       />
       <ui-checkbox
-        v-if="data.loadMoreAction === 'scroll'"
+        v-if="data.loadMoreAction.includes('scroll')"
         :model-value="data.scrollToBottom"
         class="mt-4"
         @change="updateData({ scrollToBottom: $event })"
       >
-        {{ t('workflow.blocks.loop-elements.scrollToBottom') }}
+        {{
+          t(
+            `workflow.blocks.loop-elements.${
+              data.loadMoreAction === 'scroll-up'
+                ? 'scrollToTop'
+                : 'scrollToBottom'
+            }`
+          )
+        }}
       </ui-checkbox>
       <ui-input
         v-if="data.loadMoreAction === 'click-link'"
@@ -106,7 +116,7 @@ const props = defineProps({
 });
 const emit = defineEmits(['update:data']);
 
-const actions = ['none', 'click-element', 'click-link', 'scroll'];
+const actions = ['none', 'click-element', 'click-link', 'scroll', 'scroll-up'];
 
 const { t } = useI18n();
 

src/content/blocksHandler/handlerLoopElements.js

@@ -60,7 +60,7 @@ export default async function ({ data, id }) {
     };
     let elements = null;
 
-    if (data.type === 'scroll') {
+    if (data.type.includes('scroll')) {
       const loopItems = document.querySelectorAll(
         `[automa-loop*="${data.loopAttrId}"]`
       );
@@ -71,7 +71,13 @@ export default async function ({ data, id }) {
 
       if (data.scrollToBottom) {
         const { scrollHeight } = scrollableParent;
-        scrollableParent.scrollTo(0, scrollHeight + 30);
+        scrollableParent.scrollTo(
+          0,
+          data.type === 'scroll-up' ? 0 : scrollHeight + 30
+        );
+      } else if (data.type === 'scroll-up') {
+        const [firstElement] = loopItems;
+        firstElement.scrollIntoView();
       } else {
         const lastElement = loopItems[loopItems.length - 1];
         lastElement.scrollIntoView();

src/locales/en/blocks.json

@@ -689,11 +689,13 @@
         "description": "Iterate through elements",
         "loadMore": "Load more elements",
         "scrollToBottom": "Scroll to bottom",
+        "scrollToTop": "Scroll to top",
         "actions": {
           "none": "None",
           "click-element": "Click an element",
           "scroll": "Scroll down",
-          "click-link": "Click a link"
+          "click-link": "Click a link",
+          "scroll-up": "Scroll up"
         }
       },
       "loop-data": {