[
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2018 InEvent\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "\n<p align=\"center\"><img width=\"100\" height=\"100\" src=\"https://i.imgur.com/6QGo4Zn.jpg\"/></p>\n\n[![GitHub license](https://img.shields.io/github/license/ineventapp/musjs.svg)](https://github.com/ineventapp/musjs/blob/master/LICENSE)\n![Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen.svg)\n\n# mus.js\nA simple mouse tracking library to provide insights on how your users are handling your layout / user experience.\n\nThis library was created so you don't need an external service to \"record\" your users mouse events and \"play\" them in a later moment.\n\n**mus** works with any AMD you wish and its setup is extremely simple - **5.6kb**\n\n## Recording\n```js\n// Instantiate a mus object\nvar mus = new Mus();\n\n// Start recording\nmus.record();\n\n// After a while, stops\nsetTimeout(function() {\n  mus.stop();\n}, 5000);\n```\n\n## Playing\n```js\n// Sets playback speed (optional, default NORMAL)\nmus.setPlaybackSpeed(mus.speed.SLOW);\n\n// Starts playing and enjoy\nmus.play();\n```\n\n## Example\n\n\n<img height=\"300\" src=\"https://i.imgur.com/GCYD9EP.gif\"/>\n\n\n## Public methods\n\n### Controls\n\n#### record()\nStarts a recording session for current screen. If there is already a session recorded, it appends to it.\n\n#### stop()\nStops a recording or a playback.\n\n#### play(onfinish)\nPlays current recording session.\n\n#### pause()\nPauses current playback.\n\n#### release()\nReleases all data recorded or set.\n\n\n### Getters and setters\n\n#### getData()\nReturns all data collected during recording.\n\n#### setData(data)\nSets custom data for playback. It must be a JSON object collected from `getData`.\n\n#### setFrames(frames)\nSame as `setData`, but allows only to set the `frames` array.\n\n#### setWindowSize(width, height)\nDuring recording, all data collected contains window dimensions as well, so if your recorded data comes from a different window dimension, **mus** automatically adapts to current window size. This function allows you to set a custom playback window size if you decide to use `setFrames` instead of `setData` (that already sets windows dimensions).\n\n#### setPlaybackSpeed(speed)\nAllows playback to be faster or slower.\nDefault constants: `mus.speed.SLOW` (35), `mus.speed.NORMAL` (15), `mus.speed.FAST` (5)\nYou may decide to use custom values as you wish.\n\n#### setTimePoint(bool)\nRecords time elapsed for each point for a precise data recording.\nDefault: disabled\n\n#### isRecording()\nInforms if **mus** is currently recording something.\n\n#### isPlaying()\nInforms if **mus** is currently playing something.\n\n#### isTimePoint()\nInforms if **mus** is recording time for each data point.\n\n# Roadmap\n- Detect touch movements and clicks;\n- Get form inputs;\n- Allows real clicks during setup (default false);\n- Suggestions are greatly appreciated!\n\n# Version history\n\n## v1.1.0\n- Added time point recording for precise data;\n\n## v1.0.1\n- Added minified file for distribution;\n\n# License\nMIT\n"
  },
  {
    "path": "example.html",
    "content": "<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<script src=\"mus.js\"></script>\n\t\t<style>\n\t\t.controls {\n\t\t\tmargin-bottom: 20px;\n\t\t}\n\n\t\t.controls td {\n\t\t\tvertical-align: top;\n\t\t\tpadding: 0 20px;\n\t\t}\n\n\t\t.move-mouse-here {\n\t\t\twidth: 400px;\n\t\t\theight: 200px;\n\t\t\tdisplay: table;\n\t\t\tmargin: 0 auto;\n\t\t\tbackground-color: #33ff00;\n\t\t\ttext-align: center;\n\t\t\tline-height: 200px;\n\t\t}\n\n\t\t.click-here {\n\t\t\twidth: 400px;\n\t\t\theight: 200px;\n\t\t\tdisplay: table;\n\t\t\tmargin: 0 auto;\n\t\t\tbackground-color: #00ffff;\n\t\t\ttext-align: center;\n\t\t\tline-height: 200px;\n\t\t}\n\n\t\t.scroll-here {\n\t\t\twidth: 400px;\n\t\t\theight: 2000px;\n\t\t\tdisplay: table;\n\t\t\tmargin: 0 auto;\n\t\t\tbackground-color: #00c4ff;\n\t\t\ttext-align: center;\n\t\t\tline-height: 200px;\n\t\t}\n\n\t\t#console {\n\t\t\tfont-size: 10px;\n\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<table class=\"controls\">\n\t\t\t<tr>\n\t\t\t\t<td>\n\t\t\t\t\t<h1>Mus.js</h1>\n\t\t\t\t\t<p>Status: <span id=\"status\"></span></p>\n\t\t\t\t\t<p>Speed: <span id=\"speed\">Normal</span></p>\n\t\t\t\t\t<br/>\n\t\t\t\t\t<button id=\"recording\" onclick=\"toggleRecord();\">Start recording</button>\n\t\t\t\t\t<button id=\"play\" onclick=\"play();\">Playback</button>\n\t\t\t\t\t<br/>\n\t\t\t\t\t<button onclick=\"mus.setPlaybackSpeed(mus.speed.SLOW);\">Slow</button>\n\t\t\t\t\t<button onclick=\"mus.setPlaybackSpeed(mus.speed.NORMAL);\">Normal</button>\n\t\t\t\t\t<button onclick=\"mus.setPlaybackSpeed(mus.speed.FAST);\">Fast</button>\n\t\t\t\t\t<br/>\n\t\t\t\t\t<button id=\"timePoint\" onclick=\"setTimePoint();\">Enable time point</button>\n\t\t\t\t\t<br/>\n\t\t\t\t\t<button onclick=\"releaseMus();\">Release</button>\n\t\t\t\t</td>\n\t\t\t\t<td>\n\t\t\t\t\t<h2>Data console</h2>\n\t\t\t\t\t<textarea id=\"console\" rows=\"12\" cols=\"100\"></textarea>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</table>\n\n\t\t<div class=\"guide\">\n\t\t\t<div style=\"display: flex; flex-direction: column; width: 40%;\">\n\t\t\t\t<input type=\"text\" placeholder=\"Type here !\"/>\n\t\t\t\t<textarea placeholder=\"Type here !\"></textarea>\n\t\t\t\t<div>\n\t\t\t\t\tChange My Color: <input type=\"color\" />\n\t\t\t\t</div>\n\t\t\t\t\n\t\t\t\t<div>\n\t\t\t\t\tCheck Me:<input type=\"checkbox\" />\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\tChange My Date:<input type=\"date\" />\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\tChange My Number: <input type=\"number\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"move-mouse-here\">Move mouse here!</div>\n\n\t\t\t<div class=\"click-here\">Click here!</div>\n\n\t\t\t<div class=\"scroll-here\">Scroll here!</div>\n\t\t</div>\n\n\t\t<script>\n\t\t\tvar mus = new Mus();\n\t\t\tmus.setPlaybackSpeed(mus.speed.SLOW);\n\n\t\t\tvar setTimePoint = function() {\n\t\t\t\treleaseMus();\n\t\t\t\tmus.setTimePoint(!mus.isTimePoint());\n\t\t\t\tif (mus.isTimePoint()) {\n\t\t\t\t\tdocument.getElementById(\"timePoint\").innerHTML = \"Disable time point\";\n\t\t\t\t} else {\n\t\t\t\t\tdocument.getElementById(\"timePoint\").innerHTML = \"Enable time point\";\n\t\t\t\t}\n\t\t\t};\n\t\t\tvar setConsoleData = function() {\n\t\t\t\tvar textarea = document.getElementById(\"console\");\n\t\t\t\ttextarea.innerHTML = JSON.stringify(mus.getData());\n\t\t\t\ttextarea.scrollTop = textarea.scrollHeight;\n\t\t\t};\n\t\t\tvar releaseMus = function() {\n\t\t\t\tmus.release();\n\t\t\t\tsetConsoleData();\n\t\t\t};\n\t\t\tvar toggleRecord = function() {\n\t\t\t\tif (mus.isPlaying()) return;\n\t\t\t\tif (!mus.isRecording()) {\n\t\t\t\t\tdocument.getElementById(\"status\").innerHTML = \"Recording\";\n\t\t\t\t\tdocument.getElementById(\"recording\").innerHTML = \"Stop recording\";\n\t\t\t\t\tmus.record(setConsoleData);\n\t\t\t\t} else {\n\t\t\t\t\tdocument.getElementById(\"status\").innerHTML = \"Stand by\";\n\t\t\t\t\tdocument.getElementById(\"recording\").innerHTML = \"Start recording\";\n\t\t\t\t\tmus.stop();\n\t\t\t\t\tsetConsoleData();\n\t\t\t\t}\n\t\t\t};\n\t\t\tvar play = function() {\n\t\t\t\tif (mus.isRecording()) return;\n\t\t\t\tif (mus.isPlaying()) {\n\t\t\t\t\tdocument.getElementById(\"play\").innerHTML = \"Play\";\n\t\t\t\t\tdocument.getElementById(\"status\").innerHTML = \"Stand by\";\n\t\t\t\t\tmus.pause();\n\t\t\t\t} else {\n\t\t\t\t\tdocument.getElementById(\"play\").innerHTML = \"Pause\";\n\t\t\t\t\tdocument.getElementById(\"status\").innerHTML = \"Playing\";\n\t\t\t\t\tmus.play(function() {\n\t\t\t\t\t\tdocument.getElementById(\"play\").innerHTML = \"Play\";\n\t\t\t\t\t\tdocument.getElementById(\"status\").innerHTML = \"Stand by\";\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t};\n\t\t\tvar setSpeed = function(speed) {\n\t\t\t\tmus.setPlaybackSpeed(speed);\n\t\t\t\tif (speed == mus.speed.SLOW) {\n\t\t\t\t\tdocument.getElementById(\"speed\").innerHTML = \"Slow\";\n\t\t\t\t} else if (speed == mus.speed.NORMAL) {\n\t\t\t\t\tdocument.getElementById(\"speed\").innerHTML = \"Normal\";\n\t\t\t\t} else {\n\t\t\t\t\tdocument.getElementById(\"speed\").innerHTML = \"Fast\";\n\t\t\t\t}\n\t\t\t};\n\t\t\tsetConsoleData();\n\t\t</script>\n\t</body>\n</html>"
  },
  {
    "path": "mus.js",
    "content": "/*!\n * Mus.js v1.1.0\n * (c) 2018 Mauricio Giordano <giordano@inevent.us> - InEvent\n * Released under the MIT License.\n */\n(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n\t\ttypeof define === 'function' && define.amd ? define(factory) :\n\t\t\t(global.Mus = factory());\n}(this, (function () {\n\t'use strict';\n\n\t// Mus default cursor icon based on OSx default cursor\n\tvar cursorIcon = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCSB2aWV3Qm94PSIwIDAgMjggMjgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI4IDI4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjguMiwyMC45IDguMiw0LjkgMTkuOCwxNi41IDEzLDE2LjUgMTIuNiwxNi42ICIvPjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMTcuMywyMS42IDEzLjcsMjMuMSA5LDEyIDEyLjcsMTAuNSAiLz48cmVjdCB4PSIxMi41IiB5PSIxMy42IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjkyMjEgLTAuMzg3MSAwLjM4NzEgMC45MjIxIC01Ljc2MDUgNi41OTA5KSIgd2lkdGg9IjIiIGhlaWdodD0iOCIvPjxwb2x5Z29uIHBvaW50cz0iOS4yLDcuMyA5LjIsMTguNSAxMi4yLDE1LjYgMTIuNiwxNS41IDE3LjQsMTUuNSAiLz48L3N2Zz4=';\n\n\t/**\n\t * Mus constructor that defines initial variables and\n\t * sets browser width and height.\n\t * @knownbug: if user decides to change browser window size on-the-go\n\t * \t\tit may cause bugs during playback\n\t */\n\tfunction Mus() {\n\t\tif (this === undefined) {\n\t\t\tconsole.error('Have you initialized Mus with \"new\" statement? (i.e. var mus = new Mus())');\n\t\t\treturn;\n\t\t}\n\t\tthis.frames = [];\n\t\tthis.timeouts = [];\n\t\tthis.pos = 0;\n\t\tthis.currPos = 0;\n\t\tthis.startedAt = 0;\n\t\tthis.finishedAt = 0;\n\t\tthis.timePoint = false;\n\t\tthis.recording = false;\n\t\tthis.playing = false;\n\t\tthis.playbackSpeed = this.speed.NORMAL;\n\t\tthis.observer = '';\n\t\tthis.window = {\n\t\t\twidth: window.outerWidth,\n\t\t\theight: window.outerHeight\n\t\t};\n\n\t\t// Stores initial listeners\n\t\tthis.onmousemove = window.onmousemove;\n\t\tthis.onmousedown = window.onmousedown;\n\t\tthis.onscroll = window.onscroll;\n\t\tthis.inputWithUserKeyEvent = () => {\n\t\t\tdocument.querySelectorAll('textarea, input[type=text], input[type=email], input[type=number], input[type=password], input[type=tel], input[type=search], input[type=url], input[type=search], input[type=week], input[type=month], input[type=datetime-local]').forEach(element => {\n\t\t\t\telement.onkeydown = null;\n\t\t\t});\n\t\t};\n\t\tthis.inputWithOnchangeEvent = () => {\n\t\t\tdocument.querySelectorAll('select, input[type=checkbox], input[type=radio], input[type=color], input[type=date], input[type=file], input[type=number], input[type=range], input[type=time]').forEach(element => {\n\t\t\t\telement.onchange = null;\n\t\t\t});\n\t\t};\n\t};\n\n\t/**\n\t * Here goes all Mus magic\n\t */\n\tMus.prototype = {\n\n\t\t/** Mus Listeners **/\n\n\t\t/**\n\t\t * Listener intended to be used with onmousemove\n\t\t * @param callback function a callback fnc\n\t\t * @return function the mouse move listener\n\t\t */\n\t\tmoveListener: function (callback) {\n\t\t\treturn function (e) {\n\t\t\t\tif (callback) callback(['m', e.clientX, e.clientY]);\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Listener intended to be used with onmousedown\n\t\t * @param callback function a callback fnc\n\t\t * @return function the mouse click listener\n\t\t */\n\t\tclickListener: function (callback) {\n\t\t\treturn function (e) {\n\t\t\t\tif (callback) callback(['c', e.clientX, e.clientY]);\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Listener intended to be used with onscroll\n\t\t * @param callback function a callback fnc\n\t\t * @return function the window scroll listener\n\t\t */\n\t\tscrollListener: function (callback) {\n\t\t\treturn function (e) {\n\t\t\t\tif (callback) callback(['s', document.scrollingElement.scrollLeft, document.scrollingElement.scrollTop]);\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Listener intended to be used with onKeyDown\n\t\t * @param callback function a callback fnc\n\t\t * @return function the input with user key listener\n\t\t */\n\n\t\tinputWithUserKeyListener: function (callback) {\n\t\t\tvar self = this;\n\t\t\treturn function (e) {\n\t\t\t\tconsole.log(e)\n\t\t\t\tif (callback) callback(['i', self.getXpathFromElement(e.target), e.target.value]);\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Listener intended to be used with onChange\n\t\t * @param callback function a callback fnc\n\t\t * @return function the input with onChange listener\n\t\t */\n\n\t\tinputWithOnchangeListener: function (callback) {\n\t\t\tvar self = this;\n\t\t\treturn function (e) {\n\t\t\t\tif (callback) callback(['o', self.getXpathFromElement(e.target), e.target.value]);\n\t\t\t}\n\t\t},\n\n\n\t\t/**\n\t\t * Listener intended to be used with mutation observer (remove or add a class name)\n\t\t * @param callback function a callback fnc\n\t\t * @return function the mutation observer\n\t\t */\n\n\t\tmutationObserver: function (callback) {\n\t\t\treturn function (mutations) {\n\t\t\t\tif (callback) callback(mutations);\n\t\t\t}\n\t\t},\n\n\t\t/** Mus recording tools **/\n\n\t\t/**\n\t\t * Starts screen recording\n\t\t */\n\t\trecord: function (onFrame) {\n\t\t\tif (this.recording) return;\n\n\t\t\tvar self = this;\n\t\t\tif (self.startedAt == 0) self.startedAt = new Date().getTime() / 1000;\n\n\t\t\t// Sets initial scroll position of the window\n\t\t\tif (self.timePoint) {\n\t\t\t\tself.frames.push(['s', document.scrollingElement.scrollLeft, document.scrollingElement.scrollTop, 0]);\n\t\t\t} else {\n\t\t\t\tself.frames.push(['s', document.scrollingElement.scrollLeft, document.scrollingElement.scrollTop]);\n\t\t\t}\n\n\t\t\t//Sets initial value of inputs\n\t\t\tdocument.querySelectorAll('textarea, input[type=text], input[type=email], input[type=number], input[type=password], input[type=tel], input[type=search], input[type=url], input[type=search], input[type=week], input[type=month], input[type=datetime-local]').forEach(element => {\n\t\t\t\t\n\t\t\t\tif (self.timePoint) {\n\t\t\t\t\tself.frames.push(['i', self.getXpathFromElement(element), element.value, 0]);\n\t\t\t\t} else {\n\t\t\t\t\tself.frames.push(['i', self.getXpathFromElement(element), element.value]);\n\t\t\t\t}\n\t\t\t\t\n\t\t\t});\n\t\t\tdocument.querySelectorAll('select, input[type=checkbox], input[type=radio], input[type=color], input[type=date], input[type=file], input[type=number], input[type=range], input[type=time]').forEach(element => {\n\t\t\t\tif (self.timePoint) {\n\t\t\t\t\tif (element.type == 'checkbox' || element.type == 'radio')\n\t\t\t\t\t\tself.frames.push(['o', self.getXpathFromElement(element), element.value, element.checked, 0]);\n\t\t\t\t\telse\n\t\t\t\t\t\tself.frames.push(['o', self.getXpathFromElement(element), element.value, 0]);\n\t\t\t\t} else {\n\t\t\t\t\tif (element.type == 'checkbox' || element.type == 'radio')\n\t\t\t\t\t\tself.frames.push(['o', self.getXpathFromElement(element), element.value, element.checked]);\n\t\t\t\t\telse\n\t\t\t\t\t\tself.frames.push(['o', self.getXpathFromElement(element), element.value]);\n\t\t\t\t}\n\n\t\t\t});\n\n\n\t\t\t// SET INITIAL VALUES END HERE\n\n\t\t\t// Defines Mus listeners on window\n\t\t\twindow.onmousemove = this.moveListener(function (pos) {\n\t\t\t\tself.frames.push(self.timePoint ? pos.concat(new Date().getTime() - (self.startedAt * 1000)) : pos);\n\t\t\t\tif (onFrame instanceof Function) onFrame();\n\t\t\t});\n\t\t\twindow.onmousedown = this.clickListener(function (click) {\n\t\t\t\tself.frames.push(self.timePoint ? click.concat(new Date().getTime() - (self.startedAt * 1000)) : click);\n\t\t\t\tif (onFrame instanceof Function) onFrame();\n\t\t\t});\n\t\t\twindow.onscroll = this.scrollListener(function (scroll) {\n\t\t\t\tself.frames.push(self.timePoint ? scroll.concat(new Date().getTime() - (self.startedAt * 1000)) : scroll);\n\t\t\t\tif (onFrame instanceof Function) onFrame();\n\t\t\t});\n\t\t\tdocument.querySelectorAll('textarea, input[type=text], input[type=email], input[type=number], input[type=password], input[type=tel], input[type=search], input[type=url], input[type=search], input[type=week], input[type=month], input[type=datetime-local]').forEach(element => {\n\t\t\t\telement.oninput = this.inputWithUserKeyListener(function (input) {\n\t\t\t\t\tconsole.log(input)\n\t\t\t\t\tself.frames.push(self.timePoint ? input.concat(new Date().getTime() - (self.startedAt * 1000)) : input);\n\t\t\t\t\tif (onFrame instanceof Function) onFrame();\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tdocument.querySelectorAll('select, input[type=checkbox], input[type=radio], input[type=color], input[type=date], input[type=file], input[type=number], input[type=range], input[type=time]').forEach(element => {\n\t\t\t\telement.onchange = this.inputWithOnchangeListener(function (inputonchange) {\n\t\t\t\t\tlet element = self.getElementByXpath(inputonchange[1]);\n\t\t\t\t\tif (element.type == 'checkbox' || element.type == 'radio') {\n\t\t\t\t\t\tinputonchange = inputonchange.concat(element.checked);\n\t\t\t\t\t\tself.frames.push(self.timePoint ? inputonchange.concat(new Date().getTime() - (self.startedAt * 1000)) : inputonchange);\n\t\t\t\t\t} else\n\t\t\t\t\t\tself.frames.push(self.timePoint ? inputonchange.concat(new Date().getTime() - (self.startedAt * 1000)) : inputonchange);\n\n\t\t\t\t\tif (onFrame instanceof Function) onFrame();\n\t\t\t\t});\n\t\t\t});\n\n\t\t\t//Define mutation observer here\n\t\t\tconst targetNode = document.querySelector('body');\n\t\t\tconst config = { attributes: true, attributeOldValue: true, subtree: true };\n\n\t\t\tvar MutationObserver = window.MutationObserver || window.WebKitMutationObserver;\n\t\t\tthis.observer = new MutationObserver(this.mutationObserver(function (mutations) {\n\t\t\t\tfor (let mutation of mutations) {\n\t\t\t\t\tif (mutation.type == 'attributes') {\n\t\t\t\t\t\tvar mutationFrame = [];\n\t\t\t\t\t\tif (mutation.target.hasAttribute(mutation.attributeName)) {\n\t\t\t\t\t\t\tmutationFrame = ['a', self.getXpathFromElement(mutation.target), mutation.attributeName, mutation.target.getAttribute(mutation.attributeName), mutation.oldValue, 'M'];\n\t\t\t\t\t\t}\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tmutationFrame = ['a', self.getXpathFromElement(mutation.target), mutation.attributeName, mutation.oldValue, 'D'];\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tself.frames.push(self.timePoint ? mutationFrame.concat(new Date().getTime() - (self.startedAt * 1000)) : mutationFrame);\n\t\t\t\t\t\tif (onFrame instanceof Function) onFrame();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}));\n\t\t\tthis.observer.observe(targetNode, config);\n\n\t\t\t// Sets our recording flag\n\t\t\tself.recording = true;\n\t\t},\n\n\t\t/**\n\t\t * Stops screen recording\n\t\t */\n\t\tstop: function () {\n\t\t\tthis.finishedAt = new Date().getTime() / 1000;\n\t\t\twindow.onmousemove = this.onmousemove;\n\t\t\twindow.onmousedown = this.onmousedown;\n\t\t\twindow.onscroll = this.onscroll;\n\t\t\tthis.inputWithUserKeyEvent();\n\t\t\tthis.inputWithOnchangeEvent();\n\t\t\tif (this.observer != '') this.observer.disconnect();\n\t\t\t// Sets our recording flag\n\t\t\tthis.timeouts = [];\n\t\t\tthis.recording = false;\n\t\t\tthis.playing = false;\n\t\t\tthis.pos = 0;\n\t\t},\n\n\t\t/**\n\t\t * Pauses current execution\n\t\t */\n\t\tpause: function () {\n\t\t\tif (this.playing) {\n\t\t\t\tthis.pos = this.currPos;\n\t\t\t\tthis.playing = false;\n\t\t\t\tthis.clearTimeouts();\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Runs a playback of a recording\n\t\t * @param function onfinish a callback function\n\t\t */\n\t\tplay: function (onfinish) {\n\t\t\tif (this.playing) return;\n\n\t\t\tvar self = this;\n\t\t\tself.createCursor();\n\n\t\t\tvar node = document.getElementById(\"musCursor\");\n\t\t\tvar delay = '';\n\t\t\tfor (; self.pos < self.frames.length; self.pos++) {\n\t\t\t\tif(self.timePoint){\n\t\t\t\t\tdelay = self.frames[self.pos][self.frames[self.pos].length - 1];\n\t\t\t\t}else{\n\t\t\t\t\tdelay = self.pos * self.playbackSpeed;\n\t\t\t\t}\n\n\t\t\t\tself.timeouts.push(setTimeout(function (pos) {\n\n\t\t\t\t\t// Plays specific timeout\n\t\t\t\t\tself.playFrame(self, self.frames[pos], node);\n\t\t\t\t\tself.currPos = pos;\n\n\t\t\t\t\tif (pos == self.frames.length - 1) {\n\t\t\t\t\t\tnode.style.backgroundColor = \"transparent\";\n\t\t\t\t\t\tself.timeouts = [];\n\t\t\t\t\t\tself.playing = false;\n\t\t\t\t\t\tself.pos = 0;\n\t\t\t\t\t\tif (onfinish) onfinish();\n\t\t\t\t\t}\n\t\t\t\t}, delay, self.pos));\n\t\t\t};\n\n\t\t\tthis.playing = true;\n\t\t},\n\n\t\t/**\n\t\t * Releases Mus instance\n\t\t */\n\t\trelease: function () {\n\t\t\tthis.frames = [];\n\t\t\tthis.startedAt = 0;\n\t\t\tthis.finishedAt = 0;\n\t\t\tthis.stop();\n\t\t\tthis.destroyCursor();\n\t\t\tthis.destroyClickSnapshot();\n\t\t},\n\n\t\t/** Mus internal functions **/\n\n\t\t/**\n\t\t * Play a specific frame from playback\n\t\t */\n\t\tplayFrame: function (self, frame, node) {\n\n\t\t\tif (frame[0] == 'm') {\n\t\t\t\tnode.style.left = self.getXCoordinate(frame[1]) + \"px\";\n\t\t\t\tnode.style.top = self.getYCoordinate(frame[2]) + \"px\";\n\n\t\t\t} else if (frame[0] == 'c') {\n\t\t\t\tself.createClickSnapshot(frame[2], frame[1]);\n\n\t\t\t} else if (frame[0] == 's') {\n\t\t\t\twindow.scrollTo(frame[1], frame[2]);\n\n\t\t\t} else if (frame[0] == 'i') {\n\t\t\t\tlet element = self.getElementByXpath(frame[1]);\n\t\t\t\telement.value = frame[2];\n\n\t\t\t} else if (frame[0] == 'o') {\n\t\t\t\tlet element = self.getElementByXpath(frame[1]);\n\t\t\t\tif (element.type == 'checkbox' || element.type == 'radio') {\n\t\t\t\t\telement.checked = frame[3];\n\t\t\t\t}\n\t\t\t\telse {\n\t\t\t\t\telement.value = frame[2];\n\t\t\t\t}\n\t\t\t} else if (frame[0] == 'a') {\n\t\t\t\tlet element = self.getElementByXpath(frame[1]);\n\t\t\t\tif (frame[5] == 'M') {\n\t\t\t\t\telement.setAttribute(frame[2], frame[3]);\n\t\t\t\t} else if (frame[4] == 'D') {\n\t\t\t\t\telement.removeAttribute(frame[2]);\n\t\t\t\t}\n\n\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Clears all timeouts stored\n\t\t */\n\t\tclearTimeouts: function () {\n\t\t\tfor (var i in this.timeouts) {\n\t\t\t\tclearTimeout(this.timeouts[i]);\n\t\t\t}\n\n\t\t\tthis.timeouts = [];\n\t\t},\n\n\t\t/**\n\t\t * Calculates time elapsed during recording\n\t\t * @return integer time elapsed\n\t\t */\n\t\ttimeElapsed: function () {\n\t\t\treturn this.finishedAt - this.startedAt;\n\t\t},\n\n\t\t/**\n\t\t * Creates Mus cursor if non-existent\n\t\t */\n\t\tcreateCursor: function () {\n\t\t\tif (!document.getElementById(\"musCursor\")) {\n\t\t\t\tvar node = document.createElement(\"div\");\n\t\t\t\tnode.id = \"musCursor\";\n\t\t\t\tnode.style.position = \"fixed\";\n\t\t\t\tnode.style.width = \"32px\";\n\t\t\t\tnode.style.height = \"32px\";\n\t\t\t\tnode.style.top = \"-100%\";\n\t\t\t\tnode.style.left = \"-100%\";\n\t\t\t\tnode.style.borderRadius = \"32px\";\n\t\t\t\tnode.style.backgroundImage = \"url(\" + cursorIcon + \")\";\n\t\t\t\tdocument.body.appendChild(node);\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Destroys Mus cursor\n\t\t */\n\t\tdestroyCursor: function () {\n\t\t\tvar cursor = document.getElementById(\"musCursor\");\n\t\t\tif (cursor) cursor.remove();\n\t\t},\n\n\t\t/**\n\t\t * Creates Mus click snapshot\n\t\t */\n\t\tcreateClickSnapshot: function (x, y) {\n\t\t\tvar left = document.scrollingElement.scrollLeft;\n\t\t\tvar top = document.scrollingElement.scrollTop;\n\t\t\tvar node = document.createElement(\"div\");\n\t\t\tnode.className = \"musClickSnapshot\";\n\t\t\tnode.style.position = \"absolute\";\n\t\t\tnode.style.width = \"32px\";\n\t\t\tnode.style.height = \"32px\";\n\t\t\tnode.style.top = (x + top) + \"px\";\n\t\t\tnode.style.left = (y + left) + \"px\";\n\t\t\tnode.style.borderRadius = \"32px\";\n\t\t\tnode.style.backgroundColor = \"red\";\n\t\t\tnode.style.opacity = 0.2;\n\t\t\tdocument.body.appendChild(node);\n\t\t},\n\n\t\t/**\n\t\t * Destroys Mus click snapshot\n\t\t */\n\t\tdestroyClickSnapshot: function () {\n\t\t\tvar nodes = document.getElementsByClassName(\"musClickSnapshot\");\n\t\t\twhile (nodes.length > 0) {\n\t\t\t\tnodes[0].remove();\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Calculates current X coordinate of mouse based on window dimensions provided\n\t\t * @param x integer the x position\n\t\t * @return integer calculated x position\n\t\t */\n\t\tgetXCoordinate: function (x) {\n\t\t\tif (window.outerWidth > this.window.width) {\n\t\t\t\treturn parseInt(this.window.width * x / window.outerWidth);\n\t\t\t}\n\n\t\t\treturn parseInt(window.outerWidth * x / this.window.width);\n\t\t},\n\n\t\t/**\n\t\t * Calculates current Y coordinate of mouse based on window dimensions provided\n\t\t * @param y integer the y position\n\t\t * @return integer calculated y position\n\t\t */\n\t\tgetYCoordinate: function (y) {\n\t\t\tif (window.outerHeight > this.window.height) {\n\t\t\t\treturn parseInt(this.window.height * y / window.outerHeight);\n\t\t\t}\n\n\t\t\treturn parseInt(window.outerHeight * y / this.window.height);\n\t\t},\n\n\t\t/** Public getters and setters **/\n\n\t\t/**\n\t\t * Get all generated Mus data\n\t\t * @return array generated Mus data\n\t\t */\n\t\tgetData: function () {\n\t\t\treturn {\n\t\t\t\tframes: this.frames,\n\t\t\t\ttimeElapsed: this.timeElapsed(),\n\t\t\t\twindow: {\n\t\t\t\t\twidth: window.outerWidth,\n\t\t\t\t\theight: window.outerHeight\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\n\t\t/**\n\t\t * Get point time recording flag\n\t\t * @return boolean point time flag\n\t\t */\n\t\tisTimePoint: function () {\n\t\t\treturn this.timePoint;\n\t\t},\n\n\t\t/**\n\t\t * Sets generated Mus data for playback\n\t\t * @param data array generated Mus data\n\t\t */\n\t\tsetData: function (data) {\n\t\t\tif (data.frames) this.frames = data.frames;\n\t\t\tif (data.window) this.window = data.window;\n\t\t},\n\n\t\t/**\n\t\t * Sets recorded frames for playback\n\t\t * @param frames array the frames array\n\t\t */\n\t\tsetFrames: function (frames) {\n\t\t\tthis.frames = frames;\n\t\t},\n\n\t\t/**\n\t\t * Sets custom window size for playback\n\t\t * @param width integer window width\n\t\t * @param height integer window height\n\t\t */\n\t\tsetWindowSize: function (width, height) {\n\t\t\tthis.window.width = width;\n\t\t\tthis.window.height = height;\n\t\t},\n\n\t\t/**\n\t\t * Sets a playback speed based on Mus speed set\n\t\t * @param speed integer the playback speed\n\t\t */\n\t\tsetPlaybackSpeed: function (speed) {\n\t\t\tthis.playbackSpeed = speed;\n\t\t},\n\n\t\t/**\n\t\t * Sets point time recording for accurate data\n\t\t * @param \n\t\t */\n\t\tsetTimePoint: function (timePoint) {\n\t\t\tthis.timePoint = timePoint;\n\t\t},\n\n\t\t/**\n\t\t * Informs if Mus is currently recording\n\t\t * @return boolean is recording?\n\t\t */\n\t\tisRecording: function () {\n\t\t\treturn this.recording;\n\t\t},\n\n\t\t/**\n\t\t * Informs if Mus is currently playing\n\t\t * @return boolean is playing?\n\t\t */\n\t\tisPlaying: function () {\n\t\t\treturn this.playing;\n\t\t},\n\n\t\t/** Mus speed constants **/\n\n\t\tspeed: {\n\t\t\tSLOW: 35,\n\t\t\tNORMAL: 15,\n\t\t\tFAST: 5\n\t\t},\n\n\t\tgetXpathFromElement: function (elm) {\n\t\t\tvar allNodes = document.getElementsByTagName('*');\n\t\t\tfor (var segs = []; elm && elm.nodeType == 1; elm = elm.parentNode) {\n\t\t\t\tfor (var i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling) {\n\t\t\t\t\tif (sib.localName == elm.localName) i++;\n\t\t\t\t};\n\t\t\t\tsegs.unshift(elm.localName.toLowerCase() + '[' + i + ']');\n\t\t\t};\n\t\t\treturn segs.length ? '/' + segs.join('/') : null;\n\t\t},\n\n\t\tgetElementByXpath: function (path) {\n\t\t\tvar evaluator = new XPathEvaluator();\n\t\t\tvar result = evaluator.evaluate(path, document.documentElement, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);\n\t\t\treturn result.singleNodeValue;\n\t\t},\n\n\t};\n\n\treturn Mus;\n\n})));"
  }
]