Use clipboard.js to copy ping URLs to clipboard

static/css/my_checks.css

@@ -62,10 +62,3 @@
     color: #555;
 }
 
-#show-usage-modal  .modal-dialog {
-    width: 1100px;
-}
-
-#show-usage-modal .tab-content {
-    margin-top: 15px;
-}

static/css/my_checks_desktop.css

@@ -62,15 +62,34 @@ table.table tr > th.th-name {
     visibility: hidden;
 }
 
-.show-usage {
-    opacity: 0
+button.copy-link {
+    opacity: 0;
+
+    display: inline-block;
+    width: 50px;
+
+    background: none!important;
+    border: none;
+    padding: 0!important;
+    text-align: left;
+
+    font-family: "Open Sans", Arial, sans-serif;
+    color: #0091ea;
+    cursor :pointer;
+    transition: opacity 0.1s linear;
 }
 
+button.copy-link:hover {
+    text-decoration: underline;
+}
+
+
+
 tr:hover .check-menu {
     visibility: visible;
 }
 
-tr:hover .show-usage {
+tr:hover .copy-link {
     opacity: 1
 }
 

static/js/checks.js

@@ -176,18 +176,22 @@ $(function () {
 
     });
 
-    $(".show-usage").click(function(e) {
-        var a = e.target;
-        var url = a.getAttribute("href");
-        var email = a.getAttribute("data-email");
-
-        $(".ex", "#show-usage-modal").text(url);
-        $(".em", "#show-usage-modal").text(email);
-
-        $(a).tooltip("hide");
-        $("#show-usage-modal").modal("show");
+    var clipboard = new Clipboard('button.copy-link');
+    $("button.copy-link").mouseout(function(e) {
+        setTimeout(function() {
+            e.target.textContent = "copy";
+        }, 300);
+    })
+
+    clipboard.on('success', function(e) {
+        e.trigger.textContent = "copied!";
+        e.clearSelection();
+    });
 
-        return false;
+    clipboard.on('error', function(e) {
+        var text = e.trigger.getAttribute("data-clipboard-text");
+        prompt("Press Ctrl+C to select:", text)
     });
 
+
 });

templates/front/my_checks.html

@@ -196,85 +196,6 @@
     </div>
 </div>
 
-<div id="show-usage-modal" class="modal">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal">&times;</button>
-                <ul class="nav nav-pills" role="tablist">
-                    <li class="active">
-                        <a href="#crontab" data-toggle="tab">Crontab</a>
-                    </li>
-                    <li>
-                        <a href="#bash" data-toggle="tab">Bash</a>
-                    </li>
-                    <li>
-                        <a href="#python" data-toggle="tab">Python</a>
-                    </li>
-                    <li class="hidden-xs">
-                        <a href="#node" data-toggle="tab">Node.js</a>
-                    </li>
-                    <li class="hidden-xs">
-                        <a href="#php" data-toggle="tab">PHP</a>
-                    </li>
-                    <li class="hidden-xs">
-                        <a href="#browser" data-toggle="tab">Browser</a>
-                    </li>
-                    <li class="hidden-xs">
-                        <a href="#powershell" data-toggle="tab">PowerShell</a>
-                    </li>
-                    <li class="hidden-xs">
-                        <a href="#email" data-toggle="tab">Email</a>
-                    </li>
-                </ul>
-
-            </div>
-            <div class="modal-body">
-
-
-                <div class="tab-content">
-                    {% with ping_url="<span class='ex'></span>" %}
-                    <div role="tabpanel" class="tab-pane active" id="crontab">
-                        {% include "front/snippets/crontab.html" %}
-                    </div>
-                    <div role="tabpanel" class="tab-pane" id="bash">
-                        {% include "front/snippets/bash.html" %}
-                    </div>
-                    <div role="tabpanel" class="tab-pane" id="python">
-                        {% include "front/snippets/python.html" %}
-                    </div>
-                    <div role="tabpanel" class="tab-pane" id="node">
-                        {% include "front/snippets/node.html" %}
-                    </div>
-                    <div role="tabpanel" class="tab-pane" id="php">
-                        {% include "front/snippets/php.html" %}
-                    </div>
-                    <div class="tab-pane" id="browser">
-                        {% include "front/snippets/browser.html" %}
-                    </div>
-                    <div class="tab-pane" id="powershell">
-                        {% include "front/snippets/powershell.html" %}
-                    </div>
-                    <div class="tab-pane" id="email">
-                            As an alternative to HTTP/HTTPS requests,
-                            you can "ping" this check by sending an
-                            email message to
-                            <div class="email-address">
-                                <code class="em"></code>
-                            </div>
-                    </div>
-                    {% endwith %}
-                </div>
-
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Got It!</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-
 {% endblock %}
 
 {% block scripts %}
@@ -282,6 +203,7 @@
 <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
 <script src="{% static 'js/nouislider.min.js' %}"></script>
+<script src="{% static 'js/clipboard.min.js' %}"></script>
 <script src="{% static 'js/checks.js' %}"></script>
 {% endcompress %}
 {% endblock %}

templates/front/my_checks_desktop.html

@@ -39,12 +39,11 @@
             <span class="my-checks-url">
                 <span class="base">{{ ping_endpoint }}</span>{{ check.code }}
             </span>
-            <a
-                href="{{ check.url }}"
-                class="btn btn-xs btn-default show-usage hidden-sm"
-                data-email="{{ check.email }}">
-                show usage
-            </a>
+            <button
+                class="copy-link hidden-sm"
+                data-clipboard-text="{{ check.url }}">
+                copy
+            </button>
         </td>
         <td class="timeout-cell">
             <span