Manual: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 examples

In MediaWiki Extension

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.

......
// Get Output Context
$out = $this->getOutput();
$out->addModules( 'ext.myExtResource' );
......

In 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 );

});

In Gadget

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

• Create MediaWiki:Gadget-mygadget.js page with code. 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 );

See also

• NamespaceInputWidget
• DateInputWidget