https://www.pordata.pt/Blocks/RichWidgets/RichWidgets/Popup_InfoBalloon.pt.js?16319

1//Open an Dialog
2var RichWidgets_Popup_InfoBalloon_ShowTimeoutMilSecs = 200;
3var RichWidgets_Popup_InfoBalloon_HideTimeoutMilSecs = 800;
4var RichWidgets_Popup_InfoBalloon_InitialWidth = 220;
5var RichWidgets_Popup_InfoBalloon_InitialHeight = 53;
6var RichWidgets_Popup_InfoBalloon_Index = 4010;
7var RichWidgets_Popup_InfoBalloon_ParentUrl;
8var RichWidgets_Popup_InfoBalloon_Space = 4;
9
10function RichWidgets_Popup_InfoBalloon_init(linkId, setHeight, setWidth, parentUrl) {
11 outsystems.internal.$(function($) {
12  var openTimer;
13  var closeTimer;
14  var callOut; 
15  var cssTop;
16  var cssleft;
17  try  {
18   linkId = '#' + linkId;
19   RichWidgets_Popup_InfoBalloon_ParentUrl = parentUrl;
20
21   //Checks if the id is from a link or not
22   var linkHref = $(linkId).attr('href');
23
24   //Tests for visibility/existence
25   if (typeof linkHref== 'undefined') 
26    throw ("Inexistent or Invisible link");
27  } catch(e) {//Case the link is inexistent or invisible, it will show no errors.
28   return;
29  }
30
31  if (linkHref == "" || linkHref == "#" || linkHref.indexOf("javascript:") == 0) {
32      try {
33         window.OsHandleException(new Error("Popup link id must be the id of a Link Widget with Method Navigate."), outsystems.osErrorCodes.SystemJavascriptError, 'Popup_InfoBalloon');
34      } catch(e) {}
35      return;
36   } 
37
38  //on click open popup
39  var clickHandler = function() {
40   if ($(linkId).data("Popup_InfoBalloonDiv"))
41    return false;
42   var popupDiv = $("<div style='text-align: center; display: none;'></div>").appendTo("body");
43   popupDiv.append("<iframe width='100%' scrolling='auto' height='100%' frameborder='0'/>");
44   var waitText =  " A carregar conteúdo...";
45   var imgHTML = "<img style='border-width: 0px; height: 16px; width: 16px;' src='/RichWidgets/img/SpinBlack.gif'/>";
46   var pleaseWaitDiv = popupDiv.prepend("<div style='margin-left:8px; margin-top:17px;' class='Text_Note'>" + imgHTML + waitText + "</div>")
47   $(linkId).data("Popup_InfoBalloonDiv", popupDiv);
48   $(popupDiv).data("Popup_InfoBalloonLink", linkId);
49   
50   $(popupDiv).hover(cancelCloseTimer, setCloseTimer);
51
52   var pointerWidth = 17;
53   var leftPos = $(linkId).offset().left + $(linkId).width() + pointerWidth - $(window).scrollLeft() + 4;
54   
55   var topPos =  0;
56   if($(linkId)[0].children.length > 0){
57       topPos = $($(linkId)[0].children[0]).offset().top - 20;
58   } else {
59       topPos = $(linkId).offset().top - 20;
60   }
61
62   //Checks if the infoBallon will apear in the left ou right side
63   var center = $(linkId).offset().left + ($(linkId).width() / 2) - $(window).scrollLeft();
64   var align = (($(window).width() / 2) > center) ? 'right': 'left';
65   var iniWidth = (setWidth == -1) ? RichWidgets_Popup_InfoBalloon_InitialWidth: setWidth;
66   var rightPos = (($(linkId).offset().left - $(window).scrollLeft() - 4 - pointerWidth) - iniWidth);
67   
68   if (callOut!= null) {
69    callOut.remove();
70    callOut = null;
71   }
72   
73   if (align == 'right') 
74    callOut = $("<img src='/RichWidgets/img/Popup_pointerLeft.gif' style='display:none'/>").appendTo($("body"));
75   else
76    callOut = $("<img src='/RichWidgets/img/Popup_pointerRight.gif' style='display:none'/>").appendTo($("body"));
77
78
79   leftPos = (align == 'right') ? leftPos: rightPos;
80
81   OpenPopup(popupDiv, leftPos, topPos, align);
82  
83   $(popupDiv).find('iframe').height(0);
84
85   //load target page
86   $(popupDiv).find('iframe').attr('src', $(linkId).attr('href'));
87   $(popupDiv).find('iframe').load(function() {
88    resizePopup(this, $(this).parents('div:eq(0)'), align);
89   });
90   popupDiv = null;
91   pleaseWaitDiv = null;   
92   return false;
93  }
94  
95  outsystems.internal.registerClickInBothJQueries(linkId, clickHandler);
96  
97  //on click outside dialog, close it immediatly
98  $(document).bind('click',
99   function(event) {
100    var target = $(event.target);
101    if (target.is('.os-internal-ui-dialog') || target.parents('.os-internal-ui-dialog').length) {
102     return;
103    }
104    if ($(linkId).data("Popup_InfoBalloonDiv")) {
105     $(linkId).data("Popup_InfoBalloonDiv").dialog('close');
106     $(linkId).removeData("Popup_InfoBalloonDiv");
107    }
108   });
109   
110  //on hover click link to open after timeout
111  $(linkId).hover(
112   function() {
113    cancelCloseTimer();
114    openTimer = window.setTimeout(function() {
115     $(linkId).click()
116    },
117    RichWidgets_Popup_InfoBalloon_ShowTimeoutMilSecs);
118   },
119   function() { //on mouse out cancel timeout to click link to open
120    clearTimeout(openTimer);
121    setCloseTimer();
122   });
123
124  function OpenPopup(divToPopup, leftPos, topPos, alignI) {
125
126   //destroy any previous dialog 
127   $('.os-internal-ui-dialog-content').dialog('close');
128   
129   //Issue #542121 - in IE, the browser would "flick" when big (2x window height) vertical scroll was present
130   // due to the "please wait" info balloon initial position
131   // jquery ui would put it on top or bottom, depending on the version of IE (bug?)
132   // the solution was to override the "using" function of the jquery ui
133   var dialogPosition;
134   if(navigator.appVersion.indexOf("MSIE") != -1) {
135      dialogPosition = { 
136        my: alignI == 'right'? 'left': alignI, 
137        at: alignI == 'right'? alignI: 'left', 
138        of: $(linkId), 
139        using: function(props) {  
140          $(this).css( {
141            left : leftPos,
142            top :  topPos
143          }); 
144        } 
145      }
146   }
147  
148   $(divToPopup).show();
149      $('.os-internal-ui-dialog-titlebar').css("position","absolute");
150   $('.os-internal-ui-dialog-titlebar-close').css("position","absolute");
151   $(divToPopup).dialog({
152    dialogClass: 'os-internal-Popup',
153    resizable: false,
154    autoResize: false,
155    draggable: false,
156    bgiframe: true,
157    autoOpen: true,
158    height: 28 + ((setHeight == -1) ? RichWidgets_Popup_InfoBalloon_InitialHeight: setHeight),
159    width: ((setWidth == -1) ? RichWidgets_Popup_InfoBalloon_InitialWidth: setWidth),
160    position: dialogPosition ? dialogPosition : [leftPos, topPos],
161    zIndex: RichWidgets_Popup_InfoBalloon_Index,
162    close: function() {
163     $(callOut).remove();
164     $(divToPopup).find('iframe').attr('src', 'javascript:false');
165     $(divToPopup).find('iframe').empty();
166     $(divToPopup).dialog('destroy');
167     $($(divToPopup).data("Popup_InfoBalloonLink")).removeData("Popup_InfoBalloonDiv");
168     $(divToPopup).remove();
169     callOut = null;
170    },
171    open: function() {
172     $(divToPopup).parents('.os-internal-ui-dialog').css({
173        top:  topPos,
174        left: leftPos
175     });
176     if (alignI == 'right') {
177      cssTop = $(divToPopup).parents('.os-internal-ui-dialog').offset().top + 16;
178      cssleft = $(divToPopup).parents('.os-internal-ui-dialog').offset().left - 16;
179     }
180     else {
181      cssTop = $(divToPopup).parents('.os-internal-ui-dialog').offset().top + 16;
182      cssleft = $(linkId).offset().left - $(callOut).width() - 4;
183     };
184     $(callOut).hover(cancelCloseTimer, setCloseTimer);
185
186     var dialogIndex = $(divToPopup).parents('.os-internal-ui-dialog').css('z-index');
187     $(divToPopup).parents('.os-internal-ui-dialog').dropShadow();
188     $(callOut).css({

189      top: cssTop,
190      left: cssleft,
191      position: 'absolute',
192      zIndex: isNaN(dialogIndex) ? dialogIndex : (parseInt(dialogIndex) + 1)
193     }).show();
194    }
195   });
196   $('.os-internal-ui-dialog-titlebar').hide();
197   $('.os-internal-ui-dialog-titlebar-close').hide();
198  };
199  
200  function resizePopup(frameObj, divToPopup, align) {
201    $(divToPopup).find('iframe').css("height", "auto");
202    var innerDoc = (frameObj.contentDocument) ? frameObj.contentDocument: frameObj.contentWindow.document;
203    if (innerDoc.documentElement.scrollHeight == 0) // strangely this event is also triggered on close
204     return;
205    $(divToPopup).find('iframe').height(0);
206
207    var width = ((setWidth == -1) ? innerDoc.documentElement.scrollWidth: setWidth);
208    var height = ((setHeight == -1) ? innerDoc.documentElement.scrollHeight: setHeight);
209
210    $(divToPopup).height(height);
211
212    // #573796 - when the link is close to the end of the visible page
213    // we might need to redraw the popup a little upper in order to draw it in view
214    
215    // calculate the space between link and end of page
216    var remaining = $(window).scrollTop() + $(window).height() - $(linkId).offset().top;
217
218    // if the link is just above the window view, the popup might get a bit weird
219    // so we will scroll just a bit up
220    if (remaining < 30) { 
221      window.scrollBy(0, 30 - remaining);
222      remaining = $(window).scrollTop() + $(window).height() - $(linkId).offset().top;
223    }
224   
225    // check if there's enough room to draw the popup
226    // at this moment we get the correct height of the popup
227    var passbottom = remaining < $(divToPopup).height();
228
229    var finalTopPos = 0;
230    if($(linkId)[0].children.length > 0){
231      finalTopPos = $($(linkId)[0].children[0]).offset().top - (passbottom? $(divToPopup).height() - remaining + 5: 20) ;
232    } else {
233      finalTopPos = $(linkId).offset().top - (passbottom? $(divToPopup).height() - remaining + 5: 20);
234    }
235
236    // edge case: if the popup is to big to draw in the page just draw it at the start of the visible page.
237    if (finalTopPos < 0 || finalTopPos < $(window).scrollTop()) finalTopPos = $(window).scrollTop();
238  
239    // finally set the top position 
240    $(divToPopup).parents('.os-internal-ui-dialog').css({
241        top:  finalTopPos
242     });
243
244    //If there is a vertical scrollbar move the close button to the left
245    if (height == setHeight) $(divToPopup).parents('.os-internal-ui-dialog').find('.os-internal-ui-dialog-titlebar-close').animate({
246     right: '17px'
247    },
248    'fast');
249
250    //Hide ECT
251    $(innerDoc).find('.ECT_FeedbackContainer').hide();
252
253    var animateFinal = {};
254
255    if (setHeight == -1) animateFinal.height = height;
256
257    if (setWidth == -1) animateFinal.width = width;
258
259    var newRightValue = (($(linkId).offset().left - 4 - $(callOut).width()) - width);
260
261    if (setWidth == -1 && align == 'left') animateFinal.left = newRightValue;
262
263    var onAnimationComplete = function() {
264     $(divToPopup).dialog('_size');
265     $(divToPopup).find('iframe').height('100%').width(width);
266
267    };
268
269    $(divToPopup.find('div:eq(0)')).hide(); // hide pleasewait
270    if (setHeight == -1 || setWidth == -1) $(divToPopup).parents('.os-internal-Popup').animate(animateFinal, {
271     duration: 200,
272     complete: onAnimationComplete
273    });
274    else onAnimationComplete();
275
276    innerDoc = null;
277    $(divToPopup).find('iframe').unbind("load");
278   }
279
280  function cancelCloseTimer() {
281   clearTimeout(closeTimer);
282  };
283
284  function setCloseTimer() {
285   closeTimer = window.setTimeout(function() {
286    if ($(linkId).data("Popup_InfoBalloonDiv")) {
287     $(linkId).data("Popup_InfoBalloonDiv").dialog('close');
288     $(linkId).removeData("Popup_InfoBalloonDiv");
289    }
290   },
291   RichWidgets_Popup_InfoBalloon_HideTimeoutMilSecs);
292  };
293  
294 });
295}