Add PMA_showHints function in show_ajax_messages.js in js/src/utils and PMA_initSlider in Slider.js.

Signed-Off-By: Piyush Vijay <piyushvijay.1997@gmail.com>

js/src/ajax.js

@@ -772,6 +772,10 @@ export let AJAX = {
 $(document).on('click', 'a', AJAX.requestHandler);
 $(document).on('submit', 'form', AJAX.requestHandler);
 
+/**
+ * @todo this is to be removed when complete code is modularised	 * Gracefully handle fatal server errors
+ * (e.g: 500 - Internal server error)
+ */
 $(document).ajaxError(function (event, request, settings) {
     if (AJAX._debug) {
         console.log('AJAX error: status=' + request.status + ', text=' + request.statusText);
@@ -799,7 +803,38 @@ $(document).ajaxError(function (event, request, settings) {
     }
 });
 /**
- * @todo this is to be removed when complete code is modularised
+ * Gracefully handle fatal server errors
+ * (e.g: 500 - Internal server error)
+ */
+$(document).ajaxError(function (event, request, settings) {
+    if (AJAX._debug) {
+        console.log('AJAX error: status=' + request.status + ', text=' + request.statusText);
+    }
+    // Don't handle aborted requests
+    if (request.status !== 0 || request.statusText !== 'abort') {
+        var details = '';
+        var state = request.state();
+
+        if (request.status !== 0) {
+            details += '<div>' + escapeHtml(PMA_sprintf(PMA_messages.strErrorCode, request.status)) + '</div>';
+        }
+        details += '<div>' + escapeHtml(PMA_sprintf(PMA_messages.strErrorText, request.statusText + ' (' + state + ')')) + '</div>';
+        if (state === 'rejected' || state === 'timeout') {
+            details += '<div>' + escapeHtml(PMA_messages.strErrorConnection) + '</div>';
+        }
+        PMA_ajaxShowMessage(
+            '<div class="error">' +
+            PMA_messages.strErrorProcessingRequest +
+            details +
+            '</div>',
+            false
+        );
+        AJAX.active = false;
+        AJAX.xhr = null;
+    }
+});
+
+/**
  * Exporsing module to window for use with non modular code
  */
 window.AJAX = AJAX;

js/src/utils/Slider.js

@@ -0,0 +1,47 @@
+/**
+ * Changes status of slider
+ */
+function PMA_set_status_label ($element) {
+    var text;
+    if ($element.css('display') === 'none') {
+        text = '+ ';
+    } else {
+        text = '- ';
+    }
+    $element.closest('.slide-wrapper').prev().find('span').text(text);
+}
+
+/**
+ * Initializes slider effect.
+ */
+export function PMA_init_slider () {
+    $('div.pma_auto_slider').each(function () {
+        var $this = $(this);
+        if ($this.data('slider_init_done')) {
+            return;
+        }
+        var $wrapper = $('<div>', { 'class': 'slide-wrapper' });
+        $wrapper.toggle($this.is(':visible'));
+        $('<a>', { href: '#' + this.id, 'class': 'ajax' })
+            .text($this.attr('title'))
+            .prepend($('<span>'))
+            .insertBefore($this)
+            .on('click', function () {
+                var $wrapper = $this.closest('.slide-wrapper');
+                var visible = $this.is(':visible');
+                if (!visible) {
+                    $wrapper.show();
+                }
+                $this[visible ? 'hide' : 'show']('blind', function () {
+                    $wrapper.toggle(!visible);
+                    $wrapper.parent().toggleClass('print_ignore', visible);
+                    PMA_set_status_label($this);
+                });
+                return false;
+            });
+        $this.wrap($wrapper);
+        $this.removeAttr('title');
+        PMA_set_status_label($this);
+        $this.data('slider_init_done', 1);
+    });
+}

js/src/utils/show_ajax_messages.js

@@ -46,6 +46,28 @@ function PMA_tooltip ($elements, item, myContent, additionalOptions) {
     $elements.tooltip($.extend(true, defaultOptions, additionalOptions));
 }
 
+/**
+ * Function to display tooltips that were
+ * generated on the PHP side by PhpMyAdmin\Util::showHint()
+ *
+ * @param object $div a div jquery object which specifies the
+ *                    domain for searching for tooltips. If we
+ *                    omit this parameter the function searches
+ *                    in the whole body
+ **/
+export function PMA_showHints ($div) {
+    if ($div === undefined || ! $div instanceof jQuery || $div.length === 0) {
+        $div = $('body');
+    }
+    $div.find('.pma_hint').each(function () {
+        PMA_tooltip(
+            $(this).children('img'),
+            'img',
+            $(this).children('span').html()
+        );
+    });
+}
+
 /**
  * Show a message on the top of the page for an Ajax request
  *