$(document).ready(function () {
// It is important to make sure that OOUI is loaded before we can make use of it.
mw.loader.using("oojs-ui").done(function () {
var EditWizard = function (config) {
config = config || {};
EditWizard.parent.call(this, config);
// These are the layout OOUI elements for the form
(this.fieldset = new OO.ui.FieldsetLayout({
classes: ["heading"],
label: "EDIT WIZARD",
})),
(this.dropdownheading = new OO.ui.LabelWidget({
label: "TYPE OF SOURCE",
})),
(this.typehelp = new OO.ui.PopupButtonWidget( {
icon: 'info',
framed: false,
label: 'More information',
invisibleLabel: true,
popup: {
head: true,
icon: 'infoFilled',
label: 'More information',
$content: $( '<p>This is the type of source.\u200e</p>' ),
padded: true,
align: 'center'
}
})),
(this.dropdown = new OO.ui.DropdownWidget({
label: "Select one",
classes: ["box"],
$overlay: true,
menu: {
items: [
new OO.ui.MenuOptionWidget({
data: "a",
label: "URL",
}),
new OO.ui.MenuOptionWidget({
data: "b",
label: "ISBN",
}),
],
},
})),
(this.linkheading = new OO.ui.LabelWidget({
label: "LINK TO THE URL/ISBN",
})),
(this.linkhelp = new OO.ui.PopupButtonWidget( {
icon: 'info',
framed: false,
label: 'More information',
invisibleLabel: true,
popup: {
head: true,
icon: 'infoFilled',
label: 'More information',
$content: $( '<p>This is the link of the source from where you want to quote the change.\u200e</p>' ),
padded: true,
align: 'center'
}
})),
(this.linkinput = new OO.ui.TextInputWidget({
placeholder: "Enter the URL/ISBN",
classes: ["box"],
help: "Lorem ipsum dolor sit amet, consecte",
})),
(this.linkstatus = new OO.ui.MessageWidget({
inline: true,
showClose: true,
label: "Type the quote above",
})),
(this.tagsheading = new OO.ui.LabelWidget({
label: "ADD RELEVANT TAGS",
})),
(this.tagshelp = new OO.ui.PopupButtonWidget( {
icon: 'info',
framed: false,
label: 'More information',
invisibleLabel: true,
popup: {
head: true,
icon: 'infoFilled',
label: 'More information',
$content: $( '<p>Add relevant tags related to your edit.\u200e</p>' ),
padded: true,
align: 'center'
}
})),
(this.tags1 = new OO.ui.MenuTagMultiselectWidget({
classes: ["box"],
options: [
{
data: "foo",
label: "Grammer",
icon: "tag",
},
{
data: "bar",
label: "Text Update",
icon: "tag",
},
],
})),
(this.quoteheading = new OO.ui.LabelWidget({
label: "ENTER THE QUOTE",
})),
(this.quotehelp = new OO.ui.PopupButtonWidget( {
icon: 'info',
framed: false,
label: 'More information',
invisibleLabel: true,
popup: {
head: true,
icon: 'infoFilled',
label: 'More information',
$content: $( '<p>Type the quote text from the above mentioned source you want to edit.\u200e</p>' ),
padded: true,
align: 'center'
}
})),
(this.quoteinput = new OO.ui.MultilineTextInputWidget({
autosize: true,
classes: ["box"],
rows: 3,
placeholder: "Enter the Quote from the source",
})),
(this.status = new OO.ui.MessageWidget({
inline: true,
showClose: true,
label: "Type the quote above"
})),
(this.button = new OO.ui.ButtonWidget({
label: "VERIFY",
flags: ["primary", "progressive"],
}));
// this.input.connect( this, { enter: 'onBtnClick' } );
this.button.connect(this, { click: "onBtnClick" });
//This is to append the elements in the popup widget and also provide respective CSS
this.$element
.append(
this.fieldset.$element.css( {
font: '25px Lucida Sans',
'text-align': 'center',
'margin':'10px',
width: '85%',
} ),
this.dropdownheading.$element.css({
display: 'inline',
font: '16px Lucida Sans',
'margin':'5px',
width: '96%',
}),
this.typehelp.$element.css({
font: '13px cursive',
'font-style': 'italic',
}),
this.dropdown.$element.css({
font: '13px sans-serif',
'margin':'5px',
width: '96%',
}),
this.linkheading.$element.css({
display: 'inline',
font: '16px Lucida Sans',
'margin':'5px',
'margin-top': '6px',
width: '96%',
}),
this.linkhelp.$element.css({
font: '13px cursive',
'font-style': 'italic',
}),
this.linkinput.$element.css({
font: '13px sans-serif',
'margin':'5px',
width: '96%',
height: '30%',
}),
this.linkstatus.$element.css({
font: "13px sans-serif",
margin: "5px",
width: "70%",
"font-style": "italic",
}),
this.linkstatus.$element.hide(),
this.tagsheading.$element.css({
font: '16px Lucida Sans',
'margin':'5px',
}),
this.tagshelp.$element.css({
font: '13px cursive',
'font-style': 'italic',
}),
this.tags1.$element.css({
font: '13px sans-serif',
'margin':'5px',
width: '96%',
}),
this.quoteheading.$element.css({
display: 'inline',
font: '16px Lucida Sans',
'margin':'5px',
}),
this.quotehelp.$element.css({
font: '13px cursive',
'font-style': 'italic',
}),
this.quoteinput.$element.css({
font: '13px sans-serif',
'margin':'5px',
width: '96%',
}),
this.status.$element.css({
font: '13px sans-serif',
'margin':'5px',
width: '96%',
'font-style': 'italic',
}),
this.status.$element.hide(),
this.button.$element.css({
font: '13px sans-serif',
'text-align': 'center',
'margin-top': '20px',
'margin-bottom': '20px',
'margin-left': '40%',
})
)
.addClass("editwizard");
};
OO.inheritClass(EditWizard, OO.ui.Widget);
// Defines the behaviour of the widget on pressing enter or clicking the submit
// Button
EditWizard.prototype.onBtnClick = function () {
var t;
const linkValue = this.linkinput.getValue();
const quoteValue = this.quoteinput.getValue();
console.log(typeof linkValue);
//Checks if quote text is from the same provided link
$.ajax({
url: linkValue,
async: false,
success: function (result) {
t = result.includes(quoteValue);
},
});
if (t) {
this.status.$element.show();
this.status.setType("success");
this.status.setLabel("Verified!");
}
else {
this.status.$element.show();
this.status.setType("error");
this.status.setLabel("The quote does not match");
}
if (quoteValue === "") {
this.status.setType("warning");
this.status.setLabel("The input cannot be left empty");
}
//for link status
if (linkValue === "") {
this.linkstatus.$element.show();
this.linkstatus.setType("warning");
this.linkstatus.setLabel("The input cannot be left empty");
}
const url = new URL(linkValue)
const acceptedOrigins = ['.gov'];
const nonacceptedOrigins = ['twitter.com', 'facebook.com'];
if (acceptedOrigins.some(origin => url.origin.includes(origin))) {
this.linkstatus.$element.show();
this.linkstatus.setType("success");
this.linkstatus.setLabel("Verified!");
}
else if(nonacceptedOrigins.some(origin => url.origin.endsWith(origin)) || linkValue.includes('www.google.com/search?')){
this.linkstatus.$element.show();
this.linkstatus.setType("warning");
this.linkstatus.setLabel("The link might not be a valid source");
}
// else{
// this.linkstatus.$element.show();
// this.linkstatus.setType("warning");
// this.linkstatus.setLabel("The link might not be a valid source");
// }
};
// Creates a new custom widget object
const editwizard = new EditWizard();
// A popup button widget is instantiated which wraps inside it the custom widget
// That we created above.
const popUp = new OO.ui.PopupButtonWidget({
label: "EDIT WIZARD",
popup: false,
align: 'force-right',
popup: {
$content: editwizard.$element,
padded: true,
width: 600,
height: 540,
position: "after",
head: true,
autoClose: false,
hideCloseButton: false,
},
});
// Appends the popup button widget to the left section of the wiki page
$("#p-navigation").append(popUp.$element);
});
});
