I want to display port title when user hover on port.In title I basically want to display the port name.
this is my code -
in the definiation I am adding the title attribute-
portMarkup: '<g class="port port<%= id %>"><circle class="port-body"/><text class="port-label"/><title class="mytitle"/></g>'
and on hovering on port this is the logic-
$(document).ready(function() {
$("[magnet=true]:not(.element)").hover(function(){
console.log("yes")
var magnetelement=$(this);
var firstelement=magnetelement[0];
var portname=firstelement.getAttribute('port');
var cell;
var index;
var allelement=graph.getElements();
for(var j=0;j<allelement.length;j++)
{
var cel=allelement[j];
if(cel instanceof joint.shapes.devs.Model)
{
var outportsarr=cel.get('outPorts');
for(var i=0;i<outportsarr.length;i++)
{
if(portname==outportsarr[i])
{
index=i;
cell=cel;
break;
}
}
}
}
cell.attr('title/text',b);
}});
hover gets triggerd for first time and display correctly the port name in title but after that I get an error in console "Error: Invalid value for attribute transform=" ""
after this error , hover is not triggered again.
can anyone help me in this?
Related
My NodeJS GET route:
router.get('/stores', function (req, res, next) {
errorMsg = req.flash('error')[0];
successMsg = req.flash('success')[0];
Product.find(function (err, products) {
// console.log(products)
res.render('admin/stores', {
layout: 'admin-map.hbs',
stores: products,
errorMsg: errorMsg,
GOOGLE_APIKEY: process.env.GOOGLE_APIKEY,
noErrors: 1
});
});
The route /stores returns json data which holds latitude and longitude and I want it in my script tag of map.html with loop, to render the pins on the map. Below, the script:
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
alert(this.stores);
var mapOptions = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.433053, 78.412172),
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({ });
infowindow.open(map,marker);
}
</script>
<!-- ... -->
</head>
</html>
How can I do it?
It seems you need to follow two steps
1. Pass data from hbs to script
Using triple brackets syntax
<script>
let stores = {{{ stores }}}; // the triple brackets
console.log('Data : ', stores);
function loadMap() {
...
Check if data is being printed in console? If yes your data is available in the front-end script and you can
2. Loop through it
...
for (let i = 0; i < stores.length; i++) {
// the JS loop instead of hbs one, because we are on front-end
var marker = new google.maps.Marker({
position: new google.maps.LatLng(stores[i].lat, stores[i].lng), // whatever applies
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
}
And donot need to call setMap(), you have already set the map in map: map above
the answer is inside fronted script i can have an object declared globally and this double flower brackets works fine with them
<script>
function loadMap() {
alert(this.stores);
var mapOptions = {
center:new google.maps.LatLng(17.433053, 78.412172),
zoom:5
}
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
{{#each stores}}
var marker = new google.maps.Marker({
position: new google.maps.LatLng(17.433053, 78.412172),
map: map,
draggable:true,
icon:'/scripts/img/logo-footer.png'
});
{{/each}}
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({ });
infowindow.open(map,marker);
}
</script>
The following code, included in $(document).ready of the modal window, does not work. Apparently the iframe of the SharePoint modal window has not yet been loaded into DOM, when the addEventListener fires out.
What would be the correct approach to handle this?
window.addEventListener("message", function(event) {
if(event.data == "openpi");{
alert(1)
}
});
Thank you!
There is dialogReturnValueCallback option in SP.UI.ModalDialog.showModalDialog, you could get the value from dialog and then used in parent window.
<script type="text/javascript">
//******** Dialog with Data from Pop Up Starts Here ***********/
function openDialogAndReceiveData(tUrl, tTitle) {
var options = {
url: tUrl,
title: tTitle,
dialogReturnValueCallback: onPopUpCloseCallBackWithData
};
SP.UI.ModalDialog.showModalDialog(options);
}
function onPopUpCloseCallBackWithData(result, returnValue) {
if(result== SP.UI.DialogResult.OK)
{
SP.UI.Status.removeAllStatus(true);
var sId = SP.UI.Status.addStatus("Data successfully populated to text boxes from Pop-up");
SP.UI.Status.setStatusPriColor(sId, 'green');
document.getElementById('<%= txtData1.ClientID %>').value = returnValue[0];
document.getElementById('<%= txtData2.ClientID %>').value = returnValue[1];
}else if(result== SP.UI.DialogResult.cancel)
{
SP.UI.Status.removeAllStatus(true);
var sId = SP.UI.Status.addStatus("You have cancelled the Operation !!!");
SP.UI.Status.setStatusPriColor(sId, 'yellow');
}
}
//******** Dialog with Data from Pop Up Ends Here ***********/
</script>
Check here for details
var _TooltipHandler = {
toolTipOverlay : null,
onMouseOver : function (e)
{
_TooltipHandler.toolTipOverlay.set("bodyContent", this.get('alt'));
var region= this.get('region');
var elmLeft = region.left;
var windowWidth = this.get('winWidth');
_TooltipHandler.toolTipOverlay.set("align", {node:this,
points:[_yui.WidgetPositionExt.BL, _yui.WidgetPositionExt.TR]});
_TooltipHandler.toolTipOverlay.show();
e.preventDefault();
},
}
Hello guys,
Give me a way to find the width of the current toolTipOverlay div. We do not use jquery so please be specific related to yui 3.0 js.
Thanks in advance.
The width of the widget (tooltip inherited from Widget) is the width of the boundingBox node;
var bb_width = widget_instance.get('boundingBox').getStyle('width');
Check the Widget's Basic Attributes : http://yuilibrary.com/yui/docs/widget/#attributes
I am using the tooltipDialog from extlib and want to position the tooltip to the left and right instead of the default which seem to be below.
any idea how to do this?
== Update ==
Found the following code in extlib
eclipse\plugins\com.ibm.xsp.extlib.controls\resources\web\extlib\dijit\TooltipDialog.js
so I tried a few different options, but could not get it to work
http://dojo-toolkit.33424.n3.nabble.com/dijit-TooltipDialog-orientation-of-popup-td1007523.html
XSP.openTooltipDialog("#{id:tooltipDialog1}","#{id:link2}","orient:{BR:'BL',BL:'BR'}")
XSP.openTooltipDialog("#{id:tooltipDialog1}","#{id:link2}","orient:[BR:'BL',BL:'BR']")
XSP.openTooltipDialog = function xe_otd(dialogId,_for,options,params) {
dojo.addOnLoad(function(){
var created = false
var dlg = dijit.byId(dialogId)
if(!dlg) {
options = dojo.mixin({dojoType:"extlib.dijit.TooltipDialog"},options)
dojo.parser.instantiate([dojo.byId(dialogId)],options);
dlg = dijit.byId(dialogId)
created = true;
} else {
if(dlg.keepComponents) {
dijit.popup.open({
popup: dlg,
around: dojo.byId(_for)
});
return;
}
}
if(created) {
dojo.connect(dlg, 'onBlur', function(){
dijit.popup.close(dlg);
})
}
dlg.attr("content", "<div id='"+dialogId+":_content'></div>");
var onComplete = function() {
dijit.popup.open({
popup: dlg,
around: dojo.byId(_for)
});
dlg.focus();
}
var axOptions = {
"params": dojo.mixin({'$$showdialog':true,'$$created':created},params),
"onComplete": onComplete,
"formId": dialogId
}
XSP.partialRefreshGet(dialogId+":_content",axOptions)
})
}
btw: I also need to set the showDelay
also found these usefull links
http://dojotoolkit.org/api/1.6/dijit/TooltipDialog
I think you need to set the following dojo attribute:
<xp:dojoAttribute name="data-dojo-props" value="position:['before']">
</xp:dojoAttribute>
Atleast in dojo-1.8.1,
dijit.popup.open({
popup: dlg,
around: node,
orient: ["after-centered"]
});
places the ToolTipDialog to right of node.
The "position" attribute of the tooltip control supports values of "above", "below", "left", and "right".
I have an SVG canvas with text that I would like to respond to clicks. The code below isn't getting the job done:
var MyView = Backbone.View.extend({
tagName : "text",
events : {
"click" : "clickhandler"
},
initialize : function() {
this.centerX = this.options.centerX;
this.centerY = this.options.centerY;
this.svg = this.options.svg;
this.tagText = this.model.get("tag_name");
this.render();
},
clickhandler : function(event) {
console.log("I was clicked!"); //This is not firing on click
},
render : function() {
this.el = this.svg.text(this.centerX, this.centerY, this.tagText, {});
return this;
}
});
This is being called in the render function of another view as such :
container.svg({
onLoad : function(svg) {
for ( var i = 1; i < that.relatedTags.length; i++) {
tagView = new MyView({
model : this.relatedTags.at(i),
centerX : 100,
centerY : 200,
svg : svg
});
}
container.append(tagView);
}
});
It shows up just fine and if I throw this in at the end of the for loop :
$(tagView.el).click(function() {
alert("xx");
});
Then the clicking works but I need to access the Backbone Model associated with the view so I'd much prefer the backbone event to a straight JQuery event.
The problem here is, that you set the element of the view in the render method. But backbone tries to add the events on initialization. So when backbone tries to add the events there is no element in you case. So either you have to start your view with your svg text, or you add the events by hand in your render method.
Maybe you can add the events on the svg itself and jquery is clever enough to handle the delegation. But I'm not sure in this case.