js/rte/common.js

   1 /* vim: set expandtab sw=4 ts=4 sts=4: */
   2
   3 /**
   4  * @var    RTE    a JavaScript namespace containing the functionality
   5  *                for Routines, Triggers and Events.
   6  *
   7  *                This namespace is extended by the functionality required
   8  *                to handle a specific item (a routine, trigger or event)
   9  *                in the relevant javascript files in this folder.
  10  */
  11 var RTE = {
  12     /**
  13      * @var    $ajaxDialog        jQuery object containing the reference to the
  14      *                            dialog that contains the editor.
  15      */
  16     $ajaxDialog: null,
  17     /**
  18      * @var    syntaxHiglighter   Reference to the codemirror editor.
  19      */
  20     syntaxHiglighter: null,
  21     /**
  22      * @var    buttonOptions      Object containing options for
  23      *                            the jQueryUI dialog buttons
  24      */
  25     buttonOptions: {},
  26     /**
  27      * Validate editor form fields.
  28      */
  29     validate: function () {
  30         /**
  31          * @var    $elm    a jQuery object containing the reference
  32          *                 to an element that is being validated.
  33          */
  34         var $elm = null;
  35         // Common validation. At the very least the name
  36         // and the definition must be provided for an item
  37         $elm = $('.rte_table').last().find('input[name=item_name]');
  38         if ($elm.val() === '') {
  39             $elm.focus();
  40             alert(PMA_messages['strFormEmpty']);
  41             return false;
  42         }
  43         $elm = $('.rte_table').find('textarea[name=item_definition]');
  44         if ($elm.val() === '') {
  45             this.syntaxHiglighter.focus();
  46             alert(PMA_messages['strFormEmpty']);
  47             return false;
  48         }
  49         // The validation has so far passed, so now
  50         // we can validate item-specific fields.
  51         return RTE.validateCustom();
  52     }, // end validate()
  53     /**
  54      * Validate custom editor form fields.
  55      * This function can be overridden by
  56      * other files in this folder.
  57      */
  58     validateCustom: function () {
  59         return true;
  60     }, // end validateCustom()
  61     /**
  62      * Execute some code after the ajax
  63      * dialog for the ditor is shown.
  64      * This function can be overridden by
  65      * other files in this folder.
  66      */
  67     postDialogShow: function () {
  68         // Nothing by default
  69     } // end postDialogShow()
  70 }; // end RTE namespace
  71
  72 /**
  73  * Attach Ajax event handlers for the Routines, Triggers and Events editor.
  74  *
  75  * @see $cfg['AjaxEnable']
  76  */
  77 $(document).ready(function () {
  78     /**
  79      * Attach Ajax event handlers for the Add/Edit functionality.
  80      */
  81     $('.ajax_add_anchor, .ajax_edit_anchor').live('click', function (event) {
  82         event.preventDefault();
  83         /**
  84          * @var    $edit_row    jQuery object containing the reference to
  85          *                      the row of the the item being edited
  86          *                      from the list of items .
  87          */
  88         var $edit_row = null;
  89         if ($(this).hasClass('ajax_edit_anchor')) {
  90             // Remeber the row of the item being edited for later,
  91             // so that if the edit is successful, we can replace the
  92             // row with info about the modified item.
  93             $edit_row = $(this).parents('tr');
  94         }
  95         /**
  96          * @var    $msg    jQuery object containing the reference to
  97          *                 the AJAX message shown to the user.
  98          */
  99         var $msg = PMA_ajaxShowMessage();
 100         $.get($(this).attr('href'), {'ajax_request': true}, function (data) {
 101             if (data.success === true) {
 102                 // We have successfully fetched the editor form
 103                 PMA_ajaxRemoveMessage($msg);
 104                 // Now define the function that is called when
 105                 // the user presses the "Go" button
 106                 RTE.buttonOptions[PMA_messages['strGo']] = function () {
 107                     // Move the data from the codemirror editor back to the
 108                     // textarea, where it can be used in the form submission.
 109                     RTE.syntaxHiglighter.save();
 110                     // Validate editor and submit request, if passed.
 111                     if (RTE.validate()) {
 112                         /**
 113                          * @var    data    Form data to be sent in the AJAX request.
 114                          */
 115                         var data = $('.rte_form').last().serialize();
 116                         $msg = PMA_ajaxShowMessage(PMA_messages['strProcessingRequest']);
 117                         $.post($('.rte_form').last().attr('action'), data, function (data) {
 118                             if (data.success === true) {
 119                                 // Item created successfully
 120                                 PMA_ajaxRemoveMessage($msg);
 121                                 PMA_slidingMessage(data.message);
 122                                 RTE.$ajaxDialog.dialog('close');
 123                                 // If we are in 'edit' mode, we must remove the reference to the old row.
 124                                 if (mode === 'edit') {
 125                                     $edit_row.remove();
 126                                 }
 127                                 // Sometimes, like when moving a trigger from a table to
 128                                 // another one, the new row should not be inserted into the
 129                                 // list. In this case "data.insert" will be set to false.
 130                                 if (data.insert) {
 131                                     // Insert the new row at the correct location in the list of items
 132                                     /**
 133                                      * @var    text    Contains the name of an item from the list
 134                                      *                 that is used in comparisons to find the correct
 135                                      *                 location where to insert a new row.
 136                                      */
 137                                     var text = '';
 138                                     /**
 139                                      * @var    inserted    Whether a new item has been inserted
 140                                      *                     in the list or not.
 141                                      */
 142                                     var inserted = false;
 143                                     $('table.data').find('tr').each(function () {
 144                                         text = $(this)
 145                                                 .children('td')
 146                                                 .eq(0)
 147                                                 .find('strong')
 148                                                 .text()
 149                                                 .toUpperCase();
 150                                         text = $.trim(text);
 151                                         if (text !== '' && text > data.name) {
 152                                             $(this).before(data.new_row);
 153                                             inserted = true;
 154                                             return false;
 155                                         }
 156                                     });
 157                                     if (! inserted) {
 158                                         // If we didn't manage to insert the row yet,
 159                                         // it must belong at the end of the list,
 160                                         // so we insert it there.
 161                                         $('table.data').append(data.new_row);
 162                                     }
 163                                     // Fade-in the new row
 164                                     $('.ajaxInsert').show('slow').removeClass('ajaxInsert');
 165                                 } else if ($('table.data').find('tr').has('td').length === 0) {
 166                                     // If we are not supposed to insert the new row, we will now
 167                                     // check if the table is empty and needs to be hidden. This
 168                                     // will be the case if we were editing the only item in the
 169                                     // list, which we removed and will not be inserting something
 170                                     // else in its place.
 171                                     $('table.data').hide("slow", function () {
 172                                         $('#nothing2display').show("slow");
 173                                     });
 174                                 }
 175                                 // Now we have inserted the row at the correct position, but surely
 176                                 // at least some row classes are wrong now. So we will itirate
 177                                 // throught all rows and assign correct classes to them.
 178                                 /**
 179                                  * @var    ct          Count of processed rows.
 180                                  */
 181                                 var ct = 0;
 182                                 /**
 183                                  * @var    rowclass    Class to be attached to the row
 184                                  *                     that is being processed
 185                                  */
 186                                 var rowclass = '';
 187                                 $('table.data').find('tr').has('td').each(function () {
 188                                     rowclass = (ct % 2 === 0) ? 'even' : 'odd';
 189                                     $(this).removeClass().addClass(rowclass);
 190                                     ct++;
 191                                 });
 192                                 // If this is the first item being added, remove
 193                                 // the "No items" message and show the list.
 194                                 if ($('table.data').find('tr').has('td').length > 0
 195                                     && $('#nothing2display').is(':visible')) {
 196                                     $('#nothing2display').hide("slow", function () {
 197                                         $('table.data').show("slow");
 198                                     });
 199                                 }
 200                             } else {
 201                                 PMA_ajaxShowMessage(data.error, false);
 202                             }
 203                         }); // end $.post()
 204                     } // end "if (RTE.validate())"
 205                 }; // end of function that handles the submission of the Editor
 206                 RTE.buttonOptions[PMA_messages['strClose']] = function () {
 207                     $(this).dialog("close");
 208                 };
 209                 /**
 210                  * Display the dialog to the user
 211                  */
 212                 RTE.$ajaxDialog = $('<div>' + data.message + '</div>').dialog({
 213                                 width: 700,
 214                                 minWidth: 500,
 215                                 buttons: RTE.buttonOptions,
 216                                 title: data.title,
 217                                 modal: true,
 218                                 close: function () {
 219                                     $(this).remove();
 220                                 }
 221                         });
 222                 RTE.$ajaxDialog.find('input[name=item_name]').focus();
 223                 RTE.$ajaxDialog.find('.datefield, .datetimefield').each(function () {
 224                     PMA_addDatepicker($(this).css('width', '95%'));
 225                 });
 226                 /**
 227                  * @var    mode    Used to remeber whether the editor is in
 228                  *                 "Edit" or "Add" mode.
 229                  */
 230                 var mode = 'add';
 231                 if ($('input[name=editor_process_edit]').length > 0) {
 232                     mode = 'edit';
 233                 }
 234                 // Attach syntax highlited editor to the definition
 235                 /**
 236                  * @var    $elm    jQuery object containing the reference to
 237                  *                 the Definition textarea.
 238                  */
 239                 var $elm = $('textarea[name=item_definition]').last();
 240                 /**
 241                  * @var    opts    Options to pass to the codemirror editor.
 242                  */
 243                 var opts = {lineNumbers: true, matchBrackets: true, indentUnit: 4, mode: "text/x-mysql"};
 244                 RTE.syntaxHiglighter = CodeMirror.fromTextArea($elm[0], opts);
 245                 // Execute item-specific code
 246                 RTE.postDialogShow(data);
 247             } else {
 248                 PMA_ajaxShowMessage(data.error, false);
 249             }
 250         }); // end $.get()
 251     }); // end $.live()
 252
 253     /**
 254      * Attach Ajax event handlers for input fields in the editor
 255      * and the routine execution dialog used to submit the Ajax
 256      * request when the ENTER key is pressed.
 257      */
 258     $('.rte_table').find('input[name^=item], input[name^=params]').live('keydown', function (e) {
 259         if (e.which === 13) { // 13 is the ENTER key
 260             e.preventDefault();
 261             if (typeof RTE.buttonOptions[PMA_messages['strGo']] === 'function') {
 262                 RTE.buttonOptions[PMA_messages['strGo']].call();
 263             }
 264         }
 265     }); // end $.live()
 266
 267     /**
 268      * Attach Ajax event handlers for Export of Routines, Triggers and Events.
 269      */
 270     $('.ajax_export_anchor').live('click', function (event) {
 271         event.preventDefault();
 272         var $msg = PMA_ajaxShowMessage();
 273         // Fire the ajax request straight away
 274         $.get($(this).attr('href'), {'ajax_request': true}, function (data) {
 275             if (data.success === true) {
 276                 PMA_ajaxRemoveMessage($msg);
 277                 /**
 278                  * @var button_options  Object containing options for jQueryUI dialog buttons
 279                  */
 280                 var button_options = {};
 281                 button_options[PMA_messages['strClose']] = function () {
 282                     $(this).dialog("close").remove();
 283                 };
 284                 /**
 285                  * Display the dialog to the user
 286                  */
 287                 var $ajaxDialog = $('<div>' + data.message + '</div>').dialog({
 288                                       width: 500,
 289                                       buttons: button_options,
 290                                       title: data.title
 291                                   });
 292                 // Attach syntax highlited editor to export dialog
 293                 /**
 294                  * @var    $elm    jQuery object containing the reference
 295                  *                 to the Export textarea.
 296                  */
 297                 var $elm = $ajaxDialog.find('textarea');
 298                 /**
 299                  * @var    opts    Options to pass to the codemirror editor.
 300                  */
 301                 var opts = {lineNumbers: true, matchBrackets: true, indentUnit: 4, mode: "text/x-mysql"};
 302                 CodeMirror.fromTextArea($elm[0], opts);
 303             } else {
 304                 PMA_ajaxShowMessage(data.error, false);
 305             }
 306         }); // end $.get()
 307     }); // end $.live()
 308
 309     /**
 310      * Attach Ajax event handlers for Drop functionality of Routines, Triggers and Events.
 311      */
 312     $('.ajax_drop_anchor').live('click', function (event) {
 313         event.preventDefault();
 314         /**
 315          * @var $curr_row    Object containing reference to the current row
 316          */
 317         var $curr_row = $(this).parents('tr');
 318         /**
 319          * @var question    String containing the question to be asked for confirmation
 320          */
 321         var question = $('<div></div>').text($curr_row.children('td').children('.drop_sql').html());
 322         // We ask for confirmation first here, before submitting the ajax request
 323         $(this).PMA_confirm(question, $(this).attr('href'), function (url) {
 324             /**
 325              * @var    $msg    jQuery object containing the reference to
 326              *                 the AJAX message shown to the user.
 327              */
 328             var $msg = PMA_ajaxShowMessage(PMA_messages['strProcessingRequest']);
 329             $.get(url, {'is_js_confirmed': 1, 'ajax_request': true}, function (data) {
 330                 if (data.success === true) {
 331                     /**
 332                      * @var $table    Object containing reference to the main list of elements.
 333                      */
 334                     var $table = $curr_row.parent();
 335                     // Check how many rows will be left after we remove
 336                     // the one that the user has requested us to remove
 337                     if ($table.find('tr').length === 2) {
 338                         // If there are two rows left, it means that they are
 339                         // the header of the table and the rows that we are
 340                         // about to remove, so after the removal there will be
 341                         // nothing to show in the table, so we hide it.
 342                         $table.hide("slow", function () {
 343                             $(this).find('tr.even, tr.odd').remove();
 344                             $('#nothing2display').show("slow");
 345                         });
 346                     } else {
 347                         $curr_row.hide("slow", function () {
 348                             $(this).remove();
 349                             // Now we have removed the row from the list, but maybe
 350                             // some row classes are wrong now. So we will itirate
 351                             // throught all rows and assign correct classes to them.
 352                             /**
 353                              * @var    ct          Count of processed rows.
 354                              */
 355                             var ct = 0;
 356                             /**
 357                              * @var    rowclass    Class to be attached to the row
 358                              *                     that is being processed
 359                              */
 360                             var rowclass = '';
 361                             $table.find('tr').has('td').each(function () {
 362                                 rowclass = (ct % 2 === 0) ? 'even' : 'odd';
 363                                 $(this).removeClass().addClass(rowclass);
 364                                 ct++;
 365                             });
 366                         });
 367                     }
 368                     // Get rid of the "Loading" message
 369                     PMA_ajaxRemoveMessage($msg);
 370                     // Show the query that we just executed
 371                     PMA_slidingMessage(data.sql_query);
 372                 } else {
 373                     PMA_ajaxShowMessage(PMA_messages['strErrorProcessingRequest'] + " : " + data.error, false);
 374                 }
 375             }); // end $.get()
 376         }); // end $.PMA_confirm()
 377     }); // end $.live()
 378 }); // end of $(document).ready()