js: refactor js and move logic to files.js

rhodecode/public/js/src/rhodecode/files.js

@@ -1,330 +1,411 b''
 // # Copyright (C) 2010-2019 RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # RhodeCode Enterprise Edition, including its added features, Support services,
 // # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 /**
  * Search file list
  */
 
 var NodeFilter = {};
 
 var fileBrowserListeners = function (node_list_url, url_base) {
     var $filterInput = $('#node_filter');
     var n_filter = $filterInput.get(0);
 
     NodeFilter.filterTimeout = null;
     var nodes = null;
 
     NodeFilter.focus = function () {
         $filterInput.focus()
     };
 
     NodeFilter.fetchNodes = function (callback) {
         $.ajax(
             {url: node_list_url, headers: {'X-PARTIAL-XHR': true}})
             .done(function (data) {
                 nodes = data.nodes;
                 if (callback) {
                     callback();
                 }
             })
             .fail(function (data) {
                 console.log('failed to load');
             });
     };
 
     NodeFilter.initFilter = function (e) {
         if ($filterInput.hasClass('loading')) {
             return
         }
 
         // in case we are already loaded, do nothing
         if (!$filterInput.hasClass('init')) {
             return NodeFilter.handleKey(e);
         }
         var iconLoading = 'icon-spin animate-spin';
         var iconSearch = 'icon-search';
         $('.files-filter-box-path i').removeClass(iconSearch).addClass(iconLoading);
         $filterInput.addClass('loading');
 
         var callback = function (org) {
             return function () {
                 if ($filterInput.hasClass('init')) {
                     $filterInput.removeClass('init');
                     $filterInput.removeClass('loading');
                 }
                 $('.files-filter-box-path i').removeClass(iconLoading).addClass(iconSearch);
 
                 // auto re-filter if we filled in the input
                 if (n_filter.value !== "") {
                     NodeFilter.updateFilter(n_filter, e)()
                 }
 
             }
         };
         // load node data
         NodeFilter.fetchNodes(callback());
 
     };
 
     NodeFilter.resetFilter = function () {
         $('#tbody').show();
         $('#tbody_filtered').hide();
         $filterInput.val('');
     };
 
     NodeFilter.handleKey = function (e) {
         var scrollDown = function (element) {
             var elementBottom = element.offset().top + $(element).outerHeight();
             var windowBottom = window.innerHeight + $(window).scrollTop();
             if (elementBottom > windowBottom) {
                 var offset = elementBottom - window.innerHeight;
                 $('html,body').scrollTop(offset);
                 return false;
             }
             return true;
         };
 
         var scrollUp = function (element) {
             if (element.offset().top < $(window).scrollTop()) {
                 $('html,body').scrollTop(element.offset().top);
                 return false;
             }
             return true;
         };
         var $hlElem = $('.browser-highlight');
 
         if (e.keyCode === 40) { // Down
             if ($hlElem.length === 0) {
                 $('.browser-result').first().addClass('browser-highlight');
             } else {
                 var next = $hlElem.next();
                 if (next.length !== 0) {
                     $hlElem.removeClass('browser-highlight');
                     next.addClass('browser-highlight');
                 }
             }
 
             if ($hlElem.get(0) !== undefined){
                 scrollDown($hlElem);
             }
         }
         if (e.keyCode === 38) { // Up
             e.preventDefault();
             if ($hlElem.length !== 0) {
                 var next = $hlElem.prev();
                 if (next.length !== 0) {
                     $('.browser-highlight').removeClass('browser-highlight');
                     next.addClass('browser-highlight');
                 }
             }
 
             if ($hlElem.get(0) !== undefined){
                 scrollUp($hlElem);
             }
 
         }
         if (e.keyCode === 13) { // Enter
             if ($('.browser-highlight').length !== 0) {
                 var url = $('.browser-highlight').find('.match-link').attr('href');
                 window.location = url;
             }
         }
         if (e.keyCode === 27) { // Esc
             NodeFilter.resetFilter();
             $('html,body').scrollTop(0);
         }
 
         var capture_keys = [
             40, // ArrowDown
             38, // ArrowUp
             39, // ArrowRight
             37, // ArrowLeft
             13, // Enter
             27  // Esc
         ];
 
         if ($.inArray(e.keyCode, capture_keys) === -1) {
             clearTimeout(NodeFilter.filterTimeout);
             NodeFilter.filterTimeout = setTimeout(NodeFilter.updateFilter(n_filter, e), 200);
         }
 
     };
 
     NodeFilter.fuzzy_match = function (filepath, query) {
         var highlight = [];
         var order = 0;
         for (var i = 0; i < query.length; i++) {
             var match_position = filepath.indexOf(query[i]);
             if (match_position !== -1) {
                 var prev_match_position = highlight[highlight.length - 1];
                 if (prev_match_position === undefined) {
                     highlight.push(match_position);
                 } else {
                     var current_match_position = prev_match_position + match_position + 1;
                     highlight.push(current_match_position);
                     order = order + current_match_position - prev_match_position;
                 }
                 filepath = filepath.substring(match_position + 1);
             } else {
                 return false;
             }
         }
         return {
             'order': order,
             'highlight': highlight
         };
     };
 
     NodeFilter.sortPredicate = function (a, b) {
         if (a.order < b.order) return -1;
         if (a.order > b.order) return 1;
         if (a.filepath < b.filepath) return -1;
         if (a.filepath > b.filepath) return 1;
         return 0;
     };
 
     NodeFilter.updateFilter = function (elem, e) {
         return function () {
             // Reset timeout
             NodeFilter.filterTimeout = null;
             var query = elem.value.toLowerCase();
             var match = [];
             var matches_max = 20;
             if (query !== "") {
                 var results = [];
                 for (var k = 0; k < nodes.length; k++) {
                     var result = NodeFilter.fuzzy_match(
                             nodes[k].name.toLowerCase(), query);
                     if (result) {
                         result.type = nodes[k].type;
                         result.filepath = nodes[k].name;
                         results.push(result);
                     }
                 }
                 results = results.sort(NodeFilter.sortPredicate);
                 var limit = matches_max;
                 if (results.length < matches_max) {
                     limit = results.length;
                 }
                 for (var i = 0; i < limit; i++) {
                     if (query && results.length > 0) {
                         var n = results[i].filepath;
                         var t = results[i].type;
                         var n_hl = n.split("");
                         var pos = results[i].highlight;
                         for (var j = 0; j < pos.length; j++) {
                             n_hl[pos[j]] = "<em>" + n_hl[pos[j]] + "</em>";
                         }
                         n_hl = n_hl.join("");
                         var new_url = url_base.replace('__FPATH__', n);
 
                         var typeObj = {
                             dir: 'icon-directory browser-dir',
                             file: 'icon-file-text browser-file'
                         };
 
                         var typeIcon = '<i class="{0}"></i>'.format(typeObj[t]);
                         match.push('<tr class="browser-result"><td><a class="match-link" href="{0}">{1}{2}</a></td><td colspan="5"></td></tr>'.format(new_url, typeIcon, n_hl));
                     }
                 }
                 if (results.length > limit) {
                     var truncated_count = results.length - matches_max;
                     if (truncated_count === 1) {
                         match.push('<tr><td>{0} {1}</td><td colspan="5"></td></tr>'.format(truncated_count, _gettext('truncated result')));
                     } else {
                         match.push('<tr><td>{0} {1}</td><td colspan="5"></td></tr>'.format(truncated_count, _gettext('truncated results')));
                     }
                 }
             }
             if (query !== "") {
                 $('#tbody').hide();
                 $('#tbody_filtered').show();
 
                 if (match.length === 0) {
                     match.push('<tr><td>{0}</td><td colspan="5"></td></tr>'.format(_gettext('No matching files')));
                 }
                 $('#tbody_filtered').html(match.join(""));
             } else {
                 $('#tbody').show();
                 $('#tbody_filtered').hide();
             }
 
         };
     };
 
 };
 
 var getIdentNode = function(n){
   // iterate through nodes until matched interesting node
   if (typeof n === 'undefined'){
     return -1;
   }
   if(typeof n.id !== "undefined" && n.id.match('L[0-9]+')){
     return n;
   }
   else{
     return getIdentNode(n.parentNode);
   }
 };
 
 var getSelectionLink = function(e) {
   // get selection from start/to nodes
   if (typeof window.getSelection !== "undefined") {
     s = window.getSelection();
 
     from = getIdentNode(s.anchorNode);
     till = getIdentNode(s.focusNode);
 
     f_int = parseInt(from.id.replace('L',''));
     t_int = parseInt(till.id.replace('L',''));
 
     if (f_int > t_int){
       // highlight from bottom
       offset = -35;
       ranges = [t_int,f_int];
     }
     else{
       // highligth from top
       offset = 35;
       ranges = [f_int,t_int];
     }
     // if we select more than 2 lines
     if (ranges[0] !== ranges[1]){
       if($('#linktt').length === 0){
         hl_div = document.createElement('div');
         hl_div.id = 'linktt';
       }
       hl_div.innerHTML = '';
 
       anchor = '#L'+ranges[0]+'-'+ranges[1];
       var link = document.createElement('a');
       link.href = location.href.substring(0,location.href.indexOf('#'))+anchor;
       link.innerHTML = _gettext('Selection link');
       hl_div.appendChild(link);
       $('#codeblock').append(hl_div);
 
       var xy = $(till).offset();
       $('#linktt').addClass('hl-tip-box tip-box');
       $('#linktt').offset({top: xy.top + offset, left: xy.left});
       $('#linktt').css('visibility','visible');
     }
     else{
       $('#linktt').css('visibility','hidden');
     }
   }
 };
+
+var getFileState = function() {
+    // relies on a global set filesUrlData
+    var f_path = filesUrlData['f_path'];
+    var commit_id = filesUrlData['commit_id'];
+
+    var url_params = {
+        repo_name: templateContext.repo_name,
+        commit_id: commit_id,
+        f_path:'__FPATH__'
+    };
+    if (atRef !== '') {
+        url_params['at'] = atRef
+    }
+
+    var _url_base = pyroutes.url('repo_files', url_params);
+    var _node_list_url = pyroutes.url('repo_files_nodelist',
+            {repo_name: templateContext.repo_name,
+             commit_id: commit_id, f_path: f_path});
+
+    return {
+        f_path: f_path,
+        commit_id: commit_id,
+        node_list_url: _node_list_url,
+        url_base: _url_base
+    };
+};
+
+var getFilesMetadata = function() {
+    // relies on metadataRequest global state
+    if (metadataRequest && metadataRequest.readyState != 4) {
+        metadataRequest.abort();
+    }
+
+    if ($('#file-tree-wrapper').hasClass('full-load')) {
+        // in case our HTML wrapper has full-load class we don't
+        // trigger the async load of metadata
+        return false;
+    }
+
+    var state = getFileState();
+    var url_data = {
+        'repo_name': templateContext.repo_name,
+        'commit_id': state.commit_id,
+        'f_path': state.f_path
+    };
+
+    var url = pyroutes.url('repo_nodetree_full', url_data);
+
+    metadataRequest = $.ajax({url: url});
+
+    metadataRequest.done(function(data) {
+        $('#file-tree').html(data);
+        timeagoActivate();
+    });
+    metadataRequest.fail(function (data, textStatus, errorThrown) {
+        if (data.status != 0) {
+            alert("Error while fetching metadata.\nError code {0} ({1}).Please consider reloading the page".format(data.status,data.statusText));
+        }
+    });
+};
+
+// show more authors
+var showAuthors = function(elem, annotate) {
+    var state = getFileState('callbacks');
+
+    var url = pyroutes.url('repo_file_authors',
+                {'repo_name': templateContext.repo_name,
+                 'commit_id': state.commit_id, 'f_path': state.f_path});
+
+    $.pjax({
+        url: url,
+        data: 'annotate={0}'.format(annotate),
+        container: '#file_authors',
+        push: false,
+        timeout: 5000
+    }).complete(function(){
+        $(elem).hide();
+        $('#file_authors_title').html(_gettext('All Authors'))
+    })
+};

