Skip to content

Commit

Permalink
Version 0.5.3e
Browse files Browse the repository at this point in the history
  • Loading branch information
maxwelld90 committed May 5, 2021
1 parent ae64d8f commit d4a73a1
Show file tree
Hide file tree
Showing 4 changed files with 240 additions and 73 deletions.
183 changes: 113 additions & 70 deletions build/env/index.html
Expand Up @@ -103,6 +103,13 @@ <h2>Scrollable Element</h2>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="container-mouseclick" class="group-container">
<h2>Mouse Clicks</h2>

<div id="left-click-box">Left Click</div>
<div id="centre-click-box">Centre Click</div>
<div id="right-click-box">Right Click</div>
</div>
</div>

</main>
Expand Down Expand Up @@ -130,7 +137,7 @@ <h2>Scrollable Element</h2>
contextMenu: true,
pageFocus: true,
trackCursor: false,
cursorUpdateFrequency: 2000,
cursorUpdateFrequency: 500,
cursorLeavingPage: true,
pageResize: false,
}
Expand All @@ -141,87 +148,123 @@ <h2>Scrollable Element</h2>
rotation: 1,
},
trackingConfiguration: {
'convolutedHover': {
selector: '#convoluted-list-container .list .item .text a',
event: 'mouseHover',
properties: {
mouseenter: {
name: 'CONV_ITEM_IN',
},
mouseleave: {
name: 'CONV_ITEM_OUT',
}
},
metadata: [
{
nameForLog: 'POSITION',
sourcer: 'elementAttribute',
lookFor: 'data-rank',
}
],

'clickTest': {
selector: '#test-click-box1',
event: 'mouseClick',
},

'scroll-box': {
selector: '#scrollable-element',
event: 'scrollable',
// 'convolutedHover': {
// selector: '#convoluted-list-container .list .item .text a',
// event: 'mouseHover',
// properties: {
// mouseenter: {
// name: 'CONV_ITEM_IN',
// },
// mouseleave: {
// name: 'CONV_ITEM_OUT',
// }
// },
// metadata: [
// {
// nameForLog: 'POSITION',
// sourcer: 'elementAttribute',
// lookFor: 'data-rank',
// }
// ],
// },

// 'scroll-box': {
// selector: '#scrollable-element',
// event: 'scrollable',
// properties: {
// scrollStart: {
// name: 'SCROLL_START_NAME',
// },
// scrollEnd: {
// name: 'SCROLL_END_NAME',
// },
// }
// },

// 'testBoxHover': {
// selector: '.test',
// event: 'mouseHover',
// properties: {
// blockEventBubbling: true,
// mouseover: {
// name: 'TEST_BOX_MOUSE_IN',
// },
// mouseout: {
// name: 'TEST_BOX_MOUSE_OUT',
// }
// },
// metadata: [
// {
// logAs: 'LOG_NAME',
// source: 'elementAttribute',
// find: 'attributeName'
// }
// ],
// },

// 'textBox1Click': {
// selector: '#test-click-box1',
// event: 'click',
// name: 'BOX_1_CLICK!',
// },

// 'clockHover': {
// selector: '#test-reactapp-clock',
// event: 'mouseover',
// name: 'CLOCK_HOVER_TIME',
// metadata: [
// {
// nameForLog: 'CURRENT_TIME',
// sourcer: 'reactComponentState',
// lookFor: 'time',
// },
// {
// nameForLog: 'PROP_TEST',
// sourcer: 'reactComponentProp',
// lookFor: 'sampleProp',
// }
// ],
// },

// 'listhover': {
// selector: '#listofelements li',
// event: 'mouseHover',
// },

'clickBox-left': {
selector: '#left-click-box',
event: 'mouseClick',
properties: {
scrollStart: {
name: 'SCROLL_START_NAME',
},
scrollEnd: {
name: 'SCROLL_END_NAME',
primary: {
name: 'CLICK_LEFT',
},
}
},

'testBoxHover': {
selector: '.test',
event: 'mouseHover',
'clickBox-centre': {
selector: '#centre-click-box',
event: 'mouseClick',
properties: {
blockEventBubbling: true,
mouseover: {
name: 'TEST_BOX_MOUSE_IN',
auxiliary: {
name: 'CLICK_CENTRE',
},
mouseout: {
name: 'TEST_BOX_MOUSE_OUT',
}
},
metadata: [
{
logAs: 'LOG_NAME',
source: 'elementAttribute',
find: 'attributeName'
}
],
},

'textBox1Click': {
selector: '#test-click-box1',
event: 'click',
name: 'BOX_1_CLICK!',
}
},

'clockHover': {
selector: '#test-reactapp-clock',
event: 'mouseover',
name: 'CLOCK_HOVER_TIME',
metadata: [
{
nameForLog: 'CURRENT_TIME',
sourcer: 'reactComponentState',
lookFor: 'time',
'clickBox-right': {
selector: '#right-click-box',
event: 'mouseClick',
properties: {
secondary: {
name: 'CLICK_RIGHT',
},
{
nameForLog: 'PROP_TEST',
sourcer: 'reactComponentProp',
lookFor: 'sampleProp',
}
],
},

'listhover': {
selector: '#listofelements li',
event: 'mouseHover',
}
},
},
};
Expand Down
31 changes: 29 additions & 2 deletions build/env/styles.css
Expand Up @@ -67,7 +67,6 @@ main div#elements-container {
-o-column-fill: auto;
margin-top: 20px;
padding: 10px;
height: 500px;
background-color: #EFEFEF;
border-radius: 5px;
margin-bottom: 35%;
Expand All @@ -87,6 +86,7 @@ main div#elements-container {
padding: 10px;
background: #C6C6C6;
border-radius: 5px;
break-inside: avoid-column;
}

div#console {
Expand Down Expand Up @@ -129,7 +129,7 @@ div#console {
}

main div#elements-container div.group-container#container-test-click {
min-height: 200px;
min-height: 300px;
}

div#test-click-box1 {
Expand Down Expand Up @@ -202,4 +202,31 @@ div#scrollable-element {
padding: 10px;
height: 100px;
overflow-y: scroll;
}

div#left-click-box {
width: 90px;
height: 90px;
background-color:red;
color: white;
margin-bottom: 10px;
}

