URL for icons

README.md

@@ -218,6 +218,7 @@ The icon's key will be used as the text value, therefore icon names have to be u
   - `topMiddle`: Position the text along the top, centered.
   - `topRight`: Position the text along the top, in the right corner.
   - Example: `textLocation: rightMiddle`
+- `url`: (default: none) A link/URL for the icon text
 - `w`: (default: 1) The width of the icon.
 - `x`: (default: none) The x-coordinate location of the icon.
   - `n`: An absolute position.

build/js/dld4e-icons.js

@@ -24,6 +24,12 @@ var drawIcons = function (svg, diagram, icons, iconTextRatio) {
     .each( function(d) {
       d.value.fontSize = Math.floor(Math.min(d.value.width*.9 / this.getComputedTextLength() * 12, d.value.height/2*iconTextRatio))
       d.value.textPosition = textPositions(0,0,d.value.width,d.value.height,d.value.fontSize + 2)[d.value.textLocation]
+      if (d.value.url) {
+        var text = d3.select(this)
+        text.on("click", function() { window.open(d.value.url); })
+        text.style("cursor", "pointer")
+        text.style("text-decoration", "underline")
+      }
     })
     .style("font-size", function(d) { return d.value.fontSize + "px"; })
     .attr("id", function(d) { return d.key + '-text'})
@@ -32,10 +38,6 @@ var drawIcons = function (svg, diagram, icons, iconTextRatio) {
     .attr("text-anchor", function(d) { return d.value.textPosition.textAnchor})
     .attr("dominant-baseline", "central")
 
-  // var icon = cells.append('g')
-  //   .attr("x", function(d) { return d.value.width*.2 })
-  //   .attr("y", function(d) { return d.value.height*.2})
-
   var icon = cells
     .each ( function(d) {
       var cell = document.getElementById(d.key)

examples/urls.yaml

@@ -0,0 +1,27 @@
+diagram:
+  fill: "white"
+  rows: 5
+  columns: 4
+  gridLines: false
+title:
+  color: black
+  fill: none
+  logoFill: white
+  stroke: black
+  text: "URLs"
+  type: bar
+cisco: &cisco
+  x: "+1"
+  color: "#004BAF"
+  fill: "white"
+  iconFamily: "cisco"
+  icon: "router"
+  iconFill: "#004BAF"
+  iconStrokeWidth: .25
+  preserveWhite: true
+  stroke: "none"
+icons:
+  router1: {<<: *cisco, x: 0, y: 2, text: "no link", }
+  router2: {<<: *cisco, text: "telnet", url: "telnet://route-server.cerf.net"}
+  router3: {<<: *cisco, text: "ssh", url: "ssh://[email protected]"}
+  router4: {<<: *cisco, text: "http", url: "http://drawthe.net"}

index.html

@@ -102,6 +102,7 @@
                 <li role="menuitem" ng-click="example('relative positions.yaml')"><a href="javascript:void(0);">Relative positions</a></li>
                 <li role="menuitem" ng-click="example('sample.yaml')"><a href="javascript:void(0);">Sample</a></li>
                 <li role="menuitem" ng-click="example('text locations.yaml')"><a href="javascript:void(0);">Text locations</a></li>
+                <li role="menuitem" ng-click="example('urls.yaml')"><a href="javascript:void(0);">URLs for icons</a></li>
               </ul>
             </div>
             <div class="btn-group" uib-dropdown is-open="status.isopen2" ng-show="shown">
@@ -277,7 +278,7 @@
     $scope.linkText = " Copied to clipboard"
     $timeout(function () {
       $scope.linkText = "Link"
-    }, 1000);
+    }, 200);
   }
 
   $scope.fork = function() {
@@ -327,7 +328,7 @@
              $timeout(function () {
                $scope.saveIcon = "glyphicon glyphicon-floppy-disk";
                $scope.state = "Update";
-             }, 1000);
+             }, 200);
            },
            function(response){
              $scope.saveIcon = "glyphicon glyphicon-alert";
@@ -350,7 +351,7 @@
                $scope.saveIcon = "glyphicon glyphicon-ok-circle"
                $timeout(function () {
                  $scope.saveIcon = "glyphicon glyphicon-floppy-disk"
-               }, 1000);
+               }, 200);
 
              },
              function(response){