Content deleted Content added
m createMwApp, function names |
buttons to submit and cancel, styles |
||
Line 15:
EFFPRH.run = function () {
console.log( 'EFFPRH - running' );
EFFPRH.addStyle();
// Add links to each section to open a dialog
$('span.mw-headline').each( function () {
Line 35 ⟶ 36:
EFFPRH.addHandlerLink( $editSectionLinks, reporterName, sectionNum );
} );
};
/**
* Add styles for our interface.
*/
EFFPRH.addStyle = function () {
mw.util.addCSS(`
.script-EFFPRH-handler {
background-color: #d6d6d6;
border: 1px solid black;
margin: 10px 0 10px 0;
}
`);
};
Line 59 ⟶ 73:
console.log( reporterName, sectionNum );
const $handlerLink = $( '<a>' )
.attr( 'id', 'script-EFFPRH-launch-' + sectionNum )
.text( 'Review report' );
$handlerLink.click(
function () {
// Only allow running once per link (until the Vue handler is removed)
if ( $( this ).hasClass( 'script-EFFPRH-disabled' ) ) {
return;
}
$( this ).addClass( 'script-EFFPRH-disabled' );
console.log( 'Should launch for: ', reporterName, sectionNum );
EFFPRH.showHandler( reporterName, sectionNum );
Line 78 ⟶ 98:
EFFPRH.showHandler = function ( reporterName, sectionNum ) {
const targetDivId = 'script-EFFPRH-' + sectionNum;
// Need a reference so that it can be unmounted
let vueAppInstance;
const handlerApp = {
components: {
WvuiButton: require( 'wvui' ).WvuiButton
},
data: function () {
return {
Line 85 ⟶ 110:
};
},
methods: {
template: `<div>Section {{ sectionNum }} for report by {{ reporterName }}.</div>`▼
submitHandler: function () {
console.log( 'Should submit!' );
},
cancelHandler: function () {
if ( vueAppInstance === undefined ) {
console.log( 'Cannot unmount, no vueAppInstance' );
} else {
vueAppInstance.unmount();
// Restore link
$( '#script-EPPFRH-launch-' + sectionNum ).removeClass(
'script-EFFPRH-disabled'
);
}
}
},
template: `
<div class="script-EFFPRH-handler">
<wvui-button action="primary" type="progressive" v-on:click="submitHandler">Submit</wvui-button>
<wvui-button action="primary" type="destructive" v-on:click="cancelHandler">Cancel</wvui-button>
</div>`
};
vueAppInstance = Vue.createMwApp( handlerApp );
vueAppInstance.mount( '#' + targetDivId ); };
| |||