MediaWiki talk:Common.js

From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
Revision as of 21:55, September 21, 2022 by Notjusttired (talk | contribs) (→‎ReplaceText toolbar button (on hold):update)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)


New requests[edit source | reply | new]

ReplaceText toolbar button (on hold)[edit source | reply | new]

For the ReplaceText toolbar button gadget to work, the following code needs to be added at the end of MediaWiki:Common.js:


// Replace Text visual editor toolbar button gadget, from https://en.wikipedia.org/wiki/User:%D7%A2%D7%A8%D7%9F/veReplace copied to [[MediaWiki:Gadget-veReplace.js]]

//translate the following:
mw.messages.set({
	've-SearchAndReplaceDialog-title': 'Search and replace',
	've-SearchAndReplaceDialog-from-label': 'From:',
	've-SearchAndReplaceDialog-to-label': 'To:',
	've-SearchAndReplaceDialog-from-placeholder': 'From text',
	've-SearchAndReplaceDialog-to-placeholder': 'To text',
	've-SearchAndReplaceDialog-replaceAll': 'Replace all',
	've-SearchAndReplaceDialog-replace': 'Replace',
	've-SearchAndReplaceDialog-matchcase': 'Match case',
	've-SearchAndReplaceDialog-replace-complete': 'Found and replaced $1 occurrences',
	've-ReplaceTool-ToolbarButton': 'Replace'
});
//end of translations
mw.loader.using( 'ext.visualEditor.desktopArticleTarget.init', function(){
	mw.libs.ve.addPlugin( function() { 
		return $.getScript('https://me-pedia.org/w/index.php?title=MediaWiki:Gadget-veReplace.js&action=raw&ctype=text/javascript'); 
	} );
});
// End Replace text gadget 

On hold:

Please do not do this task yet. The following must be done first:

  • Establish if the source editor error involving replacing links with "-en" text is caused by this script
  • test note that the external link to WO has been replaced with the MEpedia version
  • MW upgrade (currently in progress)
  • Notify all via Slack

Thank you ~Njt (talk) 21:48, September 21, 2022 (UTC)

Done[edit source | reply | new]

Category banner layout[edit source | reply | new]

This isn't great on small screens - I think because there is a fixed "20px" size of padding before and after. On small screens the headings wrap over 2 lines, and this creates a blank line before AND after the banner - and does not shrink or enlarge it as the screen changes. I think this might be the issue that User:Aletheia2020 pointed out with the category banner size (also affecting Medical hypotheses and Potential treatments banners). As far as I can see, this is in 6 places (twice per banner, because Pivot needs separate code). Giving an id to each banner would also help any further customizations if we decide on them in future. This might be very handy for the darker Timeless skin since the font color in the banner is a bit dark. Suggested new code below. I have added an id and replaced 20px with 1.25rem (which I hope is about the same on desktops - may need tweaking - I think it's usually 16px equal to 1rem on desktops, hence 1.25rem). We can look at shrinking it further on small screens only later on, possibly in MediaWiki:Common.css. The id bit is id="category-banner" . User:Pyrrhus can you check this and do the changes if it seems ok? See the top of my personal Pivot.css for my code for small screens. As usual, please copy the source code version without the nowiki. I think I have forgotten how to make the source code look better in the talk pages. ~Njt (talk) 16:28, February 22, 2020 (EST)

Second change: fix the color of the text links on the banner since they will always be contrasting against the same background, timeless uses a very dark blue which is not so good. I suggest sticking with the vector shade of blue #0A45AD instead. I have added a color to the href links below for this inside the a href tag. ~Njt (talk) 16:21, February 23, 2020 (EST)
Now done as part of Sep 2020 request ~Njt (talk) 23:31, October 1, 2020 (UTC)

Sep 2020 request[edit source | reply | new]

User:Kmdenmark Can you replace the code for the color categories with the code below? It stops just before the line saying
// Disable default license
If you use "show changes" before saving you should see just a few differences in some lines and no lines added or removed. As usual, just ignore the "pre" tags. ~Njt (talk) 16:53, September 11, 2020 (UTC)

Code...

//Set color to specific categories

