Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/176519
Change subject: Added auto-collapsing tab functionality
......................................................................
Added auto-collapsing tab functionality
Change-Id: Ic8b14899ebabb4b6d833b53d2613230465880e6b
---
M skins/Apex.php
M skins/apex/apex.js
M skins/apex/screen.css
3 files changed, 76 insertions(+), 10 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/apex
refs/changes/19/176519/1
diff --git a/skins/Apex.php b/skins/Apex.php
index ddb194e..ce83329 100644
--- a/skins/Apex.php
+++ b/skins/Apex.php
@@ -117,7 +117,7 @@
foreach ( $nav as $section => $links ) {
foreach ( $links as $key => $link ) {
if ( $section == 'views' && !( isset(
$link['primary'] ) && $link['primary'] ) ) {
- $link['class'] = rtrim( 'collapsible '
. $link['class'], ' ' );
+ $link['class'] = rtrim(
'apex-nav-stashable ' . $link['class'], ' ' );
}
$xmlID = isset( $link['id'] ) ? $link['id'] :
'ca-' . $xmlID;
@@ -199,10 +199,10 @@
<div id="p-logo"><a style="background-image: url(<?php
$this->text( 'logopath' ) ?>);" href="<?php echo htmlspecialchars(
$this->data['nav_urls']['mainpage']['href'] ) ?>" <?php echo
Xml::expandAttributes( Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) )
?>><span><?php echo $wgSitename ?></span></a></div>
<?php $this->renderNavigation( array( 'SEARCH',
'PERSONAL' ) ); ?>
<div class="apex-nav">
- <div class="apex-nav-left">
+ <div class="apex-nav-primary">
<?php $this->renderNavigation( array(
'NAMESPACES', 'VARIANTS' ) ); ?>
</div>
- <div class="apex-nav-right">
+ <div class="apex-nav-secondary">
<?php $this->renderNavigation( array(
'VIEWS', 'ACTIONS' ) ); ?>
</div>
</div>
@@ -393,7 +393,7 @@
<div class="apex-menu-popup">
<ul<?php $this->html( 'userlangattributes' ) ?>>
<?php foreach ( $this->data['action_urls'] as $link ):
?>
- <li<?php echo $link['attributes'] ?>><a
href="<?php echo htmlspecialchars( $link['href'] ) ?>" <?php echo $link['key']
?>><?php echo htmlspecialchars( $link['text'] ) ?></a></li>
+ <li<?php echo $link['attributes'] ?>><span><a
href="<?php echo htmlspecialchars( $link['href'] ) ?>" <?php echo $link['key']
?>><?php echo htmlspecialchars( $link['text'] ) ?></span></a></li>
<?php endforeach; ?>
</ul>
</div>
diff --git a/skins/apex/apex.js b/skins/apex/apex.js
index 2eae1b4..ed5725f 100644
--- a/skins/apex/apex.js
+++ b/skins/apex/apex.js
@@ -1,5 +1,71 @@
/*
* Apex-specific scripts
*/
-jQuery( function( $ ) {
-});
+( function ( $, mw ) {
+
+mw.ApexSkin = function () {
+ // Properties
+ this.$navLeft = $( 'body.ltr .apex-nav-primary, body.rtl
.apex-nav-secondary' );
+ this.$navRight = $( 'body.ltr .apex-nav-secondary, body.rtl
.apex-nav-primary' );
+ this.$views = $( '#p-views' );
+ this.$viewsList = this.$views.find( 'ul' );
+ this.$actions = $( '#p-cactions' );
+ this.$actionsList = this.$actions.find( 'ul' );
+ this.minimumNavDistance = 32;
+ this.stash = [];
+
+ // Events
+ $( window ).on( 'resize', $.proxy( this.onResize, this ) );
+};
+
+mw.ApexSkin.prototype.getNavDistance = function () {
+ return this.$navRight.offset().left - ( this.$navLeft.offset().left +
this.$navLeft.width() );
+};
+
+mw.ApexSkin.prototype.onResize = function () {
+ var i, stashable, $item, $anchor, width,
+ $actionsList = this.$actionsList,
+ stash = this.stash,
+ gap = this.getNavDistance(),
+ buffer = this.minimumNavDistance;
+ if ( gap < buffer ) {
+ // Collect a list of all overlapping items
+ stashable = this.$viewsList.find( '.apex-nav-stashable' ).get();
+ for ( i = stashable.length - 1; i >= 0; i-- ) {
+ $item = $( stashable[i] );
+ $anchor = $item.next();
+ width = $item.outerWidth();
+ stash.push( { '$item': $item, '$anchor': $anchor,
'width': width } );
+ $item.addClass( 'apex-nav-stashed' );
+ $actionsList.prepend( $item );
+ gap += width;
+ if ( gap >= buffer ) {
+ break;
+ }
+ }
+ } else if ( stash.length ) {
+ // Collect a list of all overlapping items
+ for ( i = stash.length - 1; i >= 0; i-- ) {
+ $item = stash[i].$item;
+ $anchor = stash[i].$anchor;
+ width = stash[i].width;
+ if ( gap - width > buffer ) {
+ if ( $anchor.length ) {
+ $anchor.before( $item );
+ } else {
+ this.$viewsList.append( $item );
+ }
+ $item.removeClass( 'apex-nav-stashed' );
+ gap -= width;
+ } else {
+ break;
+ }
+ }
+ }
+};
+
+$( function () {
+ mw.skin = new mw.ApexSkin();
+} );
+
+} ( jQuery, mediaWiki ) );
\ No newline at end of file
diff --git a/skins/apex/screen.css b/skins/apex/screen.css
index e0bc88d..03d581d 100644
--- a/skins/apex/screen.css
+++ b/skins/apex/screen.css
@@ -58,17 +58,17 @@
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#ffffff', endColorstr='#edf8f9',GradientType=0 ); /* IE6-8 */
}
-.apex-nav-left {
+.apex-nav-primary {
float: left;
}
-.apex-nav-right {
+.apex-nav-secondary {
float: right;
}
.apex-nav,
-.apex-nav-left,
-.apex-nav-right {
+.apex-nav-primary,
+.apex-nav-secondary {
height: 2em;
}
--
To view, visit https://gerrit.wikimedia.org/r/176519
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic8b14899ebabb4b6d833b53d2613230465880e6b
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/apex
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
