Bubbling Library
Circa 2008 - 2010


Bubbling Library was a BSD-licensed superset of functionality that builds on top of the YUI foundation. Caridy Patino, a leading and always-helpful contributor to the YUI community forum created Bubbling Library. This was the library's website.
Content is from the site's 2008 - 2010 archived pages, as well as from other outside sources.

A few comments from the new owners of this domain. It's a real trip looking back to this time. Lots has changed in the passing years.

What are you up to now, Caridy Patino?

From his Linkin profile:

Software Architect

Salesforce

August 2015 – Present 3 years 11 months
* Lead Architect for Lightning Web Components Platform alongside Diego and Kevin
* Lead Architect for Lightning Base Components (the lightning namespace)
* Creator of Lightning Locker (formerly know as Locker Service) alongside Doug Chasman

 


Caridy, a leading and always-helpful contributor to the YUI community forum, has been working in front of a PC since the nineties.

For the past eight years he's been a professional programmer developing LAMP applications for the University of Las Villas where he received his B.S. in Computer Science in 2003, and for several companies around the world. He left his university job in August to pursue an independent consulting career and to follow his passion for open source solutions and agile development.

For the last two years he's been focused on JavaScript as a development platform. Early last year he decided to create an easy-to-adopt YUI extension called "Bubbling Library" as a side project; you can read his YUIBlog introduction to the Bubbling Library here.

 


FAQ

Why Bubbling?
Bubbling means that the event is given to the target, and then its parent, and then its parent, and so on until the event is canceled.

What is Bubbling Library?
Bubbling is an extension of one of the most important "Javascript" Library at the present time (YUI - User Interface Library), and it focused in the creation of dynamic behaviors over the base of the YUI Custom Object component for even-driven web applications.

Where I can get this library?
The bubbling library can be downloaded directly from the download page. You can get a lot more from there, behaviors, widgets, plugins, extensions, examples, and you have the option to get the scripts compressed, to save even more bandwidth.

How to make a donation?
How to make a donation? Support this project. It costs money to maintain and upkeep this website. If you have found it useful, we invite you to make a donation to support these costs. Help us help you! Make a donation via PayPal.com - it\'s easy & secure!

The bubbling library is free?
Bubbling Library is open source, released under the BSD License, so feel free to do anything you want with it.

Software License Agreement (BSD License)
* Javascript Bubbling Library
* http://www.bubbling-library.com
Copyright (c) 2007, Caridy Patiño. All rights reserved.

Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

To get started using Bubblng Library. Simply include the two source files into the head of your document:


API Documentation

Bubbling Core

The first thing you need to do before trying to use this utility, is to read this article in the Yahoo! User Interface Blog "The Bubbling Technique & Custom Event, YUI's Secret Weapon", to learn the principles of this pattern.

The Bubbling CORE Object require the inclusion of the YUI scripts: yahoo, dom, event or utilities. Once the necessary scripts are included in the pages, and the inclusion of the bubbling.js script, all the default behaviors layers (navigate, property, key, repaint, rollover and rollout) will be initialized automatically, using the default configuration, which means that you can subscribe behaviors immediately after the inclusion of the bubbling core. Each behaviors layer have an Custon Event, which means that you can add as many listeners as you need, see the list below:

  • navigate

This layer will catch the click, and action over links.

  • property

This layer will catch the right click, and control click in mac and opera.

  • key

This layer will catch the keyboard events.

  • repaint

This special layer will catch the resize window, font resize, and scrolling events. (the last two events require extra initialization, see the documentation)

  • rollover

This layer will catch the mouse movement, and will be fired on mouseover.

  • rollout

This layer will catch the mouse movement, and will be fired on mouseout.
The bubbling core is the keystone for building a Rich Internet Application, and will allow you to cut the big application down into manageable chunks and components and you can plan the detailed usability, information architecture and accessibility for each component separately. This allows you to develop in parallel with the design or information architecture team and results in reusable components for other applications.

 


Wizard Manager

The WizardManager is a combination of the YUI Connection manager and the dispatcher, to create dynamic areas with forms within, and this forms will be piped using the connection manager, simulating an iframe with AJAX but sharing the datas with the whole document.

This plugin "YAHOO.plugin.WizardManager" require of the YUI Utilities / Connection / Dispatcher Plugin, and can manage forms (simple and wizards forms), this manager do the hard part of the job, and also include several features to interact with the forms values.

 


Dispatcher Manager

The Dispatcher plugin was created to satisfy a very common need of developers using the YUI library: dynamic execution of Ajax response content. Typical strategies to fulfill this need, like executing the innerHTML property or referencing remote scripts, are unreliable due to browser incompatibilities. The Dispatcher plugin avoids those problems.

