Skip to content

Commit

Permalink
Link are now dynamic, and users can copy the link to clipboard: #133
Browse files Browse the repository at this point in the history
  • Loading branch information
khalidsaadat committed Mar 31, 2022
1 parent 691a223 commit 7c75e8c
Show file tree
Hide file tree
Showing 4 changed files with 148 additions and 23 deletions.
31 changes: 21 additions & 10 deletions app/controllers/BabyRegistryController.php
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,30 @@ private function getToken($length=12){
// Generate shareable uniqe key
public function generate() {
$data = [];
$token = $this->getToken(37);

$baby_reg_id = $_POST['baby_registry_id'];

// Baby reg token
$baby_reg_token = $this->model('BabyRegistryToken');
$baby_reg_token->baby_registry_id = $baby_reg_id;
$baby_reg_token->token = $token;
$baby_reg_token->status = 1;
$baby_reg_token->insert();
// check the baby registry token; if the baby reg id exists, return the existing token; otherwise, create a new one and return that
$baby_reg_token = $this->model('BabyRegistryToken')->findByBabyRegistryId($baby_reg_id);
if($baby_reg_token == false) {
$new_token = $this->getToken(37);

// make a new baby reg token
$baby_reg_token = $this->model('BabyRegistryToken');
$baby_reg_token->baby_registry_id = $baby_reg_id;
$baby_reg_token->token = $new_token;
$baby_reg_token->status = 1;
$baby_reg_token->insert();

$data['success'] = true;
$data['token'] = $new_token;
}
else {
// return the existing token
$existing_token = $baby_reg_token->token;

$data['success'] = true;
$data['token'] = $token;
$data['success'] = false;
$data['token'] = $existing_token;
}

echo json_encode($data);
}
Expand Down
63 changes: 53 additions & 10 deletions app/views/baby_registry/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,24 @@
<div class="tab-pane fade show active" id="my-registry" role="tabpanel" aria-labelledby="my-registry-tab">
<div class="container-fluid">
<h2 class="mb-3 font-weight-bold">My Baby Registry</h2>
<?php
// get the existing token if exists by the baby reg id
$baby_reg_token = $this->model('BabyRegistryToken')->findByBabyRegistryId('1');
$token;
if($baby_reg_token == false) {
// open the form for generating a new baby reg token
echo "
<form class='share_form' method='post'>
";
}
else {
$token = $baby_reg_token->token;
}

// shareable url
$url = '';
?>

<form class="share_form" method="post">
<div class="col-lg-12" style="background: #f5f7f7; border: 1px solid #EFF2F2; border-radius: 5px; padding: 15px; margin-bottom: 15px;">
<input type="hidden" name="baby_registry_id" id="baby_registry_id" value="1">
<div>
Expand All @@ -86,33 +102,60 @@
<img src="/assets/icons/settings.png" height="14" style="vertical-align:middle; padding-right: 5px;"><span style="font-size: 11px;">SETTINGS</span>
<span style="padding-left: 10px; padding-right: 10px;"></span>

<button type="submit" style="background: none; border: none;" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
<img src="/assets/icons/link.png" height="14" style="vertical-align:middle; padding-right: 5px;">
<span style="font-size: 11px;" onclick="">SHARE</span>
</button>


<?php

if($baby_reg_token == true) {
// show the existing token
echo "
<div style='cursor: pointer;' data-toggle='collapse' href='#collapseExample' role='button' aria-expanded='false' aria-controls='collapseExample'>
<img src='/assets/icons/link.png' height='14' style='vertical-align:middle;'>
<span style='font-size: 11px;'>SHARE</span>
</div>
";
$url = '/babyregistry/shareable/' . $token;
}
else {
// generate a new one and display it
echo "
<button type='submit' style='background: none; border: none;' data-toggle='collapse' href='#collapseExample' role='button' aria-expanded='false' aria-controls='collapseExample'>
<img src='/assets/icons/link.png' height='14' style='vertical-align:middle; padding-right: 5px;'>
<span style='font-size: 11px;'>SHARE</span>
</button>
";
}

?>

<span style="padding-left: 10px; padding-right: 10px;"></span>

<img src="/assets/icons/option.png" height="14" style="vertical-align:middle; padding-right: 5px;"><span style="font-size: 11px;">MORE</span>
</div>

<!-- Shareable link collapse -->
<div class="collapse" id="collapseExample">
<div class="card card-body">
<div class="row">
<div class="col-lg-7">
<a href="" id="shareable_link_url" style="color: blue;"></a>
<input type="hidden" value="<?php echo $url; ?>" id="shareable_url">
<a href="<?php echo $url; ?>" id="shareable_link_url" style="color: blue;"><?php echo $url; ?></a>
</div>
<div class="col-lg-4">
<img src="/assets/icons/copy.png" height="14" style="vertical-align:middle; padding-right: 5px;">
<img src="/assets/icons/copy.png" height="14" onclick="copyText()" onmousemove="changeTooltip()" data-toggle="tooltip" data-placement="top" data-original-title="Copy link" style="vertical-align:middle; padding-right: 5px; cursor: pointer;">
</div>
</div>
</div>
</div>


</div>
</form>
<?php
if($baby_reg_token == false) {
echo "
</form>
";
}
?>


<div class="col-lg-12" style="background: #f5f7f7; border: 1px solid #EFF2F2; border-radius: 5px; padding: 15px;">
<div>
Expand Down
36 changes: 34 additions & 2 deletions app/views/include/footer.php
Original file line number Diff line number Diff line change
Expand Up @@ -181,9 +181,13 @@ function shownTabsHandler(e) {
<!-- generate baby reg link using jquery -->
<script>
$('form.share_form').submit(function(event) {
event.preventDefault();
// generate flag
var generate_flag;
var $form = $(this);
var serialized_data = $form.serialize();
Expand All @@ -196,7 +200,10 @@ function shownTabsHandler(e) {
encode: true,
}).done(function(response) {
if(!response.success) {
console.log('error');
// return the existing token
console.log(response.token);
generate_flag = 0;
}
else {
// get the token and show it
Expand All @@ -206,15 +213,40 @@ function shownTabsHandler(e) {
$("#shareable_link_url").attr({href: url});
$("#shareable_link_url").html("");
$("#shareable_link_url").append("/babyregistry/shareable/" + response.token);
generate_flag = 0;
}
});
});
});
</script>
<!-- Copy a text -->
<script>
function copyText() {
var copyText = document.getElementById("shareable_url");
copyToClipboard(copyText.value);
// var tooltip = document.getElementById("myTooltip");
// tooltip.innerHTML = "Copied: " + copyText.value;
}
function copyToClipboard(text) {
var sampleTextarea = document.createElement("textarea");
document.body.appendChild(sampleTextarea);
sampleTextarea.value = text; //save main text in it
sampleTextarea.select(); //select textarea contenrs
document.execCommand("copy");
document.body.removeChild(sampleTextarea);
}
function changeTooltip() {
$('[data-toggle="tooltip"]').click(function(){
$(this).tooltip('hide').attr('data-original-title', 'Link copied').tooltip('show');
});
}
</script>
Expand Down
41 changes: 40 additions & 1 deletion css/custom_style.css
Original file line number Diff line number Diff line change
Expand Up @@ -584,4 +584,43 @@ img.avatar {
.shop__sidebar__tags a.active {
background: #000;
color: #fff;
}
}

/* baby registry tooltip */
.tooltip {
position: relative;
display: inline-block;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

0 comments on commit 7c75e8c

Please sign in to comment.