Mercurial > kallithea
view kallithea/templates/journal/journal.html @ 5071:2881dd265f21 stable
templates: only bind pager event handlers once - avoid "leaks" and repeated page loads
Summary page ended up hammering the server and when pages were loaded one time
extra for each paging click.
Just moving javascript code from the data template (where it would be re-run on
each paging) and to the main page template.
author | Mads Kiilerich <madski@unity3d.com> |
---|---|
date | Tue, 28 Apr 2015 16:45:43 +0200 |
parents | a40824531f68 |
children | fd68a0120ed6 |
line wrap: on
line source
## -*- coding: utf-8 -*- <%inherit file="/base/base.html"/> <%block name="title"> ${_('Journal')} </%block> <%def name="breadcrumbs()"> <h5> <form id="filter_form"> <input class="q_filter_box ${'' if c.search_term else 'initial'}" id="j_filter" size="15" type="text" name="filter" value="${c.search_term or _('quick filter...')}"/> <span class="tooltip" title="${h.tooltip(h.journal_filter_help())}">?</span> <input type='submit' value="${_('Filter')}" class="btn btn-small" style="padding:0px 2px 0px 2px;margin:0px"/> ${_('Journal')} - ${ungettext('%s Entry', '%s Entries', c.journal_pager.item_count) % (c.journal_pager.item_count)} </form> ${h.end_form()} </h5> </%def> <%block name="header_menu"> ${self.menu('journal')} </%block> <%block name="head_extra"> <link href="${h.url('journal_atom', api_key=c.authuser.api_key)}" rel="alternate" title="${_('ATOM journal feed')}" type="application/atom+xml" /> <link href="${h.url('journal_rss', api_key=c.authuser.api_key)}" rel="alternate" title="${_('RSS journal feed')}" type="application/rss+xml" /> </%block> <%def name="main()"> <div class="box box-left"> <!-- box / title --> <div class="title"> ${self.breadcrumbs()} <ul class="links icon-only-links"> <li> <span><a id="refresh" href="${h.url('journal')}"><i class="icon-arrows-cw"></i></a></span> </li> <li> <span><a href="${h.url('journal_atom', api_key=c.authuser.api_key)}"><i class="icon-rss-squared"></i></a></span> </li> </ul> </div> <div id="journal"> <%include file='journal_data.html'/> </div> </div> <div class="box box-right"> <!-- box / title --> <div class="title"> <h5> <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value="" style="display: none"/> <input class="q_filter_box" id="q_filter_watched" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value="" style="display: none"/> </h5> <ul class="links nav nav-tabs"> <li class="active" id="show_watched_li"> <a id="show_watched" href="#watched"><i class="icon-eye"></i> ${_('Watched')}</a> </li> <li id="show_my_li"> <a id="show_my" href="#my"><i class="icon-database"></i> ${_('My Repos')}</a> </li> </ul> </div> <!-- end box / title --> <div id="my_container" style="display:none"> <div class="table-grid table yui-skin-sam" id="repos_list_wrap"></div> <div id="user-paginator" style="padding: 0px 0px 0px 20px"></div> </div> <div id="watched_container"> <div class="table-grid table yui-skin-sam" id="watched_repos_list_wrap"></div> <div id="watched-user-paginator" style="padding: 0px 0px 0px 20px"></div> </div> </div> <script type="text/javascript"> $('#j_filter').click(function(){ var $jfilter = $('#j_filter'); if($jfilter.hasClass('initial')){ $jfilter.val(''); } }); var fix_j_filter_width = function(len){ $('#j_filter').css('width', Math.max(80, len*6.50)+'px'); }; $('#j_filter').keyup(function(){ fix_j_filter_width($('#j_filter').val().length); }); $('#filter_form').submit(function(e){ e.preventDefault(); var val = $('#j_filter').val(); window.location = "${url.current(filter='__FILTER__')}".replace('__FILTER__',val); }); fix_j_filter_width($('#j_filter').val().length); $('#refresh').click(function(e){ asynchtml("${h.url.current(filter=c.search_term)}", $("#journal"), function(){ show_more_event(); tooltip_activate(); show_changeset_tooltip(); }); e.preventDefault(); }); var show_my = function(e){ $('#watched_container').hide(); $('#my_container').show(); $('#q_filter').show(); $('#q_filter_watched').hide(); $('#show_my_li').addClass('active'); $('#show_watched_li').removeClass('active'); if(!$('#show_my').hasClass('loaded')){ table_renderer(${c.data |n}); $('#show_my').addClass('loaded'); } }; $('#show_my').click(function(){ show_my(); }); var show_watched = function(){ $('#my_container').hide(); $('#watched_container').show(); $('#q_filter_watched').show(); $('#q_filter').hide(); $('#show_watched_li').addClass('active'); $('#show_my_li').removeClass('active'); if(!$('#show_watched').hasClass('loaded')){ watched_renderer(${c.watched_data |n}); $('#show_watched').addClass('loaded'); } }; $('#show_watched').click(function(){ show_watched(); }); //init watched show_watched(); var tabs = { 'watched': show_watched, 'my': show_my } var url = location.href.split('#'); if (url[1]) { //We have a hash var tabHash = url[1]; var func = tabs[tabHash] if (func){ func(); } } function watched_renderer(data){ var myDataSource = new YAHOO.util.DataSource(data); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { resultsList: "records", fields: [ {key:"menu"}, {key:"raw_name"}, {key:"name"}, {key:"last_changeset"}, {key:"last_rev_raw"}, {key:"action"} ] }; myDataSource.doBeforeCallback = function(req,raw,res,cb) { // This is the filter function var data = res.results || [], filtered = [], i,l; if (req) { req = req.toLowerCase(); for (i = 0; i<data.length; i++) { var pos = data[i].raw_name.toLowerCase().indexOf(req) if (pos != -1) { filtered.push(data[i]); } } res.results = filtered; } return res; } // main table sorting var myColumnDefs = [ {key:"menu",label:"",sortable:false,className:"quick_repo_menu hidden"}, {key:"name",label:"${_('Name')}",sortable:true, sortOptions: { sortFunction: nameSort }}, {key:"last_changeset",label:"${_('Tip')}",sortable:true, sortOptions: { sortFunction: revisionSort }}, {key:"action",label:"${_('Action')}",sortable:false} ]; var myDataTable = new YAHOO.widget.DataTable("watched_repos_list_wrap", myColumnDefs, myDataSource,{ sortedBy:{key:"name",dir:"asc"}, paginator: YUI_paginator(25, ['watched-user-paginator']), MSG_SORTASC:"${_('Click to sort ascending')}", MSG_SORTDESC:"${_('Click to sort descending')}", MSG_EMPTY:"${_('No records found.')}", MSG_ERROR:"${_('Data error.')}", MSG_LOADING:"${_('Loading...')}" } ); myDataTable.subscribe('postRenderEvent',function(oArgs) { tooltip_activate(); quick_repo_menu(); }); var filterTimeout = null; updateFilter = function () { // Reset timeout filterTimeout = null; // Reset sort var state = myDataTable.getState(); state.sortedBy = {key:'name', dir:YAHOO.widget.DataTable.CLASS_ASC}; // Get filtered data myDataSource.sendRequest(YUD.get('q_filter_watched').value,{ success : myDataTable.onDataReturnInitializeTable, failure : myDataTable.onDataReturnInitializeTable, scope : myDataTable, argument: state }); }; $('#q_filter_watched').click(function(){ if(!$('#q_filter_watched').hasClass('loaded')) { //TODO: load here full list later to do search within groups $('#q_filter_watched').css('loaded'); } }); $('#q_filter_watched').keyup(function(){ clearTimeout(filterTimeout); filterTimeout = setTimeout(updateFilter,600); }); } function table_renderer(data){ var myDataSource = new YAHOO.util.DataSource(data); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { resultsList: "records", fields: [ {key:"menu"}, {key:"raw_name"}, {key:"name"}, {key:"last_changeset"}, {key:"last_rev_raw"}, {key:"action"} ] }; myDataSource.doBeforeCallback = function(req,raw,res,cb) { // This is the filter function var data = res.results || [], filtered = [], i,l; if (req) { req = req.toLowerCase(); for (i = 0; i<data.length; i++) { var pos = data[i].raw_name.toLowerCase().indexOf(req) if (pos != -1) { filtered.push(data[i]); } } res.results = filtered; } return res; } // main table sorting var myColumnDefs = [ {key:"menu",label:"",sortable:false,className:"quick_repo_menu hidden"}, {key:"name",label:"${_('Name')}",sortable:true, sortOptions: { sortFunction: nameSort }}, {key:"last_changeset",label:"${_('Tip')}",sortable:true, sortOptions: { sortFunction: revisionSort }}, {key:"action",label:"${_('Action')}",sortable:false} ]; var myDataTable = new YAHOO.widget.DataTable("repos_list_wrap", myColumnDefs, myDataSource,{ sortedBy:{key:"name",dir:"asc"}, paginator: YUI_paginator(25, ['user-paginator']), MSG_SORTASC:"${_('Click to sort ascending')}", MSG_SORTDESC:"${_('Click to sort descending')}", MSG_EMPTY:"${_('No records found.')}", MSG_ERROR:"${_('Data error.')}", MSG_LOADING:"${_('Loading...')}" } ); myDataTable.subscribe('postRenderEvent',function(oArgs) { tooltip_activate(); quick_repo_menu(); }); var filterTimeout = null; updateFilter = function () { // Reset timeout filterTimeout = null; // Reset sort var state = myDataTable.getState(); state.sortedBy = {key:'name', dir:YAHOO.widget.DataTable.CLASS_ASC}; // Get filtered data myDataSource.sendRequest(YUD.get('q_filter').value,{ success : myDataTable.onDataReturnInitializeTable, failure : myDataTable.onDataReturnInitializeTable, scope : myDataTable, argument: state }); }; $('#q_filter').click(function(){ if(!$('#q_filter').hasClass('loaded')){ //TODO: load here full list later to do search within groups $('#q_filter').addClass('loaded'); } }); $('#q_filter').keyup(function(){ clearTimeout(filterTimeout); filterTimeout = setTimeout(updateFilter,600); }); if($('#q_filter').val()) { updateFilter(); } } </script> <script type="text/javascript"> $(document).ready(function(){ var $journal = $('#journal'); $journal.on('click','.pager_link',function(e){ asynchtml(e.target.href, $journal, function(){ show_more_event(); tooltip_activate(); show_changeset_tooltip(); }); e.preventDefault(); }); $('#journal').on('click','.show_more',function(e){ var el = e.target; $('#'+el.id.substring(1)).show(); $(el.parentNode).hide(); }); }); </script> </%def>