2012-03-16 00:40:42 +00:00
<!DOCTYPE html>
< html >
< head >
< title > Flip< / title >
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" > < / script >
< script src = "../../modules/rangy/rangy-core.js" > < / script >
< script >
$(function() {
$('.thumb')
.click(function(e) {
if ($(e.target).attr('contenteditable') == 'true') {
return;
}
console.log('flipping');
if ($(this).hasClass('back')) {
$(this).addClass('front').removeClass('back');
} else {
$(this).addClass('back').removeClass('front');
}
})
.mouseover(function() {
$('#editor').attr('contenteditable', false);
})
.mouseout(function() {
$('#editor').attr('contenteditable', true);
})
.focus(function() {
2012-03-16 01:44:58 +00:00
console.log('thumbnail has focus. this probably should not happen.');
2012-03-16 00:40:42 +00:00
});
$('#editor').click(function() {
2012-03-16 01:44:58 +00:00
var node = rangy.getSelection().anchorNode;
while (node.nodeType === 3) {
node = node.parentNode;
}
if (!node.isContentEditable) {
2012-03-16 00:40:42 +00:00
console.log('cursor is in the wrong place. fix it!');
}
});
});
< / script >
< style >
[contenteditable="true"] {
2012-03-16 01:44:58 +00:00
cursor: text;
2012-03-16 00:40:42 +00:00
outline: 0;
}
#editor {
overflow: hidden;
}
#editor[contenteditable="false"] {
background: red;
}
.thumb {
background: #AAA;
border: 1px solid #CCC;
cursor: pointer;
float: left;
height: 200px;
margin: 0 10px 10px 0;
width: 200px;
/* Preserve 3D */
/*
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
*/
/* Backside Visibility */
/*
-webkit-backface-visibility: hidden;
*/
}
.thumb:hover {
outline: 1px solid blue;
}
.back {
/* Rotation and Perspective */
-webkit-transform: perspective(500px) rotateY(180deg);
-moz-transform: perspective(500px) rotateY(180deg);
-ms-transform: perspective(500px) rotateY(180deg);
/* Duration */
-webkit-transition: -webkit-transform 1s;
-moz-transition-duration: 1s;
-ms-transition-duration: 1s;
}
.front {
/* Rotation and Perspective */
-webkit-transform: perspective(500px) rotateY(0);
-moz-transform: perspective(500px) rotateY(0);
-ms-transform: perspective(500px) rotateY(0);
/* Duration */
-webkit-transition: -webkit-transform 1s;
-moz-transition-duration: 1s;
-ms-transition-duration: 1s;
}
< / style >
< / head >
< body >
< div id = "editor" contenteditable = "true" >
< p > This week, I was seeing a drop in average back-end performance at work, we had an average drop in page load performance from ~250ms to around 500ms. This seemed to be an intermittent problem and we searched through out graphs at NewRelic with no clear culprit.< / p >
< p > I’ ’ < / p >
< div class = "thumb" contenteditable = "false" >
THUMB
< p contenteditable = "true" > this is the caption< / p >
< / div >
< / div >
< / body >
< / html >
