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" });