mirror of
https://github.com/cydrobolt/polr.git
synced 2024-09-18 19:52:26 +02:00
Add "Copy to clipboard" button in shorten result page.
This commit is contained in:
parent
58a69d9a5b
commit
b3f0fc62c3
@ -21,3 +21,14 @@
|
||||
.qr-code-container img {
|
||||
display: inline !important;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.input-group-addon {
|
||||
padding:0px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tooltipped{position:relative}.tooltipped:after{position:absolute;z-index:1000000;display:none;padding:5px 8px;font:normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,segoe ui emoji,segoe ui symbol;color:#fff;text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:rgba(0,0,0,.8);border-radius:3px;-webkit-font-smoothing:subpixel-antialiased}.tooltipped:before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:rgba(0,0,0,.8);pointer-events:none;content:"";border:5px solid transparent}.tooltipped:hover:before,.tooltipped:hover:after,.tooltipped:active:before,.tooltipped:active:after,.tooltipped:focus:before,.tooltipped:focus:after{display:inline-block;text-decoration:none}.tooltipped-multiline:hover:after,.tooltipped-multiline:active:after,.tooltipped-multiline:focus:after{display:table-cell}.tooltipped-s:after,.tooltipped-se:after,.tooltipped-sw:after{top:100%;right:50%;margin-top:5px}.tooltipped-s:before,.tooltipped-se:before,.tooltipped-sw:before{top:auto;right:50%;bottom:-5px;margin-right:-5px;border-bottom-color:rgba(0,0,0,.8)}.tooltipped-se:after{right:auto;left:50%;margin-left:-15px}.tooltipped-sw:after{margin-right:-15px}.tooltipped-n:after,.tooltipped-ne:after,.tooltipped-nw:after{right:50%;bottom:100%;margin-bottom:5px}.tooltipped-n:before,.tooltipped-ne:before,.tooltipped-nw:before{top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(0,0,0,.8)}.tooltipped-ne:after{right:auto;left:50%;margin-left:-15px}.tooltipped-nw:after{margin-right:-15px}.tooltipped-s:after,.tooltipped-n:after{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}.tooltipped-w:after{right:100%;bottom:50%;margin-right:5px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.tooltipped-w:before{top:50%;bottom:50%;left:-5px;margin-top:-5px;border-left-color:rgba(0,0,0,.8)}.tooltipped-e:after{bottom:50%;left:100%;margin-left:5px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%)}.tooltipped-e:before{top:50%;right:-5px;bottom:50%;margin-top:-5px;border-right-color:rgba(0,0,0,.8)}.tooltipped-multiline:after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate}.tooltipped-multiline.tooltipped-s:after,.tooltipped-multiline.tooltipped-n:after{right:auto;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.tooltipped-multiline.tooltipped-w:after,.tooltipped-multiline.tooltipped-e:after{right:100%}@media screen and (min-width:0\0){.tooltipped-multiline:after{width:250px}}.tooltipped-sticky:before,.tooltipped-sticky:after{display:inline-block}.tooltipped-sticky.tooltipped-multiline:after{display:table-cell}.fullscreen-overlay-enabled.dark-theme .tooltipped:after{color:#000;background:rgba(255,255,255,.8)}.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before,.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before,.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before{border-bottom-color:rgba(255,255,255,.8)}.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before,.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before,.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before{border-top-color:rgba(255,255,255,.8)}.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before{border-right-color:rgba(255,255,255,.8)}.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before{border-left-color:rgba(255,255,255,.8)}
|
1
public/img/clippy.svg
Normal file
1
public/img/clippy.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg"><path d="M128 768h256v64H128v-64zm320-384H128v64h320v-64zm128 192V448L384 640l192 192V704h320V576H576zm-288-64H128v64h160v-64zM128 704h160v-64H128v64zm576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" /></svg>
|
After Width: | Height: | Size: 510 B |
7
public/js/clipboard.min.js
vendored
Normal file
7
public/js/clipboard.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -22,6 +22,26 @@ $('#generate-qr-code').click(function () {
|
||||
container.show();
|
||||
});
|
||||
|
||||
|
||||
var clipboardDemos = new Clipboard('[data-clipboard-demo]');
|
||||
clipboardDemos.on('success', function(e) {
|
||||
e.clearSelection();
|
||||
showTooltip(e.trigger, 'Copied!');
|
||||
});
|
||||
var btns = document.querySelectorAll('.input-group-addon');
|
||||
for (var i = 0; i < btns.length; i++) {
|
||||
btns[i].addEventListener('mouseleave', clearTooltip);
|
||||
btns[i].addEventListener('blur', clearTooltip);
|
||||
}
|
||||
function clearTooltip(e) {
|
||||
e.currentTarget.setAttribute('class', 'input-group-addon');
|
||||
e.currentTarget.removeAttribute('aria-label');
|
||||
}
|
||||
function showTooltip(elem, msg) {
|
||||
elem.setAttribute('class', 'input-group-addon tooltipped tooltipped-s');
|
||||
elem.setAttribute('aria-label', msg);
|
||||
}
|
||||
|
||||
$(function () {
|
||||
original_link = $('.result-box').val();
|
||||
select_text();
|
||||
|
@ -6,7 +6,10 @@
|
||||
|
||||
@section('content')
|
||||
<h3>Shortened URL</h3>
|
||||
<input type='text' class='result-box form-control' value='{{$short_url}}' />
|
||||
<div class="input-group">
|
||||
<input type='text' class='result-box form-control' value='{{$short_url}}' id="short_url" />
|
||||
<div class="input-group-addon" data-clipboard-demo="" data-clipboard-target="#short_url"><img src="/img/clippy.svg" width="18" alt="Copy to clipboard" title="Copy to clipboard"></div>
|
||||
</div>
|
||||
<a id="generate-qr-code" class='btn btn-primary'>Generate QR Code</a>
|
||||
<a href='{{route('index')}}' class='btn btn-info'>Shorten another</a>
|
||||
|
||||
@ -17,5 +20,7 @@
|
||||
|
||||
@section('js')
|
||||
<script src='/js/qrcode.min.js'></script>
|
||||
<script src="/js/clipboard.min.js"></script>
|
||||
<script src="/js/tooltips.js"></script>
|
||||
<script src='/js/shorten_result.js'></script>
|
||||
@endsection
|
||||
|
Loading…
Reference in New Issue
Block a user