MediaWiki talk:Gadget-Numerakri.js

Needed Features

• Easily visible dropdown box to select numeral system, availaible for both logged-in and logged-out users
• Remembering user preference for numeral system and changing numerals on document.ready for all pages automatically once the preference is set
• Changing all numerals in the page (including list numbering) without changing any anchor urls, image src properties, hyperlink urls etc.
• Changing title text and alt text properties for images, anchors etc.
• Not changing the numerals in the editbox in the editpage or the previewpage, not changing any input numerals
• Providing an html class, numerals inside which would not be changed. This is to be for places where the numerals are to be specifically differentiated, and possibly will be used for ContentSub (Redirected from blah) which may contain numerals.
• Not change numerals in the mailto link for emailing users
• Not changing the numerals in the source for anchors for the book sources (such as ISBN) (The visible ISBN may be changed, but the link should not be changed)--Siddhartha Ghai (talk) 03:35, 5 July 2012 (UTC)

Icon

An icon that may be suited for this.

When implementing the dropdown, you'll probably want to implement that as a portlet link via mw.util.addPortletLink, and use a click() event handler to show/hide the dropdown menu, and use CSS to show an icon (just like the user page link with icon). Krinkle (talk) 20:32, 8 July 2012 (UTC)

== inline styles.

• Use variable references instead of using string selectors in .append() constantly (it is much faster to reference the nodes directly then querying the document to find the element). This phased out a lot of unneeded IDs from the document.
• Build the interface inside out, this is faster because now there is only 1 insertion into the document and thus only 1 "paint" action in the browser.
• Add basic messaging system.
• Minor redesign for "Modern" skin: Icon was 50px, which equals the height of the toolbar (leaving no padding, edge of icon touched edge of toolbar). Reduced to 40px and also made white.
• Refactored skip-class code
  • Using hasClass instead of .attr('class') so that it also works on elements that have more classes.
  • Moved check from handleTextNode to TreeWalker's filter callback so that it can be used on a container element (not just on the direct parent of the text node). In this case it is used on the SELECT element that contains the OPTION elements.
• Fixed bug in options. Use .value (or .val() or .prop('value')), but not .attr('value'). Attributes control initial state from HTML. Once in the DOM, the property controls live state, the attributes can be stale.
• Factored any MediaWiki-specific code out into a new setupInterface method. This way one can extend the
• Optimised initialisation by defining and instantiating the constructor outside "document-ready" and only calling "setupInterface" inside of the domready handler.
• Various clean up and coding styles (more comments and spacing, delivery from ResourceLoader trims all this).
• Passes JSHint!

Krinkle (talk) 03:18, 19 December 2012 (UTC)

Uh, firstly, thanks for the update; and, I'd tried to improve the code myself at w:hi:सदस्य:Siddhartha_Ghai/Numeral_converter.js. That supports multiple numeral systems. Maybe you should have a look and incorporate improvements? Thanks--Siddhartha Ghai (talk) 19:48, 25 December 2012 (UTC)

Clarification:I'm only referring to code changes (auto-generation of the regex). Support for multiple systems isn't needed on hi-wp as of now.--Siddhartha Ghai (talk) 19:54, 27 December 2012 (UTC)

 Done, diff. Krinkle (talk) 23:55, 30 December 2012 (UTC)

Thanks for the script. I have implemented it in Telugu wikipedia for telugu numerals. If someone can make the icon for Telugu that will be great. --వైజాసత్య (talk) 06:40, 13 April 2013 (UTC)

Base64 encode images

How about base64 encoding the icon images? Saves an http request. And saves us from any possibility of commons vandalism affecting the gadget. The changes would be:

#pt-numconvert {
	padding-left: 30px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAKCAYAAABBq/VWAAAABmJLR0QA/wD/AP+gvaeTAAABAUlEQVQoka3SvytFcRjH8VfHoa7EQMlgsChEYVCyWVwlf4Film7J/6CMNmVV/AGSpGS4NsUd/dgUKaWuQdI1nFOO4zjHcN/b5/n1+fY8X77pw6Lm0I8VDCSDHajioAkGbbjBER5QCjCDa/RmNIzFTXlMpvQQ3lHGIwYDTGMN26niKZwjLDDZwXJC36IdS+jBXYitOFlJFI7jEF0YRiPHpBW7+MAe3rCBfSyg/tcrX1BHN17xmWPSiA2eYx1gHas4ThdX/Dz8CJ5QyjGAC8wldCfuRb/1F2kTGBWtI4+JjNgszsT3DAoG1ESryOMyI3aKE2xCSyIRir5crWDof6liHldf/Mguk22gyLgAAAAASUVORK5CYII=);
	background-repeat: no-repeat;
	background-position: 0 0;
}

and

.skin-modern #pt-numconvert {
	padding-left: 50px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAQCAYAAABk1z2tAAAABmJLR0QA/wD/AP+gvaeTAAABy0lEQVRIicWVO2sVURCAv0luDF4JQjBiQG3zL0Sw8gEaiZ2FNpLKWnsVsdHOIGoZCCR2tukEQRQLFfHRBSTiC4IJEcxncc+SZd3dm13wOtXZM3NmPua1UBC1qx4q3g9C1BF1pJ/RovphQExZzFCvqz/VdfW2OlxmeMOeDBrwTIr7Wn2RzufzBvvVR25LJaA62gKgow7V6OfVH+qYOqquqgsAQ+pR4B1wGrgFrNY4mgSWmgIC+4CFmv7aC3yOiLWI2AQ+AXuyoLPqE/VI+l4py6A6ob5sU371QKrMfFlvqZeSfkY9oW6plzPlWMH4L0B1Un3btj9zgKpLxUymIXmobqob6jN1F0AnItb6OB8HHgNTubtjQDRgHM+dzwIP1AsRsQUQEar3gYvAR+BURPwC6OzA+QbwPc+cvpsAFgdkJYOD3v4D5oAvwPGIqJyDqhJ31eVUovcNwLL3+RLfLNFfSbqTRV3l6OclItaBaeApvQy2lTngasn9q+S3/wqrmuKk66p3m1KlDF7rY3NH/apO1dnVAib9Tvq2+GZYre3ZtKCfq2/U3a0B/6Woh9Vv6r06o/8GmOLPpIE5B+VrZhb4PVisbYmIxfQXOQjwB2Z6ypI/S3l6AAAAAElFTkSuQmCC);
	background-position: 10px 50%;
}

Regards--Siddhartha Ghai (talk) 03:38, 4 October 2013 (UTC)

They can be protected on Commons if needed. The extra http request saving is nice, but thumbnails are very well cached. And manually converting to base64 encoded is in my opinion an unacceptable maintenance overhead that is not worth it. ResourceLoader is designed to make things more efficient without requiring you to sacrifice maintainability (e.g. a sprite that needs regenerating and new offsets, or a base64 encoded string that is hard to verify). Plus there is browser compatibility issues with base64 encoded urls (not all browsers support them, so you need to provide a fallback). This is exactly why you should let a machine do it instead of doing it manually. ResourceLoader already saves a great number of http requests for us by other techniques.

In fact, one of those techniques is base64 data uri encoding. Modules provided by the server (MediaWiki core, extensions) already get their images automatically base64 encoded and replaced in the stylesheet when the module is packaged by load.php. Inspect the Vector sidebar for example:

// load.php?module=skin.vector
#mw-panel.collapsible-nav .portal h3 {
 color: #4D4D4D;
  font-weight: normal;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAD1BMV…HdINQJCp1Ebv+ZlLYLaD4f4cbnDNi6MAO8KCHJ+7X02j3mzgMQe93HcQAAAABJRU5ErkJggg==) left center no-repeat;

// skin/vector/screen.css
#mw-panel.collapsible-nav .portal h3 {
  color: #4D4D4D;
  font-weight: normal;
  /* @embed */
  background: url(images/arrow-expanded.png) left center no-repeat;

See also ResourceLoader/Features#Embedding. However this feature is not yet available for gadgets.

Anyway, I'd recommend keeping the code as easy to maintain as possible and instead letting the software do the performance improvements for you. That way it can also improve these techniques without having to edit 1000s of pages to update the technique. Krinkle (talk) 13:59, 4 October 2013 (UTC)

Right. I knew about RL embedding images, and about that not working for gadgets, which is precisely why I proposed we do this. However, I was unaware of needing fallbacks in case we do this. Thanks for the info.--Siddhartha Ghai (talk) 10:17, 5 October 2013 (UTC)

Icon issues with cologneblue skin

