js/navigation.js

   1 /* vim: set expandtab sw=4 ts=4 sts=4: */
   2 /**
   3  * function used in or for navigation panel
   4  *
   5  * @package phpMyAdmin-Navigation
   6  */
   7
   8 /**
   9  * updates the tree state in sessionStorage
  10  *
  11  * @returns void
  12  */
  13 function navTreeStateUpdate () {
  14     // update if session storage is supported
  15     if (isStorageSupported('sessionStorage')) {
  16         var storage = window.sessionStorage;
  17         // try catch necessary here to detect whether
  18         // content to be stored exceeds storage capacity
  19         try {
  20             storage.setItem('navTreePaths', JSON.stringify(traverseNavigationForPaths()));
  21             storage.setItem('server', PMA_commonParams.get('server'));
  22             storage.setItem('token', PMA_commonParams.get('token'));
  23         } catch (error) {
  24             // storage capacity exceeded & old navigation tree
  25             // state is no more valid, so remove it
  26             storage.removeItem('navTreePaths');
  27             storage.removeItem('server');
  28             storage.removeItem('token');
  29         }
  30     }
  31 }
  32
  33
  34 /**
  35  * updates the filter state in sessionStorage
  36  *
  37  * @returns void
  38  */
  39 function navFilterStateUpdate (filterName, filterValue) {
  40     if (isStorageSupported('sessionStorage')) {
  41         var storage = window.sessionStorage;
  42         try {
  43             var currentFilter = $.extend({}, JSON.parse(storage.getItem('navTreeSearchFilters')));
  44             var filter = {};
  45             filter[filterName] = filterValue;
  46             currentFilter = $.extend(currentFilter, filter);
  47             storage.setItem('navTreeSearchFilters', JSON.stringify(currentFilter));
  48         } catch (error) {
  49             storage.removeItem('navTreeSearchFilters');
  50         }
  51     }
  52 }
  53
  54
  55 /**
  56  * restores the filter state on navigation reload
  57  *
  58  * @returns void
  59  */
  60 function navFilterStateRestore () {
  61     if (isStorageSupported('sessionStorage')
  62         && typeof window.sessionStorage.navTreeSearchFilters !== 'undefined'
  63     ) {
  64         var searchClauses = JSON.parse(window.sessionStorage.navTreeSearchFilters);
  65         if (Object.keys(searchClauses).length < 1) {
  66             return;
  67         }
  68         // restore database filter if present and not empty
  69         if (searchClauses.hasOwnProperty('dbFilter')
  70             && searchClauses.dbFilter.length
  71         ) {
  72             $obj = $('#pma_navigation_tree');
  73             if (! $obj.data('fastFilter')) {
  74                 $obj.data(
  75                     'fastFilter',
  76                     new PMA_fastFilter.filter($obj, '')
  77                 );
  78             }
  79             $obj.find('li.fast_filter.db_fast_filter input.searchClause')
  80                 .val(searchClauses.dbFilter)
  81                 .trigger('keyup');
  82         }
  83         // find all table filters present in the tree
  84         $tableFilters = $('#pma_navigation_tree li.database')
  85             .children('div.list_container')
  86             .find('li.fast_filter input.searchClause');
  87         // restore table filters
  88         $tableFilters.each(function () {
  89             $obj = $(this).closest('div.list_container');
  90             // aPath associated with this filter
  91             var filterName = $(this).siblings('input[name=aPath]').val();
  92             // if this table's filter has a state stored in storage
  93             if (searchClauses.hasOwnProperty(filterName)
  94                 && searchClauses[filterName].length
  95             ) {
  96                 // clear state if item is not visible,
  97                 // happens when table filter becomes invisible
  98                 // as db filter has already been applied
  99                 if (! $obj.is(':visible')) {
 100                     navFilterStateUpdate(filterName, '');
 101                     return true;
 102                 }
 103                 if (! $obj.data('fastFilter')) {
 104                     $obj.data(
 105                         'fastFilter',
 106                         new PMA_fastFilter.filter($obj, '')
 107                     );
 108                 }
 109                 $(this).val(searchClauses[filterName])
 110                     .trigger('keyup');
 111             }
 112         });
 113     }
 114 }
 115
 116 /**
 117  * Loads child items of a node and executes a given callback
 118  *
 119  * @param isNode
 120  * @param $expandElem expander
 121  * @param callback    callback function
 122  *
 123  * @returns void
 124  */
 125 function loadChildNodes (isNode, $expandElem, callback) {
 126     var $destination = null;
 127     var params = null;
 128
 129     if (isNode) {
 130         if (!$expandElem.hasClass('expander')) {
 131             return;
 132         }
 133         $destination = $expandElem.closest('li');
 134         params = {
 135             aPath: $expandElem.find('span.aPath').text(),
 136             vPath: $expandElem.find('span.vPath').text(),
 137             pos: $expandElem.find('span.pos').text(),
 138             pos2_name: $expandElem.find('span.pos2_name').text(),
 139             pos2_value: $expandElem.find('span.pos2_value').text(),
 140             searchClause: '',
 141             searchClause2: ''
 142         };
 143         if ($expandElem.closest('ul').hasClass('search_results')) {
 144             params.searchClause = PMA_fastFilter.getSearchClause();
 145             params.searchClause2 = PMA_fastFilter.getSearchClause2($expandElem);
 146         }
 147     } else {
 148         $destination = $('#pma_navigation_tree_content');
 149         params = {
 150             aPath: $expandElem.attr('aPath'),
 151             vPath: $expandElem.attr('vPath'),
 152             pos: $expandElem.attr('pos'),
 153             pos2_name: '',
 154             pos2_value: '',
 155             searchClause: '',
 156             searchClause2: ''
 157         };
 158     }
 159
 160     var url = $('#pma_navigation').find('a.navigation_url').attr('href');
 161     $.get(url, params, function (data) {
 162         if (typeof data !== 'undefined' && data.success === true) {
 163             $destination.find('div.list_container').remove(); // FIXME: Hack, there shouldn't be a list container there
 164             if (isNode) {
 165                 $destination.append(data.message);
 166                 $expandElem.addClass('loaded');
 167             } else {
 168                 $destination.html(data.message);
 169                 $destination.children()
 170                     .first()
 171                     .css({
 172                         border: '0px',
 173                         margin: '0em',
 174                         padding : '0em'
 175                     })
 176                     .slideDown('slow');
 177             }
 178             if (data._errors) {
 179                 var $errors = $(data._errors);
 180                 if ($errors.children().length > 0) {
 181                     $('#pma_errors').replaceWith(data._errors);
 182                 }
 183             }
 184             if (callback && typeof callback === 'function') {
 185                 callback(data);
 186             }
 187         } else if (data.redirect_flag === '1') {
 188             if (window.location.href.indexOf('?') === -1) {
 189                 window.location.href += '?session_expired=1';
 190             } else {
 191                 window.location.href += '&session_expired=1';
 192             }
 193             window.location.reload();
 194         } else {
 195             var $throbber = $expandElem.find('img.throbber');
 196             $throbber.hide();
 197             var $icon = $expandElem.find('img.ic_b_plus');
 198             $icon.show();
 199             PMA_ajaxShowMessage(data.error, false);
 200         }
 201     });
 202 }
 203
 204 /**
 205  * Collapses a node in navigation tree.
 206  *
 207  * @param $expandElem expander
 208  *
 209  * @returns void
 210  */
 211 function collapseTreeNode ($expandElem) {
 212     var $children = $expandElem.closest('li').children('div.list_container');
 213     var $icon = $expandElem.find('img');
 214     if ($expandElem.hasClass('loaded')) {
 215         if ($icon.is('.ic_b_minus')) {
 216             $icon.removeClass('ic_b_minus').addClass('ic_b_plus');
 217             $children.slideUp('fast');
 218         }
 219     }
 220     $expandElem.blur();
 221     $children.promise().done(navTreeStateUpdate);
 222 }
 223
 224 /**
 225  * Traverse the navigation tree backwards to generate all the actual
 226  * and virtual paths, as well as the positions in the pagination at
 227  * various levels, if necessary.
 228  *
 229  * @return Object
 230  */
 231 function traverseNavigationForPaths () {
 232     var params = {
 233         pos: $('#pma_navigation_tree').find('div.dbselector select').val()
 234     };
 235     if ($('#navi_db_select').length) {
 236         return params;
 237     }
 238     var count = 0;
 239     $('#pma_navigation_tree').find('a.expander:visible').each(function () {
 240         if ($(this).find('img').is('.ic_b_minus') &&
 241             $(this).closest('li').find('div.list_container .ic_b_minus').length === 0
 242         ) {
 243             params['n' + count + '_aPath'] = $(this).find('span.aPath').text();
 244             params['n' + count + '_vPath'] = $(this).find('span.vPath').text();
 245
 246             var pos2_name = $(this).find('span.pos2_name').text();
 247             if (! pos2_name) {
 248                 pos2_name = $(this)
 249                     .parent()
 250                     .parent()
 251                     .find('span.pos2_name:last')
 252                     .text();
 253             }
 254             var pos2_value = $(this).find('span.pos2_value').text();
 255             if (! pos2_value) {
 256                 pos2_value = $(this)
 257                     .parent()
 258                     .parent()
 259                     .find('span.pos2_value:last')
 260                     .text();
 261             }
 262
 263             params['n' + count + '_pos2_name'] = pos2_name;
 264             params['n' + count + '_pos2_value'] = pos2_value;
 265
 266             params['n' + count + '_pos3_name'] = $(this).find('span.pos3_name').text();
 267             params['n' + count + '_pos3_value'] = $(this).find('span.pos3_value').text();
 268             count++;
 269         }
 270     });
 271     return params;
 272 }
 273
 274 /**
 275  * Executed on page load
 276  */
 277 $(function () {
 278     if (! $('#pma_navigation').length) {
 279         // Don't bother running any code if the navigation is not even on the page
 280         return;
 281     }
 282
 283     // Do not let the page reload on submitting the fast filter
 284     $(document).on('submit', '.fast_filter', function (event) {
 285         event.preventDefault();
 286     });
 287
 288     // Fire up the resize handlers
 289     new ResizeHandler();
 290
 291     /**
 292      * opens/closes (hides/shows) tree elements
 293      * loads data via ajax
 294      */
 295     $(document).on('click', '#pma_navigation_tree a.expander', function (event) {
 296         event.preventDefault();
 297         event.stopImmediatePropagation();
 298         var $icon = $(this).find('img');
 299         if ($icon.is('.ic_b_plus')) {
 300             expandTreeNode($(this));
 301         } else {
 302             collapseTreeNode($(this));
 303         }
 304     });
 305
 306     /**
 307      * Register event handler for click on the reload
 308      * navigation icon at the top of the panel
 309      */
 310     $(document).on('click', '#pma_navigation_reload', function (event) {
 311         event.preventDefault();
 312         // reload icon object
 313         var $icon = $(this).find('img');
 314         // source of the hidden throbber icon
 315         var icon_throbber_src = $('#pma_navigation').find('.throbber').attr('src');
 316         // source of the reload icon
 317         var icon_reload_src = $icon.attr('src');
 318         // replace the source of the reload icon with the one for throbber
 319         $icon.attr('src', icon_throbber_src);
 320         PMA_reloadNavigation();
 321         // after one second, put back the reload icon
 322         setTimeout(function () {
 323             $icon.attr('src', icon_reload_src);
 324         }, 1000);
 325     });
 326
 327     $(document).on('change', '#navi_db_select',  function (event) {
 328         if (! $(this).val()) {
 329             PMA_commonParams.set('db', '');
 330             PMA_reloadNavigation();
 331         }
 332         $(this).closest('form').trigger('submit');
 333     });
 334
 335     /**
 336      * Register event handler for click on the collapse all
 337      * navigation icon at the top of the navigation tree
 338      */
 339     $(document).on('click', '#pma_navigation_collapse', function (event) {
 340         event.preventDefault();
 341         $('#pma_navigation_tree').find('a.expander').each(function () {
 342             var $icon = $(this).find('img');
 343             if ($icon.is('.ic_b_minus')) {
 344                 $(this).click();
 345             }
 346         });
 347     });
 348
 349     /**
 350      * Register event handler to toggle
 351      * the 'link with main panel' icon on mouseenter.
 352      */
 353     $(document).on('mouseenter', '#pma_navigation_sync', function (event) {
 354         event.preventDefault();
 355         var synced = $('#pma_navigation_tree').hasClass('synced');
 356         var $img = $('#pma_navigation_sync').children('img');
 357         if (synced) {
 358             $img.removeClass('ic_s_link').addClass('ic_s_unlink');
 359         } else {
 360             $img.removeClass('ic_s_unlink').addClass('ic_s_link');
 361         }
 362     });
 363
 364     /**
 365      * Register event handler to toggle
 366      * the 'link with main panel' icon on mouseout.
 367      */
 368     $(document).on('mouseout', '#pma_navigation_sync', function (event) {
 369         event.preventDefault();
 370         var synced = $('#pma_navigation_tree').hasClass('synced');
 371         var $img = $('#pma_navigation_sync').children('img');
 372         if (synced) {
 373             $img.removeClass('ic_s_unlink').addClass('ic_s_link');
 374         } else {
 375             $img.removeClass('ic_s_link').addClass('ic_s_unlink');
 376         }
 377     });
 378
 379     /**
 380      * Register event handler to toggle
 381      * the linking with main panel behavior
 382      */
 383     $(document).on('click', '#pma_navigation_sync', function (event) {
 384         event.preventDefault();
 385         var synced = $('#pma_navigation_tree').hasClass('synced');
 386         var $img = $('#pma_navigation_sync').children('img');
 387         if (synced) {
 388             $img
 389                 .removeClass('ic_s_unlink')
 390                 .addClass('ic_s_link')
 391                 .attr('alt', PMA_messages.linkWithMain)
 392                 .attr('title', PMA_messages.linkWithMain);
 393             $('#pma_navigation_tree')
 394                 .removeClass('synced')
 395                 .find('li.selected')
 396                 .removeClass('selected');
 397         } else {
 398             $img
 399                 .removeClass('ic_s_link')
 400                 .addClass('ic_s_unlink')
 401                 .attr('alt', PMA_messages.unlinkWithMain)
 402                 .attr('title', PMA_messages.unlinkWithMain);
 403             $('#pma_navigation_tree').addClass('synced');
 404             PMA_showCurrentNavigation();
 405         }
 406     });
 407
 408     /**
 409      * Bind all "fast filter" events
 410      */
 411     $(document).on('click', '#pma_navigation_tree li.fast_filter span', PMA_fastFilter.events.clear);
 412     $(document).on('focus', '#pma_navigation_tree li.fast_filter input.searchClause', PMA_fastFilter.events.focus);
 413     $(document).on('blur', '#pma_navigation_tree li.fast_filter input.searchClause', PMA_fastFilter.events.blur);
 414     $(document).on('keyup', '#pma_navigation_tree li.fast_filter input.searchClause', PMA_fastFilter.events.keyup);
 415
 416     /**
 417      * Ajax handler for pagination
 418      */
 419     $(document).on('click', '#pma_navigation_tree div.pageselector a.ajax', function (event) {
 420         event.preventDefault();
 421         PMA_navigationTreePagination($(this));
 422     });
 423
 424     /**
 425      * Node highlighting
 426      */
 427     $(document).on(
 428         'mouseover',
 429         '#pma_navigation_tree.highlight li:not(.fast_filter)',
 430         function () {
 431             if ($('li:visible', this).length === 0) {
 432                 $(this).addClass('activePointer');
 433             }
 434         }
 435     );
 436     $(document).on(
 437         'mouseout',
 438         '#pma_navigation_tree.highlight li:not(.fast_filter)',
 439         function () {
 440             $(this).removeClass('activePointer');
 441         }
 442     );
 443
 444     /** Create a Routine, Trigger or Event */
 445     $(document).on('click', 'li.new_procedure a.ajax, li.new_function a.ajax', function (event) {
 446         event.preventDefault();
 447         var dialog = new RTE.object('routine');
 448         dialog.editorDialog(1, $(this));
 449     });
 450     $(document).on('click', 'li.new_trigger a.ajax', function (event) {
 451         event.preventDefault();
 452         var dialog = new RTE.object('trigger');
 453         dialog.editorDialog(1, $(this));
 454     });
 455     $(document).on('click', 'li.new_event a.ajax', function (event) {
 456         event.preventDefault();
 457         var dialog = new RTE.object('event');
 458         dialog.editorDialog(1, $(this));
 459     });
 460
 461     /** Edit Routines, Triggers or Events */
 462     $(document).on('click', 'li.procedure > a.ajax, li.function > a.ajax', function (event) {
 463         event.preventDefault();
 464         var dialog = new RTE.object('routine');
 465         dialog.editorDialog(0, $(this));
 466     });
 467     $(document).on('click', 'li.trigger > a.ajax', function (event) {
 468         event.preventDefault();
 469         var dialog = new RTE.object('trigger');
 470         dialog.editorDialog(0, $(this));
 471     });
 472     $(document).on('click', 'li.event > a.ajax', function (event) {
 473         event.preventDefault();
 474         var dialog = new RTE.object('event');
 475         dialog.editorDialog(0, $(this));
 476     });
 477
 478     /** Execute Routines */
 479     $(document).on('click', 'li.procedure div a.ajax img,' +
 480         ' li.function div a.ajax img', function (event) {
 481         event.preventDefault();
 482         var dialog = new RTE.object('routine');
 483         dialog.executeDialog($(this).parent());
 484     });
 485     /** Export Triggers and Events */
 486     $(document).on('click', 'li.trigger div:eq(1) a.ajax img,' +
 487         ' li.event div:eq(1) a.ajax img', function (event) {
 488         event.preventDefault();
 489         var dialog = new RTE.object();
 490         dialog.exportDialog($(this).parent());
 491     });
 492
 493     /** New index */
 494     $(document).on('click', '#pma_navigation_tree li.new_index a.ajax', function (event) {
 495         event.preventDefault();
 496         var url = $(this).attr('href').substr(
 497             $(this).attr('href').indexOf('?') + 1
 498         ) + '&ajax_request=true';
 499         var title = PMA_messages.strAddIndex;
 500         indexEditorDialog(url, title);
 501     });
 502
 503     /** Edit index */
 504     $(document).on('click', 'li.index a.ajax', function (event) {
 505         event.preventDefault();
 506         var url = $(this).attr('href').substr(
 507             $(this).attr('href').indexOf('?') + 1
 508         ) + '&ajax_request=true';
 509         var title = PMA_messages.strEditIndex;
 510         indexEditorDialog(url, title);
 511     });
 512
 513     /** New view */
 514     $(document).on('click', 'li.new_view a.ajax', function (event) {
 515         event.preventDefault();
 516         PMA_createViewDialog($(this));
 517     });
 518
 519     /** Hide navigation tree item */
 520     $(document).on('click', 'a.hideNavItem.ajax', function (event) {
 521         event.preventDefault();
 522         $.ajax({
 523             type: 'POST',
 524             data: {
 525                 server: PMA_commonParams.get('server'),
 526             },
 527             url: $(this).attr('href') + '&ajax_request=true',
 528             success: function (data) {
 529                 if (typeof data !== 'undefined' && data.success === true) {
 530                     PMA_reloadNavigation();
 531                 } else {
 532                     PMA_ajaxShowMessage(data.error);
 533                 }
 534             }
 535         });
 536     });
 537
 538     /** Display a dialog to choose hidden navigation items to show */
 539     $(document).on('click', 'a.showUnhide.ajax', function (event) {
 540         event.preventDefault();
 541         var $msg = PMA_ajaxShowMessage();
 542         $.get($(this).attr('href') + '&ajax_request=1', function (data) {
 543             if (typeof data !== 'undefined' && data.success === true) {
 544                 PMA_ajaxRemoveMessage($msg);
 545                 var buttonOptions = {};
 546                 buttonOptions[PMA_messages.strClose] = function () {
 547                     $(this).dialog('close');
 548                 };
 549                 $('<div/>')
 550                     .attr('id', 'unhideNavItemDialog')
 551                     .append(data.message)
 552                     .dialog({
 553                         width: 400,
 554                         minWidth: 200,
 555                         modal: true,
 556                         buttons: buttonOptions,
 557                         title: PMA_messages.strUnhideNavItem,
 558                         close: function () {
 559                             $(this).remove();
 560                         }
 561                     });
 562             } else {
 563                 PMA_ajaxShowMessage(data.error);
 564             }
 565         });
 566     });
 567
 568     /** Show a hidden navigation tree item */
 569     $(document).on('click', 'a.unhideNavItem.ajax', function (event) {
 570         event.preventDefault();
 571         var $tr = $(this).parents('tr');
 572         var $msg = PMA_ajaxShowMessage();
 573         $.ajax({
 574             type: 'POST',
 575             data: {
 576                 server: PMA_commonParams.get('server'),
 577             },
 578             url: $(this).attr('href') + '&ajax_request=true',
 579             success: function (data) {
 580                 PMA_ajaxRemoveMessage($msg);
 581                 if (typeof data !== 'undefined' && data.success === true) {
 582                     $tr.remove();
 583                     PMA_reloadNavigation();
 584                 } else {
 585                     PMA_ajaxShowMessage(data.error);
 586                 }
 587             }
 588         });
 589     });
 590
 591     // Add/Remove favorite table using Ajax.
 592     $(document).on('click', '.favorite_table_anchor', function (event) {
 593         event.preventDefault();
 594         $self = $(this);
 595         var anchor_id = $self.attr('id');
 596         if ($self.data('favtargetn') !== null) {
 597             if ($('a[data-favtargets="' + $self.data('favtargetn') + '"]').length > 0) {
 598                 $('a[data-favtargets="' + $self.data('favtargetn') + '"]').trigger('click');
 599                 return;
 600             }
 601         }
 602
 603         $.ajax({
 604             url: $self.attr('href'),
 605             cache: false,
 606             type: 'POST',
 607             data: {
 608                 favorite_tables: (isStorageSupported('localStorage') && typeof window.localStorage.favorite_tables !== 'undefined')
 609                     ? window.localStorage.favorite_tables
 610                     : '',
 611                 server: PMA_commonParams.get('server'),
 612             },
 613             success: function (data) {
 614                 if (data.changes) {
 615                     $('#pma_favorite_list').html(data.list);
 616                     $('#' + anchor_id).parent().html(data.anchor);
 617                     PMA_tooltip(
 618                         $('#' + anchor_id),
 619                         'a',
 620                         $('#' + anchor_id).attr('title')
 621                     );
 622                     // Update localStorage.
 623                     if (isStorageSupported('localStorage')) {
 624                         window.localStorage.favorite_tables = data.favorite_tables;
 625                     }
 626                 } else {
 627                     PMA_ajaxShowMessage(data.message);
 628                 }
 629             }
 630         });
 631     });
 632     // Check if session storage is supported
 633     if (isStorageSupported('sessionStorage')) {
 634         var storage = window.sessionStorage;
 635         // remove tree from storage if Navi_panel config form is submitted
 636         $(document).on('submit', 'form.config-form', function (event) {
 637             storage.removeItem('navTreePaths');
 638         });
 639         // Initialize if no previous state is defined
 640         if ($('#pma_navigation_tree_content').length &&
 641             typeof storage.navTreePaths === 'undefined'
 642         ) {
 643             PMA_reloadNavigation();
 644         } else if (PMA_commonParams.get('server') === storage.server &&
 645             PMA_commonParams.get('token') === storage.token
 646         ) {
 647             // Reload the tree to the state before page refresh
 648             PMA_reloadNavigation(navFilterStateRestore, JSON.parse(storage.navTreePaths));
 649         } else {
 650             // If the user is different
 651             navTreeStateUpdate();
 652         }
 653     }
 654 });
 655
 656 /**
 657  * Expands a node in navigation tree.
 658  *
 659  * @param $expandElem expander
 660  * @param callback    callback function
 661  *
 662  * @returns void
 663  */
 664 function expandTreeNode ($expandElem, callback) {
 665     var $children = $expandElem.closest('li').children('div.list_container');
 666     var $icon = $expandElem.find('img');
 667     if ($expandElem.hasClass('loaded')) {
 668         if ($icon.is('.ic_b_plus')) {
 669             $icon.removeClass('ic_b_plus').addClass('ic_b_minus');
 670             $children.slideDown('fast');
 671         }
 672         if (callback && typeof callback === 'function') {
 673             callback.call();
 674         }
 675         $children.promise().done(navTreeStateUpdate);
 676     } else {
 677         var $throbber = $('#pma_navigation').find('.throbber')
 678             .first()
 679             .clone()
 680             .css({ visibility: 'visible', display: 'block' })
 681             .click(false);
 682         $icon.hide();
 683         $throbber.insertBefore($icon);
 684
 685         loadChildNodes(true, $expandElem, function (data) {
 686             if (typeof data !== 'undefined' && data.success === true) {
 687                 var $destination = $expandElem.closest('li');
 688                 $icon.removeClass('ic_b_plus').addClass('ic_b_minus');
 689                 $children = $destination.children('div.list_container');
 690                 $children.slideDown('fast');
 691                 if ($destination.find('ul > li').length === 1) {
 692                     $destination.find('ul > li')
 693                         .find('a.expander.container')
 694                         .click();
 695                 }
 696                 if (callback && typeof callback === 'function') {
 697                     callback.call();
 698                 }
 699                 PMA_showFullName($destination);
 700             } else {
 701                 PMA_ajaxShowMessage(data.error, false);
 702             }
 703             $icon.show();
 704             $throbber.remove();
 705             $children.promise().done(navTreeStateUpdate);
 706         });
 707     }
 708     $expandElem.blur();
 709 }
 710
 711 /**
 712  * Auto-scrolls the newly chosen database
 713  *
 714  * @param  object   $element    The element to set to view
 715  * @param  boolean  $forceToTop Whether to force scroll to top
 716  *
 717  */
 718 function scrollToView ($element, $forceToTop) {
 719     navFilterStateRestore();
 720     var $container = $('#pma_navigation_tree_content');
 721     var elemTop = $element.offset().top - $container.offset().top;
 722     var textHeight = 20;
 723     var scrollPadding = 20; // extra padding from top of bottom when scrolling to view
 724     if (elemTop < 0 || $forceToTop) {
 725         $container.stop().animate({
 726             scrollTop: elemTop + $container.scrollTop() - scrollPadding
 727         });
 728     } else if (elemTop + textHeight > $container.height()) {
 729         $container.stop().animate({
 730             scrollTop: elemTop + textHeight - $container.height() + $container.scrollTop() + scrollPadding
 731         });
 732     }
 733 }
 734
 735 /**
 736  * Expand the navigation and highlight the current database or table/view
 737  *
 738  * @returns void
 739  */
 740 function PMA_showCurrentNavigation () {
 741     var db = PMA_commonParams.get('db');
 742     var table = PMA_commonParams.get('table');
 743     $('#pma_navigation_tree')
 744         .find('li.selected')
 745         .removeClass('selected');
 746     if (db) {
 747         var $dbItem = findLoadedItem(
 748             $('#pma_navigation_tree').find('> div'), db, 'database', !table
 749         );
 750         if ($('#navi_db_select').length &&
 751             $('option:selected', $('#navi_db_select')).length
 752         ) {
 753             if (! PMA_selectCurrentDb()) {
 754                 return;
 755             }
 756             // If loaded database in navigation is not same as current one
 757             if ($('#pma_navigation_tree_content').find('span.loaded_db:first').text()
 758                 !== $('#navi_db_select').val()
 759             ) {
 760                 loadChildNodes(false, $('option:selected', $('#navi_db_select')), function (data) {
 761                     handleTableOrDb(table, $('#pma_navigation_tree_content'));
 762                     var $children = $('#pma_navigation_tree_content').children('div.list_container');
 763                     $children.promise().done(navTreeStateUpdate);
 764                 });
 765             } else {
 766                 handleTableOrDb(table, $('#pma_navigation_tree_content'));
 767             }
 768         } else if ($dbItem) {
 769             var $expander = $dbItem.children('div:first').children('a.expander');
 770             // if not loaded or loaded but collapsed
 771             if (! $expander.hasClass('loaded') ||
 772                 $expander.find('img').is('.ic_b_plus')
 773             ) {
 774                 expandTreeNode($expander, function () {
 775                     handleTableOrDb(table, $dbItem);
 776                 });
 777             } else {
 778                 handleTableOrDb(table, $dbItem);
 779             }
 780         }
 781     } else if ($('#navi_db_select').length && $('#navi_db_select').val()) {
 782         $('#navi_db_select').val('').hide().trigger('change');
 783     }
 784     PMA_showFullName($('#pma_navigation_tree'));
 785
 786     function handleTableOrDb (table, $dbItem) {
 787         if (table) {
 788             loadAndHighlightTableOrView($dbItem, table);
 789         } else {
 790             var $container = $dbItem.children('div.list_container');
 791             var $tableContainer = $container.children('ul').children('li.tableContainer');
 792             if ($tableContainer.length > 0) {
 793                 var $expander = $tableContainer.children('div:first').children('a.expander');
 794                 $tableContainer.addClass('selected');
 795                 expandTreeNode($expander, function () {
 796                     scrollToView($dbItem, true);
 797                 });
 798             } else {
 799                 scrollToView($dbItem, true);
 800             }
 801         }
 802     }
 803
 804     function findLoadedItem ($container, name, clazz, doSelect) {
 805         var ret = false;
 806         $container.children('ul').children('li').each(function () {
 807             var $li = $(this);
 808             // this is a navigation group, recurse
 809             if ($li.is('.navGroup')) {
 810                 var $container = $li.children('div.list_container');
 811                 var $childRet = findLoadedItem(
 812                     $container, name, clazz, doSelect
 813                 );
 814                 if ($childRet) {
 815                     ret = $childRet;
 816                     return false;
 817                 }
 818             } else { // this is a real navigation item
 819                 // name and class matches
 820                 if (((clazz && $li.is('.' + clazz)) || ! clazz) &&
 821                         $li.children('a').text() === name) {
 822                     if (doSelect) {
 823                         $li.addClass('selected');
 824                     }
 825                     // taverse up and expand and parent navigation groups
 826                     $li.parents('.navGroup').each(function () {
 827                         var $cont = $(this).children('div.list_container');
 828                         if (! $cont.is(':visible')) {
 829                             $(this)
 830                                 .children('div:first')
 831                                 .children('a.expander')
 832                                 .click();
 833                         }
 834                     });
 835                     ret = $li;
 836                     return false;
 837                 }
 838             }
 839         });
 840         return ret;
 841     }
 842
 843     function loadAndHighlightTableOrView ($dbItem, itemName) {
 844         var $container = $dbItem.children('div.list_container');
 845         var $expander;
 846         var $whichItem = isItemInContainer($container, itemName, 'li.table, li.view');
 847         // If item already there in some container
 848         if ($whichItem) {
 849             // get the relevant container while may also be a subcontainer
 850             var $relatedContainer = $whichItem.closest('li.subContainer').length
 851                 ? $whichItem.closest('li.subContainer')
 852                 : $dbItem;
 853             $whichItem = findLoadedItem(
 854                 $relatedContainer.children('div.list_container'),
 855                 itemName, null, true
 856             );
 857             // Show directly
 858             showTableOrView($whichItem, $relatedContainer.children('div:first').children('a.expander'));
 859         // else if item not there, try loading once
 860         } else {
 861             var $sub_containers = $dbItem.find('.subContainer');
 862             // If there are subContainers i.e. tableContainer or viewContainer
 863             if ($sub_containers.length > 0) {
 864                 var $containers = [];
 865                 $sub_containers.each(function (index) {
 866                     $containers[index] = $(this);
 867                     $expander = $containers[index]
 868                         .children('div:first')
 869                         .children('a.expander');
 870                     if (! $expander.hasClass('loaded')) {
 871                         loadAndShowTableOrView($expander, $containers[index], itemName);
 872                     }
 873                 });
 874             // else if no subContainers
 875             } else {
 876                 $expander = $dbItem
 877                     .children('div:first')
 878                     .children('a.expander');
 879                 if (! $expander.hasClass('loaded')) {
 880                     loadAndShowTableOrView($expander, $dbItem, itemName);
 881                 }
 882             }
 883         }
 884     }
 885
 886     function loadAndShowTableOrView ($expander, $relatedContainer, itemName) {
 887         loadChildNodes(true, $expander, function (data) {
 888             var $whichItem = findLoadedItem(
 889                 $relatedContainer.children('div.list_container'),
 890                 itemName, null, true
 891             );
 892             if ($whichItem) {
 893                 showTableOrView($whichItem, $expander);
 894             }
 895         });
 896     }
 897
 898     function showTableOrView ($whichItem, $expander) {
 899         expandTreeNode($expander, function (data) {
 900             if ($whichItem) {
 901                 scrollToView($whichItem, false);
 902             }
 903         });
 904     }
 905
 906     function isItemInContainer ($container, name, clazz) {
 907         var $whichItem = null;
 908         $items = $container.find(clazz);
 909         var found = false;
 910         $items.each(function () {
 911             if ($(this).children('a').text() === name) {
 912                 $whichItem = $(this);
 913                 return false;
 914             }
 915         });
 916         return $whichItem;
 917     }
 918 }
 919
 920 /**
 921  * Disable navigation panel settings
 922  *
 923  * @return void
 924  */
 925 function PMA_disableNaviSettings () {
 926     $('#pma_navigation_settings_icon').addClass('hide');
 927     $('#pma_navigation_settings').remove();
 928 }
 929
 930 /**
 931  * Ensure that navigation panel settings is properly setup.
 932  * If not, set it up
 933  *
 934  * @return void
 935  */
 936 function PMA_ensureNaviSettings (selflink) {
 937     $('#pma_navigation_settings_icon').removeClass('hide');
 938
 939     if (!$('#pma_navigation_settings').length) {
 940         var params = {
 941             getNaviSettings: true,
 942             server: PMA_commonParams.get('server'),
 943         };
 944         var url = $('#pma_navigation').find('a.navigation_url').attr('href');
 945         $.post(url, params, function (data) {
 946             if (typeof data !== 'undefined' && data.success) {
 947                 $('#pma_navi_settings_container').html(data.message);
 948                 setupRestoreField();
 949                 setupValidation();
 950                 setupConfigTabs();
 951                 $('#pma_navigation_settings').find('form').attr('action', selflink);
 952             } else {
 953                 PMA_ajaxShowMessage(data.error);
 954             }
 955         });
 956     } else {
 957         $('#pma_navigation_settings').find('form').attr('action', selflink);
 958     }
 959 }
 960
 961 /**
 962  * Reloads the whole navigation tree while preserving its state
 963  *
 964  * @param  function     the callback function
 965  * @param  Object       stored navigation paths
 966  *
 967  * @return void
 968  */
 969 function PMA_reloadNavigation (callback, paths) {
 970     var params = {
 971         reload: true,
 972         no_debug: true,
 973         server: PMA_commonParams.get('server'),
 974     };
 975     paths = paths || traverseNavigationForPaths();
 976     $.extend(params, paths);
 977     if ($('#navi_db_select').length) {
 978         params.db = PMA_commonParams.get('db');
 979         requestNaviReload(params);
 980         return;
 981     }
 982     requestNaviReload(params);
 983
 984     function requestNaviReload (params) {
 985         var url = $('#pma_navigation').find('a.navigation_url').attr('href');
 986         $.post(url, params, function (data) {
 987             if (typeof data !== 'undefined' && data.success) {
 988                 $('#pma_navigation_tree').html(data.message).children('div').show();
 989                 if ($('#pma_navigation_tree').hasClass('synced')) {
 990                     PMA_selectCurrentDb();
 991                     PMA_showCurrentNavigation();
 992                 }
 993                 // Fire the callback, if any
 994                 if (typeof callback === 'function') {
 995                     callback.call();
 996                 }
 997                 navTreeStateUpdate();
 998             } else {
 999                 PMA_ajaxShowMessage(data.error);
1000             }
1001         });
1002     }
1003 }
1004
1005 function PMA_selectCurrentDb () {
1006     var $naviDbSelect = $('#navi_db_select');
1007
1008     if (!$naviDbSelect.length) {
1009         return false;
1010     }
1011
1012     if (PMA_commonParams.get('db')) { // db selected
1013         $naviDbSelect.show();
1014     }
1015
1016     $naviDbSelect.val(PMA_commonParams.get('db'));
1017     return $naviDbSelect.val() === PMA_commonParams.get('db');
1018 }
1019
1020 /**
1021  * Handles any requests to change the page in a branch of a tree
1022  *
1023  * This can be called from link click or select change event handlers
1024  *
1025  * @param object $this A jQuery object that points to the element that
1026  * initiated the action of changing the page
1027  *
1028  * @return void
1029  */
1030 function PMA_navigationTreePagination ($this) {
1031     var $msgbox = PMA_ajaxShowMessage();
1032     var isDbSelector = $this.closest('div.pageselector').is('.dbselector');
1033     var url;
1034     var params;
1035     if ($this[0].tagName === 'A') {
1036         url = $this.attr('href');
1037         params = 'ajax_request=true';
1038     } else { // tagName === 'SELECT'
1039         url = 'navigation.php';
1040         params = $this.closest('form').serialize() + '&ajax_request=true';
1041     }
1042     var searchClause = PMA_fastFilter.getSearchClause();
1043     if (searchClause) {
1044         params += '&searchClause=' + encodeURIComponent(searchClause);
1045     }
1046     if (isDbSelector) {
1047         params += '&full=true';
1048     } else {
1049         var searchClause2 = PMA_fastFilter.getSearchClause2($this);
1050         if (searchClause2) {
1051             params += '&searchClause2=' + encodeURIComponent(searchClause2);
1052         }
1053     }
1054     $.post(url, params, function (data) {
1055         if (typeof data !== 'undefined' && data.success) {
1056             PMA_ajaxRemoveMessage($msgbox);
1057             if (isDbSelector) {
1058                 var val = PMA_fastFilter.getSearchClause();
1059                 $('#pma_navigation_tree')
1060                     .html(data.message)
1061                     .children('div')
1062                     .show();
1063                 if (val) {
1064                     $('#pma_navigation_tree')
1065                         .find('li.fast_filter input.searchClause')
1066                         .val(val);
1067                 }
1068             } else {
1069                 var $parent = $this.closest('div.list_container').parent();
1070                 var val = PMA_fastFilter.getSearchClause2($this);
1071                 $this.closest('div.list_container').html(
1072                     $(data.message).children().show()
1073                 );
1074                 if (val) {
1075                     $parent.find('li.fast_filter input.searchClause').val(val);
1076                 }
1077                 $parent.find('span.pos2_value:first').text(
1078                     $parent.find('span.pos2_value:last').text()
1079                 );
1080                 $parent.find('span.pos3_value:first').text(
1081                     $parent.find('span.pos3_value:last').text()
1082                 );
1083             }
1084         } else {
1085             PMA_ajaxShowMessage(data.error);
1086             PMA_handleRedirectAndReload(data);
1087         }
1088         navTreeStateUpdate();
1089     });
1090 }
1091
1092 /**
1093  * @var ResizeHandler Custom object that manages the resizing of the navigation
1094  *
1095  * XXX: Must only be ever instanciated once
1096  * XXX: Inside event handlers the 'this' object is accessed as 'event.data.resize_handler'
1097  */
1098 var ResizeHandler = function () {
1099     /**
1100      * @var int panel_width Used by the collapser to know where to go
1101      *                      back to when uncollapsing the panel
1102      */
1103     this.panel_width = 0;
1104     /**
1105      * @var string left Used to provide support for RTL languages
1106      */
1107     this.left = $('html').attr('dir') === 'ltr' ? 'left' : 'right';
1108     /**
1109      * Adjusts the width of the navigation panel to the specified value
1110      *
1111      * @param int pos Navigation width in pixels
1112      *
1113      * @return void
1114      */
1115     this.setWidth = function (pos) {
1116         if (typeof pos !== 'number') {
1117             pos = 240;
1118         }
1119         var $resizer = $('#pma_navigation_resizer');
1120         var resizer_width = $resizer.width();
1121         var $collapser = $('#pma_navigation_collapser');
1122         var windowWidth = $(window).width();
1123         $('#pma_navigation').width(pos);
1124         $('body').css('margin-' + this.left, pos + 'px');
1125         $('#floating_menubar, #pma_console')
1126             .css('margin-' + this.left, (pos + resizer_width) + 'px');
1127         $resizer.css(this.left, pos + 'px');
1128         if (pos === 0) {
1129             $collapser
1130                 .css(this.left, pos + resizer_width)
1131                 .html(this.getSymbol(pos))
1132                 .prop('title', PMA_messages.strShowPanel);
1133         } else if (windowWidth > 768) {
1134             $collapser
1135                 .css(this.left, pos)
1136                 .html(this.getSymbol(pos))
1137                 .prop('title', PMA_messages.strHidePanel);
1138             $('#pma_navigation_resizer').css({ 'width': '3px' });
1139         } else {
1140             $collapser
1141                 .css(this.left, windowWidth - 22)
1142                 .html(this.getSymbol(100))
1143                 .prop('title', PMA_messages.strHidePanel);
1144             $('#pma_navigation').width(windowWidth);
1145             $('body').css('margin-' + this.left, '0px');
1146             $('#pma_navigation_resizer').css({ 'width': '0px' });
1147         }
1148         setTimeout(function () {
1149             $(window).trigger('resize');
1150         }, 4);
1151     };
1152     /**
1153      * Returns the horizontal position of the mouse,
1154      * relative to the outer side of the navigation panel
1155      *
1156      * @param int pos Navigation width in pixels
1157      *
1158      * @return void
1159      */
1160     this.getPos = function (event) {
1161         var pos = event.pageX;
1162         var windowWidth = $(window).width();
1163         var windowScroll = $(window).scrollLeft();
1164         pos = pos - windowScroll;
1165         if (this.left !== 'left') {
1166             pos = windowWidth - event.pageX;
1167         }
1168         if (pos < 0) {
1169             pos = 0;
1170         } else if (pos + 100 >= windowWidth) {
1171             pos = windowWidth - 100;
1172         } else {
1173             this.panel_width = 0;
1174         }
1175         return pos;
1176     };
1177     /**
1178      * Returns the HTML code for the arrow symbol used in the collapser
1179      *
1180      * @param int width The width of the panel
1181      *
1182      * @return string
1183      */
1184     this.getSymbol = function (width) {
1185         if (this.left === 'left') {
1186             if (width === 0) {
1187                 return '&rarr;';
1188             } else {
1189                 return '&larr;';
1190             }
1191         } else {
1192             if (width === 0) {
1193                 return '&larr;';
1194             } else {
1195                 return '&rarr;';
1196             }
1197         }
1198     };
1199     /**
1200      * Event handler for initiating a resize of the panel
1201      *
1202      * @param object e Event data (contains a reference to resizeHandler)
1203      *
1204      * @return void
1205      */
1206     this.mousedown = function (event) {
1207         event.preventDefault();
1208         $(document)
1209             .on('mousemove', { 'resize_handler': event.data.resize_handler },
1210                 $.throttle(event.data.resize_handler.mousemove, 4))
1211             .on('mouseup', { 'resize_handler': event.data.resize_handler },
1212                 event.data.resize_handler.mouseup);
1213         $('body').css('cursor', 'col-resize');
1214     };
1215     /**
1216      * Event handler for terminating a resize of the panel
1217      *
1218      * @param object e Event data (contains a reference to resizeHandler)
1219      *
1220      * @return void
1221      */
1222     this.mouseup = function (event) {
1223         $('body').css('cursor', '');
1224         configSet('NavigationWidth', event.data.resize_handler.getPos(event));
1225         $('#topmenu').menuResizer('resize');
1226         $(document)
1227             .off('mousemove')
1228             .off('mouseup');
1229     };
1230     /**
1231      * Event handler for updating the panel during a resize operation
1232      *
1233      * @param object e Event data (contains a reference to resizeHandler)
1234      *
1235      * @return void
1236      */
1237     this.mousemove = function (event) {
1238         event.preventDefault();
1239         var pos = event.data.resize_handler.getPos(event);
1240         event.data.resize_handler.setWidth(pos);
1241         if ($('.sticky_columns').length !== 0) {
1242             handleAllStickyColumns();
1243         }
1244     };
1245     /**
1246      * Event handler for collapsing the panel
1247      *
1248      * @param object e Event data (contains a reference to resizeHandler)
1249      *
1250      * @return void
1251      */
1252     this.collapse = function (event) {
1253         event.preventDefault();
1254         var panel_width = event.data.resize_handler.panel_width;
1255         var width = $('#pma_navigation').width();
1256         if (width === 0 && panel_width === 0) {
1257             panel_width = 240;
1258         }
1259         configSet('NavigationWidth', panel_width);
1260         event.data.resize_handler.setWidth(panel_width);
1261         event.data.resize_handler.panel_width = width;
1262     };
1263     /**
1264      * Event handler for resizing the navigation tree height on window resize
1265      *
1266      * @return void
1267      */
1268     this.treeResize = function (event) {
1269         var $nav        = $('#pma_navigation');
1270         var $nav_tree   = $('#pma_navigation_tree');
1271         var $nav_header = $('#pma_navigation_header');
1272         var $nav_tree_content = $('#pma_navigation_tree_content');
1273         $nav_tree.height($nav.height() - $nav_header.height());
1274         if ($nav_tree_content.length > 0) {
1275             $nav_tree_content.height($nav_tree.height() - $nav_tree_content.position().top);
1276         } else {
1277             // TODO: in fast filter search response there is no #pma_navigation_tree_content, needs to be added in php
1278             $nav_tree.css({
1279                 'overflow-y': 'auto'
1280             });
1281         }
1282         // Set content bottom space beacuse of console
1283         $('body').css('margin-bottom', $('#pma_console').height() + 'px');
1284     };
1285     // Hide the pma_navigation initially when loaded on mobile
1286     if ($(window).width() < 768) {
1287         this.setWidth(0);
1288     } else {
1289         this.setWidth(configGet('NavigationWidth', false));
1290         $('#topmenu').menuResizer('resize');
1291     }
1292     // Register the events for the resizer and the collapser
1293     $(document).on('mousedown', '#pma_navigation_resizer', { 'resize_handler': this }, this.mousedown);
1294     $(document).on('click', '#pma_navigation_collapser', { 'resize_handler': this }, this.collapse);
1295
1296     // Add the correct arrow symbol to the collapser
1297     $('#pma_navigation_collapser').html(this.getSymbol($('#pma_navigation').width()));
1298     // Fix navigation tree height
1299     $(window).on('resize', this.treeResize);
1300     // need to call this now and then, browser might decide
1301     // to show/hide horizontal scrollbars depending on page content width
1302     setInterval(this.treeResize, 2000);
1303     this.treeResize();
1304 }; // End of ResizeHandler
1305
1306 /**
1307  * @var object PMA_fastFilter Handles the functionality that allows filtering
1308  *                            of the items in a branch of the navigation tree
1309  */
1310 var PMA_fastFilter = {
1311     /**
1312      * Construct for the asynchronous fast filter functionality
1313      *
1314      * @param object $this        A jQuery object pointing to the list container
1315      *                            which is the nearest parent of the fast filter
1316      * @param string searchClause The query string for the filter
1317      *
1318      * @return new PMA_fastFilter.filter object
1319      */
1320     filter: function ($this, searchClause) {
1321         /**
1322          * @var object $this A jQuery object pointing to the list container
1323          *                   which is the nearest parent of the fast filter
1324          */
1325         this.$this = $this;
1326         /**
1327          * @var bool searchClause The query string for the filter
1328          */
1329         this.searchClause = searchClause;
1330         /**
1331          * @var object $clone A clone of the original contents
1332          *                    of the navigation branch before
1333          *                    the fast filter was applied
1334          */
1335         this.$clone = $this.clone();
1336         /**
1337          * @var object xhr A reference to the ajax request that is currently running
1338          */
1339         this.xhr = null;
1340         /**
1341          * @var int timeout Used to delay the request for asynchronous search
1342          */
1343         this.timeout = null;
1344
1345         var $filterInput = $this.find('li.fast_filter input.searchClause');
1346         if ($filterInput.length !== 0 &&
1347             $filterInput.val() !== '' &&
1348             $filterInput.val() !== $filterInput[0].defaultValue
1349         ) {
1350             this.request();
1351         }
1352     },
1353     /**
1354      * Gets the query string from the database fast filter form
1355      *
1356      * @return string
1357      */
1358     getSearchClause: function () {
1359         var retval = '';
1360         var $input = $('#pma_navigation_tree')
1361             .find('li.fast_filter.db_fast_filter input.searchClause');
1362         if ($input.length && $input.val() !== $input[0].defaultValue) {
1363             retval = $input.val();
1364         }
1365         return retval;
1366     },
1367     /**
1368      * Gets the query string from a second level item's fast filter form
1369      * The retrieval is done by trasversing the navigation tree backwards
1370      *
1371      * @return string
1372      */
1373     getSearchClause2: function ($this) {
1374         var $filterContainer = $this.closest('div.list_container');
1375         var $filterInput = $([]);
1376         if ($filterContainer
1377             .find('li.fast_filter:not(.db_fast_filter) input.searchClause')
1378             .length !== 0) {
1379             $filterInput = $filterContainer
1380                 .find('li.fast_filter:not(.db_fast_filter) input.searchClause');
1381         }
1382         var searchClause2 = '';
1383         if ($filterInput.length !== 0 &&
1384             $filterInput.first().val() !== $filterInput[0].defaultValue
1385         ) {
1386             searchClause2 = $filterInput.val();
1387         }
1388         return searchClause2;
1389     },
1390     /**
1391      * @var hash events A list of functions that are bound to DOM events
1392      *                  at the top of this file
1393      */
1394     events: {
1395         focus: function (event) {
1396             var $obj = $(this).closest('div.list_container');
1397             if (! $obj.data('fastFilter')) {
1398                 $obj.data(
1399                     'fastFilter',
1400                     new PMA_fastFilter.filter($obj, $(this).val())
1401                 );
1402             }
1403             if ($(this).val() === this.defaultValue) {
1404                 $(this).val('');
1405             } else {
1406                 $(this).select();
1407             }
1408         },
1409         blur: function (event) {
1410             if ($(this).val() === '') {
1411                 $(this).val(this.defaultValue);
1412             }
1413             var $obj = $(this).closest('div.list_container');
1414             if ($(this).val() === this.defaultValue && $obj.data('fastFilter')) {
1415                 $obj.data('fastFilter').restore();
1416             }
1417         },
1418         keyup: function (event) {
1419             var $obj = $(this).closest('div.list_container');
1420             var str = '';
1421             if ($(this).val() !== this.defaultValue && $(this).val() !== '') {
1422                 $obj.find('div.pageselector').hide();
1423                 str = $(this).val();
1424             }
1425
1426             /**
1427              * FIXME at the server level a value match is done while on
1428              * the client side it is a regex match. These two should be aligned
1429              */
1430
1431             // regex used for filtering.
1432             var regex;
1433             try {
1434                 regex = new RegExp(str, 'i');
1435             } catch (err) {
1436                 return;
1437             }
1438
1439             // this is the div that houses the items to be filtered by this filter.
1440             var outerContainer;
1441             if ($(this).closest('li.fast_filter').is('.db_fast_filter')) {
1442                 outerContainer = $('#pma_navigation_tree_content');
1443             } else {
1444                 outerContainer = $obj;
1445             }
1446
1447             // filters items that are directly under the div as well as grouped in
1448             // groups. Does not filter child items (i.e. a database search does
1449             // not filter tables)
1450             var item_filter = function ($curr) {
1451                 $curr.children('ul').children('li.navGroup').each(function () {
1452                     $(this).children('div.list_container').each(function () {
1453                         item_filter($(this)); // recursive
1454                     });
1455                 });
1456                 $curr.children('ul').children('li').children('a').not('.container').each(function () {
1457                     if (regex.test($(this).text())) {
1458                         $(this).parent().show().removeClass('hidden');
1459                     } else {
1460                         $(this).parent().hide().addClass('hidden');
1461                     }
1462                 });
1463             };
1464             item_filter(outerContainer);
1465
1466             // hides containers that does not have any visible children
1467             var container_filter = function ($curr) {
1468                 $curr.children('ul').children('li.navGroup').each(function () {
1469                     var $group = $(this);
1470                     $group.children('div.list_container').each(function () {
1471                         container_filter($(this)); // recursive
1472                     });
1473                     $group.show().removeClass('hidden');
1474                     if ($group.children('div.list_container').children('ul')
1475                         .children('li').not('.hidden').length === 0) {
1476                         $group.hide().addClass('hidden');
1477                     }
1478                 });
1479             };
1480             container_filter(outerContainer);
1481
1482             if ($(this).val() !== this.defaultValue && $(this).val() !== '') {
1483                 if (! $obj.data('fastFilter')) {
1484                     $obj.data(
1485                         'fastFilter',
1486                         new PMA_fastFilter.filter($obj, $(this).val())
1487                     );
1488                 } else {
1489                     if (event.keyCode === 13) {
1490                         $obj.data('fastFilter').update($(this).val());
1491                     }
1492                 }
1493             } else if ($obj.data('fastFilter')) {
1494                 $obj.data('fastFilter').restore(true);
1495             }
1496             // update filter state
1497             var filterName;
1498             if ($(this).attr('name') === 'searchClause2') {
1499                 filterName = $(this).siblings('input[name=aPath]').val();
1500             } else {
1501                 filterName = 'dbFilter';
1502             }
1503             navFilterStateUpdate(filterName, $(this).val());
1504         },
1505         clear: function (event) {
1506             event.stopPropagation();
1507             // Clear the input and apply the fast filter with empty input
1508             var filter = $(this).closest('div.list_container').data('fastFilter');
1509             if (filter) {
1510                 filter.restore();
1511             }
1512             var value = $(this).prev()[0].defaultValue;
1513             $(this).prev().val(value).trigger('keyup');
1514         }
1515     }
1516 };
1517 /**
1518  * Handles a change in the search clause
1519  *
1520  * @param string searchClause The query string for the filter
1521  *
1522  * @return void
1523  */
1524 PMA_fastFilter.filter.prototype.update = function (searchClause) {
1525     if (this.searchClause !== searchClause) {
1526         this.searchClause = searchClause;
1527         this.request();
1528     }
1529 };
1530 /**
1531  * After a delay of 250mS, initiates a request to retrieve search results
1532  * Multiple calls to this function will always abort the previous request
1533  *
1534  * @return void
1535  */
1536 PMA_fastFilter.filter.prototype.request = function () {
1537     var self = this;
1538     if (self.$this.find('li.fast_filter').find('img.throbber').length === 0) {
1539         self.$this.find('li.fast_filter').append(
1540             $('<div class="throbber"></div>').append(
1541                 $('#pma_navigation_content')
1542                     .find('img.throbber')
1543                     .clone()
1544                     .css({ visibility: 'visible', display: 'block' })
1545             )
1546         );
1547     }
1548     if (self.xhr) {
1549         self.xhr.abort();
1550     }
1551     var url = $('#pma_navigation').find('a.navigation_url').attr('href');
1552     var params = self.$this.find('> ul > li > form.fast_filter').first().serialize();
1553
1554     if (self.$this.find('> ul > li > form.fast_filter:first input[name=searchClause]').length === 0) {
1555         var $input = $('#pma_navigation_tree').find('li.fast_filter.db_fast_filter input.searchClause');
1556         if ($input.length && $input.val() !== $input[0].defaultValue) {
1557             params += '&searchClause=' + encodeURIComponent($input.val());
1558         }
1559     }
1560     self.xhr = $.ajax({
1561         url: url,
1562         type: 'post',
1563         dataType: 'json',
1564         data: params,
1565         complete: function (jqXHR, status) {
1566             if (status !== 'abort') {
1567                 var data = JSON.parse(jqXHR.responseText);
1568                 self.$this.find('li.fast_filter').find('div.throbber').remove();
1569                 if (data && data.results) {
1570                     self.swap.apply(self, [data.message]);
1571                 }
1572             }
1573         }
1574     });
1575 };
1576 /**
1577  * Replaces the contents of the navigation branch with the search results
1578  *
1579  * @param string list The search results
1580  *
1581  * @return void
1582  */
1583 PMA_fastFilter.filter.prototype.swap = function (list) {
1584     this.$this
1585         .html($(list).html())
1586         .children()
1587         .show()
1588         .end()
1589         .find('li.fast_filter input.searchClause')
1590         .val(this.searchClause);
1591     this.$this.data('fastFilter', this);
1592 };
1593 /**
1594  * Restores the navigation to the original state after the fast filter is cleared
1595  *
1596  * @param bool focus Whether to also focus the input box of the fast filter
1597  *
1598  * @return void
1599  */
1600 PMA_fastFilter.filter.prototype.restore = function (focus) {
1601     if (this.$this.children('ul').first().hasClass('search_results')) {
1602         this.$this.html(this.$clone.html()).children().show();
1603         this.$this.data('fastFilter', this);
1604         if (focus) {
1605             this.$this.find('li.fast_filter input.searchClause').focus();
1606         }
1607     }
1608     this.searchClause = '';
1609     this.$this.find('div.pageselector').show();
1610     this.$this.find('div.throbber').remove();
1611 };
1612
1613 /**
1614  * Show full name when cursor hover and name not shown completely
1615  *
1616  * @param object $containerELem Container element
1617  *
1618  * @return void
1619  */
1620 function PMA_showFullName ($containerELem) {
1621     $containerELem.find('.hover_show_full').mouseenter(function () {
1622         /** mouseenter */
1623         var $this = $(this);
1624         var thisOffset = $this.offset();
1625         if ($this.text() === '') {
1626             return;
1627         }
1628         var $parent = $this.parent();
1629         if (($parent.offset().left + $parent.outerWidth())
1630            < (thisOffset.left + $this.outerWidth())) {
1631             var $fullNameLayer = $('#full_name_layer');
1632             if ($fullNameLayer.length === 0) {
1633                 $('body').append('<div id="full_name_layer" class="hide"></div>');
1634                 $('#full_name_layer').mouseleave(function () {
1635                     /** mouseleave */
1636                     $(this).addClass('hide')
1637                         .removeClass('hovering');
1638                 }).mouseenter(function () {
1639                     /** mouseenter */
1640                     $(this).addClass('hovering');
1641                 });
1642                 $fullNameLayer = $('#full_name_layer');
1643             }
1644             $fullNameLayer.removeClass('hide');
1645             $fullNameLayer.css({ left: thisOffset.left, top: thisOffset.top });
1646             $fullNameLayer.html($this.clone());
1647             setTimeout(function () {
1648                 if (! $fullNameLayer.hasClass('hovering')) {
1649                     $fullNameLayer.trigger('mouseleave');
1650                 }
1651             }, 200);
1652         }
1653     });
1654 }