i have a TreeView that once the user drops the item to the desired position, it displays a dialog box and asks for confirmation, if the user selects cancel, how would i also cancel the placement of the item so it goes back to its original position? my current code is below but isnt working:
var newDiv = $(document.createElement('div'));
newDiv.html('Are you sure you want to move the item: ' + title);
newDiv.dialog( {
autoOpen: true,
width: 600,
buttons: {
"Save": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
e.setValid = false;
}
}
});
I have also tried doing the same kind of code on the dragend event and using e.preventDefault(); with no more luck
The drop event handler provides the setValid function, which can prevent the drop from occurring. For example:
function onDrop(e) {
e.setValid(confirm('Do you wish to move this item here?'));
}
$("#treeView").kendoTreeView({
// ...
dragAndDrop: true,
drop: onDrop
});
I've written a fiddle which demonstrates how this works.
Did you try to use the drop event and call prevent default there if the condition is not satisfied?
Related
This is simple enough in earlier version of tinyMCE, but I can't find a way to make it work in v6x (suggested answers here only apply to earlier versions, that I can see)
Here's my button:
tinymce.PluginManager.add('newButton', (editor, url) => {
editor.ui.registry.addButton('newButton', {
text: 'Click me',
enabled: true,
onAction: () => {
alert('You clicked me')
}
})
return {
getMetadata: () => ({
name: 'newButton',
url: ''
})
}
});
tinymce.init({
selector: "textarea",
plugins: "newButton",
toolbar1: "newButton"
});
This works fine - click the button and you get an alert telling you you have. What I want to do now is call this click event from code (JaveScript) - I was hoping
tinymce.activeEditor.buttons['newButton'].onclick();
would work, as it does for - say - the "code" plugin; i.e. add this plugin (and button) to the editor and calling
tinymce.activeEditor.buttons['code'].onclick();
simulates clicking the toolbar button. So... how can I "click" my own custon toolbar button?
[edit] well.. that last line did work, I swear it did. Now it doesn't. wt.. :(
This may not be the "right" way (well, I know it isn't!) but I've found a way that works :)
First, I need a way to identify/find my custom button. I figured out tinymce renders them as div elements, and using
var divs = document.querySelectorAll('button');
divs.forEach((div) => {
console.log(div.innerHTML);
})
I am able to identify it and find the HTML used - it is not graced with an id, but we can use the innerHTML property (as identified) to get it and then simulate a click- viz:
var divs = document.querySelectorAll('button');
divs.forEach((div) => {
// NB 'DOC' is the text property of my custom button
if (div.innerHTML === '<span class="tox-tbtn__select-label">DOC</span>') {
// now we can simulate a click on it:
var evt = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true
});
div.dispatchEvent(evt);
return;
}
})
(Thanks to the second answer, by Derek, here:
How to simulate a mouse click using JavaScript?
for the simulate click code)
[edit] better to use a for-loop rather than forEach as there's no sensible way to break out of the latter - that "return" doesn't actually do anything.
I have a click function on the marker which will enable the marker popup. But when the user clicks outside the map I want to disable this focus. How to do this?
$scope.$on('leafletDirectiveMarker.click', function (event, args) {
$scope.markers['m' + args.model.value.id].focus = true;
createTemplateForPopup(args.model.value);
});
You can simply listen to a window event and disable all focus on click:
$window.addEventListener('click', function(e) {
$scope.markers.forEach(function(marker) {
marker.focus = false;
});
});
You might prevent default to not trigger the window click when someone selects a marker:
$scope.$on('leafletDirectiveMarker.click', function (event, args) {
event.preventDefault();
$scope.markers['m' + args.model.value.id].focus = true;
createTemplateForPopup(args.model.value);
});
The only problem is that this will always trigger. So it is good practice to remove the EventListner when the map is destroyed.
I am redrawing layers on style.load event and removing the layers
map.on('style.load', function() {
loadByBounds(tempBounds)
});
function loadByBounds(b) {
if (map.getLayer("cluster-count")) {
map.removeLayer("cluster-count");
}
...
map.on('click', 'unclustered-point', function(e) {
var popup = new mapboxgl.Popup()
.setLngLat(e.features[0].geometry.coordinates)
.setHTML(text)
.addTo(map);
})}
But how to remove map.on('click') events? As when I click the point the Popup() displays 2 times. And when I change layer one more time the onclick event fires 3 times and so on. So I think I have to remove the click event but how? Thanks
You might wanna use map.once(). This will add a listener that will be called only once to a specified event type. However after 1 click event got fired this event listener won't listen to any further click events.
https://www.mapbox.com/mapbox-gl-js/api/#evented#once
With map.off() it's basically the opposite of map.on() and you can use it to unregister any applied event listeners. However you would need to add event listeners without an anonymous function in order to use map.off().
https://www.mapbox.com/mapbox-gl-js/api/#map#off
// you would need to use a named function
function clickHandler(e) {
// handle click
}
map.on('click', clickHandler);
// then you can use
map.off('click', clickHandler);
// With an anonymous function you won't be able to use map.off
map.on('click', (e) => {
// handle click
});
To prevent your app from registering multiple listeners you maybe need to set a flag that gets set after your first event listener got applied.
let notListening = true;
function loadByBounds(b) {
// ....
if (notListening) {
notListening = false;
map.on('click', (e) => {
// do something
});
}
}
I have created a Button with the Tiny Method addButton().
How is it possible to toggle the State of the Button ?
In my first simple case I have a Button with Fullscreen
(Different Functionality than the built-in function)
and want to hide it after getting the Fullscreen State
and replace it with an "End Fullscreen" Button.
But I have not found the right way to show or hide them.
I know that the button will get an ID, but I dont know which one ...
If you add the button with:
editor.addButton('customFullscreen', {
tooltip: 'Fullscreen',
shortcut: 'Ctrl+Alt+F',
onClick: toggleCustomFullscreen,
onPostRender: function() {
var self = this;
editor.on('CustomFullscreenStateChanged', function(e) {
if (e.state) {
self.name('Close fullscreen');
//self.active(e.state); // uncomment for "pressed" look
} else {
self.name('Fullscreen');
}
});
}
});
and handle the event with
var customFullscreenState = false;
function toggleFullscreen() {
customFullscreenState = !customFullscreenState;
if (customFullscreenState) {
// do something, we are active
} else {
// do something else, we're unactive
}
editor.fire('CustomFullscreenStateChanged', {state: fullscreenState});
}
You should be able to have it look like wo different button and do two different things depending on state, but it will still just be one button that changes action and text.
I need to toggle an element ONLY if it is not disabled.
jQuery("#sbutton").toggle(
function () {
if (!jQuery(\'input[name^="choose"]\').attr ( "disabled" )) {
jQuery(\'input[name^="choose"]\').attr ( "checked" , true);
}
},
function () {
jQuery(\'input[name^="choose"]\').removeAttr("Checked");
}
)
Is the IF condition possible?
What you probably want to do (thanks Frédéric):
jQuery("#sbutton").click(function() {
if (jQuery('input[name^="choose"]').is(':disabled'))
return false;
if (jQuery('input[name^="choose"]').is(':checked'))
jQuery('input[name^="choose"]').removeAttr("checked");
else
jQuery('input[name^="choose"]').attr("checked", true);
});
or simply
jQuery("#sbutton").click(function() {
var checkbox = jQuery('input[name^="choose"]');
if (checkbox.is(':disabled'))
return false;
checkbox.attr('checked', !checkbox.is(':checked'));
});
The problem with your code is that you expect the evaluation on disabled to be evaluated on every button click and use the first function if true. It's only called on every other click though, and the other function doesn't care if it's disabled or not. It checks the check box no matter what. You have to either bind on the click event, like I've done, or bind to and unbind from the toggle event depending on whether or not the button is disabled.
In the future it would be easier to help you if you present your code as a fiddle (http://www.jsfiddle.net) and describe more thoroughly what you're trying to do and what it is that's not working.