[Pas2js] Detect DOM changes with Mutation Observers

[warleyalex]

Michael Van Canneyt wrote
> I have added it to the web.pas unit, but I changed the declaration
> somewhat.
> - Changed init structure to record. (there is still an overload with
> TJSObject)

When I pass a config object parameter for the observer, such as
{"childList": true, "attributes": true} 
I prefer to use the structure external class inherited from TJSObject
instead of record, like in the following example:

-----> Basic example <--------
function observerConfig: TJSMutationObserverInit;
{ ╔════Config
paramater═════════════════════════════════════════════════════╗
  ║ Options for the observer (which mutations to observe)                  
║
  ║ by default all false. However, you can pick as many as you want,       
║
  ║ but at least one of - attributes, characterData, or childList          
║
  ║                                                                        
║
  ║ var optParams = {"childList": true, "attributes": true}                
║
 
╚═════════════════════════════════════════════════════════════════════════╝}
begin
  result := TJSMutationObserverInit.new;
  result.attributes           := true; { attribute changes will be observed
| on add/remove/change attributes }
  result.attributeOldValue    := true; { will show oldValue of attribute |
on add/remove/change attributes | default: null }
  result.characterData        := true; { data changes will be observed | on
add/remove/change characterData }
  result.characterDataOldValue:= true; { will show OldValue of characterData
| on add/remove/change characterData | default: null }
  result.childList            := true; { target childs will be observed | on
add/remove }
  result.subtree              := true; { target childs will be observed | on
attributes/characterData changes if they observed on target }
  result.attributeFilter      := TJSArray.new('style'); { filter for
attributes | array of attributes that should be observed, in this case only
style }

end;

procedure Subscribe(mutationList: TJSMutationRecordArray; observer:
TJSMutationObserver);
var
  mutation: TJSMutationRecord;

begin
  for mutation in mutationList do
  begin
    if (mutation.&type = 'childList') then
    begin
      console.log('A child node has been added or removed.');
    end
    else if (mutation.&type = 'attributes') then
    begin
      console.log('The ' + mutation.attributeName + ' attribute was
modified.');
    end;
  end;
end;

// Select the node that will be observed for mutations
var
  targetNode: TJSElement;
  observer: TJSMutationObserver;
begin
  // Select the node that will be observed for mutations
  targetNode := document.getElementById('OBJA');

  // Create an observer instance linked to the callback function
  observer := TJSMutationObserver.new(@Subscribe);
  // Start observing the target node for configured mutations
  observer.observe(targetNode, observerConfig);

  // Later, you can stop observing
  //observer.disconnect();



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