SilverStripe Usability - Löschen mit Rückfrage
Folgendes Szenario: man möchte eine Software beenden oder eine Datei löschen. Manche Programme reagieren darauf mit einem Bestätigungsfenster, das oft diesen (oder ähnlichen) Text enthält: "Wollen Sie wirklich ... ? bla bla".
Meist reagiere ich ziemlich genervt darauf und schreie meinen Rechner an: "Logisch! Sonst hätte ich ja nicht 'Löschen' gedrückt!".
Doch manchmal kann so ein Hinweis ein wahrer Lebensretter sein und vor ärgerlicher Mehrarbeit schützen. Zum Beispiel wenn man mal wieder etwas übermüdet und abgelenkt versucht einen Blog Eintrag zu verfassen und diesen aus Versehen löscht ;-).
Eine Lösung um in Silverstripe die Löschen/Unveröffentlichen Buttons ein wenig sicherer zu gestalten, hat Tama im offiziellen Forum vorgestellt. Die funktioniert prima und ein Javascript-Popup warnt nun sobald man etwas löschen möchte.
Wem (wie mir) ein Popup etwas zu öde erscheint, dem könnte das jQuery Plugin Fast Confirm weiterhelfen - eine schlanke Möglichkeit für Dialogboxen.
Wie man das ganze in Silverstripe integriert, versuche ich beispielhaft im Anschluss zu zeigen. Doch Vorsicht, bitte nicht als "Anfängertutorial" verstehen.
Ich benutze hier Tamas Code zusammen mit Fast Confirm:
/mysite/javascript/myConfirmdelete.js:
// Add popup to Unpublish box when mouse enters div containing action buttons.
// This is bound via live as the action buttons can be rebuilt with AJAX.
jQuery('#form_actions_right').live('mouseenter', function() {
//Check if Unpublish button needs to be disabled
if (jQuery('#Form_EditForm_action_unpublish').attr('name') != '') {
//Disable Unpublish Button
jQuery('#Form_EditForm_action_unpublish').attr('name', '');
//Bind Mousedown event handler to Unpublish button.
//Mouseover is used instead of click to avoid conflict
jQuery('#Form_EditForm_action_unpublish').mousedown(function() {
jQuery(this).fastConfirm({
position : 'top',
questionText : 'This will also affect child pages',
proceedText : 'Proceed',
cancelText : 'Cancel',
zIndex : 666,//the number of the beast
onProceed : function(trigger) {
//Enable Unpublish Button
jQuery('#Form_EditForm_action_unpublish')
.attr('name', 'action_unpublish');
//Trigger click on Unpublish button to set submit in motion
jQuery('#Form_EditForm_action_unpublish')
.click();
}
});
});
}
//Check if Delete button needs to be disabled
if (jQuery('#Form_EditForm_action_delete').attr('name') != '') {
//Disable Delete Button
jQuery('#Form_EditForm_action_delete').attr('name', '');
//Bind Mousedown event handler to Delete button.
//Mouseover is used instead of click to avoid conflict
jQuery('#Form_EditForm_action_delete').mousedown(function() {
jQuery(this).fastConfirm({
position : 'top',
questionText : 'Really?',
proceedText : 'Yes',
cancelText : 'No!',
zIndex : 666,
onProceed : function(trigger) {
//Enable Delete Button
jQuery('#Form_EditForm_action_delete')
.attr('name', 'action_delete');
//Trigger click on Unpublish button to set submit in motion
jQuery('#Form_EditForm_action_delete')
.click();
}
});
});
}
});
Die Einbindung in Silverstripe geschieht bei mir, anders als bei Tama, über eine eigene Extensionklasse die von LeftAndMainDecorator erbt.
/mysite/code/MyLeftAndMainDecorator.php:
class MyLeftAndMainDecorator extends LeftAndMainDecorator {
public function init() {
parent::init();
// fast confirm plugin - css
Requirements::css('mysite/javascript/jquery/plugins/jquery-fastconfirm/jquery.fastconfirm.css');
// fast confirm plugin - core script
Requirements::javascript('mysite/javascript/jquery/plugins/jquery-fastconfirm/jquery.fastconfirm.js');
// fast confirm plugin - custom implementation
Requirements::javascript('mysite/javascript/myConfirmdelete.js');
}
}
und in meiner /mysite/config.php:
// custom LeftAndMain backend extensions...
Object::add_extension('LeftAndMain', 'MyLeftAndMainDecorator');
Als Ergebnis kann das dann beispielsweise so aussehen:
Nie wieder ungewolltes Löschen!
