Use clipboard.js to copy ping URLs to clipboard

This commit is contained in:
Pēteris Caune 2016-06-21 22:43:53 +03:00
parent ce23d65ebf
commit 318e97fa76
6 changed files with 50 additions and 106 deletions

View File

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

View File

@ -62,15 +62,34 @@ table.table tr > th.th-name {
visibility: hidden; visibility: hidden;
} }
.show-usage { button.copy-link {
opacity: 0 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 { tr:hover .check-menu {
visibility: visible; visibility: visible;
} }
tr:hover .show-usage { tr:hover .copy-link {
opacity: 1 opacity: 1
} }

View File

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

7
static/js/clipboard.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -196,85 +196,6 @@
</div> </div>
</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 %} {% endblock %}
{% block scripts %} {% block scripts %}
@ -282,6 +203,7 @@
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script> <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/nouislider.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> <script src="{% static 'js/checks.js' %}"></script>
{% endcompress %} {% endcompress %}
{% endblock %} {% endblock %}

View File

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