[WIP] fix_web_clipper

fix-web-clipper.js

'use strict';

// nexo
// ----------
const nexoTargets = ['.header', '#shareNxo', '.footer', '.aviso-importante-footer', '#aviso-assinantes', '.lazyimage-anchor']

const getValid = (target, selection) => 
    target ? selection.concat(target) : selection

const toSelectTargets = (selection, currentTarget) => {
    const target = document.querySelector(currentTarget);
    
    return getValid(target, selection)
}

const selection = nexoTargets.reduce(toSelectTargets, [])

const removeEachElementOf = selection => 
    selection.forEach(selected => selected.remove())

function adjustNexo( ) {
    removeEachElementOf(selection)
}
// ----------


// learn-the-web
// ----------
function setContentToEvernote() {

  Array.from(document.getElementsByClassName('unit [ xs-1 s-1 m-1-2 l-1-3 ] gutter-1-2 push')).forEach(item => {
    item.className = 'unit [ xs-1 ] gutter-1-2 push'
    item.setAttribute('style', 'margin-bottom:30px')
  })

  Array.from(document.getElementsByClassName('grid list-group cheat-list')).forEach(item => {
    item.className = 'list-group cheat-list'
    item.setAttribute('style',
      'margin-bottom:0px;margin-top:0px;')
  })

  Array.from(document.getElementsByClassName('mega gutter-1-2')).forEach(item => {
    item.setAttribute('style',
      'margin-bottom:10px;margin-top:30px;')
  })

  Array.from(document.getElementsByClassName('cheat-head')).forEach(item => {
    item.setAttribute('style',
      'margin-bottom:0px;margin-top:40px;')
  })

}
// ----------

function adjustLearnTheWebToWebClipper() {
  setContentToEvernote()
}

// ----------


// medium
// ----------

// shared: twitter, gist
function getTagFigureAncesterOf(element) {
    return element.parentNode.tagName === 'FIGURE'
        ? element.parentNode
        : getTagFigureAncesterOf(element.parentNode)
}

// twitter
function getTweetIframeElements(iframe) {       
    var iframeChildren = iframe.contentWindow.document.children[0].children[1].children[1]
    var childrenFromIframChildren = iframeChildren.contentWindow.document.children
    var headTagSource = childrenFromIframChildren[0].children[0].children
    var bodyTagSource = childrenFromIframChildren[0].children[1].children

    return {
        iframeChildren: iframeChildren,
        links: Array.from(headTagSource).filter(child => child.tagName === 'LINK'),
        tweet: bodyTagSource[0]
    }
}

function appendTweetTag(iframe, tag) {
    var placeToAppend = getTagFigureAncesterOf(iframe)
    placeToAppend.innerHTML = ''
    placeToAppend.appendChild(tag.tweet)
}

function appendTweetLinks(tag) {
    var placeToAppend = document.head
    Array.from(tag.links).map(link => placeToAppend.appendChild(link))
}

function adjustTweet() {
    var iframes = document.querySelectorAll('iframe')
    var tweetIframes = Array.from(iframes).filter(iframe => {
        var thumbnailIframe = iframe.dataset.thumbnail
        return thumbnailIframe && iframe.dataset.thumbnail.includes('twimg')
    })
	tweetIframes.forEach(tweetIframe => {
		var tag = getTweetIframeElements(tweetIframe)
		appendTweetLinks(tag)
		appendTweetTag(tweetIframe, tag)
	})
}

// gist
const getEachIframeIn = iframes => handleFunction => handleFunction(iframes)

function getGistIframeElements(iframe) {
  var iframeChildren = iframe.contentWindow.document.children[0].children[1].children
  return {
    link: Array.from(iframeChildren).filter(child => child.tagName === 'LINK')[0],
    gist: Array.from(iframeChildren).filter(child => child.className === 'gist')[0]
  }
}

function getGistIframesFrom(iframes) {
  return Array.from(iframes).filter(iframe => {
    var iframeChildren = iframe.contentWindow.document.children[0].children[1].children
    var hasGist = Array.from(iframeChildren).filter(child => child.className === 'gist')[0]

    return hasGist && iframe
  })
}

const appendGistLinkStyle = iframes => {
  iframes.forEach(iframe => {
    var tag = iframe && getGistIframeElements(iframe)
    tag.link && document.getElementsByTagName('head')[0].appendChild(tag.link)
  })
}

const appendGistDiv = iframes => {
  iframes.forEach(iframe => {
    var figure = getTagFigureAncesterOf(iframe)
    var tag = iframe && getGistIframeElements(iframe)
    if (tag.gist) {
      figure.innerHTML = ''
      figure.appendChild(tag.gist)
    }
  })
}

function adjustGithubGists() {
  var iframes = getGistIframesFrom(document.querySelectorAll('iframe'))
  var adjustIframesBy = getEachIframeIn(iframes)
  adjustIframesBy(appendGistLinkStyle)
  adjustIframesBy(appendGistDiv)
}

