Better "event scheduler" functionality
This commit is contained in:
Rouslan Placella
parent
4cbef2bdf6
commit
4f4efd231d
130
js/functions.js
130
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
|
||||
*/
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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 = "<noscript>\n";
|
||||
$retval .= "<div class='wrapper'>\n";
|
||||
$retval .= " <form action='$action' method='post'>\n";
|
||||
$retval .= " <select name='$select_name'>\n";
|
||||
$retval .= " <option value='{$options[1]['value']}'$selected1>";
|
||||
$retval .= " {$options[1]['label']}\n";
|
||||
$retval .= " </option>\n";
|
||||
$retval .= " <option value='{$options[0]['value']}'$selected0>";
|
||||
$retval .= " {$options[0]['label']}\n";
|
||||
$retval .= " </option>\n";
|
||||
$retval .= " </select>\n";
|
||||
$retval .= " <input type='submit' value='" . __('Change') . "'/>\n";
|
||||
$retval .= " </form>\n";
|
||||
$retval .= "</div>\n";
|
||||
$retval .= "</noscript>\n";
|
||||
$retval .= "<div class='wrapper toggleAjax hide'>\n";
|
||||
$retval .= " <div class='toggleButton'>\n";
|
||||
$retval .= " <div title='" . __('Click to toggle') . "' class='container $state'>\n";
|
||||
$retval .= " <img src='{$GLOBALS['pmaThemeImage']}toggle-{$GLOBALS['text_dir']}.png'\n";
|
||||
$retval .= " alt='' />\n";
|
||||
$retval .= " <table cellspacing='0' cellpadding='0'><tr>\n";
|
||||
$retval .= " <tbody>\n";
|
||||
$retval .= " <td class='toggleOn'>\n";
|
||||
$retval .= " <span class='hide'>$link_on</span>\n";
|
||||
$retval .= " <div>";
|
||||
$retval .= str_replace(' ', ' ', $options[1]['label']) . "</div>\n";
|
||||
$retval .= " </td>\n";
|
||||
$retval .= " <td><div> </div></td>\n";
|
||||
$retval .= " <td class='toggleOff'>\n";
|
||||
$retval .= " <span class='hide'>$link_off</span>\n";
|
||||
$retval .= " <div>";
|
||||
$retval .= str_replace(' ', ' ', $options[0]['label']) . "</div>\n";
|
||||
$retval .= " </div>\n";
|
||||
$retval .= " </tbody>\n";
|
||||
$retval .= " </tr></table>\n";
|
||||
$retval .= " <span class='hide callback'>$callback</span>\n";
|
||||
$retval .= " <span class='hide text_direction'>{$GLOBALS['text_dir']}</span>\n";
|
||||
$retval .= " </div>\n";
|
||||
$retval .= " </div>\n";
|
||||
$retval .= "</div>\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 '</fieldset>' . "\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 = '<table style="width: 100%;"><tr><td style="width: 50%;">';
|
||||
$schedulerFieldset = '</td><td><fieldset style="margin: 1em 0;">' . "\n"
|
||||
. PMA_getIcon('b_events.png')
|
||||
. ($es_state === 'ON' ? __('The event scheduler is enabled') : __('The event scheduler is disabled')) . ':'
|
||||
. ' <a href="db_events.php?' . $url_query . '&toggle_scheduler=' . $es_change . '">'
|
||||
. ($es_change === 'ON' ? __('Turn it on') : __('Turn it off'))
|
||||
. '</a>' . "\n"
|
||||
. '</fieldset></td></tr></table>' . "\n";
|
||||
}
|
||||
|
||||
/**
|
||||
* Display the form for adding a new event
|
||||
*/
|
||||
echo $tableStart . '<fieldset style="margin: 1em 0;">' . "\n"
|
||||
. ' <a href="db_events.php?' . $url_query . '&addevent=1" ' . $conditional_class_add . '>' . "\n"
|
||||
. PMA_getIcon('b_event_add.png') . __('Add a new Event') . '</a>' . "\n"
|
||||
. '</fieldset>' . "\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 "<fieldset>\n"
|
||||
. "<div class='operations_half_width'>\n"
|
||||
. " <a href='db_events.php?$url_query&addevent=1'$conditional_class_add>\n"
|
||||
. " " . PMA_getIcon('b_event_add.png') . __('Add a new Event') . "</a>\n"
|
||||
. "</div>\n"
|
||||
. "<div class='operations_half_width'>\n"
|
||||
. " <div class='wrapper'>\n"
|
||||
. " " . __('Event scheduler') . " \n"
|
||||
. " </div>\n"
|
||||
. $event_scheduler
|
||||
. "</div>\n"
|
||||
. "</fieldset>\n";
|
||||
|
||||
?>
|
||||
|
||||
@ -1883,6 +1883,37 @@ fieldset .disabled-field td {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
float: <?php echo $left; ?>;
|
||||
}
|
||||
.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;
|
||||
|
||||
BIN
themes/original/img/toggle-ltr.png
Normal file
BIN
themes/original/img/toggle-ltr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 232 B |
BIN
themes/original/img/toggle-rtl.png
Normal file
BIN
themes/original/img/toggle-rtl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 B |
@ -2235,6 +2235,41 @@ fieldset .disabled-field td {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
float: <?php echo $left; ?>;
|
||||
}
|
||||
.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;
|
||||
|
||||
BIN
themes/pmahomme/img/toggle-ltr.png
Normal file
BIN
themes/pmahomme/img/toggle-ltr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 425 B |
BIN
themes/pmahomme/img/toggle-rtl.png
Normal file
BIN
themes/pmahomme/img/toggle-rtl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 427 B |
Loading…
Reference in New Issue
Block a user
