Updated examples to use addCallbacks
diff --git a/example/README.md b/example/README.md
index 9780d3c..debafeb 100644
--- a/example/README.md
+++ b/example/README.md
@@ -49,8 +49,10 @@
| Function | Description | Notes |
|---|---|---|
| userale.options | modify userale's configuration option | see top level README for complete list of options |
-| userale.filter | filters out logs from logging queue by keys or values | filters are callbacks with global scope |
-| userale.map | modify/add log keys or values | mappings are callbacks with global scope |
+| [DEPRECATED] userale.filter | filters out logs from logging queue by keys or values | filters are callbacks with global scope |
+| [DEPRECATED] userale.map | modify/add log keys or values | mappings are callbacks with global scope |
+| userale.addCallbacks | add one or more callbacks to be executed during log packaging | callbacks have global scope |
+| userale.removeCallbacks | remove one or more callbacks by name | Removes callbacks added from userale.addCallbacks |
| userale.log | appends a custom log to the log queue | the custom log object is an object key:value pairs |
| userale.packageLog | transforms the provided event into a log and appends it to the log queue | designed for HTML events |
| userale.packageCustomLog | packages the provided customLog to include standard meta data and appends it to the log queue | designed for non HTML events|
@@ -58,7 +60,7 @@
| userale.getSelector | builds a string CSS selector from the provided HTML element id | populates 'target' field in packaged logs |
| userale.buildPath| builds an array of elements from the provided event target, to the root element (DOM path) | populates the 'path' field in packaged logs |
| userale.start | used to start the logging process if | unecessary if 'autostart' is set to true in initial setting (default) |
-| userale.stop | halts the logging process. Logs will no longer be sent | will need to invoke userale.start to restart logging |
+| userale.stop | halts the logging process. Logs will no longer be sent | will need to invoke userale.start to restart logging |
NOTE: Each modification of `index.html` or `index.js` will require that you both save the modifications and refresh the webpage in your browser.
diff --git a/example/log-attribute-example/README.md b/example/log-attribute-example/README.md
index a204052..f7b6f7a 100644
--- a/example/log-attribute-example/README.md
+++ b/example/log-attribute-example/README.md
@@ -64,12 +64,14 @@
The above functions can be used in the below snippet to add the results to each log message. In turn, this snippet can be added to a custom.js script to modify core UserALE.js behavior. See the 'index.js' example in this dir.
```js
-window.userale.map((log, e) => {
- return {
- ...log,
- attributes: buildAttrs(e),
- style : buildCSS(e),
- logType: 'custom',
- };
+window.userale.addCallbacks({
+ map(log, e) {
+ return {
+ ...log,
+ attributes: buildAttrs(e),
+ style : buildCSS(e),
+ logType: 'custom',
+ };
+ }
});
```
\ No newline at end of file
diff --git a/example/log-attribute-example/index.html b/example/log-attribute-example/index.html
index 6e2a346..2ba7c3a 100644
--- a/example/log-attribute-example/index.html
+++ b/example/log-attribute-example/index.html
@@ -68,13 +68,15 @@
return properties;
}
- window.userale.map((log, e) => {
- return {
- ...log,
- attributes: buildAttrs(e),
- style : buildCSS(e),
- logType: 'custom',
- };
+ window.userale.addCallbacks({
+ map(log, e) {
+ return {
+ ...log,
+ attributes: buildAttrs(e),
+ style : buildCSS(e),
+ logType: 'custom',
+ };
+ }
});
</script>
</html>
\ No newline at end of file
diff --git a/example/log-label-example/README.md b/example/log-label-example/README.md
index f196d27..1b6b159 100644
--- a/example/log-label-example/README.md
+++ b/example/log-label-example/README.md
@@ -21,17 +21,19 @@
clicked:
```js
-window.userale.map((log, e) => {
- // determine whether we want to add custom labels to the log
- if (e && e.target.innerHTML !== 'New Feature') {
- return log; // normal logging
+window.userale.addCallbacks({
+ map(log, e) {
+ // determine whether we want to add custom labels to the log
+ if (e && e.target.innerHTML !== 'New Feature') {
+ return log; // normal logging
+ }
+ // if the event occurred on the New Feature, add custom labeling
+ return {
+ ...log,
+ customLabel: 'New Feature',
+ logType: 'custom',
+ }
}
- // if the event occurred on the New Feature, add custom labeling
- return {
- ...log,
- customLabel: 'New Feature',
- logType: 'custom',
- };
});
```
diff --git a/example/log-label-example/index.html b/example/log-label-example/index.html
index 484043d..317c14a 100644
--- a/example/log-label-example/index.html
+++ b/example/log-label-example/index.html
@@ -34,17 +34,19 @@
window.userale.filter(log => ['click', 'customEvent'].includes(log.type))
// Example 1
- window.userale.map((log, e) => {
- // determine whether we want to add custom labels to the log
- if (e && e.target.innerHTML !== 'New Feature') {
- return log; // normal logging
+ window.userale.addCallbacks({
+ map(log, e) {
+ // determine whether we want to add custom labels to the log
+ if (e && e.target.innerHTML !== 'New Feature') {
+ return log; // normal logging
+ }
+ // if the event occurred on the New Feature, add custom labeling
+ return {
+ ...log,
+ customLabel: 'New Feature',
+ logType: 'custom',
+ }
}
- // if the event occurred on the New Feature, add custom labeling
- return {
- ...log,
- customLabel: 'New Feature',
- logType: 'custom',
- };
});
// Example 2
diff --git a/example/webpackUserAleExample/README.md b/example/webpackUserAleExample/README.md
index 9e9ece6..d4c9dab 100644
--- a/example/webpackUserAleExample/README.md
+++ b/example/webpackUserAleExample/README.md
@@ -116,8 +116,10 @@
| Function | Description | Notes |
|---|---|---|
| userale.options | modify userale's configuration option | see top level README for complete list of options |
-| userale.filter | filters out logs from logging queue by keys or values | filters are callbacks with global scope |
-| userale.map | modify/add log keys or values | mappings are callbacks with global scope |
+| [DEPRECATED] userale.filter | filters out logs from logging queue by keys or values | filters are callbacks with global scope |
+| [DEPRECATED] userale.map | modify/add log keys or values | mappings are callbacks with global scope |
+| userale.addCallbacks | add one or more callbacks to be executed during log packaging | callbacks have global scope |
+| userale.removeCallbacks | remove one or more callbacks by name | Removes callbacks added from userale.addCallbacks |
| userale.log | appends a custom log to the log queue | the custom log object is an object key:value pairs |
| userale.packageLog | transforms the provided event into a log and appends it to the log queue | designed for HTML events |
| userale.packageCustomLog | packages the provided customLog to include standard meta data and appends it to the log queue | designed for non HTML events|
diff --git a/example/webpackUserAleExample/index.js b/example/webpackUserAleExample/index.js
index 077a0ad..e41fbdd 100644
--- a/example/webpackUserAleExample/index.js
+++ b/example/webpackUserAleExample/index.js
@@ -46,10 +46,15 @@
* Note that for surgical filters, you may need to clear or reset back to a global filter callback
* the same is true for the 'map' API. See examples below:
*/
-userale.filter(function (log) {
- var type_array = ['mouseup', 'mouseover', 'mousedown', 'keydown', 'dblclick', 'blur', 'focus', 'input', 'wheel', 'scroll'];
- var logType_array = ['interval'];
- return !type_array.includes(log.type) && !logType_array.includes(log.logType);
+userale.addCallbacks({
+ filter(log) {
+ var type_array = ['mouseup', 'mouseover', 'mousedown', 'keydown', 'dblclick', 'blur', 'focus', 'input', 'wheel'];
+ var logType_array = ['interval'];
+ if(type_array.includes(log.type) || logType_array.includes(log.logType)) {
+ return false;
+ }
+ return log;
+ }
});
/**Log Mapping API
@@ -59,13 +64,15 @@
*/
document.addEventListener('click', function(e){
if (e.target.innerHTML === 'Click Me!') {
- userale.map(function (log) {
- return Object.assign({}, log, { logType: 'custom', customLabel: 'map & packageLog Example' });
+ userale.addCallbacks({
+ map(log) {
+ return Object.assign({}, log, { logType: 'custom', customLabel: 'map & packageLog Example' });
+ }
});
userale.packageLog(e, userale.details(userale.options(),e.type));
/**you'll want to reset the map callback function, or set a conditional (e.g., return log), else
* the callback may be applied to other events of the same class (e.g., click) */
- userale.map();
+ userale.removeCallbacks(["map"]);
} else {
return false
}
@@ -120,14 +127,14 @@
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*/
- userale.map(function (log) {
+ userale.addCallbacks({changeMap(log) {
var targetsForLabels = ['change'];
if (targetsForLabels.includes(log.type)) {
return Object.assign({}, log, { logType: 'custom', customLabel: 'packageLog Example' });
} else {
return log;
}
- });
+ }});
/**You can also use the details function to package additional log meta data, or add custom details*/
userale.packageLog(e, userale.details(userale.options(),e.type));
} else {
@@ -141,12 +148,12 @@
document.addEventListener('change', function(e) {
if (e.target.value === 'packageCustomLog') {
userale.packageCustomLog({
- customLabel: 'packageCustomLog Example',
- customField1: 'foo',
- customField2: 'bar'},
+ customLabel: 'packageCustomLog Example',
+ customField1: 'foo',
+ customField2: 'bar'},
function(){return {'foo': 'bar', 'bar': 'foo'}},
true
- );
+ );
} else {
return false
}
