Return to quicksearch.js CVS log

Up to [LON-CAPA] / loncom / html / adm / quicksearch

added search functionality to authoring space

- users can now search their author space for files. the search functions searches in the file name and title. use of regular expressions and case sensitivity can be enabled. the content table of the current directory will shrink so that only matching entries are shown. a second table appears underneath to show results in other directories.
- german translation has been added.

    1: function applyFilter(thisdir) {
    2: 
    3:     var pattern = prepareSearchPattern();
    4:     var translations = jQuery.parseJSON(localStorage.getItem('CSTRtrans')).translations;
    5: 
    6:     updateDisplay(pattern, translations);
    7:     filterTableElements(pattern);
    8:     filterOtherElements(pattern, translations, thisdir);
    9: }
   10: 
   11: // called everytime the user makes an input into the search field
   12: function updateDisplay(pattern, translations) {
   13:     var header1 = document.getElementById('searchtitle');
   14: 
   15:     if (pattern.source == '(?:)'){
   16:         header1.style.display = 'none';
   17:     } else {
   18:         // remove escape symbol for better readability
   19:         header1.innerHTML = translations.results+' '+pattern.source.replace('\\','');
   20:         header1.style.display = '';
   21:     }
   22: }
   23: 
   24: // filters the contents table of the authoring space to only show matching resources in the current dir
   25: function filterTableElements(pattern) {
   26:     var list = document.getElementsByClassName('LC_data_table')[0].childNodes[1].children;
   27: 
   28:     // i=2 to skip searchtitle and header
   29:     for (var i = 2; i < list.length; i++){
   30:         // get filename: table column,     <span>,       <a>,       name
   31:         var resname = list[i].children[2].children[0].children[0].innerHTML;
   32:         var restitle;
   33: 
   34:         // check if resource has title and get it
   35:         var titleColumn = list[i].children[3].children;
   36: 
   37:         if (titleColumn.length > 2){
   38:             restitle = titleColumn[0].innerHTML;
   39:         } else {
   40:             restitle = '';
   41:         }
   42: 
   43:         // match in filename OR resource title OR if search string is empty
   44:         if ( pattern.test(resname) || pattern.test(restitle) || pattern.source == '' ){
   45:             list[i].style.display = '';     // show element
   46:         } else {
   47:             list[i].style.display = 'none'; // hide element
   48:         }
   49:     }
   50: }
   51: 
   52: // this is the search function for resources in other locations.
   53: // pattern - the search pattern given by the user
   54: // translations - loncapa generated translation object for the user interface
   55: // thisdir - dir the user is currently in, used to generate relativ links for found files
   56: function filterOtherElements (pattern, translations, thisdir) {
   57: 
   58:     var otherfiles = jQuery.parseJSON(sessionStorage.getItem('CSTRcache')).resources;
   59:     if (pattern.source == '(?:)'){
   60:         document.getElementById('otherplaces').style.display = 'none';
   61:         return;
   62:     }
   63: 
   64:     var hits = new Array();
   65:     for (var i = 0; i < otherfiles.length; i++){
   66:         if (otherfiles[i].title == '[untitled]'){
   67:             otherfiles[i].title = '';
   68:         }
   69: 
   70:         if ( pattern.test(otherfiles[i].name) || pattern.test(otherfiles[i].title) ){
   71:             hits.push(otherfiles[i]);
   72:         }
   73:     }
   74:     if (hits.length < 1){
   75:         document.getElementById('otherplaces').style.display = 'none';
   76:     } else {
   77:         document.getElementById('otherplaces').style.display = '';
   78:         var element = document.getElementsByName("otherplacescontent");
   79: 
   80:         // remove all old children
   81:         for (index = element.length - 1; index >= 0; index--){
   82:             element[index].parentNode.removeChild(element[index]);
   83:         }
   84: 
   85:         // add new children
   86:         for (var i = 0; i < hits.length; i ++){
   87:             document.getElementById('otherplacestable').parentNode.appendChild(renderRow(hits[i], i, translations, thisdir));
   88:         }
   89:     }
   90: }
   91: 
   92: // adds an row to the other places result table, used by filterOtherElements()
   93: function renderRow(element, i, translations, thisdir) {
   94:     var isdir = false;
   95:     var row = '';
   96: // icon
   97:     row += '<td>';
   98:     var extension = /\.(.+?)$/;
   99: 
  100:     if (element.name.match(extension)){
  101:         var allowed = ['avi','cab','doc','dvi','eps','exam','htm','html','jar','jpeg','jpg','library','mov','mpeg','mpg','page','pdf','png','ppt','problem','ps','qt','quiz','sequence','spreadsheet','survey','task','tex','text','tth','txt','wav','wmv','xls','xml','zip'];
  102:         var match = extension.exec(element.name)[1];
  103:         if (allowed.indexOf(match) > -1) {
  104:             // is supported file type
  105:             row += '<img src="/adm/lonIcons/'+match+'.gif" alt="" />';
  106:         } else {
  107:             // is some other file we dont have an icon for
  108:             row += '<img src="/adm/lonIcons/srvnull.gif" alt="" />';
  109:         }
  110:     } else {
  111:         // is a directory
  112:         isdir = true;
  113:         row += '<img src="/adm/lonIcons/navmap.folder.closed.gif" alt="" />';
  114:     }
  115: 
  116:     element.path = element.path.replace(/^\/home\/httpd\/html\//,'\/');
  117: 
  118: // directory
  119:     var location = element.path.replace(/\/priv\//,'');
  120:     if (location == ''){ location = '/'; }
  121:     row += '</td><td>';
  122:     if (isdir) {
  123:         row += '<a href="/priv/'+location+'" target="_parent"></a>';
  124:     } else {
  125:         row += '<a href="/priv/'+location+'" target="_parent">'+location.replace(/(.+?)\/(.+?)\//,'/')+'</a>';
  126:     }
  127:     row += '</td><td>';
  128: 
  129:     if (isdir) {
  130: 
  131:     // file link
  132:         row += '<span class="LC_filename"><a href="'+element.path+'/" target="_parent">'+element.name+'</a></span> <br />';
  133:         row += '</td><td></td>';
  134:     // status
  135:         row += '<td class="LC_browser_file_'+element.status+'">&nbsp;&nbsp;</td><td>'+translations.directory+'</td>';
  136:         row += '<td>'+element.cmtime+'</td></tr>';
  137:     } else {
  138:     
  139:     // file link
  140:         row += '<span class="LC_filename"><a href="'+element.path+element.name+'" target="_parent">'+element.name+'</a></span> <br />';
  141:     // editor
  142:         row += '(<a href="'+element.path+element.name+'?editmode=Edit&amp;problemmode=edit">'+translations.edit+'</a>)';
  143:     // xml editor
  144:         row += '(<a href="'+element.path+element.name+'?editmode=Edit&amp;problemmode=editxml">'+translations.editxml+'</a>)';
  145:         row += '</td><td>';
  146:     // edit metadata
  147:         row += '<a href="'+element.path+element.name+'.meta" target="cat">'+element.title+'</a><br />'
  148:         row += '<a href="'+element.path+element.name+'.meta">'+translations.editmeta+'</a>';
  149:         row += '</td>';
  150:     // status
  151:         row += '<td class="LC_browser_file_'+element.status+'">&nbsp;&nbsp;</td><td>'+translations[element.status]+'</td>';
  152:         row += '<td>'+element.cmtime+'</td></tr>';
  153:     }
  154: 
  155:     var result = document.createElement('tr');
  156:     result.innerHTML += row;
  157:     result.setAttribute('name', 'otherplacescontent');
  158: // set row style
  159:     if (i % 2 == 1){
  160:         result.setAttribute('class', 'LC_odd_row');
  161:     } else {
  162:         result.setAttribute('class', 'LC_even_row');
  163:     }
  164:     return result;
  165: }
  166: 
  167: // escapes the search pattern for on screen display
  168: function prepareSearchPattern() {
  169:     var searchstring = document.getElementById('quickfilter').value;
  170:     var regopt = document.getElementById('casesens').checked?'':'i';
  171: 
  172:     if (document.getElementById('regex').checked == false) {
  173:         searchstring = searchstring.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
  174:     } else {
  175:         // a single \ at the end would escape the closing / of the regex
  176:         searchstring = searchstring.replace(/\\$/, '\\\\');
  177:     }
  178:     return new RegExp(searchstring, regopt);
  179: }