Update Copy To Clipboard Parser Codes Untuk Disqus Blog Amp
Seperti kita ketahui bahwa hingga ketika ini hanya gres disqus yang sudah mendukung AMP HTML, untuk itu pada postingan yang kemudian saya menciptakan pesan dan parse tool komentar disqus untuk blog AMP HTML.Nah kali ini, untuk lebih memudahkan pengguna dalam memakai parse tool-nya, saya menambahkan tombol copy code to clipboard dengan memakai clipboardjs.
Dengan begitu, pengguna akan lebih gampang meng-copy code yang sudah di-parse tanpa harus menekan tombol ctrl + C di keyboard.
Untuk demo dapat dicoba di pesan komentar blog ini pada tombol Show Parser atau di tombol demo di bawah ini.
Untuk menciptakan pesan dan parse tool untuk komentar disqus blog AMP HTML masih sama ibarat postingan sebelumnya DI SINI. Yang perlu dilakukan yakni hanya mengganti URL pada amp-iframe dengan URL di bawah ini.
https://cdn.rawgit.com/KompiAjaib/kompi-html/master/parser-code2.html
Namun jikalau ingin menghosting sendiri parse-code2.html, silahkan gunakan arahan di bawah ini (simpan sebagai file html).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parse Code</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400italic,400,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'/>
<style>
body {
background-color:white;
margin:0;
padding:0;
color:#212121;font-family:Roboto,Arial,sans-serif;
}
a{text-decoration:none;color:#e8554e;font-weight:700}
::selection{background:#e8554e;color:#fff}
.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;display:none}
#codes{border:1px solid #ddd;width:100%;height:150px;display:block;background-color:#efefef;border-radius:3px;font:400 12px 'Courier New',Monospace;margin:0 0 10px;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#codes:active,#codes:focus{background-color:#fff;color:#000;border:1px solid #ccc;outline:0}
.button-group{float:left;text-align:left;margin:-3px auto 0}
button{cursor:pointer}
.button-group span{font-family:Roboto,Arial,sans-serif;font-size:12px;vertical-align:2px;line-height:1;vertical-align:-1px;color:#555;display:inline;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:0;margin:0 10px 0 0}
#opt6,#opt7,#opt8,#opt9,#opt10,#opt11,#opt12,#opt13,#opt14,#opt15,#opt16,#opt17,#opt18,#opt19,#opt20{display:inline-block;vertical-align:middle;border:none;outline:0;margin:0}
.checkbox span{font:14px Roboto,Arial,sans-serif;vertical-align:middle;line-height:1;color:#555;margin-right:10px}
.btn,.btn:active{background-image:none}
.btn,.parser{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px}
.btn:active:focus,.btn:focus,.parser:active:focus,.parser:focus{outline:0}
.btn:focus,.btn:hover,.parser:focus,.parser:hover{color:#333;text-decoration:none;outline:0}
.btn:active,.parser:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-primary,.parser{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled,.parser:focus{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover,.parser:active,.parser:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}
.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
.btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
.btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}
.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
.btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
.clear{clear:both;display:block}
.collapse{display:none}
#parser{position:relative}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert {
padding: 15px;
border: 1px solid transparent;
border-radius: 4px;
position:absolute;
top: 10px;
right:10px;
min-width:230px;
}
button.close {
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
-webkit-appearance: none;
line-height: 1;
}
.close {
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .2;
}
button.close:focus {
outline:none;
}
.close:hover{opacity:1!important}
#btnInfo h4{margin:0}
#button-link{display:none}
</style>
</head>
<body>
<div id='parser'>
<textarea id='codes' placeholder='Tulis/paste arahan atau teks di sini kemudian klik tombol yang sesuai. Untuk embed komentar, ambil ID DISQUS dari URL tombol share komentar Disqus.' spellcheck='false'></textarea>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>
<button class='close close-copy' onclick='document.getElementById("btnInfo").style.display = "none";cdClear();' type='button'><span aria-hidden='true'>×</span></button>
<h4>Codes copied to clipboard!</h4>
</div>
<span class='button-group'>
<button class='btn btn-primary btn-xs' id='cvrt3' onclick='strongConvert();this.disabled = true;'>strong</button>
<button class='btn btn-primary btn-xs' id='cvrt4' onclick='emConvert();this.disabled = true;'>em</button>
<button class='btn btn-primary btn-xs' id='cvrt4' onclick='uConvert();this.disabled = true;'>u</button>
<button class='btn btn-primary btn-xs' id='cvrt5' onclick='strikeConvert();this.disabled = true;'>strike</button>
<button class='btn btn-primary btn-xs' id='cvrt7' onclick='preConvert();this.disabled = true;'>pre</button>
<button class='btn btn-primary btn-xs' id='cvrt8' onclick='codeConvert();this.disabled = true;'>code</button>
<button class='btn btn-primary btn-xs' id='cvrt9' onclick='precodeConvert();this.disabled = true;'>pre code</button>
<button class='btn btn-primary btn-xs' id='cvrt10' onclick='spoilerConvert();this.disabled = true;'>spoiler</button><br/>
<button class='btn btn-primary btn-xs' id='cvrt11' onclick='embedConvert();this.disabled = true;'>embed</button> <span>How to get ID DISQUS - <a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYgxAcm1qKfTXyAIk9RTX5kV2ZFJGbCcNb1awoyOxw99H-8UIBnH3QwBp6ygG0Z_7wmnwswAJus563m1IvtHTe9rIllu2Q3al5KWZKve307n5Sp913qF2GcOvN2LjYoaoPHLVE2TdqXtez/s1600/Animation2.gif' rel='nofollow' target='_blank' title='Lihat di sini'>http://disq.us/p/[ID DISQUS]</a></span><br/>
<button class='btn button-link btn-xs btn-info' id='button-link' data-clipboard-action='copy' data-clipboard-target='#codes' type='submit'>Copy codes to clipboard!</button> <button class='btn btn-danger btn-xs' onclick='cdClear();'>Bersihkan</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/>
<input checked='' id='opt2' type='checkbox'/>
<input checked='' id='opt3' type='checkbox'/>
<input checked='' id='opt4' type='checkbox'/>
<input checked='' id='opt5' type='checkbox'/><br/>
<input checked='' id='opt6' type='checkbox'/> <span>strong</span>
<input checked='' id='opt7' type='checkbox'/> <span>em</span>
<input checked='' id='opt8' type='checkbox'/> <span>u</span>
<input checked='' id='opt9' type='checkbox'/> <span>strike</span><br/>
<input checked='' id='opt10' type='checkbox'/> <span>pre</span>
<input checked='' id='opt11' type='checkbox'/> <span>code</span>
<input checked='' id='opt12' type='checkbox'/> <span>pre code</span>
<input checked='' id='opt13' type='checkbox'/> <span>spoiler</span><br/>
<input checked='' id='opt20' type='checkbox'/> <span>embed</span>
</span>
<div class="clear"></div>
</div>
<script>
function cdClear() {
var wtarea = document.getElementById('codes');
wtarea.value = '';
wtarea.focus();
var clears = document.querySelectorAll('#cvrt3, #cvrt4, #cvrt5, #cvrt6, #cvrt7, #cvrt8, #cvrt9, #cvrt10, #cvrt11')
for (var i = 0; i < clears.length; i++)
{
clears[i].disabled = false,document.getElementById("btnInfo")
.style.display = "none",document.getElementById("button-link")
.style.display = "none"
}
}
function preConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt1 = document.getElementById('opt1'),
opt2 = document.getElementById('opt2'),
opt3 = document.getElementById('opt3'),
opt4 = document.getElementById('opt4'),
opt5 = document.getElementById('opt5'),
opt10 = document.getElementById('opt10');
cv = cv.replace(/\t/g, " ");
if (opt10.checked) { if (opt1.checked) cv = cv.replace(/&/g, "&");
if (opt2.checked) cv = cv.replace(/'/g, "'");
if (opt3.checked) cv = cv.replace(/"/g, """);
if (opt4.checked) cv = cv.replace(/</g, "<");
if (opt5.checked) cv = cv.replace(/>/g, ">");
cv = cv.replace(/^/, "<pre>");
cv = cv.replace(/$/, "</pre>");
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link")
.style.display = "inline-block"}
};
function codeConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt1 = document.getElementById('opt1'),
opt2 = document.getElementById('opt2'),
opt3 = document.getElementById('opt3'),
opt4 = document.getElementById('opt4'),
opt5 = document.getElementById('opt5'),
opt11 = document.getElementById('opt11');
cv = cv.replace(/\t/g, " ");
if (opt11.checked) { if (opt1.checked) cv = cv.replace(/&/g, "&");
if (opt2.checked) cv = cv.replace(/'/g, "'");
if (opt3.checked) cv = cv.replace(/"/g, """);
if (opt4.checked) cv = cv.replace(/</g, "<");
if (opt5.checked) cv = cv.replace(/>/g, ">");
cv = cv.replace(/^/, "<code>");
cv = cv.replace(/$/, "</code>");
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link")
.style.display = "inline-block"}
};
function precodeConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt1 = document.getElementById('opt1'),
opt2 = document.getElementById('opt2'),
opt3 = document.getElementById('opt3'),
opt4 = document.getElementById('opt4'),
opt5 = document.getElementById('opt5'),
opt12 = document.getElementById('opt12');
cv = cv.replace(/\t/g, " ");
if (opt12.checked) { if (opt1.checked) cv = cv.replace(/&/g, "&");
if (opt2.checked) cv = cv.replace(/'/g, "'");
if (opt3.checked) cv = cv.replace(/"/g, """);
if (opt4.checked) cv = cv.replace(/</g, "<");
if (opt5.checked) cv = cv.replace(/>/g, ">");
cv = cv.replace(/^/, "<pre><code>");
cv = cv.replace(/$/, "</code></pre>");
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link")
.style.display = "inline-block"}
};
function spoilerConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt13 = document.getElementById('opt13')
cv = cv.replace(/\t/g, " ");
if (opt13.checked) {cv = cv.replace(/^/, "<spoiler>");
cv = cv.replace(/$/, "</spoiler>");
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link")
.style.display = "inline-block"}
};
function strongConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt6 = document.getElementById('opt6')
cv = cv.replace(/\t/g, " ");
if (opt6.checked) {cv = cv.replace(/^/, "<strong>");
cv = cv.replace(/$/, "</strong>");
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link")
.style.display = "inline-block"}
};
function emConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt7 = document.getElementById('opt7')
cv = cv.replace(/\t/g, " ");
if (opt7.checked) {cv = cv.replace(/^/, "<em>");
cv = cv.replace(/$/, "</em>");
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link")
.style.display = "inline-block"}
};
function uConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt8 = document.getElementById('opt8')
cv = cv.replace(/\t/g, " ");
if (opt8.checked) {cv = cv.replace(/^/, "<u>");
cv = cv.replace(/$/, "</u>");
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link")
.style.display = "inline-block"}
};
function strikeConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt9 = document.getElementById('opt9')
cv = cv.replace(/\t/g, " ");
if (opt9.checked) {cv = cv.replace(/^/, "<strike>");
cv = cv.replace(/$/, "</strike>");
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link")
.style.display = "inline-block"}
};
function embedConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt20 = document.getElementById('opt20')
cv = cv.replace(/\t/g, " ");
if (opt20.checked){ cv = cv.replace(/^/, "<iframe src=\"https://embed.disqus.com/p/");
cv = cv.replace(/$/, "\" style=\"border:0;width:100%;height:300px;\" seamless=\"seamless\" scrolling=\"no\" allowtransparency=\"true\"><\/iframe>");
ctarea.value = cv;
ctarea.focus();
document.getElementById("button-link")
.style.display = "inline-block"}
};
</script>
<script src='https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.16/dist/clipboard.min.js'></script>
<script>
//<![CDATA[
var clipboard = new Clipboard(".button-link");
clipboard.on("success", function (o) {
console.log(o), document.getElementById("btnInfo")
.style.display = "block", document.getElementById("codes")
.value = ""
}), clipboard.on("error", function (o) {
console.log(o)
});
//]]>
</script>
</body>
</html>
0 Response to "Update Copy To Clipboard Parser Codes Untuk Disqus Blog Amp"
Posting Komentar