rhodecode/templates/files/file_authors_box.mako

@@ -1,35 +1,35 b''
 <%namespace name="base" file="/base/base.mako"/>
 
 % if c.authors:
 
 <table class="sidebar-right-content">
     % for email, user, commits in sorted(c.authors, key=lambda e: c.file_last_commit.author_email!=e[0]):
     <tr class="file_author tooltip" title="${h.tooltip(h.author_string(email))}">
 
         <td>
             <span class="user commit-author">${h.link_to_user(user)}</span>
             % if c.file_author:
                 <span class="commit-date">- ${h.age_component(c.file_last_commit.date)}</span>
-                <a href="#ShowAuthors" id="show_authors" class="action_link"> - ${_('Load All Authors')}</a>
+                <a href="#ShowAuthors" onclick="showAuthors(this, ${("1" if c.annotate else "0")}); return false" class="action_link"> - ${_('Load All Authors')}</a>
             % elif c.file_last_commit.author_email==email:
                 <span> (${_('last author')})</span>
             % endif
         </td>
 
         <td>
             % if not c.file_author:
                 <code>
                   % if commits == 1:
                     ${commits} ${_('Commit')}
                   % else:
                     ${commits} ${_('Commits')}
                   % endif
                 </code>
             % endif
         </td>
     </tr>
 
     % endfor
 </table>
 % endif
 

