OOUI Playground

.gitmodules

[submodule "lib/oojs-ui"]
	path = lib/oojs-ui
	url = ssh://gerrit.wikimedia.org:29418/oojs/ui.git

README.md

This is a draft MediaWiki extension that allows you to use OOJS-UI widgets in wiki pages.

It's intended to be used to generate a living style guide for MediaWiki.

classMap.php

<?php

return array (
	'buttongroup' => 'OOUI\\ButtonGroupWidget',
	'buttoninput' => 'OOUI\\ButtonInputWidget',
	'button' => 'OOUI\\ButtonWidget',
	'checkboxinput' => 'OOUI\\CheckboxInputWidget',
	'icon' => 'OOUI\\IconWidget',
	'indicator' => 'OOUI\\IndicatorWidget',
	'input' => 'OOUI\\InputWidget',
	'label' => 'OOUI\\LabelWidget',
	'radioinput' => 'OOUI\\RadioInputWidget',
	'textinput' => 'OOUI\\TextInputWidget',
);

extractClassmap.php

<?php

$classes = array_keys( array(
	'OOUI\\ButtonElement' => __DIR__ . '/lib/oojs-ui/php/elements/ButtonElement.php',
	'OOUI\\ButtonGroupWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/ButtonGroupWidget.php',
	'OOUI\\ButtonInputWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/ButtonInputWidget.php',
	'OOUI\\ButtonWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/ButtonWidget.php',
	'OOUI\\CheckboxInputWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/CheckboxInputWidget.php',
	'OOUI\\Element' => __DIR__ . '/lib/oojs-ui/php/Element.php',
	'OOUI\\ElementMixin' => __DIR__ . '/lib/oojs-ui/php/ElementMixin.php',
	'OOUI\\Exception' => __DIR__ . '/lib/oojs-ui/php/Exception.php',
	'OOUI\\FieldLayout' => __DIR__ . '/lib/oojs-ui/php/layouts/FieldLayout.php',
	'OOUI\\FieldsetLayout' => __DIR__ . '/lib/oojs-ui/php/layouts/FieldsetLayout.php',
	'OOUI\\FlaggedElement' => __DIR__ . '/lib/oojs-ui/php/elements/FlaggedElement.php',
	'OOUI\\FormLayout' => __DIR__ . '/lib/oojs-ui/php/layouts/FormLayout.php',
	'OOUI\\GridLayout' => __DIR__ . '/lib/oojs-ui/php/layouts/GridLayout.php',
	'OOUI\\GroupElement' => __DIR__ . '/lib/oojs-ui/php/elements/GroupElement.php',
	'OOUI\\HtmlSnippet' => __DIR__ . '/lib/oojs-ui/php/HtmlSnippet.php',
	'OOUI\\IconElement' => __DIR__ . '/lib/oojs-ui/php/elements/IconElement.php',
	'OOUI\\IconWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/IconWidget.php',
	'OOUI\\IndicatorElement' => __DIR__ . '/lib/oojs-ui/php/elements/IndicatorElement.php',
	'OOUI\\IndicatorWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/IndicatorWidget.php',
	'OOUI\\InputWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/InputWidget.php',
	'OOUI\\LabelElement' => __DIR__ . '/lib/oojs-ui/php/elements/LabelElement.php',
	'OOUI\\LabelWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/LabelWidget.php',
	'OOUI\\Layout' => __DIR__ . '/lib/oojs-ui/php/Layout.php',
	'OOUI\\MediaWikiTheme' => __DIR__ . '/lib/oojs-ui/php/themes/MediaWikiTheme.php',
	'OOUI\\PanelLayout' => __DIR__ . '/lib/oojs-ui/php/layouts/PanelLayout.php',
	'OOUI\\RadioInputWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/RadioInputWidget.php',
	'OOUI\\Tag' => __DIR__ . '/lib/oojs-ui/php/Tag.php',
	'OOUI\\TextInputWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/TextInputWidget.php',
	'OOUI\\Theme' => __DIR__ . '/lib/oojs-ui/php/Theme.php',
	'OOUI\\TitledElement' => __DIR__ . '/lib/oojs-ui/php/elements/TitledElement.php',
	'OOUI\\Widget' => __DIR__ . '/lib/oojs-ui/php/Widget.php',
) );

$output = array();

foreach( $classes as $class ) {
	list( $throwaway, $className ) = explode( '\\', $class, 2 );
	$suffix = 'Widget';

	if ( substr( $className, 0 - strlen( $suffix ) ) === $suffix && $className !== $suffix ) {
		$type = strtolower( substr( $className, 0, 0 - strlen( $suffix ) ) );
		$output[$type] = $class;
	}
}

print var_export( $output, true ) . "\n";

generateOOUIAutoload.php

<?php

require_once __DIR__ . '/../../includes/utils/AutoloadGenerator.php';

function main() {
	$base = __DIR__;
	$generator = new AutoloadGenerator( $base );
	foreach ( array( 'lib/oojs-ui/php' ) as $dir ) {
		$generator->readDir( $base . '/' . $dir );
	}

	$generator->generateAutoload( basename( __FILE__ ) );

	echo "Done.\n\n";
}

main();

ooui-autoload.php

<?php
// This file is generated by generateOOUIAutoload.php, do not adjust manually

global $wgAutoloadClasses;

