when hover over svg map display a popup with details - javascript

I have designed a map on AI (adobe Illustrator) with sections and areas and exported the final map as SVG file to display on html page. Also I have the details for these sections in a separate excel sheet, I want when mouseover any section it will make a popup with the details for that section.
I need your advice on how to accomplish that.
Any help is appreciated,

The data should be converted to json or a javascript object like this:
var xlsData = {
"RedRect": "This is the Red Rectangle!",
"Star": "This is the Star Shape!"
}
The best way is to use the javascript event load on a svg object to attach the mouse events. Because jQuery prevents to bind load events to object elements, we have to use javascript addEventListener to setup the load event.
How to listen to a load event of an object with a SVG image?
Inside the SVG file, we have two objects with the ids RedRect and Star:
<rect id="RedRect" x="118" y="131" class="st0" width="153" height="116"/>
<polygon id="Star" class="st2" points="397,252.3 366.9,245.4 344.2,266.3 341.5,235.6 314.6,220.4 343,208.3 349.1,178.1
369.4,201.4 400,197.8 384.2,224.3 "/>
Now, all we have to do is attach our events when the svg objects loads:
<object id="svg" type="image/svg+xml" data="test-links.svg">Your browser does not support SVG</object>
$('object')[0].addEventListener('load', function() {
$('#RedRect', this.contentDocument).on({
'mouseenter': function() {
$('#hover-status').text('#svg #RedRect Mouse Enter');
$('#hover-data').text(xlsData['RedRect']);
},
'mouseleave': function() {
$('#hover-status').text('#svg #RedRect Mouse Leave');
$('#hover-data').html(' ');
}
});
$('#Star', this.contentDocument).on({
'mouseenter': function() {
$('#hover-status').text('#svg #Star Mouse Enter');
$('#hover-data').text(xlsData['Star']);
},
'mouseleave': function() {
$('#hover-status').text('#svg #Star Mouse Leave');
$('#hover-data').html(' ');
}
});
}, true);
Plunker example

Related

jointjs element mouse click event

I'm using jointjs to draw graphs.
I'm wondering how to listen to the mouse click event on an element?
I found on http://www.jointjs.com/api#joint.dia.Element, there is only change:position option but no onclick option lol.
There's only cell:pointerclick option on the whole paper instead of the single element.
How can I achieve only listen to mouse click element on the single element? (Say I want to resize the paper after the click)
Thanks!
You can use the pointerclick event to capture the click events on elements. The view is passed as a parameter to the function and you can obtain the model of the view through cellView.model
paper.on('cell:pointerclick', function (cellView) {
// your logic goes here
);
A way to do that it's using classes and javascript events, look:
First, you assign a class to the joint js element via markup , for example a class called 'myclass' in this case:
var rect1 = new joint.shapes.basic.Rect({
markup: '<g class="rotatable"><g class="scalable"><image id="myrect1" class="myclass"/></g><text/></g>',
size: { width: 30, height: 73.2 },
attrs: {
rect: { fill: bgcolor1,'stroke-width': 0 },
}
});
Then, you capture the click event on that class objects via javascript, not in the canvas but in the document :
$(document).on('click', '.myclass', function () {
//alert('yayy!');
});
Hope it helps !
you need to listen on view not on the model. Trace all caught events on the element:
var a = new joint.shapes.basic.Rect({
size: { width: 100, height: 100 },
position: { x: 300, y: 300 }
}).addTo(graph);
paper.findViewByModel(a).on('all', function() {
console.log(arguments);
});
https://jsfiddle.net/vtalas/0z6jyq70/

Putting HTML code on JointJS link

I have worked with JointJS now for a while, managing to create elements with HTML in them.
However, I am stuck with another problem, is it possible to place HTML code, like
href, img etc, on a JointJS link and how do I do this?
For example, if I have this link, how do I modify it to contain HTML:
var link = new joint.dia.Link({
source: { id: sourceId },
target: { id: targetId },
attrs: {
'.connection': { 'stroke-width': 3, stroke: '#000000' }
}
});
Thank you!
JointJS doesn't have a direct support for HTML in links. However, it is possible to do with a little bit of JointJS trickery:
// Update position of our HTML whenever source/target or vertices of our link change:
link.on('change:source change:target change:vertices', function() { updateHTMLPosition(link, $html) });
// Update position of our HTML whenever a position of an element in the graph changes:
graph.on('change:position', function() { updateHTMLPosition(link, $html) });
var $html = $('<ul><li>one</li><li>two</li></ul>');
$html.css({ position: 'absolute' }).appendTo(paper.el);
// Function for updating position of our HTML list.
function updateHTMLPosition(link, $html) {
var linkView = paper.findViewByModel(link);
var connectionEl = linkView.$('.connection')[0];
var connectionLength = connectionEl.getTotalLength();
// Position our HTML to the middle of the link.
var position = connectionEl.getPointAtLength(connectionLength/2);
$html.css({ left: position.x, top: position.y });
}
Bit of an old question, but thought I'd add some more ideas. You can add extra svg markup to the label in a link if you like by extending the link object and then setting attributes where needed. For example:
joint.shapes.custom.Link = joint.dia.Link.extend({
labelMarkup: '<g class="label"><rect /><text /></g>'
});
This code overrides the markup for the label, so you can add extra elements in there. You can also update attributes on these elements by:
link.attr('text/text', "new text");
However hyperlinks won't work (at least I haven't got them working in Chrome) and I believe this is because Jointjs listens for all events in the model. So what you should do is use inbuilt events in Jointjs to listen for connection clicks:
paper.on('cell:pointerclick', function(cellView, evt, x, y){
console.log(cellView);
});

