r105631 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r105630‎ | r105631 | r105632 >
Date:00:45, 9 December 2011
Author:brion
Status:deferred
Tags:
Comment:
Mockup of mobile imagepage w/ css, js
Modified paths:
  • /trunk/mockups/mobile-imagepage (added) (history)
  • /trunk/mockups/mobile-imagepage/imagepage.css (added) (history)
  • /trunk/mockups/mobile-imagepage/imagepage.js (added) (history)
  • /trunk/mockups/mobile-imagepage/index.html (added) (history)
  • /trunk/mockups/mobile-imagepage/index_files (added) (history)
  • /trunk/mockups/mobile-imagepage/index_files/120px-IMG_1404.JPG (added) (history)
  • /trunk/mockups/mobile-imagepage/index_files/800px-IMG_1404.JPG (added) (history)
  • /trunk/mockups/mobile-imagepage/index_files/application.js (added) (history)
  • /trunk/mockups/mobile-imagepage/index_files/common.css (added) (history)
  • /trunk/mockups/mobile-imagepage/index_files/default.css (added) (history)
  • /trunk/mockups/mobile-imagepage/index_files/mw.png (added) (history)
  • /trunk/mockups/mobile-imagepage/index_files/opensearch.js (added) (history)

Diff [purge]

Index: trunk/mockups/mobile-imagepage/imagepage.css
——@@ -0,0 +1,31 @@
 2+#filetoc {
 3+ display: block;
 4+ background-color: black;
 5+ background-image: -moz-linear-gradient(center top, #3E3E3E 0%, #393939 14%, #2E2E2E 32%, #151515 64%, #080808 84%, #010101 100%);
 6+ background-image: -webkit-linear-gradient(center top, #3E3E3E 0%, #393939 14%, #2E2E2E 32%, #151515 64%, #080808 84%, #010101 100%);
 7+ background-image: -o-linear-gradient(center top, #3E3E3E 0%, #393939 14%, #2E2E2E 32%, #151515 64%, #080808 84%, #010101 100%);
 8+ background-image: -ms-linear-gradient(center top, #3E3E3E 0%, #393939 14%, #2E2E2E 32%, #151515 64%, #080808 84%, #010101 100%);
 9+ background-image: linear-gradient(center top, #3E3E3E 0%, #393939 14%, #2E2E2E 32%, #151515 64%, #080808 84%, #010101 100%);
 10+ color: white;
 11+ text-align: center;
 12+
 13+ padding: 0;
 14+ margin: 0;
 15+}
 16+
 17+#filetoc a {
 18+ color: white;
 19+}
 20+
 21+#filetoc li {
 22+ display: inline-block;
 23+ padding: 8px;
 24+ margin: 0;
 25+}
 26+
 27+#file img {
 28+ max-width: 100%;
 29+ height: auto;
 30+}
 31+
 32+
Property changes on: trunk/mockups/mobile-imagepage/imagepage.css
___________________________________________________________________
Added: svn:eol-style
133 + native
Index: trunk/mockups/mobile-imagepage/index_files/common.css
——@@ -0,0 +1,217 @@
 2+.clearlink {
 3+ background: url(images/close-button.png) no-repeat scroll 0 0 transparent;
 4+ background-position: center center;
 5+ cursor: pointer;
 6+ zoom: 1;
 7+ position: absolute;
 8+ right: 0.25em;
 9+ top: 50%;
 10+ margin: 1px;
 11+ height: 12px;
 12+ width: 12px;
 13+ margin-top: -6px;
 14+ z-index: 2;
 15+ border: 0px solid;
 16+ display: none;
 17+}
 18+
 19+.suggestions-results {
 20+ font-size: 1.2em;
 21+ cursor: pointer;
 22+}
 23+
 24+.suggestions-result {
 25+ color: black;
 26+ color: WindowText;
 27+ margin: 0;
 28+ line-height: 1.8em;
 29+ padding: 0.01em 0.25em;
 30+ text-align: left;
 31+ postion: relative;
 32+ border-bottom: solid 1px #999999;
 33+}
 34+
 35+.suggestions-result a {
 36+ text-decoration: none;
 37+ color: #000000;
 38+}
 39+.suggestions-result a:link {
 40+ text-decoration: none;
 41+ color:#000000;
 42+}
 43+.suggestions-result a:visited {
 44+ text-decoration: none;
 45+ color:#000000;
 46+}
 47+.suggestions-result a:hover {
 48+ text-decoration: none;
 49+ color:#000000;
 50+}
 51+.suggestions-result a:active {
 52+ text-decoration: none;
 53+ color:#000000;
 54+}
 55+.suggestions-result:hover {
 56+ background-color: #ACD1E9;
 57+}
 58+a.sq-val-update {
 59+ font-size: 1.3em;
 60+ display: block;
 61+ font-weight: normal;
 62+ text-decoration: none;
 63+ color: #000000;
 64+ position: absolute;
 65+ right: 0;
 66+ width: 1.5em;
 67+ text-align: center;
 68+}
 69+a.sq-val-update:link {
 70+ text-decoration: none;
 71+ color:#000000;
 72+}
 73+a.sq-val-update:visited {
 74+ text-decoration: none;
 75+ color:#000000;
 76+}
 77+a.sq-val-update:hover {
 78+ text-decoration: none;
 79+ color:#000000;
 80+}
 81+a.sq-val-update:active {
 82+ text-decoration: none;
 83+ color:#000000;
 84+}
 85+
 86+a.search-result-item {
 87+ display: block;
 88+ margin-right: 2em;
 89+}
 90+
 91+#results {
 92+ display: none;
 93+ background-color: #ffffff;
 94+ border-top: none;
 95+ border-left: 1px solid #888;
 96+ border-right: 1px solid #888;
 97+ border-bottom: 1px solid #888;
 98+ z-index: 2;
 99+ position: absolute;
 100+}
 101+
 102+#search {
 103+ -webkit-appearance: none;
 104+ border-top-width: 0px;
 105+ border-right-width: 0px;
 106+ border-bottom-width: 0px;
 107+ border-left-width: 0px;
 108+ outline-style: none;
 109+ outline-width: initial;
 110+ outline-color: initial;
 111+ height: 1.4em;
 112+}
 113+
 114+ul#footer-info {
 115+ list-style: none;
 116+ list-style-image: none;
 117+ list-style-type: none;
 118+ margin: 0;
 119+ padding: 0;
 120+}
 121+
 122+.divclearable {
 123+ border: 1px solid #888;
 124+ display: -moz-inline-stack;
 125+ display: inline-block;
 126+ zoom: 1;
 127+ *display: inline;
 128+ vertical-align: middle;
 129+ height: 1.5em;
 130+ position: relative;
 131+}
 132+
 133+#userloginForm table, #userloginForm .user-login tr, #userloginForm .user-login th, #userloginForm .user-login td {
 134+ width: 200px;
 135+ border: 0px;
 136+}
 137+
 138+table {
 139+ border-spacing: 0 !important;
 140+ width: 100%;
 141+ border-collapse: collapse !important;
 142+ border: 1px solid #cccccc;
 143+ padding: 3px;
 144+ margin-bottom: 15px;
 145+}
 146+
 147+table.gallery .thumb[style] {
 148+ border: 0;
 149+ padding: 0 !important;
 150+ width: auto !important;
 151+ margin: 0 auto;
 152+}
 153+
 154+table.geography[style] td[style*="text-align"], table.geography[style] td[colspan="2"] {
 155+ text-align: left !important;
 156+ margin-left: 0 !important;
 157+ margin-right: 0 !important;
 158+}
 159+
 160+table.toc h2 {
 161+ border: 0;
 162+ padding: 0;
 163+ margin-top: 5px;
 164+}
 165+
 166+table.gallery th, table.gallery td {
 167+ display: block;
 168+ border: 0;
 169+ border-bottom: 1px solid #cccccc;
 170+}
 171+
 172+table[style] {
 173+ width: 100% !important;
 174+ float: none !important;
 175+ margin-left: 0 !important;
 176+}
 177+
 178+table.navbox td.navbox-group {
 179+ background: #ddddff;
 180+ width: 25%;
 181+ padding: 3px;
 182+}
 183+
 184+table.gallery {
 185+ background: #f9f9f9;
 186+ border-bottom: 0;
 187+}
 188+
 189+table.navbox {
 190+ font-size: 0.9em;
 191+ width: 100% !important;
 192+}
 193+
 194+table.gallery .gallerytext {
 195+ margin-top: -12px;
 196+ text-align: center;
 197+}
 198+
 199+table.navbox th.navbox-title {
 200+ background: #ccccff;
 201+ padding: 5px;
 202+}
 203+
 204+table.navbox div[style*="padding"] {
 205+ padding-left: 0 !important;
 206+ padding-right: 0 !important;
 207+}
 208+
 209+table.gallery .gallerybox[style] {
 210+ width: auto !important;
 211+ margin-bottom: -16px;
 212+}
 213+
 214+table td, table th {
 215+ border: 1px solid #cccccc;
 216+ padding: 3px;
 217+}
 218+
