aboutsummaryrefslogtreecommitdiff
path: root/srcs/phpmyadmin/js/makegrid.js
diff options
context:
space:
mode:
Diffstat (limited to 'srcs/phpmyadmin/js/makegrid.js')
-rw-r--r--srcs/phpmyadmin/js/makegrid.js2295
1 files changed, 2295 insertions, 0 deletions
diff --git a/srcs/phpmyadmin/js/makegrid.js b/srcs/phpmyadmin/js/makegrid.js
new file mode 100644
index 0000000..8780c95
--- /dev/null
+++ b/srcs/phpmyadmin/js/makegrid.js
@@ -0,0 +1,2295 @@
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Create advanced table (resize, reorder, and show/hide columns; and also grid editing).
+ * This function is designed mainly for table DOM generated from browsing a table in the database.
+ * For using this function in other table DOM, you may need to:
+ * - add "draggable" class in the table header <th>, in order to make it resizable, sortable or hidable
+ * - have at least one non-"draggable" header in the table DOM for placing column visibility drop-down arrow
+ * - pass the value "false" for the parameter "enableGridEdit"
+ * - adjust other parameter value, to select which features that will be enabled
+ *
+ * @param t the table DOM element
+ * @param enableResize Optional, if false, column resizing feature will be disabled
+ * @param enableReorder Optional, if false, column reordering feature will be disabled
+ * @param enableVisib Optional, if false, show/hide column feature will be disabled
+ * @param enableGridEdit Optional, if false, grid editing feature will be disabled
+ */
+// eslint-disable-next-line no-unused-vars
+var makeGrid = function (t, enableResize, enableReorder, enableVisib, enableGridEdit) {
+ var isResizeEnabled = enableResize === undefined ? true : enableResize;
+ var isReorderEnabled = enableReorder === undefined ? true : enableReorder;
+ var isVisibEnabled = enableVisib === undefined ? true : enableVisib;
+ var isGridEditEnabled = enableGridEdit === undefined ? true : enableGridEdit;
+
+ var g = {
+ /** *********
+ * Constant
+ ***********/
+ minColWidth: 15,
+
+
+ /** *********
+ * Variables, assigned with default value, changed later
+ ***********/
+ actionSpan: 5, // number of colspan in Actions header in a table
+ tableCreateTime: null, // table creation time, used for saving column order and visibility to server, only available in "Browse tab"
+
+ // Column reordering variables
+ colOrder: [], // array of column order
+
+ // Column visibility variables
+ colVisib: [], // array of column visibility
+ showAllColText: '', // string, text for "show all" button under column visibility list
+ visibleHeadersCount: 0, // number of visible data headers
+
+ // Table hint variables
+ reorderHint: '', // string, hint for column reordering
+ sortHint: '', // string, hint for column sorting
+ markHint: '', // string, hint for column marking
+ copyHint: '', // string, hint for copy column name
+ showReorderHint: false,
+ showSortHint: false,
+ showMarkHint: false,
+
+ // Grid editing
+ isCellEditActive: false, // true if current focus is in edit cell
+ isEditCellTextEditable: false, // true if current edit cell is editable in the text input box (not textarea)
+ currentEditCell: null, // reference to <td> that currently being edited
+ cellEditHint: '', // hint shown when doing grid edit
+ gotoLinkText: '', // "Go to link" text
+ wasEditedCellNull: false, // true if last value of the edited cell was NULL
+ maxTruncatedLen: 0, // number of characters that can be displayed in a cell
+ saveCellsAtOnce: false, // $cfg[saveCellsAtOnce]
+ isCellEdited: false, // true if at least one cell has been edited
+ saveCellWarning: '', // string, warning text when user want to leave a page with unsaved edited data
+ lastXHR : null, // last XHR object used in AJAX request
+ isSaving: false, // true when currently saving edited data, used to handle double posting caused by pressing ENTER in grid edit text box in Chrome browser
+ alertNonUnique: '', // string, alert shown when saving edited nonunique table
+
+ // Common hidden inputs
+ token: null,
+ server: null,
+ db: null,
+ table: null,
+
+
+ /** **********
+ * Functions
+ ************/
+
+ /**
+ * Start to resize column. Called when clicking on column separator.
+ *
+ * @param e event
+ * @param obj dragged div object
+ */
+ dragStartRsz: function (e, obj) {
+ var n = $(g.cRsz).find('div').index(obj); // get the index of separator (i.e., column index)
+ $(obj).addClass('colborder_active');
+ g.colRsz = {
+ x0: e.pageX,
+ n: n,
+ obj: obj,
+ objLeft: $(obj).position().left,
+ objWidth: $(g.t).find('th.draggable:visible:eq(' + n + ') span').outerWidth()
+ };
+ $(document.body).css('cursor', 'col-resize').noSelect();
+ if (g.isCellEditActive) {
+ g.hideEditCell();
+ }
+ },
+
+ /**
+ * Start to reorder column. Called when clicking on table header.
+ *
+ * @param e event
+ * @param obj table header object
+ */
+ dragStartReorder: function (e, obj) {
+ // prepare the cCpy (column copy) and cPointer (column pointer) from the dragged column
+ $(g.cCpy).text($(obj).text());
+ var objPos = $(obj).position();
+ $(g.cCpy).css({
+ top: objPos.top + 20,
+ left: objPos.left,
+ height: $(obj).height(),
+ width: $(obj).width()
+ });
+ $(g.cPointer).css({
+ top: objPos.top
+ });
+
+ // get the column index, zero-based
+ var n = g.getHeaderIdx(obj);
+
+ g.colReorder = {
+ x0: e.pageX,
+ y0: e.pageY,
+ n: n,
+ newn: n,
+ obj: obj,
+ objTop: objPos.top,
+ objLeft: objPos.left
+ };
+
+ $(document.body).css('cursor', 'move').noSelect();
+ if (g.isCellEditActive) {
+ g.hideEditCell();
+ }
+ },
+
+ /**
+ * Handle mousemove event when dragging.
+ *
+ * @param e event
+ */
+ dragMove: function (e) {
+ var dx;
+ if (g.colRsz) {
+ dx = e.pageX - g.colRsz.x0;
+ if (g.colRsz.objWidth + dx > g.minColWidth) {
+ $(g.colRsz.obj).css('left', g.colRsz.objLeft + dx + 'px');
+ }
+ } else if (g.colReorder) {
+ // dragged column animation
+ dx = e.pageX - g.colReorder.x0;
+ $(g.cCpy)
+ .css('left', g.colReorder.objLeft + dx)
+ .show();
+
+ // pointer animation
+ var hoveredCol = g.getHoveredCol(e);
+ if (hoveredCol) {
+ var newn = g.getHeaderIdx(hoveredCol);
+ g.colReorder.newn = newn;
+ if (newn !== g.colReorder.n) {
+ // show the column pointer in the right place
+ var colPos = $(hoveredCol).position();
+ var newleft = newn < g.colReorder.n ?
+ colPos.left :
+ colPos.left + $(hoveredCol).outerWidth();
+ $(g.cPointer)
+ .css({
+ left: newleft,
+ visibility: 'visible'
+ });
+ } else {
+ // no movement to other column, hide the column pointer
+ $(g.cPointer).css('visibility', 'hidden');
+ }
+ }
+ }
+ },
+
+ /**
+ * Stop the dragging action.
+ *
+ * @param e event
+ */
+ dragEnd: function (e) {
+ if (g.colRsz) {
+ var dx = e.pageX - g.colRsz.x0;
+ var nw = g.colRsz.objWidth + dx;
+ if (nw < g.minColWidth) {
+ nw = g.minColWidth;
+ }
+ var n = g.colRsz.n;
+ // do the resizing
+ g.resize(n, nw);
+
+ g.reposRsz();
+ g.reposDrop();
+ g.colRsz = false;
+ $(g.cRsz).find('div').removeClass('colborder_active');
+ Sql.rearrangeStickyColumns($(t).prev('.sticky_columns'), $(t));
+ } else if (g.colReorder) {
+ // shift columns
+ if (g.colReorder.newn !== g.colReorder.n) {
+ g.shiftCol(g.colReorder.n, g.colReorder.newn);
+ // assign new position
+ var objPos = $(g.colReorder.obj).position();
+ g.colReorder.objTop = objPos.top;
+ g.colReorder.objLeft = objPos.left;
+ g.colReorder.n = g.colReorder.newn;
+ // send request to server to remember the column order
+ if (g.tableCreateTime) {
+ g.sendColPrefs();
+ }
+ g.refreshRestoreButton();
+ }
+
+ // animate new column position
+ $(g.cCpy).stop(true, true)
+ .animate({
+ top: g.colReorder.objTop,
+ left: g.colReorder.objLeft
+ }, 'fast')
+ .fadeOut();
+ $(g.cPointer).css('visibility', 'hidden');
+
+ g.colReorder = false;
+ Sql.rearrangeStickyColumns($(t).prev('.sticky_columns'), $(t));
+ }
+ $(document.body).css('cursor', 'inherit').noSelect(false);
+ },
+
+ /**
+ * Resize column n to new width "nw"
+ *
+ * @param n zero-based column index
+ * @param nw new width of the column in pixel
+ */
+ resize: function (n, nw) {
+ $(g.t).find('tr').each(function () {
+ $(this).find('th.draggable:visible:eq(' + n + ') span,' +
+ 'td:visible:eq(' + (g.actionSpan + n) + ') span')
+ .css('width', nw);
+ });
+ },
+
+ /**
+ * Reposition column resize bars.
+ */
+ reposRsz: function () {
+ $(g.cRsz).find('div').hide();
+ var $firstRowCols = $(g.t).find('tr:first th.draggable:visible');
+ var $resizeHandles = $(g.cRsz).find('div').removeClass('condition');
+ $(g.t).find('table.pma_table').find('thead th:first').removeClass('before-condition');
+ for (var n = 0, l = $firstRowCols.length; n < l; n++) {
+ var $col = $($firstRowCols[n]);
+ var colWidth;
+ if (navigator.userAgent.toLowerCase().indexOf('safari') !== -1) {
+ colWidth = $col.outerWidth();
+ } else {
+ colWidth = $col.outerWidth(true);
+ }
+ $($resizeHandles[n]).css('left', $col.position().left + colWidth)
+ .show();
+ if ($col.hasClass('condition')) {
+ $($resizeHandles[n]).addClass('condition');
+ if (n > 0) {
+ $($resizeHandles[n - 1]).addClass('condition');
+ }
+ }
+ }
+ if ($($resizeHandles[0]).hasClass('condition')) {
+ $(g.t).find('thead th:first').addClass('before-condition');
+ }
+ $(g.cRsz).css('height', $(g.t).height());
+ },
+
+ /**
+ * Shift column from index oldn to newn.
+ *
+ * @param oldn old zero-based column index
+ * @param newn new zero-based column index
+ */
+ shiftCol: function (oldn, newn) {
+ $(g.t).find('tr').each(function () {
+ if (newn < oldn) {
+ $(this).find('th.draggable:eq(' + newn + '),' +
+ 'td:eq(' + (g.actionSpan + newn) + ')')
+ .before($(this).find('th.draggable:eq(' + oldn + '),' +
+ 'td:eq(' + (g.actionSpan + oldn) + ')'));
+ } else {
+ $(this).find('th.draggable:eq(' + newn + '),' +
+ 'td:eq(' + (g.actionSpan + newn) + ')')
+ .after($(this).find('th.draggable:eq(' + oldn + '),' +
+ 'td:eq(' + (g.actionSpan + oldn) + ')'));
+ }
+ });
+ // reposition the column resize bars
+ g.reposRsz();
+
+ // adjust the column visibility list
+ if (newn < oldn) {
+ $(g.cList).find('.lDiv div:eq(' + newn + ')')
+ .before($(g.cList).find('.lDiv div:eq(' + oldn + ')'));
+ } else {
+ $(g.cList).find('.lDiv div:eq(' + newn + ')')
+ .after($(g.cList).find('.lDiv div:eq(' + oldn + ')'));
+ }
+ // adjust the colOrder
+ var tmp = g.colOrder[oldn];
+ g.colOrder.splice(oldn, 1);
+ g.colOrder.splice(newn, 0, tmp);
+ // adjust the colVisib
+ if (g.colVisib.length > 0) {
+ tmp = g.colVisib[oldn];
+ g.colVisib.splice(oldn, 1);
+ g.colVisib.splice(newn, 0, tmp);
+ }
+ },
+
+ /**
+ * Find currently hovered table column's header (excluding actions column).
+ *
+ * @param e event
+ * @return the hovered column's th object or undefined if no hovered column found.
+ */
+ getHoveredCol: function (e) {
+ var hoveredCol;
+ var $headers = $(g.t).find('th.draggable:visible');
+ $headers.each(function () {
+ var left = $(this).offset().left;
+ var right = left + $(this).outerWidth();
+ if (left <= e.pageX && e.pageX <= right) {
+ hoveredCol = this;
+ }
+ });
+ return hoveredCol;
+ },
+
+ /**
+ * Get a zero-based index from a <th class="draggable"> tag in a table.
+ *
+ * @param obj table header <th> object
+ * @return zero-based index of the specified table header in the set of table headers (visible or not)
+ */
+ getHeaderIdx: function (obj) {
+ return $(obj).parents('tr').find('th.draggable').index(obj);
+ },
+
+ /**
+ * Reposition the columns back to normal order.
+ */
+ restoreColOrder: function () {
+ // use insertion sort, since we already have shiftCol function
+ for (var i = 1; i < g.colOrder.length; i++) {
+ var x = g.colOrder[i];
+ var j = i - 1;
+ while (j >= 0 && x < g.colOrder[j]) {
+ j--;
+ }
+ if (j !== i - 1) {
+ g.shiftCol(i, j + 1);
+ }
+ }
+ if (g.tableCreateTime) {
+ // send request to server to remember the column order
+ g.sendColPrefs();
+ }
+ g.refreshRestoreButton();
+ },
+
+ /**
+ * Send column preferences (column order and visibility) to the server.
+ */
+ sendColPrefs: function () {
+ if ($(g.t).is('.ajax')) { // only send preferences if ajax class
+ var postParams = {
+ 'ajax_request': true,
+ 'db': g.db,
+ 'table': g.table,
+ 'token': g.token,
+ 'server': g.server,
+ 'set_col_prefs': true,
+ 'table_create_time': g.tableCreateTime
+ };
+ if (g.colOrder.length > 0) {
+ $.extend(postParams, { 'col_order': g.colOrder.toString() });
+ }
+ if (g.colVisib.length > 0) {
+ $.extend(postParams, { 'col_visib': g.colVisib.toString() });
+ }
+ $.post('sql.php', postParams, function (data) {
+ if (data.success !== true) {
+ var $tempDiv = $(document.createElement('div'));
+ $tempDiv.html(data.error);
+ $tempDiv.addClass('error');
+ Functions.ajaxShowMessage($tempDiv, false);
+ }
+ });
+ }
+ },
+
+ /**
+ * Refresh restore button state.
+ * Make restore button disabled if the table is similar with initial state.
+ */
+ refreshRestoreButton: function () {
+ // check if table state is as initial state
+ var isInitial = true;
+ for (var i = 0; i < g.colOrder.length; i++) {
+ if (g.colOrder[i] !== i) {
+ isInitial = false;
+ break;
+ }
+ }
+ // check if only one visible column left
+ var isOneColumn = g.visibleHeadersCount === 1;
+ // enable or disable restore button
+ if (isInitial || isOneColumn) {
+ $(g.o).find('div.restore_column').hide();
+ } else {
+ $(g.o).find('div.restore_column').show();
+ }
+ },
+
+ /**
+ * Update current hint using the boolean values (showReorderHint, showSortHint, etc.).
+ *
+ */
+ updateHint: function () {
+ var text = '';
+ if (!g.colRsz && !g.colReorder) { // if not resizing or dragging
+ if (g.visibleHeadersCount > 1) {
+ g.showReorderHint = true;
+ }
+ if ($(t).find('th.marker').length > 0) {
+ g.showMarkHint = true;
+ }
+ if (g.showSortHint && g.sortHint) {
+ text += text.length > 0 ? '<br>' : '';
+ text += '- ' + g.sortHint;
+ }
+ if (g.showMultiSortHint && g.strMultiSortHint) {
+ text += text.length > 0 ? '<br>' : '';
+ text += '- ' + g.strMultiSortHint;
+ }
+ if (g.showMarkHint &&
+ g.markHint &&
+ ! g.showSortHint && // we do not show mark hint, when sort hint is shown
+ g.showReorderHint &&
+ g.reorderHint
+ ) {
+ text += text.length > 0 ? '<br>' : '';
+ text += '- ' + g.reorderHint;
+ text += text.length > 0 ? '<br>' : '';
+ text += '- ' + g.markHint;
+ text += text.length > 0 ? '<br>' : '';
+ text += '- ' + g.copyHint;
+ }
+ }
+ return text;
+ },
+
+ /**
+ * Toggle column's visibility.
+ * After calling this function and it returns true, afterToggleCol() must be called.
+ *
+ * @return boolean True if the column is toggled successfully.
+ */
+ toggleCol: function (n) {
+ if (g.colVisib[n]) {
+ // can hide if more than one column is visible
+ if (g.visibleHeadersCount > 1) {
+ $(g.t).find('tr').each(function () {
+ $(this).find('th.draggable:eq(' + n + '),' +
+ 'td:eq(' + (g.actionSpan + n) + ')')
+ .hide();
+ });
+ g.colVisib[n] = 0;
+ $(g.cList).find('.lDiv div:eq(' + n + ') input').prop('checked', false);
+ } else {
+ // cannot hide, force the checkbox to stay checked
+ $(g.cList).find('.lDiv div:eq(' + n + ') input').prop('checked', true);
+ return false;
+ }
+ } else { // column n is not visible
+ $(g.t).find('tr').each(function () {
+ $(this).find('th.draggable:eq(' + n + '),' +
+ 'td:eq(' + (g.actionSpan + n) + ')')
+ .show();
+ });
+ g.colVisib[n] = 1;
+ $(g.cList).find('.lDiv div:eq(' + n + ') input').prop('checked', true);
+ }
+ return true;
+ },
+
+ /**
+ * This must be called if toggleCol() returns is true.
+ *
+ * This function is separated from toggleCol because, sometimes, we want to toggle
+ * some columns together at one time and do just one adjustment after it, e.g. in showAllColumns().
+ */
+ afterToggleCol: function () {
+ // some adjustments after hiding column
+ g.reposRsz();
+ g.reposDrop();
+ g.sendColPrefs();
+
+ // check visible first row headers count
+ g.visibleHeadersCount = $(g.t).find('tr:first th.draggable:visible').length;
+ g.refreshRestoreButton();
+ },
+
+ /**
+ * Show columns' visibility list.
+ *
+ * @param obj The drop down arrow of column visibility list
+ */
+ showColList: function (obj) {
+ // only show when not resizing or reordering
+ if (!g.colRsz && !g.colReorder) {
+ var pos = $(obj).position();
+ // check if the list position is too right
+ if (pos.left + $(g.cList).outerWidth(true) > $(document).width()) {
+ pos.left = $(document).width() - $(g.cList).outerWidth(true);
+ }
+ $(g.cList).css({
+ left: pos.left,
+ top: pos.top + $(obj).outerHeight(true)
+ })
+ .show();
+ $(obj).addClass('coldrop-hover');
+ }
+ },
+
+ /**
+ * Hide columns' visibility list.
+ */
+ hideColList: function () {
+ $(g.cList).hide();
+ $(g.cDrop).find('.coldrop-hover').removeClass('coldrop-hover');
+ },
+
+ /**
+ * Reposition the column visibility drop-down arrow.
+ */
+ reposDrop: function () {
+ var $th = $(t).find('th:not(.draggable)');
+ for (var i = 0; i < $th.length; i++) {
+ var $cd = $(g.cDrop).find('div:eq(' + i + ')'); // column drop-down arrow
+ var pos = $($th[i]).position();
+ $cd.css({
+ left: pos.left + $($th[i]).width() - $cd.width(),
+ top: pos.top
+ });
+ }
+ },
+
+ /**
+ * Show all hidden columns.
+ */
+ showAllColumns: function () {
+ for (var i = 0; i < g.colVisib.length; i++) {
+ if (!g.colVisib[i]) {
+ g.toggleCol(i);
+ }
+ }
+ g.afterToggleCol();
+ },
+
+ /**
+ * Show edit cell, if it can be shown
+ *
+ * @param cell <td> element to be edited
+ */
+ showEditCell: function (cell) {
+ if ($(cell).is('.grid_edit') &&
+ !g.colRsz && !g.colReorder) {
+ if (!g.isCellEditActive) {
+ var $cell = $(cell);
+
+ if ('string' === $cell.attr('data-type') ||
+ 'blob' === $cell.attr('data-type') ||
+ 'json' === $cell.attr('data-type')
+ ) {
+ g.cEdit = g.cEditTextarea;
+ } else {
+ g.cEdit = g.cEditStd;
+ }
+
+ // remove all edit area and hide it
+ $(g.cEdit).find('.edit_area').empty().hide();
+ // reposition the cEdit element
+ $(g.cEdit).css({
+ top: $cell.position().top,
+ left: $cell.position().left
+ })
+ .show()
+ .find('.edit_box')
+ .css({
+ width: $cell.outerWidth(),
+ height: $cell.outerHeight()
+ });
+ // fill the cell edit with text from <td>
+ var value = Functions.getCellValue(cell);
+ if ($cell.attr('data-type') === 'json' && $cell.is('.truncated') === false) {
+ try {
+ value = JSON.stringify(JSON.parse(value), null, 4);
+ } catch (e) {
+ // Show as is
+ }
+ }
+ $(g.cEdit).find('.edit_box').val(value);
+
+ g.currentEditCell = cell;
+ $(g.cEdit).find('.edit_box').trigger('focus');
+ moveCursorToEnd($(g.cEdit).find('.edit_box'));
+ $(g.cEdit).find('*').prop('disabled', false);
+ }
+ }
+
+ function moveCursorToEnd (input) {
+ var originalValue = input.val();
+ var originallength = originalValue.length;
+ input.val('');
+ input.trigger('blur').trigger('focus').val(originalValue);
+ input[0].setSelectionRange(originallength, originallength);
+ }
+ },
+
+ /**
+ * Remove edit cell and the edit area, if it is shown.
+ *
+ * @param force Optional, force to hide edit cell without saving edited field.
+ * @param data Optional, data from the POST AJAX request to save the edited field
+ * or just specify "true", if we want to replace the edited field with the new value.
+ * @param field Optional, the edited <td>. If not specified, the function will
+ * use currently edited <td> from g.currentEditCell.
+ * @param field Optional, this object contains a boolean named move (true, if called from move* functions)
+ * and a <td> to which the grid_edit should move
+ */
+ hideEditCell: function (force, data, field, options) {
+ if (g.isCellEditActive && !force) {
+ // cell is being edited, save or post the edited data
+ if (options !== undefined) {
+ g.saveOrPostEditedCell(options);
+ } else {
+ g.saveOrPostEditedCell();
+ }
+ return;
+ }
+
+ // cancel any previous request
+ if (g.lastXHR !== null) {
+ g.lastXHR.abort();
+ g.lastXHR = null;
+ }
+
+ if (data) {
+ if (g.currentEditCell) { // save value of currently edited cell
+ // replace current edited field with the new value
+ var $thisField = $(g.currentEditCell);
+ var isNull = $thisField.data('value') === null;
+ if (isNull) {
+ $thisField.find('span').html('NULL');
+ $thisField.addClass('null');
+ } else {
+ $thisField.removeClass('null');
+ var value = data.isNeedToRecheck
+ ? data.truncatableFieldValue
+ : $thisField.data('value');
+
+ // Truncates the text.
+ $thisField.removeClass('truncated');
+ if (CommonParams.get('pftext') === 'P' && value.length > g.maxTruncatedLen) {
+ $thisField.addClass('truncated');
+ value = value.substring(0, g.maxTruncatedLen) + '...';
+ }
+
+ // Add <br> before carriage return.
+ var newHtml = Functions.escapeHtml(value);
+ newHtml = newHtml.replace(/\n/g, '<br>\n');
+
+ // remove decimal places if column type not supported
+ if (($thisField.attr('data-decimals') === 0) && ($thisField.attr('data-type').indexOf('time') !== -1)) {
+ newHtml = newHtml.substring(0, newHtml.indexOf('.'));
+ }
+
+ // remove addtional decimal places
+ if (($thisField.attr('data-decimals') > 0) && ($thisField.attr('data-type').indexOf('time') !== -1)) {
+ newHtml = newHtml.substring(0, newHtml.length - (6 - $thisField.attr('data-decimals')));
+ }
+
+ var selector = 'span';
+ if ($thisField.hasClass('hex') && $thisField.find('a').length) {
+ selector = 'a';
+ }
+
+ // Updates the code keeping highlighting (if any).
+ var $target = $thisField.find(selector);
+ if (!Functions.updateCode($target, newHtml, value)) {
+ $target.html(newHtml);
+ }
+ }
+ if ($thisField.is('.bit')) {
+ $thisField.find('span').text($thisField.data('value'));
+ }
+ }
+ if (data.transformations !== undefined) {
+ $.each(data.transformations, function (cellIndex, value) {
+ var $thisField = $(g.t).find('.to_be_saved:eq(' + cellIndex + ')');
+ $thisField.find('span').html(value);
+ });
+ }
+ if (data.relations !== undefined) {
+ $.each(data.relations, function (cellIndex, value) {
+ var $thisField = $(g.t).find('.to_be_saved:eq(' + cellIndex + ')');
+ $thisField.find('span').html(value);
+ });
+ }
+
+ // refresh the grid
+ g.reposRsz();
+ g.reposDrop();
+ }
+
+ // hide the cell editing area
+ $(g.cEdit).hide();
+ $(g.cEdit).find('.edit_box').trigger('blur');
+ g.isCellEditActive = false;
+ g.currentEditCell = null;
+ // destroy datepicker in edit area, if exist
+ var $dp = $(g.cEdit).find('.hasDatepicker');
+ if ($dp.length > 0) {
+ // eslint-disable-next-line no-underscore-dangle
+ $(document).on('mousedown', $.datepicker._checkExternalClick);
+ $dp.datepicker('destroy');
+ // change the cursor in edit box back to normal
+ // (the cursor become a hand pointer when we add datepicker)
+ $(g.cEdit).find('.edit_box').css('cursor', 'inherit');
+ }
+ },
+
+ /**
+ * Show drop-down edit area when edit cell is focused.
+ */
+ showEditArea: function () {
+ if (!g.isCellEditActive) { // make sure the edit area has not been shown
+ g.isCellEditActive = true;
+ g.isEditCellTextEditable = false;
+ /**
+ * @var $td current edited cell
+ */
+ var $td = $(g.currentEditCell);
+ /**
+ * @var $editArea the editing area
+ */
+ var $editArea = $(g.cEdit).find('.edit_area');
+ /**
+ * @var where_clause WHERE clause for the edited cell
+ */
+ var whereClause = $td.parent('tr').find('.where_clause').val();
+ /**
+ * @var field_name String containing the name of this field.
+ * @see Sql.getFieldName()
+ */
+ var fieldName = Sql.getFieldName($(t), $td);
+ /**
+ * @var relation_curr_value String current value of the field (for fields that are foreign keyed).
+ */
+ var relationCurrValue = $td.text();
+ /**
+ * @var relation_key_or_display_column String relational key if in 'Relational display column' mode,
+ * relational display column if in 'Relational key' mode (for fields that are foreign keyed).
+ */
+ var relationKeyOrDisplayColumn = $td.find('a').attr('title');
+ /**
+ * @var curr_value String current value of the field (for fields that are of type enum or set).
+ */
+ var currValue = $td.find('span').text();
+
+ // empty all edit area, then rebuild it based on $td classes
+ $editArea.empty();
+
+ // remember this instead of testing more than once
+ var isNull = $td.is('.null');
+
+ // add goto link, if this cell contains a link
+ if ($td.find('a').length > 0) {
+ var gotoLink = document.createElement('div');
+ gotoLink.className = 'goto_link';
+ $(gotoLink).append(g.gotoLinkText + ' ').append($td.find('a').clone());
+ $editArea.append(gotoLink);
+ }
+
+ g.wasEditedCellNull = false;
+ if ($td.is(':not(.not_null)')) {
+ // append a null checkbox
+ $editArea.append('<div class="null_div"><label>Null:<input type="checkbox"></label></div>');
+
+ var $checkbox = $editArea.find('.null_div input');
+ // check if current <td> is NULL
+ if (isNull) {
+ $checkbox.prop('checked', true);
+ g.wasEditedCellNull = true;
+ }
+
+ // if the select/editor is changed un-check the 'checkbox_null_<field_name>_<row_index>'.
+ if ($td.is('.enum, .set')) {
+ $editArea.on('change', 'select', function () {
+ $checkbox.prop('checked', false);
+ });
+ } else if ($td.is('.relation')) {
+ $editArea.on('change', 'select', function () {
+ $checkbox.prop('checked', false);
+ });
+ $editArea.on('click', '.browse_foreign', function () {
+ $checkbox.prop('checked', false);
+ });
+ } else {
+ $(g.cEdit).on('keypress change paste', '.edit_box', function () {
+ $checkbox.prop('checked', false);
+ });
+ // Capture ctrl+v (on IE and Chrome)
+ $(g.cEdit).on('keydown', '.edit_box', function (e) {
+ if (e.ctrlKey && e.which === 86) {
+ $checkbox.prop('checked', false);
+ }
+ });
+ $editArea.on('keydown', 'textarea', function () {
+ $checkbox.prop('checked', false);
+ });
+ }
+ // if some text is written in textbox automatically unmark the null checkbox and if it is emptied again mark the checkbox.
+ $(g.cEdit).find('.edit_box').on('input', function () {
+ if ($(g.cEdit).find('.edit_box').val() !== '') {
+ $checkbox.prop('checked', false);
+ } else {
+ $checkbox.prop('checked', true);
+ }
+ });
+ // if null checkbox is clicked empty the corresponding select/editor.
+ $checkbox.on('click', function () {
+ if ($td.is('.enum')) {
+ $editArea.find('select').val('');
+ } else if ($td.is('.set')) {
+ $editArea.find('select').find('option').each(function () {
+ var $option = $(this);
+ $option.prop('selected', false);
+ });
+ } else if ($td.is('.relation')) {
+ // if the dropdown is there to select the foreign value
+ if ($editArea.find('select').length > 0) {
+ $editArea.find('select').val('');
+ }
+ } else {
+ $editArea.find('textarea').val('');
+ }
+ $(g.cEdit).find('.edit_box').val('');
+ });
+ }
+
+ // reset the position of the edit_area div after closing datetime picker
+ $(g.cEdit).find('.edit_area').css({ 'top' :'0','position':'' });
+
+ var postParams;
+ if ($td.is('.relation')) {
+ // handle relations
+ $editArea.addClass('edit_area_loading');
+
+ // initialize the original data
+ $td.data('original_data', null);
+
+ /**
+ * @var post_params Object containing parameters for the POST request
+ */
+ postParams = {
+ 'ajax_request' : true,
+ 'get_relational_values' : true,
+ 'server' : g.server,
+ 'db' : g.db,
+ 'table' : g.table,
+ 'column' : fieldName,
+ 'curr_value' : relationCurrValue,
+ 'relation_key_or_display_column' : relationKeyOrDisplayColumn
+ };
+
+ g.lastXHR = $.post('sql.php', postParams, function (data) {
+ g.lastXHR = null;
+ $editArea.removeClass('edit_area_loading');
+ if ($(data.dropdown).is('select')) {
+ // save original_data
+