Added share button to LittleLink pages
Added share button that is displayed on user's personal pages that if clicked either copies the profile URL or opens a share dialog window depending on the browser and operating system. Read the blog post about this topic here: https://blog.littlelink-custom.com/share-button
This commit is contained in:
Julian Prieber
parent
8ffc5f5415
commit
10b902f108
|
|
@ -0,0 +1,65 @@
|
|||
.sharediv {
|
||||
position:relative;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.toastdiv {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toastbox {
|
||||
width: 280px;
|
||||
padding: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
position: fixed;
|
||||
top: 105%;
|
||||
-webkit-transition: transform 0.3s linear;
|
||||
transition: transform 0.3s linear;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
}
|
||||
.toastbox.toast-tox--active {
|
||||
-webkit-transform: translateY(-150px);
|
||||
transform: translateY(-150px);
|
||||
}
|
||||
.sharebutton,
|
||||
sharebutton {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 18px;
|
||||
width: 150px;
|
||||
font-weight: 700;
|
||||
line-height: 48px;
|
||||
letter-spacing: 0.1px;
|
||||
white-space: wrap;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
color: #000000;
|
||||
background-color: #efefef
|
||||
}
|
||||
sharebutton:hover,
|
||||
.sharebutton:hover {
|
||||
color: #000000;
|
||||
opacity: 0.85;
|
||||
filter: alpha(opacity=40);
|
||||
border-color: #888;
|
||||
outline: 0; }
|
||||
.sharebutton.sharebutton-primary {
|
||||
color: #FFFFFF;
|
||||
filter: brightness(90%) }
|
||||
.sharebutton.sharebutton-primary:hover,
|
||||
.sharebutton.sharebutton-primary:focus {
|
||||
color: #FFFFFF;
|
||||
filter: brightness(90%) }
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0, 0, 400,400"><g id="svgg"><path id="path0" d="M301.881 1.114 C 267.085 9.019,245.534 40.972,250.205 77.734 L 250.800 82.422 190.153 116.979 L 129.506 151.535 126.175 148.619 C 88.887 115.974,27.879 137.073,17.445 186.223 C 4.424 247.560,79.295 292.424,126.179 251.378 L 129.513 248.458 189.952 282.907 C 223.193 301.854,250.481 317.438,250.592 317.538 C 250.703 317.639,250.379 321.258,249.872 325.581 C 242.990 384.239,310.260 422.123,357.547 386.220 C 389.939 361.627,392.191 313.043,362.258 284.616 C 337.221 260.840,296.834 260.221,271.978 283.233 L 267.355 287.513 208.091 253.793 C 175.497 235.247,148.567 219.848,148.249 219.574 C 147.930 219.300,148.194 216.335,148.835 212.985 C 149.476 209.635,150.000 203.792,150.000 200.000 C 150.000 196.208,149.476 190.365,148.835 187.015 C 148.194 183.665,147.930 180.700,148.249 180.426 C 148.567 180.152,175.492 164.749,208.081 146.197 L 267.333 112.467 271.967 116.757 C 318.415 159.759,395.676 114.851,382.111 52.734 C 374.259 16.780,337.377 -6.950,301.881 1.114 " stroke="none" fill="#000000" fill-rule="evenodd"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,77 @@
|
|||
var copyToClipboard = (function () {
|
||||
var copyIcon = document.querySelector(".copy-icon");
|
||||
var toastBox = document.querySelector(".toastbox");
|
||||
var pageUrl= window.location.href;
|
||||
|
||||
function isCopying(string) { // text to copy
|
||||
var textarea, result;
|
||||
try {
|
||||
textarea = document.createElement('textarea');
|
||||
textarea.setAttribute('readonly', true);
|
||||
textarea.setAttribute('contenteditable', true);
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.value = string;
|
||||
|
||||
document.body.appendChild(textarea);
|
||||
|
||||
textarea.select();
|
||||
|
||||
var range = document.createRange();
|
||||
range.selectNodeContents(textarea);
|
||||
|
||||
var selectedText = window.getSelection();
|
||||
selectedText.removeAllRanges();
|
||||
selectedText.addRange(range);
|
||||
|
||||
textarea.setSelectionRange(0, textarea.value.length);
|
||||
result = document.execCommand('copy');
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
result = null;
|
||||
} finally {
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
// manual copy fallback using prompt
|
||||
if (!result) {
|
||||
result = prompt("Copy the link", string); // eslint-disable-line no-alert
|
||||
if (!result) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function showToastBox (message) {
|
||||
toastBox.textContent = message;
|
||||
setTimeout(function () {
|
||||
toastBox.classList.add("toast-tox--active");
|
||||
}, 500)
|
||||
setTimeout(function () {
|
||||
toastBox.classList.remove("toast-tox--active");
|
||||
}, 3000)
|
||||
}
|
||||
function handleCopyIconClick() {
|
||||
copyIcon.addEventListener("click", function(){
|
||||
showToastBox(isCopying(pageUrl) ? "URL was copied to your clipboard" : "Unable to copy");
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return {handleCopyIconClick: handleCopyIconClick}
|
||||
})();
|
||||
|
||||
copyToClipboard.handleCopyIconClick();
|
||||
|
||||
$('#share-share-button').on('click', () => {
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: '',
|
||||
text: '',
|
||||
url: '',
|
||||
})
|
||||
.then(() => console.log('Successful share'))
|
||||
.catch((error) => console.log('Error sharing', error));
|
||||
} else {
|
||||
console.log('Share not supported on this browser, do it the old way.');
|
||||
}
|
||||
});
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('littlelink/css/share.button.css') }}">
|
||||
@if(file_exists(base_path("littlelink/images/avatar.png" )))
|
||||
<link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}">
|
||||
@else
|
||||
|
|
@ -61,7 +62,7 @@
|
|||
@media (max-width: 767px) {
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!-- begin dark mode detection -->
|
||||
<script src="{{ asset('littlelink/js/js.cookie.min.js') }}"></script>
|
||||
<script>
|
||||
|
|
@ -98,9 +99,77 @@
|
|||
<!-- end dark mode detection -->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<?php ////begin share button//// ?>
|
||||
<?php
|
||||
//Get browser type
|
||||
$arr_browsers = ["Opera", "Edg", "Chrome", "Safari", "Firefox", "MSIE", "Trident"];
|
||||
|
||||
$agent = $_SERVER['HTTP_USER_AGENT'];
|
||||
|
||||
$user_browser = '';
|
||||
foreach ($arr_browsers as $browser) {
|
||||
if (strpos($agent, $browser) !== false) {
|
||||
$user_browser = $browser;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
switch ($user_browser) {
|
||||
case 'MSIE':
|
||||
$user_browser = 'Internet Explorer';
|
||||
break;
|
||||
|
||||
case 'Trident':
|
||||
$user_browser = 'Internet Explorer';
|
||||
break;
|
||||
|
||||
case 'Edg':
|
||||
$user_browser = 'Microsoft Edge';
|
||||
break;
|
||||
}
|
||||
|
||||
function get_operating_system() {
|
||||
$u_agent = $_SERVER['HTTP_USER_AGENT'];
|
||||
$operating_system = 'NULL';
|
||||
|
||||
//get operating-system type
|
||||
if (preg_match('/iphone/i', $u_agent)) {
|
||||
$operating_system = 'mobile';
|
||||
} elseif (preg_match('/ipod/i', $u_agent)) {
|
||||
$operating_system = 'mobile';
|
||||
} elseif (preg_match('/ipad/i', $u_agent)) {
|
||||
$operating_system = 'mobile';
|
||||
} elseif (preg_match('/android/i', $u_agent)) {
|
||||
$operating_system = 'mobile';
|
||||
} elseif (preg_match('/blackberry/i', $u_agent)) {
|
||||
$operating_system = 'mobile';
|
||||
} elseif (preg_match('/webos/i', $u_agent)) {
|
||||
$operating_system = 'mobile';
|
||||
}
|
||||
|
||||
return $operating_system;
|
||||
}
|
||||
?>
|
||||
|
||||
@if($user_browser === 'Chrome' or get_operating_system() == 'mobile')
|
||||
<script src="{{ asset('littlelink/js/jquery.min.js') }}"></script>
|
||||
<div align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical" id='share-share-button'><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg">Share</a></div></div>
|
||||
<span class="copy-icon" role="button">
|
||||
</span>
|
||||
@else
|
||||
<span class="copy-icon" role="button">
|
||||
<div align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg">Share</a></div></div>
|
||||
</span>
|
||||
@endif
|
||||
<div class="toastdiv">
|
||||
<span class="toastbox" role="alert"></span>
|
||||
<script src="{{ asset('littlelink/js/share.button.js') }}"></script>
|
||||
</div>
|
||||
<?php ////end share button//// ?>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="column" style="margin-top: 5%">
|
||||
<!-- Your Image Here -->
|
||||
@if(file_exists(base_path("img/$littlelink_name" . ".png" )))
|
||||
|
|
@ -118,9 +187,7 @@
|
|||
<!-- Short Bio -->
|
||||
<p class="fadein">{{ $info->littlelink_description }}</p>
|
||||
|
||||
@endforeach
|
||||
|
||||
|
||||
@endforeach
|
||||
<!-- Buttons -->
|
||||
<?php $initial=1; // <-- Effectively sets the initial loading time of the buttons. This value should be left at 1. ?>
|
||||
@foreach($links as $link)
|
||||
|
|
|
|||
Loading…
Reference in New Issue