Property changes on: trunk/mockups/mobile-imagepage/index_files/common.css
___________________________________________________________________
Added: svn:eol-style
1219 + native
Index: trunk/mockups/mobile-imagepage/index_files/800px-IMG_1404.JPG
Cannot display: file marked as a binary type.
svn:mime-type = image/jpeg
Property changes on: trunk/mockups/mobile-imagepage/index_files/800px-IMG_1404.JPG
___________________________________________________________________
Added: svn:mime-type
2220 + image/jpeg
Index: trunk/mockups/mobile-imagepage/index_files/opensearch.js
——@@ -0,0 +1,170 @@
 2+var apiUrl = '/api.php';
 3+
 4+if ( scriptPath ) {
 5+ apiUrl = scriptPath + apiUrl;
 6+}
 7+
 8+var timer = -1;
 9+var typingDelay = 500;
 10+var numResults = 5;
 11+var pixels = 'px';
 12+
 13+var results = document.getElementById( 'results' );
 14+var search = document.getElementById( 'search' );
 15+var sq = document.getElementById( 'sq' );
 16+var sb = document.getElementById( 'searchbox' );
 17+
 18+function hideResults() {
 19+ results.style.display = 'none';
 20+}
 21+
 22+document.body.onmousedown = function( event ) {
 23+ whichElement(event);
 24+}
 25+results.onmousedown = function( event ) {
 26+ whichElement(event);
 27+}
 28+
 29+document.body.ontouchstart = function( event ) {
 30+ whichElement(event);
 31+}
 32+results.ontouchstart = function( event ) {
 33+ whichElement(event);
 34+}
 35+
 36+function whichElement( e ) {
 37+ var targ;
 38+ if ( !e ) {
 39+ var e = window.event;
 40+ }
 41+ if ( e.target ) {
 42+ targ = e.target;
 43+ } else if ( e.srcElement ) {
 44+ targ = e.srcElement;
 45+ }
 46+
 47+ if ( targ.nodeType == 3 ) {
 48+ targ = targ.parentNode;
 49+ }
 50+
 51+ e.cancelBubble = true;
 52+ e.stopPropagation();
 53+
 54+ if ( targ.className == "suggestion-result" ||
 55+ targ.className == "search-result-item" ||
 56+ targ.className == "suggestions-result" ||
 57+ targ.className == "sq-val-update" ) {
 58+ } else {
 59+ hideResults();
 60+ }
 61+}
 62+
 63+function updateSearchWidth() {
 64+ if ( sq && search && sb ) {
 65+ var iw = ( document.documentElement.clientWidth ) ? document.documentElement.clientWidth : document.body.clientWidth;
 66+ sb.style.width = ( iw - 30 ) + pixels;
 67+ sq.style.width = ( iw - 110 ) + pixels;
 68+ search.style.width = ( iw - 130 ) + pixels;
 69+ if ( results ) {
 70+ results.style.width = ( sq.offsetWidth - 2 ) + pixels;
 71+ results.style.left = sq.offsetLeft + pixels;
 72+ results.style.top = ( sq.offsetTop + sq.offsetHeight ) + pixels;
 73+ }
 74+ }
 75+}
 76+
 77+updateSearchWidth();
 78+
 79+function updateOrientationSearchWidth() {
 80+ switch( window.orientation ) {
 81+ case 0:
 82+ case -90:
 83+ case 90:
 84+ case 180:
 85+ setTimeout( "updateSearchWidth()", 200 );
 86+ break;
 87+ }
 88+}
 89+
 90+// Point to the updateOrientation function when iPhone switches between portrait and landscape modes.
 91+window.onorientationchange = updateOrientationSearchWidth;
 92+
 93+window.onload = function () {
 94+ search.addEventListener( 'keyup',
 95+ function() {
 96+ clearTimeout( timer );
 97+ var term = this.value;
 98+ if ( term.length < 1 ) {
 99+ results.innerHTML = '';
 100+ } else {
 101+ term = encodeURIComponent( term );
 102+ timer = setTimeout( function () { searchApi( term ); }, typingDelay );
 103+ }
 104+ }, false );
 105+}
 106+
 107+function searchApi( term ) {
 108+ var xmlHttp;
 109+ if ( window.XMLHttpRequest ) {
 110+ xmlHttp = new XMLHttpRequest();
 111+ } else {
 112+ xmlHttp = new ActiveXObject( 'Microsoft.XMLHTTP' );
 113+ }
 114+ xmlHttp.overrideMimeType( 'text/xml' );
 115+ xmlHttp.onreadystatechange = function() {
 116+ if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
 117+ var sections = createObjectArray( xmlHttp.responseXML );
 118+ writeResults( sections );
 119+ }
 120+ }
 121+ var url = apiUrl + '?action=opensearch&limit=' + numResults + '&namespace=0&format=xml&search=' + term;
 122+ xmlHttp.open( 'GET', url, true );
 123+ xmlHttp.send();
 124+}
 125+
 126+function createObjectArray( responseXml ) {
 127+ var sections = new Array();
 128+ var items = responseXml.getElementsByTagName( 'Item' );
 129+ for ( i = 0; i < items.length; i++ ) {
 130+ var item = items[i];
 131+ var section = {
 132+ label: item.getElementsByTagName( 'Text' )[0].textContent,
 133+ value: item.getElementsByTagName( 'Url' )[0].textContent,
 134+ }
 135+ sections.push( section );
 136+ }
 137+ return sections;
 138+}
 139+
 140+function sqValUpdate( sqValue ) {
 141+ if ( search ) {
 142+ search.value = sqValue + ' ';
 143+ search.focus();
 144+ searchApi( search.value );
 145+ }
 146+}
 147+
 148+function htmlEntities( str ) {
 149+ return String( str ).replace( /&/g, '&amp;' ).replace( /</g, '&lt;' ).replace( />/g, '&gt;' ).replace( /"/g, '&quot;' ).replace( /'/g, '&#39;' );
 150+}
 151+
 152+function escapeJsString( str ) {
 153+ return String( str ).replace( /\\/g, '\\\\' ).replace( /'/g, "\\'" ).replace( /\n/g, '\\n' );
 154+}
 155+
 156+function writeResults( sections ) {
 157+ results.style.display = 'block';
 158+ if ( !sections || sections.length < 1 ) {
 159+ results.innerHTML = "No results";
 160+ } else {
 161+ var html = '<div class="suggestions-results">';
 162+ for ( i = 0; i < sections.length; i++ ) {
 163+ var section = sections[i];
 164+ var rel = i + 1;
 165+ section.value = section.value.replace( /^(?:\/\/|[^\/]+)*\//, '/' );
 166+ html = html + "<div class=\"suggestions-result\" rel=\"" + htmlEntities( rel ) + "\" title=\"" + htmlEntities( section.label ) + "\"><a class=\"sq-val-update\" href=\"javascript:sqValUpdate('" + htmlEntities( escapeJsString( section.label ) ) + "');\">+</a><a class=\"search-result-item\" href='" + htmlEntities( section.value ) + "'>" + htmlEntities( section.label ) + "</a></div>";
 167+ }
 168+ html = html + '</div>';
 169+ results.innerHTML = html;
 170+ }
 171+}
\ No newline at end of file
Property changes on: trunk/mockups/mobile-imagepage/index_files/opensearch.js
___________________________________________________________________
Added: svn:eol-style
1172 + native
Index: trunk/mockups/mobile-imagepage/index_files/mw.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
Property changes on: trunk/mockups/mobile-imagepage/index_files/mw.png
___________________________________________________________________
Added: svn:mime-type
2173 + image/png
Index: trunk/mockups/mobile-imagepage/index_files/120px-IMG_1404.JPG
Cannot display: file marked as a binary type.
svn:mime-type = image/jpeg
Property changes on: trunk/mockups/mobile-imagepage/index_files/120px-IMG_1404.JPG
___________________________________________________________________
Added: svn:mime-type
3174 + image/jpeg
Index: trunk/mockups/mobile-imagepage/index_files/default.css
——@@ -0,0 +1,307 @@
 2+table table {
 3+ border: 0;
 4+}
 5+
 6+table table td, table table th {
 7+ border: 0;
 8+}
 9+
 10+table.toc {
 11+ background: #f9f9f9;
 12+}
 13+
 14+table.navbox td.navbox-abovebelow {
 15+ padding: 3px;
 16+}
 17+
 18+table.navbox td.navbox-group + td {
 19+ padding: 3px;
 20+}
 21+
 22+table.navbox div[style*="padding"] a {
 23+ white-space: pre-wrap;
 24+}
 25+
 26+table.navbox span[style*="white"] {
 27+ white-space: pre-wrap !important;
 28+}
 29+
 30+table.navbox td, table.navbox th {
 31+ padding: 0;
 32+}
 33+
 34+table.navbox table {
 35+ margin-bottom: 0;
 36+}
 37+
 38+table.wikitable th {
 39+ background: #f3f3f3;
 40+}
 41+
 42+table.infobox {
 43+ background: #f9f9f9;
 44+}
 45+
 46+table.infobox th, table.infobox td {
 47+ border: 0;
 48+}
 49+
 50+table.infobox td[colspan="3"], table.infobox th[colspan="3"] {
 51+ border: 1px solid #cccccc;
 52+}
 53+
 54+table.geography[style] th {
 55+ text-align: left;
 56+}
 57+
 58+table.geography[style] td[style*="text-align"] div[style], table.geography[style] td[colspan="2"] div[style] {
 59+ text-align: left !important;
 60+}
 61+
 62+table.admin {
 63+ width: 300px;
 64+}
 65+
 66+html {
 67+ font-size: 0.8em;
 68+}
 69+
 70+body {
 71+ line-height: 1;
 72+ color: black;
 73+ background: white;
 74+ font-family: sans-serif;
 75+ -webkit-text-size-adjust: none;
 76+}
 77+
 78+p, li, dl, #featured_article {
 79+ line-height: 1.65;
 80+}
 81+
 82+pre {
 83+ white-space: pre-wrap;
 84+}
 85+
 86+h2 {
 87+ border-bottom: 1px solid #aaaaaa;
 88+ padding-top: 0.3em;
 89+}
 90+
 91+a {
 92+ text-decoration: none;
 93+ color: #002bb8;
 94+}
 95+
 96+a:visited {
 97+ color: #5a3696;
 98+}
 99+
 100+a:active {
 101+ color: #faa700;
 102+}
 103+
 104+a:hover {
 105+ text-decoration: underline;
 106+}
 107+
 108+a.new, a.new:visited, a.new:hover {
 109+ color: red;
 110+}
 111+
 112+a.back_to_top, a.back_to_top:visited {
 113+ margin-top: 7px;
 114+ color: blue;
 115+}
 116+
 117+.links {
 118+ float: left;
 119+ padding: 10px;
 120+}
 121+
 122+#contentSub, .dablink {
 123+ margin-bottom: 10px;
 124+}
 125+
 126+#firstHeading {
 127+ font-size: 1.7em;
 128+}
 129+
 130+h2 {
 131+ font-size: 1.3em;
 132+}
 133+
 134+.section_anchors a {
 135+ display: block;
 136+}
 137+
 138+.section_anchor {
 139+ height: 1px;
 140+ width: 1px;
 141+}
 142+
 143+.printonly, .geo-multi-punct, .geo-nondefault, .Z3988 {
 144+ display: none;
 145+}
 146+
 147+#featured_article .noprint, .today .noprint {
 148+ display: none;
 149+}
 150+
 151+.thumb {
 152+ border: 1px solid #cccccc;
 153+ -webkit-border-radius: 5px;
 154+ -moz-border-radius: 5px;
 155+ background: #f9f9f9;
 156+ margin-bottom: 10px;
 157+}
 158+
 159+.thumb .thumbinner[style] {
 160+ margin: 5px auto;
 161+}
 162+
 163+.thumb .thumbcaption {
 164+ width: 100%;
 165+ margin: 5px 10px 0;
 166+ text-align: center;
 167+ width: auto !important;
 168+}
 169+
 170+img.thumbborder {
 171+ border: 1px solid #cccccc;
 172+}
 173+
 174+.floatright {
 175+ float: right;
 176+}
 177+
 178+#content_wrapper.home h1#firstHeading {
 179+ display: none;
 180+}
 181+
 182+body {
 183+ margin: 0;
 184+}
 185+
 186+#header {
 187+ margin: 8px 8px 0 8px;
 188+}
 189+
 190+#content_wrapper {
 191+ clear: both;
 192+ margin: 0 8px;
 193+}
 194+
 195+#footer {
 196+ margin: 0 8px;
 197+}
 198+
 199+#header img, #header form, #header input, #header button {
 200+ vertical-align: middle;
 201+ display: inline-block;
 202+}
 203+
 204+#searchbox {
 205+ width: auto;
 206+ padding: 5px;
 207+ border: 1px solid #cccccc;
 208+ -webkit-border-radius: 2px;
 209+ -moz-border-radius: 2px;
 210+}
 211+
 212+#searchbox a, #searchbox img {
 213+ border: 0px;
 214+ vertical-align: middle;
 215+}
 216+
 217+#searchbox #goButton {
 218+ border: 0;
 219+ background: url(images/s.gif) no-repeat top left;
 220+ background-size: 27px 25px;
 221+ height: 25px;
 222+ width: 27px;
 223+}
 224+
 225+#searchbox #searchField {
 226+ width: auto;
 227+}
 228+
 229+#nav {
 230+ -webkit-border-radius: 2px;
 231+ -moz-border-radius: 2px;
 232+ clear: both;
 233+ padding: 5px 0;
 234+}
 235+
 236+#nav form, #nav button {
 237+ display: inline-block;
 238+}
 239+
 240+#nav button {
 241+ background: url(images/buttonbg.gif) no-repeat center;
 242+ border: 0;
 243+ height: 23px;
 244+ width: 83px;
 245+}
 246+
 247+#disableButtons {
 248+ text-align: center;
 249+}
 250+
 251+#disableButtons button {
 252+ background: url(images/buttonbg.gif) no-repeat center;
 253+ border: 0;
 254+ height: 23px;
 255+ width: 83px;
 256+}
 257+
 258+#disableButtons #backButton {
 259+ margin-top: 5em;
 260+}
 261+
 262+.mwm-notice {
 263+ padding: 5px;
 264+ background: #dddddd;
 265+ -webkit-border-radius: 5px;
 266+ margin-top: 5px;
 267+ text-align: center;
 268+ border: 1px solid grey;
 269+}
 270+
 271+.mwm-message.mwm-notice {
 272+ font-size: 1.1em;
 273+}
 274+
 275+#image_wrapper {
 276+ margin: 8px 0 8px -3px;
 277+}
 278+
 279+#footer {
 280+ padding-top: 1em;
 281+}
 282+
 283+#footer #perm {
 284+ padding-top: 2em;
 285+ font-size: 90%;
 286+}
 287+
 288+#footer #copyright {
 289+ padding: 1em 0;
 290+ font-size: 80%;
 291+}
 292+
 293+ol.references > li:target,
 294+sup.reference:target,
 295+span.citation:target, cite:target {
 296+ background-color: #ddeeff;
 297+}
 298+
 299+.content_block,
 300+.section_anchors,
 301+button.section_heading.hide {
 302+ display: none;
 303+}
 304+
 305+#search:focus {
 306+ outline: none;
 307+}
 308+
Property changes on: trunk/mockups/mobile-imagepage/index_files/default.css
___________________________________________________________________
Added: svn:eol-style
1309 + native
Index: trunk/mockups/mobile-imagepage/index_files/application.js
——@@ -0,0 +1,122 @@
 2+var search = document.getElementById( 'search' );
 3+var clearSearch = document.getElementById( 'clearsearch' );
 4+var results = document.getElementById( 'results' );
 5+var languageSelection = document.getElementById( 'languageselection' );
 6+
 7+initClearSearchLink();
 8+
 9+function initClearSearchLink() {
 10+ clearSearch.setAttribute( 'title','Clear' );
 11+ clearSearch.addEventListener( 'mousedown', clearSearchBox, true );
 12+ search.addEventListener( 'keyup', handleClearSearchLink, false );
 13+}
 14+
 15+function navigateToLanguageSelection() {
 16+ var url;
 17+ if ( languageSelection ) {
 18+ url = languageSelection.options[languageSelection.selectedIndex].value;
 19+ if ( url ) {
 20+ location.href = url;
 21+ }
 22+ }
 23+}
 24+
 25+function handleClearSearchLink() {
 26+ if ( clearSearch ) {
 27+ if ( search.value.length > 0 ) {
 28+ clearSearch.style.display = 'block';
 29+ } else {
 30+ clearSearch.style.display = 'none';
 31+ if ( results ) {
 32+ results.style.display = 'none';
 33+ }
 34+ }
 35+ }
 36+}
 37+
 38+function clearSearchBox( event ) {
 39+ search.value = '';
 40+ clearSearch.style.display = 'none';
 41+ if ( results ) {
 42+ results.style.display = 'none';
 43+ }
 44+ if ( event ) {
 45+ event.preventDefault();
 46+ }
 47+}
 48+
 49+function logoClick() {
 50+ var n = document.getElementById( 'nav' ).style;
 51+ n.display = n.display == 'block' ? 'none' : 'block';
 52+ if (n.display == 'block') {
 53+ if ( languageSelection ) {
 54+ if ( languageSelection.offsetWidth > 175 ) {
 55+ var newWidth = languageSelection.offsetWidth + 30;
 56+ n.width = newWidth + 'px';
 57+ }
 58+ }
 59+ }
 60+};
 61+
 62+// And this...
 63+for ( var a = document.getElementsByTagName( 'a' ), i = 0; i < a.length; i++ ) {
 64+ a[i].onclick = function() {
 65+ if ( this.hash.indexOf( '#' ) == 0 ) {
 66+ wm_reveal_for_hash( this.hash );
 67+ }
 68+ }
 69+}
 70+
 71+if ( document.location.hash.indexOf( '#' ) == 0 ) {
 72+ wm_reveal_for_hash( document.location.hash );
 73+}
 74+
 75+updateOrientation();
 76+
 77+// Try to scroll and hide URL bar
 78+window.scrollTo( 0, 1 );
 79+
 80+/**
 81+ * updateOrientation checks the current orientation, sets the body's class
 82+ * attribute to portrait, landscapeLeft, or landscapeRight,
 83+ * and displays a descriptive message on "Handling iPhone or iPod touch Orientation Events".
 84+ */
 85+function updateOrientation() {
 86+ switch( window.orientation ) {
 87+ case 0:
 88+ document.body.setAttribute( 'class', 'portrait' );
 89+ break;
 90+ case 90:
 91+ case -90:
 92+ document.body.setAttribute( 'class', 'landscape' );
 93+ }
 94+}
 95+
 96+// Point to the updateOrientation function when iPhone switches between portrait and landscape modes.
 97+window.onorientationchange = updateOrientation;
 98+
 99+function wm_reveal_for_hash( hash ) {
 100+ var targetel = document.getElementById( hash.substr(1) );
 101+ if ( targetel ) {
 102+ for (var p = targetel.parentNode; p && p.className != 'content_block' && p.className != 'section_heading'; ) {
 103+ p = p.parentNode;
 104+ }
 105+ if ( p && p.style.display != 'block' ) {
 106+ var section_idx = parseInt( p.id.split( '_' )[1] );
 107+ wm_toggle_section( section_idx );
 108+ }
 109+ }
 110+}
 111+
 112+function wm_toggle_section( section_id ) {
 113+ var b = document.getElementById( 'section_' + section_id ),
 114+ bb = b.getElementsByTagName( 'button' );
 115+ for ( var i = 0; i <= 1; i++ ) {
 116+ var s = bb[i].style;
 117+ s.display = s.display == 'none' || ( i && !s.display ) ? 'inline-block' : 'none';
 118+ }
 119+ for ( var i = 0, d = ['content_','anchor_']; i<=1; i++ ) {
 120+ var s = document.getElementById( d[i] + section_id ).style;
 121+ s.display = s.display == 'block' ? 'none' : 'block';
 122+ }
 123+}
\ No newline at end of file
Property changes on: trunk/mockups/mobile-imagepage/index_files/application.js
___________________________________________________________________
Added: svn:eol-style
1124 + native
Index: trunk/mockups/mobile-imagepage/imagepage.js
——@@ -0,0 +1,89 @@
 2+(function() {
 3+
 4+function select(selector) {
 5+ if (selector.substr(0, 1) === '#') {
 6+ return [document.getElementById(selector.substr(1))];
 7+ } else if (selector.substr(0, 1) === '.') {
 8+ return document.getElementsByClassName(selector.substr(1));
 9+ } else {
 10+ throw new Error("Unrecognized selector " + selector);
 11+ }
 12+}
 13+
 14+function setDisplay(selector, display) {
 15+ var nodes = select(selector);
 16+ for (var i = 0; i < nodes.length; i++) {
 17+ nodes[i].style.display = display;
 18+ }
 19+}
 20+
 21+function show(selector) {
 22+ setDisplay(selector, 'block');
 23+}
 24+
 25+function hide(selector) {
 26+ setDisplay(selector, 'none');
 27+}
 28+
 29+var chunks = {
 30+ file: [
 31+ '#file',
 32+ ],
 33+ filehistory: [
 34+ '#filehistory',
 35+ '#mw-imagepage-section-filehistory',
 36+ '#mw-imagepage-reupload-link',
 37+ '#mw-imagepage-edit-external'
 38+ ],
 39+ filelinks: [
 40+ '#filelinks',
 41+ '#mw-imagepage-section-linkstoimage'
 42+ ],
 43+ metadata: [
 44+ '#metadata',
 45+ '.mw-imagepage-section-metadata',
 46+ ]
 47+}
 48+
 49+function makeToggle(thisId) {
 50+ return function(event) {
 51+ for (id in chunks) {
 52+ if (chunks.hasOwnProperty(id)) {
 53+ var selectors = chunks[id], act;
 54+ if (id === thisId) {
 55+ act = show;
 56+ } else {
 57+ act = hide;
 58+ }
 59+ for (var i = 0; i < selectors.length; i++) {
 60+ act(selectors[i]);
 61+ }
 62+ }
 63+ }
 64+ return false;
 65+ };
 66+}
 67+
 68+function addToggle(id) {
 69+ var filetoc = document.getElementById('filetoc'),
 70+ items = filetoc.getElementsByTagName('a');
 71+ for (var i = 0; i < items.length; i++) {
 72+ var item = items[i],
 73+ href = item.href,
 74+ hashPos = href.search('#'),
 75+ hash = href.substr(hashPos + 1);
 76+ if (hash == id) {
 77+ items[i].onclick = makeToggle(id);
 78+ }
 79+ }
 80+}
 81+
 82+for (id in chunks) {
 83+ if (chunks.hasOwnProperty(id)) {
 84+ addToggle(id);
 85+ }
 86+}
 87+
 88+makeToggle('file')();
 89+
 90+})();
