Documentation for JS??

Windmill Strategy
(@windmillstrategy)

4 days, 9 hours ago

I wanted to browse any documentation in order to add some custom JS functionality. I want the layers (icons you click) on the graphic to have some sort of active class so that the one corresponding to the currently active tooltip will have a class or data attribute to latch onto so I can add some CSS to make the icon look different when it is active. The link to the repo in the plugin page FAQ is broken. Any help you can provide would be much appreciated.

Viewing 1 replies (of 1 total)

Plugin Support Max
(@mxlawr)

4 days ago
Hello. I will show a sample.
1) Create a map with layers (img 1), add “Extra CSS class“, in my example it’s “my-class”

Img 1

2) Define CSS styles for this layer with extra class, to use it we need go to the custom css tab, enable switcher and type our own styles.
```
.my-class .vision-body {
  background: #ff000050; // red with 50% opacity
 }
```
3) Let’s write some js code. The plugin writes all markup directly into the page, so we can manipulate their elements easely. Go to the JS custom section and write this code (it changes layer background color after click)
```
jQuery(document).ready(function($) {
  $('.my-class').on('click', function(e) {
    const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16) + '40';
    $(this).find('.vision-body').css('background', randomColor);
  });
});

// you can get access to the plugin core by using "this" pointer
// console.log(this);
```
4) The result

P.S.
I’d like to note that this plugin has limited functionality. I continue to support it, but solely in terms of fixing critical bugs and ensuring compatibility with new versions of WordPress.

If you’re looking for something more, I suggest taking a closer look at PicPoints – it’s has an advanced Figma-like interface, renders the map via Shadow DOM (so styles won’t conflict with either the theme or the plugin), allows you to draw complex polygons, and much more. The core functionality has already been written by me and development is still ongoing.

If you have any suggestions or feature requests, I’m always open to them, feel free to reach out at any time.

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.