Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/204408
Change subject: Add button abstraction
......................................................................
Add button abstraction
Allow us to change how we implement buttons in future akin to how
we do icons. More patches to follow.
Bug: T87254
Change-Id: Ib709ada5bd991b74e1c93eb3baa835653dc72dd6
---
M includes/Resources.php
A javascripts/Button.js
M javascripts/modules/projects/init.js
M javascripts/modules/talk/talk.js
A templates/button.hogan
5 files changed, 71 insertions(+), 9 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/08/204408/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 8c1432f..de7cf3d 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -330,6 +330,7 @@
'templates' => array(
'icon.hogan' => 'templates/icon.hogan',
'Section.hogan' => 'templates/Section.hogan',
+ 'button.hogan' => 'templates/button.hogan',
),
'messages' => array(
// icons.js
@@ -342,6 +343,7 @@
// FIXME: Remove api code to mobile.ajax
'javascripts/api.js',
'javascripts/PageApi.js',
+ 'javascripts/Button.js',
'javascripts/Icon.js',
'javascripts/icons.js',
'javascripts/Panel.js',
diff --git a/javascripts/Button.js b/javascripts/Button.js
new file mode 100644
index 0000000..8792031
--- /dev/null
+++ b/javascripts/Button.js
@@ -0,0 +1,51 @@
+( function ( M, $ ) {
+
+ var View = M.require( 'View' ),
+ context = M.require( 'context' ),
+ useMediaWikiUI = context.isBetaGroupMember(),
+ Icon;
+
+ /**
+ * A wrapper for creating an icon.
+ * @class Icon
+ * @extends View
+ */
+ Button = View.extend( {
+ /**
+ * @cfg {Object} defaults Default options hash.
+ * @cfg {String} defaults.tagName The name of the tag in which
the icon is wrapped.
+ * @cfg {String} defaults.additionalClassNames Additional class
name(s).
+ * @cfg {String} defaults.href url
+ * @cfg {String} defaults.label of button
+ */
+ defaults: {
+ tagName: 'a',
+ progressive: undefined,
+ destructive: undefined,
+ constructive: undefined,
+ additionalClassNames: '',
+ href: undefined,
+ label: undefined
+ },
+ /** @inheritdoc */
+ initialize: function ( options ) {
+ View.prototype.initialize.call( this, options );
+ },
+ /** @inheritdoc */
+ postRender: function () {
+ View.prototype.postRender.apply( this, arguments );
+ this.$el = this.$el.children( 0 );
+ },
+ /**
+ * Return the HTML representation of this view
+ * @method
+ * @return {String}
+ */
+ toHtmlString: function () {
+ return $( '<div>' ).append( this.$el ).html();
+ },
+ template: mw.template.get( 'mobile.startup', 'button.hogan' )
+ } );
+ M.define( 'Button', Button );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/projects/init.js
b/javascripts/modules/projects/init.js
index 7835083..feb4cb9 100644
--- a/javascripts/modules/projects/init.js
+++ b/javascripts/modules/projects/init.js
@@ -1,6 +1,7 @@
( function ( M, $ ) {
var loader = M.require( 'loader' ),
+ Button = M.require( 'Button' ),
overlayManager = M.require( 'overlayManager' ),
wbId = M.require( 'util' ).getWikiBaseItemId();
@@ -26,10 +27,10 @@
} );
// Add the button
- $( '<a class="mw-ui-button">' )
- .attr( 'href', '#/other-projects' )
- .text( mw.msg( 'mobile-frontend-other-project-label' ) )
- .appendTo( '#page-secondary-actions' );
+ new Button( {
+ label: mw.msg( 'mobile-frontend-other-project-label' ),
+ href: '#/other-projects'
+ } ).appendTo( '#page-secondary-actions' );
}
}( mw.mobileFrontend, jQuery ) );
diff --git a/javascripts/modules/talk/talk.js b/javascripts/modules/talk/talk.js
index d08e5e1..a3ad37c 100644
--- a/javascripts/modules/talk/talk.js
+++ b/javascripts/modules/talk/talk.js
@@ -2,6 +2,7 @@
var loader = M.require( 'loader' ),
LoadingOverlay = M.require( 'LoadingOverlay' ),
user = M.require( 'user' ),
+ Button = M.require( 'Button' ),
$talk = $( '.talk' ),
page = M.getCurrentPage(),
overlayManager = M.require( 'overlayManager' ),
@@ -62,11 +63,11 @@
!user.isAnon() &&
( page.inNamespace( 'talk' ) || page.inNamespace( 'user_talk' )
)
) {
- // FIXME: Like icons.js, it should be possible to easily create
a button, instead of this
- $( '<a class="mw-ui-button mw-ui-progressive">' )
- .text( mw.msg(
'mobile-frontend-talk-add-overlay-submit' ) )
- .attr( 'href', '#/talk/new' )
- .prependTo( '#content' );
+ new Button( {
+ label: mw.msg(
'mobile-frontend-talk-add-overlay-submit' ),
+ href: '#/talk/new',
+ progressive: true
+ } ).prependTo( '#content' );
// reload the page after the new discussion was added
M.on( 'talk-added-wo-overlay', function () {
diff --git a/templates/button.hogan b/templates/button.hogan
new file mode 100644
index 0000000..a854a89
--- /dev/null
+++ b/templates/button.hogan
@@ -0,0 +1,7 @@
+<{{tagName}}
+ {{#href}}href="{{href}}"{{/href}}
+ class="mw-ui-button
+ {{#progressive}}mw-ui-progressive{{/progressive}}
+ {{#constructive}}mw-ui-constructive{{/constructive}}
+ {{#destructive}}mw-ui-destructive{{/destructive}}
{{additionalClassNames}}
+ ">{{label}}</{{tagName}}>
--
To view, visit https://gerrit.wikimedia.org/r/204408
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib709ada5bd991b74e1c93eb3baa835653dc72dd6
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
