github.com/aarzilli/tools@v0.0.0-20151123112009-0d27094f75e0/net/http/proxy1/3-popup-with-post-form.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 11 12 <span style="display:inline-block;margin-left:10px"> 13 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >hover<br>left</a><br> 14 15 16 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >hover left</a><br> 17 </span> 18 19 20 <div style="position:relative;right:10px;float:right;"> 21 <br> <br> 22 23 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >right</a><br> 24 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >right</a><br> 25 <span style="display:inline-block;height:500px;width:60px;background-color:#aaa;"> </span><br> 26 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >right</a><br> 27 28 <a href='http://www.welt.de/politik/deutschland/article146663316/In-Berlin-versinken-Fluechtlinge-im-Behoerden-Chaos.html' target='blab' >right</a> <br> 29 </div> 30 <br> 31 32 <span style="display:inline-block;height:500px;width:200px;background-color:#aaa;"> </span> 33 34 35 <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> 36 <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> 37 38 <script type="text/javascript"> 39 40 var vPadOffs = 30; // padding offset; top & bottom are 10; one is 20 41 vPadOffs += 2; // border with 42 var hPadSimple = 10; // simple horizontal padding offset 43 44 var winBrdrLeft = 4; // border to outer browser window 45 var winBrdrRight = winBrdrLeft+2+2; // popup border 2*1, shadow 46 47 var vDist = 0; // vertical distance to popup - cannot be set - any gap causes mouseleave event 48 49 50 function PopupContent(obj){ 51 52 53 var parAnchor = obj.closest("a"); // includes self 54 55 56 if (parAnchor.length<=0) { 57 return ""; 58 } 59 60 var domainX = document.domain; 61 console.log("domainX", domainX); 62 63 var href = obj.attr('href'); 64 if (href.indexOf('/') === 0) { 65 href = domainX + href; 66 } 67 68 var text = obj.text(); 69 if (text.length > 100){ 70 var textSh = ""; 71 textSh = text.substr(0,50); // start, end 72 textSh += " ... "; 73 textSh += text.substr(text.length-50,text.length-1); 74 text = textSh; 75 } 76 77 var formHtml = ""; 78 var prox01 = "http://localhost:8085/dedup"; 79 var prox02 = "https://libertarian-islands.appspot.com/dedup"; 80 81 formHtml += "<form action='"+prox01+"' method='post' "; 82 formHtml += " target='proxy-window' >"; 83 formHtml += "<input type='hidden' name='url-x' value='"+href+"' >"; 84 formHtml += "<input type='submit' value='subm' >"; 85 formHtml += "</form>"; 86 87 var html = ""; 88 html += "<a target='proxy-window' href='"+prox01 + "?url-x="+ href+"' >" + text + "</a>"; 89 html += formHtml; 90 91 return html; 92 93 } 94 95 96 function AddCSS(){ 97 98 if ($('#css-hover-popup').length <= 0) { 99 100 var s = ''; 101 s += '<style type="text/css" id="css-hover-popup" >'; 102 s += '.hc-a{'; 103 s += ' position: relative; '; 104 s += ' display:inline; '; 105 s += '}'; 106 s += '.hc-b1{}'; 107 s += '.hc-b2{'; 108 s += ' position:absolute;'; 109 s += ' z-index: 10;'; 110 s += ' left:-10px; top:-10px;'; 111 s += ' /* fixed height required for positioning computations */'; 112 s += ' width:150px; height:36px;'; 113 s += ' text-align:left; '; 114 s += ' font-family:Sans-serif !important; font-size:12px !important; '; 115 s += ' color:#666 !important; line-height:1.5em;'; 116 s += ''; 117 s += ' background:url("arrow-desc.png") no-repeat scroll center 0 transparent;'; 118 s += ' background-color: #ddd !important; '; 119 s += ' border:solid 1px #ddd; '; 120 s += ' border-radius:4px;'; 121 s += ' box-shadow:3px 3px 3px #888;'; 122 s += ' /* skipping the old stuff'; 123 s += ' -moz-border-radius:3px;-webkit-border-radius:3px;'; 124 s += ' -moz-box-shadow:5px 5px 5px #888;-webkit-box-shadow:5px 5px 5px #888; */'; 125 s += ' margin: 0px !important;' ; 126 s += ' padding: 10px; '; 127 s += ' padding-left: 10px !important; '; 128 s += ' padding-right: 10px !important;' ; 129 s += ' /* alternating upon top-bottom, adapt vPadOffs accordingly */ '; 130 s += ' aapadding-top: 20px;'; 131 s += ' display:none;'; 132 s += '}'; 133 s += '</style>'; 134 135 $(s).appendTo('head'); 136 137 } 138 139 } 140 141 function CreateAnchorWrappers(){ 142 143 var start = new Date().getTime(); 144 145 // Create parent wrappers 146 // $( '.hovering-popup' ).each(function( index ) { 147 $( 'a' ).each(function( index ) { 148 // console.log( index + ": " + $( this ).text() ); 149 var obj = $(this); 150 if (!obj.parent().hasClass("hc-a")){ 151 obj.wrap('<div class="hc-a" />'); 152 obj.addClass("hc-b1"); 153 var specialPop = '<div class="hc-b2" >' + 'specialpop' + '</div>'; // Potentially a lot of DOM insertions over time 154 obj.after(specialPop); //Append after selected element 155 156 var w = obj.width(); 157 if (w < 320) { 158 w = 320; 159 } 160 obj.siblings(".hc-b2").eq(0).css({ 'width': w +'px' }); 161 } 162 }); 163 164 // Remember when we finished 165 var end = new Date().getTime(); 166 console.log("creating wrappers took ",end - start); 167 } 168 169 170 function HidePop(obj){ 171 // var popup = $('.hc-b2'); 172 // popup.hide(); 173 obj.stop(true, true).fadeOut(300, function () { 174 console.log("fadeout-callback"); 175 }); 176 } 177 178 // A wrapping of a-tags is required, 179 // to bind the a-tag and the popup 180 // into one single mouseover-mouseleave-context. 181 // 182 // The wrapping makes positioning of the popup relative. 183 // At left:0, top:0; the popup overlays the original anchor-tag. 184 // 185 // The wrapping must be done in advance, causing a lot of DOM overhead. 186 // Approx. 3 ms per link. 187 // Dynamic wrapping could be done like this: 188 // Reacting to a-tag-mouseover, 189 // creating wrapper, 190 // calling parent.triggerHandler("mouseover"), 191 // calling it only once. 192 // 193 // Horizonal positioning is centered. 194 // We could also make it align right-or-left - with left: auto; right:-10px; 195 // 196 // hovercard.js made the anchor overlay the popup with 197 // wrapper.css("zIndex", "200"); 198 // anchor.css("zIndex", "100"); 199 // popup.css("zIndex", "50"); 200 // And resetting the all to zero on mouseleave. 201 // This would only look good with align right-or-left. 202 function ShowPop(obj){ 203 204 // CreateAnchorWrappers() // must be done in advance 205 206 // var popup = $('.hc-b2'); 207 var popup = obj.siblings(".hc-b2").eq(0); 208 if (popup.length<=0){ 209 popup = obj.find(".hc-b2").eq(0); 210 } 211 212 var objAbsTL = obj.offset(); 213 var objRelTL = obj[0].getBoundingClientRect(); 214 215 var new_left = - (popup.width() / 2) + (obj.width() / 2) - hPadSimple; 216 217 // prevent transgression to the left 218 if (objRelTL.left + new_left < winBrdrLeft){ 219 new_left = -objRelTL.left + winBrdrLeft; 220 } 221 // prevent transgression to the right 222 if (objRelTL.left + new_left + popup.width() + 2*hPadSimple > $(window).width() - winBrdrRight){ 223 new_left = -popup.width() - 2*hPadSimple - ( objRelTL.left - $(window).width() ) - winBrdrRight; 224 } 225 226 227 228 if (objRelTL.top < $(window).height() / 2) { 229 popup.css({ 230 'padding-top': '20px', 231 'padding-bottom': '10px', 232 left: new_left + 'px', 233 top: obj.height() + 1*vDist + 'px', 234 'background-position': 'center top', 235 'background-image': "url(arrow-desc.png)", 236 }); 237 } else { 238 console.log("ort>wh", objRelTL.top, $(window).height() / 2); 239 popup.css({ 240 'padding-top': '10px', 241 'padding-bottom': '20px', 242 left: new_left + 'px', 243 top: - popup.height() - vPadOffs - 1*vDist + 'px', 244 'background-position': 'center bottom', 245 'background-image': "url(arrow-asc.png)", 246 }); 247 } 248 249 var anch = obj.siblings(".hc-b1").eq(0); 250 if (anch.length<=0){ 251 anch = obj.find(".hc-b1").eq(0); 252 } 253 var html = PopupContent(anch); 254 popup.html(html); 255 256 // popup.show(); 257 popup.stop(true, true).delay(200).fadeIn(500); 258 259 } 260 261 262 $( document ).ready(function() { 263 264 var wh = $( window ).height(); // Returns height of browser viewport 265 var dh = $( document ).height(); // Returns height of HTML document 266 var scrollVert = $('body').scrollTop(); // How many pixel is document scrolled in the viewport 267 // var obj = $('#someObject'); 268 // var os1 = obj.offset(); // Our object's position relative to document root 269 // var os2 = obj[0].getBoundingClientRect(); // Our object's position relative to document root - MINUS scroll pos 270 // console.log("height window - doc:",wh,dh," sctp:", scrollVert , " offs1",os1.top, " offs2", os2.top); 271 // console.log("offs1-l", os1.left, " offs2-l", os2.left); 272 273 274 AddCSS(); 275 276 CreateAnchorWrappers(); 277 278 279 // Here popup would not be clickable. 280 // It disappears as soon as cursor leaves obj. 281 $( 'a' ).on( "mouseover", function() { 282 }); 283 284 285 $(document).on( "click", "a" , function(e) { 286 console.log("click1"); 287 // e.preventDefault(); 288 }); 289 290 // We have to latch the events onto the parent wrapper node. 291 // Thus all parent nodes need to be created on documentload :( 292 293 // mouseover fires again for child elements. 294 // it prevents click events 295 // $( '.hc-a' ).on( "mouseover", function(e) { 296 297 $( '.hc-a' ).on( "mouseenter", function(e) { 298 var obj = $(this); 299 ShowPop(obj); 300 }); 301 $( '.hc-a' ).on( "mouseleave", function() { 302 var obj = $(this).find(".hc-b2").eq(0); 303 HidePop(obj); 304 }); 305 306 307 $( '.hc-a' ).on( "focusin", function() { 308 // var obj = $(this); 309 // ShowPop(obj); 310 }); 311 312 $( '.hc-a' ).on( "focusout", function() { 313 // var obj = $(this).find(".hc-b2").eq(0); 314 // HidePop(obj) 315 }); 316 317 console.log( "document ready completed" ); 318 }); 319 320 321 </script> 322 </body> 323 </html>