Skip to content

Commit cc15c77

Browse files
oxxostudiooxxostudio
committed
add js copy button
1 parent d8b6438 commit cc15c77

39 files changed

Lines changed: 2767 additions & 2 deletions

‎ZeroClipboard.js‎

Lines changed: 2581 additions & 0 deletions
Large diffs are not rendered by default.

‎ZeroClipboard.swf‎

6.43 KB
Binary file not shown.

‎copyCode.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
var copy = document.getElementById('copyCode');
2+
copy.addEventListener('click',function(e){
3+
e.target.setAttribute('data-tooltip','Copied !!');
4+
SelectText('content_javascript');
5+
});
6+
copy.addEventListener('mouseover',function(e){
7+
e.target.setAttribute('data-tooltip','Copy to clipboard');
8+
});
9+
var client = new ZeroClipboard(copy);
10+
document.getElementById('tab_javascript').addEventListener('click',function(){
11+
var jsClick = document.querySelectorAll('.jsClick');
12+
for(var i=0; i<jsClick.length; i++){
13+
jsClick[i].style.display = 'table-cell';
14+
}
15+
});
16+
document.getElementById('tab_blocks').addEventListener('click',function(){
17+
var jsClick = document.querySelectorAll('.jsClick');
18+
for(var i=0; i<jsClick.length; i++){
19+
jsClick[i].style.display = 'none';
20+
}
21+
});
22+
23+
function SelectText(element) {
24+
var doc = document
25+
, text = doc.getElementById(element)
26+
, range, selection
27+
;
28+
if (doc.body.createTextRange) {
29+
range = document.body.createTextRange();
30+
range.moveToElementText(text);
31+
range.select();
32+
} else if (window.getSelection) {
33+
selection = window.getSelection();
34+
range = document.createRange();
35+
range.selectNodeContents(text);
36+
selection.removeAllRanges();
37+
selection.addRange(range);
38+
}
39+
}

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@
1818
<script src="webduino-fish.js"></script>
1919
<script src="blocks/webduino.js"></script>
2020
<script src="generators/webduino.js"></script>
21+
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
2122
<script src='https://cdn.firebase.com/js/client/2.2.9/firebase.js'></script>
23+
<script src="ZeroClipboard.js"></script>
2224
</head>
2325

2426
<body>

‎media/copy.png‎

1.09 KB
Loading

‎style.css‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ table {
125125

126126
td {
127127
padding: 0;
128-
vertical-align: top;
128+
vertical-align: middle;
129129
}
130130

131131
.content {
@@ -286,6 +286,52 @@ table.nav table{
286286
table.nav td.tabon{
287287
background:#ddd;
288288
}
289+
td#copyCode{
290+
background-image:linear-gradient(top,#ddd 0%,#fff 100%);
291+
background-image:-moz-linear-gradient(top,#ddd 0%,#fff 100%);
292+
background-image:-webkit-linear-gradient(top,#ddd 0%,#fff 100%);
293+
cursor:pointer;
294+
}
295+
td#copyCode.zeroclipboard-is-hover{
296+
position:relative;
297+
background:#fff;
298+
}
299+
td#copyCode.zeroclipboard-is-hover:before{
300+
content:'';
301+
position:absolute;
302+
display:block;
303+
z-index:10;
304+
width:0;
305+
height:0;
306+
border-width:3px 7px;
307+
border-color:transparent rgba(255,255,255,.3) transparent transparent;
308+
border-style:solid;
309+
top:6px;
310+
left:26px;
311+
}
312+
td#copyCode.zeroclipboard-is-hover:after{
313+
content:attr(data-tooltip);
314+
position:absolute;
315+
display:block;
316+
z-index:10;
317+
background:rgba(255,255,255,.3);
318+
top:0;
319+
left:40px;
320+
border-radius:3px;
321+
color:#ddd;
322+
font-size:12px;
323+
padding:5px;
324+
white-space:nowrap;
325+
font-family:'verdana';
326+
}
327+
td#copyCode div{
328+
width:30px;
329+
padding:5px 0;
330+
text-align: center;
331+
height:100%;
332+
font-size:14px;
333+
pointer-events: none;
334+
}
289335
.blocklyToolboxDiv{
290336
box-shadow: rgba(0,0,0,.3) 2px 5px 5px;
291337
}

‎views/index.handlebars‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
<script src="copyCode.js"></script>
2+
13
<header>
2-
<img class="logo" src="media/logo.png">
4+
<img class="logo" src="media/logo.png" id="logo">
35
<h1>{{title}}</h1>
46
<span>( <a href="index-tutorials.html" target="_blank">{{gotoTutorials}}</a> )</span>
57
<div id="update">{{update}}</div>
@@ -13,6 +15,7 @@
1315
<td id="tab_blocks" class="tabon">{{blocks}}</td>
1416
<td class="tabmin">&nbsp;</td>
1517
<td id="tab_javascript" class="taboff">JavaScript</td>
18+
<td id="copyCode" class="jsClick" style="display:none;" data-clipboard-target="content_javascript" data-tooltip="Copy to clipboard"><div><img src="media/copy.png"></div></td>
1619
<td class="tabmin">&nbsp;</td>
1720
<td class="tabmax">
1821
<a href="http://bin.webduino.io/yupu/edit?html,js,output" id="indexLinkToBin" target="_blank"><img src="media/dave.min.svg">{{linkToBin}}</a>

‎views/tutorials/button-1.handlebars‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<script src="copyCode.js"></script>
2+
13
<link rel="stylesheet" href="tutorials.css">
24

35
<style>
@@ -28,6 +30,7 @@
2830
<td id="tab_blocks" class="tabon">{{blocks}}</td>
2931
<td class="tabmin">&nbsp;</td>
3032
<td id="tab_javascript" class="taboff">JavaScript</td>
33+
<td id="copyCode" class="jsClick" style="display:none;" data-clipboard-target="content_javascript" data-tooltip="Copy to clipboard"><div><img src="media/copy.png"></div></td>
3134
<td class="tabmin">&nbsp;</td>
3235
<td id="tab_xml" class="taboff" style="display:none;">XML</td>
3336
<td class="tabmax">

‎views/tutorials/button-2.handlebars‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<script src="copyCode.js"></script>
2+
13
<link rel="stylesheet" href="tutorials.css">
24

35
<style>
@@ -28,6 +30,7 @@
2830
<td id="tab_blocks" class="tabon">{{blocks}}</td>
2931
<td class="tabmin">&nbsp;</td>
3032
<td id="tab_javascript" class="taboff">JavaScript</td>
33+
<td id="copyCode" class="jsClick" style="display:none;" data-clipboard-target="content_javascript" data-tooltip="Copy to clipboard"><div><img src="media/copy.png"></div></td>
3134
<td class="tabmin">&nbsp;</td>
3235
<td id="tab_xml" class="taboff" style="display:none;">XML</td>
3336
<td class="tabmax">

‎views/tutorials/button-3.handlebars‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<script src="copyCode.js"></script>
2+
13
<link rel="stylesheet" href="tutorials.css">
24

35
<style>
@@ -28,6 +30,7 @@
2830
<td id="tab_blocks" class="tabon">{{blocks}}</td>
2931
<td class="tabmin">&nbsp;</td>
3032
<td id="tab_javascript" class="taboff">JavaScript</td>
33+
<td id="copyCode" class="jsClick" style="display:none;" data-clipboard-target="content_javascript" data-tooltip="Copy to clipboard"><div><img src="media/copy.png"></div></td>
3134
<td class="tabmin">&nbsp;</td>
3235
<td id="tab_xml" class="taboff" style="display:none;">XML</td>
3336
<td class="tabmax">

0 commit comments

Comments
 (0)