Francesco,
This should get you started:
getMenuPosition: function(myLink){
var position = {
relativeTo: 'map'
};
var pbox = html.getMarginBox(myLink);
var sbox = {
h: 300,
w: 220
};
var containerBox = html.getMarginBox(this.map.id);
var top = pbox.t + pbox.h + 16;
if(top + sbox.h > containerBox.h){
position.bottom = containerBox.h - pbox.t + 1;
}else{
position.top = top;
}
if(pbox.l + sbox.w > containerBox.w){
position.right = 0;
}else{
position.left = pbox.l + 12;
}
return position;
},
_createDynamicLinks: function(links) {
if (window.isRTL) {
var _links = [];
array.forEach(links, function(link) {
_links.unshift(link);
});
links = _links;
}
html.empty(this.dynamicLinksNode);
array.forEach(links, function(link) {
if (link.label.toUpperCase() === 'BLAH BLAH'){
var myLink = html.create('span', {
innerHTML: utils.sanitizeHTML(link.label),
'class': "jimu-link jimu-align-leading jimu-leading-margin1",
style: {
lineHeight: this.height + 'px',
cursor: 'pointer'
}
}, this.dynamicLinksNode);
setTimeout(lang.hitch(this, function(){
var style = utils.getPositionStyle(this.getMenuPosition(myLink));
style.height = 'auto';
style.width = 'auto';
style.display = 'none';
style['padding-right'] = '12px';
style.position = 'absolute';
style['padding-right'] = '12px';
style['border-radius'] = '2px';
style['z-index'] = '111';
var menu = html.create('div', {
'class': "myMenu jimu-main-background",
style: style
}, this.dynamicLinksNode);
html.create('a', {
href: link.url,
target: '_blank',
rel: 'noopener noreferrer',
innerHTML: utils.sanitizeHTML('Sample Data 1'),
'class': "jimu-link jimu-align-leading jimu-leading-margin1",
style: {
lineHeight: this.height + 'px',
float: 'left',
clear: 'both'
}
}, menu);
html.create('a', {
href: link.url,
target: '_blank',
rel: 'noopener noreferrer',
innerHTML: utils.sanitizeHTML('Sample Data 2'),
'class': "jimu-link jimu-align-leading jimu-leading-margin1",
style: {
lineHeight: this.height + 'px',
float: 'left',
clear: 'both'
}
}, menu);
on(myLink, 'click', lang.hitch(this, function(){
if(html.getStyle(menu, 'display') === 'block'){
html.setStyle(menu, 'display', 'none');
}else{
html.setStyle(menu, 'display', 'block');
}
}));
}), 200);
return;
}
html.create('a', {
href: link.url,
target: '_blank',
rel: 'noopener noreferrer',
innerHTML: utils.sanitizeHTML(link.label),
'class': "jimu-link jimu-align-leading jimu-leading-margin1",
style: {
lineHeight: this.height + 'px'
}
}, this.dynamicLinksNode);
}, this);
},