OL interaction - mousedown - openlayers-3

I see that there is ol interaction that can be done upon click or single click or pointer move - however, is there one that can be done with mousedown/mouseup? In short, we want the user to be able to edit a feature as long as the mouse button in clicked but saved/stopped upon mouse button release.
featureRotateDown = new ol.interaction.Select({
condition: ol.events.condition.pointerdown
});
featureRotateUp = new ol.interaction.Select({
condition: ol.events.condition.pointerup
});
map.addInteraction(featureRotateDown);
map.addInteraction(featureRotateUp);
featureRotateDown.on('select', function(event) {
$.each(event.selected, function (index, feature) {
console.log(feature);
console.log('1');
});
});
featureRotateUp.on('select', function(event) {
$.each(event.selected, function (index, feature) {
console.log(feature);
console.log('3');
});
});
In other words, imagine a marker placed on a map that is an arrow. I want to ability to rotate it around as much as I want while the cursor is on the marker and the mouse button is pressed down.

Try pointerdown and pointerup:
map.on('pointerdown', function (event) {
// doStuff...
// ALTERNATIVE 1: get a feature at click position (with very small tolerance)
map.forEachFeatureAtPixel(event.pixel, function(feature, layer){
// doStuff with your feature at click position
});
// ALTERNATIVE 2: get the closest feature
closestFeature = yourVectorSource.getClosestFeatureToCoordinate(event.coordinate);
})
map.on('pointerup', function (event) {
// doStuff...
})
In the functions you can access the features using forEachFeatureAtPixelor getClosestFeatureToCoordinate.
Also see this JSFiddle

Related

droppable out event: How to get element where mouse moves to

During droppable out event, I need the element the mouse cursor moves to. If this element is not droppable, a default behaviour should be executed.
I tried the following:
$(dropSelector).droppable({
over: function (event, ui) {
ui.helper.css("cursor", "copy");
// Some code on drop enter here...
},
out: function (event, ui) {
// New element: mouse pointer might move to another droppable element...
// How to obtain the element where the mouse moves to?
if (/* next element is NOT droppable*/) {
ui.helper.css("cursor", "no-drop");
// Some code on drop out here...
}
},
drop: function (event, ui) {
// handle drop event
}
});
However, I could not find a way to get the element where the mouse cursor moves to during out event.. I tried event.target and event.currentTarget but they are not the elements I am looking for.
I used a different solution. Obviously the over event for the next element fires before the out event of the old element. So I check if the out target is the last element entered.
var _target = null;
$(dropSelector).droppable({
over: function (event, ui) {
_target = event.target;
ui.helper.css("cursor", "copy");
// Some code on drop enter here...
},
out: function (event, ui) {
if (_target === event.target) {
// No 'over' occurred for a new element
ui.helper.css("cursor", "no-drop");
// Some code on drop out here...
}
else {
// Some code on drop out of old element
// Perhaps some code on 'over' that has to be done after
// drop out of old element
}
},
drop: function (event, ui) {
// handle drop event
}
});
But: Can I rely on the fact that over on next element fires before out on old element?

swipe-right triggered twice in jQuery Mobile

I'm trying to integrate this plug-in into my site so I can swipe to delete. The problem however is that this plugin is triggered with a 'swiperight', the same swipe event is used to reveal my panel. I managed to separate the events using event.target.tagName. When it's a A(link), I want to activate the swipe to delete button and otherwise I want my panel to slide in.
With other words the pageinit event is triggered twice so the swipe to delete button starts to appear then the same event is triggered again. I want to somehow cancel one action but i can't make it work. I already tried:
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
I also tried to use some solutions given here but with no luck:
jQuery Mobile: document ready vs page events
A demo of my problem can be found snip and my current pageinit function is this:
$(document).on('pageinit', function() {
//Activate horizontal swipe after x px.
$.event.special.swipe.horizontalDistanceThreshold = 80;
$('div[data-role="content"]').on("swiperight", function(event) {
//If tagname is 'A' you probably want slide to delete not the panel
if(event.target.tagName != 'A') {
$.mobile.activePage.find("#menu").panel("open");
} else {
//Cancel swipe
event.stopImmediatePropagation();
}
});
//Swipe to delete
$("#swipe li").swiper( {
corners: false,
label: "Verwijder",
swipe: function(event, ui) {
alert('trigger');
},
click: function(event, ui) {
var $item = $(this);
//console.log($(this));
$item.fadeOut(250, function() {
$item.remove();
});
}
});
});
Fixed issue using the following plugin: TouchSwipe which has the ability to simple exclude elements from the events.

jquery ui drag element without keeping mouse button down (follow the cursor)

I am trying to drag an element without keeping the mouse button down.
The behavior I would like is :
I click on a draggable item
Drag my item without keeping mouse left click down : just follow the mouse as a cursor
I click on a droppable container to confirm and append my item
I am able to simulate this behavior if I add an alert box durring the start event.
start : function(){
alert('test')
},
Here is the fiddle : http://jsfiddle.net/QvRjL/103/
How is it possible to code this behavior without the alert box?
Here is a good solution about this problem : Trigger Click-and-Hold Event
http://jsfiddle.net/VXbpu/1/
http://jsfiddle.net/vPruR/70/
var click = false;
$(document).bind('mousemove', function (e) {
if (click == true) {
$('#your_div_id').css({
left: e.pageX,
top: e.pageY
});
}
});
$('#your_div_id').click(function() {
click = !click;
return false;
});
$('html').click(function() {
click = false;
});

jQuery opacity not working

I am trying to change the opacity of the image after I click the red button
instead of adding the different image, and I should not see the red button on the new image
My JS code is below.
http://jsfiddle.net/mwPeb/7/
<script>
$(document).ready(function () {
$(".specialHoverOne").hover(function () {
// alert("i am here");
$(".ctaSpecialOne").css("visibility", "visible");
},
function () {
$(".ctaSpecialOne").css("visibility", "hidden");
});
$(".ctaSpecialOne").click(function (e) {
alert("clicked");
e.preventDefault();
//$(this).closest('.specialHoverOne').unbind("mouseenter").end().parent().siblings('a').children("img").attr("src", //"http://imgs.zinio.com/magimages/62898189/2012/416242497_200.jpg");
$(this).css({
'opacity': 50
});
});
});
</script>
I'd spend some quality time cleaning up the coding here, it's a bit difficult to find anything and the structure is a bit hard to follow.
If I'm understanding correctly, I believe this is the line you need to make the image above the red button change opacity when said red button is clicked.
$(this).parent().prev().prev().css({'opacity':.5});
More specifically;
$(".ctaSpecialOne").click(function (e) {
e.preventDefault();
$(this).parent().prev().prev().css({'opacity':.5});
});
http://jsfiddle.net/mwPeb/11/
You want the opacity of the red button to change on click? Or the image above it? For starters, to set the opacity, you would change your line:
$(this).css({'opacity':50});
to:
$(this).css({ opacity: 0.5 });
In your current fiddle, you'll see that sets the opacity of the red button. If you want it to set something else, you now have the syntax.
Update:
Instead of wiring up a bunch of .click() events that repeat the same code, might be best to create a function
function setThisOpacity(id) {
$("#" + id).css({ opacity: 0.5 });
//do other stuff if you need to
}
And then in your html markup, just add an onclick="setThisOpacity(someID);" where someID is an actual ID to the item you want to set the opacity.

jquery ui tooltip manual open /close

is there a way to manually open close the jquery ui tooltip? I just want it to react to a click event toggling on/off. You can unbind all mouse events and it will rebind them when calling .tooltip('open'), even though that should not initialize or set events imo, since if you try to run .tooltip('open') without initializing, it complains loudly about not being initialized.
jltwoo, can I suggest to use two different boolean switches to enable auto-open and auto-close? With this change your code will look like this:
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoShow: true,
autoHide: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
In this way, initializing the tooltip as:
$(someDOM).tooltipX({ autoHide:false });
it shows by itself when the mouse is over the element but you have to manually close it.
If you want to manually control both open and close actions, you can simply use:
$(someDOM).tooltipX({ autoShow:false, autoHide:false });
If you want to just unbind the events and woudn't like to make your own custom tooltip.
$("#some-id").tooltip(tooltip_settings)
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$("#some-id").attr("title", "Message");
$("#some-id").tooltip("open");
mouseout blocks the tooltop disappearing by moving the mouse cursor
focusout blocks the tooltop disappearing by keyboard navigation
The tooltip have a disable option. Well i used it and here is the code:
$('a').tooltip({
disabled: true
}).click(function(){
if($(this).tooltip('option', 'disabled'))
$(this).tooltip('option', {disabled: false}).tooltip('open');
else
$(this).tooltip('option', {disabled: true}).tooltip('close');
}).hover(function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
}, function(){
$(this).tooltip('option', {disabled: true}).tooltip('close');
});
Related to my other comment, I looked into the original code and achieved manual open/close by extending the widget and adding a autoHide option with version JQuery-UI v1.10.3. Basically I just remove the mouse listeners that were added in _create and the internal _open call.
Edit: Separated autoHide and autoShow as two separate flags as suggested by #MscG
Demo Here:
http://jsfiddle.net/BfSz3/
(function( $ ) {
$.widget( "custom.tooltipX", $.ui.tooltip, {
options: {
autoHide:true,
autoShow: true
},
_create: function() {
this._super();
if(!this.options.autoShow){
this._off(this.element, "mouseover focusin");
}
},
_open: function( event, target, content ) {
this._superApply(arguments);
if(!this.options.autoHide){
this._off(target, "mouseleave focusout");
}
}
});
}( jQuery ) );
Now when you initialize you can set the tooltip to manually show or hide by setting autoHide : false:
$(someDOM).tooltipX({ autoHide:false });
And just directly perform standard open/close calls in your code as needed elsewhere
$(someDOM).tooltipX("open"); // displays tooltip
$(someDOM).tooltipX("close"); // closes tooltip
A simple hotfix, until I have the time to do official pull request, this will have to do.
Some compilation from other SO questions.
Example
Show tooltip on hint click, and hide tooltip on elsevere click
$(document).on('click', '.hint', function(){ //init new tooltip on click
$(this).tooltip({
position: { my: 'left+15 center', at: 'center right' },
show: false,
hide: false
}).tooltip('open'); // show new tooltip
}).on('click', function(event){ // click everywhere
if(!$(event.target).hasClass('hint'))
$(".hint").each(function(){
var $element = $(this);
if($element.data('ui-tooltip')) { // remove tooltip only from initialized elements
$element.tooltip('destroy');
}
})
});
$('.hint').on('mouseout focusout', function(event) { // prevent auto hide tooltip
event.stopImmediatePropagation();
});

Resources