I just tested out the updated gadget (the current version) in cologneblue skin at https://hi.wikipedia.org/wiki/User:Siddhartha_Ghai?useskin=cologneblue Note to Krinkle: You can see what it looks like in the link. Gadget is enabled by default at hi-wp so no need to tinker with preferences.

The icon overlaps with the linked text अंक पतिवर्तन (in the hi interface)

The icon should either be hidden for that skin or the moved. Maybe use css to make it appear to the right of the text?

Regards--Siddhartha Ghai (talk) 05:26, 4 October 2013 (UTC)

The icon is overlapping because Cologne Blue has a stronger css selector on the <li> element than ours ( screenshot of inspector). The css padding is being overwritten back to 0. We can:

• hide it by using .skin-cologneblue #pt-numconvert { background-image: none; }
• override the padding again .skin-cologneblue .portlet #pt-numconvert { padding-left: 30px; }
• move it to the right .skin-cologneblue .portlet #pt-numconvert { padding-right: 30px; background-position: 100% 0; }

Krinkle (talk) 14:08, 4 October 2013 (UTC)

Thanks. I see that you've implemented the last one here. However, I don't see the icon in cologneblue skin in either chrome or FF on windows. (I did a hard refresh Ctrl+Shift+R in chrome several times, and I don't generally use FF; so this isn't a cache problem.) Chrome shows the padding, but not the icon. FF isn't showing either of these. Could you check if this is working?--Siddhartha Ghai (talk) 10:51, 5 October 2013 (UTC)

It works for me in Chrome (screenshot). Did you try on MediaWIki.org and/or updated it on the other wiki? Krinkle (talk) 18:50, 9 October 2013 (UTC)

Tried it here on mediawiki.org. Not working for me on chrome (screenshot)--Siddhartha Ghai (talk) 19:55, 10 October 2013 (UTC)

Apparently this css file is missing from MediaWiki:Gadgets-definition.--Siddhartha Ghai (talk) 20:03, 10 October 2013 (UTC)

Fixed, diff. Krinkle (talk) 22:43, 10 October 2013 (UTC)

Ok, it works now. But it appears prettier (tested in chrome) if the background position is changed to 60% 0. The icon appears closer to the text and seems fine both uselang en and hi.--Siddhartha Ghai (talk) 02:10, 18 October 2013 (UTC)

Both in "en" and in "he", when I test locally with background position "60% 0%" (and "40% 0") the icon goes through the text (which makes sense, the icon is 25px and the edge padding is 30px, so at most you can move it 5px, not 40%). Krinkle (talk) 04:00, 18 October 2013 (UTC)

Ok, what you're saying makes logical sense. What I'm seeing [1] [2], however, is different. The text is wrapping to the next line and hence the icon isn't overlapping with the text, the overall effect seeming prettier.--Siddhartha Ghai (talk) 06:56, 22 October 2013 (UTC)

Documentation, standardization and cookie

So we now have usage of the gadget on te-wp.

For the use on this wiki, maybe add the relevant UI to this gadget itself, i.e reference to the doc page, te numerals, teUI when using the te interface lang etc and then show only two numeral sets, the arabic (international) one, and the one from the user's interface language?

Also, te-wp is using the cookie value 1 for te numerals, while here and on hi-wp that's for deva numerals. IMHO that's bad. Maybe the te version should be changed to use 2 (or something else)?

Regards--Siddhartha Ghai (talk) 05:42, 4 October 2013 (UTC)

Also, the telugu wikipedia is using the December 2012 version. Once these issues and the ones at Mediawiki talk:Gadget-Numerakri.css are fixed, it should probably be updated (along with the version on the hindi wikipedia).--Siddhartha Ghai (talk) 05:49, 4 October 2013 (UTC)

Hi,

• The cookie problem has been solved by using the new cookie mw-numerakri-type which contains a codename instead of a number.
• The bug in Cologne Blue you reported at Mediawiki talk:Gadget-Numerakri.css has been fixed.
• I don't have time to work on the UI, doc page or te-wp interface. Perhaps you or someone else could work on that? (e.g. copy this version, apply the te-wp changes, and then I'll copy your new version back here).

Krinkle (talk) 14:17, 4 October 2013 (UTC)

Thanks for the cookie thing. I'll ask the maintainer at te-wp to update. Problem in cologneblue bugfix at Mediawiki talk:Gadget-Numerakri.css. I'll make a copy of this, do the requisite UI changes and notify here when done.

One more thing: This is not a pressing concern, just food for thought. The gadget works for both the interface and the content, and it was originally targeted to (but not limited to) content.

However, since the cookie doesn't incorporate the name of the website, it means numeral preferences get transferred to other websites too. This may not be always desirable. Example: A user may wish to see devanagari numerals with devanagari content on the hindi wikipedia, but read docs here in english, and wish for international numerals since devanagari numerals would seem out of place.--Siddhartha Ghai (talk) 10:59, 5 October 2013 (UTC)

Incomplete list of dependencies

Ori.livneh, this script is still using $.escapeRE from jquery.mwExtension, so this edit is not quite right. Helder.wiki 01:43, 12 March 2014 (UTC)

Projects

The following is a list of wikiprojects where this gadget is availaible in some form:

1. Here
2. Hindi Wikipedia (enabled by default)
3. Telugu Wikipedia (has an older version modified for use with telugu numerals)
4. Punjabi(pa) Wikipedia (as of writing, a user requested me for adding this on punjabi wikipedia, and I've given him this gadget modified for use with gurmukhi numerals)
5. Sanskrit Wikipedia
6. Arabic Wikipedia, I am requesting the use of the Hindi (East Arabic numerals) ١٢٣ on Arabic Wikipedia. These numbers are a part of the Arabic language and should be used because the Arabic language is written in Arabic.

The version on telugu wikipedia uses the older cookie format, others use the current format.

Cookie

1. The cookie used here and on hindi wikipedia is the same.
2. Telugu wikipedia uses the older cookie.
3. Code I've given for punjabi wikipedia uses cookie '3' for gurmukhi (Since 1 is for devanagari, I've left 2 for telugu and added 3 to the code for gurmukhi)

--Siddhartha Ghai (talk) 13:16, 20 March 2014 (UTC)

The gadget is now available on sanskrit wikipedia (and may be enabled there by default too).--Siddhartha Ghai (talk) 06:36, 13 April 2014 (UTC)

Punjabi Wikipedia

Hello, Is there any way with which we can make this Gadget default for all users? Instead of Default, Arabic and Gurmukhi, Is there any option to make Arabic numerals by default for all users and only Gurmukhi as the second option ? Thanks a lot. --Satdeep gill (talk) 03:42, 1 December 2014 (UTC)

Requesting this gadget for Kannada Wikipedia

Hi, I would love to see this gadget on kn:wiki. Let me know if there is any specific procedure for this. Thanks Omshivaprakash (talk) 05:25, 25 April 2015 (UTC)

Revision 2018-12-29

I noticed that on wikis where Numerakri is enabled by default, viewing pages can sometimes be slow. Using the mouse to scroll or keyboard to type is sometimes blocked until the Numerakri gadget is finished processing all text on the page. This is especially affecting older computers and mobile devices.

Today's update fixes this by using the requestIdleCallback principle. In summary, it means the gadget still tries to update the page as fast as possible (just like before), but, if the user is trying to type or click something, it will allow the browser to process that event. After that, it will continue to process the rest of the page.

I have also reduced the amount of code needed for the gadget by removing unused code. And remove code for browsers that are no longer supported. For example, in Internet Explorer 6-8 the gadgets are automatically disabled in MediaWiki, so the fallback for those is never used. --Krinkle (talk) 07:57, 30 December 2018 (UTC)

@Krinkle: : The bhojpuri wikipedia link is to a non-existent page. Maybe change that to this page till someone creates the documentation there?--Siddhartha Ghai (talk) 15:20, 11 January 2019 (UTC)

@[[Siddhartha Ghai: Fixed. I've removed the link (it'll fall back to en automatically). I copied it from the bho gadget, but didn't check the link. Thanks! --Krinkle (talk) 20:03, 11 January 2019 (UTC)

Centralization

@Krinkle: I was thinking whether it would be better for maintainance if this gadget was kept centrally at one place only, preferably here, and only loaded at the other wikis using mw.loader.load, kind of like how HotCat works with the code on commons and only one line of js on various language wikis.

It would save the hassle of having to update individual wikis. Thoughts?--Siddhartha Ghai (talk) 14:30, 14 January 2019 (UTC)

Tool for mobile and vector 2022 skin

This tool is not working with mobile version of wikipedia and also not working for vector 2022 skin. Can you please suggest some update to correct the problem? ☆★Sanjeev Kumar (talk) 13:03, 9 April 2023 (UTC)