Werdna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/191879
Change subject: New layout for LSG
......................................................................
New layout for LSG
* Hide code by default, and move the code display selector
to display on each element rather than once at the top of the page.
* Put demo and code together, layout is thus up to the wiki in question.
Change-Id: I0778c443b276a2c98264346511adb3aa57a4e724
---
M i18n/en.json
M includes/ParserHooks.php
M resources/Resources.php
M resources/display.js
M resources/display.less
A resources/interactive.less
6 files changed, 32 insertions(+), 31 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/OOUIPlayground
refs/changes/79/191879/1
diff --git a/i18n/en.json b/i18n/en.json
index 86b239f..c6ed97c 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -5,5 +5,6 @@
"ooui-playground-language-php" : "PHP",
"ooui-playground-language-javascript" : "JavaScript",
"ooui-playground-error-no-type" : "You must specify a type",
- "ooui-playground-error-bad-type" : "There is no type called '$1'"
-}
\ No newline at end of file
+ "ooui-playground-error-bad-type" : "There is no type called '$1'",
+ "ooui-playground-select-language" : "Show code:"
+}
diff --git a/includes/ParserHooks.php b/includes/ParserHooks.php
index 8bf03d9..b81eb25 100755
--- a/includes/ParserHooks.php
+++ b/includes/ParserHooks.php
@@ -157,13 +157,14 @@
$code = $codeRenderer->render( $class, $args );
- return $code .
+ return
Html::rawElement(
'div',
array(
'class' => 'ooui-playground-widget'
),
- $output );
+ $output ) .
+ $code;
}
/**
diff --git a/resources/Resources.php b/resources/Resources.php
index 25b7327..31f2c34 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -8,10 +8,12 @@
$wgResourceModules['ext.ooui-playground'] = array(
'scripts' => array( 'display.js', 'defer.js' ),
+ 'styles' => 'interactive.less',
'dependencies' => array( 'oojs-ui' ),
'messages' => array(
"ooui-playground-language-php",
"ooui-playground-language-javascript",
+ 'ooui-playground-select-language',
),
) + $oouiPlaygroundResourceTemplate;
diff --git a/resources/display.js b/resources/display.js
index 89b5050..f7ddbcc 100644
--- a/resources/display.js
+++ b/resources/display.js
@@ -2,17 +2,20 @@
(function( $, mw, OO ) {
$( function() {
var $codeGroups = $( '.ooui-playground-code-group' );
- if ( $codeGroups.length ) {
+ $codeGroups.each( function() {
var $selector = $( '<div/>' )
.addClass( 'ooui-playground-language-selector'
),
options = [],
- selector;
+ selector,
+ $codeGroup = $( this );
// XXX: Hardcoded
$.each( ['javascript', 'php'], function( i, language ) {
options.push( new OO.ui.ButtonOptionWidget( {
data : language,
- label : mw.msg( 'ooui-playground-language-' +
language )
+ label : mw.msg( 'ooui-playground-language-' +
language ),
+ framed : false,
+ flags : ["quiet"]
} ) );
} );
@@ -20,17 +23,17 @@
'items' : options
} );
- $selector.append( selector.$element );
- $selector.prependTo( $( '#mw-content-text' ) );
+ $selector
+ .text( mw.msg( 'ooui-playground-select-language' ) )
+ .append( selector.$element )
+ .prependTo( $codeGroup );
selector.on( 'select', function( item ) {
var selectedLanguage = item.getData();
- $( '.ooui-playground-code' ).hide();
- $( '.ooui-playground-code-' + selectedLanguage ).show();
+ $codeGroup.children( '.ooui-playground-code' ).hide();
+ $codeGroup.children( '.ooui-playground-code-' +
selectedLanguage ).show();
} );
-
- selector.selectItem( options[0] );
- }
+ } );
} );
})( jQuery, mediaWiki, OO );
diff --git a/resources/display.less b/resources/display.less
index 88c3fd2..66eeb90 100644
--- a/resources/display.less
+++ b/resources/display.less
@@ -1,22 +1,13 @@
.ooui-playground-demo {
- display: flex;
- justify-content: space-between;
- width: 100%;
margin-bottom: 1.5em;
+}
- .ooui-playground-code-group {
- align-self: flex-end;
- display: flex;
- flex: 1.5;
- }
+.ooui-playground-widget {
+ border: 1px solid #ccc;
+ display: inline-block;
+ padding: 0.25em;
+}
- .ooui-playground-code {
- flex: 1;
- margin-right: 1em;
- overflow: auto;
- }
-
- .ooui-playground-widget {
- flex: 1;
- }
+.ooui-playground-language-selector {
+ font-size: 80%;
}
diff --git a/resources/interactive.less b/resources/interactive.less
new file mode 100644
index 0000000..fcd1c93
--- /dev/null
+++ b/resources/interactive.less
@@ -0,0 +1,3 @@
+.ooui-playground-code {
+ transition: 1s top;
+}
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/191879
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0778c443b276a2c98264346511adb3aa57a4e724
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/OOUIPlayground
Gerrit-Branch: master
Gerrit-Owner: Werdna <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
