User:DannyS712/EFFPRH/sandbox.js: Difference between revisions

Revision as of 09:37, 21 May 2022

Latest revision as of 21:34, 18 January 2024

(10 intermediate revisions by the same user not shown)

Line 15:

EFFPRH.init = function () {

mw.loader.using(

[ 'vue', 'wvui@wikimedia/codex', 'mediawiki.util', 'mediawiki.api', 'es6-polyfills' ],

EFFPRH.run

);

Line 53:

border: 1px solid black;

margin: 10px 0 10px 0;

}

/* Use entire width of table column, ensure same size */

.wvui-dropdown,

.wvui-input {

width: 100%;

}

/* Override normal rules for indenting lists */

.wvuicdx-dropdownmenu ul {

margin-left: 0px;

}

/* Separate the dropdown and input */

.wvuicdx-dropdownmenu {

margin-bottom: 10px;

}

/* Reduce vertical space in the dropdown options */

.wvuicdx-optionsmenu-menu__itemitem__content {

line-height: 1em;

}

/* Allow the inptut to be inline */

.wvui-input {

display: inline-block;

}

/* Center form elements and labels */

.script-EFFPRH-handler td {

vertical-align: middle;

}

/* Don't use the grey background in the preview */

.script-EFFPRH-preview {

background-color: white;

}

`);

Line 124 ⟶ 119:

// Handler options, see {{EFFP}}

EFFPRH.responseOptions = [

{ idvalue: 'none', label: 'None' },

{ idvalue: 'done', label: 'Done (no change to filter)' },

{ idvalue: 'defm', label: 'Done (may need a change to filter)' },

{ idvalue: 'notdone', label: 'Not Done (filter working properly)' },

{ idvalue: 'ndefm', label: 'Not Done (may need a change to filter)' },

{ idvalue: 'redlink', label: 'Not Done (notable people)' },

{ idvalue: 'alreadydone', label: 'Already Done' },

{ idvalue: 'denied', label: 'Decline (edits are vandalism)' },

{ idvalue: 'checking', label: 'Checking' },

{ idvalue: 'blocked', label: 'User blocked' },

{ idvalue: 'talk', label: 'Request on article talk page' },

{ idvalue: 'fixed', label: 'Fixed filter' },

{ idvalue: 'question', label: 'Question' },

{ idvalue: 'note', label: 'Note' },

{ idvalue: 'private', label: 'Private filter' },

{ value: 'pin', label: 'Pin' },

{ value: 'moot', label: 'Moot (filter working properly)' },

{ value: 'mootefm', label: 'Moot (may need a change to filter)' }

];

Line 150 ⟶ 148:

// We shouldn't use the mw.loader access directly, but I'm not

// pasing around the `require` function everywhere

const wvuicdx = mw.loader.require( 'wvui@wikimedia/codex' );

// Extra component to render wikitext preview

const previewRenderer = EFFPRH.getPreviewComponent();

const handlerApp = {

components: {

WvuiButtonCdxButton: wvuicdx.WvuiButtonCdxButton,

CdxSelect: cdx.CdxSelect,

WvuiDropdown: wvui.WvuiDropdown,

CdxTextInput: cdx.CdxTextInput,

WvuiInput: wvui.WvuiInput,

CdxToggleButton: cdx.CdxToggleButton,

WvuiToggleButton: wvui.WvuiToggleButton,

previewRenderer: previewRenderer

},

Line 200 ⟶ 198:

},

methods: {

onCommentChange: function ( newComment ) {

this.commentValue = newComment;

},

onTogglePreview: function ( newPreviewState ) {

this.showPreview = newPreviewState;

},

reloadPage: function () {

// Needs to be a function instead of using href so that we

Line 246 ⟶ 238:

<tr>

<td><span>Action:</span></td>

<td><wvuicdx-dropdownselect v-model:selected="selectedResponse" :menu-items="responseOptions" defaultLabeldefault-label="Response to report" :disabled="haveSubmitted" /></td>

</tr>

<tr>

<td><span>Comment:</span></td>

<td><wvuicdx-text-input :value="commentValue" v-on:inputmodel="onCommentChangecommentValue" :disabled="haveSubmitted" /></td>

</tr>

</tbody></table>

Line 259 ⟶ 251:

<li v-show="editError">Uh-oh, something went wrong. Please check the console for details.</li>

</ul>

<wvuicdx-button typeweight="primary" action="progressive" :disabled="!canSubmit" v-on:click="submitHandler">Submit</wvuicdx-button>

<wvuicdx-button typeweight="primary" action="destructive" :disabled="haveSubmitted" v-on:click="cancelHandler">Cancel</wvuicdx-button>

<wvuicdx-toggle-button :isv-activemodel="showPreview" :disabled="!canSubmit" v-on:change="onTogglePreview">{{ previewToggleLabel }}</wvuicdx-toggle-button>

<!-- v-if so that we don't call the api to parse and render a preview when its not needed, do not render with no response template chosen -->

<preview-renderer v-if="showPreview && canSubmit" :wikitext="responseWikiText"></preview-renderer>

Line 277 ⟶ 269:

props: {

wikitext: { type: String, default: '' }

},

data: function () {

return {

previewHtml: '',

haveHtml: false

},;

},

methods: {

// Separate from the watcher so that can be called on mounted too

loadPreview: function ( wikitextToPreview ) {

new mw.Api().get( {

action: 'parse',

formatversion: 2,

title: mw.config.get( 'wgPageName' ),

text: wikitextToPreview,

prop: 'text|wikitext',

pst: true,

disablelimitreport: true,

disableeditsection: true,

sectionpreview: true

} ).then(

( res ) => {

console.log( res );

if ( res

&& res.parse

&& res.parse.wikitext === this.wikitext

&& res.parse.text

) {

this.previewHtml = res.parse.text;

this.haveHtml = true;

}

}

);

}

},

watch: {

onCommentChangewikitext: function ( newCommentnewValue ) {

// Reset when the wikitext to preview changes

this.previewHtml = '';

this.haveHtml = false;

this.loadPreview( newValue );

}

},

mounted: function () {

// Preview starting wikitext

this.loadPreview( this.wikitext );

},

template: `

<div class="script-EFFPRH-preview">

<div>

<hr>

Loading preview of {{ wikitext }}

<div v-if="haveHtml" v-html="previewHtml"></div>

<div v-else>Loading preview of {{ wikitext }}</div>

</div>`

};