diff --git a/js/functions.js b/js/functions.js index 436805c200..6669f7406f 100644 --- a/js/functions.js +++ b/js/functions.js @@ -2305,6 +2305,136 @@ function PMA_init_slider() { }); } +/** + * var toggleButton This is a function that creates a toggle + * sliding button given a jQuery reference + * to the correct DOM element + */ +var toggleButton = function ($obj) { + // In rtl mode the toggle switch is flipped horizontally + // so we need to take that into account + if ($('.text_direction', $obj).text() == 'ltr') { + var right = 'right'; + } else { + var right = 'left'; + } + /** + * var h Height of the button, used to scale the + * background image and position the layers + */ + var h = $obj.height(); + $('img', $obj).height(h); + $('table', $obj).css('bottom', h-1); + /** + * var on Width of the "ON" part of the toggle switch + * var off Width of the "OFF" part of the toggle switch + */ + var on = $('.toggleOn', $obj).width(); + var off = $('.toggleOff', $obj).width(); + // Make the "ON" and "OFF" parts of the switch the same size + $('.toggleOn > div', $obj).width(Math.max(on, off)); + $('.toggleOff > div', $obj).width(Math.max(on, off)); + /** + * var w Width of the central part of the switch + */ + var w = parseInt(($('img', $obj).height() / 16) * 22, 10); + // Resize the central part of the switch on the top + // layer to match the background + $('table td:nth-child(2) > div', $obj).width(w); + /** + * var imgw Width of the background image + * var tblw Width of the foreground layer + * var offset By how many pixels to move the background + * image, so that it matches the top layer + */ + var imgw = $('img', $obj).width(); + var tblw = $('table', $obj).width(); + var offset = parseInt(((imgw - tblw) / 2), 10); + // Move the background to match the layout of the top layer + $obj.find('img').css(right, offset); + /** + * var offw Outer width of the "ON" part of the toggle switch + * var btnw Outer width of the central part of the switch + */ + var offw = $('.toggleOff', $obj).outerWidth(); + var btnw = $('table td:nth-child(2)', $obj).outerWidth(); + // Resize the main div so that exactly one side of + // the switch plus the central part fit into it. + $obj.width(offw + btnw + 2); + /** + * var move How many pixels to move the + * switch by when toggling + */ + var move = $('.toggleOff', $obj).outerWidth(); + // If the switch is initialized to the + // OFF state we need to move it now. + if ($('.container', $obj).hasClass('off')) { + if (right == 'right') { + $('table, img', $obj).animate({'left': '-=' + move + 'px'}, 0); + } else { + $('table, img', $obj).animate({'left': '+=' + move + 'px'}, 0); + } + } + // Attach an 'onclick' event to the switch + $('.container', $obj).click(function () { + if ($(this).hasClass('isActive')) { + return false; + } else { + $(this).addClass('isActive'); + } + var $msg = PMA_ajaxShowMessage(PMA_messages['strLoading']); + var $container = $(this); + var callback = $('.callback', this).text(); + // Perform the actual toggle + if ($(this).hasClass('on')) { + if (right == 'right') { + var operator = '-='; + } else { + var operator = '+='; + } + var url = $(this).find('.toggleOff > span').text(); + var removeClass = 'on'; + var addClass = 'off'; + } else { + if (right == 'right') { + var operator = '+='; + } else { + var operator = '-='; + } + var url = $(this).find('.toggleOn > span').text(); + var removeClass = 'off'; + var addClass = 'on'; + } + $.post(url, {'ajax_request': true}, function(data) { + if(data.success == true) { + PMA_ajaxRemoveMessage($msg); + $container + .removeClass(removeClass) + .addClass(addClass) + .animate({'left': operator + move + 'px'}, function () { + $container.removeClass('isActive'); + }); + eval(callback); + } else { + PMA_ajaxShowMessage(data.error); + $container.removeClass('isActive'); + } + }); + }); +}; + +/** + * Initialise all toggle buttons + */ +$(window).load(function () { + $('.toggleAjax').each(function () { + $(this) + .show() + .find('.toggleButton') + toggleButton($(this)); + }); +}); + /** * Vertical pointer */ diff --git a/libraries/common.inc.php b/libraries/common.inc.php index 5bdb45e51b..3bca2d63f1 100644 --- a/libraries/common.inc.php +++ b/libraries/common.inc.php @@ -363,6 +363,7 @@ $goto_whitelist = array( 'db_create.php', 'db_datadict.php', 'db_sql.php', + 'db_events.php', 'db_export.php', 'db_importdocsql.php', 'db_qbe.php', diff --git a/libraries/db_events.inc.php b/libraries/db_events.inc.php index b4ca2e5fc5..40e293f2fa 100644 --- a/libraries/db_events.inc.php +++ b/libraries/db_events.inc.php @@ -7,6 +7,72 @@ if (! defined('PHPMYADMIN')) { exit; } +/** + * TODO: comment + */ +function PMA_toggleButton($action, $select_name, $options, $callback) +{ + // Do the logic first + $link_on = "$action&$select_name=" . urlencode($options[1]['value']); + $link_off = "$action&$select_name=" . urlencode($options[0]['value']); + if ($options[1]['selected'] == true) { + $state = 'on'; + } else if ($options[0]['selected'] == true) { + $state = 'off'; + } else { + $state = 'on'; + } + $selected1 = ''; + $selected0 = ''; + if ($options[1]['selected'] == true) { + $selected1 = " selected='selected'"; + } else if ($options[0]['selected'] == true) { + $selected0 = " selected='selected'"; + } + // Generate output + $retval = "\n"; + $retval .= "
\n"; + $retval .= "
\n"; + $retval .= "
\n"; + $retval .= " \n"; + $retval .= " \n"; + $retval .= "
 
\n"; + $retval .= " \n"; + $retval .= " $link_off\n"; + $retval .= "
"; + $retval .= str_replace(' ', ' ', $options[0]['label']) . "
\n"; + $retval .= "
\n"; + $retval .= " \n"; + $retval .= " \n"; + $retval .= " $callback\n"; + $retval .= " {$GLOBALS['text_dir']}\n"; + $retval .= "
\n"; + $retval .= "
\n"; + $retval .= "\n"; + + return $retval; +} $events = PMA_DBI_fetch_result('SELECT EVENT_NAME, EVENT_TYPE FROM information_schema.EVENTS WHERE EVENT_SCHEMA= \'' . PMA_sqlAddslashes($db,true) . '\';'); @@ -104,47 +170,44 @@ if (! $events) { } echo '' . "\n"; -/** - * If there has been a request to change the state - * of the event scheduler, process it now. - */ -if (! empty($_GET['toggle_scheduler'])) { - $new_scheduler_state = $_GET['toggle_scheduler']; - if ($new_scheduler_state === 'ON' || $new_scheduler_state === 'OFF') { - PMA_DBI_query("SET GLOBAL event_scheduler='$new_scheduler_state'"); - } -} - -/** - * Prepare to show the event scheduler fieldset, if necessary - */ -$tableStart = ''; -$schedulerFieldset = ''; -$es_state = PMA_DBI_fetch_value("SHOW GLOBAL VARIABLES LIKE 'event_scheduler'", 0, 1); -if ($es_state === 'ON' || $es_state === 'OFF') { - $es_change = ($es_state == 'ON') ? 'OFF' : 'ON'; - $tableStart = '
'; - $schedulerFieldset = '
' . "\n" - . PMA_getIcon('b_events.png') - . ($es_state === 'ON' ? __('The event scheduler is enabled') : __('The event scheduler is disabled')) . ':' - . ' ' - . ($es_change === 'ON' ? __('Turn it on') : __('Turn it off')) - . '' . "\n" - . '
' . "\n"; -} - -/** - * Display the form for adding a new event - */ -echo $tableStart . '
' . "\n" - . ' ' . "\n" - . PMA_getIcon('b_event_add.png') . __('Add a new Event') . '' . "\n" - . '
' . "\n"; - /** * Display the state of the event scheduler * and offer an option to toggle it. */ -echo $schedulerFieldset; +$es_state = strtolower(PMA_DBI_fetch_value("SHOW GLOBAL VARIABLES LIKE 'event_scheduler'", 0, 1)); +$options = array( + 0 => array( + 'label' => __('OFF'), + 'value' => "SET GLOBAL event_scheduler=\"OFF\"", + 'selected' => ($es_state != 'on') + ), + 1 => array( + 'label' => __('ON'), + 'value' => "SET GLOBAL event_scheduler=\"ON\"", + 'selected' => ($es_state == 'on') + ) + ); +$event_scheduler = PMA_toggleButton( + "sql.php?$url_query&goto=db_events.php" . urlencode("?db=$db"), + 'sql_query', + $options, + 'PMA_slidingMessage(data.sql_query);' + ); +/** + * Display the form for adding a new event + * and toggling the event scheduler + */ +echo "
\n" + . "
\n" + . " \n" + . " " . PMA_getIcon('b_event_add.png') . __('Add a new Event') . "\n" + . "
\n" + . "
\n" + . "
\n" + . "   " . __('Event scheduler') . "   \n" + . "
\n" + . $event_scheduler + . "
\n" + . "
\n"; ?> diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php index 932f6b89cb..fdad01f3d2 100644 --- a/themes/original/css/theme_right.css.php +++ b/themes/original/css/theme_right.css.php @@ -1883,6 +1883,37 @@ fieldset .disabled-field td { padding: 2px; } +.wrapper { + float: ; +} +.toggleButton { + position: relative; + cursor: pointer; + font-size: 0.8em; + text-align: center; + line-height: 1.55em; + height: 1.55em; + overflow: hidden; + border-right: 0.1em solid #888; + border-left: 0.1em solid #888; +} +.toggleButton table, +.toggleButton td, +.toggleButton img { + padding: 0; + position: relative; +} +.toggleButton .container { + position: absolute; +} +.toggleButton .toggleOn { + color: white; + padding: 0 1em; +} +.toggleButton .toggleOff { + padding: 0 1em; +} + #table_columns input, #table_columns select { width: 14em; box-sizing: border-box; diff --git a/themes/original/img/toggle-ltr.png b/themes/original/img/toggle-ltr.png new file mode 100644 index 0000000000..bc312a9e39 Binary files /dev/null and b/themes/original/img/toggle-ltr.png differ diff --git a/themes/original/img/toggle-rtl.png b/themes/original/img/toggle-rtl.png new file mode 100644 index 0000000000..e81640e916 Binary files /dev/null and b/themes/original/img/toggle-rtl.png differ diff --git a/themes/pmahomme/css/theme_right.css.php b/themes/pmahomme/css/theme_right.css.php index ba5a926c38..f44cd860c2 100644 --- a/themes/pmahomme/css/theme_right.css.php +++ b/themes/pmahomme/css/theme_right.css.php @@ -2235,6 +2235,41 @@ fieldset .disabled-field td { padding: 2px; } +.wrapper { + float: ; +} +.toggleButton { + position: relative; + cursor: pointer; + font-size: 0.8em; + text-align: center; + line-height: 1.55em; + height: 1.55em; + overflow: hidden; + border-right: 0.1em solid #888; + border-left: 0.1em solid #888; + -webkit-border-radius: 0.3em; + -moz-border-radius: 0.3em; + border-radius: 0.3em; +} +.toggleButton table, +.toggleButton td, +.toggleButton img { + padding: 0; + position: relative; +} +.toggleButton .container { + position: absolute; +} +.toggleButton .toggleOn { + color: white; + padding: 0 1em; + text-shadow: 0px 0px 0.2em #000; +} +.toggleButton .toggleOff { + padding: 0 1em; +} + #table_columns input, #table_columns select { width: 14em; box-sizing: border-box; diff --git a/themes/pmahomme/img/toggle-ltr.png b/themes/pmahomme/img/toggle-ltr.png new file mode 100644 index 0000000000..6dce09c51c Binary files /dev/null and b/themes/pmahomme/img/toggle-ltr.png differ diff --git a/themes/pmahomme/img/toggle-rtl.png b/themes/pmahomme/img/toggle-rtl.png new file mode 100644 index 0000000000..5b14cefa37 Binary files /dev/null and b/themes/pmahomme/img/toggle-rtl.png differ