Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/194385
Change subject: demo: Load styles before building demo widgets (not
asynchronously)
......................................................................
demo: Load styles before building demo widgets (not asynchronously)
Fixes a long-standing issue where autosized or labelled
TextInputWidgets render incorrectly on initial page load. Prevents an
issue where narrow toolbars (being introduced in I17d22ba6) would not
work at all.
Change-Id: Iea6a9bf7ff030ad517c100b2891a1a6ac3aa3a26
---
M demos/demo.js
M demos/index.html
M demos/pages/toolbars.js
3 files changed, 38 insertions(+), 10 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/85/194385/1
diff --git a/demos/demo.js b/demos/demo.js
index dd8cdfc..1b5bf5d 100644
--- a/demos/demo.js
+++ b/demos/demo.js
@@ -66,7 +66,6 @@
$( 'body' ).addClass( 'oo-ui-' + this.mode.direction );
$( 'head' ).append( this.stylesheetLinks );
OO.ui.theme = new ( this.constructor.static.themes[ this.mode.theme
].theme )();
- this.constructor.static.pages[ this.mode.page ]( this );
};
/* Setup */
@@ -178,6 +177,24 @@
/* Methods */
/**
+ * Load the demo page. Must be called after $element is attached.
+ */
+OO.ui.Demo.prototype.initialize = function () {
+ var
+ demo = this,
+ promises = $( this.stylesheetLinks ).map( function () {
+ return $( this ).data( 'load-promise' );
+ } );
+ $.when.apply( $, promises )
+ .done( function () {
+ demo.constructor.static.pages[ demo.mode.page ]( demo );
+ } )
+ .fail( function () {
+ demo.$element.append( $( '<p>' ).text( 'Demo styles
failed to load.' ) );
+ } );
+};
+
+/**
* Handle mode change events.
*
* Will load a new page.
@@ -272,10 +289,9 @@
* @return {HTMLElement[]} List of link elements
*/
OO.ui.Demo.prototype.getStylesheetLinks = function () {
- var i, len, link, fragments,
+ var links, fragments,
factors = this.getFactors(),
- urls = [],
- links = [];
+ urls = [];
// Translate modes to filename fragments
fragments = this.getCurrentFactorValues().map( function ( val, index ) {
@@ -288,12 +304,21 @@
urls.push( 'styles/demo' + fragments[ 3 ] + '.css' );
// Add link tags
- for ( i = 0, len = urls.length; i < len; i++ ) {
- link = document.createElement( 'link' );
+ links = urls.map( function ( url ) {
+ var
+ link = document.createElement( 'link' ),
+ $link = $( link ),
+ deferred = $.Deferred();
+ $link.data( 'load-promise', deferred.promise() );
+ $link.on( {
+ load: function () { deferred.resolve(); },
+ error: function () { deferred.reject(); }
+ } );
link.rel = 'stylesheet';
- link.href = urls[ i ];
- links.push( link );
- }
+ link.href = url;
+ return link;
+ } );
+
return links;
};
diff --git a/demos/index.html b/demos/index.html
index 4e14bd4..e136a4a 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -27,6 +27,7 @@
}
demo = new OO.ui.Demo();
$( 'body' ).append( demo.$element );
+ demo.initialize();
}
setup();
diff --git a/demos/pages/toolbars.js b/demos/pages/toolbars.js
index 9818fe2..f2e195a 100644
--- a/demos/pages/toolbars.js
+++ b/demos/pages/toolbars.js
@@ -260,11 +260,13 @@
for ( i = 0; i < toolbars.length; i++ ) {
$containers.eq( i ).append( toolbars[ i ].$element );
- toolbars[ i ].initialize();
}
$containers.append( '' );
$demo.append(
$containers.eq( 0 ).append( '<div
class="oo-ui-demo-toolbars-contents">Toolbar</div>' ),
$containers.eq( 1 ).append( '<div
class="oo-ui-demo-toolbars-contents">Toolbar with action buttons</div>' )
);
+ for ( i = 0; i < toolbars.length; i++ ) {
+ toolbars[ i ].initialize();
+ }
};
--
To view, visit https://gerrit.wikimedia.org/r/194385
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Iea6a9bf7ff030ad517c100b2891a1a6ac3aa3a26
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
