Adding reusable modules to content with additional selector criteria (vs its base)

[Martin de laat]

Let's say I have a reusable module for custom dropdown elements:

class Dropdown extends Module {
  static base = {
    $("p-dropdown")
  }
}

and I have a page, with a 'modal' added to it. This modal has multiple dropdowns.

Each modal has its own identifier. What would be the best practice to add this to the content?

I do not wish to create additional classes for each type of dropdown that extends the Dropdown class above.

class customModal extends Module {
 static base = { $(".modal.is-active") }


 static content = {
 body(wait: true) {$(".modal-card-body")}
 nationalityDropdown(wait: true) { body.find("#nationalityDropdown").module(Dropdown) }
 genderDropdown(wait: true) { body.find("#genderDropdown").module(Dropdown) }
 }
}

(note: the naming is altered to keep it simple. Not exact code in project.)

What would be perfect if I could add content to my customModal something like this:

nationalityDropdown(wait: true) { module(Dropdown).where{ id: "nationalityDropdown") } }

[Martin de laat]

To be clear, I want the resulting selector for nationalityDropdown to try to find a match for both the id 'nationalityDropdown' and the class 'p-dropdown'

[Marcin Erdmann]

Hi Martin,

You can simply change your Module base definition to filter the initial base element using your selector and if that returns a falsey (i.e. empty) Navigator then default it to the element selected using your selector:

class Dropdown extends Module {

  private static final String BASE_SELECTOR = "p-dropdown"

  static base = {

    $().filter(BASE_SELECTOR) ?: $(BASE_SELECTOR)

  }

} 

Hope that helps,

Marcin

On Mon, Dec 3, 2018 at 8:39 AM Martin de laat <martind...@gmail.com> wrote:

To be clear, I want the resulting selector for nationalityDropdown to try to find a match for both the id 'nationalityDropdown' and the class 'p-dropdown'

--
You received this message because you are subscribed to the Google Groups "Geb User Mailing List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to geb-user+u...@googlegroups.com.
To post to this group, send email to geb-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/geb-user/fc0772ad-86b0-468d-ac5e-371b69ec5a30%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Martin de laat]

Dear Marcin,

Thank you. How would I go about declaring the content in the page/modal?

[Marcin Erdmann]

You would do it exactly the way you had it in your example:

nationalityDropdown(wait: true) { body.find("#nationalityDropdown").module(Dropdown) }

genderDropdown(wait: true) { body.find("#genderDropdown").module(Dropdown) }

To view this discussion on the web visit https://groups.google.com/d/msgid/geb-user/450a7623-12ba-4989-a6ae-16e07b582fc6%40googlegroups.com.

[Martin de laat]

Alright! Thank you.