Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/83837
Change subject: Work in progress: Simplify formatter HTML
......................................................................
Work in progress: Simplify formatter HTML
Change-Id: Iafc288e284b07061aba5fcb53bd80cc6e57a6c86
---
M includes/formatters/MobileFormatterHTML.php
M javascripts/common/application.js
M javascripts/modules/issues/issues.js
M javascripts/modules/lazyload.js
M javascripts/modules/mf-tables.js
M javascripts/modules/mf-toggle-dynamic.js
M javascripts/modules/mf-toggle.js
M javascripts/modules/uploads/PhotoUploader.js
M javascripts/modules/uploads/lead-photo-init.js
M less/common/typography.less
M less/modules/toggle.less
M stylesheets/common/typography.css
M stylesheets/modules/toggle.css
13 files changed, 64 insertions(+), 65 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/37/83837/1
diff --git a/includes/formatters/MobileFormatterHTML.php
b/includes/formatters/MobileFormatterHTML.php
index 6e43c02..aceba82 100644
--- a/includes/formatters/MobileFormatterHTML.php
+++ b/includes/formatters/MobileFormatterHTML.php
@@ -46,7 +46,6 @@
} else {
$base = '';
}
- $base .= Html::openElement( 'div', array( 'class' => 'section'
) );
$base .= Html::openElement( 'h2',
array( 'class' => 'section_heading', 'id' => 'section_'
. $this->headings )
);
@@ -56,15 +55,12 @@
$matches[2]
)
. Html::closeElement( 'h2' )
- . Html::openElement( 'div',
- array( 'class' => 'content_block', 'id' =>
'content_' . $this->headings )
- );
+ . Html::openElement( 'div' );
if ( $this->headings > 1 ) {
// Close it up here
$base = '</div>' // <div class="content_block">
. $backToTop
- . "</div>" // <div class="section">
. $base;
}
diff --git a/javascripts/common/application.js
b/javascripts/common/application.js
index 4a13940..59f7f21 100644
--- a/javascripts/common/application.js
+++ b/javascripts/common/application.js
@@ -257,6 +257,9 @@
init: init,
jQuery: typeof jQuery !== 'undefined' ? jQuery : false,
getOrigin: getOrigin,
+ getLeadSection: function() {
+ return $( '#content' ).find( 'div' ).eq( 0 );
+ },
getSessionId: getSessionId,
isLoggedIn: isLoggedIn,
lockViewport: lockViewport,
diff --git a/javascripts/modules/issues/issues.js
b/javascripts/modules/issues/issues.js
index 6d39028..3459241 100644
--- a/javascripts/modules/issues/issues.js
+++ b/javascripts/modules/issues/issues.js
@@ -12,7 +12,7 @@
} );
function run( $container, parentOverlay ) {
- $container = $container || $( '#content_0' );
+ $container = $container || M.getLeadSection();
var $metadata = $container.find( 'table.ambox' ),
overlay;
diff --git a/javascripts/modules/lazyload.js b/javascripts/modules/lazyload.js
index 244b634..1f895a0 100644
--- a/javascripts/modules/lazyload.js
+++ b/javascripts/modules/lazyload.js
@@ -20,7 +20,7 @@
$( this ).attr( 'href',
history.updateQueryStringParameter( href, 'returnto', title ) );
} );
- history.hijackLinks( $( '#content_0' ),
useFuzzyLinkHijacking );
+ history.hijackLinks( M.getLeadSection(),
useFuzzyLinkHijacking );
} );
searchOverlay.on( 'write-results', function() {
diff --git a/javascripts/modules/mf-tables.js b/javascripts/modules/mf-tables.js
index 22503a7..5fc47e4 100644
--- a/javascripts/modules/mf-tables.js
+++ b/javascripts/modules/mf-tables.js
@@ -63,7 +63,7 @@
M.
on( 'page-loaded', function() {
- initTables( $( '#content_0' ) );
+ initTables( M.getLeadSection() );
} ).
on( 'section-rendered', initTables );
diff --git a/javascripts/modules/mf-toggle-dynamic.js
b/javascripts/modules/mf-toggle-dynamic.js
index 7d54b3e..b9244b9 100644
--- a/javascripts/modules/mf-toggle-dynamic.js
+++ b/javascripts/modules/mf-toggle-dynamic.js
@@ -1,13 +1,14 @@
( function( M, $ ) {
var currentPage;
- M.on( 'section-toggle', function( section_id ) {
+ M.on( 'section-toggle', function( $heading ) {
var
- $content = $( '#content_' + section_id ),
+ $content = $heading.next( '.content_block' ),
loaded = $content.data( 'loaded' ), section;
if ( !loaded && currentPage ) {
- section = currentPage.getSubSection( section_id );
+ // FIXME: broken
+ section = currentPage.getSubSection();
if ( section ) {
$content.html( section.text ).data( 'loaded',
true );
}
diff --git a/javascripts/modules/mf-toggle.js b/javascripts/modules/mf-toggle.js
index 3c76d7e..1588061 100644
--- a/javascripts/modules/mf-toggle.js
+++ b/javascripts/modules/mf-toggle.js
@@ -1,22 +1,34 @@
( function( M, $ ) {
-var MIN_SECTIONS = 2, toggle = ( function() {
+var toggle = ( function() {
- function wm_toggle_section( section_id ) {
- $( '#section_' + section_id + ',#content_' + section_id
).toggleClass( 'openSection' );
- M.emit( 'section-toggle', section_id );
+ /**
+ * Given a heading, toggle it and any of its children
+ * emits a section-toggle event
+ *
+ * @param {jQuery object} $heading A heading belonging to a section
+ */
+ function toggle( $heading ) {
+ $heading.toggleClass( 'openSection' );
+ $heading.next().toggleClass( 'openSection' );
+ M.emit( 'section-toggle', $heading );
}
- function wm_reveal_for_hash( hash ) {
- var $target, $p;
+ /**
+ * Reveals an element and its parent section as identified by it's id
+ *
+ * @param {String} selector A css selector that identifies a single
element
+ */
+ function reveal( selector ) {
+ var $target, $heading;
// jQuery will throw for hashes containing certain characters
which can break toggling
try {
- $target = $( hash );
- $p = $target.closest( '.content_block,
.section_heading' ).eq( 0 );
+ $target = $( selector );
+ $heading = $target.closest( '.section_heading' ).eq( 0
);
- if ( $p.length > 0 && !$p.hasClass( 'openSection' ) ) {
- wm_toggle_section( $p.attr( 'id' ).split( '_'
)[1] );
+ if ( $heading.length > 0 && !$heading.hasClass(
'openSection' ) ) {
+ toggle( $heading );
// scroll again after opening section (opening
section makes the page longer)
window.scrollTo( 0, $target.offset().top );
}
@@ -24,40 +36,35 @@
}
function init() {
+ var $page = $( '#content' );
$( 'html' ).removeClass( 'stub' );
- function openSectionHandler() {
- var sectionName = this.id ? this.id.split( '_' )[1] :
-1;
- if ( sectionName !== -1 ) {
- wm_toggle_section( sectionName );
- }
- }
+ $page.find( 'h2' ).addClass( 'section_heading' );
+ $page.find( '.section_heading' ).next( 'div' ).addClass(
'content_block' );
// use mouseup because mousedown blocks the click event and
links
// in headings won't work
// FIXME change when micro.tap.js in stable
- $( '.section_heading' ).on( M.tapEvent( 'mouseup' ),
openSectionHandler );
+ $( '.section_heading' ).on( M.tapEvent( 'mouseup' ), function()
{
+ toggle( $( this ) );
+ } );
$( '.section_anchors' ).remove();
function checkHash() {
var hash = window.location.hash;
if ( hash.indexOf( '#' ) === 0 ) {
- wm_reveal_for_hash( hash );
+ reveal( hash );
}
}
checkHash();
$( '#content_wrapper a' ).on( 'click', checkHash );
}
- // page is not long enough to collapse so don't worry
- if ( $( '#content h2' ).length < MIN_SECTIONS ) {
- $( 'html' ).addClass( 'stub' );
- } else {
- init();
- }
+ $( 'html' ).addClass( 'stub' );
+ init();
return {
- wm_reveal_for_hash: wm_reveal_for_hash,
- wm_toggle_section: wm_toggle_section,
+ reveal: reveal,
+ toggle: toggle,
enable: init
};
diff --git a/javascripts/modules/uploads/PhotoUploader.js
b/javascripts/modules/uploads/PhotoUploader.js
index bf8a7a0..8027ee5 100644
--- a/javascripts/modules/uploads/PhotoUploader.js
+++ b/javascripts/modules/uploads/PhotoUploader.js
@@ -270,15 +270,11 @@
} ).
on( 'success', function( data ) {
popup.show( mw.msg(
'mobile-frontend-photo-upload-success-article' ), 'toast' );
- // FIXME: workaround for
https://bugzilla.wikimedia.org/show_bug.cgi?id=43271
- if ( !$( '#content_0' ).length ) {
- $( '<div id="content_0" >'
).insertAfter( $( '#section_0,#page-actions' ).last() );
- }
new LeadPhoto( {
url: data.url,
pageUrl: data.descriptionUrl,
caption: data.description
- } ).prependTo( '#content_0' );
+ } ).prependTo( M.getLeadSection() );
} ).
on( 'error cancel', function() {
self.$el.addClass( 'enabled' );
diff --git a/javascripts/modules/uploads/lead-photo-init.js
b/javascripts/modules/uploads/lead-photo-init.js
index 410051e..97b8ee5 100644
--- a/javascripts/modules/uploads/lead-photo-init.js
+++ b/javascripts/modules/uploads/lead-photo-init.js
@@ -9,12 +9,6 @@
isSupported = PhotoUploaderButton.isSupported;
function needsPhoto( $container ) {
- var $content_0 = $container.find( '#content_0' );
- // FIXME: workaround for
https://bugzilla.wikimedia.org/show_bug.cgi?id=43271
- if ( $content_0.length ) {
- $container = $content_0;
- }
-
return $container.find( mw.config.get(
'wgMFLeadPhotoUploadCssSelector' ) ).length === 0;
}
@@ -35,15 +29,14 @@
namespace = mw.config.get( 'wgNamespaceNumber' ),
// FIXME: not updated on dynamic page loads
isEditable = mw.config.get( 'wgIsPageEditable' ),
- validNamespace = ( namespace === namespaceIds[''] ||
namespace === namespaceIds.user ),
- $page = $( '#content' );
+ validNamespace = ( namespace === namespaceIds[''] ||
namespace === namespaceIds.user );
if ( !M.isLoggedIn() && !showCta ) {
// Note with the CTA this is unnecessary but the new
nav requires showing the upload button at all times
return makeDisabledButton(
'mobile-frontend-photo-upload-anon' );
} else if ( !isEditable ) {
return makeDisabledButton(
'mobile-frontend-photo-upload-protected' );
- } else if ( !validNamespace || mw.util.getParamValue( 'action'
) || !needsPhoto( $page ) || mw.config.get( 'wgIsMainPage' ) ) {
+ } else if ( !validNamespace || mw.util.getParamValue( 'action'
) || !needsPhoto( M.getLeadSection() ) || mw.config.get( 'wgIsMainPage' ) ) {
return makeDisabledButton();
}
diff --git a/less/common/typography.less b/less/common/typography.less
index e5c12eb..6178d89 100644
--- a/less/common/typography.less
+++ b/less/common/typography.less
@@ -99,7 +99,7 @@
// (room for spinner + margins)
min-height: 100px;
- .section {
+ .content_block {
h3:first-child {
margin-top: 0;
}
diff --git a/less/modules/toggle.less b/less/modules/toggle.less
index e8d05a6..8612104 100644
--- a/less/modules/toggle.less
+++ b/less/modules/toggle.less
@@ -43,9 +43,6 @@
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0,0,0,0); /* fix for Bug
36196 */
- &:last-child {
- border-bottom: none;
- }
}
}
@@ -70,8 +67,14 @@
}
}
-#content_wrapper .section {
- clear: both;
- border-bottom: solid 1px @sectionBorderColor;
+#content_wrapper {
+ .section_heading,
+ .content_block {
+ border-bottom: solid 1px @sectionBorderColor;
+ }
+
+ .content_block {
+ clear: both;
+ }
}
diff --git a/stylesheets/common/typography.css
b/stylesheets/common/typography.css
index 6691c48..c443f79 100644
--- a/stylesheets/common/typography.css
+++ b/stylesheets/common/typography.css
@@ -88,10 +88,10 @@
position: relative;
min-height: 100px;
}
-#content_wrapper .section h3:first-child {
+#content_wrapper .content_block h3:first-child {
margin-top: 0;
}
-#content_wrapper .section:last-child {
+#content_wrapper .content_block:last-child {
border-bottom: none;
}
#content_wrapper .thumb {
diff --git a/stylesheets/modules/toggle.css b/stylesheets/modules/toggle.css
index 7bd85b2..abbdfd7 100644
--- a/stylesheets/modules/toggle.css
+++ b/stylesheets/modules/toggle.css
@@ -51,9 +51,6 @@
/* fix for Bug 36196 */
}
-.client-js .content_block:last-child {
- border-bottom: none;
-}
.page-loading .section_anchors,
.page-loading .content_block,
.client-js .content_block {
@@ -72,7 +69,10 @@
.stub .content_block {
display: block;
}
-#content_wrapper .section {
- clear: both;
+#content_wrapper .section_heading,
+#content_wrapper .content_block {
border-bottom: solid 1px #e2e3e4;
}
+#content_wrapper .content_block {
+ clear: both;
+}
--
To view, visit https://gerrit.wikimedia.org/r/83837
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Iafc288e284b07061aba5fcb53bd80cc6e57a6c86
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
