2
\$\begingroup\$

I'm working on small Javascript code that adds text from a clicked-href to the top right corner of the Wikipedia page. So for example, if I click the "Jamaican" link in Sly and Robbie, a textbox would be appended to the page on the top right.

Note: to test this code, copy it and paste it to your console, then click some links.

/**
 * My Name
 * November 24th 2015
 * Device: Mac OS X Yosemite 10.10.5
 * Editor - vim
 * Browser - Google Chrome Version 46.0.2490.86 (64-bit)
 */

'use strict';

// Detect click on href
$("a").click(function (event) {
    // Capture the href from the selected link
    var link = this.href;
    $.ajax({
        type: 'get',
        url: link
    }).done(function (data) {

        isValidWikiPage(link);

        // Find only the body text (not the titles.. or unnecessary text tips)
        var bodyText = $(data).find('#bodyContent #mw-content-text p').text();

        // Prepend the text only if there is text in the clicked link
        if (bodyText.length > 0) {
            prependText(bodyText);
        } else {
            alert("No text found!");
        }
    });

    // Prevent the link from being executed
    return false;
});

/**
 * Checks the URL to see if the link clicked
 * is a valid Wikipedia page
 * @param  {[type]}  link The clicked URL
 */
function isValidWikiPage(link) {
    // Check if link clicked is a Wikipedia page
    if (link.indexOf('wikipedia.org') <= 0) {
        // Show an alert
        alert(link + " is not a Wikipedia page!");
        // Redirect user to the new page
        window.location.href = link;
        return;
    }
}

/**
 * Prepend the thumbnail with clicked body text
 * @param  {string} text Body text
 */
function prependText(text) {
    $(".infobox .vcard .plainlist").addClass($(".infobox tbody").prepend(text));
}
\$\endgroup\$
1
\$\begingroup\$

Nice idea.

Here's a solution that breaks down each of the steps into tiny, single purpose functions, whose names reveal exactly what they do. This removes all the nesting and makes the solution easier to follow.

New logical steps:

  1. Identifying a valid link (this was always broken out in the oringal solution)
  2. "Upgrading" a link into a preview link (this is no longer coupled to 1., and can be re-used for other links)
  3. Fetching the link's html
  4. Extracting just the body text from the html
  5. Filling the preview window with text

Some ideas that might be nice:

  • It might be nice to have the preview window vanish if you click the same link again.
  • Remove old contents from preview window, rather than prepending

Other notes:

  • I put the each statement that kicks everything off at the bottom, so that you can still copy paste into the console, even though it's more logical to have it at the top, since it's the "main" method, so to speak.
  • I removed the alerts, since I didn't think they were necessary.

Refactored code:

function turnIntoPreviewLink(link) {
  $(link).click(function(e) { e.preventDefault(), previewContents(link.href); })
}

function previewContents(wikiUrl) {
  grabHtml(wikiUrl).done(function(html) {
    addContentToPreview(bodyText(html));
  })
}

function grabHtml(wikiUrl) {
  return $.ajax({ type: 'get', url: wikiUrl });
}

function bodyText(html) {
  return $(html).find('#bodyContent #mw-content-text p').text();
}

function addContentToPreview(text) {
    $(".infobox .vcard .plainlist").addClass($(".infobox tbody").prepend(text));
}

function isValidWikiPage(url) {
  return url.indexOf('wikipedia.org') >= 0;
}

$("a").each(function(i, link) {
  if (isValidWikiPage(link.href)) turnIntoPreviewLink(link);
});
\$\endgroup\$
  • \$\begingroup\$ Hi Jonah. Do you have other feedback such as on the variable names, and other JS-idiosyncracies that I am not aware of? I used 'use strict' within the code - am I doing that correctly? \$\endgroup\$ – theGreenCabbage Nov 25 '15 at 18:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.