Paladox has uploaded a new change for review.
https://gerrit.wikimedia.org/r/162014
Change subject: Update Metrolook
......................................................................
Update Metrolook
Includes some new images and also includes bug fixes.
Change-Id: I229f665348407ce033b4e7167736fbd663df0913
---
M Metrolook.php
M MetrolookTemplate.php
M README.md
M components/collapsibleNav.less
M components/common.less
M components/navigation.less
M components/search.less
A images/closed-ltr.png
A images/closed-ltr.svg
A images/closed-rtl.png
A images/closed-rtl.svg
A images/downarrow.png
A images/line.png
A images/open.png
A images/open.svg
A images/uploadlogo.png
A overthrow.js
17 files changed, 703 insertions(+), 55 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/Metrolook
refs/changes/14/162014/1
diff --git a/Metrolook.php b/Metrolook.php
index 0ab70b1..4af55f1 100644
--- a/Metrolook.php
+++ b/Metrolook.php
@@ -26,7 +26,7 @@
'path' => __FILE__,
'name' => 'Metrolook',
'description' => 'Metrolook skin for MediaWiki.',
- 'version' => '2.3.1',
+ 'version' => '2.3.3',
'url' => 'https://www.mediawiki.org/wiki/Skin:Metrolook',
'author' => array( 'immewnity', 'paladox2015', 'Craig Davison',
'lagleki' ),
'license-name' => 'GPLv2+',
diff --git a/MetrolookTemplate.php b/MetrolookTemplate.php
index 40f6d6e..49040f7 100644
--- a/MetrolookTemplate.php
+++ b/MetrolookTemplate.php
@@ -107,57 +107,60 @@
$this->html( 'headelement' );
?>
<style>
- body {
-height:100%;
- }
- html {
-height:100%;
- }
- html,
- body {
- margin: 0px 0px 0px 0px ;
- padding: 0px 0px 0px 0px ;
-height:100%;
- }
- #top-tile-bar {
- background:transparent ;
- left: 0px ;
- height: 200px;
- position: fixed ;
- z-index:100 ;
- }
+body {
+ height:100%;
+}
+html {
+ height:100%;
+}
+html,
+body {
+ margin: 0px 0px 0px 0px ;
+ padding: 0px 0px 0px 0px ;
+ height:100%;
+}
+#top-tile-bar {
+ background:transparent ;
+ left: 0px ;
+ height: 200px;
+ position: fixed ;
+ z-index:100 ;
+}
.tilebar {
-position: fixed;
-left: 0px;
-top: 0px;
-right: 0px;
-bottom: 0px;
-align:right;
-color:#fff;background:#1D1D1D;width:100%;height:400px;
-display:block;
-z-index:102;
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ align:right;
+ color:#fff;
+ background:#1D1D1D;
+ width:100%;
+ height:400px;
+ display:block;
+ z-index:102;
}
.tile:hover {
- outline: 3px #4A4A4A solid;
+ outline: 3px #4A4A4A solid;
}
.onhoverbg:hover {
- background: #9F6F40;
+ background: #9F6F40;
}
.topleft {
- display: inline;
- position: relative;
- }
- .topright .hover {
- display: none;
- position: absolute;
- left:0;
- z-index: 2000;
+ display: inline;
+ position: relative;
+}
+.topright .hover {
+ display: none;
+ position: absolute;
+ left:0;
+ z-index: 2000;
height:200px;
- }
+}
</style>
<script>
-var openDiv;
+var openDiv, $;
function toggleDiv(divID) {
$("#" + divID).fadeToggle(150, function() {
openDiv = $(this).is(':visible') ? divID : null;
@@ -203,7 +206,7 @@
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700'
defer="defer" rel='stylesheet' type='text/css'>
<meta name="msapplication-TileImage"
content="http://www.pidgi.net/new/public/images/pidgiwiki.png"/>
<meta name="msapplication-TileColor" content="#BE0027"/>
-<script src="http://files.pidgi.net/overthrow.js"></script>
+<script src="overthrow.js"></script>
<div id="mw-page-base" class="noprint"></div>
<div id="mw-head-base" class="noprint"></div>
<div id="content" class="mw-body" class="overthrow" role="main">
@@ -371,7 +374,7 @@
?>
</ul>
</div>
-<div style="padding-left:10px;"><div class="lighthover"
style="height:40px;float:left;"><div class="onhoverbg"
style="height:40px;float:left;"><h4 class="title-name"><a href="<?php echo
$this->data['nav_urls']['mainpage']['href']; ?>"><div class="title-name"
style="font-size: 0.9em;
padding-left:0.4em;padding-right:0.4em;color:white;max-width: auto;height:auto;
max-height:700px; display: inline-block; vertical-align:middle;"><?php echo
$GLOBALS['wgSitename'] ?></div></a></h4></div><img
src="http://images.pidgi.net/line.png" style="float:left;" /><div
class="onhoverbg" style="height:40px;float:left;"><img
src="http://images.pidgi.net/downarrow.png" style="cursor:pointer;"
onclick="toggleDiv('bartile');"></div></div></div>
+<div style="padding-left:10px;"><div class="lighthover"
style="height:40px;float:left;"><div class="onhoverbg"
style="height:40px;float:left;"><h4 class="title-name"><a href="<?php echo
$this->data['nav_urls']['mainpage']['href']; ?>"><div class="title-name"
style="font-size: 0.9em;
padding-left:0.4em;padding-right:0.4em;color:white;max-width: auto;height:auto;
max-height:700px; display: inline-block; vertical-align:middle;"><?php echo
$GLOBALS['wgSitename'] ?></div></a></h4></div><div class="custom2"><img
class="upload-button" style="float:left;" /></div><img class="custom3"
style="height:60px;width:27px;cursor:pointer;"
onclick="toggleDiv('bartile');"/></div></div>
<div id="top-tile-bar" class="fixed-position">
<div style="vertical-align:top;align:left;">
@@ -384,7 +387,7 @@
</div></div>
<div id="left-navigation">
- <a href="<?php echo
$this->data['nav_urls']['upload']['href']; ?>"><div class="onhoverbg"
style="padding-left:0.8em;padding-right:0.8em;float:left;height:40px;font-size:10pt;"><img
src="http://images.pidgi.net/uploadlogo.png" /> <span
style="color:#fff;position:relative;top:1px;"><?php $this->msg('uploadbtn')
?></span></div></a><?php $this->renderNavigation( array( 'NAMESPACES',
'VARIANTS', 'VIEWS', 'ACTIONS' ) ); ?>
+ <a href="<?php echo
$this->data['nav_urls']['upload']['href']; ?>"><div class="onhoverbg"
style="padding-left:0.8em;padding-right:0.8em;float:left;height:40px;font-size:10pt;"><div
class="custom"><img class="upload-button" /> <span
style="color:#fff;position:relative;top:3px; "><?php $this->msg('uploadbtn')
?></span></div></div></a><?php $this->renderNavigation( array( 'NAMESPACES',
'VARIANTS', 'VIEWS', 'ACTIONS' ) ); ?>
</div>
<div id="right-navigation">
<?php if ( $SearchBar ): ?>
diff --git a/README.md b/README.md
index d5cd811..f1c5a4c 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,8 @@
## Version
+3.x.x requires MediaWiki 1.25.
+
2.x.x requires MediaWiki 1.24.
1.x.x requires MediaWiki 1.23.
diff --git a/components/collapsibleNav.less b/components/collapsibleNav.less
index ef5500e..e9b6c62 100644
--- a/components/collapsibleNav.less
+++ b/components/collapsibleNav.less
@@ -15,7 +15,8 @@
color: @collapsible-nav-heading-color;
background-position: left center;
background-repeat: no-repeat;
- .background-image-svg('images/arrow-expanded.svg',
'images/arrow-expanded.png');
+// .background-image-svg('images/arrow-expanded.svg',
'images/arrow-expanded.png');
+ .background-image-svg('images/open.svg', 'images/open.png');
padding: @collapsible-nav-heading-padding;
margin-bottom: 0;
@@ -73,7 +74,8 @@
color: @collapsible-nav-heading-collapsed-color;
background-position: left center;
background-repeat: no-repeat;
-
.background-image-svg('images/arrow-collapsed-ltr.svg',
'images/arrow-collapsed-ltr.png');
+//
.background-image-svg('images/arrow-collapsed-ltr.svg',
'images/arrow-collapsed-ltr.png');
+ .background-image-svg('images/closed-ltr.svg',
'images/closed-ltr.png');
margin-bottom: 0;
&:hover {
diff --git a/components/common.less b/components/common.less
index ae851e1..b8f114f 100644
--- a/components/common.less
+++ b/components/common.less
@@ -108,6 +108,46 @@
}
}
+
+
+.custom img{
+ background-image: url('images/uploadlogo.png');
+ width:26px; /*width of your image*/
+ height:35px; /*height of your image*/
+ margin:0; /* If you want no margin */
+ padding:0; /*if your want to padding */
+ background-repeat: no-repeat;
+}
+
+.custom2 img{
+ background-image: url('images/line.png');
+ width:auto; /*width of your image*/
+ height:auto; /*height of your image*/
+ margin:0; /* If you want no margin */
+ padding:0; /*if your want to padding */
+ background-repeat: no-repeat;
+}
+
+img.custom3 {
+ background-image: url('images/downarrow.png');
+ margin:-26px; /* If you want no margin */
+ padding:0; /*if your want to padding */
+ background-repeat: no-repeat;
+
+ background-position: -0px 20px
+}
+
+img.custom3:hover{
+ background: #9F6F40;
+ background-image: url('images/downarrow.png');
+ margin:-26px; /* If you want no margin */
+ padding:0; /*if your want to padding */
+ background-repeat: no-repeat;
+
+ background-position: -0px 20px;
+}
+
+
/* Hide empty portlets */
div.emptyPortlet {
display: none;
diff --git a/components/navigation.less b/components/navigation.less
index 5a34834..63ae562 100644
--- a/components/navigation.less
+++ b/components/navigation.less
@@ -78,7 +78,6 @@
/* Panel */
div#mw-panel {
font-size: @menu-main-font-size;
- position: absolute;
top: 40px;
padding-top: 1em;
width: 10em;
diff --git a/components/search.less b/components/search.less
index 4b99d03..1b7e01b 100644
--- a/components/search.less
+++ b/components/search.less
@@ -18,7 +18,8 @@
div#simpleSearch {
display: block;
- width: 14em;
+ width: 12.6em;
+ padding-right: 1.4em;
height: 1.4em;
margin-top: 0.65em;
position: relative;
@@ -32,7 +33,6 @@
// Styles for both the search input and the button
input {
- position: absolute;
margin: 0;
padding: 0;
border: 0;
@@ -42,9 +42,7 @@
// The search input
#searchInput {
- top: 0;
- left: 0;
- width: 90%;
+ width: 100%;
padding: 0.2em 0 0.2em 0.2em;
font-size: 13px;
direction: ltr;
@@ -87,14 +85,14 @@
// present the fulltext search one obscures the 'Go' one.
#searchButton,
#mw-searchButton {
+ position: absolute;
top: 0;
right: 0;
- width: 10%;
+ width: 1.65em;
height: 100%;
cursor: pointer;
/* Hide button text and replace it with the image. */
- /* This would be 100% if not for Firefox shenanigans (bug
60900). */
- text-indent: 200%;
+ text-indent: -99999px;
/* Needed to make IE6 respect the text-indent. */
line-height: 1;
/* Opera 12 on RTL flips the text in a funny way without this.
*/
diff --git a/images/closed-ltr.png b/images/closed-ltr.png
new file mode 100644
index 0000000..c8abee8
--- /dev/null
+++ b/images/closed-ltr.png
Binary files differ
diff --git a/images/closed-ltr.svg b/images/closed-ltr.svg
new file mode 100644
index 0000000..648d28f
--- /dev/null
+++ b/images/closed-ltr.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ width="16"
+ height="16"
+ sodipodi:docname="closed-ltr.svg">
+ <metadata
+ id="metadata2991">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs2989" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1366"
+ inkscape:window-height="705"
+ id="namedview2987"
+ showgrid="false"
+ inkscape:zoom="10.42"
+ inkscape:cx="11.762345"
+ inkscape:cy="3.6984193"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2985" />
+ <image
+ width="16"
+ height="16"
+
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAJNJREFU
+OI3dkbsNwzAMRI9Eeq2iETxChqD6jOIBOIRH8AhaRQuQaVw4/opwF3YH8B7IO3J3PBl+5P4PwGst
+SimZmWcACUAzs0FV63pnG/rPBapazWwA0AAkZp5FJF9dsHshCjnMIAI5DbEXctmCqlZ3HxeZiGgK
+AUQkE9Fnkc3d390AEbmt9BTQaz4ERMw7QNQMAF+rN2QftOIyngAAAABJRU5ErkJggg==
+"
+ id="image2993"
+ x="0"
+ y="0" />
+</svg>
diff --git a/images/closed-rtl.png b/images/closed-rtl.png
new file mode 100644
index 0000000..797c56e
--- /dev/null
+++ b/images/closed-rtl.png
Binary files differ
diff --git a/images/closed-rtl.svg b/images/closed-rtl.svg
new file mode 100644
index 0000000..26c56f5
--- /dev/null
+++ b/images/closed-rtl.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ id="svg2995"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ width="16"
+ height="16"
+ sodipodi:docname="closed-rtl.png">
+ <metadata
+ id="metadata3001">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs2999" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1366"
+ inkscape:window-height="705"
+ id="namedview2997"
+ showgrid="false"
+ inkscape:zoom="14.75"
+ inkscape:cx="8"
+ inkscape:cy="7.7133484"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2995" />
+ <image
+ width="16"
+ height="16"
+
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAI5JREFU
+OI3d0sENwyAMheFnq/eskhEyQofwABmldzxER8gIrJIF7Fw4tJVBRrmVG4j/EwLI3XFn8K36P4DH
+7wIRfc1FZGXmA8AC4DSzrZRSUyeIYlWtn3u6QCbuAtk4BGbiECCid4vh7q9RHALu/gRwNmwXkXUK
+UNVqZltDFmY+Rkh4iTNI9xmzyPAjZZALj7BhHy67B3kAAAAASUVORK5CYII=
+"
+ id="image3003"
+ x="0"
+ y="0" />
+</svg>
diff --git a/images/downarrow.png b/images/downarrow.png
new file mode 100644
index 0000000..2de8ea4
--- /dev/null
+++ b/images/downarrow.png
Binary files differ
diff --git a/images/line.png b/images/line.png
new file mode 100644
index 0000000..1019076
--- /dev/null
+++ b/images/line.png
Binary files differ
diff --git a/images/open.png b/images/open.png
new file mode 100644
index 0000000..a24caa4
--- /dev/null
+++ b/images/open.png
Binary files differ
diff --git a/images/open.svg b/images/open.svg
new file mode 100644
index 0000000..2616e03
--- /dev/null
+++ b/images/open.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ id="svg2985"
+ version="1.1"
+ inkscape:version="0.48.5 r10040"
+ width="16"
+ height="16"
+ sodipodi:docname="open.png">
+ <metadata
+ id="metadata2991">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs2989" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1366"
+ inkscape:window-height="705"
+ id="namedview2987"
+ showgrid="false"
+ inkscape:zoom="14.75"
+ inkscape:cx="8"
+ inkscape:cy="8"
+ inkscape:window-x="-8"
+ inkscape:window-y="-8"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2985" />
+ <image
+ width="16"
+ height="16"
+
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAIxJREFU
+OI3tkkENw0AMBNcmECqBUAgl4X+h9G8SgRAIoRICt/1UkWP5rpHy7b53RrZlIYk70Vv0X3AWmNl8
+Bci9Q6Cq6y+Jmc2qupYCANNIEuCpJ9h7kgTvpaC19qgkGf72jkh85Vwm+RaRV4TdfesKBruWcL4B
+AMDdt7DOEC4niJOIyELy2YOHgqv5AFpZWh1tDGE7AAAAAElFTkSuQmCC
+"
+ id="image2993"
+ x="0"
+ y="0" />
+</svg>
diff --git a/images/uploadlogo.png b/images/uploadlogo.png
new file mode 100644
index 0000000..f6f65ec
--- /dev/null
+++ b/images/uploadlogo.png
Binary files differ
diff --git a/overthrow.js b/overthrow.js
new file mode 100644
index 0000000..c4545b8
--- /dev/null
+++ b/overthrow.js
@@ -0,0 +1,413 @@
+/*! overthrow - An overflow:auto polyfill for responsive design. - v0.6.6 -
2013-10-25
+* Copyright (c) 2013 Scott Jehl, Filament Group, Inc.; Licensed MIT */
+/*! Overthrow. An overflow:auto polyfill for responsive design. (c) 2012:
Scott Jehl, Filament Group, Inc.
http://filamentgroup.github.com/Overthrow/license.txt */
+(function( w, undefined ){
+
+ var doc = w.document,
+ docElem = doc.documentElement,
+ enabledClassName = "overthrow-enabled",
+
+ // Touch events are used in the polyfill, and thus are a
prerequisite
+ canBeFilledWithPoly = "ontouchmove" in doc,
+
+ // The following attempts to determine whether the browser has
native overflow support
+ // so we can enable it but not polyfill
+ nativeOverflow =
+ // Features-first. iOS5 overflow scrolling property
check - no UA needed here. thanks Apple :)
+ "WebkitOverflowScrolling" in docElem.style ||
+ // Test the windows scrolling property as well
+ "msOverflowStyle" in docElem.style ||
+ // Touch events aren't supported and screen width is
greater than X
+ // ...basically, this is a loose "desktop browser"
check.
+ // It may wrongly opt-in very large tablets with no
touch support.
+ ( !canBeFilledWithPoly && w.screen.width > 800 ) ||
+ // Hang on to your hats.
+ // Whitelist some popular, overflow-supporting mobile
browsers for now and the future
+ // These browsers are known to get overlow support
right, but give us no way of detecting it.
+ (function(){
+ var ua = w.navigator.userAgent,
+ // Webkit crosses platforms, and the
browsers on our list run at least version 534
+ webkit = ua.match(
/AppleWebKit\/([0-9]+)/ ),
+ wkversion = webkit && webkit[1],
+ wkLte534 = webkit && wkversion >= 534;
+
+ return (
+ /* Android 3+ with webkit gte 534
+ ~: Mozilla/5.0 (Linux; U; Android 3.0;
en-us; Xoom Build/HRI39) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0
Safari/534.13 */
+ ua.match( /Android ([0-9]+)/ ) &&
RegExp.$1 >= 3 && wkLte534 ||
+ /* Blackberry 7+ with webkit gte 534
+ ~: Mozilla/5.0 (BlackBerry; U;
BlackBerry 9900; en-US) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0
Mobile Safari/534.11+ */
+ ua.match( / Version\/([0-9]+)/ ) &&
RegExp.$1 >= 0 && w.blackberry && wkLte534 ||
+ /* Blackberry Playbook with webkit gte
534
+ ~: Mozilla/5.0 (PlayBook; U; RIM Tablet
OS 1.0.0; en-US) AppleWebKit/534.8+ (KHTML, like Gecko) Version/0.0.1
Safari/534.8+ */
+ ua.indexOf( "PlayBook" ) > -1 &&
wkLte534 && !ua.indexOf( "Android 2" ) === -1 ||
+ /* Firefox Mobile (Fennec) 4 and up
+ ~: Mozilla/5.0 (Mobile; rv:15.0)
Gecko/15.0 Firefox/15.0 */
+ ua.match(/Firefox\/([0-9]+)/) &&
RegExp.$1 >= 4 ||
+ /* WebOS 3 and up (TouchPad too)
+ ~: Mozilla/5.0 (hp-tablet; Linux;
hpwOS/3.0.0; U; en-US) AppleWebKit/534.6 (KHTML, like Gecko) wOSBrowser/233.48
Safari/534.6 TouchPad/1.0 */
+ ua.match( /wOSBrowser\/([0-9]+)/ ) &&
RegExp.$1 >= 233 && wkLte534 ||
+ /* Nokia Browser N8
+ ~: Mozilla/5.0 (Symbian/3; Series60/5.2
NokiaN8-00/012.002; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/533.4
(KHTML, like Gecko) NokiaBrowser/7.3.0 Mobile Safari/533.4 3gpp-gba
+ ~: Note: the N9 doesn't have native
overflow with one-finger touch. wtf */
+ ua.match( /NokiaBrowser\/([0-9\.]+)/ )
&& parseFloat(RegExp.$1) === 7.3 && webkit && wkversion >= 533
+ );
+ })();
+
+ // Expose overthrow API
+ w.overthrow = {};
+
+ w.overthrow.enabledClassName = enabledClassName;
+
+ w.overthrow.addClass = function(){
+ if( docElem.className.indexOf( w.overthrow.enabledClassName )
=== -1 ){
+ docElem.className += " " + w.overthrow.enabledClassName;
+ }
+ };
+
+ w.overthrow.removeClass = function(){
+ docElem.className = docElem.className.replace(
w.overthrow.enabledClassName, "" );
+ };
+
+ // Enable and potentially polyfill overflow
+ w.overthrow.set = function(){
+
+ // If nativeOverflow or at least the element
canBeFilledWithPoly, add a class to cue CSS that assumes overflow scrolling
will work (setting height on elements and such)
+ if( nativeOverflow ){
+ w.overthrow.addClass();
+ }
+
+ };
+
+ // expose polyfillable
+ w.overthrow.canBeFilledWithPoly = canBeFilledWithPoly;
+
+ // Destroy everything later. If you want to.
+ w.overthrow.forget = function(){
+
+ w.overthrow.removeClass();
+
+ };
+
+ // Expose overthrow API
+ w.overthrow.support = nativeOverflow ? "native" : "none";
+
+})( this );
+
+/*! Overthrow. An overflow:auto polyfill for responsive design. (c) 2012:
Scott Jehl, Filament Group, Inc.
http://filamentgroup.github.com/Overthrow/license.txt */
+(function( w, o, undefined ){
+
+ // o is overthrow reference from overthrow-polyfill.js
+ if( o === undefined ){
+ return;
+ }
+
+ // Easing can use any of Robert Penner's equations
(http://www.robertpenner.com/easing_terms_of_use.html). By default, overthrow
includes ease-out-cubic
+ // arguments: t = current iteration, b = initial value, c = end value,
d = total iterations
+ // use w.overthrow.easing to provide a custom function externally, or
pass an easing function as a callback to the toss method
+ o.easing = function (t, b, c, d) {
+ return c*((t=t/d-1)*t*t + 1) + b;
+ };
+
+ // tossing property is true during a programatic scroll
+ o.tossing = false;
+
+ // Keeper of intervals
+ var timeKeeper;
+
+ /* toss scrolls and element with easing
+
+ // elem is the element to scroll
+ // options hash:
+ * left is the desired horizontal scroll. Default is "+0". For
relative distances, pass a string with "+" or "-" in front.
+ * top is the desired vertical scroll. Default is "+0". For
relative distances, pass a string with "+" or "-" in front.
+ * duration is the number of milliseconds the throw will take.
Default is 100.
+ * easing is an optional custom easing function. Default is
w.overthrow.easing. Must follow the easing function signature
+
+ */
+ o.toss = function( elem, options ){
+ o.intercept();
+ var i = 0,
+ sLeft = elem.scrollLeft,
+ sTop = elem.scrollTop,
+ // Toss defaults
+ op = {
+ top: "+0",
+ left: "+0",
+ duration: 50,
+ easing: o.easing
+ },
+ endLeft, endTop;
+
+ // Mixin based on predefined defaults
+ if( options ){
+ for( var j in op ){
+ if( options[ j ] !== undefined ){
+ op[ j ] = options[ j ];
+ }
+ }
+ }
+
+ // Convert relative values to ints
+ // First the left val
+ if( typeof op.left === "string" ){
+ op.left = parseFloat( op.left );
+ endLeft = op.left + sLeft;
+ }
+ else {
+ endLeft = op.left;
+ op.left = op.left - sLeft;
+ }
+ // Then the top val
+ if( typeof op.top === "string" ){
+
+ op.top = parseFloat( op.top );
+ endTop = op.top + sTop;
+ }
+ else {
+ endTop = op.top;
+ op.top = op.top - sTop;
+ }
+
+ o.tossing = true;
+ timeKeeper = setInterval(function(){
+ if( i++ < op.duration ){
+ elem.scrollLeft = op.easing( i, sLeft, op.left,
op.duration );
+ elem.scrollTop = op.easing( i, sTop, op.top,
op.duration );
+ }
+ else{
+ if( endLeft !== elem.scrollLeft ){
+ elem.scrollLeft = endLeft;
+ }
+ if( endTop !== elem.scrollTop ){
+ elem.scrollTop = endTop;
+ }
+ o.intercept();
+ }
+ }, 1 );
+
+ // Return the values, post-mixin, with end values specified
+ return { top: endTop, left: endLeft, duration: o.duration,
easing: o.easing };
+ };
+
+ // Intercept any throw in progress
+ o.intercept = function(){
+ clearInterval( timeKeeper );
+ o.tossing = false;
+ };
+
+})( this, this.overthrow );
+/*! Overthrow. An overflow:auto polyfill for responsive design. (c) 2012:
Scott Jehl, Filament Group, Inc.
http://filamentgroup.github.com/Overthrow/license.txt */
+(function( w, o, undefined ){
+
+ // o is overthrow reference from overthrow-polyfill.js
+ if( o === undefined ){
+ return;
+ }
+
+ o.scrollIndicatorClassName = "overthrow";
+
+ var doc = w.document,
+ docElem = doc.documentElement,
+ // o api
+ nativeOverflow = o.support === "native",
+ canBeFilledWithPoly = o.canBeFilledWithPoly,
+ configure = o.configure,
+ set = o.set,
+ forget = o.forget,
+ scrollIndicatorClassName = o.scrollIndicatorClassName;
+
+ // find closest overthrow (elem or a parent)
+ o.closest = function( target, ascend ){
+ return !ascend && target.className && target.className.indexOf(
scrollIndicatorClassName ) > -1 && target || o.closest( target.parentNode );
+ };
+
+ // polyfill overflow
+ var enabled = false;
+ o.set = function(){
+
+ set();
+
+ // If nativeOverflow or it doesn't look like the browser
canBeFilledWithPoly, our job is done here. Exit viewport left.
+ if( enabled || nativeOverflow || !canBeFilledWithPoly ){
+ return;
+ }
+
+ w.overthrow.addClass();
+
+ enabled = true;
+
+ o.support = "polyfilled";
+
+ o.forget = function(){
+ forget();
+ enabled = false;
+ // Remove touch binding (check for method support since
this part isn't qualified by touch support like the rest)
+ if( doc.removeEventListener ){
+ doc.removeEventListener( "touchstart", start,
false );
+ }
+ };
+
+ // Fill 'er up!
+ // From here down, all logic is associated with touch scroll
handling
+ // elem references the overthrow element in use
+ var elem,
+
+ // The last several Y values are kept here
+ lastTops = [],
+
+ // The last several X values are kept here
+ lastLefts = [],
+
+ // lastDown will be true if the last scroll direction
was down, false if it was up
+ lastDown,
+
+ // lastRight will be true if the last scroll direction
was right, false if it was left
+ lastRight,
+
+ // For a new gesture, or change in direction, reset the
values from last scroll
+ resetVertTracking = function(){
+ lastTops = [];
+ lastDown = null;
+ },
+
+ resetHorTracking = function(){
+ lastLefts = [];
+ lastRight = null;
+ },
+
+ // On webkit, touch events hardly trickle through
textareas and inputs
+ // Disabling CSS pointer events makes sure they do, but
it also makes the controls innaccessible
+ // Toggling pointer events at the right moments seems
to do the trick
+ // Thanks Thomas Bachem
http://stackoverflow.com/a/5798681 for the following
+ inputs,
+ setPointers = function( val ){
+ inputs = elem.querySelectorAll( "textarea,
input" );
+ for( var i = 0, il = inputs.length; i < il; i++
) {
+ inputs[ i ].style.pointerEvents = val;
+ }
+ },
+
+ // For nested overthrows, changeScrollTarget restarts a
touch event cycle on a parent or child overthrow
+ changeScrollTarget = function( startEvent, ascend ){
+ if( doc.createEvent ){
+ var newTarget = ( !ascend || ascend ===
undefined ) && elem.parentNode || elem.touchchild || elem,
+ tEnd;
+
+ if( newTarget !== elem ){
+ tEnd = doc.createEvent(
"HTMLEvents" );
+ tEnd.initEvent( "touchend",
true, true );
+ elem.dispatchEvent( tEnd );
+ newTarget.touchchild = elem;
+ elem = newTarget;
+ newTarget.dispatchEvent(
startEvent );
+ }
+ }
+ },
+
+ // Touchstart handler
+ // On touchstart, touchmove and touchend are freshly
bound, and all three share a bunch of vars set by touchstart
+ // Touchend unbinds them again, until next time
+ start = function( e ){
+
+ // Stop any throw in progress
+ if( o.intercept ){
+ o.intercept();
+ }
+
+ // Reset the distance and direction tracking
+ resetVertTracking();
+ resetHorTracking();
+
+ elem = o.closest( e.target );
+
+ if( !elem || elem === docElem ||
e.touches.length > 1 ){
+ return;
+ }
+
+ setPointers( "none" );
+ var touchStartE = e,
+ scrollT = elem.scrollTop,
+ scrollL = elem.scrollLeft,
+ height = elem.offsetHeight,
+ width = elem.offsetWidth,
+ startY = e.touches[ 0 ].pageY,
+ startX = e.touches[ 0 ].pageX,
+ scrollHeight = elem.scrollHeight,
+ scrollWidth = elem.scrollWidth,
+
+ // Touchmove handler
+ move = function( e ){
+
+ var ty = scrollT + startY -
e.touches[ 0 ].pageY,
+ tx = scrollL + startX -
e.touches[ 0 ].pageX,
+ down = ty >= (
lastTops.length ? lastTops[ 0 ] : 0 ),
+ right = tx >= (
lastLefts.length ? lastLefts[ 0 ] : 0 );
+
+ // If there's room to scroll
the current container, prevent the default window scroll
+ if( ( ty > 0 && ty <
scrollHeight - height ) || ( tx > 0 && tx < scrollWidth - width ) ){
+ e.preventDefault();
+ }
+ // This bubbling is dumb. Needs
a rethink.
+ else {
+ changeScrollTarget(
touchStartE );
+ }
+
+ // If down and lastDown are
inequal, the y scroll has changed direction. Reset tracking.
+ if( lastDown && down !==
lastDown ){
+ resetVertTracking();
+ }
+
+ // If right and lastRight are
inequal, the x scroll has changed direction. Reset tracking.
+ if( lastRight && right !==
lastRight ){
+ resetHorTracking();
+ }
+
+ // remember the last direction
in which we were headed
+ lastDown = down;
+ lastRight = right;
+
+ // set the container's scroll
+ elem.scrollTop = ty;
+ elem.scrollLeft = tx;
+
+ lastTops.unshift( ty );
+ lastLefts.unshift( tx );
+
+ if( lastTops.length > 3 ){
+ lastTops.pop();
+ }
+ if( lastLefts.length > 3 ){
+ lastLefts.pop();
+ }
+ },
+
+ // Touchend handler
+ end = function( e ){
+
+ // Bring the pointers back
+ setPointers( "auto" );
+ setTimeout( function(){
+ setPointers( "none" );
+ }, 450 );
+ elem.removeEventListener(
"touchmove", move, false );
+ elem.removeEventListener(
"touchend", end, false );
+ };
+
+ elem.addEventListener( "touchmove", move, false
);
+ elem.addEventListener( "touchend", end, false );
+ };
+
+ // Bind to touch, handle move and end within
+ doc.addEventListener( "touchstart", start, false );
+ };
+
+})( this, this.overthrow );
+
+/*! Overthrow. An overflow:auto polyfill for responsive design. (c) 2012:
Scott Jehl, Filament Group, Inc.
http://filamentgroup.github.com/Overthrow/license.txt */
+(function( w, undefined ){
+
+ // Auto-init
+ w.overthrow.set();
+
+}( this ));
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/162014
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I229f665348407ce033b4e7167736fbd663df0913
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/Metrolook
Gerrit-Branch: master
Gerrit-Owner: Paladox <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits