-
Notifications
You must be signed in to change notification settings - Fork 94
/
index.html
78 lines (78 loc) · 3.11 KB
/
index.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>paste.js</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.0/normalize.min.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
body > div{
width: 80%;
padding: .5em;
margin: 0.5em auto;
}
.demo, .result{
border: solid 1px #999;
padding: 0.5em;
margin: 1em 0 0 0;
box-sizing: contentbox;
width: 100%;
}
.result > img{
border: solid 1px #ccc;
height: 50px;
}
.pastable{
transition: box-shadow ease .3s;
}
.pastable:hover{
box-shadow: 0 0 3px black;
}
.pastable.pastable-focus{
box-shadow: 0 0 10px black;
}
</style>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript" src="paste.js"></script>
<script type="text/javascript">
$(function(){
$('.demo-noninputable').pastableNonInputable();
$('.demo-textarea').on('focus', function(){
var isFocused = $(this).hasClass('pastable-focus');
console && console.log('[textarea] focus event fired! ' + (isFocused ? 'fake onfocus' : 'real onfocus'));
}).pastableTextarea().on('blur', function(){
var isFocused = $(this).hasClass('pastable-focus');
console && console.log('[textarea] blur event fired! ' + (isFocused ? 'fake onblur' : 'real onblur'));
});
$('.demo-contenteditable').pastableContenteditable();
$('.demo').on('pasteImage', function(ev, data){
var blobUrl = URL.createObjectURL(data.blob);
var name = data.name != null ? ', name: ' + data.name : '';
$('<div class="result">image: ' + data.width + ' x ' + data.height + name + '<img src="' + data.dataURL +'" ><a href="' + blobUrl + '">' + blobUrl + '</div>').insertAfter(this);
}).on('pasteImageError', function(ev, data){
alert('Oops: ' + data.message);
if(data.url){
alert('But we got its url anyway:' + data.url)
}
}).on('pasteText', function(ev, data){
$('<div class="result"></div>').text('text: "' + data.text + '"').insertAfter(this);
}).on('pasteTextRich', function(ev, data){
$('<div class="result"></div>').text('rtf: "' + data.text + '"').insertAfter(this);
}).on('pasteTextHtml', function(ev, data){
$('<div class="result"></div>').text('html: "' + data.text + '"').insertAfter(this);
});
});
</script>
<body>
<div>
<h1>Paste.js</h1>
<p>
<a href="https://github.com/layerssss/paste.js">github.com/layerssss/paste.js</a>
</p>
<div class="demo demo-noninputable">I'm a div, using `$('.demo-noninputable').pastableNonInputable()`.</div>
<textarea class="demo demo-textarea">I'm a textarea, using `$('.demo-textarea').pastableTextarea()`.</textarea>
<div class="demo demo-contenteditable" contenteditable>I'm a div[contenteditable], using `$('.demo-contenteditable').pastableContenteditable()`.</div>
</div>
</body>
</html>