On Wednesday, March 1, 2017 at 4:24:54 PM UTC, Witold Szczerba wrote:
>
> So, you ask for a list of mutations and then, for each mutation you repeat
> exactly the same procedure which is not related to the mutation you are
> currently at.
> Why are you iterating over mutations?
>
Good point. No need to iterate, its just got left in there from your code.
Using a MutationObserver to implement a ResizeObserver does not seem the
best idea. I don't really like that I end up scanning from the top instead
of looking at an actual mutation 'target'. But this trick of putting the
observer at the top is needed to get around the virtual DOM issue that
prevents the observer being placed on the actual node that I want to watch,
so I suppose doing a scan from the top on any mutation is justified as it
is part of this workaround.
A ResizeObserver would be better its 'target' would definitely be the thing
being resized - not having to guess something is resized because it or one
of its children was mutated. I think ResizeObserver is not so well
supported though, which is why I stuck with MutationObserver. I called the
Elm module I wrote around it ResizeObserver, with a view to rewriting it
with a ResizeObserver at some future time when ResizeObserver is widely
supported.
>
> Regards,
> Witold Szczerba
>
> On Wed, Mar 1, 2017 at 4:59 PM, 'Rupert Smith' via Elm Discuss <
> elm-d...@googlegroups.com <javascript:>> wrote:
>
>> On Tuesday, February 28, 2017 at 10:54:56 PM UTC, Witold Szczerba wrote:
>>>
>>> I have used MutationObserver, so in Elm all I have to do is to add a
>>> specific class and custom event handler, so there is no need to track it by
>>> "id". The mutation observer is attached at the top node of the Elm app.
>>> This works OK so far.
>>>
>>
>> When looking for nodes that have may have been resized, I found it
>> helpful just to scan from the top of the document for the 'watch-resize'
>> class. This is because the mutation may occur nested within some div that I
>> am interested in. The div is not in 'addedNodes' on the mutation, and it
>> isn't always the 'target' either, sometimes its the parent of the target,
>> sometimes the parent.parent and so on.
>>
>> const topElement = document.getElementById("jtrial");
>>
>> const observer = new MutationObserver(mutations => {
>> mutations.forEach(mutation => {
>> $(topElement).find('.watch-resize').each(function () {
>> console.log("found node with .watch-resize class.");
>> console.log($(this));
>>
>> var result = {
>> id: $(this).context.id,
>> height: $(this).context.clientHeight,
>> width: $(this).context.clientWidth
>> };
>>
>> app.ports.mutation.send(result);
>> });
>> });
>> });
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Elm Discuss" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to elm-discuss...@googlegroups.com <javascript:>.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
