Forum:Useful JS

Forums: Index > Rin's Travel Agency > Archive > Useful JS

Add edit links to WLH

I decided to write a JS script. The script adds an "(edit)" link next to all the links on WLH pages. Since the primary use of WLH is to fix links/transclusions to pages, I think this is helpful.

/* ---------------------------------Adds edit links to WLH page -- *
 * --------------------------------------------------------------- */
function addEditLinksToWLH() {
  if(wgCanonicalSpecialPageName=='Whatlinkshere')
  {
    var links = document.getElementById("mw-whatlinkshere-list").getElementsByTagName('li');
    for(var i = 0; i<links.length; i++)
    {
      aLink = links[i].getElementsByTagName('a');
      var linkHref = aLink[0].href+="?action=edit";
      var tools = getElementsByClassName(links[i], 'span', 'mw-whatlinkshere-tools');
      var editLinkSpan = document.createElement("span");
      editLinkSpan.className = "mw-whatlinkshere-edit";
      editLinkSpan.innerHTML = '<a title="Edit form" href="' + linkHref + '">(edit)</a> ';
      links[i].insertBefore(editLinkSpan,tools[0]);
    }
  }
}

addOnloadHook(addEditLinksToWLH);

I designed it for Oasis, but monobook's WLHs seem to work in the exact same way so I would find it odd if it didn't. And also I've only tested it on Firefox, so if you use it and it works on Firefox but not on another browser, let me know.

Also, if this is something we want implemented wiki-wide, then let me know also. JBed (talk) 12:51, March 9, 2013 (UTC)

So this is how you edit so fast... well, yeah, I would support putting this wiki-wide. C A T U S E 14:48, March 9, 2013 (UTC)

This actually isn't how I edit fast :p --I've yet to actually use this (or my

personal variation)-- I wrote it this morning. JBed (talk) 14:55, March 9, 2013 (UTC)

Installed across both skins, and confirmed working in Chrome and Firefox. JBed (talk) 16:04, March 9, 2013 (UTC)

Well, I can't think of any reason not to implement this, and nobody's raising any objections, so ... yes?

Somewhat off-topic, how do you edit that fast? C A T U S E 18:28, March 10, 2013 (UTC)

I didn't know how best to respond, since the real answer is the find function: Ctrl+G, Ctrl+V; or in the case of Nihongo, Ctrl+G, ''', for(numberofwordsinparameter1){Ctrl+Right}, Shift+Left, Ctrl+V. But there are other facets including batch-processing, and then the way I open edit forms-- but I have a new method of batch-processing which I used that one time, and the way I open edit forms is now different but I've never used it.

So this might explain how I can link fast, and then should explain how I can link faster. JBed (talk) 18:26, March 12, 2013 (UTC)

Wow, thanks for this. Everything on this thread is quite impressive, but this one excites me the most. --Shockstorm (talk) 01:25, March 30, 2013 (UTC)

Sign button

I wrote a function that adds a button that automatically inserts four tildes into the page. It only work on Oasis:

function addSignButton()
{
  if(wgAction=="edit")
  {
    var signButton = document.createElement("input");
    signButton.id = "wpSign";
    signButton.className = "control-button";
    signButton.value = "Sign";
    signButton.type = "button";
    signButton.name = "wpSign";
    signButton.addEventListener("click", function(){insertTags('~~' + '~~','','');return false;}, false);
    var buttonParent = getElementsByClassName(document, 'nav', 'buttons');
    saveButton = document.getElementById("wpSave");
    saveButton.style.width = "80px";
    signButton.style.width = "80px";
    signButton.style.marginLeft = "6px";
    buttonParent[0].insertBefore(signButton, saveButton);
  }
}
 
addOnloadHook(addSignButton);

It appears between Preview and Publish on the edit form. Of course, it's not that hard to sign with four tildes, however you can also modify the function to make it automatically insert a talkbox. I may look into dropdowns so you can have a list of automatically inserted functions. If you know what you are doing enough, you could potentially use it to store infoboxes or page structures and immediately insert them into the page, I suspect. I haven't looked into the syntax requirements much though. JBed (talk) 15:51, March 9, 2013 (UTC)

Very nice; you already write some code like this but this is a bit more legible. C A T U S E 18:28, March 10, 2013 (UTC)

So it is. I actually used an old revision of your wikia.js to get the code for inputting characters in the page, since it uses a Wikia-made function. I didn't think you moved it to your common.

IIRC, that code appears on all pages, even non-edit forms? If it does, then that's one thing the new code I wrote can do. Although, using wgAction=="edit" will rectify the old code I wrote anyway. JBed (talk) 18:26, March 12, 2013 (UTC)

User levels

I discovered that people's user rights are stored and accessible in each page. On my test wiki I wrote some code that prevents user at sysop level from using the upload button. We could use this to prevent users who are not auto-confirmed from uploading images, or make them have to check a checkbox first making it clear that images that aren't relevant to the website will be removed.

Or something. We can pretty much do anything with this.

