curtwagner1984
commented
8 years ago @sjclayton You can try to do it yourself :)
First of all there is a 'confirm' function in JS: http://www.w3schools.com/jsref/met_win_confirm.asp
It returns True if the user press 'Ok' and False if the user presses 'Cancel'
So basically what you want is if the user wants to delete something, you summon this popup and if he presses 'Ok' you go on and do what Yapo already does now, if not, you do nothing.
Let's see an example:
<span ng-click="$ctrl.removeItem(scene,actor,'delete',false)"
class="glyphicon glyphicon-trash on-hover-red-cursor-pointer"
uib-popover-html="'<strong>Delete</strong> scene from database!'"
popover-trigger="mouseenter">
</span>This is in scene-list.template.html and it's the html markup for the button that removes a scene from the database. We can identify it as such because that is what it says in the pop over:
uib-popover-html="'<strong>Delete</strong> scene from database!'"The function that is invoked when this button is clicked is:
$ctrl.removeItem(scene,actor,'delete',false)This function is inside scene-list.component:
self.removeItem = function (scene, itemToRemove, typeOfItemToRemove, permDelete) {
// function contents doesn't matter.
};What we want is to create our own confirmation function, and if the users presses 'OK' we will execute the original function $ctrl.removeItem(scene,actor,'delete',false).
So let's write our confirmation function:
self.confirmationFunction = function(originalScene, originalItemToRemove, originalTypeOfItemToRemove, originalPermDelete){
if(confirm('Are you sure you want to remove' + originalScene.name + 'from db ?' )){
// we are here if the user pressed OK
// Let's call the original function $ctrl.removeItem(scene,actor,'delete',false)
self.removeItem(originalScene,originalItemToRemove,originalTypeOfItemToRemove,originalPermDelete)
}else{
// we are here if the user pressed cancel
// we can do nothing in which case the else clause is useless or pop up an alert
alert("Think more carefully next time!");
}
}
self.removeItem = function (scene, itemToRemove, typeOfItemToRemove, permDelete) {
// function contents doesn't matter.
};Now let's replace the function in the markup with our confirmation markup:
<span ng-click="$ctrl.confirmationFunction(scene,actor,'delete',false)"
class="glyphicon glyphicon-trash on-hover-red-cursor-pointer"
uib-popover-html="'<strong>Delete</strong> scene from database!'"
popover-trigger="mouseenter">
</span>Notice that we want to pass the same arguments to our function so they can be later passed down to the removal functions.
P.S I you do try and make this yourself (And I would really appreciate it if you did) make sure that your confirmation function covers all the confirmation options for scenes. In other words so you won't use 2 diffrent confirmation functions for deleting a scene from db and deleting it from the hard-disk.
P.S.S In the html markup $ctrl means that the function or the variable is in the controller for that page. In this example the controller is the code on scene-list.component.js So anything that is created in the controller using self is accessible in the markup using '$ctrl' that is why we create our function using self.confirmationFunction = function () instead of var confirmationFunction = function ()
P.S.S.S I realize that a point could be made that in the time it took me to write this I could have made those changes myself, but hopefully this will give you and anyone else who reads this an insight into Yapo's inner workings so you can change other things and not just this function.
sjclayton
thierry400
Needs to be some sort of confirmation before deleting items (scenes, actors, tags, etc.) from the database or in the instance of removing a scenes files from disk. The potential for accidentally clicking those buttons (remove/delete) is fairly high.