siesta-lite
Version:
Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers
154 lines (115 loc) • 4.7 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js">/*
Siesta 5.6.1
Copyright(c) 2009-2022 Bryntum AB
https://bryntum.com/contact
https://bryntum.com/products/siesta/license
*/
// Internal class visualizing the cursor position, only used in good browsers (!== IE)
Class('Siesta.Project.Browser.UI.MouseVisualizer', {
has : {
cursorEl : null,
currentContainer : { required : true },
clickEvents : function () {
return {
click : null,
touchend : null,
contextmenu : null
}
},
mouseDownEvents : function () {
return {
touchstart : null,
mousedown : null
}
},
mouseUpEvents : function () {
return {
touchend : null,
mouseup : null
}
}
},
methods : {
initialize : function (config) {
this.onEventSimulated = this.onEventSimulated.bind(this);
},
getCursorEl : function () {
if (this.cursorEl) return this.cursorEl
var currentContainer = this.currentContainer
if (!currentContainer) throw "Need container for cursor"
var el = document.createElement('div');
el.className = 'ghost-cursor fa fa-mouse-pointer';
return this.cursorEl = currentContainer.appendChild(el)
},
destroy : function () {
var cursorEl = this.cursorEl
if (cursorEl) {
cursorEl.parentElement.removeChild(cursorEl);
this.cursorEl = null
}
this.currentContainer = null
},
onEventSimulated : function (event, point) {
if (typeof event.clientX === 'number') {
this.updatePointer(event.type, point)
}
},
updatePointer : function (eventType, point) {
var x = point[ 0 ],
y = point[ 1 ]
this.updateGhostCursor(x, y);
if (eventType in this.clickEvents) {
this.showClickIndicator(eventType, x, y);
} else if (eventType in this.mouseDownEvents) {
this.getCursorEl().classList.add('ghost-cursor-press');
}
if (eventType in this.mouseUpEvents || eventType in this.clickEvents) {
this.getCursorEl().classList.remove('ghost-cursor-press');
}
},
// This method shows a fading growing circle at the xy position
showClickIndicator : function (type, x, y) {
var clickEl = document.createElement('div');
clickEl.className = 'ghost-cursor-click-indicator ';
clickEl.style.setProperty('left', x + 'px');
clickEl.style.setProperty('top', y + 'px');
clickEl.addEventListener("animationend", this.afterAnimation);
clickEl.addEventListener("webkitAnimationEnd", this.afterAnimation);
this.currentContainer.appendChild(clickEl);
},
afterAnimation : function() {
// "this" here is a DOM element instance
this.parentElement && this.parentElement.removeChild(this);
},
// Updates the ghost cursor position and appearance
updateGhostCursor : function (x, y) {
var cursorEl = this.getCursorEl()
var translateStyle = bowser.opera ?
'translate(' + x + 'px,' + y + 'px)'
:
'translate3d(' + x + 'px, ' + y + 'px, 0)'
cursorEl.style.setProperty('-webkit-transform', translateStyle)
cursorEl.style.setProperty('transform', translateStyle)
}
}
});
</pre>
</body>
</html>