-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patheditor.html
133 lines (104 loc) · 3.06 KB
/
editor.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!--
A simple expression to ilustrate use of urturn API.
This expression use JQuery / Jquery UI and bootstrap.
This expression add a sticker in top of an image.
You can choose the sticker positon by drag and drop.
It's online here :
http://www.urturn.com/pld/rocks
-->
<body>
<!--
We create some HTML markup
-->
<div id='main' style='text-align :center; width : 100%'>
<br/>
<br/>
<br/>
<br/>
<br/>
<p class="lead">Let's Rock! <br/>
First add an Image !
</p>
<input type='button' class='btn btn-primary' value='Add an image' id='addImage'/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<!--
Here is the expression script
-->
<script type="text/javascript">
var post = null;
var postWidth = 0;
var rocks = null;
// Called when expression is ready to use.
UT.Expression.ready(function(pst){
// Ugly but convinient, we set the post as global
post = pst;
// We set the note of the post
post.note = 'This #rocks!';
// Trick here : we will work with squared image.
// postWidth will also be use to determin post height.
postWidth = $('#main')[0].offsetWidth;
post.resize({height : $('#main')[0].offsetHeight});
// we handle user click on addImage button
$('#addImage').on('click', addAnImage);
});
// Called when add an image button is pressed
function addAnImage() {
// we call a image dialog for a 600 * 600 squared image
post.dialog('image', {size : {width : 600, height : 600}}, imageAdded)
}
// Called when an image is added
function imageAdded(img) {
// If user close the library or abort image selection process
// then null is retun here. In this case we just abord image
// insertion and do nothing
if (img == null) {
return;
}
// We clean the HTML markup
$('#main').html('');
// We change height of post to width (we want a squared post)
post.resize({height : postWidth});
// We set the background image
var imgObj = $('<img/>')
.attr('src', img.url)
.css({width : postWidth , height : postWidth})
$('#main').append(imgObj);
// we prepare the sticker
rocks = $('<img/>')
.attr('src', './rocks.png')
.css({position : 'absolute', top : 10, left : 10, width : 200, height : 200});
$('#main').append(rocks);
// see jquery ui doc for draggable
rocks.draggable({
containment: "#main",
scroll: false,
stop: updateSticker});
// We save the background image to use in play mode
post.storage.image = img;
// we update stiker position
updateSticker();
}
function updateSticker(){
// we get sticker position
var pos = rocks.offset();
// We transform this position into %
// same for sticker size
var left = 100 / postWidth * pos.left | 0;
var top = 100 / postWidth * pos.top | 0;
var stickerSize = 100 / postWidth * 200 | 0;
// We save sticker position and size in %
post.storage.top = top;
post.storage.left = left;
post.storage.stickerSize = stickerSize;
// we ask API to save storage
post.storage.save();
// we can now post this post :-)
post.valid(true);
}
</script>
</body>