No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

common.js 19KB

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