The problem is that the leaflet map inside the vue3 App loads perfectly and looks great. Also, when you click on a location with two icons in the same position, they open perfectly, but when you click on the same place again, the icons disappear and the "spider" remains visible (see picture).
spider remains
The methods in the Vue3 App are:
methods:{
setupMarkers(){
this.markers.clearLayers();
this.cursesData.forEach(cursa =>this.ficaMarkers(cursa));
this.map.addLayer(this.markers);
},
setupLeafletMap(){
this.map=L.map("mapContainer").setView(this.center,6);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
attribution:'OpenStreetMap',
}).addTo(this.map);
this.markers= L.markerClusterGroup({
//spiderfyOnMaxZoom: true,
});
},
ficaMarkers(cursa){
this.markers.addLayer(L.marker([cursa.coordenades[0],cursa.coordenades[1]],{title:cursa.nom})
.bindPopup(cursa.distancies)
)
},
},
If someone could help me, I would be very grateful.
Thanks.
It is a similar issue as in Uncaught TypeError: this._map is null (Vue.js 3, Leaflet) :
What seems to be the culprit is the proxying of this.map by Vue, which seems to interfere with Leaflet events (un)binding. It looks like Vue 3 now automatically performs deep proxying, whereas Vue 2 was shallow.
In your case, the same thing happens for this.markers (which is the Leaflet MarkerClusterGroup).
A solution consists in "unwrapping" / un-proxying the map and the mcg whenever you use them, e.g. with Vue3's toRaw:
toRaw(this.map).addLayer(toRaw(this.markers));
Then we retrieve the normal MCG behaviour, i.e. if you click on the cluster while it is already spiderfied, nothing happens (whereas initially the Markers were collapsing, but the spider legs were remaining indefinitely)
Fixed CodeSandbox: https://codesandbox.io/s/markers-hide-spiders-stay-forked-l2ruqh?file=/src/App.vue
Is there a way to include CSS in HTML as one line, so lets say if i want to change the tabSize i will only need to do it once for both HTML and CSS
Currently looks like this:
"[html]": {
"editor.tabSize": 2,
},
"[css]": {
"editor.tabSize": 2
}
But i want something like this:
"[html, css]": {
"editor.tabSize": 2,
},
See the end of file-type specific settings issue. Multiple language keys in one setting are brought up (and earlier in the thread) but it is stated that there are no plans to support that (as of May, 2017).
So is later support of multiple langauges per key/entry something planned for the future?
Is there a sep[a]rate issue to track that?
[Response:] Its not yet planned.. Feel free to file an issue for that. Thanks.
I'm using the awesome CarouFredSel JQuery carousel plugin which includes features for integrating the JQuery TouchSwipe library for handheld devices as well.
The carousel elements are divs, within the div is an image and text wrapped in an <ahref> tag.
Everything works as it should, but I've noticed that if the carousel element (in this case a div) includes a link, the swipe effect on various mobile devices does not work.
If I remove the link around the image/text, the swiping motion works fine. It's almost as if preventDefault() is working in reverse. If I remove the link around the image, and leave the text as a link, the swiping works for the image, and not the text.
I can easily click the item as a link, I just cannot swipe if it IS a link.
Has anyone experienced this problem with CarouFredsel in particular?
Many thanks, SO.
Touchswipe is disabled by default for a elements.
See http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.html
From the link:
By default the value of $.fn.swipe.defaults.excludedElements is "button, input, select, textarea, a, .noSwipe, " To replace or clear the list, re set the excludedElements array. To append to it, do the following (dont forget the proceeding comma) ...
excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div" });
I ended up just changing the defaults in the plugin, since all my modals were children of an anchor element.
excludedElements:"button, input, select, textarea, .noSwipe"
The carouFredSel with < a > doesn't work for me well with swipe 'inside'.
You can use excludedElements, but on Ipad you'll have to hold your finger to use < a > (longTap). That's not good for users. If you try to use carouFredSel({ swipe:( option { tap: function ... it won't work (at least in my case).
My solution is to use swipe (touchSwipe) separately:
$(".carusel").swipe({
excludedElements: "button, input, select, textarea, .noSwipe",
swipeLeft: function() {
$('.carusel').trigger('next', 4);
},
swipeRight: function() {
$('.carusel').trigger('prev', 4);
},
tap: function(event, target) {
window.open($(target).closest('.carusel-cnt').find('carusel-cnt-link').attr('href'), '_self');
}
});
Well, I'd really love to know if using links within TouchSwipe and the CarouFredSel plugin is possible, but I found a workaround that seems to work.
Hopefully it will help someone.
I ended up using a second touch jquery library, TouchWipe.
When, calling the CarouFredSel plugin, I set the swipe parameter to true:
$('#carousel-slider').carouFredSel({
width: '100%',
prev: '#prev-propslider',
next: '#next-propslider',
swipe: true
});
Then, calling both the TouchSwipe AND Touchwipe libaries (not sure if this matters, but I'm using the regular TouchSwipe swipe:true parameter for another slider without links), I wrote a separate function to call custom events for the TouchWipe plugin:
$('#carousel-slider').touchwipe({
wipeLeft: function() {
$('#carousel-slider').trigger('next', 1);
},
wipeRight: function() {
$('#carousel-slider').trigger('prev', 1);
}
});
Hopefully this helps someone, but I'd really love to know if TouchSwipe and CarouFredSel can work with <a href> tags as I cannot find any live working examples.
Thanks for the solutions with the excludedElements, that fixed my problem as well. Never thought of that.
But you don't have to use the touchwipe Plugin separately, there is "swipe.options" as a configuration option for touchswipe in the caroufredsel plugin.
See the caroufredsel options
There you can use all options of the touchswipe plugin, I think.
You can use below function to enable click after swipe.
`$('.class').swipe({
swipe: function(event, direction, distance, duration, fingerCount) {},
click: function(event, target) {
$(target).click();
},
threshold: 75
});`
https://stackoverflow.com/a/11919170/3223427
Caroufredsel is already integrated and compatible with touchswipe.
Add tochswipe js library
Add the touch events in the caroufresel configuration
JAVASCRIPT RESULT
$(document).ready(function () {
$('#foo2').carouFredSel({
auto: false,
responsive: false,
items: {
visible: 3,
width: 100
},
width: 600,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
swipe: {
onMouse: true,
onTouch: true
}
});
});
Here is a working demo
We are having 2 applications in the same page both of which use 1 fancybox each.The first application which is flex based loads a fancybox:
$(document).ready(function(){
$("a.overlay-flash").fancybox({
'padding' : 0,
'width' : 800,
'height' : 450,
});
});
<a id="hiddenclickermarketInfoPortlet" class="overlay-flash" href="<%=targetThemeURLStr%>" >Hidden Clicker</a>
But when we load our application and call our fancybox it seems the first fancybox gets loaded again.
So 2 questions are
Is there a way to close the original fancybox from our second application?
What or where is this overlay-flash class defined? I checked in the net and lot of people are using this class. (Note the first loaded application is flexbased and ours non-flex based)
I'm not sure how you have two FancyBoxes open and styled... it is meant to be unique and thus has IDs for all of the elements.
But, if you need to close FancyBox, use the API
$.fancybox.close
Should you need to disable the overlay, just use the overlayShow option:
$("a.fancybox").fancybox({
overlayShow : false
});
or since it sounds like you might not have control over the options, add this to your css:
#fancybox-overlay { display: none !important; }
If you are still having problems, please share some of the markup and code you are using
If you need to apply a plugin to the content inside the fancybox, then do so using the onComplete callback
$("a.fancybox").fancybox({
overlayShow : false,
onComplete:function(){
$('#cboxContent').find('input').autocomplete();
}
});
I'm in the process of creating my first TinyMCE plugin. I'm including 'tiny_mce_popup.js' in the html and it's loading 'advanced/skins/default/dialog.css' by default.
I don't need TinyMCE to load this css and the only solution I have found so far is documented here http://www.mattephraim.com/blog/tag/tinymce/; and as the author suggests, it is not the most elegant solution. Please help if you know the proper way of handling this.
I found the official documentation by digging 1mm into the 'tiny_mce_popup.js' code. Basicly all you gotta do is in init() of editor_plugin.js, add popup_css as an option and set it to false:
ed.windowManager.open({
...
file : url + '/dialog.htm',
width : 640 + parseInt(ed.getLang('attachment_fu.delta_width', 0)),
height : 485 + parseInt(ed.getLang('attachment_fu.delta_height', 0)),
popup_css : false,
...
})