<div id="myApp"></div>
body {
margin : 0;
}
var Surface = Samsara.DOM.Surface;
var Context = Samsara.DOM.Context;
var MouseInput = Samsara.Inputs.MouseInput;
function generateContent(data){
return 'event type: ' + data.eventType +
'<div>value: ' + data.value + '</div>' +
'<div>cumulate: ' + data.cumulate + '</div>' +
'<div>delta: ' + data.delta + '</div>' +
'<div>velocity: ' + data.velocity.toFixed(2) + '</div>' +
'<div>clientX: ' + data.clientX + '</div>' +
'<div>clientY: ' + data.clientY + '</div>';
}
var surface = new Surface({
content : 'drag me with your mouse'
});
var mouse = new MouseInput({direction : MouseInput.DIRECTION.X});
// The mouse now listens to the DOM events originating from the surface
mouse.subscribe(surface);
mouse.on('start', function(data){
data.eventType = 'start';
surface.setContent(generateContent(data));
});
mouse.on('update', function(data){
data.eventType = 'update';
surface.setContent(generateContent(data));
});
mouse.on('end', function(data){
data.eventType = 'end';
surface.setContent(generateContent(data));
});
var context = new Context();
context.add(surface);
context.mount(document.querySelector('#myApp'));
Also see: Tab Triggers