Create/Update BBM Bubbles Dynamically #451

Closed
tneil opened this Issue Nov 9, 2012 · 5 comments

Comments

Projects
None yet
2 participants
Member

tneil commented Nov 9, 2012

Ability to create and dynamically change the properties of a BBM Bubble dynamically after the DOM for a screen has been loaded.

Need to add the following JS functions to a BBM Bubble:

  • show(); [Completed]
  • hide(); [Completed]
  • remove(); [Completed]
  • setStyle(right/left); [Completed]
  • getStyle(); // Return the style of the bubble [Completed]
  • clear(); // Remove all the items in a bubble [Completed]
  • getItems(); // Retrieve an array of items in the bubble [Completed]
  • bb.bbmBubble.style(element); [Completed]
  • Update the existing bbm bubble sample page to just show the control working [Completed]
  • Add sample page to show how to manipulate control with JavaScript similar to the Dynamic Buttons page [Completed]
  • appendItem(item) // Appends a item DOM element to the end of the bubble
  • insertItemBefore(newItem, existingItem) // Inserts an item DOM element before the specified existing item

Bubble Item Interface

  • getCaption(); [Completed]
  • setCaption(value); [Completed]
  • getImage(); [Completed]
  • setImage(imgPath); [Completed]
  • remove(); [Completed]
// Create BBM bubbles list
var bubble = document.createElement('div');
bubble.setAttribute('data-bb-type','bbm-bubble');
bubble.setAttribute('data-bb-style','right');

var item = document.createElement('div');
item.setAttribute('data-bb-type', 'item');
item.setAttribute('data-bb-img', 'foo.png');
item.innerHTML = 'Hello World';
bubble.appendChild(item);

bubble= bb.bbmBubble.style(bubble);

document.getElementById('bubbleContainer').appendChild(bubble);
Member

tneil commented Nov 9, 2012

The show, hide, remove, setStyle functions are implemented with pull request #450

@tneil tneil pushed a commit that referenced this issue Nov 9, 2012

Tim Neil updated sample for issue #451 b2db057

@tneil tneil pushed a commit that referenced this issue Nov 9, 2012

Tim Neil updated samples for issue #451 a75aab3
Contributor

lyricidal commented Dec 2, 2012

Hey Tim,
I had a quick question in regards to the getItems. As an example, should it return:
<div data-bb-type="item" data-bb-img="images/bbmBubbles/bullet.png">My car just broke down and I have one million things to do!!</div>
or
"My car just broke down and I have one million things to do!!" (or something else altogether?)

I've got both figured out (as well as the clear function) but wasn't sure which to go with for getItems.

Thanks!

sample at: http://www.theiexplorers.com/MyApp/

Member

tneil commented Dec 4, 2012

getItems should return an array of the actual bubble item DOM elements.

@tneil tneil pushed a commit that referenced this issue Jan 16, 2013

Tim Neil updating rest of files for bbm bubble style for issue #451 bfbbfb2

@tneil tneil pushed a commit that referenced this issue Apr 23, 2013

Tim Neil updated change log for issue #451 4fd623f
Member

tneil commented Apr 23, 2013

Lots of great updates provided by @1ap1

Thanks for the contribution!!

Member

tneil commented Jul 6, 2013

Closing this issue in favor of the new v1.0 markup and associated JavaScript interfaces based on issue #933

tneil closed this Jul 6, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment