Skip to content

Instantly share code, notes, and snippets.

@toodooleedoo
Last active May 9, 2017 17:24
Show Gist options
  • Save toodooleedoo/95e8108b81c2e00b9fea to your computer and use it in GitHub Desktop.
Save toodooleedoo/95e8108b81c2e00b9fea to your computer and use it in GitHub Desktop.
#AEM #SIGHTLY #SSJS JavaScript Use-API to append parameters and attributes to anchors

##Description

  1. Append two custom parameters to specific URL's entered by an Author.
  2. Open all links pointing outside your site inside a new window
  3. Add .html to links entered through the GUI pathfield widget (@adobe why is this not OOTB?)

##Use case When an Author selects a link via pathfield I found AEM is not adding the extension. I was going to add some Client Side JavaScript to my dialog windows to handle this on save however I also had the following business requests so I leveraged Server Side JavaScript to take care of all of this.

##Requirements

  • When a request is to domain1name.com or domain2name.com append 2 author controllable URL parameters used for Tracking which the authors could control Globally per site.
  • All external links in a new/tab widow.

##Instructions

  • Add 2 custom textfield's to the page properties
    • property1name
    • property2name
  • Place linkhandler.js anywhere you wish
  • Update linkhandler.html to point to linkhandler.js
<a data-sly-use.attr="${'../linkhandler.js' @href=${item.links1}" data-sly-attribute="${attr.link}">${item.names1}</a>
/*
* Parses incoming href to append .html if needed and target to blank if external.
*
* Designed to be utilized by Sightly for all anchor elements.
*
* TODO: Setup AEM Externalizer and remove this logic.
*
* @author: Eric Soukenka
* @since: 14Dec2014
*
* Added 31Jan2015 to add inherited page properties as url parameters for wbe links.
*
* Sightly Syntax: <a data-sly-use.attr="${'../linkhandler.js' @href=${item.links1}" data-sly-attribute="${attr.link}">${item.names1}</a>
*/
use(["/libs/wcm/foundation/components/utils/AuthoringUtils.js",
"/libs/wcm/foundation/components/utils/ResourceUtils.js",
"/libs/sightly/js/3rd-party/q.js"], function (AuthoringUtils, ResourceUtils, Q) {
var linkPromise = Q.defer();
var href = this.href;
/* First check if we need to append .html and set target location */
function getLink() {
if (typeof (href) === 'string') {
if (href.substring(0, 1) === '/' && href.substring(0, 2) !== '//') {
(href.substring(href.length - 4) !== "html" && href.indexOf("#") == -1) ? href = href + '.html' : href = href;
target = '_self';
} else {
href = href;
target = '_blank';
}
var link = {
href: href,
target: target
};
linkPromise.resolve(link)
} else {
linkPromise.reject(new Error('Failure in linkhandler: Link location not specified'))
}
return linkPromise.promise;
}
/* If link contains with domain1name.com | domain2name.com append inheritedPageProperties property1name + property2name */
anchorAttributes = getLink()
.then(function (link) {
hostExp = /.*domain1name\.com.*|.*domain2name\.com.*/;
parmExp = /.*\?.*/;
if(hostExp.test(href)) {
(parmExp.test(href)) ? link.href = link.href+'&' : link.href = link.href+'?';
ResourceUtils.getContainingPage(granite.resource)
.then(function (pageResource) {
ResourceUtils.getInheritedPageProperty(pageResource, 'property1name')
.then(function (param1value) {
link.href = link.href + 'param1name=' + param1value;
})
.then(function () {
ResourceUtils.getInheritedPageProperty(pageResource, 'property2name')
.then(function (param2value) {
link.href = link.href + '&param2name=' + param2value;
})
})
})
}
return link;
})
.fail(function (error) {
log.error(error);
return '';
});
return {
link: anchorAttributes
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment