at-link.html

<link rel="import" href="../tangere/tangere.html">
<link rel="import" href="../at-core-style-classes/at-core-style-classes.html">

<dom-module id="at-link">
  <template>
    <style include="at-core-style-classes"></style>
    <style>
      :host {
        display: inline;
        box-sizing: border-box;
        pointer-events: auto;    /* ensure that links work even when vlist is disabled */
      }

      [disabled] {
        pointer-events: none;
      }

      .active {
        background-color: var(--at-active-background-color);
      }

      #link {        
        text-decoration: none;
      }
      
      .a {
        color: red;
      }
      
     .action,  .action:visited {
       color: var(--at-action-color) !important;
       cursor: pointer;
     }
      
     .action:hover {
       color: var(--at-action-color-hover) !important;
       cursor: pointer;
     }
    </style>
    <a id="link" href="{{href}}" xref="{{xref}}" on-click="_ignoreEvent" on-tap="_handleLink" on-contextmenu="_handleLink" draggable="false">
      <slot class="action"></slot>
    </a>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'at-link',
    properties: {
      href: {
        type: String,
        value: ""
      },
      xref: {
        type: String,
        value: ""
      },
      signal: {
        type: String,
        value: ""
      },
      label: {
        type: String,
        value: "",
        title: "label link for activity tracking"
      },
      signalData: {
        type: String,
        value: ''
      }
    },
    _ignoreEvent: function (e) {
      e.preventDefault();
      e.stopPropagation();
      return false;
    },

    attached: function () {

      // copy "outer" className to "inner" link
      this._setClassList(this.$.link, this.className);

    },

    _handleLink: function (e) {

      // allow childs to set a different target url, if not provided use default url
      var href = this.href, el = this, xref = this.xref || this.href;
      if (Tangere.session.embedded) href = xref;

      if (!href && e.url) {
        href = e.url;
        el = e
      };

      if (!href && e.currentTarget && e.currentTarget.href) {
        href = e.currentTarget.href;
        el = e.currentTarget
      };

      if (!href && e.currentTarget.attributes && e.currentTarget.attributes.url) {
        href = e.currentTarget.attributes.url.value;
        el = e.currentTarget
      };

      if (!href && e.detail && e.detail.sourceEvent && e.detail.sourceEvent.currentTarget && e.detail.sourceEvent.currentTarget.href) {
        href = e.detail.sourceEvent.currentTarget.href;
        el = e.detail.sourceEvent.currentTarget
      };


      if (!href && !this.signal) console.log("handLink Url missing");

      if (href.indexOf("#?") == 0) {
        // hrefs starting with #? just change parameters
        href = this._updateHrefParameters(href.substring(2));
      } else if (href.indexOf("#") == 0) {
        var elName = href.substring(1, (href + "?").indexOf("?"));

        // expand relative name with name prefix
        if (elName.indexOf("/") < 0) {

          var elNameOrg = elName;
          var resolve = { namePrefix: "" };
          this.fire("resolve-name-prefix", resolve);
          var prefix = resolve.namePrefix;

          if (elName == "default.view") elName = "";
          elName = elName.replace("default.", "");

          elName = prefix + "/" + prefix + (elName ? ("-" + elName.replace(".", "-")) : "");

          href = href.replace("#" + elNameOrg, "#" + elName);
        }
      }

      // try to get link tracking context
      var trackingContext = { track: null };
      this.fire("resolve-tracking-context", trackingContext, { bubbles: true });

      if (trackingContext.track != null) {
        if (this.label) trackingContext.track.label = this.label;
        trackingContext.track.url = href;
        Polymer.signal("log-event", trackingContext.track);
      };

      // rightclick - just update href, browser might open url in new tab
      if (e && e.type == "contextmenu") {
        el.href = href;
        return;
      }

      // highlight current element
      if (el) {
        Polymer.dom(el).classList.add("active");
        setTimeout(function () {
          Polymer.dom(el).classList.remove("active");
        }.bind(this), 300);
      }

      // when running in IFrame and we also have a direct link to the external url open it
      if (el && el.getAttribute("xref")) {

        // running in embeded mode
        if (window.parentIFrame != null) {
          href = el.getAttribute("xref");
          window.parentIFrame.sendMessage({
            cmd: "navigate-to",
            url: href
          });
          return;
        }

        // chrome extension -> open in new tab
        if (window.chrome &&  chrome.runtime && !!chrome.runtime.id) {
          href = el.getAttribute("xref");
          window.open(href, '_blank');
          return;
        }
      }


      // if signal= is provided we just send a signal
      if (!!this.signal) {
        el.href = "#";
        var arg = { data: this.signalData, sender: this };
        Polymer.signal(this.signal, arg);
        return false;
      }

      // convert absolute link to app to relative
      if (href.indexOf(window.location.origin + window.location.pathname + "#") == 0) {
        href = href.substring(href.indexOf("#"));
      }

      if (href) {
        if (href.indexOf("#") == 0) {

          Polymer.signal("busy-start-async");
          Polymer.signal("navigate-to", href);

        } else {
          window.open(href, '_blank');
        }
      }

      if (e) {
        e.preventDefault();
        e.stopPropagation();
      }
      return false;
    },

    _updateHrefParameters: function (params) {
      var hash = window.location.hash;
      var args = {};
      var app = "", href = "";

      if (hash.indexOf("#!") == 0) {
        hash = hash.substr(2);
      } else if (hash.indexOf("#") == 0) {
        hash = hash.substr(1);
      }
      var hashes = hash.split('?');
      app = hashes[0];

      // extract parameters from current hash
      if (hashes.length > 1) {
        var hashes = hashes[1].split('&');

        for (var i = 0; i < hashes.length; i++) {
          var hash = hashes[i].split('=');
          if (hash.length > 1) {
            args[hash[0]] = decodeURIComponent(hash[1]);
          } else {
            args[hash[0]] = "";
          }
        }
      }

      // merge new parameters
      hashes = params.split('&');

      for (var i = 0; i < hashes.length; i++) {
        var hash = hashes[i].split('=');
        if (hash.length > 1) {
          args[hash[0]] = hash[1];
        } else {
          args[hash[0]] = "";
        }
      }

      // build new hash
      var argn = Object.getOwnPropertyNames(args).sort();
      for (var i = 0; i < argn.length; i++) {
        var argv = args[argn[i]];
        if (!!argv) href += "&" + argn[i] + "=" + (encodeURI(argv).split("%2F").join("/"));
      }

      href = "#!" + app + (!!href ? "?" + href.substring(1) : "");
      return href;
    }
  });
</script>