[Question] How to show/hide elements without display: none

[MrSorcus]

1. What a simple/right way to show or hide single elements on page without changing their style? For example, simple form with input fields, which depends on some user actions. I'm not sure that inserting all of this inputs with display: none to page is a good idea. I know about place, but create components for each single elements (like an input element) is not a best solution. And now we're returning to this issue.

   <form>
   <input id="1">
   <input id="2">
   <input id="3">
   <input id="4">
   </form

   How to show/hide inputs with id 2-4? display: none/block? this.input.style.display = "none/block" - use it every time when i want to display/hide it?

2. How to insert multiple elements to page with place without div (or any other) container.

class MultipleElements {
  constructor() {
    this.el = el("div",
      el("input"),
      el("input"),
      el("input"),
    )
  }
}

this.el = el("form", 
  this.elements = place(MultipleElements),
  this.button = el("button", "Submit")
)

mount(document.body, this.el)

this.elements.update(true)

Here div container not needed, but i don't know how to add this inputs without it.

Thanks for answer.

[pakastin]

Ok, I agree that there should be a support for element place – I'll add that.

[pakastin]

Added now in v3.8.0! 😉

Thank you for the idea! 😎👍

[MrSorcus]

Thank you so much. But what about №2 (How to insert multiple elements to page with place without div (or any other) container.)?

[pakastin]

Sure, that should also be possible – give me a few hours, our baby just woke up 🍼👶

[MrSorcus]

Ok, i understand. Thanks you again. :smile:

[pakastin]

I started to create Node array support, however since mount doesn't support mounting multiple nodes inside a component, I give up for now..

place need to have a single Node in el to be able to remount.

[pakastin]

I will probably add support for mounting elements with multiple nodes, since it has been requested for lists as well, so let's see..

[pakastin]

protip: you can combine place and list like this:

this.mylist = place(list.extend('.mylist', MyItem, '_id', { i18n }));

...

this.mylist.update(visible, data);

list.extend returns basically a View class.. 😉

[MrSorcus]

protip: you can combine place and list like this:

How to insert multiple elements to page with place without div (or any other) container.

Maybe useful, but not for this...? Because container (div element) still exist with list too.

A little question. place() currently doesn't support this?

place(
  el(".first"),
  el(".second")
)

Sorry for the inconvenience...

[pakastin]

No, the issue is that place needs a single Node in el to be supported with mount etc. I will investigate that further in some later time.

You could however create your own custom component to support showing/hiding multiple Nodes.

[MrSorcus]

Ok, understand.

Another one question. place() doesn't remember position of element.

Steps to reproduce.

const {
    el,
    mount,
    place
} = redom

this.el = el("",
    el(".first", "First"),
    this.place = place(el(".second", "Second")),
    el(".third", "Third")
)
mount(document.body, this.el)
this.place.update(true)
this.place.update(false)
this.place.update(true)

Result:

<div>
  <div class="first">First</div>
  <div class="third">Third</div>
  <div class="second">Second</div>
</div>

[pakastin]

Thanks for letting know, there was a bug which is now fixed! 💪

[pakastin]

https://jsfiddle.net/f414xrrq/

[pakastin]

place works so that if the visibility value has changed to true, it replaces a placeholder with the element: https://github.com/redom/redom/blob/44f055fae8824a6b1e336340073325d1a91f3c22/src/place.js#L32-L33

if it's changed to false, it replaces the element with the placeholder again: https://github.com/redom/redom/blob/44f055fae8824a6b1e336340073325d1a91f3c22/src/place.js#L51-L52

(the third value of mount is the before value, like insertBefore vs. appendChild)

The placeholder is just an empty text node: https://github.com/redom/redom/blob/44f055fae8824a6b1e336340073325d1a91f3c22/src/place.js#L14

😉

[MrSorcus]

Thanks for this detailed answer. I'm very happy with this library. :heart_eyes:

[pakastin]

I'm happy to hear that! I use RE:DOM daily in my own projects (also client work), in production as well. It's powering for example a digital signage platform both in manager and players.

Performance and memory-efficiency are top priority, since we're using low-end devices as well. And RE:DOM's been doing quite all right 😉