Mercurial > kallithea
diff rhodecode/templates/files/files.html @ 2686:269c6e0b54cc beta
Reimplemented file-browser using partial-ajax
- improves the speed of browsing of files for revision
- url push state via html5 History
- also cache the results of calls for even faster handling the content
author | Marcin Kuzminski <marcin@python-works.com> |
---|---|
date | Sat, 04 Aug 2012 17:46:45 +0200 |
parents | 79818f546538 |
children | 4d7dfda32d10 |
line wrap: on
line diff
--- a/rhodecode/templates/files/files.html Sat Aug 04 01:29:15 2012 +0200 +++ b/rhodecode/templates/files/files.html Sat Aug 04 17:46:45 2012 +0200 @@ -1,7 +1,7 @@ <%inherit file="/base/base.html"/> <%def name="title()"> - ${_('%s Files') % c.repo_name} - ${c.rhodecode_name} + ${_('%s files') % c.repo_name} - ${c.rhodecode_name} </%def> <%def name="breadcrumbs_links()"> @@ -36,11 +36,97 @@ </div> </div> </div> + <script type="text/javascript"> -var YPJAX_TITLE = "${c.repo_name} ${_('Files')} - ${c.rhodecode_name}"; -var current_url = "${h.url.current()}"; -var node_list_url = '${h.url("files_home",repo_name=c.repo_name,revision=c.changeset.raw_id,f_path='__FPATH__')}'; -var url_base = '${h.url("files_nodelist_home",repo_name=c.repo_name,revision=c.changeset.raw_id,f_path=c.file.path)}'; -fileBrowserListeners(current_url, node_list_url, url_base); +var CACHE = {}; +var CACHE_EXPIRE = 60*1000; //cache for 60s + +var ypjax_links = function(){ + YUE.on(YUQ('.ypjax-link'), 'click',function(e){ + + //don't do ypjax on middle click + if(e.which == 2){ + return true; + } + var el = e.currentTarget; + var url = el.href; + + var _base_url = '${h.url("files_home",repo_name=c.repo_name,revision='',f_path='')}'; + _base_url = _base_url.replace('//','/') + + //extract rev and the f_path from url. + parts = url.split(_base_url) + if(parts.length != 2){ + return false; + } + + var parts2 = parts[1].split('/'); + var rev = parts2.shift(); // pop the first element which is the revision + var f_path = parts2.join('/'); + + var title = "${_('%s files') % c.repo_name}" + " - " + f_path; + + //used to construct links from the search list + var node_list_url = '${h.url("files_home",repo_name=c.repo_name,revision='__REV__',f_path='__FPATH__')}'; + node_list_url = node_list_url.replace('__REV__',rev); + //send the nodelist request to this url + var url_base = '${h.url("files_nodelist_home",repo_name=c.repo_name,revision='__REV__',f_path='__FPATH__')}'; + url_base = url_base.replace('__REV__',rev).replace('__FPATH__', f_path) + + // Change our States and save some data for handling events + var data = {url:url,title:title, url_base:url_base, + node_list_url:node_list_url}; + History.pushState(data, title, url); + + //now we're sure that we can do ypjax things + YUE.preventDefault(e) + return false; + }); +} + +var callbacks = function(State){ + ypjax_links(); + tooltip_activate(); + fileBrowserListeners(State.url, State.data.node_list_url, State.data.url_base); + // Inform Google Analytics of the change + if ( typeof window.pageTracker !== 'undefined' ) { + window.pageTracker._trackPageview(State.url); + } +} + +YUE.onDOMReady(function(){ + ypjax_links(); + var container = 'files_data'; + //Bind to StateChange Event + History.Adapter.bind(window,'statechange',function(){ + var State = History.getState(); + cache_key = State.url; + //check if we have this request in cache maybe ? + var _cache_obj = CACHE[cache_key]; + var _cur_time = new Date().getTime(); + // get from cache if it's there and not yet expired ! + if(_cache_obj !== undefined && _cache_obj[0] > _cur_time){ + YUD.get(container).innerHTML=_cache_obj[1]; + YUD.setStyle(container,'opacity','1.0'); + + //callbacks after ypjax call + callbacks(State); + } + else{ + ypjax(State.url,container,function(o){ + //callbacks after ypjax call + callbacks(State); + if (o !== undefined){ + //store our request in cache + var _expire_on = new Date().getTime()+CACHE_EXPIRE; + CACHE[cache_key] = [_expire_on, o.responseText]; + } + }); + } + }); + +}); + </script> + </%def>