Re: [Tiki-devel] Replacing jQuery UI Sortable, UI Draggable, nestedSortable Plugins with SortableJS

Hi Andon and all

I agree we need a (better) strategy for (gradually) moving to using Vue.js for Tiki's interface, and i know i'm not really knowledgable enough to really design that as well as others here, such as yourself i think.

We're having a virtual TikiFest in a couple of months, and the opening sessions (and most of it i guess) will be on the Future of Tiki, and there are some notes here:

    https://tiki.org/TikiFest-Virtual-2021#The_future_of_Tiki

I think it's important that people with knowledge of Vue and node.js etc get involved, and as far as i know that means you and Guillaume, but any others please do come along too! ;)

Let's try and coordinate on dates for this that will work for us all, i'm thinking an initial discussion which i can kick off, and then a workshop/details session or two where we might actually get things done.

I'll try and prepare some notes (some here https://dev.tiki.org/VueJS-In-Tiki-Part-2) and add a convene plugin on a new page (one plugin that **really** needs a makeover!) to help move things along.

Meanwhile, do let me know if i can help, and apologies in advance for the messy "all in one file" tangle of JavaScript you'll find i've left in menus and structures admin ;)

jonny





> On 8 Apr 2021, at 19:37, Andon Andonov <[email protected]> wrote:
> 
> Thanks, Luci and Jonny, 😊
> 
> We will hardly succeed for Tiki 23.
> As you suggest, we can apply the changes step by step.
> For example, we can first replace the plugins in Struct Menus UI.
> https://github.com/SortableJS/Vue.Draggable looks good too (components for Vue, based on and offering all features of Sortable.js)
> but I'm afraid we'll accumulate a lot of Vue code that won't be well organized.
> Maybe it's better to first come up with a solid Vue embedding in Tiki.
> Yeah, may be later for date/time pickers.
> 
> Andon
> 
> 	Virus-free. www.avast.com
> 
> На чт, 8.04.2021 г. в 17:40 ч. luciash via TikiWiki-devel <[email protected]> написа:
>> Hi Andon!
>> 
>> I love it! +1 The license is compatible so it looks all good to me! All-in!
>> 
>> Thanks,
>> 
>> luci
>> 
>> 
>> 
>> On 08.04.2021 16:12, Andon Andonov wrote:
>>> Hello Tiki devs,
>>> 
>>> The problem: jQuery UI user interface library does not support the use of touch events in their widgets and interactions. Some old solution: https://github.com/furf/jquery-ui-touch-punch
>>> Related: https://avan.tech/item61462-Drag-and-drop-menu-management-Review-and-make-sure-it-s-very-stable
>>> 
>>> The purpose: SortableJS to replace the three plugins (and reduce the use of jquery ui until it is completely replaced) -  jQuery UI Sortable, UI Draggable and jQuery nestedSortable.  
>>> 
>>> The replacement will impact (some of the features I know):
>>> 	• Modules zones
>>> 	• Structure layout
>>> 	• Menus options
>>> 	• Admin option box
>>> 	• Other list structures
>>> SortableJS is a JavaScript library for reorderable drag-and-drop lists.
>>> Github Stars: 22.2K
>>> Used by: 41.4k
>>> Contributors: 143
>>> 
>>> SortableJS - Examples (Simple list, Shared lists, Cloning, Disabling sorting, Handles, Filter, Thresholds, Nested Sortables, Grid, MultiDrag, Swap)
>>> GitHub: https://github.com/SortableJS/Sortable
>>> NPM: https://www.npmjs.com/package/sortablejs
>>> 
>>> Asset Packagist:
>>> https://asset-packagist.org/package/npm-asset/sortablejs
>>> 
>>> Pros:
>>> 	• Supports touch devices and modern browsers (including IE9)
>>> 	• No jQuery required (but there is support)
>>> 	• Can drag from one list to another or within the same list
>>> 	• CSS animation when moving items
>>> 	• Supports drag handles and selectable text (better than voidberg's html5sortable)
>>> 	• Smart auto-scrolling
>>> 	• Advanced swap detection
>>> 	• Smooth animations
>>> 	• Multi-drag support
>>> 	• Support for CSS transforms
>>> 	• Built using native HTML5 drag and drop API
>>> 	• Supports Vue, React, Angular, etc
>>> 	• Supports any CSS library, e.g. Bootstrap
>>> 	• Simple API
>>> 	• Support for plugins
>>> 	• CDN
>>> 	• Typescript definitions at @types/sortablejs
>>> Cons:
>>> 
>>> If you have other suggestions or concerns please share them.
>>> 
>>> Best Regards,
>>> Andon Andonov
>>> 
>>> 
>>> 	Virus-free. www.avast.com
>>> 
>>> 
>>> 
>>> _______________________________________________
>>> TikiWiki-devel mailing list
>>> 
>>> [email protected]
>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>> _______________________________________________
>> TikiWiki-devel mailing list
>> [email protected]
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>> _______________________________________________
>> TikiWiki-devel mailing list
>> [email protected]
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
> 


_______________________________________________
TikiWiki-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel