JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="permalink-control"></div>
<div class"log"></div>
CSS
https://bit.ly/2oYUC4E
https://bit.ly/2oYUC4Ediv
https://bit.ly/2oYUC4E
https://bit.ly/2oYUC4E
control
https://bit.ly/2oYUC4E
substring
substring
https://bit.ly/2o8Wrrm
substring
substring
https://bit.ly/2o8Wrrm
substring
substring
https://bit.ly/2o8Wrrm
substring
https://bit.ly/2oYUC4E
substring
substring
https://bit.ly/2oYUC4E
ht
ht
https://bit.ly/2oYUC4E
https://bit.ly/2oYUC4E
JavaScript
$(document).ready(function(){
var shortUrl;
$(".permalink-control")
.append(
'<div class="input-group">' +
' <span class="input-group-btn"><button type="button" class="btn btn-default" title="Get Permalink"><span class="glyphicon glyphicon-link"></span></button></span>' +
' <input type="text" class="form-control">' +
'</div>'
);
$(".permalink-control input")
.hide()
.focus(function () {
// Workaround for broken selection: http://stackoverflow.com/questions/5797539
var $this = $(this);
$this.select();
document.execCommand('copy');
$this.mouseup(function () {
$this.unbind("mouseup");
return false;
});
});
$(".permalink-control button")
.click(function () {
var shortUrl ="";
var $this = $(this);
$.ajax({
url: "https://api-ssl.bitly.com/shorten",
dataType: "jsonp",
data: {
longUrl: window.location.href,
access_token: "48ecf90304d70f30729abe82dfea1dd8a11c4584",
format: "json"
},
success: function (response) {
var longUrl = Object.keys(response.results)[0];
shortUrl = response.results[longUrl].shortUrl;
if (shortUrl.indexOf(":") === 4) {
shortUrl = "https" + shortUrl.substring(4);
}
$this.parents(".permalink-control")
.find("input")
.show()
.val(shortUrl)
.focus();
}
}).done(function(){
$(window).blur(function(){console.log('here');
document.execCommand('copy');
$(window).off('blur');// make sure we don't copy anything else from the document when window is foucussed out
});
})
});
})