Bootstrap plugins rewritten with MooTools

[piotr_cz]

Hi there.
As you are probably aware, Joomla since version 3.0 is using Bootstrap
and jQuery in it's core.
Developers are not forced to use these, but are the default templating
tools (MooTools 1.4.5 is still available, but being slowly phased
out).

Since I use Joomla, MooTools and responsive layouts, I though I'll try
to rewrite Bootstrap plugins for MooTools.

The reason why I decided to not use Aaron's version (Mootools-
Bootstrap) was to replace jQuery with minimal effort, just by
replacing javascript plugin files in original Bootstrap package (ie.
using system plugin for Joomla).

So far this worked out fine for smaller project.
If anyone is interested, take a look at https://github.com/piotr-cz/Mootools-Bootstrap-plugins


At the moment this is a proof-of-concept. Most plugins were rewritten
to pass the unit tests (which have some false positives) and not
really used anywhere.

The plugins were rewritten by replacing jQuery-specific functions (not
by refactoring classes) by purpose: to easily implement upstream
commits.

Let me know what you think or if you find this helpful.

piotr_cz

[Erik Cervin Edin]

Nice initiative !

--

---
You received this message because you are subscribed to the Google Groups "MooTools Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mootools-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Lee]

Yeah, that's really good of you, thanks � I think that could be very
useful to me in the next few months.

On 15/03/2013 21:49, Erik Cervin Edin wrote:
>
> Nice initiative !
>
> On 15 Mar 2013 21:22, "piotr_cz" <pkoni...@hotmail.com

> <mailto:mootools-users%2Bunsu...@googlegroups.com>.

[ghazal]

Will definitely try to implement it in my bootstrapped template for 2.5.
Keep up the good work.

[piotr_cz]

Thanks,
just keep in mind this is an experiment and will need need some tuning
so contributions are very welcome.

For Joomla 3.0 this should work for extensions which use bootstrap
components via data attributes, but I'm not sure about jQuery access
(there are few differences to how MooTools are returning elements).

[Andree Christaldi]

Nice work... great to see.   

[Josh]

Hello piotr_cz,

I am a designer at Kunena.org.  We ran into a similar situation with Bootstrap at Kunena.org for our next Kunena 3.0 version.  We really liked the semantic markup Bootstrap offered and wanted to take advantage of that in Joomla 3.0 and in Joomla 2.5.  However we did not want to introduce a library, in this case jQuery, that was not part of the default Joomla 2.5 install.  I did the "Tab" conversion from jQuery to Mootools based on the current Joomla implementation so our tabs could work with Bootstrap markup.  The problem we ran into though was for all other features in Bootstrap we needed to rewrite all Joomla default JS files, and some of these files are third party JS features which makes this approach very difficult.

I searched for many weeks for a suitable build of Mootools for Bootstrap.  I came across Aaron's version as well, however like you I felt it was on the heavy side with the extra layer of another framework that was created.  So we were in a similar situation where we would have to rewrite all Bootstrap jQuery JS to Mootools JS.  I am very glad someone has started this initiative.  I really like to see a minimal version of Mootools for Bootstrap as well.  I would really like to work together to get this accomplished.  We are a little busy with our release at the moment, but I am sure we can find some time to accomplish this.

[Josh]

Just a note, I just found another version just now that has everything.  Slightly different implementation, but want us to refrain from reinventing the wheel.

https://github.com/GPTechnologySolutions/mooboo

[Rolf Langenhuijzen]

Hi Josh,

That link doesn't have everything, or am I not seeing it all? There are multiple files still empty.

Also, notice that the code is not super clean, for example: https://github.com/GPTechnologySolutions/mooboo/blob/development/js/bootstrap-togglebuttons.js

This one has Event.Mock included at the bottom.. if you're quickly trying to pull this stuff in you might end up with errors. Also it doesn't wrap things inside their own scope.

If you want this, I'd suggest going with Piotr's code and add stuff to it that you need, so others can benefit too.

Perhaps fork from GPTechnology repo, update code, send pull request and also add to Piotr's repo. Then you have a collabo space with clean/good code that is maintained ;)

Personally I use Aaron's Behavior which is really awesome; you have clean html markup with small chunks of javascript "attached" to it. This works really nice with the Bootstrap he's made for Mootools (I think there's also some things in from Dimitar) already, plus it's easy to add you own things or customise some default "Bootstrap" plugins.

Yes, using Behavior requires more time, but imho it's worth it, so when you have some time, check it out: https://github.com/anutron/behavior

Btw, using the Aaron's Bootstrap for Mootools doesn't add another layer of framework; https://github.com/anutron/mootools-bootstrap

It doesn't require any Behavior code or knowledge, just check the UI folder, it's plain Moo code.

Rolf

[Aaron Newton]

Correct. My implementation provides simple classes (some of which are extended from or contained in the clientcide lib - the tab class for example is over there). But you can skip the Behavior layer if you want to just do pure JS and do `new BootStrap.Popup(myElement);` if you want. Further, if someone wanted to create a 1:1 mapping to the jQuery syntax, they could do that and still invoke my classes that actually draw the popup. Just write something that matches the jQuery API but instantiates these classes.

I'd love if it my implementation - with or without Behavior.js - were used and contributed to by others. A jQuery-style API layer would be totally welcome.

--

[pixel67]

Nice work Arron

[Dimitar Christoff]

I have been using a mix of my own plugins + some of Aarons, though here are a couple I released since I have not seen many other ports of them:

https://github.com/DimitarChristoff/data-mootools - brings element.data() stuff to mootools in the style of jQuery for working with data-attribs, dependency that can allow easier porting and similar api.

scrollspy - fixed that up a while back with Arian:
https://github.com/DimitarChristoff/mootstrap-scrollspy - it is a lot more powerful than the BS one. supports various events, eg:
https://github.com/DimitarChristoff/doctor/blob/master/build/js/doctor.js as well as the custom parser of what it returns/how it gets to elements it needs to spy on + standard margin offsets etc. eg demo where this is being put to use is here (as you scroll down: http://dimitarchristoff.github.com/doctor/)

button (the one where the button states get changed after click and restored or go to different states)
https://github.com/DimitarChristoff/mootstrap-button - once again, more options than BS

--
Dimitar Christoff

"JavaScript is to JAVA what hamster is to ham"
@D_mitar - https://github.com/DimitarChristoff

[piotr_cz]

I started working on this to be able to use Bootstrap without jQuery
in my projects (with overriding
`JHtml::_('bootstrap.framework');` method)

To prevent issues if you choose to use it for public Joomla extension
I think best option would be to ship Kunena 3 with Mootools-Bootstrap
plugins as a separate library and give user an config option whether
they want to
- load MooTools version,
- jQuery version
- or they use other solution (Bootstrap is included in template/
system plugin).

Keep in mind that there is a chance that until Joomla 3.2 all MooTools
classes will be rewritten to jQuery.


BTW I added carousel plugin and info which plugins are available on
mooboo