node-webkit <object> onmousedown

I have a frameless window with a titlebar set up much like in the node-webkit sample apps (that is, with buttons that have -webkit-app-region: no-drag; so that they accept user input).
Because I'd like my app to be completely themeable, I decided to implement the minimize/maximize/close buttons as SVG and manipulate their color/opacity through JavaScript.
Example
As an example, I have the following close button close.svg:
<svg class="close-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="26">
<g>
<title>Close</title>
<path class="close-icon-bg" fill="#c8c8c8" d="M0 0h30v26h-30z"/>
<path class="close-icon-fg" d="M11.766 8l-1.766 1.766 3.221 3.221-3.221 3.247 1.766 1.766 3.221-3.247 3.247 3.247 1.766-1.766-3.247-3.247 3.247-3.221-1.766-1.766-3.247 3.221-3.221-3.221z"/>
</g>
</svg>
I then have the following in my titlebar div:
<object id="close-btn" data="img/close.svg" type="image/svg+xml"></object>
Then in JavaScript I have the following:
function refreshTheme(theme) {
var but2 = {
"default": {
"bg": {"color": "#000000", "opacity": "0.0"},
"fg": {"color": "#000000", "opacity": "0.2"}
},
"hover": {
"bg": {"color": "#ac4142", "opacity": "1.0"},
"fg": {"color": "#e0e0e0", "opacity": "1.0"}
},
"click": {
"bg": {"color": "#000000", "opacity": "1.0"},
"fg": {"color": "#e0e0e0", "opacity": "1.0"}
}
};
createButton("close", but2, dummy);
}
function createButton(name, theme, func) {
var svgobj = document.getElementById(name + "-btn"), svg = svgobj.contentDocument;
styleIcon(svg, name, theme.default);
svgobj.onmouseover = function() {
styleIcon(svg, name, theme.hover);
};
svgobj.onmouseout = function() {
styleIcon(svg, name, theme.default);
};
svgobj.onmousedown = function() {
styleIcon(svg, name, theme.click);
};
svgobj.onclick = function() {
func();
};
}
function styleIcon(icon, name, theme) {
var bg = icon.getElementsByClassName(name + "-icon-bg")[0];
bg.setAttribute("fill", theme.bg.color);
bg.setAttribute("fill-opacity", theme.bg.opacity);
var fg = icon.getElementsByClassName(name + "-icon-fg")[0];
fg.setAttribute("fill", theme.fg.color);
fg.setAttribute("fill-opacity", theme.fg.opacity);
}
Essentially what happens is, I have a hard-coded JSON object but2 encapsulating the button states, which I pass to createButton(), which is responsible for setting up the various mouse events. I can confirm that the onmouseover and onmouseout events work well:
The top screenshot shows onmouseout, the bottom onmouseover.
The Problem
What doesn't work are the onmousedown and onclick events! They appear to be set up correctly in the debug window and no errors are present in the console, but they never get fired.
I was under the impression that <object> tags accept all standard HTML events, so this should work. Is there something I'm missing? Some node-webkit caveat maybe? Something to do with SVG's?
How can I get the onmousedown and onclick events to fire properly?
It turns out this is an actual problem with SVG's in browsers. The solution, as noted here, is to have the SVG hold the mouse up/down/click events in a transparent (fill-opacity="0.0") rectangle spanning the whole image.
In my case, the solution was:
var svg_click = svg.getElementsByClassName(name + "-icon-click")[0];
svg_click.onmousedown = function() {
styleIcon(svg, name, theme.click);
};
// etc...
I'm not terribly pleased with it, considering it should also work from the <object> tag, but hey...it's still a solution.

