Find file
Fetching contributors…
Cannot retrieve contributors at this time
161 lines (143 sloc) 4.5 KB
<!DOCTYPE html>
<head>
<title>Stickies</title>
<style type="text/css" media="screen">
body {
background: transparent url(images/cherry.jpg);
}
.sticky {
position: absolute;
cursor: move;
width: 256px;
height: 256px;
background: transparent url(images/stickies/white.png) no-repeat;
}
.sticky .content {
width: 200px;
height: 200px;
position: relative;
top: 30px;
left: 20px;
border: none;
background: transparent;
font-family: Georgia;
}
a#add {
background: url(images/add.png) no-repeat;
width: 100px;
height: 100px;
display: block;
text-indent: -1000px;
position: fixed;
bottom: -10px;
left: 5px;
z-index: 1000;
}
#desk {
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<a id="add">Add</a>
<div id="desk">
</div>
<script type="text/javascript" charset="utf-8" src="js/modernizr-1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-css-transform.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" charset="utf-8">
Util = {
randomInt: function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
var Sticky = function(text) {
this.element = $("<div></div>")
.addClass("sticky")
.css({left: $("#desk").width()/2, top: 0, opacity: 0})
.css({left: ($("#desk").width() - 100) / 2,
top: ($("#desk").height() - 100) / 2 })
.css('transform', 'scale(0.3)')
.appendTo("#desk")
.draggable();
var sticky = this;
var content = $("<textarea>" + text + "</textarea>")
.addClass("content")
.bind("blur", function() {
sticky.stopEditing();
});
this.element.append(content)
this.element.click(function() {
sticky.startEditing();
})
this.startEditing();
// .css({top: Util.randomInt(-80, $("#desk").height() - 120)})
this.setStyle(Sticky.COLORS[Util.randomInt(0,Sticky.COLORS.length-1)]);
}
Sticky.COLORS = ["pink", "green", "yellow", "blue", "white"];
Sticky.prototype = {
startEditing: function() {
if(!this.editing) {
this.editing = true;
this.element
.animate({scale: 2,
opacity: 100,
left: ($("#desk").width() - this.element.width() - 100) / 2,
top: ($("#desk").height() - this.element.height() - 100) / 2 }, 100)
// top: Util.randomInt(-80, $("#desk").height() - 120)}, 300)
.css('transform', 'rotate(' + Util.randomInt(-5, 5) + 'deg)')
this.element.find(".content").removeAttr("readonly").select()
}
},
stopEditing: function() {
if(this.editing) {
this.editing = false;
this.element
.animate({scale: 1,
left: ($("#desk").width() - this.element.width() - 100) / 2,
top: ($("#desk").height() - this.element.height() - 100) / 2 }, 100)
// top: Util.randomInt(-80, $("#desk").height() - 120)}, 300)
.css('transform', 'rotate(' + Util.randomInt(-5, 5) + 'deg)')
.find(".content")
.attr("readonly", "true")
}
},
setPosition: function() {
},
setText: function(text) {
// console.log(this.element.find(".content").html(text))
this.element.find(".content").html(text).focus()
},
setStyle: function(stylename) {
// console.log(this.element);
this.element.css('background', "url(images/stickies/" + stylename + ".png)");
}
}
$(function() {
$("#add").click(function() {
new Sticky();
return false;
})
$("#desk").bind("drop", function(event) {
event.originalEvent.preventDefault();
var data = event.originalEvent.dataTransfer;
for (var i = 0; i < data.files.length; i++) {
var file = data.files.item(i);
new Sticky(file.getAsText("utf-8"));
}
return false;
}).bind("dragover", function(event) {
event.originalEvent.preventDefault();
return false;
})
})
</script>
</body>
</html>