Added New Element feature to remove element and slide into view

apps/acf-options-page/src/components/data-list.components.tsx

@@ -131,7 +131,7 @@ export function DataList() {
         <option value='LocationCommand::assign::url'>LocationCommand::assign::url</option>
         <option value='LocationCommand::open::https://getautoclicker.com'>LocationCommand::open::https://getautoclicker.com</option>
         <option value='Tabs::reload'>Tabs::reload</option>
-        <option value='Tabs::update::{"url":"https://test.getautoclicker.com/"}'>Tabs::update::&#123;"url":"https://test.getautoclicker.com/"&#125;</option>
+        <option value='Tabs::update::{"url":"https://test.getautoclicker.com/"}'>Tabs::update::&#123;"url":"https://test.getautoclicker.com/"&#123;</option>
         <option value='WindowCommand::close'>WindowCommand::close</option>
         <option value='WindowCommand::open::https://getautoclicker.com'>WindowCommand::open::https://getautoclicker.com</option>
         <option value='WindowCommand::delete'>WindowCommand::delete</option>
@@ -159,6 +159,12 @@ export function DataList() {
         <option value='GoogleSheets::Sheet1!A<batchRepeat>'>GoogleSheets::Sheet1!A&lt;batchRepeat&gt;</option>
         <option value='GoogleSheets::Sheet1!A<actionRepeat>'>GoogleSheets::Sheet1!A&lt;actionRepeat&gt;</option>
         <option value='GoogleSheets::Sheet1!A<sessionCount>'>GoogleSheets::Sheet1!A&lt;sessionCount&gt;</option>
+        <option value='Element::remove'>Element::remove</option>
+        <option value='Element::scrollIntoView'>Element::scrollIntoView</option>
+        <option value='Element::scrollIntoView::true'>Element::scrollIntoView::true</option>
+        <option value='Element::scrollIntoView::{ "behavior": "smooth", "block": "end", "inline": "nearest" }'>
+          Element::scrollIntoView::&#123; "behavior": "smooth", "block": "end", "inline": "nearest" &#123;
+        </option>
       </datalist>
       <datalist id='valueExtractor'>
         <option value='@id'>To get id attribute of element</option>

libs/acf/events/src/lib/common.events.ts

@@ -123,6 +123,7 @@ export const EVENTS = {
   APPEND: 'append',
   PREPEND: 'prepend',
   CLIPBOARD: 'clipboard',
+  ELEMENT: 'element',
 };
 
 export default CommonEvents;

libs/acf/events/src/lib/element.events.ts

@@ -0,0 +1,30 @@
+import { ACTION_I18N_TITLE } from '.';
+import CommonEvents from './common.events';
+
+export const ElementEvents = (() => {
+  const execCommand = (element: HTMLElement, value: string) => {
+    const [, action, prop] = value.split('::');
+    if (action === 'scrollIntoView') {
+      if (!prop) {
+        element.scrollIntoView();
+      } else if (typeof prop === 'boolean') {
+        element.scrollIntoView(prop);
+      } else {
+        try {
+          const options = JSON.parse(prop);
+          element.scrollIntoView(options);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    } else if (action === 'remove') {
+      element.remove();
+    }
+  };
+
+  const start = (elements: Array<HTMLElement>, value: string) => {
+    console.debug(`${ACTION_I18N_TITLE} #${window.__currentAction}`, elements, value);
+    CommonEvents.loopElements(elements, value, execCommand);
+  };
+  return { start };
+})();

libs/acf/events/src/lib/index.ts

@@ -4,6 +4,7 @@ import { ClassEvents } from './class-list.events';
 import { ClipboardEvents } from './clipboard.events';
 import CommonEvents, { EVENTS } from './common.events';
 import { CopyEvents } from './copy.events';
+import { ElementEvents } from './element.events';
 import { FormEvents } from './form.events';
 import { FuncEvents } from './func.events';
 import { KeyEvents } from './key.events';
@@ -87,6 +88,9 @@ export const Events = (() => {
         case EVENTS.CLIPBOARD:
           await ClipboardEvents.start(elements, value);
           break;
+        case EVENTS.ELEMENT:
+          await ElementEvents.start(elements, value);
+          break;
         default:
           PlainEvents.start(elements, value);
       }