Usage guidance

Background Images for Mosaic

Just add the node which has the background image as doing with normal images.

media:articleNode.querySelectorAll('div.backgroundImg'),
CODE


Columns

Site has x num of Columns. Define the number of columns in Whitecollar's main.js below document.whiteCollar:

document.whiteCollar = {
    numColumns: 3,
CODE


InnerText / TextContent in the WhiteCollar

If text is not picked up for the title or any other category, substitute the .innerText tag for .textContent.

Limit Extracted Articles

Normally not more than 60 articles per section are allowed due to ads revenue drop the lower are positioned. Another criteria might apply.

//www.example.com/index/src/whiteCollar/main.js

document.LIMIT_NEWS = 60;
document.extractedNews = 0;

if(document.extractedNews < document.LIMIT_NEWS) {
    document.extractedNews += 1;
} else {

    item = null;
}



return item;
CODE


OR Selector

Add OR ( || ) for a second selector shall first be null:

title:articleNode.querySelector('h1')|| articleNode.querySelector('a'),
uri:articleNode.querySelector('.link')|| articleNode.querySelector('a')
CODE

From the selection get the attributes after the var item:

if(item.title) {
item.title = item.title.innerText;
}

if(item.uri) {
item.uri = item.uri.href;
}
CODE

 

Selectors for a Specific Tag

Target a specific HTML Tag, class or id and apply to it its whiteCollar:

document.whiteCollar = {
getItems: function () {
    return document.querySelectorAll(".box, .videokiker");
},

getItem: function(articleNode) {
    var item = {};

    if(articleNode.className.indexOf('videokiker') >= 0 ) {
        item = {
            title:articleNode.querySelector('div + a'),
            uri:articleNode.querySelector('div + a').href,
            media:articleNode.querySelectorAll('img')
        };
    } else {
        item = {
            title:articleNode.querySelector('h1')|| articleNode.querySelector('a'),
            uri:articleNode.querySelector('h1 > a')|| articleNode.querySelector('a'),
            media:articleNode.querySelectorAll('img')
        };
    }

    if(item.title) {
        item.title = item.title.innerText;
    }

    if(item.uri) {
        item.uri = item.uri.href;
    }

    return item;
}
};
CODE

 

Uri Returns Null

Do not pick up uris if contain a pattern in it.

if(item.uri.indexOf('pattern') >= 0) {
        return null;
    }
CODE


whiteCollar Template

Basic template with all article's options. Can be further customized.

document.whiteCollar = {
getItems: function () {
    return document.querySelectorAll("");
},

getItem: function(articleNode) {
    var item = {
        title:articleNode.querySelector('').innerText,
        uri:articleNode.querySelector('a').href,
        media:articleNode.querySelectorAll('img'),
        subtitle:articleNode.querySelector(''),
        pocket: {
            categories: articleNode.querySelectorAll('')
        },
        author:articleNode.querySelector(''),
        date:articleNode.querySelector('.date'),
        excerpt:articleNode.querySelector('')
    };

    if(item.subtitle) {
        item.subtitle = item.subtitle.innerText;
    }

    var categoriesNode = item.pocket.categories;
    if(categoriesNode) {
        var categories = [];
        for(var i = 0; i < categoriesNode.length; i++) {
            categories.push(categoriesNode[i].innerText);
        }
        item.pocket.categories = categories
    }

    if(item.author){
        item.author = {
            name: item.author.innerText
        }
    }

    if(item.date) {
        item.date = item.date.innerHTML;
    }

    if(item.excerpt) {
        item.excerpt = item.excerpt.innerText;
    }

    return item;
}
};
CODE

 

Usage

getItems: all selectors for the articles from tenant's Mosaic view.

getItem: Select the items (title, uri, ...) from the selected articles in getItems. Minimum required fields are title and uri. Unused fields must be removed, and its conditionals (if(item.field...)). Adapt this file to your needs.

Example from thediplomat.com:

document.whiteCollar = {
getItems: function () {
    return document.querySelectorAll(".firstPost > a, .rowWrapper > .row");
},

getItem: function(articleNode) {
    var item = {
        title:articleNode.querySelector('.postTitle, .postPrevTitle').innerText,
        uri:articleNode.querySelector('.postPrevImage').parentNode.href || articleNode.querySelector('a.row_link').href,
        author:articleNode.querySelector('.postAuthor'),
        date:articleNode.querySelector('.postDate'),
        excerpt:articleNode.querySelector('.postTeaser, .postPrevTeaser')
    };

    if(item.author){
        item.author = {
            name: item.author.innerText
        }
    }

    if(item.date) {
        item.date = item.date.innerHTML;
    }

    if(item.excerpt) {
        item.excerpt = item.excerpt.innerText;
    }

    return item;
}
};
CODE