JavaScript Popup Copy Code

by Taufik Nurrohman

HTML

<pre><code>(<span class="function"><span class="keyword">function</span><span class="params">($)</span> {</span>
    <span class="keyword">var</span> $form = $(<span class="string">'#ajax-search-form'</span>),
        $input = $form.find(<span class="string">':text'</span>);
    $form.append(<span class="string">'&lt;div id="search-result"&gt;&lt;/div&gt;'</span>);
    <span class="keyword">var</span> $result_container = $(<span class="string">'#search-result'</span>);
    $form.on(<span class="string">"submit"</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
        <span class="keyword">var</span> keyword = $input.val();
        $result_container.show().html(<span class="string">'Loading...'</span>);
        $.ajax({
            url: <span class="string">'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;q='</span> + keyword + <span class="string">'&amp;max-results=9999'</span>,
            type: <span class="string">'get'</span>,
            dataType: <span class="string">'jsonp'</span>,
            success: <span class="function"><span class="keyword">function</span><span class="params">(json)</span> {</span>
                <span class="keyword">var</span> entry = json.feed.entry,
                    link, skeleton = <span class="string">""</span>;
                <span class="keyword">if</span> (entry !== undefined) {
                    skeleton = <span class="string">'&lt;h4&gt;Search results for keyword &amp;quot;'</span> + keyword + <span class="string">'&amp;quot;&lt;/h4&gt;'</span>;
                    skeleton += <span class="string">'&lt;a class="close" href="/"&gt;&amp;times;&lt;/a&gt;&lt;ol&gt;'</span>;
                    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; entry.length; i++) {
                        <span class="keyword">for</span> (<span class="keyword">var</span> j = <span...

CSS

* {margin:0;padding:0}
body {padding:50px}
pre {
  background-color:#eee;
  padding:5px 6px;
  margin:0 0 10px;
  position:relative;
  overflow:auto;
  white-space:pre;
  word-wrap:normal;
}
pre code {
  font:normal normal 12px/1.4 "Liberation Mono","Nimbus Mono L","FreeMono","DejaVu Mono","Bitstream Vera Mono","Lucida Console","Andale Mono","Courier New",Monospace;
  color:black;
}
pre .c_b {
  display:block;
  position:absolute;
  top:0;
  right:0;
  padding:2px 5px;
}
.comment {color:gray}
.title {color:darkblue}
.string,.value {color:darkgreen}
.keyword {color:darkred}
.number {color:purple}

JavaScript

function copy_code(id) {
    var ref = document.getElementById(id),
        code = ref.getElementsByTagName('code')[0].innerHTML,
        w_w = window.innerWidth,
        w_h = window.innerHeight,
        win = window.open('', '', 'left=' + ((w_w / 2) - 250) + ',top=' + ((w_h / 2) - 150) + ',width=500,height=300,scrollbars=0');
    win.document.write('<!DOCTYPE html><html><head><title>Source Code</title><style type="text/css">*{margin:0;padding:0}body{padding:10px;text-aign:center}textarea{display:block;width:98%;height:270px;padding:1px 1px;margin:0 auto;text-align:left;overflow:auto}</style></head><body><textarea>' + code.replace(/<(.*?)>/g, "") + '</textarea><scr' + 'ipt type="text/javascript">var a=document.getElementsByTagName(\'textarea\')[0];a.focus();a.select();</scr' + 'ipt></body></html>');
}

function add_copy_button() {
    var pre = document.getElementsByTagName('pre');
    for (var i = 0; i < pre.length; i++) {
        pre[i].id = 'code-' + i;
        pre[i].className += ' quick-copy';
        pre[i].innerHTML += '<a class="c_b" href="javascript:copy_code(\'code-' + i + '\');">Copy</a>';
    }
}
add_copy_button();