Customized Glosbe Dictionary - NachoTime Spanish

custom_glosbe.js

// Author: Nacho - NachoTime Spanish
// URL: bit.ly/nachotime_vocab
// License: MIT

function newLink(opts) {
  let link = document.createElement('a');
  link.href = opts.href;
  link.innerHTML = opts.content;
  link.target = opts.newTab ? '_blank' : '';
  link.style = opts.style;
  return link;
}

// Add or remove the languages you're interested in 
// (ensure that the last element doesn't have a comma)
const languages = [
  { name: 'Spanish', code: 'es' },
  { name: 'Italian', code: 'it' },
  { name: 'English', code: 'en' },
  { name: 'German', code: 'de' },
  { name: 'French', code: 'fr' },
  { name: 'Portuguese', code: 'pt' }
].reverse();

const [_url, sourceCode, targetCode, word] = location.href.match(/\.com\/(..)\/(..)\/(.+)/);
const sourceName = languages.find(x => x.code == sourceCode).name;
const targetName = languages.find(x => x.code == targetCode).name;
const phraseHeader = document.getElementById('phraseHeaderId')

const reversoLink = newLink({
  href: `http://context.reverso.net/translation/${sourceName.toLowerCase()}-${targetName.toLowerCase()}/${word}`,
  content: ' (R)',
  style: 'font-size: 1rem; color: #333333; text-decoration:none',
  newTab: true
});

const wiktionaryLink = newLink({
  href: `https://en.wiktionary.org/wiki/${word}#${sourceName}`,
  content: ' (W)',
  style: 'font-size: 1rem; color: #333333; text-decoration:none',
  newTab: true
});

const googleImagesLink = newLink({
  href: `https://www.google.com/search?q=${word}&safe=off&tbm=isch`,
  content: ' (GI)',
  style: 'font-size: 1rem; color: #333333; text-decoration:none',
  newTab: true
});

phraseHeader.appendChild(reversoLink);
phraseHeader.appendChild(wiktionaryLink);
phraseHeader.appendChild(googleImagesLink);

languages.forEach(language => {
  if (language.code !== sourceCode && language.code !== targetCode) {
    const targetName = language.name.toLowerCase();
    const glosbeLink = newLink({
      href: `https://glosbe.com/${sourceCode}/${language.code}/${word}`,
      content: language.name,
      style: 'font-size: 1rem; color: #333333; text-decoration: none; font-weight: bold',
      newTab: false
    });
    const reversoLink = newLink({
      href: `http://context.reverso.net/translation/${sourceName}-${targetName}/${word}`,
      content: ' (R)',
      style: 'font-size: 1rem; color: #3a87ad; margin-right: 20px; text-decoration: none; font-weight: bold',
      newTab: true
    });
    let span = document.createElement('span');
    span.setAttribute('class', 'language-link');
    span.appendChild(glosbeLink);
    span.appendChild(reversoLink);
    phraseHeader.insertAdjacentHTML('afterend', span.outerHTML);
  }
});