//For Medical hypotheses category
if (mw.config.get('wgCategories').includes ("Medical hypotheses")){
     //$(".mw-body-content").css ("background-color","#dae6ff");
     //$(".toc").css ("background-color","#dae6ff");
     $(".firstHeading").prepend ('<div id="category-banner" style = "margin:auto;padding: 1.25rem;width:100%;text-align:center;background-color:#00ccec; color:#333; text-shadow: none;">This is a <a style="color:#0A45AD;" href = "/wiki/Category:Medical_hypotheses">Medical hypothesis</a> page</div>');

// pivot fix
     $("h1.title").prepend ('<div id="category-banner" style = "margin:auto;padding:1.25rem;width:100%;text-align:center;background-color:#00ccec; color:#333; text-shadow: none;">This is a <a style="color:#0A45AD;" href = "/wiki/Category:Medical_hypotheses">Medical hypothesis</a> page</div>');
}

//For Potential treatments category
if (mw.config.get('wgCategories').includes ("Potential treatments")){
     //$(".mw-body-content").css ("background-color","#f8d6c2");
     //$(".toc").css ("background-color","#f8d6c2");
     $(".firstHeading").prepend ('<div id="category-banner" style = "margin:auto;padding: 1.25rem;width:100%;text-align:center;background-color:#00ee54; color:#333; text-shadow: none;">This is a <a style="color:#0A45AD;" href = "/wiki/Category:Potential_treatments">Potential treatments</a> page</div>');

// pivot fix
$("h1.title").prepend ('<div id="category-banner" style = "margin:auto;padding: 1.25rem;width:100%;text-align:center;background-color:#00ee54; color:#333; text-shadow: none;">This is a <a style="color:#0A45AD;" href = "/wiki/Category:Potential_treatments">Potential treatments</a> page</div>');
}

//For Potential comorbidities category
if (mw.config.get('wgCategories').includes ("Potential comorbidities")){
     //$(".mw-body-content").css ("background-color","#f8d6c2");
     //$(".toc").css ("background-color","#f8d6c2");
     $(".firstHeading").prepend ('<div id="category-banner" style = "margin:auto;padding: 1.25rem;width:100%;text-align:center;background-color:#00ee54; color:#333; text-shadow: none;">This is a <a style="color:#0A45AD;" href = "/wiki/Category:Potential_comorbidities">Potential comorbidities</a> page</div>');

// pivot fix
$("h1.title").prepend ('<div id="category-banner" style = "margin:auto;padding:1.25rem;width:100%;text-align:center;background-color:#00ee54; color:#333; text-shadow: none;">This is a <a style="color:#0A45AD;" href = "/wiki/Category:Potential_comorbidities">Potential comorbidities</a> page</div>');
}
Now done ~Njt (talk) 23:31, October 1, 2020 (UTC)
OK Kmdenmark (talk) 16:43, October 13, 2020 (UTC)

Require a license value[edit source | reply | new]

Require a license value on file upload

Try adding this to the end of the script, code from codepen. It might also be possible to adapt so that a description must be entered too. ~Njt (talk) 14:50, November 2, 2019 (EDT)

I have added it, but it doesn't seem to work. (and other custom javascript doesn't work as well) Njt
Pyrrhus (talk) 21:16, November 2, 2019 (EDT)
It looks like that was relying on a plug-in we don't have. Can you try this instead. It disables the first option, which may be enough to force a choice. If not, keep this code in and I will look at adding an action to the Submit button too. User:Pyrrhus ~Njt (talk) 15:13, November 6, 2019 (EST)
Thanks for proposing this, Njt! I have added it, but it doesn't seem to work. I have noticed that many people have already tried javascript solutions for this on the web, but I couldn't find a simple solution. By the way, MediaWiki core includes a custom form of jquery.
Pyrrhus (talk) 15:39, November 6, 2019 (EST)
Okay, it's now fixed, Njt! Your code successfully disabled (greyed-out) the selection, but it did not de-select the option, so "None selected" was still the default selection, even though it was greyed-out. I made a small change to your code that removes "None selected" altogether.
Pyrrhus (talk) 19:12, November 6, 2019 (EST)
/*
Disable default license option on Special:Upload (None Selected) to force a choice.

*/

