Bootstrap plugins bundles

[phaidon]

It would be nice to have bundles for the following bootstrap plugins:

https://github.com/twitter/typeahead.js

https://github.com/mjaalnir/bootstrap-colorpicker

https://github.com/smalot/bootstrap-datetimepicker

@drak @cmfcmf @drak

in order to close this ticket we must complete:

• [ ] Datepicker with integrated time picker
• [x] Colorpicker
• [ ] Tree
• [ ] Autocomplete
• [x] Lightbox
• [ ] Drag/Drop/Sort

[ghost]

I want to avoid a free for all with plugins since there are lots of plugins one might need. We do need a colour picker for the theme module, and we do need a date time picker. Typeahead is not currently used anywhere in the core but we could certainly have things like that if we are going to use them in the core at some point. However, since we're talking about core, maybe we could make a bundle that combines everything we need in the core into one bundle (except for the jquery/bootstrap main things which are reusable for other projects).

[Guite]

Something like Typeahead is used in the Users administration.

[ghost]

fine

[craigh]

I'm using this autocomplete jQuery lib in Dizkus right now: https://github.com/devbridge/jQuery-Autocomplete/

[craigh]

The datepicker must include a timepicker. There is already a jQueryUI version in the core that is used in PostCalendar. It would be ideal if the API/interface could remain the same (BC) and swapped out for a bootstrap version.

[Guite]

Considering this one as a blocker.

[ghost]

I have just added typeahead.js to https://github.com/components/typeahead.js

[Guite]

@phaidon @cmfcmf @craigh we need a tree component, too, if we want to become independent of Zikula.UI / Zikula.Tree completely... any suggestions?

[ghost]

This looks simple enough: http://stackoverflow.com/questions/11167628/trees-in-twitter-bootstrap

[damon18]

we need a tree component, too, if we want to become independent of Zikula.UI / Zikula.Tree completely... any suggestions?

http://www.jstree.com/

[craigh]

this is the project drak references: https://github.com/jhfrench/bootstrap-tree

[damon18]

Bootstrap with Font-Awesome drop down list http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

That site http://bootsnipp.com has a lot of nice interface items.

[craigh]

Can we create a shim bundle that combines multiple needed libraries? is this the purpose of https://github.com/zikula/UiExtraBundle ? how do we do this then?

I vote +1 on these four: https://github.com/twitter/typeahead.js https://github.com/mjaalnir/bootstrap-colorpicker https://github.com/smalot/bootstrap-datetimepicker https://github.com/jhfrench/bootstrap-tree

how do we proceed?

any other votes?

[ghost]

These shims need to be created at http://github.com/components org. I already created one for typeahead.js. They need to be separate shims however in the components org, then we can pull them into Zikula. If you or anyone else creates a repo and makes the shim, I can pull it into components as I have admin rights.

[ghost]

https://github.com/components/typeahead.js is the one I recently created. You can see other examples, like https://github.com/components/bootstrap or https://github.com/components/font-awesome for examples of how it's done.

[craigh]

we probably also need a lightbox analog

[craigh]

here's two that I found (about the ONLY two...)

https://github.com/duncanmcdougall/Responsive-Lightbox https://github.com/jbutz/bootstrap-lightbox

the first seems simpler and seems to support multiple images the second seems to be more well known but the demo at least doesn't show multiple images. I don't remember what the current Zikula lightbox does wrt multiple images so not sure what is required to duplicate functionality.

Any thoughts? Also any votes on the other four items above?

[wsanter]

https://github.com/ExactTarget/fuelux

Fuel UX has some interesting Bootstrap plugins:

Checkbox Combobox Datagrid Datepicker Pillbox Preloader Radio Scheduler Search Select Spinner Tree Wizard Smart Dropdowns

[ghost]

That would make a nice components shim for sure and it looks well maintained... would someone like to make a shim of that against the 2.5.0 tag? Just needs the contents of the dist/ folder.

[craigh]

@drak said:

I want to avoid a free for all with plugins since there are lots of plugins one might need.

In order to replace current (1.3.5) functionality, we need:

1. datetime picker
2. color picker
3. tree
4. autocomplete
5. lightbox

this Fuel library only meets our needs for the Tree requirement. All the other extras do not match our needs. (The date picker is insufficient - there is no time picker). I vote no on the fuel lib.

[craigh]

we will also need a drap/drop/sort

here is one I found that I think might work: http://johnny.github.io/jquery-sortable/

[espaan]

Does the sortable also support "portlets" http://jqueryui.com/sortable/#portlets I want to use that one for Content drag&drop actually at some point.

[espaan]

For the rest I think the suggested plugins should work fine. The demo of the datetimepicker plugin looks really simple styled. Not fancy at all. I do in fact like the jQueryUI look&feel of the date picker. And BTW the plugin does not work well in Safari 7. The list of issues is very long and a lot of important ones are there: https://github.com/smalot/bootstrap-datetimepicker/issues :-(

Lightbox could also be the Nivo lightbox http://dev7studios.com/plugins/nivo-lightbox/ MIT license, the also make the Nivo slider, which is BTW also MIT license. A nice slider and lightbox are important too IMHO.

[craigh]

regarding _sortable_ - I see in the blocks admin UI @phaidon has used jQueryUI to accomplish the sortable feature. I was under the impression that jQueryUI would be eliminated entirely in favor of Bootstrap and a collection of other plugins (hence this ticket). @phaidon - how do you see this being finalized? @drak? @Guite?

