@@ -34,14 +34,18 @@ //container for the tweets that will make a quote var tweetlist = {} -//interval to be used whe user turns autoadd on +//interval to be used when user turns autoadd on var auto_add_interval = 0 +//interval to be used to check when the user closed the popup +var check_popup_state_interval = 0 + // global preferences var preferences = { 'order' : 'asc' } var embed_styles = null +var popup_window //For people without firebug if (!console) { @@ -204,45 +208,42 @@ function createQuote(){ return true } -function splitScreenToggle(mode){ +function launchPopupMode(link){ var quoteurl_half = $('main-container') var twitter_half = $('twitter-container') - var twitter_iframe = $('twitter-iframe') - var permalink_help = $('permalink-help') - permalink_help.removeClass((mode!='search')?'search':'home') - permalink_help.addClass((mode=='search')?'search':'home') - var urls = { - 'home':'http://twitter.com/home', - 'search':'http://search.twitter.com' - } - if ((mode=='close')||((document.body.hasClass('splitted')) && (twitter_half.get('_mode') == mode))){ - quoteurl_half.style.width = '98%' - twitter_half.style.width = '1%' - twitter_half.style.visibility = 'hidden' - twitter_iframe.style.visibility = 'hidden' - document.body.removeClass('splitted') - clearInterval(auto_add_interval) - } else { - quoteurl_half.style.width = '50%' - twitter_half.style.width = '45%' - twitter_half.style.visibility = 'visible' - twitter_iframe.style.visibility = 'visible' - if (twitter_iframe.get('src') != urls[mode]){ - if (twitter_iframe.get('src') != undefined) { - twitter_iframe.style.visibility = 'hidden' - twitter_iframe.addEventListener('load', function(){ - $('twitter-iframe').style.visibility = 'visible' - }, false) + quoteurl_half.style.width = '50%' + twitter_half.style.width = '45%' + twitter_half.style.visibility = 'visible' + document.body.addClass('splitted') + var popScreenX = window.screenX + twitter_half.offsetLeft + var popScreenY = window.screenY + var popWidth = twitter_half.offsetWidth + 20 + var popHeight = window.innerHeight + 20 + popup_window = window.open(link.get('href'),link.get('_windowname'), + 'scrollbars=yes,screenX='+popScreenX+',screenY='+popScreenY+',width='+popWidth+',height='+popHeight); + popup_window.focus() + check_popup_state_interval = setInterval(function(){ + try{ + if (popup_window.closed === true){ + closePopupMode() } - twitter_iframe.set('src', urls[mode]) - - } - document.body.addClass('splitted') - autoAddOn() - twitter_half.set('_mode', mode) - } - updateIframeHeight() - return false; + updateIframeHeight() + }catch(e){ + console.log(e) + } + },500) + return false +} + +function closePopupMode(){ + var quoteurl_half = $('main-container') + var twitter_half = $('twitter-container') + quoteurl_half.style.width = '98%' + twitter_half.style.width = '1%' + twitter_half.style.visibility = 'hidden' + document.body.removeClass('splitted') + clearInterval(check_popup_state_interval) + popup_window.close() } function enableAutoAdd(){ js/main.js @@ -24,20 +24,23 @@ body{ margin-right:.3em; border-left:5px dashed #AFEFF1; } -#iframe-loading{ +#click-to-raise{ position:absolute; color:#AFEFF1; font-size:3em; top:5em; - left:70%; + left:60%; z-index:1; } -#twitter-iframe{ +#twitter-raise{ border:none; position:relative; z-index:2; width:100%; height:100%; + background:none; + opacity:.5; + cursor:pointer; } #close-split{ position:fixed; skin/default/style.css @@ -32,11 +32,10 @@ </div> </form> <div class="split-help"> - <p><strike>Or you can use one of the <b>Split Screen Modes</b>: - <b>Twitter Home</b> and - <b>Twitter Search</b> - to drag <b>permalinks</b> to the text-field.</strike></p> - <p>Split Screen Mode is <a href="http://www.quoteurl.com/veazm">disabled</a>. Drag'n drop will return soon in a different form, thanks for the patience.</p> + <p>Or you can split the screen and pop-up + <a href="http://twitter.com/home" target="_blank" onclick="return launchPopupMode(this);" _windowname="quoteurl_popup" >Twitter Home</a> or + <a href="http://search.twitter.com" target="_blank" onclick="return launchPopupMode(this);" _windowname="quoteurl_popup">Twitter Search</a> + in a separated window to drag <b>permalinks</b> into the text-field.</p> <div id="permalink-help"></div> <div class="section-end"></div> </div> @@ -72,9 +71,9 @@ </div> </div> <!-- end main --> <div id="twitter-container"> - <a class="del" href="#" id="close-split" onclick="return splitScreenToggle('close');">x</a> - <p id="iframe-loading">Loading…</p> - <iframe id="twitter-iframe"></iframe> + <a class="del" href="#" id="close-split" onclick="return closePopupMode();">x</a> + <p id="click-to-raise">Click to raise Twitter pop-up.</p> + <div id="twitter-raise" onclick="return popup_window.focus();"></div> </div> <div class="footer"> <p> templates/index.html 0f5fbf53e33923181c7895544c73db419604ebf5 Fabricio Zuardi fabricio@gmail.com http://github.com/fczuardi/quoteurl/commit/28740eabea6133f9b472ab9506c63d437e35a58e 28740eabea6133f9b472ab9506c63d437e35a58e 2009-03-18T17:06:01-07:00 2009-03-18T17:06:01-07:00 New Split Screen mode, now based on popup windows instead of iframe [#28 state:resolved] 8b1e4ea0e602e5f06e3642ee8cc62882d28cf4f4 Fabricio Zuardi fabricio@gmail.com