MediaWiki talk:Common.js/Archive 11: Difference between revisions

Revision as of 18:15, 30 May 2020

Latest revision as of 23:00, 22 June 2024

(3 intermediate revisions by 3 users not shown)

Line 24:

* Code: 0

* URL: (Whatever the address in your browser is)

To recreate the error, open IE and edit your <s>skin css file</s> javascript file <small>'' (fixed by [[User:Alex Smotrov|Alex Smotrov]])''</small>. At the bottom of the file put the line <code>importStylesheet( "User:Shardsofmetal/monobook.css" );</code>, then preview the page. When it loads the next page, see if there is an exclaimation icon on the left side of the status bar. If so, double-click it. I had 2 errors, but I know the one related to this is the one I posted. My guess is also that the line number might differ depending on what other javascript has been loaded. I normally use Firefox, I actually only used IE to test this function at my local wiki, to load a custom skin for IE users (since the normal custom skin doesn't look good in IE). However, if I can't get the css file to load, then it was a waste of my time. I don't know javascript, only the basics I've figured out from looking at code, so I can't figure out what the problem is, but I assume that someone who knows javascript can fix the problem. Also, shouldn't the line <code>+ '&action=raw&ctype=text/css";'</code> contain a semicolon at the end, to end the declaration of the variable? Anyway, I hope someone can take a look at this. '''<span style="background: #fadb23; border:1px solid #FF6600; margin-right: .25em; margin-left: .25em">&nbsp;[[User:Shardsofmetal|<fontspan colorstyle="color: blue">Shards</fontspan>]][[Special:Contributions/Shardsofmetal|<fontspan colorstyle="color: #177245">of</fontspan>]][[User talk:Shardsofmetal|<fontspan colorstyle="color: black">metal</fontspan>]]&nbsp;</span>''' 03:04, 3 October 2007 (UTC)

:You need to specify a fully qualified URL, not a wikilink as you are trying to do. Try this instead:

Line 31:

::No you don't. The function begins:

<sourcesyntaxhighlight lang="javascript"> function importStylesheet( page ) {

var sheet = '@import "'

+ wgScriptPath

+ '/index.php?title='

+ encodeURIComponent( page.replace( / /g, '_' ) )

+ '&action=raw&ctype=text/css";'</sourcesyntaxhighlight>

::Therefore, it requests the url /w/index.php?title=THE_PAGE_YOU_REQUESTED&action=raw&ctype=text/css. The function works fine in Firefox, and it looks fine to me, so I don't know why it doesn't work in IE. '''<span style="background: #fadb23; border:1px solid #FF6600; margin-right: .25em; margin-left: .25em">&nbsp;[[User:Shardsofmetal|<fontspan colorstyle="color: blue">Shards</fontspan>]][[Special:Contributions/Shardsofmetal|<fontspan colorstyle="color: #177245">of</fontspan>]][[User talk:Shardsofmetal|<fontspan colorstyle="color: black">metal</fontspan>]]&nbsp;</span>''' 12:55, 3 October 2007 (UTC)

:::Right, I missed that. Anyway, I tried the test above, and I didn't get the error. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 13:31, 3 October 2007 (UTC)

Yes, it's a known problem, importStylesheet doesn't work in IE. When I looked into it some time ago, looks like in IE you're not supposed to add a text node as a child of a <code>style</code> element but instead use <code>styleElem.styleSheet.cssText</code>. But even after that it seems IE (at least IE6) simply doesn't like <ttcode>@import</ttcode> in the added text. On the other hand, something like this below seems to work in IE6/Firefox 1.5/Opera 9 ∴ [[User:Alex Smotrov|Alex Smotrov]] 19:20, 3 October 2007 (UTC)

<sourcesyntaxhighlight lang=javascript>

function importStylesheet(page) {

var styleEl = document.createElement('link')

Line 51:

document.getElementsByTagName('head')[0].appendChild(styleEl)

}

</syntaxhighlight>

</source>

<span id="63316583953" ></span>

== PNG transparency fix "V1.1" ==

Line 69:

The current IPA hack doesn't work in IE 7 (see [[Template talk:IPA#Solution for IE6/7 problem]] for details). The following code will load the required CSS rule form script and thus avoid ugly CSS hacks:

<sourcesyntaxhighlight lang="javascript">

if(navigator.userAgent.indexOf("MSIE") != -1 && document.createStyleSheet) {

document.createStyleSheet().addRule('.IPA', 'font-family: "Doulos SIL", "Charis SIL", Gentium, "DejaVu Sans", Code2000, "TITUS Cyberbit Basic", "Arial Unicode MS", "Lucida Sans Unicode", "Chrysanthi Unicode";');

}

</syntaxhighlight>

</source>

This also makes the .IPA style in Common.css unneccessary, after it has worked it's way through the cache. (Excpet for IE users with and javascript turned off, but they will have so many troubles they won't even notice the IPA scripts not working :-) --[[User:Tgr|Tgr]] 21:24, 4 October 2007 (UTC)

Line 108:

== Update ta[] tooltips ==

The <code>ta[]</code> definitions at the top of the page need to be updated. Introductory explanations: ta[] object is used by <code>function akeytt()</code> in [{{SERVER}}/skins-1.5/common/wikibits.js wikibits.js] to assign missing access keys and tooltips to Mediawiki interface. Due to the way the function is written, it cannot properly change the existing tooltip if you don't specify accesskey <small>(in IE of Firefox place your mouse over «Help» link on the left, then over its bullet)</small>. To research which ta[] are not needed, you could use: browser with JavaScript temporarily disabled, HTML page source, [[Special:Allmessages]], [[Mediawiki:Sidebar]]. My proposal:

* Delete <ttcode>ta["t-print"]</ttcode> and <ttcode>ta["t-permalink"]</ttcode> because [[Mediawiki:tooltip-t-print]] [[Mediawiki:tooltip-t-permalink]] say the same thing

* Delete <ttcode>ta["n-help"] ta["n-sitesupport"] ta["ca-nstab-project"]</ttcode> : [[Mediawiki:tooltip-n-help]], [[Mediawiki:tooltip-n-sitesupport]], [[Mediawiki:tooltip-ca-nstab-project]] and [[Mediawiki:accesskey-ca-nstab-project]] simply need to be changed

* Delete <ttcode>ta["n-mainpage"]</ttcode> : it simply doesn't change anything because of the current [[Mediawiki:Sidebar]]

* Keep <ttcode>ta["n-contact"] ta["n-Contents"] ta["n-Featured-content"] ta["n-Main-page"]</ttcode> since they are non-standard (no Mediawiki tooltips)

* Add <ttcode>ta["n-About-Wikipedia"]</ttcode> and <ttcode>ta["t-log"] («Logs»)</ttcode>, these links on the left currently have no tooltips

* I'm not sure where <ttcode>ta["t-cite"]</ttcode> is used, maybe related to [[Mediawiki:cite_article_link]]?

* And personally I would also delete <ttcode>ta["ca-hiderevision"] = new Array("h","Hide this revision")</ttcode> because 26 users with [[Wikipedia:Oversight|oversight permission]] can probably live without it

∴ [[User:Alex Smotrov|Alex Smotrov]] 14:27, 12 October 2007 (UTC)

Line 179:

===window.disableSysopJS===

Someone pointed out that the <ttcode>if (!window.disableSysopJS)</ttcode> is useless here, as the users' monobook is loaded ''after'' common.js, so sysop.js is imported anyway. The check should preferably be moved to sysop.js itself. Or more ideally, each function is sysop.js should have it's own check; that way admins can disable what they don't like. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 15:21, 17 October 2007 (UTC)

: {{resolved}} I made an enclosing in an addOnloadHook, that would take care of the problem. _{→[[User:AzaToth|<span style="color:#773">Aza</span>]][[User_talk:AzaToth|<span style="color:#359">Toth</span>]]} 16:54, 17 October 2007 (UTC)

::This is not a "fix" unless you mention the consequences: all the scripts inside Sysop.js now should start immediately (without addOnloadHook), and I'm not even sure that will work in all browsers ∴ [[User:Alex Smotrov|AlexSm]] 17:25, 17 October 2007 (UTC)

Line 265:

:::::Is this what you wanted?

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 314:

}

</pre>|bg1=#ccccff}}

In this code, a user has only to add "PngFixEnabled = false" to their monobook.js and the code will be disabled. But I really do not see why a user would want to do this rather than just use a different, more advanced browser and avoid the problem entirely. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 02:53, 11 October 2007 (UTC)

Line 335:

:Here. I believe I've resolved the collapsible table issues:

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 392:

}

}

</pre>|bg1=#ccccff}}

The problem was more IE quirkiness. IE refuses to say what the image's width and height are when the image is set to <code>display:none</code>. After reading [http://www.thescripts.com/forum/thread688323.html], I experimented a bit more and decided to force the image width to 1px if it is 0px. IE is so quirky that having <code>width:1px</code> and <code>height:0px</code> makes it display the image.

Line 414:

::::I thought that there would be some way to iterate through the defined properties of img.currentStyle (which would allow full flattening), but there does not seem to be any way to get a list of the defined properties. I'm willing to compromise with just flattening the border information. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 20:19, 12 October 2007 (UTC)

:::::One could use <ttcode>for (i in imgCurrentStye) outerSpanStyle[i] = imgCurrensStyle[i]</ttcode>, but that would defenitely slow the script to a crawl. <ttcode>outerSpanStyle = imgCurrentStyle</ttcode> (not tested yet) could theoretically work, but that just references the original object, not copy it. However, since the original img object is discarded anyway, we could give it a shot.

