Echo JS 0.11.0

Medium friends link. Quite a bit of JS code in there, we can talk about it if you like to!

Best regards,
Tobias

[Side note] This article is an extended rewrite of “Using template literals to create a binding engine”. For the neo.mjs version 2 release, the syntax on how to use binding formatters got switched from strings to functions, which is not reflected inside the previous article. In case you have read it, take a look into the new content sections 3 & 4.

[Side note] This article is an extended rewrite of “Introducing view models for the neo.mjs Javascript UI framework”. For the neo.mjs version 2 release, the syntax on how to use binding formatters got switched from strings to functions, which is not reflected inside the previous article. In case you have read the previous article, take a look into the view definitions (arrow functions) and dive into the new content section 8.

done.

https://youtu.be/dFHeDd7wAus

you can now drag&drop in desktop and mobile envs. in case you use chrome to toggle the modes, please make sure to reload the page.

same url.

almost done with the TouchSensor:
https://youtu.be/tJxyxMyqR9E

background info:

the demo app is located inside the App Worker.

the drag events get triggered in main, while the handlers live within the App Worker scope.

I was sceptical at first, how the performance for a custom drag&drop implementation would work out.

Best to use Chrome (some polishing left for FF & Safari).

The TouchSensor is next on my todo list.

You can find the code here:

https://github.com/neomjs/neo/blob/dev/src/main/addon/DragDrop.mjs

https://github.com/neomjs/neo/tree/dev/src/main/draggable

https://github.com/neomjs/neo/blob/dev/src/dialog/Base.mjs

Once the TouchSensor is done, I will create a demo for multi screen drag&drop (dragging an in app dialog from one browser window into another).

A blog post will follow.

Desktop only as well (until the TouchSensor is ready) and still work in progress:

https://neomjs.github.io/pages/node_modules/neo.mjs/dist/production/examples/calendar/basic/index.html

You can only drag events inside the week view into valid states.

The project is deeply inspired by the Google Calendar as well as the native MacOS Calendar.

This is a very early preview version: I started this project a week ago, so please don't expect it to be functional yet. I think it will take 2-3 more weeks to get finished.

What you can do already:

Switch the theme.

Open the Settings Container, change settings for the weekly view. Ideally with the Weekly View as the active Card to see the delta updates.

I will add infinite scrolling for all views soon (similar to the DateSelector at the top left).

Drag & Drop for Events, mobile support and creating, editing & removing Events are on the todo list.

You can take a look into the source code here:

https://github.com/neomjs/neo/tree/dev/src/calendar

The Calendar is already pretty extensible & configurable, will add more options on the way.

Feedback appreciated!

Thx & best regards,
Tobias

https://youtu.be/RDFyFSnUFx4

There are around 25 transitions in place when reducing the width < 600px or the height < 400px, to make it feel more natural.

Not fully functional yet (making it responsive is on my todo list).

The website is a neo app as well => mulithreaded => running inside a webworker.

As an entirely free to use open source project, it relies on your input.

I just started to define the scope of the next minor release and your feedback is not just only welcome, but makes a big impact on the current roadmap.

So, what would you like to see next?