How can I map click events to elements in multiple layers?

I have multiple SVG elements that are in separate groups. They overlap each other. Example:
<svg id="board" width="100%" height="80%">
<g id="terrain" class="layer">
<path d="M-32,-32L32,-32 32,32 -32,32Z" transform="translate(0, 0)" class="mote terrain hill"></path>
</g>
<g id="guy" class="layer">
<path d="M-21...Z" transform="translate(192, 448)" class="mote guy"></path>
</g>
</svg>
When an x, y position that matches both is clicked, I want to know all that both were clicked. If I bind each to the 'click' event, only the event handlers for one on top gets called. Which is reasonable, although not what I want here.
I'm thinking of creating a topmost layer and having that catch all clicks, then figure out which elements in the other layers should be notified. That's a lot of tracking that I'd like to avoid, if possible. Are there simpler approaches to this?
From The SVG spec
"By default, pointer-events must not be dispatched on the clipped (non-visible) regions of a shape. For example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive 'click' events outside the smaller radius. Later versions of SVG may define new properties to enable fine-grained control over the interactions between hit testing and clipping."
However, there is a way of getting a list of svg shapes that intersect at a particular point. The "getIntersectionList" function returns a list of items.
I've created one of those jsfiddle things jsfiddle.net/uKVVg/1/ Click on the intersection of the circles to get a list of ID's. Manually send events to that list.
Javascript follows:
function s$(a) {
return document.getElementById(a);
}
var list
function hoverElement(evt) {
var root = s$("canvas");
var disp = s$("pointer");
disp.setAttribute("x",evt.clientX);
disp.setAttribute("y",evt.clientY);
rpos = root.createSVGRect();
rpos.x = evt.clientX;
rpos.y = evt.clientY;
rpos.width = rpos.height = 1;
list = root.getIntersectionList(rpos, null);
s = "clicked: "
$.each(list,function(item,val){
if (val.id != "pointer") {
s = s + (val.id) + " ";
}
})
alert(s);
}
var root = s$("canvas");
root.addEventListener("click", hoverElement, false);
There's some javascript that could probably be tidied up, but hopefully it answers your question.

Highlighting an area of an image map based on search text

This is a new question feeding from another question that was just answered here.
I am working to highlight a <div> based on search text. We've accomplished that, thanks to Alex.
Now, I'm trying to apply the same concept to mapped coordinates on an image map.
There's a jsfiddle here.
Here's the JS(jQuery 1.10.2)...
function doSearch(text) {
$('#content div').removeClass('highlight');
$('#content div:contains(' + text + ')').addClass('highlight');
}
If you want a method without SVG, you can use the Maphilight jQuery plugin (GitHub).
I have updated your jsFiddle.
function doSearch(text) {
$('#content div').removeClass('highlight');
$('#content div:contains(' + text + ')').addClass('highlight');
$('#Map area').mouseout();
$('#Map area[data-text*="' + text + '"]').mouseover();
}
$(function() {
$('#imgmap').maphilight({ stroke: false, fillColor: "ffff00", fillOpacity: 0.6 });
});
Note: For a better result just use a bigger image, because your bunny.jpg is too small and you have forced its size with height/width attributes.
It is not possible with image-maps and area elements, because those are non visible elements, that cannot have child elements, nor styles. You would have to do it a lot more complicated like described here
But it is possible using modern embeded SVGs - Almost every browser does support it nowadays. Even IE.
I tested it with Chromium and Firefox.
It cannot be done with the help of jQuery as far as I know but with usual Javascript. The key is:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="663px" height="663px">
<image xlink:href="http://webfro.gs/south/kb2/images/bunny.jpg" x="0" y="0" width="663" height="663" />
<circle class="office" cx="504" cy="124" r="94" />
<circle class="fire-exit" cx="168" cy="150" r="97" />
<circle class="main-exit" cx="378" cy="589" r="48" />
</svg>
_
var svgns="http://www.w3.org/2000/svg";
var areas = document.getElementsByTagNameNS(svgns, 'circle');
$(areas).each(function(elem) {
if(areas[elem].className.baseVal === text) {
areas[elem].className.baseVal += ' highlightsvg';
} else {
areas[elem].className.baseVal = areas[elem].className.baseVal.replace(' highlightsvg', '');
}
});
See here in the JSFiddle. Is that the way you want it?

Categories