:::::In the mean time, I'm glad you turned around. Sorry to jump out of my socks. I will make the edit. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 21:30, 12 October 2007 (UTC)

===PngFix live again===

(deindent) Wow... '''6 seconds''' traversing the DOM on [[Wikipedia:Route diagram template/Catalog of pictograms]] (400 PNGs!) with the optimizations! that used to be 30... The PngFixDisabled flag works as well. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 22:14, 12 October 2007 (UTC)

:I can add <ttcode>outerSpanStyle.backgroundImage = imgStyle.backgroundImage</ttcode> for checkered background support... Thoughts? <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 22:18, 12 October 2007 (UTC)

::Let's go the whole way and flatten all CSS information, now that you've showed me how to do that:

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 470:

}

}

</pre>|bg1=#ccccff}}

Since this new code doesn't add any costly DOM lookups, it will in all likelihood still go very fast. I noticed no slowdown on [[:Commons:Category:Icons for railway descriptions]]. Of course, when the squid servers are fixed then we should integrate this code back into the 1px transparent image code to increase speed. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 23:22, 12 October 2007 (UTC)

Line 486:

:Fine. Disabled for IE 5.5, and picks and chooses CSS properties to flatten. Let's use this until we can find something better.

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

function PngFix()

{

Line 544:

}

}

</pre>|bg1=#ccccff}}

As a side note, I hope you can see why asking users to upgrade will give them a better experience than using endless workarounds. This problem can only be truly resolved by upgrading, so it's best to get users to upgrade. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 20:16, 13 October 2007 (UTC)

Line 552:

Wont that code result in an endless loop? as i is only incremented in the else statement? or is there some magic here? _{→[[User:AzaToth|<span style="color:#773">Aza</span>]][[User_talk:AzaToth|<span style="color:#359">Toth</span>]]} 20:56, 13 October 2007 (UTC)

:I asked myself the same thing, but no, there are no endless loops or hangups. I actually tried adding <ttcode>i++</ttcode> but then it skipped half the images. So yeah, there must be some perfectly explainable magic; but I don't know what is is... <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 21:00, 13 October 2007 (UTC)

::I think I figured it out; <ttcode>i</ttcode> isn't actually incremented. However, when replaceChild replaces the original image with the span, the original image is removed form the DOM, causing the rest of the images to move up one place in the list. <span style="font-family: verdana;"> — [[User:Edokter|<span style="color: #008;">'''''E''dokter'''</span>]] • [[User_talk:Edokter|<span style="color: #080;">Talk</span>]] • </span> 21:10, 13 October 2007 (UTC)

::documentImages.length decreases by 1 every time you change an img element to a span element because that img element is removed from the list. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 21:09, 13 October 2007 (UTC)

Line 560:

As long as we're axing support for IE 5.5, let's simplify the code a bit:

{{hidden|titlestyle=background-color:#ccccff|Code|<pre style="overflow:scroll">

/**

* Correctly handle PNG transparency in Internet Explorer 6

Line 628:

}

}

</pre>|bg1=#ccccff}}

The major change here is that the unnecessary variable <code>var version</code> is no longer made, and only 1 character of the appVersion is compared (against "6"), instead of 3 (against "5.5" or "6.0"). This will probably only save a couple milliseconds, but it also simplifies the code, so I'd say it's still worth it. The documentation at the top is also updated. —[[User:Remember the dot|Remember the dot]] ^{([[User talk:Remember the dot|talk]])} 22:23, 13 October 2007 (UTC)

Line 682:

I moved the collapsing option to built-in instead of the common.js hack, so it'll be available on all sites once fully live. Collapsed version now shows just the slim progress meter, which might be a little nicer to look at, and gives you the option of re-showing it should you... for some reason... want to. :) --[[User:Brion VIBBER|brion]] <small>—Preceding [[Wikipedia:Signatures|comment]] was added at 03:34, 23 October 2007 (UTC)</small><!--Template:Undated--> <!--Autosigned by SineBot-->

:A way of turning it off completely would be really nice, if you have the time. At the moment I am using the following hack in my monobook.js for those interested. [[User:Conrad.Irwin|Conrad.Irwin]] 17:43, 23 October 2007 (UTC)

<sourcesyntaxhighlight lang="javascript">

addOnloadHook(function() { document.getElementById('siteNotice').innerHTML="";});

</syntaxhighlight>

</source>

::Adding <code>#siteNotice { display:none; }</code> to your monobook.css will probably work better :) [[User:AmiDaniel|AmiDaniel]] ([[User talk:AmiDaniel|talk]]) 18:56, 23 October 2007 (UTC)