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