This component do not required the Bubbling Core Object, only YUI Core, YUI Connection Manager, YUI Dom and YUI Event. And it guarantees these three points::

  • All of the dynamic contents (loaded thru the YUI Connection Manager) will be processed by the Dispatcher, and the javascript chunks will be executed (remote and inline scripts)
  • All the javascripts within a content will be executed according to the order of apparition.
  • All the contents will be included in the DOM's structure before beginning the execution process. This means that you can use references to an element within the container.

The last release of the dispatcher support cross-domains capabilities using the most common technique (proxy), also introduce two new method "jsLoader" and "cssLoader", for remote script and CSS loading onDemand and the hashtable to discard multiple execution for the same remote file, and path-correction for remote files if you need it.

13 Comments

Minor grammar and word use comments
On the page , I noticed a couple simple grammar and word use problems that you might want to know about.

First, the two sentences starting with "The Dispatcher plugin ..." are very hard to digest.

The following is an attempt to rewrite this in a form I can understand (but I may be missing something you're trying tto impart):

The Dispatcher plugin was created to satisfy a very common need of developers using the YUI library: dynamic execution of Ajax response content. Typical strategies to fulfill this need, like executing the innerHTML property or referencing remote scripts, are unreliable due to browser incompatibilities. The Dispatcher plugin avoids those problems.

Second, the phrase "... order of apparition" should probably be "... order of appearance". If you look up "apparition" in the dictionary, you'll see that's not quite the right word.

Comment by David Karr - April 27, 2008
Where to post specific questions
Halo all,
Which type of CMS library specific questions do we post here or should they all go through the YUI group?

Comment by George Aslanis - September 15, 2008
RE: Where to post specific questions
Hey George,

You can post in the YUI Group, or just email me directly.

Comment by Caridy - September 15, 2008
Is this now compatible with YUI 2.6.0?
Have you tested this with the new YUI 2.6.0? Is it compatible?

Comment by Cody Burleson - November 13, 2008
RE: Is this now compatible with YUI 2.6.0?
Hey Cody, the dispatcher 1.5 can work on top of YUI 2.6.0 without any problem. In fact if you check this website, you will see that the bubbling library 1.5 is working on top of 2.6.0.

Anyway, if you have any problem, just let me know.

Comment by Caridy - November 13, 2008
Dispatcher and Layout Manager
I've read elsewhere - on the Yahoo groups I think - that Dispatcher should also work with Layout Manger. I know you don't have any of the specific pre-built stuff finished yet, but it is possible to use it and if so, could you send me a small example?

Thanks

Comment by Dennis - November 18, 2008
Re: Dispatcher and Layout Manager
Hey Dennins:

You're right, in the YUI 2.6.0 I wrote the routines for AJAX within the layout manager (the same routines that we use in the tabview). The dispatcher can extend this functionality to execute the scripts.

Unfortunately this new functionality is not documented yet in the YUI 2.6.0, and also the Bubbling 1.5 don't support it yet.

But here is an example running on top of YUI 2.6.0 and Bubbling Library 2.0 beta.

http://bubbling-library.com/sandbox/yui2/dispatcher/layout.html

If you want more information, send me an email.

Comment by Caridy - November 18, 2008
dispatcher and uploader plugin together
Hi,

I posted this message at YUI Group too.
I try to use dispatcher and uploader plugin together.
I use html file with javascript inside as it is described in 'Advanced Uploader Example With Additional POST Variables and Server Data Return' for Ajax call.

When I try to upload I get 'uploader is not defined'.
Are these two plugins compatible to each other?
any help, please?
Thanks

Comment by Gia - December 16, 2008
RE: dispatcher and uploader plugin together
Hey Gia, I don't see how the dispatcher can affect the uploader utility. Do you have a test case of something where I can dig a little bit?

Also, the only way I see we can use it together is to using distpacher.process to process the response from the uploader. Is that the way you want to use it?

Comment by Caridy - March 18, 2009
fail to excute a js in ie with yui version 2.7.0
Hi, i have try the dispatcher with yui version 2.7.0 in ie. And found that, if the js in reponse is calling a js function already in current page. then the js with not be excuted. any ideas?

Comment by allen - November 12, 2009
fail to excute a js in ie with yui version 2.7.0
but it works in firefox

Comment by allen - November 12, 2009
fail to excute a js in ie with yui version 2.7.0
i mean, the inline js in response is executed, but not the remote one.
Thanks

Comment by allen - November 12, 2009
RE: fail to excute a js in ie with yui version 2.7.0
Hello Allen,

Are you using the dispatcher latest version? If that's the case, try to verify the path, probably you will have to use path-correction option in dispatcher, or verify that all the requirements to execute that file are in place. And finally, you can try to include the external file as part of the original content just to double check that it works in IE.

Also, you should check the inline block, it if fails, then dispatcher will abort the execution process and probably the remote file will never be executed.

Best Regards,
Caridy

 


Help and Information

Download the bubbling library

Download the entire library from Sourceforge.
You can also browser thru the APIs for each utilities and widgets, also you can check our index of more than 50 examples.

Migration to github:
We decided to migrate our repo to github.com, and we did most of the heavy lifting already. Here are the links:
Bubbling library + APIs:
http://github.com/caridy/bubbling-library

Buttling library examples:
http://github.com/caridy/bubbling-examples

Note: Examples with AJAX functionionalities (XMLHTTPRequest) requires an HTTP webserver in order to work properly.

How to make a donation?
Support this project. It costs money to maintain and upkeep this website. If you have found it useful, we invite you to make a donation to support these costs. Help us help you! Make a donation via PayPal.com - it's easy & secure!

+++++

Release: Bubbling Library 1.40 - January 31, 2008
This release synchronizes the SourceForge version with Bubbling Library -- version number 1.40.

NOTE: I was away from my work for more than a month, and after a surgery in my left hand, I'm back and working, with a lot of ideas and energies, so you don't worry about the future of the Bubbling Extension, I've plans to keep it on track and watching the YUI's releases in this new year.

This huge release introduce new components and reorder the old ones, correction of a series of bugs (thanks you guys for sent me the feedbacks), and of course the inclusion of new examples.

The following new components are introduced with this release:

   * Accordion Manager (Widgets): See how to create the correct HTML's markup and the CSS's rules to create expandable and collapsible areas, including horizontal and vertical accordion, also reusing the YUI Panel Sam Skin, animation and sound's effect features.
  
   * Sound Manager (Plugins): See how to integrate the Javascript with Flash to play sounds, effects and mp3 in general in your web pages. You can easily use this plugin to add sound effects to the DOM's elements based on the classname of the elements.
   
   * Core Package (Script): Similar to the YUI utilities.js, to group the most common components in a single file (/yui-cms/package/core.js):
* Bubbling Core
* Loading Mask
* Dispatcher Plugin
* Form Manager Plugin
* Translator Plugin
* Lighter Plugin
* Tooltip Manager
* Accordion Manager
* BASE64 and CRC utility
   
The following components are updated with this release:

* Bubbling Core: Now called (YAHOO.Bubbling).
* Dispatcher: Now called (YAHOO.plugin.Dispatcher).
* Lighter (Former Selector): The selector plugin was renamed in this version because the YUI's Team have released a DOM Selector utility with the same name... so, I just decided to change the name to Lighter (Area Highlighter Manager: YAHOO.plugin.Lighter).
* Wizard: Now called (Form Manager: YAHOO.plugin.WizardManager). Improved mechanism for forms with file fields (upload file), and support for mixing traditional forms and dynamic forms in the same area using the classname for the form.
* Loading Mask: Now support dynamic message update before display it.
* Translator Plugin: Now mounted over the YUI Json Package.
   
NOTA: All the components' names updated will keep the backward compatibility name for a while, except the Lighter (former selector) plugin.
Also, this release comes with an update of the list of official examples, and every control and plugin of the bubbling library ships with a series of examples that illustrate its implementation. These examples can serve as starting points for your exploration of the Bubbling Library, as code snippets to get you started in your own programming. Also, you can navigate through the API documentation, and you will be able to explore these examples component-by-component; on this page you'll find the full index of library examples with a link to and short description of each one.

+++++

Release: Bubbling Library 2.1 - May 3, 2009

*** version 2.1 *** (Tested over YUI 2.7.0)

This release synchronizes the SourceForge version with Bubbling Library -- version number 2.1.
This release is focused in the correction of a series of bugs and optimization

The following components are updated with this release:
   * Bubbling Core
   * Dispatcher: Genuine JS execution, instead of eval.
   * Wizard: Support for YUI RTE.
   * Accoridon Manager: Supporting global events on open and close.
  
Also, this release comes with an update of the list of official examples, and every control and plugin of the bubbling library ships with a series of examples that illustrate its implementation. These examples can serve as starting points for your exploration of the Bubbling Library, as code snippets to get you started in your own programming. Also, you can navigate through the API documentation, and you will be able to explore these examples component-by-component; on this page you'll find the full index of library examples with a link to and short description of each one.

+++++

Release: Bubbling Library 1.31 - September 4, 2007
This release synchronizes the SourceForge version with Bubbling Library -- version number 1.31.

YUI-CMS Bubbling Library Release Notes

*** version 1.31 *** (Tested over YUI 2.3.0)

This release synchronizes the SourceForge version with Bubbling Library -- version number 1.31.

This minor release is focused on the correction of a series of bugs, the inclusion of new examples, and the introduction of a features for the existed components.

The following components are updated with this release:

   * Bubbling Core: Included the form elements "input" as a genuine trigger for click events (now support: YUI Buttons / Anchors / Inputs).

 * Dispatcher: Included the new mechanism for memory management, offering a new custom event to destroy components included in the area during the content's update. Specially thanks to Satyam for his wonderful suggestions.

   * Lighter: The mouseout event will be triggered only when the mouse go out of the area (discarding mouseout for internal elements).

   * Wizard: Support more than one form for each area.

Also, this release introduces a list of official examples, and every control and plugin of the bubbling library ships with a series of examples that illustrate its implementation. These examples can serve as starting points for your exploration of the Bubbling Library, as code snippets to get you started in your own programming. Also, you can navigate through the API documentation, and you will be able to explore these examples component-by-component; on this page you'll find the full index of library examples with a link to and short description of each one.

+++++

Release: Bubbling Library 1.30 - August 10, 2007
This release synchronizes the SourceForge version with Bubbling Library -- version number 1.30.

UI-CMS Bubbling Library Release Notes

*** version 1.30 *** (Tested over YUI 2.3.0)

This release synchronizes the SourceForge version with Bubbling Library -- version number 1.30.

The following components are updated with this release:

   * Bubbling Core: New and refining mechanism for the bubbles stuff, and including now the "Keyboard shortcuts".

   * Dispatcher: The dispatcher now have CSS Injection (a last feature to create plug and play widgets), also includes inline and remote CSS syntax, and relative paths for CSS resources (images).

   * Tooltips: Using the panel control to implement the new tooltips control (Tips / Helps).  Now with external manipulation to customize the control, drag and drop feature for static tooltips, images and links inside the overlay, etc.

   * Lighter: Now with external manipulation to customize the effects, extending the CSS's features more than never before, including animation effects.

Also, this release introduces a bunch of new examples, and the general adoption of the new SAM skin.

In addition to new features, you'll find updates and bug fixes throughout the extension.

+++++

Get Free Support
I´m trying to offer free support, even when I don't have too much time to dealing with the API documentation and the examples, considering that I do all this stuff in my free time, but I promise you that you'll get response and that I'll do my best to solve your problems.

 


About Us

Caridy Patino
Yuri Victor Munayev

If you want to join us, feel free to contact us.

7 Comments

 

***** thank you!

for creating this extension! it really helps me alot as i am not a great programmer... thank you!
Comment by ming - December 23, 2008

**** Add unsubscribe method in bubbling.js

Hi caridy,
I have been using bubbling.js of Bubbling library. I think this bubbling.js lacks one important method unsubscribe function. This function would help unsubscribe events when one component(widget) instance is removed from our website. I have extended it by adding an unsubcribe method in bubbling.js. So my question is how I can post this function to the community?
Warm Regards,
Tam
Comment by tphan - March 24, 2009

*** Offline Documentation & Examples

Hi Caridy,
Is there any offline documentation & set of examples available here?
Regards
JP
Comment by Jayaprakash - October 21, 2009

RE: Offline Documentation & Examples

Hey JP,
Offline examples and documentation are available thru github. Here is the link for the repo:
http://github.com/caridy/bubbling-library
http://github.com/caridy/bubbling-examples
And here is the direct link to download the whole library, including doc and examples:
http://github.com/caridy/bubbling-library/zipball/master
http://github.com/caridy/bubbling-examples/zipball/master
I will also add these links to the download page as well.
Comment by Caridy - October 22, 2009

***** Many thanks also from me!

Rendering menubars almost drove me crazy.
dispatching solved it!
Comment by Raymond - March 19, 2010

Thank you!

Just had a horror moment when I realised the YUI tab library didn't allow javascript. Very annoying as I wanted to reuse some code in another php page inside a tab.
I quickly found/and installed this library. Made the quick code change and everything just worked. In every browser too! I'm not only extremely happy also very grateful. You just saved me many hours work.
I'll try to remember a donation after pay day! :)
Comment by Alan - May 12, 2010

RE: Thank you!

Alan, thanks for the kind words. BTW, Dispatcher plugin is also available for YUI3 thru YUI Gallery, in case you decided to migrate to the newer YUI version:
http://yuilibrary.com/gallery/show/dispatcher
Best Regards,
Caridy

Bubbling-Library.com