forked from GithubBackups/healthchecks
Use clipboard.js to copy ping URLs to clipboard
This commit is contained in:
parent
ce23d65ebf
commit
318e97fa76
@ -62,10 +62,3 @@
|
|||||||
color: #555;
|
color: #555;
|
||||||
}
|
}
|
||||||
|
|
||||||
#show-usage-modal .modal-dialog {
|
|
||||||
width: 1100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#show-usage-modal .tab-content {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
7
static/js/clipboard.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -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">×</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 %}
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user