rhodecode/templates/files/files.mako

@@ -1,467 +1,369 b''
 <%inherit file="/base/base.mako"/>
 
 <%def name="title(*args)">
     ${_('{} Files').format(c.repo_name)}
     %if hasattr(c,'file'):
         &middot; ${(h.safe_unicode(c.file.path) or '\\')}
     %endif
 
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${_('Files')}
     %if c.file:
         @ ${h.show_id(c.commit)}
     %endif
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='files')}
 </%def>
 
 <%def name="main()">
+    <script type="text/javascript">
+        var fileSourcePage = ${c.file_source_page};
+        var atRef = '${request.GET.get('at', '')}';
+
+        // global state for fetching metadata
+        metadataRequest = null;
+
+        // global metadata about URL
+        filesUrlData = ${h.json.dumps(request.matchdict)|n};
+    </script>
+
     <div>
         <div id="files_data">
             <%include file='files_pjax.mako'/>
         </div>
     </div>
-    <script>
 
-        var metadataRequest = null;
-        var fileSourcePage = ${c.file_source_page};
-        var atRef = '${request.GET.get('at', '')}';
-
-        var getState = function(context) {
-            var url = $(location).attr('href');
-            var _base_url = '${h.route_path("repo_files",repo_name=c.repo_name,commit_id='',f_path='')}';
-            var _annotate_url = '${h.route_path("repo_files:annotated",repo_name=c.repo_name,commit_id='',f_path='')}';
-            _base_url = _base_url.replace('//', '/');
-            _annotate_url = _annotate_url.replace('//', '/');
-
-            //extract f_path from url.
-            var parts = url.split(_base_url);
-            if (parts.length != 2) {
-                parts = url.split(_annotate_url);
-                if (parts.length != 2) {
-                    var rev = "tip";
-                    var f_path = "";
-                } else {
-                    var parts2 = parts[1].split('/');
-                    var rev = parts2.shift(); // pop the first element which is the revision
-                    var f_path = parts2.join('/');
-                }
-
-            } else {
-                var parts2 = parts[1].split('/');
-                var rev = parts2.shift(); // pop the first element which is the revision
-                var f_path = parts2.join('/');
-            }
-
-            var url_params = {
-                repo_name: templateContext.repo_name,
-                commit_id: rev,
-                f_path:'__FPATH__'
-            };
-            if (atRef !== '') {
-                url_params['at'] = atRef
-            }
-
-            var _url_base = pyroutes.url('repo_files', url_params);
-            var _node_list_url = pyroutes.url('repo_files_nodelist',
-                    {repo_name: templateContext.repo_name,
-                     commit_id: rev, f_path: f_path});
-
-            return {
-                url: url,
-                f_path: f_path,
-                rev: rev,
-                commit_id: "${c.commit.raw_id}",
-                node_list_url: _node_list_url,
-                url_base: _url_base
-            };
-        };
-
-        var getFilesMetadata = function() {
-            if (metadataRequest && metadataRequest.readyState != 4) {
-                metadataRequest.abort();
-            }
-            if (fileSourcePage) {
-                return false;
-            }
-
-            if ($('#file-tree-wrapper').hasClass('full-load')) {
-                // in case our HTML wrapper has full-load class we don't
-                // trigger the async load of metadata
-                return false;
-            }
-
-            var state = getState('metadata');
-            var url_data = {
-                'repo_name': templateContext.repo_name,
-                'commit_id': state.commit_id,
-                'f_path': state.f_path
-            };
-
-            var url = pyroutes.url('repo_nodetree_full', url_data);
-
-            metadataRequest = $.ajax({url: url});
-
-            metadataRequest.done(function(data) {
-                $('#file-tree').html(data);
-                timeagoActivate();
-            });
-            metadataRequest.fail(function (data, textStatus, errorThrown) {
-                if (data.status != 0) {
-                    alert("Error while fetching metadata.\nError code {0} ({1}).Please consider reloading the page".format(data.status,data.statusText));
-                }
-            });
-        };
+    <script type="text/javascript">
 
         var initFileJS = function () {
-            var state = getState('callbacks');
+            var state = getFileState();
 
             // select code link event
             $("#hlcode").mouseup(getSelectionLink);
 
             // file history select2 used for history of file, and switch to
             var initialCommitData = {
                 at_ref: atRef,
                 id: null,
                 text: '${c.commit.raw_id}',
                 type: 'sha',
                 raw_id: '${c.commit.raw_id}',
                 idx: ${c.commit.idx},
                 files_url: null,
             };
 
             // check if we have ref info.
             var selectedRef =  fileTreeRefs[atRef];
             if (selectedRef !== undefined) {
                 $.extend(initialCommitData, selectedRef)
             }
 
-            var loadUrl = pyroutes.url('repo_file_history', {'repo_name': templateContext.repo_name, 'commit_id': state.rev,'f_path': state.f_path});
+            var loadUrl = pyroutes.url('repo_file_history', {'repo_name': templateContext.repo_name, 'commit_id': state.commit_id,'f_path': state.f_path});
             var cacheKey = '__SINGLE_FILE_REFS__';
             var cachedDataSource = {};
 
             var loadRefsData = function (query) {
                 $.ajax({
                     url: loadUrl,
                     data: {},
                     dataType: 'json',
                     type: 'GET',
                     success: function (data) {
                         cachedDataSource[cacheKey] = data;
                         query.callback({results: data.results});
                     }
                 });
             };
 
             var feedRefsData = function (query, cachedData) {
                 var data = {results: []};
                 //filter results
                 $.each(cachedData.results, function () {
                     var section = this.text;
                     var children = [];
                     $.each(this.children, function () {
                         if (query.term.length === 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {
                             children.push(this)
                         }
                     });
                     data.results.push({
                         'text': section,
                         'children': children
                     })
                 });
 
                 query.callback(data);
             };
 
             var select2FileHistorySwitcher = function (targetElement, loadUrl, initialData) {
                 var formatResult = function (result, container, query) {
                     return formatSelect2SelectionRefs(result);
                 };
 
                 var formatSelection = function (data, container) {
                     var commit_ref = data;
 
                     var tmpl = '';
                     if (commit_ref.type === 'sha') {
                         tmpl = (commit_ref.raw_id || "").substr(0,8);
                     } else if (commit_ref.type === 'branch') {
                         tmpl = tmpl.concat('<i class="icon-branch"></i> ');
                         tmpl = tmpl.concat(escapeHtml(commit_ref.text));
                     } else if (commit_ref.type === 'tag') {
                         tmpl = tmpl.concat('<i class="icon-tag"></i> ');
                         tmpl = tmpl.concat(escapeHtml(commit_ref.text));
                     } else if (commit_ref.type === 'book') {
                         tmpl = tmpl.concat('<i class="icon-bookmark"></i> ');
                         tmpl = tmpl.concat(escapeHtml(commit_ref.text));
                     }
                     var idx = commit_ref.idx || 0;
                     if (idx !== 0) {
                         tmpl = tmpl.concat('<span class="select-index-number">r{0}</span>'.format(idx));
                     }
                     return tmpl
                 };
 
               $(targetElement).select2({
                 dropdownAutoWidth: true,
                 width: "resolve",
                 containerCssClass: "drop-menu",
                 dropdownCssClass: "drop-menu-dropdown",
                 query: function(query) {
                   var cachedData = cachedDataSource[cacheKey];
                   if (cachedData) {
                     feedRefsData(query, cachedData)
                   } else {
                     loadRefsData(query)
                   }
                 },
                 initSelection: function(element, callback) {
                   callback(initialData);
                 },
                 formatResult: formatResult,
                 formatSelection: formatSelection
               });
 
             };
 
             select2FileHistorySwitcher('#file_refs_filter', loadUrl, initialCommitData);
 
             $('#file_refs_filter').on('change', function(e) {
                 var data = $('#file_refs_filter').select2('data');
                 var commit_id = data.id;
 
                 if ("${c.annotate}" === "True") {
                     var url = pyroutes.url('repo_files:annotated',
                             {'repo_name': templateContext.repo_name,
                              'commit_id': commit_id, 'f_path': state.f_path});
                 } else {
                     var url = pyroutes.url('repo_files',
                             {'repo_name': templateContext.repo_name,
                              'commit_id': commit_id, 'f_path': state.f_path});
                 }
                 window.location = url;
 
             });
 
-            // show more authors
-            $('#show_authors').on('click', function(e) {
-                e.preventDefault();
-                var url = pyroutes.url('repo_file_authors',
-                            {'repo_name': templateContext.repo_name,
-                             'commit_id': state.rev, 'f_path': state.f_path});
-
-                $.pjax({
-                    url: url,
-                    data: 'annotate=${("1" if c.annotate else "0")}',
-                    container: '#file_authors',
-                    push: false,
-                    timeout: 5000
-                }).complete(function(){
-                    $('#show_authors').hide();
-                    $('#file_authors_title').html(_gettext('All Authors'))
-                })
-            });
-
             // load file short history
             $('#file_history_overview').on('click', function(e) {
                 e.preventDefault();
                 path = state.f_path;
                 if (path.indexOf("#") >= 0) {
                     path = path.slice(0, path.indexOf("#"));
                 }
                 var url = pyroutes.url('repo_changelog_file',
                         {'repo_name': templateContext.repo_name,
-                         'commit_id': state.rev, 'f_path': path, 'limit': 6});
+                         'commit_id': state.commit_id, 'f_path': path, 'limit': 6});
                 $('#file_history_container').show();
                 $('#file_history_container').html('<div class="file-history-inner">{0}</div>'.format(_gettext('Loading ...')));
 
                 $.pjax({
                     url: url,
                     container: '#file_history_container',
                     push: false,
                     timeout: 5000
                 });
             });
 
