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" } } },
CODEIn 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"});
CODE
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) {
CODESelect the table with regular classes and ids. The name is unimportant.
CustomWidgets .registerWidget({ selector: "tableSelector", name: "scrollableTable" });
CODE