[MediaWiki-commits] [Gerrit] Add text direction to SA demo - change (VisualEditor/VisualEditor)
jenkins-bot has submitted this change and it was merged.
Change subject: Add text direction to SA demo
..
Add text direction to SA demo
Change-Id: Id23da34be26c0ce706cd418a32c078c8699935f7
---
M demos/ve/demo.css
M demos/ve/demo.js
2 files changed, 43 insertions(+), 23 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/demos/ve/demo.css b/demos/ve/demo.css
index 3379465..73b25f1 100644
--- a/demos/ve/demo.css
+++ b/demos/ve/demo.css
@@ -59,9 +59,10 @@
box-shadow: 0 0.25em 1.5em 0 #ddd;
}
-.ve-demo-utilities-commands .oo-ui-widget,
+.ve-demo-utilities-commands > .oo-ui-widget,
.ve-demo-utilities-commands-divider {
display: inline-block;
+ vertical-align: middle;
margin-right: 1em;
}
diff --git a/demos/ve/demo.js b/demos/ve/demo.js
index dc30068..0c59a5d 100644
--- a/demos/ve/demo.js
+++ b/demos/ve/demo.js
@@ -31,9 +31,17 @@
dumpModelChangeToggle = new OO.ui.ToggleButtonWidget( {
'label': 'Dump model on change' } ),
validateButton = new OO.ui.ButtonWidget( { 'label': 'Validate
view and model' } ),
languageTextInput = new OO.ui.TextInputWidget( { 'value':
$.i18n().locale } ),
- languageButton = new OO.ui.ButtonWidget( { 'label': 'Set UI
language' } );
+ languageDirectionButton = new OO.ui.ButtonWidget( { 'label':
'Set language & direction' } ),
+ directionSelect = new OO.ui.ButtonSelectWidget().addItems( [
+ new OO.ui.ButtonOptionWidget( 'rtl', { '$': this.$,
'icon': 'text-dir-rtl' } ),
+ new OO.ui.ButtonOptionWidget( 'ltr', { '$': this.$,
'icon': 'text-dir-ltr' } )
+ ] );
// Initialization
+
+ directionSelect.selectItem(
+ directionSelect.getItemFromData( $targetContainer.css(
'direction' ) || 'ltr' )
+ );
$( '.ve-demo-utilities-commands' ).append(
getRangeButton.$element,
@@ -49,7 +57,8 @@
validateButton.$element,
$( ' ' ),
languageTextInput.$element,
- languageButton.$element
+ directionSelect.$element,
+ languageDirectionButton.$element
);
function loadPage( src ) {
@@ -60,31 +69,41 @@
} ).done( function ( pageHtml ) {
var target, container = $( '' );
- $targetContainer.slideUp();
- // The container must be attached to the DOM before
- // the target is initialised
- $targetContainer.append( container );
+ $targetContainer.slideUp().promise().done( function () {
+ // Container needs to be visually hidden, but
not display:none
+ // so that the toolbar can be measured
+ $targetContainer.empty().show().css( {
+ 'height': 0,
+ 'overflow': 'hidden'
+ } );
- target = new ve.init.sa.Target(
- container,
- ve.createDocumentFromHtml( pageHtml )
- );
+ $targetContainer.css( 'direction',
directionSelect.getSelectedItem().getData() );
- target.on( 'surfaceReady', function () {
- $targetContainer.promise().done( function () {
+ // The container must be attached to the DOM
before
+ // the target is initialised
+ $targetContainer.append( container );
+
+ $targetContainer.show();
+ target = new ve.init.sa.Target(
+ container,
+ ve.createDocumentFromHtml( pageHtml )
+ );
+
+ target.on( 'surfaceReady', function () {
+ // Container must be properly hidden
before slideDown animation
+ $targetContainer.removeAttr( 'style'
).hide();
+
if ( currentTarget ) {
currentTarget.destroy();
}
- $targetContainer
- .slideDown()
- .promise().done( function () {
-
target.$document[0].focus();
- currentTarget = targ
[MediaWiki-commits] [Gerrit] Add text direction to SA demo - change (VisualEditor/VisualEditor)
Esanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/117203
Change subject: Add text direction to SA demo
..
Add text direction to SA demo
Change-Id: Id23da34be26c0ce706cd418a32c078c8699935f7
---
M demos/ve/demo.css
M demos/ve/demo.js
2 files changed, 31 insertions(+), 21 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor
refs/changes/03/117203/1
diff --git a/demos/ve/demo.css b/demos/ve/demo.css
index 3379465..73b25f1 100644
--- a/demos/ve/demo.css
+++ b/demos/ve/demo.css
@@ -59,9 +59,10 @@
box-shadow: 0 0.25em 1.5em 0 #ddd;
}
-.ve-demo-utilities-commands .oo-ui-widget,
+.ve-demo-utilities-commands > .oo-ui-widget,
.ve-demo-utilities-commands-divider {
display: inline-block;
+ vertical-align: middle;
margin-right: 1em;
}
diff --git a/demos/ve/demo.js b/demos/ve/demo.js
index dc30068..358771d 100644
--- a/demos/ve/demo.js
+++ b/demos/ve/demo.js
@@ -31,9 +31,17 @@
dumpModelChangeToggle = new OO.ui.ToggleButtonWidget( {
'label': 'Dump model on change' } ),
validateButton = new OO.ui.ButtonWidget( { 'label': 'Validate
view and model' } ),
languageTextInput = new OO.ui.TextInputWidget( { 'value':
$.i18n().locale } ),
- languageButton = new OO.ui.ButtonWidget( { 'label': 'Set UI
language' } );
+ languageDirectionButton = new OO.ui.ButtonWidget( { 'label':
'Set language & direction' } ),
+ directionSelect = new OO.ui.ButtonSelectWidget().addItems( [
+ new OO.ui.ButtonOptionWidget( 'rtl', { '$': this.$,
'icon': 'text-dir-rtl' } ),
+ new OO.ui.ButtonOptionWidget( 'ltr', { '$': this.$,
'icon': 'text-dir-ltr' } )
+ ] );
// Initialization
+
+ directionSelect.selectItem(
+ directionSelect.getItemFromData( $targetContainer.css(
'direction' ) ) || 'ltr'
+ );
$( '.ve-demo-utilities-commands' ).append(
getRangeButton.$element,
@@ -49,7 +57,8 @@
validateButton.$element,
$( ' ' ),
languageTextInput.$element,
- languageButton.$element
+ directionSelect.$element,
+ languageDirectionButton.$element
);
function loadPage( src ) {
@@ -60,31 +69,31 @@
} ).done( function ( pageHtml ) {
var target, container = $( '' );
- $targetContainer.slideUp();
- // The container must be attached to the DOM before
- // the target is initialised
- $targetContainer.append( container );
+ $targetContainer.slideUp().promise().done( function () {
+ $targetContainer.css( 'direction',
directionSelect.getSelectedItem().getData() );
- target = new ve.init.sa.Target(
- container,
- ve.createDocumentFromHtml( pageHtml )
- );
+ // The container must be attached to the DOM
before
+ // the target is initialised
+ $targetContainer.append( container );
- target.on( 'surfaceReady', function () {
- $targetContainer.promise().done( function () {
- if ( currentTarget ) {
- currentTarget.destroy();
- }
- $targetContainer
- .slideDown()
- .promise().done( function () {
+ target = new ve.init.sa.Target(
+ container,
+ ve.createDocumentFromHtml( pageHtml )
+ );
+
+ target.on( 'surfaceReady', function () {
+ $targetContainer.promise().done(
function () {
+ if ( currentTarget ) {
+ currentTarget.destroy();
+ }
+
$targetContainer.slideDown().promise().done( function () {
target.$document[0].focus();
currentTarget = target;
getRangeChangeToggle.emit( 'click' );
dumpModelChangeToggle.emit( 'click' )
