Option to use original DOM elements instead of clones

[jigarius]

Expected Behavior

Sometimes, people create a hidden DIV element with menu content and expect that entire DIV to be used in the sidr exactly as-is because they have JavaScript events and other complex things attached to the original DIV.

Current Behavior

There is no way an original DOM element can be included in the sidr. A copy of the original element is always created, with an option of renaming IDs.

Possible Solution

Provide an option named noCopy or useOriginal or appendSource which when set to true should make Sidr get items found by the source jQuery selector and append those original elements in to the sidr element.

[artberri]

We don't want to add more complexity to the library, in addition to this, it is very difficult to be able to position the original div as a side menu depending on the situation of that DIV in the DOM. The reason to clone the div is to be able to put it wherever we want in the DOM.

Why can't you just add the same JS events to the copied content? What are the other complex things?

[jigarius]

I wrote a Sidr + Drupal integration. Things seem to be going fine for basic use cases. However, for complex things like forms, I'm afraid it might lead to problems for certain types of Drupal content, like forms, etc.

Besides, I see that the plugin currently clones the inner HTML of the source elements to the sidr panel, which pre-requires the HTML to have additional wrappers sometimes. For example, Drupal creates a site logo block like #block-site-branding. Now, if I set the source as #block-site-branding then the Sidr will end up having only an img tag, which is the content of the #block-site-branding. Hence, it will make things hard to style without a context like .sidr #block-site-branding img {}.

[francesco-quagliati]

Same problem here, also for me in Drupal ( 8 ).
I've a form created from js of a third party booking agency, i need to put that form in a sidr in the mobile version of the website, but it only copy the html so the js events are not triggered anymore, is there a solution to this?
Thanks!

[jigarius]

Hey francesco. I have added a configuration to the 8.x-2.x version of the sidr module for drupal to allow this (along with many accessibility fixes) . Please try it and let me know if it works for you. The contents lose their JavaScript events though, I will fix that later today or this weekend. I hope this answer helps.