Made the hostnames clickable and open new tabs (yay)

Author: Jamie Curnow

src/frontend/js/app/nginx/dead/list/item.ejs

@@ -6,9 +6,15 @@
 <td>
     <div>
         <% domain_names.map(function(host) {
-            %>
-            <span class="tag"><%- host %></span>
-            <%
+            if (host.indexOf('*') === -1) {
+                %>
+                <span class="tag host-link hover-red" rel="http<%- certificate_id ? 's' : '' %>://<%- host %>"><%- host %></span>
+                <%
+            } else {
+                %>
+                <span class="tag"><%- host %></span>
+                <%
+            }
         });
         %>
     </div>

src/frontend/js/app/nginx/dead/list/item.js

@@ -9,8 +9,9 @@ module.exports = Mn.View.extend({
     tagName:  'tr',
 
     ui: {
-        edit:   'a.edit',
-        delete: 'a.delete'
+        edit:      'a.edit',
+        delete:    'a.delete',
+        host_link: '.host-link'
     },
 
     events: {
@@ -22,6 +23,12 @@ module.exports = Mn.View.extend({
         'click @ui.delete': function (e) {
             e.preventDefault();
             App.Controller.showNginxDeadDeleteConfirm(this.model);
+        },
+
+        'click @ui.host_link': function (e) {
+            e.preventDefault();
+            let win = window.open($(e.currentTarget).attr('rel'), '_blank');
+            win.focus();
         }
     },
 

src/frontend/js/app/nginx/proxy/list/item.ejs

@@ -6,9 +6,15 @@
 <td>
     <div>
         <% domain_names.map(function(host) {
-            %>
-            <span class="tag"><%- host %></span>
-            <%
+            if (host.indexOf('*') === -1) {
+                %>
+                <span class="tag host-link hover-green" rel="http<%- certificate_id ? 's' : '' %>://<%- host %>"><%- host %></span>
+                <%
+            } else {
+                %>
+                <span class="tag"><%- host %></span>
+                <%
+            }
         });
         %>
     </div>

src/frontend/js/app/nginx/proxy/list/item.js

@@ -9,8 +9,9 @@ module.exports = Mn.View.extend({
     tagName:  'tr',
 
     ui: {
-        edit:   'a.edit',
-        delete: 'a.delete'
+        edit:      'a.edit',
+        delete:    'a.delete',
+        host_link: '.host-link'
     },
 
     events: {
@@ -22,6 +23,12 @@ module.exports = Mn.View.extend({
         'click @ui.delete': function (e) {
             e.preventDefault();
             App.Controller.showNginxProxyDeleteConfirm(this.model);
+        },
+
+        'click @ui.host_link': function (e) {
+            e.preventDefault();
+            let win = window.open($(e.currentTarget).attr('rel'), '_blank');
+            win.focus();
         }
     },
 

src/frontend/js/app/nginx/redirection/list/item.ejs

@@ -6,9 +6,15 @@
 <td>
     <div>
         <% domain_names.map(function(host) {
-            %>
-            <span class="tag"><%- host %></span>
-            <%
+            if (host.indexOf('*') === -1) {
+                %>
+                <span class="tag host-link hover-yellow" rel="http<%- certificate_id ? 's' : '' %>://<%- host %>"><%- host %></span>
+                <%
+            } else {
+                %>
+                <span class="tag"><%- host %></span>
+                <%
+            }
         });
         %>
     </div>

src/frontend/js/app/nginx/redirection/list/item.js

@@ -9,8 +9,9 @@ module.exports = Mn.View.extend({
     tagName:  'tr',
 
     ui: {
-        edit:   'a.edit',
-        delete: 'a.delete'
+        edit:      'a.edit',
+        delete:    'a.delete',
+        host_link: '.host-link'
     },
 
     events: {
@@ -22,6 +23,12 @@ module.exports = Mn.View.extend({
         'click @ui.delete': function (e) {
             e.preventDefault();
             App.Controller.showNginxRedirectionDeleteConfirm(this.model);
+        },
+
+        'click @ui.host_link': function (e) {
+            e.preventDefault();
+            let win = window.open($(e.currentTarget).attr('rel'), '_blank');
+            win.focus();
         }
     },
 

src/frontend/scss/tabler-extra.scss

@@ -3,6 +3,18 @@ $yellow: #f1c40f;
 $blue: #467fcf;
 $pink: #f66d9b;
 
+.tag.hover-green:hover, .tag.hover-green:active, .tag.hover-green:focus {
+    background-color: #5eba00;
+    cursor: pointer;
+    color: #fff;
+}
+
+.tag.hover-red:hover, .tag.hover-red:active, .tag.hover-red:focus {
+    background-color: #cd201f;
+    cursor: pointer;
+    color: #fff;
+}
+
 /* For Card bodies where I don't want padding */
 .card-body.no-padding {
     padding: 0;
@@ -28,6 +40,12 @@ $pink: #f66d9b;
     border-color: $teal;
 }
 
+.tag.hover-teal:hover, .tag.hover-teal:active, .tag.hover-teal:focus {
+    background-color: $teal;
+    color: #fff;
+    cursor: pointer;
+}
+
 /* Yellow Outline Buttons */
 .btn-outline-yellow {
     color: $yellow;
@@ -48,6 +66,12 @@ $pink: #f66d9b;
     border-color: $yellow;
 }
 
+.tag.hover-yellow:hover, .tag.hover-yellow:active, .tag.hover-yellow:focus {
+    background-color: $yellow;
+    cursor: pointer;
+    color: #fff;
+}
+
 /* Blue Outline Buttons */
 .btn-outline-blue {
     color: $blue;
@@ -68,6 +92,12 @@ $pink: #f66d9b;
     border-color: $blue;
 }
 
+.tag.hover-blue:hover, .tag.hover-blue:active, .tag.hover-blue:focus {
+    background-color: $blue;
+    cursor: pointer;
+    color: #fff;
+}
+
 /* Pink Outline Buttons */
 .btn-outline-pink {
     color: $pink;
@@ -88,6 +118,11 @@ $pink: #f66d9b;
     border-color: $pink;
 }
 
+.tag.hover-pink:hover, .tag.hover-pink:active, .tag.hover-pink:focus {
+    background-color: $pink;
+    cursor: pointer;
+}
+
 /* dimmer */
 
 .dimmer .loader {