main.js

main.js is a file inside the whiteCollar that defines various elements of a customer's Marfeel Progressive WebApp (PWA) such as a publisher's commenting system, metrics configuration, and image galleries.

The following article provides usage examples of configurations in the main.js.

Embed custom commenting system

Locate the commenting system to add in the publisher's articles.
Identify the container for each comment and the answers form.

Select the containers and paste them in the definition.json.

"userInterface":{
    "features":{
        "commentingSystem":"embedComments"
    }
},
"snippets" : {
    "simpleCommentsSnippet": {
        "params":{
            "cssSelector": "eachCommentSelectors, fullWriteRespondSelectors"
        }
    }
},

In js/main.js before the return:

define([...,
"marfeel/touch/detailsDecorator/CustomComments",
"marfeel/touch/detailsDecorator/CustomEmbedComments"], function(..., CustomComments, CustomEmbedComments) {

...

 CustomComments.register({selector: ".mrf-embedComments", name: "embedComments"});

Image Gallery RegEx reSize

A RegEx can be added to resize gallery images by substituting "/small/" and "/big/" as appropriate:

var marfeel = window.marfeel || {};
marfeel.tenant = marfeel.tenant || {};

marfeel.tenant.ImageGallery = {
    getBiggerImage: function (img, src) {
        var regex = new RegExp("/small/"), bigImageSrc;
        if (regex.test(src)) {
            bigImageSrc = src.replace(regex, "/big/");
        }
        return bigImageSrc ? bigImageSrc : src;
    }
};

Metrics

To import the metrics used:

define(["marfeel/touch/metrics/Metrics",
    "marfeel/touch/metrics/Quantcast",
    "marfeel/touch/metrics/Comscore",
    "marfeel/touch/metrics/JetPack",
    "marfeel/touch/metrics/StatCounter",
    "marfeel/touch/metrics/Chartbeat",
    "marfeel/touch/metrics/Xiti",
    "marfeel/touch/metrics/Alexa"
],function(Metrics, Quantcast, Comscore, JetPack, StatCounter, Chartbeat, Xiti, Alexa)

To pass metrics in main.js body:

Metrics.addAnalytics({
    name:"test",
    trackCode: "test"
})
.addTracker(new Quantcast("qacct"))
.addTracker(new Comscore("c2"))
.addTracker(new JetPack("blog", "tz"))
.addTracker(new StatCounter("sc_project", "sc_invisible", "sc_security"))
.addTracker(new Nielsen("countryCode", "ci", "cg"))
.addTracker(new Alexa("acct"))
.addTracker(new Chartbeat(
    "code_number",
    "tenant.com",
    function(){
        return { section: "", author: "" };
    },
    function (author){
        return author;
    }
));

//Xiti

marfeel.tenant.Analytics = marfeel.tenant.Analytics || {};

// Xiti

marfeel.tenant.Analytics.Xiti = {
    site: "552328",
    domain: function() {
        return 'http://logc202'
    },
    getPparameter: function(pageName, sectionName, navigationLevel) {
        var p;
        if(navigationLevel === "details" || navigationLevel === "gallery" || (navigationLevel === "mosaic" && sectionName === "home" && pageName != "/")) {
            p = pageName.replace(/\//g,'::');
        }
        else {
            p = sectionName;
        }
        return p;
    },
    getS2parameter: function() {
        return '5';
    }
};

Google Universal analytics are identified by the presence of the file "analytics.js" in the source code:

Metrics.addUniversalAnalytics({
            trackCode: "UA-000000-0",
            options: {
                'name': 'tenant'
            }
        });

Otherwise the source code includes a "ga.js" file and is registered in Marfeel as:

Metrics.addAnalytics({
            name:"tenant",
            trackCode: "UA-000000-0"
        });

The name of the tenant cannot contain capital letters or signs (for example, !,?,$,%,&, etc.).

The field name cannot contain any character such as “/,(,etc." It can only be letters and numbers.

Metrics in Charles

The URLs of the metrics are the following and should be treated with close attention:

Google Analytics: http://www.google-analytics.com
Quantcast:
Comscore: http://b.scorecardresearch.com
JetPack: http://pixel.wp.com
StatCounter: http://c.statcounter.com
Nielsen:
Chartbeat: http://ping.chartbeat.net

Scrollable Tables

To arrange tables and display it in an iframe:

Import module:

define(["...,
"marfeel/touch/widgets/ScrollableTable"],  function(..., ScrollableTable) {

Select the table with regular classes and ids. The name is unimportant.

CustomWidgets
    .registerWidget({
        selector: "tableSelector",
        name: "scrollableTable"
    });