-
         };
 
         var initTreeJS = function () {
-            var state = getState('callbacks');
+            var state = getFileState();
             getFilesMetadata();
 
             // fuzzy file filter
             fileBrowserListeners(state.node_list_url, state.url_base);
 
             // switch to widget
             var initialCommitData = {
                 at_ref: atRef,
                 id: null,
                 text: '${c.commit.raw_id}',
                 type: 'sha',
                 raw_id: '${c.commit.raw_id}',
                 idx: ${c.commit.idx},
                 files_url: null,
             };
 
             // check if we have ref info.
             var selectedRef =  fileTreeRefs[atRef];
             if (selectedRef !== undefined) {
                 $.extend(initialCommitData, selectedRef)
             }
 
             var loadUrl = pyroutes.url('repo_refs_data', {'repo_name': templateContext.repo_name});
             var cacheKey = '__ALL_FILE_REFS__';
             var cachedDataSource = {};
 
             var loadRefsData = function (query) {
                 $.ajax({
                     url: loadUrl,
                     data: {},
                     dataType: 'json',
                     type: 'GET',
                     success: function (data) {
                         cachedDataSource[cacheKey] = data;
                         query.callback({results: data.results});
                     }
                 });
             };
 
             var feedRefsData = function (query, cachedData) {
                 var data = {results: []};
                 //filter results
                 $.each(cachedData.results, function () {
                     var section = this.text;
                     var children = [];
                     $.each(this.children, function () {
                         if (query.term.length === 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {
                             children.push(this)
                         }
                     });
                     data.results.push({
                         'text': section,
                         'children': children
                     })
                 });
 
                 //push the typed in commit idx
                 if (!isNaN(query.term)) {
                     var files_url = pyroutes.url('repo_files',
                                 {'repo_name': templateContext.repo_name,
                                  'commit_id': query.term, 'f_path': state.f_path});
 
                     data.results.push({
                         'text': _gettext('go to numeric commit'),
                         'children': [{
                             at_ref: null,
                             id: null,
                             text: 'r{0}'.format(query.term),
                             type: 'sha',
                             raw_id: query.term,
                             idx: query.term,
                             files_url: files_url,
                         }]
                     });
                 }
                 query.callback(data);
             };
 
             var select2RefFileSwitcher = function (targetElement, loadUrl, initialData) {
                 var formatResult = function (result, container, query) {
                     return formatSelect2SelectionRefs(result);
                 };
 
                 var formatSelection = function (data, container) {
                     var commit_ref = data;
 
                     var tmpl = '';
                     if (commit_ref.type === 'sha') {
                         tmpl = (commit_ref.raw_id || "").substr(0,8);
                     } else if (commit_ref.type === 'branch') {
                         tmpl = tmpl.concat('<i class="icon-branch"></i> ');
                         tmpl = tmpl.concat(escapeHtml(commit_ref.text));
                     } else if (commit_ref.type === 'tag') {
                         tmpl = tmpl.concat('<i class="icon-tag"></i> ');
                         tmpl = tmpl.concat(escapeHtml(commit_ref.text));
                     } else if (commit_ref.type === 'book') {
                         tmpl = tmpl.concat('<i class="icon-bookmark"></i> ');
                         tmpl = tmpl.concat(escapeHtml(commit_ref.text));
                     }
 
                     var idx = commit_ref.idx || 0;
                     if (idx !== 0) {
                         tmpl = tmpl.concat('<span class="select-index-number">r{0}</span>'.format(idx));
                     }
                     return tmpl
                 };
 
               $(targetElement).select2({
                 dropdownAutoWidth: true,
                 width: "resolve",
                 containerCssClass: "drop-menu",
                 dropdownCssClass: "drop-menu-dropdown",
                 query: function(query) {
 
                   var cachedData = cachedDataSource[cacheKey];
                   if (cachedData) {
                     feedRefsData(query, cachedData)
                   } else {
                     loadRefsData(query)
                   }
                 },
                 initSelection: function(element, callback) {
                   callback(initialData);
                 },
                 formatResult: formatResult,
                 formatSelection: formatSelection
               });
 
             };
 
             select2RefFileSwitcher('#refs_filter', loadUrl, initialCommitData);
 
             $('#refs_filter').on('change', function(e) {
                 var data = $('#refs_filter').select2('data');
                 window.location = data.files_url
             });
 
         };
 
         $(document).ready(function() {
             timeagoActivate();
 
             if ($('#trimmed_message_box').height() < 50) {
                 $('#message_expand').hide();
             }
 
             $('#message_expand').on('click', function(e) {
                 $('#trimmed_message_box').css('max-height', 'none');
                 $(this).hide();
             });
 
             if (fileSourcePage) {
                 initFileJS()
             } else {
                 initTreeJS()
             }
 
             var search_GET = "${request.GET.get('search','')}";
             if (search_GET === "1") {
                 NodeFilter.initFilter();
                 NodeFilter.focus();
             }
         });
 
     </script>
 
 </%def>
  No newline at end of file