github.com/aarzilli/tools@v0.0.0-20151123112009-0d27094f75e0/net/http/proxy1/4-popup.html (about) 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 8 <script type="text/javascript" src="outp-jquery-min-2.1.1.js"></script> 9 10 <span style="display:block;width:2110px"> <br><br></span> 11 12 13 14 <span style="display:inline-block;margin-left:10px"> 15 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' 16 >hover<br>left</a><br> 17 18 19 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' 20 >hover left hover left hover left hover left hover left </a><br> 21 </span> 22 23 24 <div style="position:relative;right:10px;float:right;"> 25 <br> <br> 26 27 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >right</a><br> 28 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >right</a><br> 29 <span style="display:inline-block;height:500px;width:60px;background-color:#aaa;"> </span><br> 30 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >right</a><br> 31 32 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >right</a> <br> 33 </div> 34 <br> 35 36 <span style="display:inline-block;height:500px;width:200px;background-color:#aaa;"> </span> 37 38 39 <p>Lorem ipsum <a id='someObject' href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >hover2</a> bono.</p> 40 <p>Lorem ipsum Lorem ipsum <a id='someObject' href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >hover2</a> bono.</p> 41 42 <script type="text/javascript"> 43 44 var hOffs = 10 ; // horizontal offset 45 46 var vPaddingOffs = 5 ; // invisible padded ridge 47 var vShadowOffs = 6 ; // 48 49 50 51 function PopupContent(obj){ 52 53 54 var parAnchor = obj.closest("a"); // includes self 55 56 57 if (parAnchor.length<=0) { 58 return ""; 59 } 60 61 var domainY = location.host; 62 var protocolY = location.protocol; 63 64 var href = parAnchor.attr('href'); 65 if (href.indexOf('/') === 0) { 66 href = domainY + href; 67 } 68 69 var text = obj.text(); 70 if (text.length > 100){ 71 var textSh = ""; 72 textSh = text.substr(0,50); // start, end 73 textSh += " ... "; 74 textSh += text.substr(text.length-50,text.length-1); 75 text = textSh; 76 } 77 78 var formHtml = ""; 79 var prox01 = "http://localhost:8085/dedup"; 80 var prox02 = "https://libertarian-islands.appspot.com/dedup"; 81 var proxURL = prox02; 82 83 formHtml += "<form action='"+proxURL+"' method='post' "; 84 formHtml += " target='proxy-window' >"; 85 formHtml += "<input type='hidden' name='prot' value='"+protocolY+"' >"; 86 formHtml += "<input type='hidden' name='url-x' value='"+href+"' >"; 87 formHtml += "<input type='submit' value='subm' >"; 88 formHtml += "</form>"; 89 90 var html = ""; 91 html += "<a target='proxy-window' href='"+prox01 + "?url-x="+ href+"&prot="+protocolY+"' >" + "localhost" + "</a><br>"; 92 html += "<a target='proxy-window' href='"+proxURL + "?url-x="+ href+"&prot="+protocolY+"' >" + text + "</a>"; 93 html += formHtml; 94 95 return html; 96 97 } 98 99 100 function AddCSS(){ 101 102 if ($('#css-hover-popup').length <= 0) { 103 104 var s = ''; 105 s += '<style type="text/css" id="css-hover-popup" >'; 106 s += ''; 107 s += '.hc-b2{'; 108 s += ' position:absolute;'; 109 s += ' z-index: 10;'; 110 s += ' left:-10px; top:-10px;'; 111 s += ' width: 240px; '; 112 s += ' /* dont fix the height - use jQuery.outerHeight() for computations */ '; 113 s += ' height: auto ;'; 114 s += ''; 115 // s += ' border-left: solid 2px #d22; '; 116 // s += ' border-right:solid 2px #d22; '; 117 // s += ' border: 1px solid #d22; '; 118 s += ' margin: 0px !important; ' ; 119 s += ' /* alternating upon top-bottom, adapt vPaddingOffs accordingly */ '; 120 s += ' padding: 0px; '; 121 s += ' padding-left: 0px !important; '; 122 s += ' padding-right: 0px !important;' ; 123 s += ''; 124 s += ' display:none;'; 125 s += '}'; 126 s += ''; 127 s += '.hc-b3{'; 128 s += ' text-align:left; '; 129 s += ' font-family:Sans-serif !important; font-size:12px !important; '; 130 s += ' color:#666 !important; line-height:1.5em;'; 131 s += ' background:url("arrow-desc.png") no-repeat scroll center 0 transparent;'; 132 s += ' background-image: none;'; 133 s += ' background-color: #ddd !important; '; 134 s += ' border:solid 1px #ddd; '; 135 s += ' border-radius:4px;'; 136 s += ' box-shadow:3px 3px 3px #888;'; 137 s += ' /* skipping the old stuff'; 138 s += ' -moz-border-radius:3px;-webkit-border-radius:3px;'; 139 s += ' -moz-box-shadow:5px 5px 5px #888;-webkit-box-shadow:5px 5px 5px #888; */'; 140 s += ' margin: 0px !important; ' ; 141 s += ' padding: 5px 8px !important; '; 142 s += '}'; 143 s += ''; 144 145 146 s += '</style>'; 147 148 $(s).appendTo('head'); 149 150 151 var popupUpScaffold = '<div id="popup1" class="hc-b2" ><div id="pop1inner" class="hc-b3" >content popup1</div></div>'; 152 $('body').after(popupUpScaffold); //Append after selected element 153 154 } 155 156 } 157 158 159 160 161 162 function HidePop(obj){ 163 var popup = $('#popup1'); 164 // popup.hide(); 165 popup.stop(true, true).fadeOut(300, function () { 166 console.log("fadeout-callback"); 167 }); 168 } 169 170 // 171 // hovercard.js made the anchor overlay the popup with 172 // wrapper.css("zIndex", "200"); 173 // anchor.css("zIndex", "100"); 174 // popup.css("zIndex", "50"); 175 // And resetting the all to zero on mouseleave. 176 // 177 // But this does not work, when both are children of different z-index-layers. 178 // Hovercard binds popup and anchor together. 179 // But this destroys parent-child links for instance in image gallery plugins. 180 // It also prevents popup from floating above all layers, 181 // since anchor might be locked into a lower layer. 182 // 183 // We therefore take the global approach. 184 // There remains the problem of syncing mouseenter-mouseleave 185 // but we solved that by mediating timer. 186 function ShowPop(obj){ 187 188 189 var popup = $('#popup1'); 190 var inner = $('#pop1inner'); 191 192 var html = PopupContent(obj); 193 inner.html(html); // setting content => force sizing 194 195 196 if ( obj.outerWidth() <= 240 ) { 197 popup.css({ 198 width: 240 + 'px', 199 }); 200 } else if ( obj.outerWidth() > 480 ) { 201 popup.css({ 202 width: 480 + 'px', 203 }); 204 } else { 205 popup.css({ 206 width: obj.outerWidth() + 2*hOffs + 'px', 207 }); 208 } 209 210 211 212 var objAbsTL = obj.offset(); 213 214 var scrollTop = $('body').scrollTop(); // How many pixel is document scrolled in the viewport 215 var scrollLeft = $('body').scrollLeft(); 216 217 var viewportTop = objAbsTL.top - scrollTop; 218 var viewportLeft = objAbsTL.left + obj.outerWidth() - scrollLeft; 219 220 var vert = "lower"; 221 if (viewportTop < $(window).height() / 2) { 222 vert = "upper"; 223 } 224 var horz = "right"; 225 if (viewportLeft < $(window).width() * 0.75) { 226 horz = "left"; 227 } 228 229 console.log("quadrant", vert, horz); 230 231 232 if ( vert == "upper" ) { 233 // show below 234 popup.css({ 235 'padding-top': vPaddingOffs + 'px', 236 'padding-bottom': '0px', 237 'background-position': 'center top', 238 }); 239 popup.css({ 240 left: objAbsTL.left - hOffs + 'px', 241 top: objAbsTL.top + obj.outerHeight() + 'px', 242 }); 243 244 } else { 245 // show above 246 popup.css({ 247 'padding-top': '0px', 248 'padding-bottom': vPaddingOffs + 'px', 249 'background-position': 'center bottom', 250 }); 251 popup.css({ 252 left: objAbsTL.left - hOffs + 'px', 253 top: objAbsTL.top - popup.outerHeight() + vPaddingOffs - vShadowOffs + 'px', 254 }); 255 // popup.css({ 256 // top: 'auto', 257 // bottom: $( document ).height() - objAbsTL.top - vPaddingOffs + 'px', 258 // }); 259 } 260 261 262 263 264 265 inner.css({ 266 'text-align': 'left', 267 }); 268 if ( horz == "right" ) { 269 popup.css({ 270 left: objAbsTL.left + obj.outerWidth() - popup.outerWidth() + hOffs + 'px', 271 right: 'auto', 272 }); 273 inner.css({ 274 'text-align': 'right', 275 }); 276 console.log("righted",objAbsTL.left + obj.outerWidth()); 277 } 278 279 280 281 inner.show(); 282 283 popup.stop(true, true).delay(10).fadeIn(500); 284 285 286 } 287 288 289 $( document ).ready(function() { 290 291 var wh = $( window ).height(); // Returns height of browser viewport 292 var dh = $( document ).height(); // Returns height of HTML document 293 var scrollVert = $('body').scrollTop(); // How many pixel is document scrolled in the viewport 294 var obj = $('body').find('*').last(); 295 var os1 = obj.offset(); // Our object's position relative to document root 296 var os2 = obj[0].getBoundingClientRect(); // Our object's position relative to document root - MINUS scroll pos 297 console.log("height window - doc:",wh,dh," sctp:", scrollVert , " offs1",os1.top, " offs2", os2.top); 298 // console.log("offs1-l", os1.left, " offs2-l", os2.left); 299 300 AddCSS(); 301 302 303 // We have to couple mouseenter-mouseleave 304 // for anchor and popup. 305 // 306 // This is fun, since both have a GAP between. 307 // 308 // We choose an event driven mediation 309 // 310 // anchor-mouseenter => showPop 311 // anchor-mouseleave-popup-mouseenter => keep going 312 // anchor-mouseleave, popup-mouseleave => hidePop 313 314 var hidingCountdownID = 0; 315 316 317 $( 'a' ).on( "mouseenter", function(evt) { 318 if (hidingCountdownID > 0){ 319 clearTimeout(hidingCountdownID); // cancel 320 hidingCountdownID = 0; 321 } 322 var obj = $(evt.target); 323 ShowPop(obj); 324 }); 325 326 $( 'a' ).on( "mouseleave", function(evt) { 327 hidingCountdownID = setTimeout( function(){ 328 var obj = $(evt.target); 329 HidePop(obj); 330 hidingCountdownID = 0; 331 }, 400); 332 }); 333 334 335 $( '#popup1' ).on( "mouseenter", function(evt) { 336 if (hidingCountdownID > 0){ 337 clearTimeout(hidingCountdownID); // cancel 338 hidingCountdownID = 0; 339 } 340 }); 341 $( '#popup1' ).on( "mouseleave", function(evt) { 342 var obj = $(evt.target); 343 HidePop(obj); 344 }); 345 346 347 348 $( 'a' ).on( "focusin", function(evt) { 349 var obj = $(evt.target); 350 ShowPop(obj); 351 }); 352 353 $( '#popup1' ).on( "focusout", function(evt) { 354 var obj = $(evt.target); 355 HidePop(obj); 356 }); 357 358 console.log( "document ready completed" ); 359 }); 360 361 362 </script> 363 </body> 364 </html>