WordPress mu-plugin that adds admin bar integration to indicate whether dev/staging site is clean or dirty. https://cloudup.com/cip1BZXH8kC
<?php
class CSSLLC_ChangeIndicator {
function __construct() {
add_action( 'wp_ajax_cssllc-change-indicator', array( &$this, 'action_ajax' ) );
add_action( 'admin_enqueue_scripts', array( &$this, 'action_enqueue_scripts' ) );
add_action( 'wp_enqueue_scripts', array( &$this, 'action_enqueue_scripts' ) );
add_action( 'admin_bar_menu', array( &$this, 'action_admin_bar_menu' ) );
}
function action_ajax() {
if ( !$this->_get_transient() ) {
$user = wp_get_current_user();
error_log( 'Install has been set to dirty by ' . $user->user_login . '.' );
echo set_transient( $this->_get_transient_name(), 1 );
}
wp_die();
}
function action_enqueue_scripts() {
wp_add_inline_style( 'admin-bar', $this->get_css() );
wp_add_inline_script( 'admin-bar', $this->get_js() );
}
function action_admin_bar_menu( $bar ) {
$bar->add_menu( array(
'id' => 'cssllc-change-indicator',
'title' => $this->get_html(),
'parent' => 'top-secondary',
) );
}
private function _get_transient_name() {
return __CLASS__;
}
private function _get_transient() {
return !!get_transient( $this->_get_transient_name() );
}
function get_status() {
return $this->_get_transient() ? 'dirty' : 'clean';
}
function get_html() {
ob_start();
?>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="cssllc-change-indicator-toggle"<?php echo $this->_get_transient() ? ' checked="checked" disabled="disabled"' : '' ?> />
<label class="onoffswitch-label" for="_cssllc-change-indicator-toggle">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<?php
return ob_get_clean();
}
function get_css() {
ob_start();
?>
#wpadminbar .onoffswitch {
position: relative; width: 82px; margin-top: 4px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
overflow: hidden;
}
#wpadminbar .onoffswitch-checkbox {
display: none;
}
#wpadminbar .onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid transparent; border-radius: 20px;
}
#wpadminbar .onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
#wpadminbar .onoffswitch-inner:before, #wpadminbar .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
font-size: 11px; color: white; font-weight: 300; letter-spacing: 1px;
background-color: #23282D; color: #EEE;
box-sizing: border-box;
}
#wpadminbar .onoffswitch-inner:before {
content: "DIRTY";
background-color: #d54e21;
}
#wpadminbar .onoffswitch-inner:after {
content: "CLEAN";
padding-right: 10px;
background-color: #0073aa;
text-align: right;
}
#wpadminbar .onoffswitch-switch {
display: block; width: 12px; height: 12px; margin: 1px;
background: #EEE;
position: absolute; top: 3px; bottom: 3px;
right: 60px;
border: 2px solid #EEE; border-radius: 20px;
transition: transform 0.3s ease-in 0s;
will-change: transform;
}
#wpadminbar .onoffswitch:hover .onoffswitch-switch { transform: translateX( 4px ); }
#wpadminbar .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
#wpadminbar .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner:before {
text-align: center;
}
#wpadminbar .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
transform: translateX( 77px );
background-color: #EEE;
}
#wpadminbar .onoffswitch-inner:before, #wpadminbar .onoffswitch-inner:after {
font-weight: 400; letter-spacing: 1px;
}
#wp-admin-bar-cssllc-change-indicator:hover > .ab-item { background-color: transparent !important; }
body.admin-color-light #wpadminbar .onoffswitch-inner:before { background-color: #d54e21; }
body.admin-color-light #wpadminbar .onoffswitch-inner:after { background-color: #888; }
body.admin-color-blue #wpadminbar .onoffswitch-inner:before { background-color: #e1a948; }
body.admin-color-blue #wpadminbar .onoffswitch-inner:after { background-color: #096484; }
body.admin-color-coffee #wpadminbar .onoffswitch-inner:before { background-color: #9ea476; }
body.admin-color-coffee #wpadminbar .onoffswitch-inner:after { background-color: #c7a589; }
body.admin-color-ectoplasm #wpadminbar .onoffswitch-inner:before { background-color: #d46f15; }
body.admin-color-ectoplasm #wpadminbar .onoffswitch-inner:after { background-color: #a3b745; }
body.admin-color-midnight #wpadminbar .onoffswitch-inner:before { background-color: #69a8bb; }
body.admin-color-midnight #wpadminbar .onoffswitch-inner:after { background-color: #e14d43; }
body.admin-color-ocean #wpadminbar .onoffswitch-inner:before { background-color: #aa9d88; }
body.admin-color-ocean #wpadminbar .onoffswitch-inner:after { background-color: #9ebaa0; }
body.admin-color-sunrise #wpadminbar .onoffswitch-inner:before { background-color: #ccaf0b; }
body.admin-color-sunrise #wpadminbar .onoffswitch-inner:after { background-color: #dd823b; }
<?php
return ob_get_clean();
}
function get_js() {
ob_start();
?>
jQuery( document ).ready( function() {
jQuery( 'label[for="_cssllc-change-indicator-toggle"]' ).on( 'click', function( ev ) {
if ( confirm( 'Please confirm setting site as dirty.' ) )
jQuery.post(
ajaxurl,
{
action: 'cssllc-change-indicator',
},
function( data ) {
if ( 1 == data )
jQuery( '#cssllc-change-indicator-toggle' ).prop( 'checked', true );
}
);
} );
} );
<?php
return ob_get_clean();
}
}
new CSSLLC_ChangeIndicator;
?>