Property changes on: trunk/mockups/mobile-imagepage/imagepage.js
___________________________________________________________________
Added: svn:eol-style
191 + native
Index: trunk/mockups/mobile-imagepage/index.html
——@@ -0,0 +1,193 @@
 2+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3+<html dir="ltr" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
 4+ <title>File:IMG 1404.JPG - TrunkWiki</title>
 5+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6+ <link href="index_files/common.css" media="all" rel="Stylesheet" type="text/css">
 7+ <link href="index_files/default.css" media="all" rel="Stylesheet" type="text/css">
 8+ <link href="imagepage.css" media="all" rel="Stylesheet" type="text/css">
 9+ <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
 10+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
 11+
 12+ <script type="text/javascript">
 13+ //<![CDATA[
 14+ var title = "File:IMG 1404.JPG - TrunkWiki";
 15+ var scriptPath = "/trunk";
 16+ var placeholder = "Type your search here...";
 17+ function shouldCache() {
 18+ return true;
 19+ }
 20+ //]]>
 21+ </script>
 22+ </head>
 23+ <body>
 24+ <div style="width: 953px; left: 53px; top: 37px;" id="results"></div>
 25+<div id="header">
 26+ <div style="width: 1033px;" id="searchbox">
 27+ <img alt="Logo" id="logo" src="index_files/mw.png" onclick="javascript:logoClick();" height="22" width="35">
 28+ <form action="/trunk/index.php" class="search_bar" method="get">
 29+ <input value="Special:Search" name="title" type="hidden">
 30+ <div style="width: 953px;" id="sq" class="divclearable">
 31+ <input style="width: 933px;" name="search" id="search" size="22" autocorrect="off" autocomplete="off" autocapitalize="off" maxlength="1024" type="text">
 32+ <div title="Clear" class="clearlink" id="clearsearch"></div>
 33+ </div>
 34+ <button id="goButton" type="submit"></button>
 35+ </form>
 36+ </div>
 37+ <div class="nav" id="nav">
 38+ <div id="languageselectionsection"><b>Language:</b><br><select id="languageselection" onchange="javascript:navigateToLanguageSelection();"><option value="http://192.168.38.113/trunk/index.php?title=File:IMG_1404.JPG&amp;useformat=mobile" selected="selected">English</option></select><br></div>
 39+ <button onclick="javascript:location.href='/trunk/index.php/Main_Page';" type="submit" id="homeButton">Home</button>
 40+ <button onclick="javascript:location.href='/trunk/index.php/Special:Random';" type="submit" id="randomButton">Random</button>
 41+ </div>
 42+</div>
 43+ <div class="show" id="content_wrapper">
 44+
 45+ <div id="content" class="mw-body">
 46+
 47+ <div id="mw-js-message" style="display:none;"></div>
 48+ <!-- firstHeading -->
 49+ <h1 id="firstHeading" class="firstHeading">File:IMG 1404.JPG</h1>
 50+ <!-- /firstHeading -->
 51+ <!-- bodyContent -->
 52+ <div id="bodyContent">
 53+ <!-- tagline -->
 54+
 55+ <!-- /tagline -->
 56+ <!-- subtitle -->
 57+
 58+ <!-- /subtitle -->
 59+ <!-- jumpto -->
 60+
 61+ <!-- /jumpto -->
 62+ <!-- bodycontent -->
 63+ <ul id="filetoc"><li><a href="#file">File</a></li>
 64+<li><a href="#filehistory">File history</a></li>
 65+<li><a href="#filelinks">File usage</a></li>
 66+<li><a href="#metadata">Metadata</a></li></ul><div class="fullImageLink" id="file"><a href="http://192.168.38.113/trunk/images/1/1a/IMG_1404.JPG"><img alt="File:IMG 1404.JPG" src="index_files/800px-IMG_1404.JPG" height="600" width="800"></a><div class="mw-filepage-resolutioninfo">Size of this preview: <a href="http://192.168.38.113/trunk/images/thumb/1/1a/IMG_1404.JPG/800px-IMG_1404.JPG" class="mw-thumbnail-link">800 × 600 pixels</a>. <span class="mw-filepage-other-resolutions">Other resolutions: <a href="http://192.168.38.113/trunk/images/thumb/1/1a/IMG_1404.JPG/320px-IMG_1404.JPG" class="mw-thumbnail-link">320 × 240 pixels</a> | <a href="http://192.168.38.113/trunk/images/thumb/1/1a/IMG_1404.JPG/640px-IMG_1404.JPG" class="mw-thumbnail-link">640 × 480 pixels</a> | <a href="http://192.168.38.113/trunk/images/thumb/1/1a/IMG_1404.JPG/1024px-IMG_1404.JPG" class="mw-thumbnail-link">1,024 × 768 pixels</a> | <a href="http://192.168.38.113/trunk/images/thumb/1/1a/IMG_1404.JPG/1280px-IMG_1404.JPG" class="mw-thumbnail-link">1,280 × 960 pixels</a>.</span></div></div>
 67+<div class="fullMedia"><a href="http://192.168.38.113/trunk/images/1/1a/IMG_1404.JPG" class="internal" title="IMG 1404.JPG">Full resolution</a>‎ <span class="fileInfo">(2,048 × 1,536 pixels, file size: 1.08 MB, MIME type: image/jpeg)</span>
 68+</div>
 69+<div id="mw-imagepage-content" dir="ltr" class="mw-content-ltr" lang="en">
 70+<!--
 71+NewPP limit report
 72+Preprocessor node count: 0/1000000
 73+Post-expand include size: 0/2097152 bytes
 74+Template argument size: 0/2097152 bytes
 75+Expensive parser function count: 0/100
 76+-->
 77+
 78+<!-- Saved in parser cache with key trunkwiki:pcache:idhash:327-0!*!*!default!*!*!*!* and timestamp 20111208213918 -->
 79+</div><h2 id="filehistory">File history</h2>
 80+<div id="mw-imagepage-section-filehistory">
 81+<p>Click on a date/time to view the file as it appeared at that time.
 82+</p>
 83+<table class="wikitable filehistory"><tbody><tr><td></td><td></td><th>Date/Time</th><th>Thumbnail</th><th>Dimensions</th><th>User</th><th>Comment</th></tr><tr><td><a href="http://192.168.38.113/trunk/index.php?title=File:IMG_1404.JPG&amp;action=delete" title="File:IMG 1404.JPG">delete all</a><br><br><span class="mw-revdelundel-link">(show/hide)</span></td><td>current</td><td class="filehistory-selected" style="white-space: nowrap;"><a href="http://192.168.38.113/trunk/images/1/1a/IMG_1404.JPG">23:00, 3 November 2011</a></td><td><a href="http://192.168.38.113/trunk/images/1/1a/IMG_1404.JPG"><img alt="Thumbnail for version as of 23:00, 3 November 2011" src="index_files/120px-IMG_1404.JPG" height="90" width="120"></a></td><td>2,048 × 1,536 <span style="white-space: nowrap;">(1.08 MB)</span></td><td><a href="http://192.168.38.113/trunk/index.php/User:Brionv" title="User:Brionv" class="mw-userlink">Brionv</a> <span style="white-space: nowrap;"> <span class="mw-usertoollinks">(<a href="http://192.168.38.113/trunk/index.php/User_talk:Brionv" title="User talk:Brionv">Talk</a> | <a href="http://192.168.38.113/trunk/index.php/Special:Contributions/Brionv" title="Special:Contributions/Brionv">contribs</a> | <a href="http://192.168.38.113/trunk/index.php/Special:Block/Brionv" title="Special:Block/Brionv">block</a>)</span></span></td><td dir="ltr"></td></tr></tbody></table></div>
 84+<br><br><ul><li id="mw-imagepage-reupload-link"><div class="plainlinks"><a class="external" href="http://192.168.38.113/trunk/index.php?title=Special:Upload&amp;wpDestFile=IMG_1404.JPG&amp;wpForReUpload=1">Upload a new version of this file</a></div></li>
 85+<li id="mw-imagepage-edit-external"><a href="http://192.168.38.113/trunk/index.php?title=File:IMG_1404.JPG&amp;action=edit&amp;externaledit=true&amp;mode=file" title="File:IMG 1404.JPG">Edit this file using an external application</a> <small>(See the <a rel="nofollow" class="external text" href="http://www.mediawiki.org/wiki/Manual:External_editors">setup instructions</a> for more information)</small></li>
 86+</ul><h2 id="filelinks">File usage</h2>
 87+<div id="mw-imagepage-section-linkstoimage">
 88+<p>The following page links to this file:
 89+</p><ul class="mw-imagepage-linkstoimage"><li id="mw-imagepage-linkstoimage-ns0"><a href="http://192.168.38.113/trunk/index.php/A_wide_image" title="A wide image">A wide image</a></li>
 90+</ul></div>
 91+<h2 id="metadata">Metadata</h2>
 92+<div class="mw-imagepage-section-metadata">This file contains additional information, probably added from the digital camera or scanner used to create or digitize it.
 93+If the file has been modified from its original state, some details may not fully reflect the modified file.<table id="mw_metadata" class="mw_metadata"><tbody><tr class="exif-make"><th>Camera manufacturer</th>
 94+<td>Apple</td>
 95+</tr><tr class="exif-model"><th>Camera model</th>
 96+<td>iPhone 3GS</td>
 97+</tr><tr class="exif-exposuretime"><th>Exposure time</th>
 98+<td>1/2,613 sec (0.00038270187523919)</td>
 99+</tr><tr class="exif-fnumber"><th>F Number</th>
 100+<td>f/2.8</td>
 101+</tr><tr class="exif-isospeedratings"><th>ISO speed rating</th>
 102+<td>64</td>
 103+</tr><tr class="exif-datetimeoriginal"><th>Date and time of data generation</th>
 104+<td>16:58, 21 May 2011</td>
 105+</tr><tr class="exif-focallength"><th>Lens focal length</th>
 106+<td>3.85 mm</td>
 107+</tr><tr class="exif-gpslatitude"><th>Latitude</th>
 108+<td>36° 47′ 35.4″ N</td>
 109+</tr><tr class="exif-gpslongitude"><th>Longitude</th>
 110+<td>3° 53′ 50.4″ W</td>
 111+</tr><tr class="exif-gpsaltitude"><th>Altitude</th>
 112+<td>317.396 meters above sea level</td>
 113+</tr><tr class="exif-orientation collapsable"><th>Orientation</th>
 114+<td>Normal</td>
 115+</tr><tr class="exif-xresolution collapsable"><th>Horizontal resolution</th>
 116+<td>72 dpi</td>
 117+</tr><tr class="exif-yresolution collapsable"><th>Vertical resolution</th>
 118+<td>72 dpi</td>
 119+</tr><tr class="exif-software collapsable"><th>Software used</th>
 120+<td>4.3.3</td>
 121+</tr><tr class="exif-datetime collapsable"><th>File change date and time</th>
 122+<td>16:58, 21 May 2011</td>
 123+</tr><tr class="exif-ycbcrpositioning collapsable"><th>Y and C positioning</th>
 124+<td>Centered</td>
 125+</tr><tr class="exif-exposureprogram collapsable"><th>Exposure Program</th>
 126+<td>Normal program</td>
 127+</tr><tr class="exif-exifversion collapsable"><th>Exif version</th>
 128+<td>2.21</td>
 129+</tr><tr class="exif-datetimedigitized collapsable"><th>Date and time of digitizing</th>
 130+<td>16:58, 21 May 2011</td>
 131+</tr><tr class="exif-componentsconfiguration collapsable"><th>Meaning of each component</th>
 132+<td><ol><li>Y</li>
 133+<li>Cb</li>
 134+<li>Cr</li>
 135+<li>does not exist</li></ol></td>
 136+</tr><tr class="exif-shutterspeedvalue collapsable"><th>APEX shutter speed</th>
 137+<td>11.351449275362</td>
 138+</tr><tr class="exif-aperturevalue collapsable"><th>APEX aperture</th>
 139+<td>2.970853573907</td>
 140+</tr><tr class="exif-meteringmode collapsable"><th>Metering mode</th>
 141+<td>Average</td>
 142+</tr><tr class="exif-flash collapsable"><th>Flash</th>
 143+<td>Flash did not fire, No flash function</td>
 144+</tr><tr class="exif-flashpixversion collapsable"><th>Supported Flashpix version</th>
 145+<td>0,100</td>
 146+</tr><tr class="exif-colorspace collapsable"><th>Color space</th>
 147+<td>sRGB</td>
 148+</tr><tr class="exif-sensingmethod collapsable"><th>Sensing method</th>
 149+<td>One-chip color area sensor</td>
 150+</tr><tr class="exif-exposuremode collapsable"><th>Exposure mode</th>
 151+<td>Auto exposure</td>
 152+</tr><tr class="exif-whitebalance collapsable"><th>White balance</th>
 153+<td>Auto white balance</td>
 154+</tr><tr class="exif-scenecapturetype collapsable"><th>Scene capture type</th>
 155+<td>Standard</td>
 156+</tr><tr class="exif-sharpness collapsable"><th>Sharpness</th>
 157+<td>Soft</td>
 158+</tr><tr class="exif-gpstimestamp collapsable"><th>GPS time (atomic clock)</th>
 159+<td>14:58:3277</td>
 160+</tr><tr class="exif-gpsimgdirectionref collapsable"><th>Reference for direction of image</th>
 161+<td>True direction</td>
 162+</tr><tr class="exif-gpsimgdirection collapsable"><th>Direction of image</th>
 163+<td>200.42580645161</td>
 164+</tr></tbody></table></div>
 165+ <!-- /bodycontent -->
 166+ <!-- printfooter -->
 167+
 168+ <!-- /printfooter -->
 169+ <!-- catlinks -->
 170+ <!-- /catlinks -->
 171+ <div class="visualClear"></div>
 172+ <!-- debughtml -->
 173+ <!-- /debughtml -->
 174+ </div>
 175+ <!-- /bodyContent -->
 176+ </div>
 177+ </div>
 178+ <div id="footer">
 179+ <div class="nav" id="footmenu">
 180+ <div class="mwm-notice">
 181+ <a href="http://192.168.38.113/trunk/index.php?title=File:IMG_1404.JPG&amp;useformat=mobile&amp;mobileaction=view_normal_site">View this page on regular TrunkWiki</a> | <a href="http://192.168.38.113/trunk/index.php?title=File:IMG_1404.JPG&amp;useformat=mobile&amp;disableImages=1">Disable images on mobile site</a> | <a href="http://192.168.38.113/trunk/index.php?title=Special:UserLogout&amp;returnto=File%3AIMG+1404.JPG&amp;returntoquery=useformat%3Dmobile" title="Log out">Log out</a>
 182+ <div id="perm">
 183+ <a href="http://192.168.38.113/trunk/index.php?title=File:IMG_1404.JPG&amp;useformat=mobile&amp;mobileaction=disable_mobile_site">Permanently disable mobile site</a>
 184+ </div>
 185+ </div>
 186+ </div>
 187+ <div id="copyright"></div>
 188+ </div>
 189+
 190+ <script type="text/javascript" language="javascript" src="index_files/application.js"></script>
 191+ <script type="text/javascript" language="javascript" src="index_files/opensearch.js"></script>
 192+ <script type="text/javascript" language="javascript" src="imagepage.js"></script>
 193+
 194+</body></html>