[espaan]

Was this set already in the list above : http://bootstrapformhelpers.com, it is Apache 2 license, not sure if that is similar to MIT ? It has date picker, time picker etc. For sortable there is http://johnny.github.io/jquery-sortable/ with a Modified BSD License. Or this for sortable: https://github.com/Sjeiti/TinySort (MIT license)

I want to integrate this one: http://blueimp.github.io/jQuery-File-Upload/ into SimpleMedia BTW.

[cmfcmf]

I have managed to integrate the blueimp fileupload in one of my modules. If you want to get some code, just ask.

[espaan]

Superb ! Can you send me the code at erik DOT spaan AT gmail ? If we can make the transfer to jQuery, Bootstrap and plugins easy then that's great. I'm preparing a lot of stuff in Zikula 1.3.6 (former 135) already also that way.

[craigh]

here is another draggable: https://github.com/lukasoppermann/Nestable which is a fork of another project but more maintained/feature rich than the original repo.

@espaan - I don't understand what you mean by 'portlet' - the demo doesn't explain to me what you like about it.

I like jQueryUI's feature of having a 'placeholder' for droppable areas. the jquery-sortable repo doesn't appear to have that feature and also is not compatible with mobile devices. The Nestable repo appears to be more mobile friendly and has the placeholder feature but has fewer other features and is possibly less well maintained and has no table demo (so therefore not sure if it works on tables yet).

@phaidon - is there any compatibility with jQueryUI and bootstrap here? perhaps we can use things like draggable from jQueryUI or must we find other libraries?

[espaan]

Hi,

Content uses JS (pagelayout, old prototype script) where you can not only sort a list with also in columns. If you remember iGoogle where you could drag around and place the items on the page anywhere. Like what Content has with the Content items. That is what they call a portlet with jQuery UI. So sortable in 2 dimensions, so you can place items in a multicolumn layout everywhere.

[matheo]

I saw this date/time picker and looks awesome enough to me: http://tarruda.github.io/bootstrap-datetimepicker/

[espaan]

looks great indeed. Only thing might be that the github page https://github.com/tarruda/bootstrap-datetimepicker says that it is not maintained. It has Apache license which is ok I think. It has a huge load of issues and pull requests not being pulled.

[matheo]

Indeed, but luckly it seems kinda maintained by another guy: https://github.com/Eonasdan/bootstrap-datetimepicker :)

[wsanter]

2 jQuery portlet plugins:

http://ksylvest.github.io/jquery-gridly/

http://gridster.net/

[espaan]

Hi, gridster seems very nice indeed. The other one does not seem to have drag/drop across several columns, but is more of a grid with re-location of blocks.

Gridster also MIT licensed. Nice! It's not so nice to see 150 tickets and 15 non pulled issues :-) Quote: "Gridster is maintained by Ducksboard occasionally but not actively."

But one of the contributors has made a fork https://github.com/dustmoo/gridster.js and does do more on it .

Gridster would be really cool in combinatie with the bootstrap grid system: http://getbootstrap.com/css/#grid In my mind I'm thinking of Content in combination with the Bootstrap grid system in a more flexible way. So you can make Content items in some column width .col-md- and together with Bootstrap components/css (wells, headers, etc)

[craigh]

I've done a bit more (just a bit) research and I'm beginning to think we should more seriously consider using jQueryUI to accomplish only these tasks outlined here. Several functions are inherent to the standard UI lib and the others could be accomplished with plugins. When using jQueryUI for specialized tasks, there appears to be less general conflict than using it ubiquitously.

[cmfcmf]

I agree with you @craigh. jQuery-ui simply is the best javascript library for those tasks.

[craigh]

This is unfinished atm, but I intend to finish this using some of the items listed here and jQueryUI where possible.

https://github.com/craigh/Demo

just install and go to user index - there is only only page and no admin side.

[craigh]

OK everyone and anyone who cares:

I've created a demo using mostly jQueryUI (where possible) and a couple plugins:

http://ntq.zikula.org/core/src/index.php?module=demo&type=user&func=index

If all are in agreement, I can work to integrate this in to the core via plugins or however is desired.

please speak your opinions!

[shefik]

@drak The draggable/sortable demo is not working on iPad. Nothing happens when I tap on the screen.

[espaan]

Nice demos ! I would also prefer keeping jQuery UI in for specific parts. It's a good library, well maintained.

[craigh]

@shefik - why does @drak care? :stuck_out_tongue_closed_eyes:

[shefik]

@craigh Sorry, that message was actually intended for you, not drak.

[cmfcmf]

@shefik @craigh After some googling ("jquery sortable ipad") it seems like http://touchpunch.furf.com/ is the way to make it working on tablets and smartphones.

[craigh]

I'll take a look at integrating that also. I'm not sure that it needs to be a top priority however - thoughts on that?

[cmfcmf]

I think it has :top: priority. :100:

[shefik]

@craigh I also think it's a top priority to integrate "touch punch", since it addresses mobile device issues (Android and iOS). It seems simple enough to implement. You only need to include one JavaScript file:

[espaan]

Seems indeed very easy to integrate. With mobile/tablet conditional loading perhaps?

[craigh]

I added it to the demo site :smile:

[espaan]

:+1: so @shefik does it work ?

[craigh]

(works for me on my iPad)