diff --git a/build/env/index.html b/build/env/index.html
index ad187e9..394c9d5 100644
--- a/build/env/index.html
+++ b/build/env/index.html
@@ -103,6 +103,13 @@
Scrollable Element
+
+
Mouse Clicks
+
+
Left Click
+
Centre Click
+
Right Click
+
@@ -130,7 +137,7 @@ Scrollable Element
contextMenu: true,
pageFocus: true,
trackCursor: false,
- cursorUpdateFrequency: 2000,
+ cursorUpdateFrequency: 500,
cursorLeavingPage: true,
pageResize: false,
}
@@ -141,87 +148,123 @@ Scrollable Element
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',
+ }
},
},
};
diff --git a/build/env/styles.css b/build/env/styles.css
index f2624ca..efda305 100644
--- a/build/env/styles.css
+++ b/build/env/styles.css
@@ -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%;
@@ -87,6 +86,7 @@ main div#elements-container {
padding: 10px;
background: #C6C6C6;
border-radius: 5px;
+ break-inside: avoid-column;
}
div#console {
@@ -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 {
@@ -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;
}
\ No newline at end of file
diff --git a/package.json b/package.json
index b5a35c0..bb3c2de 100644
--- a/package.json
+++ b/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": {
diff --git a/src/modules/eventHandlers/mouseClick.js b/src/modules/eventHandlers/mouseClick.js
new file mode 100644
index 0000000..c43b998
--- /dev/null
+++ b/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);
+