$wgAutoloadClasses += array(
	'OOUI\\ButtonElement' => __DIR__ . '/lib/oojs-ui/php/elements/ButtonElement.php',
	'OOUI\\ButtonGroupWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/ButtonGroupWidget.php',
	'OOUI\\ButtonInputWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/ButtonInputWidget.php',
	'OOUI\\ButtonWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/ButtonWidget.php',
	'OOUI\\CheckboxInputWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/CheckboxInputWidget.php',
	'OOUI\\Element' => __DIR__ . '/lib/oojs-ui/php/Element.php',
	'OOUI\\ElementMixin' => __DIR__ . '/lib/oojs-ui/php/ElementMixin.php',
	'OOUI\\Exception' => __DIR__ . '/lib/oojs-ui/php/Exception.php',
	'OOUI\\FieldLayout' => __DIR__ . '/lib/oojs-ui/php/layouts/FieldLayout.php',
	'OOUI\\FieldsetLayout' => __DIR__ . '/lib/oojs-ui/php/layouts/FieldsetLayout.php',
	'OOUI\\FlaggedElement' => __DIR__ . '/lib/oojs-ui/php/elements/FlaggedElement.php',
	'OOUI\\FormLayout' => __DIR__ . '/lib/oojs-ui/php/layouts/FormLayout.php',
	'OOUI\\GridLayout' => __DIR__ . '/lib/oojs-ui/php/layouts/GridLayout.php',
	'OOUI\\GroupElement' => __DIR__ . '/lib/oojs-ui/php/elements/GroupElement.php',
	'OOUI\\HtmlSnippet' => __DIR__ . '/lib/oojs-ui/php/HtmlSnippet.php',
	'OOUI\\IconElement' => __DIR__ . '/lib/oojs-ui/php/elements/IconElement.php',
	'OOUI\\IconWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/IconWidget.php',
	'OOUI\\IndicatorElement' => __DIR__ . '/lib/oojs-ui/php/elements/IndicatorElement.php',
	'OOUI\\IndicatorWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/IndicatorWidget.php',
	'OOUI\\InputWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/InputWidget.php',
	'OOUI\\LabelElement' => __DIR__ . '/lib/oojs-ui/php/elements/LabelElement.php',
	'OOUI\\LabelWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/LabelWidget.php',
	'OOUI\\Layout' => __DIR__ . '/lib/oojs-ui/php/Layout.php',
	'OOUI\\MediaWikiTheme' => __DIR__ . '/lib/oojs-ui/php/themes/MediaWikiTheme.php',
	'OOUI\\PanelLayout' => __DIR__ . '/lib/oojs-ui/php/layouts/PanelLayout.php',
	'OOUI\\RadioInputWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/RadioInputWidget.php',
	'OOUI\\Tag' => __DIR__ . '/lib/oojs-ui/php/Tag.php',
	'OOUI\\TextInputWidget' => __DIR__ . '/lib/oojs-ui/php/widgets/TextInputWidget.php',
	'OOUI\\Theme' => __DIR__ . '/lib/oojs-ui/php/Theme.php',
	'OOUI\\TitledElement' => __DIR__ . '/lib/oojs-ui/php/elements/TitledElement.php',
	'OOUI\\Widget' => __DIR__ . '/lib/oojs-ui/php/Widget.php',
);

OOUIPlayground.body.php

<?php

class OOUIPlayground {
	protected static $classMap = null;

	static function setupParser( Parser $parser ) {
		$parser->setHook( 'ooui-demo', array( __CLASS__, 'renderDemo' ) );

		return true;
	}

	static function getClassMap() {
		if ( self::$classMap === null ) {
			self::$classMap = require __DIR__ . '/classMap.php';
		}

		return self::$classMap;
	}

	static function setupOOUI() {
		static $setupDone = false;

		if ( ! $setupDone ) {
			OOUI\Theme::setSingleton( new OOUI\MediaWikiTheme );
		}
	}

	static function renderDemo( $input, array $args, Parser $parser, PPFrame $frame ) {
		self::setupOOUI();
		$classMap = self::getClassMap();
		$parser->getOutput()->addModules( array( 'oojs-ui' ) );

		if ( ! isset( $args['type'] ) ) {
			return Html::element( 'span', array( 'class' => 'error' ), 'You must specify a type.' );
		}

		$type =  strtolower( $args['type'] );
		if ( ! isset( $classMap[$type] ) ) {
			return Html::element(
				'span',
				array( 'class' => 'error' ),
				'There is no OOUI widget called ' . $type . '.'
			);
		}

		$class = $classMap[$type];

		// Prepare config
		unset( $args['type'] );
		if ( trim( $input ) !== '' ) {
			$args['content'] = $input;
		}

		$obj = new $class( $args );

		return $obj->toString();
	}
}

OOUIPlayground.php

<?php
/**
 * MediaWiki Extension: OOUIPlayground
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * This program is distributed WITHOUT ANY WARRANTY.
 */

/**
 *
 * @file
 * @ingroup Extensions
 * @author Andrew Garrett
 */

if ( !defined( 'MEDIAWIKI' ) ) {
	echo <<<EOT
To install this extension, put the following line in LocalSettings.php:
require_once( "$IP/extensions/OOUIPlayground/OOUIPlayground.php" );
EOT;
	exit( 1 );
}

// Extension credits that will show up on Special:Version
$wgExtensionCredits['specialpage'][] = array(
	'path' => __FILE__,
	'name' => 'OOUIPlayground',
	'url' => 'https://www.mediawiki.org/wiki/Design/Living_style_guide',
	'author' => array(
		'Andrew Garrett',
	),
	'descriptionmsg' => 'oouiplayground-desc',
);

$dir = dirname( __FILE__ );

require_once __DIR__ . "/ooui-autoload.php";

$wgAutoloadClasses['OOUIPlayground'] = "{$dir}/OOUIPlayground.body.php";

$wgHooks['ParserFirstCallInit'][] = 'OOUIPlayground::setupParser';