Committer: pkornilov
LJSUP-7377: Wishlist.LJSV-1341: Can't hide items on profile page.
U trunk/htdocs/js/profile.js
Modified: trunk/htdocs/js/profile.js =================================================================== --- trunk/htdocs/js/profile.js 2010-12-20 07:56:27 UTC (rev 17976) +++ trunk/htdocs/js/profile.js 2010-12-20 08:03:01 UTC (rev 17977) @@ -2,8 +2,13 @@ { init: function ($) { - Profile.wishInit(); - + var wishes_container = window.$("wishes_body"), + wishes_list = window.$("wishes_list"); + if (wishes_container && wishes_list) { + var nav = Profile.wishInit(wishes_container, wishes_list); + Profile.navRecalculate = nav.recalculate; + } + // login user if (Site.has_remote) { // collapse any section that the user has set to collapse @@ -20,9 +25,6 @@ } ); } - - // add event listeners to all of the headers - $('.expandcollapse').click(function(){ Profile.expandCollapse(this.id.replace('_header', ''), Site.has_remote) }); }, expandCollapse: function (id, should_save) @@ -51,70 +53,115 @@ } }, - wishInit: function () - { - var wishes_list = $('wishes_list'), - viewport_width = wishes_list.parentNode.offsetWidth, - container_width = wishes_list.lastChild.previousSibling.offsetLeft + wishes_list.lastChild.previousSibling.offsetWidth; - if (container_width >= viewport_width) { - var items = wishes_list.getElementsByTagName('li'), - pages = []; - for (var i=0; i < items.length; i++) { - var left_widht = items[i].offsetLeft + items[i].offsetWidth; - if (left_widht > viewport_width) { - items[i].style.display = 'none'; + navRecalculate: jQuery.noop, + + wishInit: function(nav_container, list) { + // structure: <p class="i-nav"><i class="i-nav-prev i-nav-prev-dis"></i><span class="i-nav-counter"></span><i class="i-nav-next"></i></p> + var current = 0, + ITEM_WIDTH = 140, + pages = [], + + nav = jQuery("<p/>", { + "class": "i-nav" + }), + + prev = jQuery("<i/>", { + "class": "i-nav-prev i-nav-prev-dis", + click: function() { + if (pages[current - 1]) { + next.removeClass("i-nav-next-dis"); + jQuery(pages[current]).hide(); + jQuery(pages[--current]).show(); + !pages[current - 1] && prev.addClass("i-nav-prev-dis"); + pager.text((current + 1) + "/" + pages.length); + } } - var num_page = Math.floor(left_widht/viewport_width); - if (!pages[num_page]) { - pages[num_page] = []; - } - pages[num_page].push(items[i]) - } + }).appendTo(nav), - var nav = jQuery('#wishes_body .i-nav'), - next = nav.find('.i-nav-next'), - prev = nav.find('.i-nav-prev'), - current = 0, - go_next = function () - { + pager = jQuery("<span/>", { + "class": "i-nav-counter" + }, jQuery("div")).appendTo(nav), + + next = jQuery("<i/>", { + "class": "i-nav-next", + click: function() { if (pages[current + 1]) { - prev.removeClass('i-nav-prev-dis'); + prev.removeClass("i-nav-prev-dis"); jQuery(pages[current]).hide(); jQuery(pages[++current]).show(); - !pages[current + 1] && next.addClass('i-nav-next-dis'); + !pages[current + 1] && next.addClass("i-nav-next-dis"); + pager.text((current + 1) + "/" + pages.length); } - }, - go_prev = function () - { - if (pages[current - 1]) { - next.removeClass('i-nav-next-dis'); - jQuery(pages[current]).hide(); - jQuery(pages[--current]).show(); - !pages[current - 1] && prev.addClass('i-nav-prev-dis'); + } + }).appendTo(nav); + + nav.appendTo(nav_container); + + function calculate() { + var items = list.getElementsByTagName("li"); + if (items.length < 2) { + return; + } + + var viewport_width = list.parentNode.offsetWidth, + container_width = items[items.length-1].offsetLeft + items[items.length-1].offsetWidth; + + if (container_width >= viewport_width) { + var count_on_page = Math.floor(viewport_width/ITEM_WIDTH) || 1; + for (var i=-1, item; item = items[++i]; ) { + var num_page = Math.floor(i/count_on_page); + + if (num_page !== 0) { + item.style.display = "none"; } - }; - next.click(go_next) - prev.click(go_prev) - nav.show(); + + if (!pages[num_page]) { + pages[num_page] = []; + } + pages[num_page].push(item); + } + + pager.text(1 + "/" + pages.length); + nav.show(); + } } - + + function recalculate() { + // restore to default state + jQuery(list.getElementsByTagName("li")).css("display", "block"); + nav.hide(); + current = 0; + pages = []; + next.removeClass("i-nav-next-dis"); + prev.addClass("i-nav-prev-dis"); + + calculate(); + } + + calculate(); + // recalc wish list on resize var timeout; - jQuery(window).resize(function() - { + function resize() { clearTimeout(timeout); - timeout = setTimeout(function() - { - // restore to default state - var nav = jQuery('#wishes_body .i-nav').hide(); - nav.find('.i-nav-next').unbind().removeClass('i-nav-next-dis'); - nav.find('.i-nav-prev').unbind().addClass('i-nav-prev-dis'); - jQuery("#wishes_list li").css('display', 'block'); + timeout = setTimeout(recalculate, 200); + } - Profile.wishInit(); - }, 200); - }); + jQuery(window).resize(resize); + + return { + recalculate: recalculate + }; } -} +}; jQuery(Profile.init); + +// add event listeners to all of the headers +jQuery(document).delegate(".expandcollapse", "click", function() { + Profile.expandCollapse(this.id.replace("_header", ""), Site.has_remote); + + if (this.id === "wishes_header" && / on$/.test(this.className)) { + Profile.navRecalculate(); + } +});