"Conversion Box With Notification"
Bootstrap 4.0.0 Snippet by agiltriono

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet'/>
<div id="wrapper">
<div class="container">
<div class='pesan-komentar'>
<h5>Note ! You can use To Parse Html code</h5>
<ul>
For Example !
<li>To write letters <b>bold</b> please use <code>[strong]CONTENT[/strong]</code> or <code>[b]CONTENT[/b]</code>.</li>
<li>To write letters <i>italic</i> please use <code>[em]CONTENT[/em]</code> or <code>[i]CONTENT[/i]</code>.</li>
<li>To write letters <u>underline</u> please use <code>[u]CONTENT[/u]</code>.</li>
<li>To write letters <span class='strike'>strikethrought</span> please use <code>[strike]CONTENT[/strike]</code>.</li>
<li>To write HTML code please use <code>[code]CONTENT[/code]</code> or <code>[pre]CONTENT[/pre]</code> or <code>[pre][code]CONTENT[/code][/pre]</code>, and please <b>parse</b> first the code on the parser box below.</li>
</ul>
<div class='convertone'>
<span class='small-button'>
<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;konversi-box&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;none&apos;' title='Show Conversion Box'>Show Conversion Box</a></span><span id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById(&apos;hide-konversi&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show-konversi&apos;).style.display=&apos;inline-block&apos;' title='Hide Konversi Kode'>Hide Konversi Kode</a></span>
</span></div>
<div id='bka-konversi' style='display:none'>
<div class='control-group' id='konversi-box'>
<textarea id='codes' placeholder='Write &apos;Or&apos; Paste Your Code Here' spellcheck='false'></textarea>
<label class='control control--checkbox'>Convert<code>&</code>··
<input checked='true' id='opt1' type='checkbox'/>
<div class='control__indicator'>
</div>
</label>
<label class='control control--checkbox'>Convert<code>'</code>··
<input checked='true' id='opt2' type='checkbox'/>
<div class='control__indicator'>
</div>
</label>
<label class='control control--checkbox'>Convert<code>"</code>··
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
* Icons (base 64)
*/
#notify-holster {
position: fixed;
top: 15px;
right: 15px;
width: 100%;
max-width: 350px;
z-index: 99999998; }
#notify-holster {
font-family: 'Open Sans', sans-serif; }
.notify {
position: relative;
right: -360px;
top: 15px;
margin-bottom: 20px;
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
opacity: 0;
z-index: 99999999;
border: 1px solid;
/*
* Success styles
*/
/**
* Error styles
*/
/**
* Info styles
*/ }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
// konversi
function cdConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),d=document.getElementById("opt2"),o=document.getElementById("opt3"),l=document.getElementById("opt4"),n=document.getElementById("opt5");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/&/g,"&")),d.checked&&(t=t.replace(/'/g,"'")),o.checked&&(t=t.replace(/"/g,""")),l.checked&&(t=t.replace(/</g,"<")),n.checked&&(t=t.replace(/>/g,">")),e.value=t,e.focus(),e.select()}function cdClear(){var e=document.getElementById("codes");e.value="",e.focus();for(var t=document.querySelectorAll("#cvrt3, #cvrt4, #cvrt5, #cvrt6, #cvrt7, #cvrt8, #cvrt9, #cvrt10, #cvrt11"),c=0;c<t.length;c++)t[c].disabled=!1}function preConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),d=document.getElementById("opt2"),o=document.getElementById("opt3"),l=document.getElementById("opt4"),n=document.getElementById("opt5"),r=document.getElementById("opt10");t=t.replace(/\t/g," "),r.checked&&(c.checked&&(t=t.replace(/&/g,"&")),d.checked&&(t=t.replace(/'/g,"'")),o.checked&&(t=t.replace(/"/g,""")),l.checked&&(t=t.replace(/</g,"<")),n.checked&&(t=t.replace(/>/g,">")),t=t.replace(/^/,"[pre]"),t=t.replace(/$/,"[/pre]"),e.value=t,e.focus(),e.select())}function codeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),d=document.getElementById("opt2"),o=document.getElementById("opt3"),l=document.getElementById("opt4"),n=document.getElementById("opt5"),r=document.getElementById("opt11");t=t.replace(/\t/g," "),r.checked&&(c.checked&&(t=t.replace(/&/g,"&")),d.checked&&(t=t.replace(/'/g,"'")),o.checked&&(t=t.replace(/"/g,""")),l.checked&&(t=t.replace(/</g,"<")),n.checked&&(t=t.replace(/>/g,">")),t=t.replace(/^/,"[code]"),t=t.replace(/$/,"[/code]"),e.value=t,e.focus(),e.select())}function precodeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),d=document.getElementById("opt2"),o=document.getElementById("opt3"),l=document.getElementById("opt4"),n=document.getElementById("opt5"),r=document.getElementById("opt12");t=t.replace(/\t/g," "),r.checked&&(c.checked&&(t=t.replace(/&/g,"&")),d.checked&&(t=t.replace(/'/g,"'")),o.checked&&(t=t.replace(/"/g,""")),l.checked&&(t=t.replace(/</g,"<")),n.checked&&(t=t.replace(/>/g,">")),t=t.replace(/^/,"[pre][code]"),t=t.replace(/$/,"[/code][/pre]"),e.value=t,e.focus(),e.select())}function strongConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt6");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"[strong]"),t=t.replace(/$/,"[/strong]"),e.value=t,e.focus(),e.select())}function emConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt7");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"[em]"),t=t.replace(/$/,"[/em]"),e.value=t,e.focus(),e.select())}function uConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt8");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"[u]"),t=t.replace(/$/,"[/u]"),e.value=t,e.focus(),e.select())}function strikeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt9");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"[strike]"),t=t.replace(/$/,"[/strike]"),e.value=t,e.focus(),e.select())}
$.getScript("https://cdn.rawgit.com/agiltriono/agiel-for-js/master/jsnotify/dist/js/notify.js").done(function(script){var options1={'title':'Success','style':'success','message':'Your Code Has Been Copied To Clipboard','icon':'check','timeout':'2000'};var options2={'title':'Removed','style':'error','message':'Your Code Has Been Remove','icon':'warning','timeout':'2000'};var options3={'title':'Success','style':'info','message':'Your Code Has Been Converted','icon':'info','timeout':'2000'};var n1=new notify(options1);var n2=new notify(options2);var n3=new notify(options3);$("#cvrt").click(function(){n1.show()});$("#cvrt0").click(function(){n2.show()});$("#cvrt3,#cvrt4,#cvrt5,#cvrt6,#cvrt7,#cvrt8,#cvrt9").click(function(){n3.show()})})
$.getScript("https://rawgit.com/agiltriono/agiel-for-js/master/clipboard/dist/clipboard.min.js").done(function(script){var clipboard=new Clipboard(".copyedall"),copyCode=new Clipboard(".copyedall",{target:function(a){return a.previousElementSibling}});clipboard.on("success",function(a){console.log(a)}),clipboard.on("error",function(a){console.log(a)}),copyCode.on("success",function(a){a.clearSelection(),a.trigger.textContent="Copied",window.setTimeout(function(){a.trigger.textContent="Copy"},2e3)});})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: