From d4a73a12ad343f1a369972397f8891eb6ef34a55 Mon Sep 17 00:00:00 2001 From: David Maxwell Date: Wed, 5 May 2021 22:04:06 +0100 Subject: [PATCH] Version 0.5.3e --- build/env/index.html | 183 +++++++++++++++--------- build/env/styles.css | 31 +++- package.json | 2 +- src/modules/eventHandlers/mouseClick.js | 97 +++++++++++++ 4 files changed, 240 insertions(+), 73 deletions(-) create mode 100644 src/modules/eventHandlers/mouseClick.js 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); +