Although now that I think about it, this must be how the rollback links for rollback users work-- or did. I think that's in-built into Wikia now (and thus would most likely be done through PHP).

Anyway, although it's only useful to designers, the JS would be:

for(var i = 0; i < wgUserGroups.length; i++)
{
  if(wgUserGroups[i]=="[right]")/*alternatively, !="[right]"*/
  {
    //code
  }
}

JBed (talk) 00:59, March 10, 2013 (UTC)

I will look into making a template for this. So, for example, {{Ifright|sysop|You are a SysOp|You are not a SysOp}}. It could be used in Edittools, so admin-exclusive rights can be displayed for admins, for example. Or maybe in the site notice if we want to address only staff members about something. JBed (talk) 01:11, March 10, 2013 (UTC)

One small correction: Users need to be autoconfirmed to upload images. But this definitely has its uses. What you said about the sitenotice also applies to autoconfirmed -- most anons and unconfirmed users won't care about editing-related things, but autoconfirmed users might. C A T U S E 18:28, March 10, 2013 (UTC)

You know, I thought I remembered such a limitation, but I assumed I was confusing it with something else after I read that this was not the case on central Wikia.

Is auto-confirmed a Wikia-wide group? So four days registered at all of Wikia/10(?) collective edits at any Wikia wiki makes you an autoconfirmed on all Wikia wikis? 92.28.179.103 18:37, March 10, 2013 (UTC)

Pretty sure autoconfirmed isn't wikia-wide. I think that somebody just requested that autoconfirmed was mandatory before uploading here. C A T U S E 18:42, March 10, 2013 (UTC)

Aah, okay. JBed (talk) 19:00, March 10, 2013 (UTC)

I developed {{ifgroup}}. If it works as it should, there should be a list towards the bottom of the section that essentially states which groups you are in. JBed (talk) 19:00, March 10, 2013 (UTC)

Mix X-2

See Mix (Final Fantasy X-2). This is what we can do with JS. Before we start thinking of places we could do this, no we can't do this for FFX unless we know the mechanics. Yes, I could do it for Al Bhed. JBed (talk) 18:51, March 12, 2013 (UTC)

Also, it is entirely possibly to take that JS and write short function so it outputs every single possible combination and outcome onto a page. I could even format it like Final Fantasy X mixes, but with the combobox I'm not sure there would be much of a point...? JBed (talk) 18:54, March 12, 2013 (UTC)

Moving Languages information in Oasis

I dislike the placement of the language box in Oasis, where it is right at the bottom of the page. So some JS to move it to an easier to read place:

var langBox = getElementsByClassName(document,"nav","WikiaArticleInterlang")[0];
if(langBox)
{
document.getElementById("WikiaRecentActivity").parentNode.insertBefore(langBox,document.getElementById("WikiaRecentActivity"));
langBox.style.margin="0px";
langBox.style.padding="10px 0 0 10px";
var divClear = document.createElement("div");
divClear.style.clear="both";
langBox.appendChild(divClear);
}

Implement wikiwide? It's my preference, but does anyone else have an opinion? JBed (talk) 00:17, March 15, 2013 (UTC)

I'll do it if no one else has an opinion. JBed (talk) 18:07, March 19, 2013 (UTC)

The language box is basically unusable where it is. Do it. C A T U S E 16:39, March 20, 2013 (UTC)

IRC login

This idea is based off something Bluestar tried to do long ago. But that floated above the page, this goes into the rail and doesn't look out of place.

This only appears on pages with a rail. Which means the main page and the RC don't have it, which are probably the most important to have the IRC box, but I'll work on something if there is a demand..

if(wgAction=="view" && wgTitle != "IRC")
{
  var rail = document.getElementById("WikiaRail");
  if(rail)
  {
    var ircBox = document.createElement("div");
    ircBox.id = "ircBox";
    ircBox.style.background = "none repeat scroll 0 0 white";
    ircBox.style.border = "1px solid #CCCCCC";
    ircBox.style.marginBottom = "10px";
    ircBox.style.padding = "20px 15px 15px";
    ircBox.style.position = "relative";
    ircBox.innerHTML = ''
         + '<span style="font-size:medium; font-weight:bold">'
          + 'Join us on IRC!'
         + '</span><br/>'
         + '<div id="ircform_container">'
          + '<form id="ircform" method="get" action="http://irc.wikia.com/" name="loginform">'
           + '<span style="width:75px;display:block">Username:</span>'
           + '<input type="text" name="nick" value=""> '
           + '<input type="submit" value="Login"><br/><br/>'
           + '<span style="width:75px;display:block">Channel:</span>'
          + '</form>'
         + '</div>';
    var selectThing = document.createElement("select");
    selectThing.name = "channels";
    selectThing.innerHTML = ''
          + '<optgroup label="Final Fantasy Wiki">'
           + '<option>#Wikia-FF</option>'
          + '</optgroup><optgroup label="Wikia">'
           + '<option>##wikia</option>'
           + '<option>#wikia-vstf</option>'
          + '</optgroup>'
    rail.appendChild(ircBox);
    document.getElementById("ircform").appendChild(selectThing);
  }
}

Not looking to implement WikiWide, as I don't like the idea of forcing the IRC login in the faces of those who do not want IRC. If I were to implement WikiWide, I'd limit it to Autoconfirmed users. If I brush up on my cookies then I could have it so the username automatically inserts into the username field... probably. JBed (talk) 18:07, March 19, 2013 (UTC)

If people on the IRC are interested, you could possibly create a MediaWiki:Importables/irclogin.js and let users who want to use this JS import it into their personal JS. I might play around with it later today and see if I can get it to work in the Monobook sidebar, since most IRC visitors mainly use Monobook. C A T U S E 16:42, March 20, 2013 (UTC)

I was thinking of making the IRC think a pop-out for monobook. Like dropdowns, but it would go out sideways. I've never properly worked with something like that before but that's half the fun.

Also with JS, I think I could be able to just put it in a function and never load it. People should only have to write an addOnloadHook function containing the function name and it should work. --It would mean it would have to go in a function rather than being loaded from the page, but since it goes at the bottom of the rail I don't think it will make that much difference. JBed (talk) 18:45, March 20, 2013 (UTC)

I really do need to teach myself JS, maybe over the summer... anyone interested in seeing what a lot of groping around in the dark lead to can look here. I'll probably play around with it tomorrow for fun and profit, and make it not as intrusive/ugly. C A T U S E 05:57, March 26, 2013 (UTC)

I'll make some tweaks and see what I can do with it. JavaScript is a rather archaic language. jQuery is where it's at. I know jQuery is easy to learn, I just don't have to do it enough to get the hang of it. It might still be good to learn JavaScript first, but element and property handling becomes much easier in jQuery (it uses CSS selectors to get elements, as well as using more sensible naming schemes), and it also has a number of in-built functions.

Also, back to the IRC, I'm thinking of setting up a cookie for the IRC so the name you input is remembered and automatically input on every page load. Then I can use this cookie to decide whether to display the IRC form on every page. So it means if you ever log in the IRC page, from then on (until you clear your cookies or after an elapsed time without logging into the IRC) the IRC box will appear. --I could also add a dismiss button to have the cookie deleted. But to do all this I need to figure out cookie-handling in JS first. 2.102.228.162 15:04, March 26, 2013 (UTC)

Try this for monobook:

if(wgAction=="view" && wgTitle != "IRC")
{
  var rail = document.getElementById("column-one");
  if(rail)
  {
    var ircBox = document.createElement("div");
    ircBox.id = "ircBox";
    ircBox.className = "portlet";
    ircBox.innerHTML = ''
         + '<h5>IRC login</h5>'
         + '<div class="pBody" id="ircform_container" style="font-size:11px;padding:4px">'
          + '<form id="ircform" method="get" action="http://irc.wikia.com/" name="loginform">'
           + '<span style="width:75px;display:block">Username:</span>'
           + '<input type="text" name="nick" value="" size="18"> '
           + '<input type="submit" value="Login" style="font-size:95%;margin:2px 0 10px 34px"><br/>'
           + '<span style="width:75px;display:block">Channel:</span>'
          + '</form>'
         + '</div>';
    var selectThing = document.createElement("select");
    selectThing.name = "channels";
    selectThing.style.width="100%";
    selectThing.innerHTML = ''
          + '<optgroup label="Final Fantasy Wiki">'
           + '<option>#Wikia-FF</option>'
          + '</optgroup><optgroup label="Wikia">'
           + '<option>##wikia</option>'
           + '<option>#wikia-vstf</option>'
          + '</optgroup>'
    var afterElement = document.getElementById("p-tb");
    rail.insertBefore(ircBox,afterElement);
    document.getElementById("ircform").appendChild(selectThing);
  }
}

JBed (talk) 16:03, March 26, 2013 (UTC)

Well, I have it working. A cookie called "ircName" is stored when you login and stays for 7 days. The IRC login box will only appear on the IRC project page initially, but if you use it to login it will then appear on all pages. The last name you typed into the IRC box is then placed there on page load. Every time you login, the 7 days in renewed--- so if you do not enter the IRC through the IRC login for 7 days, the cookie will expire, and you will have to return to the login form on the IRC page for it to appear again.

The cookie is stored on the computer, not the account. So even if you aren't logged-in the IRC box will appear with your last typed username. JBed (talk) 13:46, March 29, 2013 (UTC)

---

And it's all implemented. If you log in through the login box on Project:IRC, a cookie will be stored with your username. This cookie will remain for seven days. So if you login to the IRC once, and then don't for the next seven days, your username will no longer be in a cookie.

The cookie does two things: Auto-fills the IRC box with your username and allows an IRC box to come up in the monobook sidebar/WikiaRail. So if you log in through Project:IRC, for the next seven days the IRC box will be appearing in those places.

I still haven't developed anything for the RC for Oasis (since RC doesn't have the rail). Nor the main page, but I might give that a miss. JBed (talk) 01:38, April 13, 2013 (UTC)