mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-28 04:36:49 +00:00
112 lines
3 KiB
HTML
112 lines
3 KiB
HTML
<!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() {
|
||
console.log('thumbnail has focus. this probably should not happen.');
|
||
});
|
||
$('#editor').click(function() {
|
||
var node = rangy.getSelection().anchorNode;
|
||
while (node.nodeType === 3) {
|
||
node = node.parentNode;
|
||
}
|
||
if (!node.isContentEditable) {
|
||
console.log('cursor is in the wrong place. fix it!');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<style>
|
||
[contenteditable="true"] {
|
||
cursor: text;
|
||
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’ve worked at several environments where most of our product was run through the JVM. I’ve always used the information available to me in Mbeans, but the overhead of exposing them to a monitoring system like Ganglia or Nagios has always been problematic.</p>
|
||
|
||
<div class="thumb" contenteditable="false">
|
||
THUMB
|
||
<p contenteditable="true">this is the caption</p>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html> |