This is an automated email from the ASF dual-hosted git repository.
poorejc pushed a commit to branch FLAGON-469
in repository https://gitbox.apache.org/repos/asf/incubator-flagon-useralejs.git
The following commit(s) were added to refs/heads/FLAGON-469 by this push:
new 55ed930 [FLAGON-468] updated and tested customDetails and
customPackageLogs support
55ed930 is described below
commit 55ed930a83dcc0d53c5ac71fc815c4ba8bd4ebe7
Author: poorejc <[email protected]>
AuthorDate: Fri Dec 13 10:31:21 2019 -0500
[FLAGON-468] updated and tested customDetails and customPackageLogs support
---
build/userale-2.0.2.js | 35 +++++++++++++++++++++-
build/userale-2.0.2.min.js | 2 +-
example/aleAPI.js | 74 ++++++++++++++++++++++++++++++----------------
example/index.html | 8 ++---
src/attachHandlers.js | 35 +++++++++++++++++++++-
src/main.js | 5 +---
src/packageLogs.js | 2 +-
7 files changed, 124 insertions(+), 37 deletions(-)
diff --git a/build/userale-2.0.2.js b/build/userale-2.0.2.js
index 92875ca..60bc5bc 100644
--- a/build/userale-2.0.2.js
+++ b/build/userale-2.0.2.js
@@ -710,6 +710,39 @@ var userale = (function (exports) {
}
/**
+ * Defines the way information is extracted from various events.
+ * Also defines which events we will listen to.
+ * @param {Object} options UserALE.js Configuration object to read from.
+ * @param {string} type of html event (e.g., 'click', 'mouseover',
etc.), such as passed to addEventListener methods.
+ */
+ function defineCustomDetails(options, type) {
+ // Events list
+ // Keys are event types
+ // Values are functions that return details object if applicable
+ var eventType = {
+ 'click' : extractMouseEvent,
+ 'dblclick' : extractMouseEvent,
+ 'mousedown' : extractMouseEvent,
+ 'mouseup' : extractMouseEvent,
+ 'focus' : null,
+ 'blur' : null,
+ 'input' : options.logDetails ? function(e) { return { 'value' :
e.target.value }; } : null,
+ 'change' : options.logDetails ? function(e) { return { 'value' :
e.target.value }; } : null,
+ 'dragstart' : null,
+ 'dragend' : null,
+ 'drag' : null,
+ 'drop' : null,
+ 'keydown' : options.logDetails ? function(e) { return { 'key' :
e.keyCode, 'ctrl' : e.ctrlKey, 'alt' : e.altKey, 'shift' : e.shiftKey, 'meta' :
e.metaKey }; } : null,
+ 'mouseover' : null,
+ 'wheel' : function(e) { return { 'x' : e.deltaX, 'y' : e.deltaY, 'z' :
e.deltaZ }; },
+ 'scroll' : function() { return { 'x' : window.scrollX, 'y' :
window.scrollY }; },
+ 'resize' : function() { return { 'width' : window.outerWidth, 'height' :
window.outerHeight }; },
+ 'submit' : null
+ };
+ return eventType[type];
+ }
+
+ /**
* Hooks the event handlers for each event type of interest.
* @param {Object} config Configuration object to use.
* @return {boolean} Whether the operation succeeded
@@ -863,7 +896,7 @@ var userale = (function (exports) {
}
exports.buildPath = buildPath;
- exports.details = defineDetails;
+ exports.details = defineCustomDetails;
exports.filter = setLogFilter;
exports.getSelector = getSelector;
exports.log = log;
diff --git a/build/userale-2.0.2.min.js b/build/userale-2.0.2.min.js
index fbef41e..021123f 100644
--- a/build/userale-2.0.2.min.js
+++ b/build/userale-2.0.2.min.js
@@ -15,4 +15,4 @@
* limitations under the License.
* @preserved
*/
-var userale=function(n){"use strict";var
u,l,a,i,s,c,d,f,e="2.0.2",r=null;function
t(n,o){Object.keys(o).forEach(function(e){if("userFromParams"===e){var
t=function(e){var t=new
RegExp("[?&]"+e+"(=([^&#]*)|&|#|$)"),n=window.location.href.match(t);return
n&&n[2]?decodeURIComponent(n[2].replace(/\+/g,"
")):null}(o[e]);t&&(n.userId=t)}n[e]=o[e]})}var m=null,p=null;function
o(e,t){if(!l.on)return!1;var n=null;t&&(n=t(e));var
o=g(e.timeStamp&&0<e.timeStamp?l.time(e.timeStamp):Date.now()),r={t [...]
\ No newline at end of file
+var userale=function(n){"use strict";var
u,l,i,a,s,c,d,f,e="2.0.2",r=null;function
t(n,o){Object.keys(o).forEach(function(e){if("userFromParams"===e){var
t=function(e){var t=new
RegExp("[?&]"+e+"(=([^&#]*)|&|#|$)"),n=window.location.href.match(t);return
n&&n[2]?decodeURIComponent(n[2].replace(/\+/g,"
")):null}(o[e]);t&&(n.userId=t)}n[e]=o[e]})}var m=null,g=null;function
o(e,t){if(!l.on)return!1;var n=null;t&&(n=t(e));var
o=p(e.timeStamp&&0<e.timeStamp?l.time(e.timeStamp):Date.now()),r={t [...]
\ No newline at end of file
diff --git a/example/aleAPI.js b/example/aleAPI.js
index fd05fb0..354e93f 100644
--- a/example/aleAPI.js
+++ b/example/aleAPI.js
@@ -12,18 +12,24 @@
// limitations under the License.
/** Options API
-
-/**Try out the 'Options' function to change UserALE.js params!*/
+ *
+ * the 'options' API allows you to dynamically change UserALE.js params and
set meta data values
+ *pass in variables or properties into the options object, such as
sessionStorage or localStorage
+ */
const changeMe = "me";
window.userale.options({
"userId": changeMe,
"version": "next",
+ "logDetails": "true",
"sessionID": "this one"
});
/**Filter API
-/**Try out the 'Filter' API to eliminate the logs that you don't want!*/
+/**the 'filter' API allows you to eliminate logs you don't want
+ *use as a global filter and add classes of events or log types to eliminate
+ *or use in block scope to surgically eliminate logs from specific elements
from an event handler
+ */
window.userale.filter(function (log) {
var type_array = ['mouseup', 'mouseover', 'mousedown', 'keydown',
'dblclick', 'blur', 'focus'];
var logType_array = ['interval'];
@@ -31,23 +37,41 @@ window.userale.filter(function (log) {
});
/**Log Mapping API
-
-/**Play around with the 'Mapping' API to add or modify existing fields in your
logs!*/
-/**the example below modifies fields attached to logs on the "Click Me" button
on the Example page*/
-window.userale.map(function (log, e) {
- var targetsForLabels = ["button#test_button"];
- if (targetsForLabels.includes(log.target)) {
- return Object.assign({}, log, { customLabel: e.target.innerHTML });
+ *
+ * the 'map' API allows you to add or modify new fields to your logs
+ * this example works with the "Click Me!" button at the top of index.html
+ */
+ document.addEventListener('click', function(e){
+ if (e.target.innerHTML === 'Click Me!') {
+ window.userale.map(function (log) {
+ return Object.assign({}, log, { logType: 'custom', customLabel:
'map & packageLog Example' });
+ });
+ window.userale.packageLog(e,
window.userale.details(window.userale.options(),'click'));
} else {
- return log;
+ return false
}
});
-/**'Log' API and Custom Log Functions
+/** Alternate Log Mapping API Example
+ * Build a global mapping function with conditional logic to modify logs for
similar events
+ * this example works with the "Click Me!" button at the top of index.html
+ */
+//window.userale.map(function (log, e) {
+// var targetsForLabels = ["button#test_button"];
+// if (targetsForLabels.includes(log.target)) {
+// return Object.assign({}, log, { customLabel: e.target.innerHTML });
+// } else {
+// return log;
+// }
+//});
-/**Check out the 'log' API to generate custom events and add them to the log
queue! The possibilities are endless
-/*You can fully customize your custom logs and define any data schema that
suits you*/
-/**this example works with the "Test Field" form element on the Example Page*/
+/**'Log' API and Custom Log Functions
+ *
+ * the 'log' API generate custom events and add them to the log queue
+ * pass in any keys:values for fully customized logs
+ * utilize 'options' and other functions to streamline populating custom logs
+ * type 'log' into the 'API Test Field' to see this custom log sent to our
example server
+ */
document.addEventListener('change', function(e) {
if (e.target.value === 'log') {
window.userale.log({
@@ -69,10 +93,12 @@ document.addEventListener('change', function(e) {
}
});
-/**Alternatively, you can use UserALE.js' own packaging function for HTML
events to strive for standardization!*/
-/**this example works with the "Test Field" form element on the Example Page*/
+/**you can also use UserALE.js' own packaging function for HTML events to
strive for standardization
+ * type 'packageLog into the 'API Test Field' to see this custom log sent to
our example server
+ */
document.addEventListener('change', function(e){
if (e.target.value === 'packageLog') {
+ /**You can then use the 'Mapping' API function to modify custom logs
created with the packageLog function*/
window.userale.map(function (log) {
var targetsForLabels = ['change'];
if (targetsForLabels.includes(log.type)) {
@@ -81,15 +107,16 @@ document.addEventListener('change', function(e){
return log;
}
});
- // todo figure out passing details output to packagelog
window.userale.details(window.userale.options());
- window.userale.packageLog(e, function(){return 'add additional details
here!'});
+ /**You can also use the details function to package additional log
meta data, or add custom details*/
+ window.userale.packageLog(e,
window.userale.details(window.userale.options(),'change'));
} else {
return false
}
});
-/**You can then use the 'Mapping' API function to modify custom logs created
with the packageLog function*/
-
+/**you can also just add boilerplate UserALE.js meta data to custom logs with
the packageCustomLog function
+ * type 'packageCustomLog into the 'API Test Field' to see this custom log
sent to our example server
+ */
document.addEventListener('change', function(e) {
if (e.target.value === 'packageCustomLog') {
window.userale.packageCustomLog({
@@ -102,7 +129,4 @@ document.addEventListener('change', function(e) {
} else {
return false
}
-});
-
-// @todo example for extracting text from click events
-
+});
\ No newline at end of file
diff --git a/example/index.html b/example/index.html
index 9d42a2c..043162f 100644
--- a/example/index.html
+++ b/example/index.html
@@ -18,16 +18,16 @@ limitations under the License.
<!-- Load UserALE.js and set logging parameters-->
<script
-
src="file:///Users/jpoore/Documents/Apache_Flagon/dev/incubator-flagon-useralejs/build/userale-2.0.2.min.js"
+ src="{your path here}/build/userale-2.0.2.min.js"
data-url="http://localhost:8000/";
data-user="example-user"
data-log-details="false"
- data-version="2.0.2"
+ data-version="2.1.0"
data-tool="Apache UserALE.js Example"
></script>
<!-- Load UserALE.js API calls to modify log stream -->
<script
-
src="file:///Users/jpoore/Documents/Apache_Flagon/dev/incubator-flagon-useralejs/example/aleAPI.js"
+ src="{your path here}/example/aleAPI.js"
></script>
</head>
<body>
@@ -36,7 +36,7 @@ limitations under the License.
<br>
<p>Click the button below to generate targeted click events.</p>
<div class="container">
- <button id="test_button">Click me!</button>
+ <button id="test_button">Click Me!</button>
</div>
<br>
<br>
diff --git a/src/attachHandlers.js b/src/attachHandlers.js
index 0afb8a2..e3f3b81 100644
--- a/src/attachHandlers.js
+++ b/src/attachHandlers.js
@@ -34,7 +34,7 @@ var windowEvents = ['load', 'blur', 'focus'];
* @param {Object} e Event to extract data from
*/
// @todo add extract text (inner, by event class) to mouse events
-function extractMouseEvent(e) {
+export function extractMouseEvent(e) {
return {
'clicks' : e.detail,
'ctrl' : e.ctrlKey,
@@ -84,6 +84,39 @@ export function defineDetails(config) {
}
/**
+ * Defines the way information is extracted from various events.
+ * Also defines which events we will listen to.
+ * @param {Object} options UserALE.js Configuration object to read from.
+ * @param {string} type of html event (e.g., 'click', 'mouseover', etc.),
such as passed to addEventListener methods.
+ */
+export function defineCustomDetails(options, type) {
+ // Events list
+ // Keys are event types
+ // Values are functions that return details object if applicable
+ var eventType = {
+ 'click' : extractMouseEvent,
+ 'dblclick' : extractMouseEvent,
+ 'mousedown' : extractMouseEvent,
+ 'mouseup' : extractMouseEvent,
+ 'focus' : null,
+ 'blur' : null,
+ 'input' : options.logDetails ? function(e) { return { 'value' :
e.target.value }; } : null,
+ 'change' : options.logDetails ? function(e) { return { 'value' :
e.target.value }; } : null,
+ 'dragstart' : null,
+ 'dragend' : null,
+ 'drag' : null,
+ 'drop' : null,
+ 'keydown' : options.logDetails ? function(e) { return { 'key' : e.keyCode,
'ctrl' : e.ctrlKey, 'alt' : e.altKey, 'shift' : e.shiftKey, 'meta' : e.metaKey
}; } : null,
+ 'mouseover' : null,
+ 'wheel' : function(e) { return { 'x' : e.deltaX, 'y' : e.deltaY, 'z' :
e.deltaZ }; },
+ 'scroll' : function() { return { 'x' : window.scrollX, 'y' :
window.scrollY }; },
+ 'resize' : function() { return { 'width' : window.outerWidth, 'height' :
window.outerHeight }; },
+ 'submit' : null
+ };
+ return eventType[type];
+}
+
+/**
* Hooks the event handlers for each event type of interest.
* @param {Object} config Configuration object to use.
* @return {boolean} Whether the operation succeeded
diff --git a/src/main.js b/src/main.js
index 96b6c9b..4b662d6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -25,6 +25,7 @@ import { initSender } from './sendLogs.js';
var config = {};
var logs = [];
export var started = false;
+export { defineCustomDetails as details} from './attachHandlers.js';
export {
setLogMapper as map,
setLogFilter as filter,
@@ -34,10 +35,6 @@ export {
buildPath as buildPath,
} from './packageLogs.js';
-export {
- defineDetails as details,
-} from './attachHandlers.js';
-
// Start up Userale
config.on = false;
diff --git a/src/packageLogs.js b/src/packageLogs.js
index 9395139..2010ca4 100644
--- a/src/packageLogs.js
+++ b/src/packageLogs.js
@@ -319,4 +319,4 @@ export function selectorizePath(path) {
++i;
}
return pathSelectors;
-}
+}
\ No newline at end of file
