マニュアル:CopyTextLayout

CopyTextLayout is a MediaWiki widget that features a button to copy the text provided. It is a OOUI based widget. It is a combination of OOUI's TextInputWidget and ButtonWidget.

JavaScript の例

MediaWiki 拡張機能に関して

Using the widget in MediaWiki Extension will be done through the 3 steps. First create the resource javascript file, Second register the js file in extension.json file. So that the module can load by ResourceLoader. And finally, load it by Output Context.

• Create the resource.js file in extension directory with following code.

var copyText = new mw.widgets.CopyTextLayout( {
        title: 'Copy the text', 
        copyText: 'Text to be copied'
    } );

$( '#bodyContent' ).append( copyText.$element );

• Register the js file as module in extension.json

"ResourceModules": {
    "ext.myExtResource": {
        "scripts": [
            "resource.js"
        ],
        "dependencies": [
            "mediawiki.widgets"
        ]
    }
}

• Finally load it by Output Context in your SpecialPage/ParserHook.

......
// 出力コンテキストを入手する
$out = $this->getOutput();
$out->addModules( 'ext.myExtResource' );
......

UserScriptに関して

To use the widget in UserScript is very easy, you just need to load the dependencie by mw.loader.using(). and put the code into the block. Try the below code in your Special:MyPage/common.js

mw.loader.using('mediawiki.widgets').then( function (){

	var copyText = new mw.widgets.CopyTextLayout( {
            title: 'Copy the text', 
            copyText: 'Text to be copied'
        } );

	$( '#bodyContent' ).append( copyText.$element );

});

ガジェットに関して

To use in gadgets, you have to add a mediawiki.widgets entry in the dependencies field of gadget description. See Gadgets' documentation for instructions and examples.

• So Add dependencies in MediaWiki:Gadgets-definition

* mygadget[ResourceLoader|dependencies=mediawiki.widgets]|mygadget.js

• コードでMediaWiki:Gadget-mygadget.jsページを作成します。 You does not need to use mw.loader.using() as we did in UserScript.

var copyText = new mw.widgets.CopyTextLayout( {
        title: 'Copy the text', 
        copyText: 'Text to be copied'
    } );

$( '#bodyContent' ).append( copyText.$element );

関連項目

• NamespaceInputWidget
• DateInputWidget