$(function () {

  myElement = document.getElementById("wpLicense");
  
myElement.options[0].disabled = true; 

}());
That looks good, although because it now defaults to I don't know exactly we may still have the issue of people not looking at the license options. I think it would be better to have a blank choice. Also could you change the default description to use this info instead, with headings rather than bullets. User:Pyrrhus ~Njt (talk) 06:15, November 8, 2019 (EST)
Try this for setting the default option to a message not in the drop down box. I think this should prevent the option being saved. It could be altered to have a useful message instead, like a translation of "Please choose a license". It also sets Required so the option can't be left blank. ~Njt (talk) 06:48, November 8, 2019 (EST)
document.getElementById("wpLicense").value = "";
document.getElementById("wpLicense").required = true;
New content for default upload summary, using system messages where possible (for languages other than French, Spanish, German, Dutch). ~Njt (talk) 07:08, November 8, 2019 (EST)
==wm-license-information-description==

==wm-license-information-author==

==wm-license-information-source==

wm-license-artwork-notes:
The system message MediaWiki:Maintenance-option-required translates (required) and other system messages cash be used, eg for "Please choose a license" and Please provide a meaningful description. ~Njt (talk) 07:25, November 8, 2019 (EST)
Njt I have updated the default summary, but now I am concerned that the default summary box is too confusing/intimidating for someone who doesn't understand the Source Editor. I wonder if there is a better way...
Pyrrhus (talk) 14:13, November 8, 2019 (EST)
Njt I have updated the javascript, and now it seems to work!!! Good job!
Pyrrhus (talk) 15:45, November 8, 2019 (EST)
This is great! Smiley face ThanksAt least! Also no changes are needed for different skins. ~Njt (talk) 12:32, November 9, 2019 (EST)

Change to remove "None selected" as a license option on Upload page[edit source | reply | new]

Old discussion

Below is some code that can be added to end of this page in order to remove "None selected" as a license option on the File Upload page, while preselecting the "I don't know/Unknown License" option. User:Notjusttired, could you review this code to see if you think it's worth trying?
Pyrrhus (talk) 23:04, August 21, 2019 (EDT)

Which code is this linked to? I am not sure this would work, and removing option 0 might renumber our chosen option. I did find that the "None selected" message is set from MediaWiki:Nolicense - what about renaming this to be "I don't know exactly", and removing "I don't know exactly" from MediaWiki:Licenses? Javascript is usually a last resort for when no other way exists and also may be disabled on some people's devices or computers. I've also seen code that would give a pop-up error with "None selected" chosen, warning then their file is likely to be deleted. Also Javascript and possibly very annoying since it will also beep - and we'd need to make sure it didn't trigger when the user first viewed the form and hasn't had time to pick a license. Code here.
I have also wondered about changing the default upload boxes so there is a source box, and possibly a category one?
On a separate note, is it worth installing the upload wizard? Would it run from the Visual editor when Insert media was selected? notjusttired (talk) 10:50, August 22, 2019 (EDT)
select#wpLicense.selectedIndex = "1";
select#wpLicense.remove(0);

Clearer disclaimer?[edit source | reply | new]

This page contains code that adds a bright banner to the top of every page in the “Potential treatments” and “Medical hypotheses” categories. The banner presents a brief disclaimer saying “This is a Potential Treatment page” or “This is a Medical hypothesis page”. I believe the purpose of this disclaimer is to warn readers to expect a slightly lower standard of evidence than that used in other pages. (In line with the “room for debate and speculation” section of MEpedia:About.)
What about making this more explicit by adding to the end of each disclaimer, in smaller font, “Please read critically.” Tagging User:JaimeS User:Notjusttired User:Kmdenmark User:Canele User:Sisyphus User:EscapeTheFog User:Hip User:JenB
Pyrrhus (talk) 01:35, July 20, 2019 (EDT)

-I'm ok with this. A bit out of topic perhaps but I always thought the sentence: "The information provided at this site is not intended to diagnose or treat any illness." should be at the top of the page and featured more prominently. - Sisyphus.

