#AEM #SIGHTLY #SSJS JavaScript Use-API to append parameters and attributes to anchors

README.md

##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

linkhandler.html

<a data-sly-use.attr="${'../linkhandler.js' @href=${item.links1}" data-sly-attribute="${attr.link}">${item.names1}</a>

linkhandler.js

/*
 * 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
    };
});