Itinerary Widget - markup ready

[teaganm]

Here is a gist with the markup: https://gist.github.com/teaganm/52046026c701f4bc654e0c6202de074f

The "th-itinerary" element wraps the whole widget. Each item is wrapped in "th-itin-single"

The title outputs into the span inside "th-itin-title"

The content outputs inside "th-itin-content"

In the widget form we'd like to add 2 options that would be below the section where you add items:

No.1 - Width

Options:

• Narrow (default)
• Medium
• Full Width

The options add a class onto the main "th-itinerary" element:

• th-itin-narrow
• th-itin-med
• th-itin-fw

No.2 - Alignment

Options:

• Center (default)
• Left

The options also add a class onto the main "th-itinerary" element:

• th-itin-center
• th-itin-left

In terms of color, let's have Title color, Content color, Vertical line color, and Dot color.

The title color input would apply this code: .th-itin-title span {color:#XXX}

The content color input would apply this code: .th-itin-content {color:#XXX}

The vertical line color input would apply this code: .th-itin-content {border-color:#XXX}

The dot color input would apply this code: .th-itin-icon {color:#XXX}

In terms of the JS we'd like it to work in the same way as the built-in 'Toggles' widget. My markup is quite similar, but let me know if any changes are needed to accomodate that.

There is currently an option in the widget that says "Start all Toggles Expanded" - let's just change that to "Start all Items Expanded" and I think that should default to on.

Thanks!

[ryanlabelle]

Nice!

[adiraoco]

Do I have to add a class for the Start all Items Expanded setting?

[adiraoco]

@teaganm .th-itin-content needs the border-style and border-width properties set.

[teaganm]

Good question - I'm hoping we can borrow as much JS as possible - the Toggle widget is not a Pro widget so I think it's fine.

Looking at their widget, they don't have that exact option but they add the class 'active' for each one when it's open. If we can change that to use "th-itin-active" as the class that's great, otherwise active is fine. That would be adding that on each of the "th-itin-title" elements when it loads.

[teaganm]

For the border, right now I have this CSS in the stylesheet: .th-itin-content { border-left:2px solid rgba(35,35,35,0.25); }

Isn't it fine to then have the input field just override the border color with something like this? .th-itin-content {border-color:#XXX}

[adiraoco]

All's good with the border. The CSS had not loaded properly. My bad.

Implemented everything else. Please check. Thanks.

[teaganm]

Great, thanks. Looks good. One thing - I may not have been clear on the JS, but we're wanting this widget to have the same effect as the built-in Toggle widget.

Example: https://cl.ly/1r2h350H3J1x

My markup is pretty similar to that widget so I was hoping we could borrow the JS from that and change the elements that are targeted - would that work?

Let me know if any changes are needed on my end.

[adiraoco]

Tried a few things. Looks like elementor's JS only works on their widgets.

I added a little JS that is based on the what elementor uses. bb97f2eb606f8b823523baca8d813a0fa0fbc5bb Have a look and modify if needed.

[ryanlabelle]

Looks good now. I did a few updates to the JS.