[Pas2js] Detect DOM changes with Mutation Observers

[warleyalex]

I'll share you mutation observer class definition.
Using MutationObserver is possible to detect a DOM change in a element, for
instance in a TSplitter component, it's required I'm using following
definition.

-----------------------------------------------------------
unit uMutationObserver;

{$MODE objfpc}{$H+}
{$MODESWITCH externalclass}

interface

uses
  Classes, SysUtils, JS, Web;

type
  TJSMutationObserver = class;
  TJSMutationObserverInit = class;
  TJSMutationRecord = class;
  TJSMutationRecordArray = array of TJSMutationRecord;
  TStringDynArray = array of string;
  TJSMutationCallback = procedure(mutations: TJSMutationRecordArray;
    observer: TJSMutationObserver);
  TJSSubscribeCallback = procedure(mutationRecordsList:
TJSMutationRecordArray)
    of object;

{ ╔════════Constructor for instantiating new DOM mutation
observers═══════════════════╗
  ║                                                                                  
║
  ║ More info here:
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ║
  ║ Objects list:  
https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord   ║
 
╚═══════════════════════════════════════════════════════════════════════════════════╝
}

type
  TJSMutationObserverInit = class external name 'Object'(TJSObject)
  private
    FAttributes: boolean; external name 'attributes';
    FAttributeOldValue: boolean; external name 'attributeOldValue';
    FCharacterData: boolean; external name 'characterData';
    FCharacterDataOldValue: boolean; external name 'characterDataOldValue';
    FChildList: boolean; external name 'childList';
    FSubTree: boolean; external name 'subtree';
    FAttributeFilter: TJSArray; external name 'attributeFilter';
  public
    constructor new;
    { public properties }
    property attributes: boolean read FAttributes write FAttributes;
    property attributeOldValue: boolean read FAttributeOldValue write
FAttributeOldValue;
    property characterData: boolean read FCharacterData write
FCharacterData;
    property characterDataOldValue: boolean read FCharacterDataOldValue
write FCharacterDataOldValue;
    property childList: boolean read FChildList write FChildList;
    property subTree: boolean read FSubTree write FSubTree;
    property attributeFilter: TJSArray read FAttributeFilter write
FAttributeFilter;
 end;

type
  TJSMutationObserver = class external name 'MutationObserver'
  public
    { constructor }
    constructor new(mutationCallback: TJSMutationCallback); overload;
    constructor new(mutationCallback: TJSSubscribeCallback); overload;
    { public methods }
    procedure observe(target: TJSNode); overload;
    procedure observe(target: TJSNode; options: TJSMutationObserverInit);
overload;
    procedure observe(target: TJSNode; options: TJSObject); overload;
    procedure disconnect;
    function takeRecords: TJSMutationRecordArray;
  end;

type
  TJSMutationRecord = class external name 'MutationRecord'
    private
      Ftype: string; external name 'type';
      Ftarget: TJSNode; external name 'target';
      FaddedNodes: TJSNodeList; external name 'addedNodes';
      FremovedNodes: TJSNodeList; external name 'removedNodes';
      FpreviousSibling: TJSNode; external name 'previousSibling';
      FnextSibling: TJSNode; external name 'nextSibling';
      FattributeName: string; external name 'attributeName';
      FattributeNamespace: string; external name 'attributeNamespace';
      FoldValue: string; external name 'oldValue';
    public
      { public properties }
      property &type: string read Ftype;
      property target: TJSNode read Ftarget;
      property addedNodes: TJSNodeList read FaddedNodes;
      property removedNodes: TJSNodeList read FremovedNodes;
      property previousSibling: TJSNode read FpreviousSibling;
      property nextSibling: TJSNode read FnextSibling;
      property attributeName: string read FattributeName;
      property attributeNamespace: string read FattributeNamespace;
      property oldValue: string read FoldValue;
    end;

implementation

end.
-----------------------------------------------------------





--
Sent from: http://pas2js.38893.n8.nabble.com/