How to (2): dynamically move elements in Aurelia application

Github readme at:

Playable online demo & explanation:

http://aurelia-portal.bigopon.surge.sh/

6 Likes

@bigopon very nice feature, well explained and documented. Would you consider hosting your blogs / tutorials in the Aurelia Users Community Space (AUCS)? I am guessing that you prefer to be your own publisher, but for the sake of all Aurelia users, you may consider syndicating your documents :smile:

For each tutorial, i can double host it on AUCS and a standalone site. How do I hoost that tutorial on AUCS?

@bigopon, what a crazy feature! Scratch my itch on numerous occasions.

I immediately sensed this actually can replace a lot of usage of aurelia-dialog.
As long as it can work with if.bind (I hope it does), we can statically bind (two-way) into a “portal dialog” which requires no extra code in js file. So my js code is fully decoupled from the “portal dialog” implementation. This also means I can fully control the appearance (css) of the dialog, just need to make sure to have a full screen overlay div to block unintended event dispatch on underneath DOM.

Too bad, it’s a template controller, means I can not use it with if.bind. I guess use if.bind on a wrapper DOM can still make my idea working. I will experiment it.

@bigopon, double hosting is the simple form of syndication that I mentioned above - so thank you for willing to enrich our documents collection . As described in my today’s article AUCS - getting close to a group start, any author will be offered to either write a Guide or a Blog (which decision depends on the document’s size and purpose). Once we get these two AUCS web application sections fully functional (we plan to start initial testing next week), I will let you know all of the details of hosting your information.

It would be good if it included how to position your element, after it is placed outside the container so it aligns with your element, I think that’s all I’m missing.

Edit: I got it sort of working but as I have scrollable panels it doesn’t update when the container is scrolled

@mttmccb libs like Tether or popper often will do the job well ( though popper.js suffers from overflown hidden / auto / scroll ), even when you scroll away. the portal attribute can pack some more into it to support positioning out of the box, but there are cases: overflowing document body, shrinking / flipping to fit available space, scrolling away, which could make it too bloated. I feel like it should only make it easy for libs like above to do their job. If you can come up with some solution, we can put it in the box to support such scenarios.

@huochunpeng I’m using it with if without issue but please help file issues if you find one

Thanks I wasn’t aware of Tether, I’ll give it a go. I tried popper but ran into problems, I don’t remember exactly what.

I think like you say it’s not worth including in the library but might be worth highlighting those options in the guide.

@huochunpeng aurelia dialog will also help you have better flow / simpler view for elements. So unless the inline dialog is extremely simple, I wouldn’t want to do so :smile: . It’s still nice to see what you will come up with regardless.

I agree, @bigopon. I have used dialogs as promise in workflow at many places, they have reason to stay.

@mttmccb thanks for the suggestion. Tether and Popper are now in the guide

I am genuinely at a loss trying to explain how did I miss your question

How do I host that tutorial on AUCS?

So, with apology to made you wait, the answer ought to be simple: if your tutorial fits into our current 4 projects please use this workflow description. Otherwise, consider to publish your tutorial as a blog and in that case, you can create a PR to this repo.

Note that all authors are credited with their name and any other info you want to be published.

@bigopon I just wanted to post here to extend a thanks for this plugin. Helped me solve an issue that I was not looking forward to.

3 Likes