Dynamic Link Custom Tile

dynamicLinkCT.html

<a id="link">...</a>


<script src="https://cdn.sharptools.io/js/custom-tiles/0.2.1/stio.js"></script>
<script>
  var anchorEl = document.getElementById("link")
  
  stio.ready(function(data){
  	var urlVar = data.settings.urlVar;  
    var textValue = data.settings.textValue;
    var linkTarget = data.settings.linkTarget;

    //if the user didn't pick a variable, nudge them to do so
    if(urlVar == null){
      anchorEl.innerText = "Please configure a variable."
    }
    else{
      //set the link text
    	anchorEl.innerText = textValue || 'Link';
    }

    //set the link target
    anchorEl.setAttribute('target', linkTarget || '_blank')

    //copy the current value in as the hyperlink (href)
    setUrl(urlVar.value);
    
    //and setup a listener for variable value changes that will call the setUrl function
    urlVar.onValue(setUrl)
  })

  function setUrl(url){
    anchorEl.setAttribute('href', url)
  }
</script>

<style>
  html,body { margin: 0; padding: 0; height: 100vh;}
  #link {
    height: 100vh;
    display: flex;
    flex-direction: column; /* top to bottom */
    justify-content: center; /* vertically centered */
    align-items: center; /* horizontally centered */
    color: white;
    text-decoration: none;
    font-size: 20vw;
  }
</style>

<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
{
  "schema": "0.2.0",
  "settings": [
    {
      "type": "VARIABLE",
      "name": "urlVar",
      "label": "URL Variable",
      "filters": {"type": "String"}
    },
    {"type": "STRING", "name": "textValue", "label": "Text", "default": "Link"},
    {
      "type": "ENUM",
      "name": "linkTarget",
      "label": "Link Target",
      "default": "_blank",
      "values": [
        {"label": "Same Window", "value": "_self"},
        {"label": "New Window", "value": "_blank"}
      ]
    }
  ],
  "name": "Dynamic Link Tile",
  "dimensions": {"height": 1, "width": 1}
}
</script>
<!-- Do not edit above -->