div#centre-click-box {
width: 90px;
height: 90px;
position: relative;
left: 100px;
background-color:yellow;
margin-bottom: 10px;
}

div#right-click-box {
width: 90px;
height: 90px;
position: relative;
left: 200px;
background-color:green;
color: white;
margin-bottom: 10px;
}
2 changes: 1 addition & 1 deletion package.json
@@ -1,6 +1,6 @@
{
"name": "logui",
"version": "0.5.3d",
"version": "0.5.3e",
"description": "A framework-agnostic client-side JavaScript library for logging user interactions on webpages.",
"main": "./src/main.js",
"scripts": {
Expand Down
97 changes: 97 additions & 0 deletions src/modules/eventHandlers/mouseClick.js
@@ -0,0 +1,97 @@
/*
LogUI Client Library
Event Handlers / Mouse Click Group Event
A IIFE function yielding a generic mouse click event.
@module: Mouse Click Event Handler
@author: David Maxwell
@date: 2021-05-05
*/

import RequiredFeatures from '../required';

RequiredFeatures.addFeature('WeakMap');

export default (function(root) {
var _handler = {};
var _currentMouseOver = null;

_handler.browserEvents = ['mousedown', 'mouseup'];

_handler.init = function() {
_currentMouseOver = new WeakMap();
return;
}

_handler.stop = function() {
_currentMouseOver = null;
}

_handler.logUIEventCallback = function(eventContext, browserEvent, trackingConfig) {
if (browserEvent.type == 'mousedown') {
_currentMouseOver.set(eventContext, browserEvent.timeStamp);
}

if (browserEvent.type == 'mouseup') {
if (_currentMouseOver.has(eventContext)) {
let difference = browserEvent.timeStamp - _currentMouseOver.get(eventContext);
let button = browserEvent.button;
let properties = getButtonConfig(trackingConfig, button);

if (!properties) {
// If no properties are specified, we ignore the event.
return;
}

// If we get here, we should log this event.
// Construct the returnObject, and send it back. This gets sent to the EventPackager.
let returnObject = {};
returnObject['clickDuration'] = difference;
returnObject['type'] = 'mouseClick';
returnObject['button'] = properties.mapping;

if ('name' in properties) {
returnObject['name'] = properties.name;
}

_currentMouseOver.delete(eventContext);
return returnObject;
}
}

};

var getButtonConfig = function(trackingConfig, button) {
// Given a button number (0, 1, 2...), return the properties for that button.
// Mappings: primary (0), auxiliary (1), secondary (2)
if (!trackingConfig.properties) {
// No properties object was found for the given configuration.
return;
}

let mapping = {
0: 'primary',
1: 'auxiliary',
2: 'secondary',
3: 'auxiliary2',
4: 'auxiliary3',
};

if (!(button in mapping)) {
// The button ID clicked doesn't have a mapping in the object above.
return;
}

if (!trackingConfig.properties[mapping[button]]) {
// No configuration was found for the given mapping (e.g., no primary, auxiliary, secondary).
return;
}

trackingConfig.properties[mapping[button]].mapping = mapping[button];
return trackingConfig.properties[mapping[button]];
}

return _handler;
})(window);

0 comments on commit d4a73a1

Please sign in to comment.