docs/search.js

   1
   2 // setInterval(function() {
   3 //     Ext.get('styleCss').dom.href = "/css/style.css?" + Math.ceil(Math.random() * 10000);
   4 // }, 2000)
   5
   6 var searchResults = Ext.create('Ext.XTemplate',
   7     '<table class="searchResults">',
   8         '<thead>',
   9             '<tr>',
  10                 '<th></th>',
  11                 '<th>Result</th>',
  12                 '<th>Class</th>',
  13             '</tr>',
  14         '</thead>',
  15         '<tbody>',
  16             '<tpl for=".">',
  17                 '<tr>',
  18                     '<td><div class="icn icon-{iconCls}"></div></td>',
  19                     '<td class="result"><a href="#">{member}</td>',
  20                     '<td class="result"><a href="#">{cls}</td>',
  21                 '</tr>',
  22             '</tpl>',
  23         '</tbody>',
  24     '</table>'
  25 );
  26
  27
  28 /**
  29  * Search box
  30  */
  31 Ext.onReady(function() {
  32
  33     var searchStore = new Ext.data.Store({
  34         fields: [ 'memberType', 'cls', 'member' ],
  35
  36         proxy: {
  37             type: 'memory',
  38             reader: {
  39                 type: 'array'
  40             }
  41         },
  42
  43         listeners: {
  44             datachanged: function() {
  45                 panel.render('search-box');
  46             }
  47         }
  48     });
  49
  50     var panel = Ext.create('Ext.view.View', {
  51         store: searchStore,
  52         tpl: new Ext.XTemplate(
  53             '<tpl for=".">',
  54                 '<div class="item {memberType}">',
  55                     '<div class="title">{member}</div>',
  56                     '<div class="class">{cls}</div>',
  57                 '</div>',
  58             '</tpl>'
  59         ),
  60         id: 'quick-search',
  61         overItemCls:'x-view-over',
  62         trackOver: true,
  63         itemSelector:'div.item',
  64         singleSelect: true,
  65
  66         handleClick: function(curItem) {
  67             curItem = curItem || panel.getSelectionModel().getLastSelected();
  68             var classId = curItem.data.cls;
  69
  70             if (req.standAloneMode) {
  71                         if (window.location.href.match(/api/)) {
  72                                 window.location = classId + '.html';
  73                         } else {
  74                                 window.location = 'api/' + classId + '.html';
  75                         }
  76                         return;
  77                 }
  78
  79             var cls = classId;
  80             if (curItem.data.memberType != 'cls') {
  81                 cls += '#' + curItem.data.memberType + '-' + curItem.data.member;
  82             }
  83             panel.hide();
  84             getDocClass(cls);
  85         },
  86         listeners: {
  87             itemclick: function(panel, item) {
  88                 this.handleClick(item);
  89             }
  90         }
  91     });
  92
  93     Ext.get('search-field').on('blur', function(ev, el) {
  94         setTimeout(function(){
  95             panel.hide();
  96         }, 100);
  97     });
  98     Ext.get('search-field').on('focus', function(ev, el) {
  99         panel.show();
 100     });
 101
 102     var submitForm = false;
 103
 104     /**
 105      * When a key is pressed in the search field, search for classes, methods, properties, configs, etc
 106      */
 107     Ext.get('search-field').on('keyup', function(ev, el) {
 108
 109         // Esc key
 110         if (ev.keyCode == 27 || el.value == '') {
 111             panel.hide();
 112             return;
 113         }
 114         else {
 115             panel.show();
 116         }
 117
 118         var curItem = panel.store.indexOf(panel.getSelectionModel().getLastSelected()), //panel.getSelectedRecords()[0],
 119             lastItem = panel.store.data.length - 1,
 120             selModel = panel.getSelectionModel();
 121
 122         // Up arrow
 123         if (ev.keyCode == 38) {
 124             if (curItem == undefined) {
 125                 selModel.select(0);
 126             } else {
 127                 selModel.select(curItem == 0 ? lastItem : (curItem - 1));
 128             }
 129         }
 130         // Down arrow
 131         else if (ev.keyCode == 40) {
 132             if (curItem == undefined) {
 133                 selModel.select(0);
 134             } else {
 135                 selModel.select(curItem == lastItem ? 0 : curItem + 1);
 136             }
 137         }
 138         // Enter key
 139         else if (ev.keyCode == 13) {
 140             if(curItem > 0) {
 141                 ev.preventDefault();
 142                 panel.handleClick();
 143             } else {
 144                 var html = searchResults.apply(filterClasses(Ext.get(el).getValue(), 100))
 145                 showContent('Search', html)
 146             }
 147         }
 148         else {
 149             searchExt(Ext.get(el).getValue());
 150         }
 151     });
 152
 153     Ext.get(Ext.get('search-field').dom.parentNode).on('submit', function(ev, el) {
 154         if (!submitForm) {
 155             ev.preventDefault();
 156         }
 157     });
 158
 159     var classSearch;
 160
 161     if (req.standAloneMode) {
 162         if (window.location.href.match(/api/)) {
 163                         req.baseDocURL = '../';
 164         } else if (window.location.href.match(/guide/)){
 165                         req.baseDocURL = '../';
 166                 }
 167     }
 168
 169     Ext.data.JsonP.request({
 170         callbackKey: 'docsCallback',
 171         url: req.baseDocURL + '/class_search.json',
 172         success: function(response) {
 173             classSearch = response;
 174         }
 175     });
 176
 177     var searchExt = function(term) {
 178         searchStore.loadData(filterClasses(term), false);
 179     }
 180
 181         var filterClasses = function(term, maxResults) {
 182
 183             maxResults = maxResults || 10;
 184
 185             var result = [];
 186             var termExpr = new RegExp(term, "i");
 187             var members = ['method', 'config', 'property', 'event'];
 188
 189             for (var cls in classSearch) {
 190                 if (cls.match(termExpr)) {
 191                 result.push({cls: cls, memberType: 'cls', member: cls});
 192                 if (result.length >= maxResults) return result;
 193                 }
 194             }
 195             for (var cls in classSearch) {
 196                 for (var m=0; m< 4; m++) {
 197                     var member = members[m];
 198                 for (var i=0; i< classSearch[cls][member].length; i++) {
 199                     var curMember = classSearch[cls][member][i];
 200                     if (curMember && curMember.match(termExpr)) {
 201
 202                         var iconCls;
 203                         if (member == 'cls') iconCls = 'class';
 204                         if (member == 'properties') iconCls = 'property';
 205                         if (member == 'methods') iconCls = 'method';
 206                         if (member == 'cfgs') iconCls = 'config';
 207                         if (member == 'events') iconCls = 'event';
 208
 209                         result.push({ cls: cls, memberType: member, member: curMember, iconCls: iconCls });
 210                         if (result.length >= maxResults) return result;
 211                     }
 212                 }
 213                 }
 214             }
 215
 216             return result;
 217         }
 218 });