taigrr/shorturl
1
0
Fork 0
mirror of https://github.com/taigrr/shorturl synced 2025-01-18 04:03:16 -08:00
Code Issues Projects Releases Wiki Activity

Add copy to clipboard button via clipboard.js

Browse Source
This commit is contained in:
James Mills 2017-07-15 14:13:02 -07:00
parent eff8559ff8
commit 97e7b7fcf5
No known key found for this signature in database
GPG Key ID: AC4C014F1440EBD6
5 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
server.go
View File

@ -200,6 +200,11 @@ func (s *Server) initRoutes() {
rice.MustFindBox("static/css").HTTPBox(),
)
s.router.ServeFiles(
"/js/*filepath",
rice.MustFindBox("static/js").HTTPBox(),
)
s.router.GET("/", s.IndexHandler())
s.router.POST("/", s.ShortenHandler())
s.router.GET("/u/:id", s.ViewHandler())

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

File diff suppressed because one or more lines are too long

4
static/js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
templates/base.html
View File

@ -4,7 +4,9 @@
<head>
<link rel="stylesheet" href="/css/spectre-icons.min.css">
<link rel="stylesheet" href="/css/spectre.min.css">
{{ template "stylesheets" . }}
<meta name="viewport" content="width=device-width, initial-scale=1" />
{{ template "css" . }}
<title>ShortURL</title>
</head>
<body>
@ -18,5 +20,9 @@
{{template "content" .}}
</section>
</body>
{{ template "scripts" . }}
</html>
{{end}}
{{ define "css" }}{{ end }}
{{ define "scripts" }}{{ end }}
{{ define "stylesheets" }}{{ end }}

34
templates/view.html
View File

@ -3,8 +3,40 @@
<div class="columns">
<div class="column">
<p>Your short url is: <a href="/r/{{.ID}}">{{.ID}}</a></p>
<code>{{.URL}}</code>
<div class="form-group input-group">
<input class="form-input" id="input-url" value="{{.URL}}" readonly />
<button class="btn btn-primary hide" id="btn-copy" data-clipboard-target="#input-url">Copy</button>
</div>
</div>
</div>
</section>
{{end}}
{{define "scripts"}}
<script src="/js/jquery.min.js"></script>
<script src="/js/clipboard.min.js"></script>
<script>
$(document).ready(function() {
var clipboard = new Clipboard('.btn');
var displayTooltip = function(element, text, timeout) {
$(element).addClass("tooltip tooltip-bottom");
$(element).attr("data-tooltip", text);
setTimeout(function () {
$(element).removeClass("tooltip tooltip-bottom");
$(element).removeAttr("data-tooltip");
}, timeout || 3000);
};
clipboard.on("success", function(e) {
e.clearSelection();
displayTooltip("#btn-copy", "Copied!");
});
clipboard.on('error', function(e) {
displayTooltip("#btn-copy", "Error!");
});
$("#btn-copy").removeClass("hide");
});
</script>
{{end}}