Wikipedia

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

Browse history interactively
← Previous edit
Content deleted Content added
m remove comment placeholder, now that there is a label
es6-polyfills removed
 
(19 intermediate revisions by the same user not shown)
Line 7:
 
EFFPRH.config = {
debug: truefalse,
version: '0-dev'
};
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,
previewRenderer: previewRenderer
},
data: function () {
Line 164 ⟶ 166:
selectedResponse: 'none',
commentValue: '',
// Don't try and link to the specific section, otherwise it just navigates
// directly instead of reloading
reloadUrl: mw.util.getUrl( mw.config.get( 'wgPageName' ) ),
 
// Debug information of the state
showDebug: EFFPRH.config.debug,
 
// Preview
showPreview: false,
 
// Overall state
Line 180 ⟶ 182:
canSubmit: function () {
return !this.haveSubmitted && this.selectedResponse !== 'none';
},
previewToggleLabel: function () {
return ( this.showPreview ? 'Hide preview' : 'Show preview' );
},
responseWikiText: function () {
// Computed here so that we can use it for the api preview,
// does not include the leading newline
let responseText = ': {{EFFP|' + this.selectedResponse + '}}';
if ( this.commentValue ) {
responseText += ' ' + this.commentValue;
}
responseText += ' --~~~~';
return responseText;
}
},
methods: {
onCommentChangereloadPage: function ( newComment ) {
// Needs to be a function instead of using href so that we
this.commentValue = newComment;
// can force the page to reload
___location.assign(
mw.util.getUrl( mw.config.get( 'wgPageName' ) + '#' + this.reporterName )
);
___location.reload();
},
submitHandler: function () {
Line 191 ⟶ 211:
this.reporterName,
this.sectionNum,
this.selectedResponse,responseWikiText
this.commentValue
).then(
// arrow functions to simplify `this`
Line 219 ⟶ 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 229 ⟶ 248:
<ul v-show="haveSubmitted">
<li>Submitting...</li>
<li v-show="editMade">Success! <a v-on:hrefclick="reloadUrlreloadPage"><strong>Reload the page</strong></a></li>
<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>
<cdx-toggle-button v-model="showPreview" :disabled="!canSubmit">{{ previewToggleLabel }}</cdx-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>
</div>`
};
vueAppInstance = Vue.createMwApp( handlerApp );
vueAppInstance.mount( '#' + targetDivId );
};
 
/**
* Extra component: preview of wikitext being added.
*/
EFFPRH.getPreviewComponent = function () {
return {
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: {
wikitext: function ( newValue ) {
// 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">
<hr>
<div v-if="haveHtml" v-html="previewHtml"></div>
<div v-else>Loading preview of {{ wikitext }}</div>
</div>`
};
};
 
Line 247 ⟶ 332:
reporterName,
sectionNum,
responseWikiText
responseOption,
extraComment
) {
return new Promise( function ( resolve, reject ) {
// wikitext is computed in Vue app so that it can have a preview too,
let responseText = '\n: {{EFFP|' + responseOption + '}}';
// we just need to add the leading newline
if ( extraComment ) {
responseTextconst wikitextToAdd += ' \n' + extraCommentresponseWikiText;
}
responseText += ' --~~~~';
const editParams = {
action: 'edit',
Line 264 ⟶ 346:
baserevid: mw.config.get( 'wgCurRevisionId' ),
nocreate: true,
appendtext: responseTextwikitextToAdd,
assert: 'user',
assertuser: mw.config.get( 'wgUserName' )
Retrieved from "https://en.wikipedia.org/wiki/User:DannyS712/EFFPRH/sandbox.js"