| Index: trunk/mockups/athena/athena.css |
| — | — | @@ -7,6 +7,8 @@ |
| 8 | 8 | |
| 9 | 9 | color: white; |
| 10 | 10 | background: black; |
| | 11 | + |
| | 12 | + z-index: 9999; |
| 11 | 13 | } |
| 12 | 14 | |
| 13 | 15 | #top-bar { |
| — | — | @@ -84,3 +86,15 @@ |
| 85 | 87 | background-image: url(images/icons/athena_icon_efefef_globe.png); |
| 86 | 88 | } |
| 87 | 89 | |
| | 90 | + |
| | 91 | + |
| | 92 | +#embed { |
| | 93 | + position: absolute; |
| | 94 | + top: 0; |
| | 95 | + left: 0; |
| | 96 | + right: 0; |
| | 97 | + bottom: 0; |
| | 98 | + overflow: auto; |
| | 99 | + border: none; |
| | 100 | +} |
| | 101 | + |
| Index: trunk/mockups/athena/proxy.php |
| — | — | @@ -30,7 +30,9 @@ |
| 31 | 31 | $context = stream_context_create( |
| 32 | 32 | array( |
| 33 | 33 | 'http' => array( |
| 34 | | - 'user_agent' => 'Wikipedia Mobile (Athena mockup)', |
| | 34 | + // fake "iPhone" in there to force a mode where show/hide works |
| | 35 | + // this should not be required, grrrr! |
| | 36 | + 'user_agent' => 'Wikipedia Mobile (Athena mockup; iPhone)', |
| 35 | 37 | ), |
| 36 | 38 | ) |
| 37 | 39 | ); |
| Index: trunk/mockups/athena/index.html |
| — | — | @@ -20,6 +20,8 @@ |
| 21 | 21 | <button class="button-you">You</button> |
| 22 | 22 | </div> |
| 23 | 23 | |
| | 24 | +<iframe id="embed" width="100%" height="100%" src="proxy.php?title=While_My_Guitar_Gently_Weeps"></iframe> |
| | 25 | + |
| 24 | 26 | <div id="page-content"></div> |
| 25 | 27 | |
| 26 | 28 | <div id="bottom-bar" class="bar"> |
| Index: trunk/mockups/athena/athena.js |
| — | — | @@ -44,9 +44,63 @@ |
| 45 | 45 | } |
| 46 | 46 | }; |
| 47 | 47 | |
| | 48 | +var embed = { |
| | 49 | + init: function() { |
| | 50 | + var $embed = $('#embed'); |
| | 51 | + $(window).bind('message', function(event) { |
| | 52 | + var src = event.originalEvent.source, |
| | 53 | + msg = event.originalEvent.data; |
| | 54 | + if (src !== $embed[0].contentWindow) { |
| | 55 | + // not from our iframe; ignore |
| | 56 | + return; |
| | 57 | + } |
| | 58 | + var key = '[wiki-mobile-embed]'; |
| | 59 | + if (msg.substr(0, key.length) !== key) { |
| | 60 | + // not from our iframe's protocol; ignore |
| | 61 | + return; |
| | 62 | + } |
| | 63 | + var data = JSON.parse(msg.substr(key.length)); |
| | 64 | + if ('event' in data && typeof data.event === 'string') { |
| | 65 | + $embed.trigger('embed:' + data.event, data); |
| | 66 | + } |
| | 67 | + }); |
| | 68 | + $embed.bind('embed:navigate', function(event, data) { |
| | 69 | + // hack hack hack! |
| | 70 | + var matches = data.url.match(/^\/wiki\/(.*)$/); |
| | 71 | + if (matches) { |
| | 72 | + app.loadPage(decodeURIComponent(matches[1])); |
| | 73 | + } else { |
| | 74 | + // external! |
| | 75 | + document.location = data.url; |
| | 76 | + } |
| | 77 | + }); |
| | 78 | + }, |
| | 79 | + |
| | 80 | + /** |
| | 81 | + * @return promise |
| | 82 | + */ |
| | 83 | + loadPage: function(title) { |
| | 84 | + var $embed = $('#embed'); |
| | 85 | + $embed.attr('src', 'proxy.php?title=' + encodeURIComponent(title.replace(' ', '_'))); |
| | 86 | + var deferred = new $.Deferred(); |
| | 87 | + $embed.bind('embed:load', function() { |
| | 88 | + deferred.resolve(); |
| | 89 | + $embed.unbind('embed:load'); |
| | 90 | + }); |
| | 91 | + return deferred.promise(); |
| | 92 | + } |
| | 93 | +}; |
| | 94 | + |
| | 95 | + |
| 48 | 96 | var app = { |
| | 97 | + init: function() { |
| | 98 | + embed.init(); |
| | 99 | + app.loadPage('While My Guitar Gently Weeps'); |
| | 100 | + }, |
| | 101 | + |
| 49 | 102 | loadPage: function(title) { |
| 50 | 103 | ui.startSpinner(); |
| | 104 | + /* |
| 51 | 105 | wiki.api({ |
| 52 | 106 | action: 'query', |
| 53 | 107 | prop: 'revisions', |
| — | — | @@ -68,11 +122,15 @@ |
| 69 | 123 | ui.showPage(page.title, rev['*']); |
| 70 | 124 | ui.stopSpinner(); |
| 71 | 125 | }); |
| 72 | | - }, |
| | 126 | + */ |
| | 127 | + embed.loadPage(title).then(function() { |
| | 128 | + ui.stopSpinner(); |
| | 129 | + }); |
| | 130 | + } |
| 73 | 131 | }; |
| 74 | 132 | |
| 75 | 133 | $(function() { |
| 76 | | - app.loadPage('While My Guitar Gently Weeps'); |
| | 134 | + app.init(); |
| 77 | 135 | }); |
| 78 | 136 | |
| 79 | 137 | })(jQuery); |