/// images
function handleMediaAjustBy(placeholder) {
  var ajustedMedia = getMediaElementBy(placeholder)

  correctElementsRelatedTo(placeholder).toInsert(ajustedMedia)
}

function findIn(placeholder) {
  return function andGet(target) {
    return placeholder.querySelector(target)
  }
}

function getMediaElementBy(placeholder) {
  var selectElement = findIn(placeholder)
  var isImage = selectElement('.progressiveMedia-image') || selectElement('.graf-image')
  var isIframe = selectElement('iframe')

  var mediaSource = isImage
    ? isImage.dataset.src || isImage.currentSrc
    : isIframe.dataset.thumbnail

  return createMediaImageWith(mediaSource)
}

function createMediaImageWith(mediaSource) {
  var ajustedMedia = document.createElement('img')
  getEach(attributesOf(mediaSource)).andSetIn(ajustedMedia)

  return ajustedMedia
}

function attributesOf(mediaSource) {
  return [
    { key: 'src', value: mediaSource },
    { key: 'style', value: 'width:100%;height:auto;margin:0 auto' },
  ]
}

function getEach(attributes) {
  return {
    andRemoveOf: function (element) {
      attributes.map(attributeValue => element.removeAttribute(attributeValue))
    },
    andSetIn: function (element) {
      attributes.map(attribute => {
        element.setAttribute(attribute.key, attribute.value)
      })
    }
  }
}

function correctElementsRelatedTo(placeholder) {
  var placeholderParent = placeholder.parentElement
  getEach(['height', 'width', 'style']).andRemoveOf(placeholderParent)

  return {
    toInsert: function (ajustedMedia) {
      placeholderParent.insertBefore(ajustedMedia, placeholder)
      placeholder.remove()
    }
  }
}

function adjustContentImageToEvernote() {
  var mediaPlaceholders = Array.from(document.querySelectorAll('.aspectRatioPlaceholder'))

  mediaPlaceholders.forEach(placeholder => handleMediaAjustBy(placeholder))
}

function adjustNot100Percent() {
    var images = document.querySelectorAll(".graf.graf--figure img")
    var figures = document.querySelectorAll( ".graf.graf--figure")

    images.forEach(image => image.style = '')
    figures.forEach(figure => figure.style.textAlign = 'center')
}

// ----------

function adjustMediumToWebClipper() {
  adjustGithubGists()
  adjustTweet()
  adjustContentImageToEvernote()
}
	
// ----------


// css tricks
// ----------
var images = document.querySelectorAll('.page-wrap .article-content img')

var attributes = ['srcset', 'sizes']

const removeOf = (image, attributes) => {
  attributes.forEach(attributeName => image.removeAttribute(attributeName))
}

const getThis = image => ({
  andRemove: attributes => removeOf(image, attributes)
})

const adjustAll = (attributes, images) =>
  images.forEach(image => getThis(image).andRemove(attributes))

// ----------   

function adjustCSSTricksToWebClipper() {
  adjustAll(attributes, images)
}

// ----------

// smashing magazine
// ----------
var compose = (outerFunc, innerFunc) => outerFunc(innerFunc)

var classTargets = ['.c-promo-box', '.product-panel', '.sponsors']

var getEachTargetFrom = (targets) =>
    targets.map(target => document.querySelectorAll(target)) 

var flatEachArrayOf = (arrays) =>
    arrays.reduce((previous, current) => 
        previous.concat(...current),[])

var smashingMagazineTargets = compose(flatEachArrayOf, getEachTargetFrom(classTargets))

// ----------

function adjustSmashingMagazineToWebClipper() {
    smashingMagazineTargets.forEach(target => target.remove())
}

// ----------


// --------------------------------------------------

const hostNamesFunctions = {
  'medium': adjustMediumToWebClipper,
  'css-tricks': adjustCSSTricksToWebClipper,
  'learn-the-web': adjustLearnTheWebToWebClipper,
  'smashingmagazine': adjustSmashingMagazineToWebClipper,
  'nexojornal': adjustNexo
}

function checkIsMediumVariation() {
  var iconLinks = document.querySelectorAll('link[rel="icon"]')

  return hasMedium(iconLinks) && 'medium'
}

function hasMedium(iconLinks) {
  return Array.from(iconLinks).filter(link => {
    var linkString = link.href.toString()
    return linkString.includes('medium')
  }).length > 0
}

const getCompatibleSite = site =>
  Object.keys(hostNamesFunctions).includes(site)
    ? site
    : checkIsMediumVariation()

const getSiteNameFrom = hostname => hostname.replace('www\.','').split('\.')[0]

function adjustForWebClipper() {
  var hostname = window.location.hostname
  var siteName = getCompatibleSite(getSiteNameFrom(hostname).toString())

  return hostNamesFunctions[siteName]()
}

// --------------------------------------------------