I would rather leave as it is, extra words would make the heading cluttered and less readable. I think the words "hypothesis" and "potential" already flag up that these are controversial / may not have much support. I disagree that the content of the page has weaker sources. I think it's just flagging up that someone once suggested something. As Sisyphus said we already have the disclaimer. notjusttired (talk) 06:17, July 20, 2019 (EDT)
Heh, am I allowed to agree with all of the above? I share Pyrhhus and Sisyphus's desire to emphasize disclaimers more strongly (e.g., MEpedia:General disclaimer still needs the update Jaime approved). At the same time, I also agree with Njt that 1, we should be attentive to the paradoxical effect where the less there is to read, the better the chances the message actually gets through, and 2, I worry about differentiating some pages as having lower standards lest it become a false promise about the higher standard elsewhere: as a wiki, where we are never able to 100% monitor and guarantee quality, my preference is encourage readers to apply careful scrutiny across the board.
Maybe we could name-check Hypotheses and Potential treatments pages in the Science guidelines as places to be particularly attentive to making sure the prose specifies the quality/limits of evidence available? Canele (talk) 17:07, July 20, 2019 (EDT)
It would be easy to put an additional short disclaimer under the page title, perhaps in italics, stating something like "Many potential treatments have been suggested for ME or its symptoms, but the evidence base and theory behind many treatments may be very weak. This treatment may be harmful. There is no cure." or some such thing. This would avoid "information overload" / clutter in the heading.notjusttired (talk) 04:47, July 21, 2019 (EDT)
In order to see if adding "Please read critically" would make the banner more cluttered or less readable, I placed both banners side-by-side on the Biopsychosocial model page. Please take a look and see if adding those three words are an improvement or not. Also consider whether we should move the banner from above the page title to below the page title. Placing the banner below the page title would allow us to provide foreign-language translations for the banner. User:Notjusttired User:Hip
Pyrrhus (talk) 19:23, October 24, 2019 (EDT)
User:Pyrrhus having "please read critically" in the same size as the rest makes it look cluttered but also it looks like part of the title rather than an instruction. The new banner isn't used classes/styles for the colors, so this would need sorting. A bit idea would be a second line in smaller text, possibly another color. Why can't translations be added with the existing banner position? ~Njt (talk)
Just checked the common.js code - it can easily be changed to call a template instead of using fixed text, although since the banner should match page language (rather than user language) it wouldn't be a lot of work to add a Javascript translation for the pages in other languages. Creating a separate banner for each page (rather than just per category) would be a mistake. Something not yet considered is a tool tip popup that would appear only when people ran their mouse over the banner, and could be attached to a tiny "info" ℹ︎ icon or image at the end of the word instead, or a banner at the top or bottom that needs to be clicked to make it go away - see this example with wording for bookies - could easily be done as a gadget. Frankly I think there are enough disclaimers and warnings already. ~Njt (talk) 12:33, October 25, 2019 (EDT)
I've updated the new banner at Biopsychosocial model. How does it look now User:Notjusttired? I removed the "Please read critically" and I changed the font to better differentiate it from the title. Since the banner includes a link to the category page, any further disclaimers can be placed at the top of the category page. I think the banner is still a bit too big, maybe reduce the banner size a bit? Any feedback User:Kmdenmark?
Pyrrhus (talk) 14:34, October 25, 2019 (EDT)
The link colors need sorting - visited links cause blue-on-light blue, for Potential treatments it would be blue-on-lime green. Would be better to have the link in white but also in bold - example at the bottom of this page. As far as I know this can only be sorted with (very simple) CSS. I think it would look better perhaps at 1.6em size text (a bit smaller), and it scrolls off to the right on mobiles - I don't know if this is because of the left/right padding gets added to the 100% width or not - could easily be changed to no padding with a   (visible space) before and after text which will look almost the same. ~Njt (talk) 17:29, October 25, 2019 (EDT)
I'm wary about changing the link colors, as people will have trouble recognizing a link in non-standard colors. I think it might be better to adjust the background color to work with the link colors, instead of vice-versa. I have removed the padding and changed the font to 1.6em. User:Notjusttired
Pyrrhus (talk) 18:33, October 25, 2019 (EDT)
I looked into color options, seems like #0645AD is the standard link color, I suggest using the darker pastel shades suggested here by Wikipedia (right column), eg
This is a link
and
Dark skin with link
Dark skin with link
contrast checker shows them as much better contrast than we have at the moment (looks better too). On the dark skin the link colors are different (orange), a shade of black/grey might be best for add above. ~Njt (talk) 21:18, October 25, 2019 (EDT)
Thanks User:Notjusttired for doing that research on colors! I set the background color to the pastel shade in your example in Common.css, and I set the background color to black in Timeless.css. Let me know how it looks.
Pyrrhus (talk) 22:44, October 25, 2019 (EDT)
User:Pyrrhus please undelete MediaWiki talk:Top-notice-Biopsychosocial_model or retrieve the old contents and put them on the new banner talk page. I did not expect it to go so soon and that content is not anywhere else. Feedback on changes - will put Screenshots on Slack:
  • Colors look great on Timeless
  • Banner still in the wrong place, it means both the banner and AddThis tools are above the content, which is cluttered and distracting. The old Javascript can put the banner above the title, like it was before.
  • Done: Class name is really unhelpful: category-banner or hypothesis-banner / treatments-banner would be a better choice. Heading and header have specific meanings and refer to other components or tags / HTML elements.
  • The banner is not centered - a space needs adding after the full stop.
  • I also don't know why it still scrolls, I trying a width of auto instead of 100%
  • I would prefer the banner link text to always used the same color, on Timeless it changes between orange (unvisited link) and blue (visited link) - I would prefer just blue. Feels inconsistent. See code in User:Notjusttired/timeless.css to fix this.
  • Special upload changes made at the same time do not work, so should be reverted. I suggest disabling the None selected option in Javascript instead, which will prevent the user continuing without selecting a licence.
  • Just noticed the Timeless skin does not have the "Special:Upload" link in the sidebar that Pivot has. Instead it's on the right with wikitools. (It's supposed to be in the Tools area, which is on the right on Timeless). ~Njt (talk) 18:45, October 26, 2019 (EDT)

