Dev Diary Ep74 - More New Components

Hello again,

This week, we’re introducing two new components: the long-awaited “Dropdown” component and a new “Top Pages” navigation component. Watch today’s Dev Diary to learn more about these two useful components.

Both of these components will be available later today when build 0.7.7 is released.

Open the demo project. Don’t forget you’ll need build 0.7.7 to use the new components!

Get Elements for macOS

Elements is available in Early Access. You can visit the elementsapp.io website to purchase a license today.

Thanks for Your Feedback

As always, keep the feedback coming. Your input has made all the difference so far.

Thank you!

See you soon,
Dan & Team Realmac.

4 Likes

:heart_eyes:

:+1:t2::+1:t2::+1:t2:

Thank you @dan and the team!!

Haha, you’re welcome :smiling_face_with_three_hearts: I know you’ve been waiting for the Dropdown for a while!

Are we able to drop a folder of pages into the component section of the dropdown, so it will show list of pages in that folder, or do I have to create each entry manually??

Hi @dan, you alluded to 3rd part developers being able to get a list of web pages; can you point me in the right direction for reading about this? :slightly_smiling_face:

Looks good! Now I can try to make vertical menus for my website. I also like the Top Pages nav component, as I have something similar on the footer of my website.

you could drop in the new Top Pages component in to the dropdown - that will get you all of your top level pages.

If you need only a subset of pages, or a custom set of links, then you’d have to build this up yourself using our built-in components :slight_smile:

1 Like

You can get the project pages in your hooks file via the rw.pages object.

In hooks:

const transformHook = (rw) => {    
    // Get pages from rw
    const pages = rw.pages
    
    // Set pages in our template data
    rw.setProps({ 
        pages
    })
}

exports.transformHook = transformHook;

More info here:

1 Like

Seems like Trigger should be above Contents in the outline view, as that’s the order in which I’d generally work.

Thanks for the suggestion.

Components with multiple dropzones are listed in alphabetical order to provide consistency (especially when developing your own, or using third-party components). We may look to add ordering support in the API at a later date.

Today’s build (0.7.7) with these new components is now live, go grab it!

@dan The dropdown looks like it will be very flexible and I see a number of use cases for it. Testing is proceeding.

The first issue I have run into with it is that under certain circumstances the dropdown will go behind some elements on the page. See below.

On this page it will correctly go above an image dirctly below it within the same container. But as the menu extends down over a separate section below it that contains the same image, it ends up going behind that image. None of these elements have any Z-index set and I experimented with the Z-index of the dropdown but it seemed to make no difference.

Here is the link to the project if you need to take a look.

elementsapp://downloadDocument/AjyqyHR7YhZr

The issue is the Container component is quite complex and requires that a z-index be set internally on the different layers it has (background and content). This is why in some cases the content within a Container can appear above other things on the page.

Good news: you can easily fix this by setting the “Isolation” to “Isolate”. Here’s a quick video demonstrating how to do this:

1 Like

Hello :waving_hand:

Thanks Great component “Dropdown” and a “Top Pages”

Top Pages Are navigation is good; I wish to make it responsive with mobile Options to trigger mobile

1 Like

@ben Thank you Ben this is great. I have often wondered what the usage model is for the “Isolation” setting, now I know. Works like a charm.

1 Like

I appreciate the hard work that you put into this product. The early access page (Early Access | RapidWeaver Elements Docs), however, has problems. They’re not advanced development code problems. They’re easy to spot and fix, but they currently make you folks look unprofessional.

For example, I wanted to know the price of Elements. It’s a very basic question. I tried clicking on the links that say, “You can purchase Elements via our website.” Those links simply don’t work. The URL is shown below in the screenshot. It’s not a valid URL for any page and browsers will dependably produce an error, regardless of the version.

If you’re interested in getting people to buy Elements, you need to make sure that the Purchase links work, at the very least. I shouldn’t have to figure out what’s wrong and I shouldn’t have to fix problems caused by your site. Based on that Early Access page, any reasonable person would gather that quality control at RealMac is lacking. And poor quality control is a very good reason not to buy any software product.

You can do better than this.

Larry Faulks

| dan Dan C. Founder, Realmac Software
15 April |

  • | - |

Hello again,

This week, we’re introducing two new components: the long-awaited “Dropdown” component and a new “Top Pages” navigation component. Watch today’s Dev Diary to learn more about these two useful components.

Both of these components will be available later today when build 0.7.7 is released!

Dev Diary Ep74 - Dropdown and Top Page Components

Get Elements for macOS

Elements is available in Early Access. You can visit the elementsapp.io website to purchase a license today.

Thanks for Your Feedback

As always, keep the feedback coming. Your input has made all the difference so far.

Thank you!

See you soon,
Dan & Team Realmac.

(attachments)

Takes me right to the web page

Thanks for the heads-up about this; the link in the manual is now fixed.

Please keep in mind that Elements, along with the manual, is still in development. So things are still being written and updated.

If you spot any other issues, please let us know and we’ll get them fixed as soon as possible.

Thanks again!

Perhaps you misunderstood what I did.

In the original email, there was a link in the sentence that says, “You can visit the elements.app.io website to purchase a license today.” That link works and the page opens. On that second page, in the early access section, there’s a link to purchase the product as shown below. That external link does not work. The pop-up that appears shows exactly why. Apparently since this morning, that link has been fixed.

That link has now been fixed :blush: