js/common.js

   1 /* vim: set expandtab sw=4 ts=4 sts=4: */
   2
   3 $(function () {
   4     checkNumberOfFields();
   5 });
   6
   7 /**
   8  * Holds common parameters such as server, db, table, etc
   9  *
  10  * The content for this is normally loaded from Header.php or
  11  * Response.php and executed by ajax.js
  12  */
  13 var PMA_commonParams = (function () {
  14     /**
  15      * @var hash params An associative array of key value pairs
  16      * @access private
  17      */
  18     var params = {};
  19     // The returned object is the public part of the module
  20     return {
  21         /**
  22          * Saves all the key value pair that
  23          * are provided in the input array
  24          *
  25          * @param obj hash The input array
  26          *
  27          * @return void
  28          */
  29         setAll: function (obj) {
  30             var reload = false;
  31             var updateNavigation = false;
  32             for (var i in obj) {
  33                 if (params[i] !== undefined && params[i] !== obj[i]) {
  34                     if (i == 'db' || i == 'table') {
  35                         updateNavigation = true;
  36                     }
  37                     reload = true;
  38                 }
  39                 params[i] = obj[i];
  40             }
  41             if (updateNavigation &&
  42                     $('#pma_navigation_tree').hasClass('synced')
  43             ) {
  44                 PMA_showCurrentNavigation();
  45             }
  46         },
  47         /**
  48          * Retrieves a value given its key
  49          * Returns empty string for undefined values
  50          *
  51          * @param name string The key
  52          *
  53          * @return string
  54          */
  55         get: function (name) {
  56             return params[name] || '';
  57         },
  58         /**
  59          * Saves a single key value pair
  60          *
  61          * @param name  string The key
  62          * @param value string The value
  63          *
  64          * @return self For chainability
  65          */
  66         set: function (name, value) {
  67             var updateNavigation = false;
  68             if (name == 'db' || name == 'table' &&
  69                 params[name] !== value
  70             ) {
  71                 updateNavigation = true;
  72             }
  73             params[name] = value;
  74             if (updateNavigation &&
  75                     $('#pma_navigation_tree').hasClass('synced')
  76             ) {
  77                 PMA_showCurrentNavigation();
  78             }
  79             return this;
  80         },
  81         /**
  82          * Returns the url query string using the saved parameters
  83          *
  84          * @return string
  85          */
  86         getUrlQuery: function () {
  87             var common = this.get('common_query');
  88             var separator = '?';
  89             if (common.length > 0) {
  90                 separator = '&';
  91             }
  92             return PMA_sprintf(
  93                 '%s%sserver=%s&db=%s&table=%s',
  94                 this.get('common_query'),
  95                 separator,
  96                 encodeURIComponent(this.get('server')),
  97                 encodeURIComponent(this.get('db')),
  98                 encodeURIComponent(this.get('table'))
  99             );
 100         }
 101     };
 102 })();
 103
 104 /**
 105  * Holds common parameters such as server, db, table, etc
 106  *
 107  * The content for this is normally loaded from Header.php or
 108  * Response.php and executed by ajax.js
 109  */
 110 var PMA_commonActions = {
 111     /**
 112      * Saves the database name when it's changed
 113      * and reloads the query window, if necessary
 114      *
 115      * @param new_db string new_db The name of the new database
 116      *
 117      * @return void
 118      */
 119     setDb: function (new_db) {
 120         if (new_db != PMA_commonParams.get('db')) {
 121             PMA_commonParams.setAll({'db': new_db, 'table': ''});
 122         }
 123     },
 124     /**
 125      * Opens a database in the main part of the page
 126      *
 127      * @param new_db string The name of the new database
 128      *
 129      * @return void
 130      */
 131     openDb: function (new_db) {
 132         PMA_commonParams
 133             .set('db', new_db)
 134             .set('table', '');
 135         this.refreshMain(
 136             PMA_commonParams.get('opendb_url')
 137         );
 138     },
 139     /**
 140      * Refreshes the main frame
 141      *
 142      * @param mixed url Undefined to refresh to the same page
 143      *                  String to go to a different page, e.g: 'index.php'
 144      *
 145      * @return void
 146      */
 147     refreshMain: function (url, callback) {
 148         if (! url) {
 149             url = $('#selflink').find('a').attr('href');
 150             url = url.substring(0, url.indexOf('?'));
 151         }
 152         url += PMA_commonParams.getUrlQuery();
 153         $('<a />', {href: url})
 154             .appendTo('body')
 155             .click()
 156             .remove();
 157         AJAX._callback = callback;
 158     }
 159 };
 160
 161 /**
 162  * Class to handle PMA Drag and Drop Import
 163  *      feature
 164  */
 165 PMA_DROP_IMPORT = {
 166     /**
 167      * @var int, count of total uploads in this view
 168      */
 169     uploadCount: 0,
 170     /**
 171      * @var int, count of live uploads
 172      */
 173     liveUploadCount: 0,
 174     /**
 175      * @var  string array, allowed extensions
 176      */
 177     allowedExtensions: ['sql', 'xml', 'ldi', 'mediawiki', 'shp'],
 178     /**
 179      * @var  string array, allowed extensions for compressed files
 180      */
 181     allowedCompressedExtensions: ['gz', 'bz2', 'zip'],
 182     /**
 183      * @var obj array to store message returned by import_status.php
 184      */
 185     importStatus: [],
 186     /**
 187      * Checks if any dropped file has valid extension or not
 188      *
 189      * @param file filename
 190      *
 191      * @return string, extension for valid extension, '' otherwise
 192      */
 193     _getExtension: function(file) {
 194         var arr = file.split('.');
 195         ext = arr[arr.length - 1];
 196
 197         //check if compressed
 198         if (jQuery.inArray(ext.toLowerCase(),
 199             PMA_DROP_IMPORT.allowedCompressedExtensions) !== -1) {
 200             ext = arr[arr.length - 2];
 201         }
 202
 203         //Now check for extension
 204         if (jQuery.inArray(ext.toLowerCase(),
 205             PMA_DROP_IMPORT.allowedExtensions) !== -1) {
 206             return ext;
 207         }
 208         return '';
 209     },
 210     /**
 211      * Shows upload progress for different sql uploads
 212      *
 213      * @param: hash (string), hash for specific file upload
 214      * @param: percent (float), file upload percentage
 215      *
 216      * @return void
 217      */
 218     _setProgress: function(hash, percent) {
 219         $('.pma_sql_import_status div li[data-hash="' +hash +'"]')
 220             .children('progress').val(percent);
 221     },
 222     /**
 223      * Function to upload the file asynchronously
 224      *
 225      * @param formData FormData object for a specific file
 226      * @param hash hash of the current file upload
 227      *
 228      * @return void
 229      */
 230     _sendFileToServer: function(formData, hash) {
 231         var uploadURL ="./import.php"; //Upload URL
 232         var extraData ={};
 233         var jqXHR = $.ajax({
 234             xhr: function() {
 235                 var xhrobj = $.ajaxSettings.xhr();
 236                 if (xhrobj.upload) {
 237                     xhrobj.upload.addEventListener('progress', function(event) {
 238                         var percent = 0;
 239                         var position = event.loaded || event.position;
 240                         var total = event.total;
 241                         if (event.lengthComputable) {
 242                             percent = Math.ceil(position / total * 100);
 243                         }
 244                         //Set progress
 245                         PMA_DROP_IMPORT._setProgress(hash, percent);
 246                     }, false);
 247                 }
 248                 return xhrobj;
 249             },
 250             url: uploadURL,
 251             type: "POST",
 252             contentType:false,
 253             processData: false,
 254             cache: false,
 255             data: formData,
 256             success: function(data){
 257                 PMA_DROP_IMPORT._importFinished(hash, false, data.success);
 258                 if (!data.success) {
 259                     PMA_DROP_IMPORT.importStatus[PMA_DROP_IMPORT.importStatus.length] = {
 260                         hash: hash,
 261                         message: data.error
 262                     };
 263                 }
 264             }
 265         });
 266
 267         // -- provide link to cancel the upload
 268         $('.pma_sql_import_status div li[data-hash="' + hash +
 269             '"] span.filesize').html('<span hash="' +
 270             hash + '" class="pma_drop_file_status" task="cancel">' +
 271             PMA_messages.dropImportMessageCancel + '</span>');
 272
 273         // -- add event listener to this link to abort upload operation
 274         $('.pma_sql_import_status div li[data-hash="' + hash +
 275             '"] span.filesize span.pma_drop_file_status')
 276             .on('click', function() {
 277                 if ($(this).attr('task') === 'cancel') {
 278                     jqXHR.abort();
 279                     $(this).html('<span>' +PMA_messages.dropImportMessageAborted +'</span>');
 280                     PMA_DROP_IMPORT._importFinished(hash, true, false);
 281                 } else if ($(this).children("span").html() ===
 282                     PMA_messages.dropImportMessageFailed) {
 283                     // -- view information
 284                     var $this = $(this);
 285                     $.each( PMA_DROP_IMPORT.importStatus,
 286                     function( key, value ) {
 287                         if (value.hash === hash) {
 288                             $(".pma_drop_result:visible").remove();
 289                             var filename = $this.parent('span').attr('data-filename');
 290                             $("body").append('<div class="pma_drop_result"><h2>' +
 291                                 PMA_messages.dropImportImportResultHeader + ' - ' +
 292                                 filename +'<span class="close">x</span></h2>' +value.message +'</div>');
 293                             $(".pma_drop_result").draggable();  //to make this dialog draggable
 294                         }
 295                     });
 296                 }
 297             });
 298     },
 299     /**
 300      * Triggered when an object is dragged into the PMA UI
 301      *
 302      * @param event obj
 303      *
 304      * @return void
 305      */
 306     _dragenter : function (event) {
 307
 308         // We don't want to prevent users from using
 309         // browser's default drag-drop feature on some page(s)
 310         if ($(".noDragDrop").length !== 0) {
 311             return;
 312         }
 313
 314         event.stopPropagation();
 315         event.preventDefault();
 316         if (!PMA_DROP_IMPORT._hasFiles(event)) {
 317             return;
 318         }
 319         if (PMA_commonParams.get('db') === '') {
 320             $(".pma_drop_handler").html(PMA_messages.dropImportSelectDB);
 321         } else {
 322             $(".pma_drop_handler").html(PMA_messages.dropImportDropFiles);
 323         }
 324         $(".pma_drop_handler").fadeIn();
 325     },
 326     /**
 327      * Check if dragged element contains Files
 328      *
 329      * @param event the event object
 330      *
 331      * @return bool
 332      */
 333     _hasFiles: function (event) {
 334         return !(typeof event.originalEvent.dataTransfer.types === 'undefined' ||
 335             $.inArray('Files', event.originalEvent.dataTransfer.types) < 0 ||
 336             $.inArray(
 337                 'application/x-moz-nativeimage',
 338                 event.originalEvent.dataTransfer.types
 339             ) >= 0);
 340     },
 341     /**
 342      * Triggered when dragged file is being dragged over PMA UI
 343      *
 344      * @param event obj
 345      *
 346      * @return void
 347      */
 348     _dragover: function (event) {
 349         // We don't want to prevent users from using
 350         // browser's default drag-drop feature on some page(s)
 351         if ($(".noDragDrop").length !== 0) {
 352             return;
 353         }
 354
 355         event.stopPropagation();
 356         event.preventDefault();
 357         if (!PMA_DROP_IMPORT._hasFiles(event)) {
 358             return;
 359         }
 360         $(".pma_drop_handler").fadeIn();
 361     },
 362     /**
 363      * Triggered when dragged objects are left
 364      *
 365      * @param event obj
 366      *
 367      * @return void
 368      */
 369     _dragleave: function (event) {
 370         // We don't want to prevent users from using
 371         // browser's default drag-drop feature on some page(s)
 372         if ($(".noDragDrop").length !== 0) {
 373             return;
 374         }
 375         event.stopPropagation();
 376         event.preventDefault();
 377         var $pma_drop_handler = $(".pma_drop_handler");
 378         $pma_drop_handler.clearQueue().stop();
 379         $pma_drop_handler.fadeOut();
 380         $pma_drop_handler.html(PMA_messages.dropImportDropFiles);
 381     },
 382     /**
 383      * Called when upload has finished
 384      *
 385      * @param string, unique hash for a certain upload
 386      * @param bool, true if upload was aborted
 387      * @param bool, status of sql upload, as sent by server
 388      *
 389      * @return void
 390      */
 391     _importFinished: function(hash, aborted, status) {
 392         $('.pma_sql_import_status div li[data-hash="' +hash +'"]')
 393             .children("progress").hide();
 394         var icon = 'icon ic_s_success';
 395         // -- provide link to view upload status
 396         if (!aborted) {
 397             if (status) {
 398                 $('.pma_sql_import_status div li[data-hash="' + hash +
 399                    '"] span.filesize span.pma_drop_file_status')
 400                    .html('<span>' +PMA_messages.dropImportMessageSuccess +'</a>');
 401             } else {
 402                 $('.pma_sql_import_status div li[data-hash="' + hash +
 403                    '"] span.filesize span.pma_drop_file_status')
 404                    .html('<span class="underline">' + PMA_messages.dropImportMessageFailed +
 405                    '</a>');
 406                 icon = 'icon ic_s_error';
 407             }
 408         } else {
 409             icon = 'icon ic_s_notice';
 410         }
 411         $('.pma_sql_import_status div li[data-hash="' + hash +
 412             '"] span.filesize span.pma_drop_file_status')
 413             .attr('task', 'info');
 414
 415         // Set icon
 416         $('.pma_sql_import_status div li[data-hash="' +hash +'"]')
 417             .prepend('<img src="./themes/dot.gif" title="finished" class="' +
 418             icon +'"> ');
 419
 420         // Decrease liveUploadCount by one
 421         $('.pma_import_count').html(--PMA_DROP_IMPORT.liveUploadCount);
 422         if (!PMA_DROP_IMPORT.liveUploadCount) {
 423             $('.pma_sql_import_status h2 .close').fadeIn();
 424         }
 425     },
 426     /**
 427      * Triggered when dragged objects are dropped to UI
 428      * From this function, the AJAX Upload operation is initiated
 429      *
 430      * @param event object
 431      *
 432      * @return void
 433      */
 434     _drop: function (event) {
 435         // We don't want to prevent users from using
 436         // browser's default drag-drop feature on some page(s)
 437         if ($(".noDragDrop").length !== 0) {
 438             return;
 439         }
 440
 441         var dbname = PMA_commonParams.get('db');
 442         var server = PMA_commonParams.get('server');
 443
 444         //if no database is selected -- no
 445         if (dbname !== '') {
 446             var files = event.originalEvent.dataTransfer.files;
 447             if (!files || files.length === 0) {
 448                 // No files actually transferred
 449                 $(".pma_drop_handler").fadeOut();
 450                 event.stopPropagation();
 451                 event.preventDefault();
 452                 return;
 453             }
 454             $(".pma_sql_import_status").slideDown();
 455             for (var i = 0; i < files.length; i++) {
 456                 var ext  = (PMA_DROP_IMPORT._getExtension(files[i].name));
 457                 var hash = AJAX.hash(++PMA_DROP_IMPORT.uploadCount);
 458
 459                 var $pma_sql_import_status_div = $(".pma_sql_import_status div");
 460                 $pma_sql_import_status_div.append('<li data-hash="' +hash +'">' +
 461                     ((ext !== '') ? '' : '<img src="./themes/dot.gif" title="invalid format" class="icon ic_s_notice"> ') +
 462                     escapeHtml(files[i].name) + '<span class="filesize" data-filename="' +
 463                     escapeHtml(files[i].name) +'">' +(files[i].size/1024).toFixed(2) +
 464                     ' kb</span></li>');
 465
 466                 //scroll the UI to bottom
 467                 $pma_sql_import_status_div.scrollTop(
 468                     $pma_sql_import_status_div.scrollTop() + 50
 469                 );  //50 hardcoded for now
 470
 471                 if (ext !== '') {
 472                     // Increment liveUploadCount by one
 473                     $('.pma_import_count').html(++PMA_DROP_IMPORT.liveUploadCount);
 474                     $('.pma_sql_import_status h2 .close').fadeOut();
 475
 476                     $('.pma_sql_import_status div li[data-hash="' +hash +'"]')
 477                         .append('<br><progress max="100" value="2"></progress>');
 478
 479                     //uploading
 480                     var fd = new FormData();
 481                     fd.append('import_file', files[i]);
 482                     fd.append('noplugin', Math.random().toString(36).substring(2, 12));
 483                     fd.append('db', dbname);
 484                     fd.append('server', server);
 485                     fd.append('token', PMA_commonParams.get('token'));
 486                     fd.append('import_type', 'database');
 487                     // todo: method to find the value below
 488                     fd.append('MAX_FILE_SIZE', '4194304');
 489                     // todo: method to find the value below
 490                     fd.append('charset_of_file','utf-8');
 491                     // todo: method to find the value below
 492                     fd.append('allow_interrupt', 'yes');
 493                     fd.append('skip_queries', '0');
 494                     fd.append('format',ext);
 495                     fd.append('sql_compatibility','NONE');
 496                     fd.append('sql_no_auto_value_on_zero','something');
 497                     fd.append('ajax_request','true');
 498                     fd.append('hash', hash);
 499
 500                     // init uploading
 501                     PMA_DROP_IMPORT._sendFileToServer(fd, hash);
 502                 } else if (!PMA_DROP_IMPORT.liveUploadCount) {
 503                     $('.pma_sql_import_status h2 .close').fadeIn();
 504                 }
 505             }
 506         }
 507         $(".pma_drop_handler").fadeOut();
 508         event.stopPropagation();
 509         event.preventDefault();
 510     }
 511 };
 512
 513 /**
 514  * Called when some user drags, dragover, leave
 515  *       a file to the PMA UI
 516  * @param object Event data
 517  * @return void
 518  */
 519 $(document).on('dragenter', PMA_DROP_IMPORT._dragenter);
 520 $(document).on('dragover', PMA_DROP_IMPORT._dragover);
 521 $(document).on('dragleave', '.pma_drop_handler', PMA_DROP_IMPORT._dragleave);
 522
 523 //when file is dropped to PMA UI
 524 $(document).on('drop', 'body', PMA_DROP_IMPORT._drop);
 525
 526 // minimizing-maximising the sql ajax upload status
 527 $(document).on('click', '.pma_sql_import_status h2 .minimize', function() {
 528     if ($(this).attr('toggle') === 'off') {
 529         $('.pma_sql_import_status div').css('height','270px');
 530         $(this).attr('toggle','on');
 531         $(this).html('-');  // to minimize
 532     } else {
 533         $('.pma_sql_import_status div').css("height","0px");
 534         $(this).attr('toggle','off');
 535         $(this).html('+');  // to maximise
 536     }
 537 });
 538
 539 // closing sql ajax upload status
 540 $(document).on('click', '.pma_sql_import_status h2 .close', function() {
 541     $('.pma_sql_import_status').fadeOut(function() {
 542         $('.pma_sql_import_status div').html('');
 543         PMA_DROP_IMPORT.importStatus = [];  //clear the message array
 544     });
 545 });
 546
 547 // Closing the import result box
 548 $(document).on('click', '.pma_drop_result h2 .close', function(){
 549     $(this).parent('h2').parent('div').remove();
 550 });