Skip to content

Create/Update Image List Dynamically #445

Closed
tneil opened this Issue Nov 6, 2012 · 11 comments

2 participants

@tneil
Open Source Projects member
tneil commented Nov 6, 2012

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);
@tneil
Open Source Projects member
tneil commented Nov 6, 2012

Justin's pull request #441 implements show(), hide(), remove()

@tneil
Open Source Projects member
tneil commented Nov 7, 2012

Also some list item interfaces listed in issue #369

@tneil
Open Source Projects member
tneil commented Nov 7, 2012

Issue #305 needs to be added to the interface

@tneil tneil pushed a commit that referenced this issue Dec 10, 2012
Tim Neil Added refresh function to image lists for issue #445 2a8a3df
@arturolinares arturolinares added a commit to arturolinares/bbUI.js that referenced this issue Dec 14, 2012
Tim Neil Added refresh function to image lists for issue #445 6518f72
@igorcosta

Actually trying to force refresh is a workaround, suggesting put outterDocument.scroller.refresh(); inside the listener. Like we already doing at removeitem.

// Add the remove function for the item
innerChildNode.remove = function() {
this.style.height = '0px';
this.style.opacity = '0.0';
this.style['-webkit-transition-property'] = 'all';
this.style['-webkit-transition-duration'] = '0.1s';
this.style['-webkit-transition-timing-function'] = 'linear';
this.style['-webkit-transform'] = 'translate3d(0,0,0)';
if (bb.scroller) {
bb.scroller.refresh();
}
window.setTimeout(this.details.performRemove,100);
}
innerChildNode.remove = innerChildNode.remove.bind(innerChildNode);

i've changed my code to this.

// Append an item to the end of the list control
outerElement.appendItem = function(item) {
this.styleItem(item);
this.items.push(item); you have to force push first than append.
this.appendChild(item);
// Fire our list event
var evt = document.createEvent('Events');
evt.initEvent('bbuilistready', false, true);
document.dispatchEvent(evt);
if (bb.scroller) {
bb.scroller.refresh();
}
};
outerElement.appendItem = outerElement.appendItem.bind(outerElement);

Worked perfect.

@tneil
Open Source Projects member
tneil commented Mar 5, 2013

Hi @igorcosta, is your response to this issue? or was it meant for another issue?

@igorcosta

To the refresh() method, we don't need it in the API.

Basically if a stuff is removed we don't need to refresh the data and parse it again.

@ghost
ghost commented Apr 17, 2013

bb.imageList.style(element) is still not added to bbui.js even though it is presented in the examples above.. cannot dynamically generate an imageList

@tneil
Open Source Projects member
tneil commented Apr 17, 2013

The example above is the requirement of how it should work.. In the checklist above it, it shows that it is not yet implemented. This issue represents the requirements for additions to the image list

@ghost
ghost commented Apr 17, 2013
@tneil
Open Source Projects member
tneil commented Apr 17, 2013

You should be able to use any of the posted JavaScript interfaces posted on the Image List wiki

@tneil
Open Source Projects member
tneil commented Jul 5, 2013

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

@tneil tneil closed this Jul 5, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.