function init(i, block) {
// Insert the copy button inside the highlight block
var btnHtml = '<button class="action-item btn-clipboard" title="Copy to clipboard"><i data-feather="copy"></i></button>'
$(block).before(btnHtml)
$('.btn-clipboard')
.tooltip()
.on('mouseleave', function() {
// Explicitly hide tooltip, since after clicking it remains
// focused (as it's a button), so tooltip would otherwise
// remain visible until focus is moved away
$(this).tooltip('hide');
});
// Component code copy/paste
var clipboard = new ClipboardJS('.btn-clipboard', {
target: function(trigger) {
return trigger.nextElementSibling
}
})
clipboard.on('success', function(e) {
$(e.trigger)
.attr('title', 'Copied!')
.tooltip('_fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('_fixTitle')
e.clearSelection()
})
clipboard.on('error', function(e) {
var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
$(e.trigger)
.attr('title', fallbackMsg)
.tooltip('_fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('_fixTitle')
})
// Initialize highlight.js plugin
hljs.highlightBlock(block);
}
1
<div class="vine-header mb-4" data-aos="fade-down" data-aos-easing="linear">
<div class="container">
<div class="row px-3">
<div class="col-lg-12">
<ul class="breadcrumbs">
<li><a href="{{ route('home') }}"><span class="bi bi-house me-1"></span>Home</a></li>
<li><a href="{{ route('home.posts') }}">Posts</a></li>
<li>{{ $post->title }}</li>
</ul>
<h2 class="mb-2">{{ $post->title }}</h2>
</div>
</div>
</div>
</div><!--/vine-header-->
Leave a comment