From cf831935cb7b4db4c05858a75aee4cc0d5461b64 Mon Sep 17 00:00:00 2001 From: Jo Michael Date: Thu, 12 Apr 2012 02:33:51 +0200 Subject: [PATCH] - bug #3516817 [interface] "More" actions in table structure --- ChangeLog | 1 + js/functions.js | 155 --------------------------------- js/tbl_structure.js | 206 ++++++++++++++++++++++++++++++++++++++++++++ tbl_structure.php | 54 ++++++++---- 4 files changed, 242 insertions(+), 174 deletions(-) diff --git a/ChangeLog b/ChangeLog index 111cc5cbaa..5268a11189 100644 --- a/ChangeLog +++ b/ChangeLog @@ -15,6 +15,7 @@ phpMyAdmin - ChangeLog - bug #3516761 [edit] Query error after search - bug #3516405 [display] Chart title is getting wrong within chart export - bug #3517021 [interface] Header links except 'More' hide after closing dialog +- bug #3516817 [interface] "More" actions in table structure 3.5.0.0 (2012-04-07) + rfe #2021981 [interface] Add support for mass prefix change. diff --git a/js/functions.js b/js/functions.js index 694b634a35..60ef801a65 100644 --- a/js/functions.js +++ b/js/functions.js @@ -2148,80 +2148,6 @@ $(document).ready(function() { }, 'top.frame_content'); //end $(document).ready for 'Create Table' -/** - * jQuery coding for 'Change Table' and 'Add Column'. Used on tbl_structure.php * - * Attach Ajax Event handlers for Change Table - */ -$(document).ready(function() { - /** - *Ajax action for submitting the "Column Change" and "Add Column" form - **/ - $("#append_fields_form input[name=do_save_data]").live('click', function(event) { - event.preventDefault(); - /** - * @var the_form object referring to the export form - */ - var $form = $("#append_fields_form"); - - /* - * First validate the form; if there is a problem, avoid submitting it - * - * checkTableEditForm() needs a pure element and not a jQuery object, - * this is why we pass $form[0] as a parameter (the jQuery object - * is actually an array of DOM elements) - */ - if (checkTableEditForm($form[0], $form.find('input[name=orig_num_fields]').val())) { - // OK, form passed validation step - if ($form.hasClass('ajax')) { - PMA_prepareForAjaxRequest($form); - //User wants to submit the form - $.post($form.attr('action'), $form.serialize()+"&do_save_data=Save", function(data) { - if ($("#sqlqueryresults").length != 0) { - $("#sqlqueryresults").remove(); - } else if ($(".error").length != 0) { - $(".error").remove(); - } - if (data.success == true) { - PMA_ajaxShowMessage(data.message); - $("
").insertAfter("#floating_menubar"); - $("#sqlqueryresults").html(data.sql_query); - $("#result_query .notice").remove(); - $("#result_query").prepend((data.message)); - if ($("#change_column_dialog").length > 0) { - $("#change_column_dialog").dialog("close").remove(); - } else if ($("#add_columns").length > 0) { - $("#add_columns").dialog("close").remove(); - } - /*Reload the field form*/ - $.post($("#fieldsForm").attr('action'), $("#fieldsForm").serialize()+"&ajax_request=true", function(form_data) { - $("#fieldsForm").remove(); - $("#addColumns").remove(); - var $temp_div = $("
").append(form_data); - if ($("#sqlqueryresults").length != 0) { - $temp_div.find("#fieldsForm").insertAfter("#sqlqueryresults"); - } else { - $temp_div.find("#fieldsForm").insertAfter(".error"); - } - $temp_div.find("#addColumns").insertBefore("iframe.IE_hack"); - /*Call the function to display the more options in table*/ - displayMoreTableOpts(); - }); - } else { - var $temp_div = $("
").append(data); - var $error = $temp_div.find(".error code").addClass("error"); - PMA_ajaxShowMessage($error, false); - } - }) // end $.post() - } else { - // non-Ajax submit - $form.append(''); - $form.submit(); - } - } - }) // end change table button "do_save_data" - -}, 'top.frame_content'); //end $(document).ready for 'Change Table' - /** * jQuery coding for 'Table operations'. Used on tbl_operations.php * Attach Ajax Event handlers for Table operations @@ -2717,87 +2643,6 @@ $(document).ready(function() { }); }); -/** - * Hides certain table structure actions, replacing them - * with the word "More". They are displayed in a dropdown - * menu when the user hovers over the word "More." - */ -$(document).ready(function() { - displayMoreTableOpts(); -}); - -function displayMoreTableOpts() -{ - // Remove the actions from the table cells (they are available by default for JavaScript-disabled browsers) - // if the table is not a view or information_schema (otherwise there is only one action to hide and there's no point) - if($("input[type='hidden'][name='table_type']").val() == "table") { - var $table = $("table[id='tablestructure']"); - $table.find("td[class='browse']").remove(); - $table.find("td[class='primary']").remove(); - $table.find("td[class='unique']").remove(); - $table.find("td[class='index']").remove(); - $table.find("td[class='fulltext']").remove(); - $table.find("td[class='spatial']").remove(); - $table.find("th[class='action']").attr("colspan", 3); - - // Display the "more" text - $table.find("td[class='more_opts']").show(); - - // Position the dropdown - $(".structure_actions_dropdown").each(function() { - // Optimize DOM querying - var $this_dropdown = $(this); - // The top offset must be set for IE even if it didn't change - var cell_right_edge_offset = $this_dropdown.parent().position().left + $this_dropdown.parent().innerWidth(); - var left_offset = cell_right_edge_offset - $this_dropdown.innerWidth(); - var top_offset = $this_dropdown.parent().position().top + $this_dropdown.parent().innerHeight(); - $this_dropdown.offset({ top: top_offset, left: left_offset }); - }); - - // A hack for IE6 to prevent the after_field select element from being displayed on top of the dropdown by - // positioning an iframe directly on top of it - var $after_field = $("select[name='after_field']"); - $("iframe[class='IE_hack']") - .width($after_field.width()) - .height($after_field.height()) - .offset({ - top: $after_field.offset().top, - left: $after_field.offset().left - }); - - // When "more" is hovered over, show the hidden actions - $table.find("td[class='more_opts']") - .mouseenter(function() { - if($.browser.msie && $.browser.version == "6.0") { - $("iframe[class='IE_hack']") - .show() - .width($after_field.width()+4) - .height($after_field.height()+4) - .offset({ - top: $after_field.offset().top, - left: $after_field.offset().left - }); - } - $(".structure_actions_dropdown").hide(); // Hide all the other ones that may be open - $(this).children(".structure_actions_dropdown").show(); - // Need to do this again for IE otherwise the offset is wrong - if($.browser.msie) { - var left_offset_IE = $(this).offset().left + $(this).innerWidth() - $(this).children(".structure_actions_dropdown").innerWidth(); - var top_offset_IE = $(this).offset().top + $(this).innerHeight(); - $(this).children(".structure_actions_dropdown").offset({ - top: top_offset_IE, - left: left_offset_IE }); - } - }) - .mouseleave(function() { - $(this).children(".structure_actions_dropdown").hide(); - if($.browser.msie && $.browser.version == "6.0") { - $("iframe[class='IE_hack']").hide(); - } - }); - } - -} $(document).ready(function(){ PMA_convertFootnotesToTooltips(); }); diff --git a/js/tbl_structure.js b/js/tbl_structure.js index 1e1d696f46..680f117f22 100644 --- a/js/tbl_structure.js +++ b/js/tbl_structure.js @@ -474,3 +474,209 @@ function changeColumns(action,url) }) // end $.get() } +/** + * jQuery coding for 'Change Table' and 'Add Column'. Used on tbl_structure.php * + * Attach Ajax Event handlers for Change Table + */ +$(document).ready(function() { + /** + *Ajax action for submitting the "Column Change" and "Add Column" form + **/ + $("#append_fields_form input[name=do_save_data]").live('click', function(event) { + event.preventDefault(); + /** + * @var the_form object referring to the export form + */ + var $form = $("#append_fields_form"); + + /* + * First validate the form; if there is a problem, avoid submitting it + * + * checkTableEditForm() needs a pure element and not a jQuery object, + * this is why we pass $form[0] as a parameter (the jQuery object + * is actually an array of DOM elements) + */ + if (checkTableEditForm($form[0], $form.find('input[name=orig_num_fields]').val())) { + // OK, form passed validation step + if ($form.hasClass('ajax')) { + PMA_prepareForAjaxRequest($form); + //User wants to submit the form + $.post($form.attr('action'), $form.serialize()+"&do_save_data=Save", function(data) { + if ($("#sqlqueryresults").length != 0) { + $("#sqlqueryresults").remove(); + } else if ($(".error").length != 0) { + $(".error").remove(); + } + if (data.success == true) { + PMA_ajaxShowMessage(data.message); + $("
").insertAfter("#floating_menubar"); + $("#sqlqueryresults").html(data.sql_query); + $("#result_query .notice").remove(); + $("#result_query").prepend((data.message)); + if ($("#change_column_dialog").length > 0) { + $("#change_column_dialog").dialog("close").remove(); + } else if ($("#add_columns").length > 0) { + $("#add_columns").dialog("close").remove(); + } + /*Reload the field form*/ + $.post($("#fieldsForm").attr('action'), $("#fieldsForm").serialize()+"&ajax_request=true", function(form_data) { + $("#fieldsForm").remove(); + $("#addColumns").remove(); + var $temp_div = $("
").append(form_data); + if ($("#sqlqueryresults").length != 0) { + $temp_div.find("#fieldsForm").insertAfter("#sqlqueryresults"); + } else { + $temp_div.find("#fieldsForm").insertAfter(".error"); + } + $temp_div.find("#addColumns").insertBefore("iframe.IE_hack"); + /*Call the function to display the more options in table*/ + $table_clone = false; + moreOptsMenuResize(); + }); + } else { + var $temp_div = $("
").append(data); + var $error = $temp_div.find(".error code").addClass("error"); + PMA_ajaxShowMessage($error, false); + } + }) // end $.post() + } else { + // non-Ajax submit + $form.append(''); + $form.submit(); + } + } + }) // end change table button "do_save_data" + +}, 'top.frame_content'); //end $(document).ready for 'Change Table' + +/** + * Hides certain table structure actions, replacing them + * with the word "More". They are displayed in a dropdown + * menu when the user hovers over the word "More." + */ + +var $table_clone = false; + +function moreOptsMenuResize() { + var $table = $("table#tablestructure"); + + // don't use More menu if we're only showing icons and no text + if ($table.hasClass("PropertiesIconic")) { + return; + } + + // reset table to defaults + if ($table_clone === false) { + $table_clone = $table.clone(); + } + else { + $table.replaceWith($table_clone); + $table = $table_clone; + $table_clone = $table.clone(); + } + + var getCurWidth = function() { + var cur_width = 0; + $table.find("tr").eq(1) + .find("td.edit, td.drop, .replaced_by_more:visible, .more_opts:visible") + .each(function () { + cur_width += $(this).outerWidth(); + }); + return cur_width; + }; + + // get window width + var window_width = $(window).width(); + // find out maximum action links width + var max_width = window_width; + $table.find("th").each(function () { + if ($(this).index() < 8) { + max_width -= $(this).outerWidth() + 1; + } + }); + // current action links width + var cur_width = getCurWidth(); + + // remove some links if current width is wider than maximum allowed + if (cur_width > max_width) { + while (cur_width > max_width + && $(".replaced_by_more:visible").length > 0) { + + // hide last visible element + var css_class = $table.find("tr").eq(1) + .find(".replaced_by_more:visible").last().prop("className").split(" "); + $table.find("." + css_class.join(".")).hide(); + // show corresponding more-menu entry + $table.find(".replace_in_more.action_" + css_class[0]).show(); + // recalculate width + cur_width = getCurWidth(); + } + } + + if ($(".replaced_by_more:hidden").length == 0) { + $table.find("td.more_opts").hide(); + } + else { + $table.find("td.more_opts").show(); + } + + // Position the dropdown + $(".structure_actions_dropdown").each(function() { + // Optimize DOM querying + var $this_dropdown = $(this); + // The top offset must be set for IE even if it didn't change + var cell_right_edge_offset = $this_dropdown.parent().position().left + $this_dropdown.parent().innerWidth(); + var left_offset = cell_right_edge_offset - $this_dropdown.innerWidth(); + var top_offset = $this_dropdown.parent().position().top + $this_dropdown.parent().innerHeight(); + $this_dropdown.offset({ top: top_offset, left: left_offset }); + }); + + // A hack for IE6 to prevent the after_field select element from being displayed on top of the dropdown by + // positioning an iframe directly on top of it + var $after_field = $("select[name='after_field']"); + $("iframe[class='IE_hack']") + .width($after_field.width()) + .height($after_field.height()) + .offset({ + top: $after_field.offset().top, + left: $after_field.offset().left + }); + + // When "more" is hovered over, show the hidden actions + $table.find("td.more_opts") + .unbind("mouseenter") + .bind("mouseenter", function() { + if($.browser.msie && $.browser.version == "6.0") { + $("iframe[class='IE_hack']") + .show() + .width($after_field.width()+4) + .height($after_field.height()+4) + .offset({ + top: $after_field.offset().top, + left: $after_field.offset().left + }); + } + $(".structure_actions_dropdown").hide(); // Hide all the other ones that may be open + $(this).children(".structure_actions_dropdown").show(); + // Need to do this again for IE otherwise the offset is wrong + if($.browser.msie) { + var left_offset_IE = $(this).offset().left + $(this).innerWidth() - $(this).children(".structure_actions_dropdown").innerWidth(); + var top_offset_IE = $(this).offset().top + $(this).innerHeight(); + $(this).children(".structure_actions_dropdown").offset({ + top: top_offset_IE, + left: left_offset_IE }); + } + }) + .unbind("mouseleave") + .bind("mouseleave", function() { + $(this).children(".structure_actions_dropdown").hide(); + if($.browser.msie && $.browser.version == "6.0") { + $("iframe[class='IE_hack']").hide(); + } + }); +} +$(window).resize(moreOptsMenuResize); +$(function () { + $(".replace_in_more").hide(); + moreOptsMenuResize(); +}); diff --git a/tbl_structure.php b/tbl_structure.php index 15920ce696..96a95a9d09 100644 --- a/tbl_structure.php +++ b/tbl_structure.php @@ -193,7 +193,8 @@ $i = 0; echo '"table" />'; } ?> - +
@@ -208,7 +209,16 @@ $i = 0; - + @@ -359,10 +369,6 @@ foreach ($fields as $row) { echo '' . _pgettext('None for default', 'None') . ''; } ?> - - + + - - - + if ($GLOBALS['cfg']['PropertiesIconic'] !== true) { ?>
- - - @@ -372,7 +378,13 @@ foreach ($fields as $row) { href="sql.php?&sql_query=&dropped_column=&message_to_show=" > + + + + + hasColumn($field_name))) { echo $titles['NoPrimary'] . "\n"; @@ -387,7 +399,7 @@ foreach ($fields as $row) { echo "\n"; ?> + + + + - + @@ -453,24 +467,25 @@ foreach ($fields as $row) { } else { echo "\n"; ?> - +
-
+
-
> +
@@ -483,7 +498,7 @@ foreach ($fields as $row) { } } ?>
-
+
@@ -496,7 +511,7 @@ foreach ($fields as $row) { } } ?>
-
+
@@ -510,7 +525,7 @@ foreach ($fields as $row) { } ?>
-
+
@@ -523,7 +538,7 @@ foreach ($fields as $row) { } } ?>
-
+
@@ -540,6 +555,7 @@ foreach ($fields as $row) {