New code for this page to fix Pivot[edit source | reply | new]

New code for this page to fix Pivot

User:Kmdenmark Please replace the code with that listed below - it adds a few new lines that use a different class for banners on pivot. This will hopefully make the Potential treatments and other banners visible on Pivot skin. If it turns out that the change ruins the banner on other pages then please reverse it. You can check via pages like Ampligen. Thanks notjusttired (talk) 04:57, July 21, 2019 (EDT)

Done! Kmdenmark (talk) 14:10, July 30, 2019 (EDT)
Can you take another look please, using the code under the Code subheading underneath? The page looks the same as before at the moment. User:Kmdenmark notjusttired (talk) 17:59, July 31, 2019 (EDT)
How about now? Kmdenmark (talk) 13:14, August 1, 2019 (EDT)
Brilliant!! Thanks!!! notjusttired (talk) 11:46, August 2, 2019 (EDT)

Code[edit source | reply | new]


/* Any JavaScript here will be loaded for all users on every page load. */

// Globals at https://www.mediawiki.org/wiki/Manual:Interface/JavaScript

// GOOGLE ANALYTICS
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-60945029-2', 'auto');
ga('send', 'pageview');
// END GOOGLE ANALYTICS

// Require a summary on edit pages
$('#editform').submit(function (e) {
    var summary = $('#wpSummary');
    // https://www.mediawiki.org/wiki/Manual:Namespace#Built-in_namespaces
    if (wgPageName.match(/^(User|Talk|Module|.*?_talk):/) || !summary.val().match(/^(\/\*.*?\*\/)?\s*$/)) {
        return;
    }
    summary[0].scrollIntoView();
    alert("Please enter a summary of the changes you are making in the designated text box.");
    summary.focus();
    e.preventDefault();
});

//Override template:totalviews to get the number of total views of the website

$.ajax ("/wiki/Special:Statistics").done (function (response){
  $('span.totalnumbderofviews').text(($(response).find('#mw-hitcounters-statistics-views-total>.mw-statistics-numbers').text()));
});


