This repository was archived by the owner on Oct 9, 2018. It is now read-only.
This repository was archived by the owner on Oct 9, 2018. It is now read-only.
Create/Update Image List Dynamically #445
Description
Ability to create and dynamically change the properties of an image list dynamically after the DOM for a screen has been loaded.
Need to add the following JS functions to the image list:
- show(); [Completed]
- hide(); [Completed]
- remove(); [Completed]
- refresh( [items] ); // Refresh all the items in an image list with an array of item DOM elements [Completed]
- bb.imageList.style(element);
Also update the following
- getItems() // should return headers as well as items
- appendItem(item) // make sure it supports headers
- insertItemBefore(newItem, existingItem) // Make sure it supports headers
Image List Item Interface Additions:
- setTitle(value)
- setDescription(value)
- setAccentText(value)
- setImage(value)
NOTE: When dynamically creating a list and styling it, we need to ensure that the placeholder images are working correctly as well as the fade effects. These are currently only triggered by the bbuidomready event
Example of what creating an image list dynamically should look like
// Create image list
var list = document.createElement('div');
list.setAttribute('data-bb-type','image-list');
list.setAttribute('data-bb-style', 'arrow-list');
// Create Header
var header = document.createElement('div');
header.setAttribute('data-bb-type','header');
header.innerHTML = 'My Header';
list.appendChild(header);
// Create Item
var item = document.createElement('div');
item.setAttribute('data-bb-type', 'item');
item.setAttribute('data-bb-img', 'foo.png');
item.setAttribute('data-bb-title', 'Hello');
item.innerHTML = 'World';
list.appendChild(item);
list= bb.imageList.style(list);
document.getElementById('listContainer').appendChild(list);Example of what refreshing an image list dynamically should look like
var items = [],
item;
// Create the item's DOM in a fragment
for (var i = 0; i < 5; i++) {
item = document.createElement('div');
item.setAttribute('data-bb-type','item');
item.setAttribute('data-bb-title','my title');
item.innerHTML = 'my description';
item.setAttribute('data-bb-img','foo.png');
item.onclick = function() {alert('clicked');};
items.push(item);
}
document.getElementById('mylist').refresh(items);