Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Opening Listview Links into Listview (Code / Demo) #5415

Closed
pillex opened this Issue Jan 3, 2013 · 4 comments

Comments

Projects
None yet
2 participants

pillex commented Jan 3, 2013

feature request: opening listview links into listview

when clicking a listview item, instead of a page-change, insert linked content right into list via ajax.

it's faster than a page-change and user doesn't have to leave the list to watch an entry. no transition problems even with long lists.

good for calendars etc.: long lists with small to medium content entries don't need the page paradigm.

alternative: could also be implemented into collapsible sets.

  • listviews already have links and get the content.
  • collapsible sets already have content and would get links.

markup:

data-insert="true"
option for li elements to insert linked content on click

data-fragment="#my_id"
option to select a fragment of the linked content

example:

 <li  data-insert="true"  data-fragment="#my_id">
 <a href="cars.html</a>
 </li>

demo:

http://jsbin.com/agaraw/18

related to:

Fetch Links Utility - #3219
but Fetch Links seems to be missing the list logic: clicked li stays active,
change data-icon of li, closing on second click (toggle), closing other li etc.

known problems / todo:

data-icon handling awkward
more than one open entry ?
browser back-button closes openend li ?
option data-method="insert-after|insert-before" ?


function close_all_inserts(el)                                           // close all opened <li>
{ 
var all_li = $(el).closest("ul:jqmData(role='listview')").children();    // affect only this list

$(all_li).filter('.ui-li-insert').slideUp(200);                          // close all inserts

$(all_li).filter('[data-insert="true"]')
    .removeClass("ui-btn-active")                                        // clear active-state in all <li>
    .children().children()                                               // restore data-icon in all <li>
    .addClass("ui-icon-arrow-d").removeClass("ui-icon-arrow-u");          
}






function open_insert(el)                                               // open inserted content
{  
close_all_inserts(el);                                                 // max. one opened <li>                                       

content_li = $(el).next();
content_li.slideDown();

// smart_scroll(content_li);                                           // smart_scroll not yet avail. issue #5394  

$(el).addClass("ui-btn-active")                                        // set <li> active
     .children().children()                                            // change data-icon to up-arrow 
     .addClass("ui-icon-arrow-u").removeClass("ui-icon-arrow-d");
}




// ajax-insert content after list element el

function ajax_insert_li(el)                                               
{
var url      = $(el).find('a').attr('href'); 
var fragment = $(el).attr('data-fragment') || ":jqmData(role='page')";  // default to data-role='page'

$.mobile.loading('show'); 

$.get(url, function(data){                           

   $.mobile.loading('hide');

   var html = $( fragment, '<div>'+data+'</div>' ).html() || data;     // select fragment 

   var close_btn = $('<a/>', {"text":"Close", "class":"cls_btn", "data-icon":"delete",  
                              "data-mini":"true",  "style":"margin:15px;"} ).buttonMarkup();


   $('<li/>').addClass('ui-li-insert').html( html ).append(close_btn)                 // add a close button
             .hide().insertAfter(el).trigger("create")                                // insert content
             .find('.cls_btn').click( function(e){ close_all_inserts(e.target); });   // activate close-button

   open_insert(el); 

   });
}




// "open" a <li> element by inserting the linked content via ajax 
// right after the <li> element
//
// click toggles open/close
// 'caching' of closed content
// toggle active state
// toggle data-icon
// close other open <li>
// add close button to bottom of content
// smart scroll when opened
//
// el: element after which ajax response is inserted

function open_li(el)       
{

var next_li = $(el).next(); 

if ( ! $(next_li).hasClass("ui-li-insert") )  { ajax_insert_li(el); return; }  // if not cached, insert 

if( next_li.is(':visible') ) close_all_inserts(el);  // if open, close
else                         open_insert(el);        // if closed, open

} 






// option 'data-insert' for <li> elements
// prevent page-change -> insert linked content

$("ul:jqmData(role='listview')").on("click", "li[data-insert='true']", function(e){                   
      e.preventDefault();
      open_li(this); 
      return false;
      });

$("ul:jqmData(role='listview') > li[data-insert='true']")           // change data-icon for inserts to down-arrow
  .attr('data-icon', 'arrow-d')          
  .children().children().addClass("ui-icon-arrow-d").removeClass("ui-icon-arrow-r");

Member

jaspermdegroot commented Feb 16, 2013

Using this as ticket for "new way of handling nested lists", but I think we should keep it simple and just make the LI collapsible if it contains a nested UL. The more advanced way as shown in @pillex his demo could go in a demo.

We should also make it optional so people don't have to wrap nested lists in a div to prevent the collapsible. For instance when the LI that contains the UL has a link as well. We could add data-nested-theme so people can style the LI's in the nested UL differently.

See also the discussion at #5539.

Member

jaspermdegroot commented Feb 16, 2013

Changed the title of this ticket to "Nested listviews". Original title: "Opening Listview Links into Listview (Code / Demo)"

Member

jaspermdegroot commented Feb 16, 2013

@pillex

Thanks for the post.

Somehow I had in mind it was mostly about how we handle nested listviews, but it is more about fetch links.
I am going to change the title back to the original one and close this ticket as feature request. We will look into it when we start working on fetch links.

Member

jaspermdegroot commented Aug 7, 2013

See also #3219

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