//Set color to specific categories

//For Medical hypotheses category
if (wgCategories.includes ("Medical hypotheses")){
     //$(".mw-body-content").css ("background-color","#dae6ff");
     //$(".toc").css ("background-color","#dae6ff");
     $(".firstHeading").prepend ('<div style = "margin:auto;padding:20px;width:100%;text-align:center;background-color:#00ccec;">This is a <a href = "/wiki/Category:Medical_hypotheses">Medical hypothesis</a> page</div>');

// pivot fix
     $("h1.title").prepend ('<div style = "margin:auto;padding:20px;width:100%;text-align:center;background-color:#00ccec;">This is a <a href = "/wiki/Category:Medical_hypotheses">Medical hypothesis</a> page</div>');
}

//For Potential treatments category
if (wgCategories.includes ("Potential treatments")){
     //$(".mw-body-content").css ("background-color","#f8d6c2");
     //$(".toc").css ("background-color","#f8d6c2");
     $(".firstHeading").prepend ('<div style = "margin:auto;padding:20px;width:100%;text-align:center;background-color:#00ee54;">This is a <a href = "/wiki/Category:Potential_treatments">Potential treatments</a> page</div>');

// pivot fix
$("h1.title").prepend ('<div style = "margin:auto;padding:20px;width:100%;text-align:center;background-color:#00ee54;">This is a <a href = "/wiki/Category:Potential_treatments">Potential treatments</a> page</div>');
}

Possible typo[edit source | reply | new]

content hidden

Are there issues with the hits reported on Special:Statistics or Special:PopularPages, which comes from mw:Extension:HitCounters? Possible typo found - span.totalnumbderofviews must not be corrected until certain it is wrong ~Njt (talk)

$('span.totalnumbderofviews').text(($(response).find('#mw-hitcounters-statistics-views-total>.mw-statistics-numbers').text()));
It's a "permanent typo", and is not to be changed. I read some MediaWiki page that has a special note regarding this typo. It annoys me every time I see it, but that's just how it goes, I guess.
Pyrrhus (talk) 22:48, October 5, 2019 (EDT)
Oh wait, I was confusing this typo with another typo I had read about on a MediaWiki page. This was just a plain old typo. Now fixed.
Pyrrhus (talk) 19:20, November 6, 2019 (EST)
Thanks. I don't think this is working though. I believe it should be getting the hits from Special:Statistics, and overwriting any number of hits here that is smaller. But there is no span.totalnumberofviews element in Pivot or Vector - they use the entire line as li.footer-info-viewcount or li.footer-viewcount - it might work in Vector but on a mobile devise it is hidden so I can't check. The total number updates once a day (but I am not sure what time). At the moment the hits shown for on Esther Crawley is about 12 lower than the one for the same page on Special:Statistics. ~Njt (talk) 12:36, November 9, 2019 (EST)
Njt As far as I know, there is only one span.totalnumberofviews element, and that is on the main page Welcome to MEpedia. So all this javascript does is to retrieve the total number of views from Special:Statistics, via AJAX, and then update the main page. Am I missing something?
Pyrrhus (talk) 15:45, November 9, 2019 (EST)
I see it now, looks like it's working fine then. ~Njt (talk) 20:05, November 9, 2019 (EST)

Validate destination file name[edit source | reply | new]

Old suggestion - not done Mobile users cannot set file names for files they will upload, it would be helpful to check this field is meaningful:

<td class="mw-input"><input id="wpDestFile" name="wpDestFile" size="60">
</td>

Eg Does not start with multiple digits (eg any file name starting with 4 digits gives an error, but CFS-study1990-09-12.png would be fine. The last file I uploaded without changing the destination filename ended up called "18462EA5-E02A-49F8-9559-ECB356C4CBC2.png". This worked out as 48 characters. An alternative would be to limit the filename's length only when the submit button is pressed, eg to 30 or simply check the first character is a letter. User:Pyrrhus ~Njt (talk) 13:08, November 9, 2019 (EST) Code here may be helpful in reading the value and checking the length ~Njt (talk) 13:28, November 9, 2019 (EST)