diff --git a/dist/.gitkeep b/dist/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/dist/index.js b/dist/index.js index 5b7d0fa..7aca68b 100644 --- a/dist/index.js +++ b/dist/index.js @@ -582,8 +582,6 @@ exports._EventManager = function (cache) { }; }; - - /** * Trigger a click on an element * @param elem @@ -608,11 +606,111 @@ exports.triggerClick = function (elem) { } }; +/** + * Trigger a type key on an element + * @param elem + */ +exports.triggerTypekey = function (elem) { +if (elem.value!=undefined) { + var evObj; + if (document.createEvent) { + k=elem.value; + var oEvent = document.createEvent('Event'); + + Object.defineProperty(oEvent, 'keyCode', { + get : function () { + return this.keyCodeVal; + } + }); + + Object.defineProperty(oEvent, 'which', { + get : function () { + return this.keyCodeVal; + } + }); + if (oEvent.initEvent) { + oEvent.initEvent("keydown", true, true, document.defaultView, false, false, false, false, k, k); + } else { + oEvent.initEvent("keydown", true, true, document.defaultView, false, false, false, false, k, 0); + } + + oEvent.keyCodeVal = k; + document.dispatchEvent(oEvent); + var oEventkeyup = document.createEvent('Event'); + Object.defineProperty(oEventkeyup, 'keyCode', { + get : function () { + return this.keyCodeVal; + } + }); + Object.defineProperty(oEventkeyup, 'which', { + get : function () { + return this.keyCodeVal; + } + }); + if (oEventkeyup.initEvent) { + oEventkeyup.initEvent("keyup", true, true, document.defaultView, false, false, false, false, k, k); + } else { + oEventkeyup.initEvent("keyup", true, true, document.defaultView, false, false, false, false, k, 0); + } + oEventkeyup.keyCodeVal = k; + document.dispatchEvent(oEventkeyup); + +function __triggerKeyboardEvent(el, keyCode) +{ + var eventObj = document.createEventObject ? + document.createEventObject() : document.createEvent("Events"); + + if(eventObj.initEvent){ + eventObj.initEvent("keydown", true, true); + } + eventObj.keyCode = keyCode; + eventObj.which = keyCode; + el.dispatchEvent ? el.dispatchEvent(eventObj) : el.fireEvent("onkeydown", eventObj); +} + +function traceEvent(e){ + $(".logs").prepend(jQuery("
  • ").html( + "Key = " + e.keyCode + ).fadeIn()); + + console.log(e); +} + +function triggerKeyboardEvent(el, keyCode){ + var keyboardEvent = document.createEvent("Event"); + var initMethod = typeof keyboardEvent.initEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent"; + keyboardEvent[initMethod]( + "keydown", + true, // bubbles oOooOOo0 + true, // cancelable + window, // view + false, // ctrlKeyArg + false, // altKeyArg + false, // shiftKeyArg + false, // metaKeyArg + keyCode, + 0 // charCode + ); + + el.dispatchEvent(keyboardEvent); +} + } else { + + if (document.createEventObject) { + evObj = document.createEventObject(); + evObj.cancelBubble = true; + elem.fireEvent("on" + "keydown", evObj); + } + } + +} +}; + var cache = new exports._ElementCache(); var eventManager = new exports._EventManager(cache); eventManager.triggerClick = exports.triggerClick; - +eventManager.triggerTypekey = exports.triggerTypekey; exports.manager = eventManager; @@ -684,6 +782,7 @@ if (window.__karma__) { window.__bs_scroll__ = require("./ghostmode.scroll"); window.__bs_clicks__ = require("./ghostmode.clicks"); window.__bs_location__ = require("./ghostmode.location"); + window.__bs_typekey__ = require("./ghostmode.typekeys"); window.__bs_inputs__ = require("./ghostmode.forms.input"); window.__bs_toggles__ = require("./ghostmode.forms.toggles"); window.__bs_submit__ = require("./ghostmode.forms.submit"); @@ -697,7 +796,7 @@ if (window.__karma__) { window.__bs_index__ = exports; } /**debug:end**/ -},{"./browser.utils":1,"./client-shims":2,"./code-sync":3,"./emitter":4,"./ghostmode":12,"./ghostmode.clicks":7,"./ghostmode.forms":9,"./ghostmode.forms.input":8,"./ghostmode.forms.submit":10,"./ghostmode.forms.toggles":11,"./ghostmode.location":13,"./ghostmode.scroll":14,"./notify":15,"./socket":16}],7:[function(require,module,exports){ +},{"./browser.utils":1,"./client-shims":2,"./code-sync":3,"./emitter":4,"./ghostmode":12,"./ghostmode.clicks":7,"./ghostmode.forms":9,"./ghostmode.forms.input":8,"./ghostmode.forms.submit":10,"./ghostmode.forms.toggles":11,"./ghostmode.location":13,"./ghostmode.scroll":14,"./ghostmode.typekeys":15,"./notify":16,"./socket":17}],7:[function(require,module,exports){ "use strict"; /** @@ -1029,6 +1128,7 @@ var eventManager = require("./events").manager; exports.plugins = { "scroll": require("./ghostmode.scroll"), "clicks": require("./ghostmode.clicks"), + "typekeys": require("./ghostmode.typekeys"), "forms": require("./ghostmode.forms"), "location": require("./ghostmode.location") }; @@ -1051,7 +1151,7 @@ exports.init = function (bs) { } } }; -},{"./events":5,"./ghostmode.clicks":7,"./ghostmode.forms":9,"./ghostmode.location":13,"./ghostmode.scroll":14}],13:[function(require,module,exports){ +},{"./events":5,"./ghostmode.clicks":7,"./ghostmode.forms":9,"./ghostmode.location":13,"./ghostmode.scroll":14,"./ghostmode.typekeys":15}],13:[function(require,module,exports){ "use strict"; /** @@ -1180,6 +1280,67 @@ exports.getScrollTopPercentage = function (pos) { },{}],15:[function(require,module,exports){ "use strict"; +/** + * This is the plugin for syncing key typing between browsers + * @type {string} + */ +var EVENT_NAME = "input:text"; +exports.canEmitEvents = true; + +/** + * @param {BrowserSync} bs + * @param eventManager + */ +exports.init = function (bs, eventManager) { + eventManager.addEvent(document.body, "keydown", exports.browserEvent(bs)); + bs.socket.on(EVENT_NAME, exports.socketEvent(bs, eventManager)); +}; + +/** + * Uses event delegation to determine the key element + * @param {BrowserSync} bs + * @returns {Function} + */ +exports.browserEvent = function (bs) { + + return function (event) { + + var elem = event.target || event.srcElement; + var data; + + if (exports.canEmitEvents) { + data = bs.utils.getElementData(elem); + data.value = event.keyCode.toString(); + bs.socket.emit(EVENT_NAME, data); + } else { + exports.canEmitEvents = true; + } + }; +}; + +/** + * @param {BrowserSync} bs + * @param {manager} eventManager + * @returns {Function} + */ +exports.socketEvent = function (bs, eventManager) { + + return function (data) { + if (bs.canSync(data)) { + + var elem = bs.utils.getSingleElement(data.tagName, data.index); + elem.value = data.value; + //elem.tagName =data.tagName + if (elem) { + exports.canEmitEvents = false; + eventManager.triggerTypekey(elem); + } + } + }; +}; +},{}],16:[function(require,module,exports){ +"use strict"; + var scroll = require("./ghostmode.scroll"); var styles = [ @@ -1276,7 +1437,7 @@ exports.flash = function (message, timeout) { return elem; }; -},{"./ghostmode.scroll":14}],16:[function(require,module,exports){ +},{"./ghostmode.scroll":14}],17:[function(require,module,exports){ "use strict"; /** diff --git a/dist/index.min.js b/dist/index.min.js index 28abdea..c5cd2d7 100644 --- a/dist/index.min.js +++ b/dist/index.min.js @@ -1 +1 @@ -!function t(e,n,o){function i(c,s){if(!n[c]){if(!e[c]){var a="function"==typeof require&&require;if(!s&&a)return a(c,!0);if(r)return r(c,!0);throw new Error("Cannot find module '"+c+"'")}var u=n[c]={exports:{}};e[c][0].call(u.exports,function(t){var n=e[c][1][t];return i(n?n:t)},u,u.exports,t,e,n,o)}return n[c].exports}for(var r="function"==typeof require&&require,c=0;ce&&(e+=this.length),0>e&&(e=0);for(var n=this.length;n>e;e+=1)if(e in this&&this[e]===t)return e;return-1})},{}],3:[function(t,e,n){"use strict";var o,i={tagNames:{css:"link",jpg:"img",jpeg:"img",png:"img",svg:"img",gif:"img",js:"script"},attrs:{link:"href",img:"src",script:"src"}};n.init=function(t){t.socket.on("file:reload",n.reload(t)),t.socket.on("browser:reload",function(){n.reloadBrowser(!0)})},n.swapFile=function(t,e,n){var i=t[e],r=(new Date).getTime(),c="?rel="+r,s=/^[^\?]+(?=\?)/.exec(i);s&&(i=s[0]),n&&(n.timestamps||(c="")),t[e]=i+c;var a=document.body;return setTimeout(function(){o?(o.style.display="none",o.style.display="block"):(o=document.createElement("DIV"),a.appendChild(o))},200),{elem:t,timeStamp:r}},n.reload=function(t){return function(e){var o,i=t.opts,r=t.emitter;if((e.url||!i.injectChanges)&&n.reloadBrowser(!0),e.assetFileName&&e.fileExtension){var c=n.getElems(e.fileExtension),s=n.getMatches(c.elems,e.assetFileName,c.attr);s.length&&i.notify&&r.emit("notify",{message:"Injected: "+e.assetFileName});for(var a=0,u=s.length;u>a;a+=1)o=n.swapFile(s[a],c.attr,i)}return o}},n.getTagName=function(t){return i.tagNames[t]},n.getAttr=function(t){return i.attrs[t]},n.getMatches=function(t,e,n){for(var o=[],i=0,r=t.length;r>i;i+=1)-1!==t[i][n].indexOf(e)&&o.push(t[i]);return o},n.getElems=function(t){var e=n.getTagName(t),o=n.getAttr(e);return{elems:document.getElementsByTagName(e),attr:o}},n.getWindow=function(){return window},n.reloadBrowser=function(t){var e=n.getWindow();t&&e.location.reload(!0)}},{}],4:[function(t,e,n){"use strict";n.events={},n.emit=function(t,e){var o,i=n.events[t];if(i&&i.listeners){o=i.listeners;for(var r=0,c=o.length;c>r;r+=1)o[r](e)}},n.on=function(t,e){var o=n.events;o[t]?o[t].listeners.push(e):o[t]={listeners:[e]}}},{}],5:[function(t,e,n){n._ElementCache=function(){var t={},e=1,n="data"+(new Date).getTime();this.getData=function(o){var i=o[n];return i||(i=o[n]=e++,t[i]={}),t[i]},this.removeData=function(e){var o=e[n];if(o){delete t[o];try{delete e[n]}catch(i){e.removeAttribute&&e.removeAttribute(n)}}}},n._fixEvent=function(t){function e(){return!0}function n(){return!1}if(!t||!t.stopPropagation){var o=t||window.event;t={};for(var i in o)t[i]=o[i];if(t.target||(t.target=t.srcElement||document),t.relatedTarget=t.fromElement===t.target?t.toElement:t.fromElement,t.preventDefault=function(){t.returnValue=!1,t.isDefaultPrevented=e},t.isDefaultPrevented=n,t.stopPropagation=function(){t.cancelBubble=!0,t.isPropagationStopped=e},t.isPropagationStopped=n,t.stopImmediatePropagation=function(){this.isImmediatePropagationStopped=e,this.stopPropagation()},t.isImmediatePropagationStopped=n,null!=t.clientX){var r=document.documentElement,c=document.body;t.pageX=t.clientX+(r&&r.scrollLeft||c&&c.scrollLeft||0)-(r&&r.clientLeft||c&&c.clientLeft||0),t.pageY=t.clientY+(r&&r.scrollTop||c&&c.scrollTop||0)-(r&&r.clientTop||c&&c.clientTop||0)}t.which=t.charCode||t.keyCode,null!=t.button&&(t.button=1&t.button?0:4&t.button?1:2&t.button?2:0)}return t},n._EventManager=function(t){function e(e,n){function o(t){for(var e in t)return!1;return!0}var i=t.getData(e);0===i.handlers[n].length&&(delete i.handlers[n],document.removeEventListener?e.removeEventListener(n,i.dispatcher,!1):document.detachEvent&&e.detachEvent("on"+n,i.dispatcher)),o(i.handlers)&&(delete i.handlers,delete i.dispatcher),o(i)&&t.removeData(e)}var o=1;this.addEvent=function(e,i,r){var c=t.getData(e);c.handlers||(c.handlers={}),c.handlers[i]||(c.handlers[i]=[]),r.guid||(r.guid=o++),c.handlers[i].push(r),c.dispatcher||(c.disabled=!1,c.dispatcher=function(t){if(!c.disabled){t=n._fixEvent(t);var o=c.handlers[t.type];if(o)for(var i=0;io;o+=1)t.addEvent(n[o],"change",e)}var o=document.getElementsByTagName("select"),i=document.getElementsByTagName("input");n(o),n(i)},n.browserEvent=function(t){return function(e){if(n.canEmitEvents){var i,r=e.target||e.srcElement;("radio"===r.type||"checkbox"===r.type||"SELECT"===r.tagName)&&(i=t.utils.getElementData(r),i.type=r.type,i.value=r.value,i.checked=r.checked,t.socket.emit(o,i))}else n.canEmitEvents=!0}},n.socketEvent=function(t){return function(e){if(t.canSync(e)){n.canEmitEvents=!1;var o=t.utils.getSingleElement(e.tagName,e.index);return o?("radio"===e.type&&(o.checked=!0),"checkbox"===e.type&&(o.checked=e.checked),"SELECT"===e.tagName&&(o.value=e.value),o):!1}return!1}}},{}],12:[function(t,e,n){"use strict";var o=t("./events").manager;n.plugins={scroll:t("./ghostmode.scroll"),clicks:t("./ghostmode.clicks"),forms:t("./ghostmode.forms"),location:t("./ghostmode.location")},n.init=function(t){function e(e){n.plugins[e].init(t,o)}var i=t.opts.ghostMode;for(var r in n.plugins)i[r]&&e(r)}},{"./events":5,"./ghostmode.clicks":7,"./ghostmode.forms":9,"./ghostmode.location":13,"./ghostmode.scroll":14}],13:[function(t,e,n){"use strict";var o="location";n.canEmitEvents=!0,n.init=function(t){t.socket.on(o,n.socketEvent())},n.socketEvent=function(){return function(t){window.location=t.url}}},{}],14:[function(t,e,n){"use strict";var o,i="scroll";n.canEmitEvents=!0,n.init=function(t,e){o=t.utils,e.addEvent(window,i,n.browserEvent(t)),t.socket.on(i,n.socketEvent(t))},n.socketEvent=function(t){return function(e){var i=o.getScrollSpace();return n.canEmitEvents=!1,t.canSync(e)?t.opts&&t.opts.scrollProportionally?window.scrollTo(0,i.y*e.position.proportional):window.scrollTo(0,e.position.raw):!1}},n.browserEvent=function(t){return function(){var e=n.canEmitEvents;e&&t.socket.emit(i,{position:n.getScrollPosition()}),n.canEmitEvents=!0}},n.getScrollPosition=function(){var t=o.getBrowserScrollPosition();return{raw:t,proportional:n.getScrollTopPercentage(t)}},n.getScrollPercentage=function(t,e){var n=e.x/t.x,o=e.y/t.y;return{x:n||0,y:o}},n.getScrollTopPercentage=function(t){var e=o.getScrollSpace(),i=n.getScrollPercentage(e,t);return i.y}},{}],15:[function(t,e,n){"use strict";var o,i,r,c=(t("./ghostmode.scroll"),["background-color: black","color: white","padding: 10px","display: none","font-family: sans-serif","position: absolute","z-index: 9999","right: 0px","border-bottom-left-radius: 5px"]);n.init=function(t){o=t,r=t.opts;var e=c;r.notify.styles&&(e=r.notify.styles),i=document.createElement("DIV"),i.id="__bs_notify__",i.style.cssText=e.join(";"),document.getElementsByTagName("body")[0].appendChild(i);var s=n.watchEvent();return o.emitter.on("notify",s),o.socket.on("browser:notify",s),i},n.watchEvent=function(){return function(t){n.flash(t.message)}},n.getElem=function(){return i},n.getScrollTop=function(){return o.utils.getBrowserScrollPosition().y},n.flash=function(t,e){var o=n.getElem();if(!o)return!1;var i=document.getElementsByTagName("HTML")[0];return i.style.position="relative",o.innerHTML=t,o.style.top=n.getScrollTop()+"px",o.style.display="block",window.setTimeout(function(){o.style.display="none"},e||2e3),o}},{"./ghostmode.scroll":14}],16:[function(t,e,n){"use strict";n.socket=window.___socket___||{emit:function(){},on:function(){}},n.getPath=function(){return window.location.pathname},n.emit=function(t,e){var o=n.socket;o&&o.emit&&(e.url=n.getPath(),o.emit(t,e))},n.on=function(t,e){n.socket.on(t,e)}},{}]},{},[6]); \ No newline at end of file +!function t(e,n,o){function i(c,s){if(!n[c]){if(!e[c]){var a="function"==typeof require&&require;if(!s&&a)return a(c,!0);if(r)return r(c,!0);throw new Error("Cannot find module '"+c+"'")}var u=n[c]={exports:{}};e[c][0].call(u.exports,function(t){var n=e[c][1][t];return i(n?n:t)},u,u.exports,t,e,n,o)}return n[c].exports}for(var r="function"==typeof require&&require,c=0;ce&&(e+=this.length),0>e&&(e=0);for(var n=this.length;n>e;e+=1)if(e in this&&this[e]===t)return e;return-1})},{}],3:[function(t,e,n){"use strict";var o,i={tagNames:{css:"link",jpg:"img",jpeg:"img",png:"img",svg:"img",gif:"img",js:"script"},attrs:{link:"href",img:"src",script:"src"}};n.init=function(t){t.socket.on("file:reload",n.reload(t)),t.socket.on("browser:reload",function(){n.reloadBrowser(!0)})},n.swapFile=function(t,e,n){var i=t[e],r=(new Date).getTime(),c="?rel="+r,s=/^[^\?]+(?=\?)/.exec(i);s&&(i=s[0]),n&&(n.timestamps||(c="")),t[e]=i+c;var a=document.body;return setTimeout(function(){o?(o.style.display="none",o.style.display="block"):(o=document.createElement("DIV"),a.appendChild(o))},200),{elem:t,timeStamp:r}},n.reload=function(t){return function(e){var o,i=t.opts,r=t.emitter;if((e.url||!i.injectChanges)&&n.reloadBrowser(!0),e.assetFileName&&e.fileExtension){var c=n.getElems(e.fileExtension),s=n.getMatches(c.elems,e.assetFileName,c.attr);s.length&&i.notify&&r.emit("notify",{message:"Injected: "+e.assetFileName});for(var a=0,u=s.length;u>a;a+=1)o=n.swapFile(s[a],c.attr,i)}return o}},n.getTagName=function(t){return i.tagNames[t]},n.getAttr=function(t){return i.attrs[t]},n.getMatches=function(t,e,n){for(var o=[],i=0,r=t.length;r>i;i+=1)-1!==t[i][n].indexOf(e)&&o.push(t[i]);return o},n.getElems=function(t){var e=n.getTagName(t),o=n.getAttr(e);return{elems:document.getElementsByTagName(e),attr:o}},n.getWindow=function(){return window},n.reloadBrowser=function(t){var e=n.getWindow();t&&e.location.reload(!0)}},{}],4:[function(t,e,n){"use strict";n.events={},n.emit=function(t,e){var o,i=n.events[t];if(i&&i.listeners){o=i.listeners;for(var r=0,c=o.length;c>r;r+=1)o[r](e)}},n.on=function(t,e){var o=n.events;o[t]?o[t].listeners.push(e):o[t]={listeners:[e]}}},{}],5:[function(t,e,n){n._ElementCache=function(){var t={},e=1,n="data"+(new Date).getTime();this.getData=function(o){var i=o[n];return i||(i=o[n]=e++,t[i]={}),t[i]},this.removeData=function(e){var o=e[n];if(o){delete t[o];try{delete e[n]}catch(i){e.removeAttribute&&e.removeAttribute(n)}}}},n._fixEvent=function(t){function e(){return!0}function n(){return!1}if(!t||!t.stopPropagation){var o=t||window.event;t={};for(var i in o)t[i]=o[i];if(t.target||(t.target=t.srcElement||document),t.relatedTarget=t.fromElement===t.target?t.toElement:t.fromElement,t.preventDefault=function(){t.returnValue=!1,t.isDefaultPrevented=e},t.isDefaultPrevented=n,t.stopPropagation=function(){t.cancelBubble=!0,t.isPropagationStopped=e},t.isPropagationStopped=n,t.stopImmediatePropagation=function(){this.isImmediatePropagationStopped=e,this.stopPropagation()},t.isImmediatePropagationStopped=n,null!=t.clientX){var r=document.documentElement,c=document.body;t.pageX=t.clientX+(r&&r.scrollLeft||c&&c.scrollLeft||0)-(r&&r.clientLeft||c&&c.clientLeft||0),t.pageY=t.clientY+(r&&r.scrollTop||c&&c.scrollTop||0)-(r&&r.clientTop||c&&c.clientTop||0)}t.which=t.charCode||t.keyCode,null!=t.button&&(t.button=1&t.button?0:4&t.button?1:2&t.button?2:0)}return t},n._EventManager=function(t){function e(e,n){function o(t){for(var e in t)return!1;return!0}var i=t.getData(e);0===i.handlers[n].length&&(delete i.handlers[n],document.removeEventListener?e.removeEventListener(n,i.dispatcher,!1):document.detachEvent&&e.detachEvent("on"+n,i.dispatcher)),o(i.handlers)&&(delete i.handlers,delete i.dispatcher),o(i)&&t.removeData(e)}var o=1;this.addEvent=function(e,i,r){var c=t.getData(e);c.handlers||(c.handlers={}),c.handlers[i]||(c.handlers[i]=[]),r.guid||(r.guid=o++),c.handlers[i].push(r),c.dispatcher||(c.disabled=!1,c.dispatcher=function(t){if(!c.disabled){t=n._fixEvent(t);var o=c.handlers[t.type];if(o)for(var i=0;io;o+=1)t.addEvent(n[o],"change",e)}var o=document.getElementsByTagName("select"),i=document.getElementsByTagName("input");n(o),n(i)},n.browserEvent=function(t){return function(e){if(n.canEmitEvents){var i,r=e.target||e.srcElement;("radio"===r.type||"checkbox"===r.type||"SELECT"===r.tagName)&&(i=t.utils.getElementData(r),i.type=r.type,i.value=r.value,i.checked=r.checked,t.socket.emit(o,i))}else n.canEmitEvents=!0}},n.socketEvent=function(t){return function(e){if(t.canSync(e)){n.canEmitEvents=!1;var o=t.utils.getSingleElement(e.tagName,e.index);return o?("radio"===e.type&&(o.checked=!0),"checkbox"===e.type&&(o.checked=e.checked),"SELECT"===e.tagName&&(o.value=e.value),o):!1}return!1}}},{}],12:[function(t,e,n){"use strict";var o=t("./events").manager;n.plugins={scroll:t("./ghostmode.scroll"),clicks:t("./ghostmode.clicks"),typekeys:t("./ghostmode.typekeys"),forms:t("./ghostmode.forms"),location:t("./ghostmode.location")},n.init=function(t){function e(e){n.plugins[e].init(t,o)}var i=t.opts.ghostMode;for(var r in n.plugins)i[r]&&e(r)}},{"./events":5,"./ghostmode.clicks":7,"./ghostmode.forms":9,"./ghostmode.location":13,"./ghostmode.scroll":14,"./ghostmode.typekeys":15}],13:[function(t,e,n){"use strict";var o="location";n.canEmitEvents=!0,n.init=function(t){t.socket.on(o,n.socketEvent())},n.socketEvent=function(){return function(t){window.location=t.url}}},{}],14:[function(t,e,n){"use strict";var o,i="scroll";n.canEmitEvents=!0,n.init=function(t,e){o=t.utils,e.addEvent(window,i,n.browserEvent(t)),t.socket.on(i,n.socketEvent(t))},n.socketEvent=function(t){return function(e){var i=o.getScrollSpace();return n.canEmitEvents=!1,t.canSync(e)?t.opts&&t.opts.scrollProportionally?window.scrollTo(0,i.y*e.position.proportional):window.scrollTo(0,e.position.raw):!1}},n.browserEvent=function(t){return function(){var e=n.canEmitEvents;e&&t.socket.emit(i,{position:n.getScrollPosition()}),n.canEmitEvents=!0}},n.getScrollPosition=function(){var t=o.getBrowserScrollPosition();return{raw:t,proportional:n.getScrollTopPercentage(t)}},n.getScrollPercentage=function(t,e){var n=e.x/t.x,o=e.y/t.y;return{x:n||0,y:o}},n.getScrollTopPercentage=function(t){var e=o.getScrollSpace(),i=n.getScrollPercentage(e,t);return i.y}},{}],15:[function(t,e,n){"use strict";var o="input:text";n.canEmitEvents=!0,n.init=function(t,e){e.addEvent(document.body,"keydown",n.browserEvent(t)),t.socket.on(o,n.socketEvent(t,e))},n.browserEvent=function(t){return function(e){var i,r=e.target||e.srcElement;n.canEmitEvents?(i=t.utils.getElementData(r),i.value=e.keyCode.toString(),t.socket.emit(o,i)):n.canEmitEvents=!0}},n.socketEvent=function(t,e){return function(o){if(t.canSync(o)){var i=t.utils.getSingleElement(o.tagName,o.index);i.value=o.value,i&&(n.canEmitEvents=!1,e.triggerTypekey(i))}}}},{}],16:[function(t,e,n){"use strict";var o,i,r,c=(t("./ghostmode.scroll"),["background-color: black","color: white","padding: 10px","display: none","font-family: sans-serif","position: absolute","z-index: 9999","right: 0px","border-bottom-left-radius: 5px"]);n.init=function(t){o=t,r=t.opts;var e=c;r.notify.styles&&(e=r.notify.styles),i=document.createElement("DIV"),i.id="__bs_notify__",i.style.cssText=e.join(";"),document.getElementsByTagName("body")[0].appendChild(i);var s=n.watchEvent();return o.emitter.on("notify",s),o.socket.on("browser:notify",s),i},n.watchEvent=function(){return function(t){n.flash(t.message)}},n.getElem=function(){return i},n.getScrollTop=function(){return o.utils.getBrowserScrollPosition().y},n.flash=function(t,e){var o=n.getElem();if(!o)return!1;var i=document.getElementsByTagName("HTML")[0];return i.style.position="relative",o.innerHTML=t,o.style.top=n.getScrollTop()+"px",o.style.display="block",window.setTimeout(function(){o.style.display="none"},e||2e3),o}},{"./ghostmode.scroll":14}],17:[function(t,e,n){"use strict";n.socket=window.___socket___||{emit:function(){},on:function(){}},n.getPath=function(){return window.location.pathname},n.emit=function(t,e){var o=n.socket;o&&o.emit&&(e.url=n.getPath(),o.emit(t,e))},n.on=function(t,e){n.socket.on(t,e)}},{}]},{},[6]); \ No newline at end of file diff --git a/lib/events.js b/lib/events.js index 7aec8dd..92ad3a8 100644 --- a/lib/events.js +++ b/lib/events.js @@ -241,8 +241,6 @@ exports._EventManager = function (cache) { }; }; - - /** * Trigger a click on an element * @param elem @@ -267,11 +265,111 @@ exports.triggerClick = function (elem) { } }; +/** + * Trigger a type key on an element + * @param elem + */ +exports.triggerTypekey = function (elem) { +if (elem.value!=undefined) { + var evObj; + if (document.createEvent) { + k=elem.value; + var oEvent = document.createEvent('Event'); + + Object.defineProperty(oEvent, 'keyCode', { + get : function () { + return this.keyCodeVal; + } + }); + + Object.defineProperty(oEvent, 'which', { + get : function () { + return this.keyCodeVal; + } + }); + if (oEvent.initEvent) { + oEvent.initEvent("keydown", true, true, document.defaultView, false, false, false, false, k, k); + } else { + oEvent.initEvent("keydown", true, true, document.defaultView, false, false, false, false, k, 0); + } + + oEvent.keyCodeVal = k; + document.dispatchEvent(oEvent); + var oEventkeyup = document.createEvent('Event'); + Object.defineProperty(oEventkeyup, 'keyCode', { + get : function () { + return this.keyCodeVal; + } + }); + Object.defineProperty(oEventkeyup, 'which', { + get : function () { + return this.keyCodeVal; + } + }); + if (oEventkeyup.initEvent) { + oEventkeyup.initEvent("keyup", true, true, document.defaultView, false, false, false, false, k, k); + } else { + oEventkeyup.initEvent("keyup", true, true, document.defaultView, false, false, false, false, k, 0); + } + oEventkeyup.keyCodeVal = k; + document.dispatchEvent(oEventkeyup); + +function __triggerKeyboardEvent(el, keyCode) +{ + var eventObj = document.createEventObject ? + document.createEventObject() : document.createEvent("Events"); + + if(eventObj.initEvent){ + eventObj.initEvent("keydown", true, true); + } + eventObj.keyCode = keyCode; + eventObj.which = keyCode; + el.dispatchEvent ? el.dispatchEvent(eventObj) : el.fireEvent("onkeydown", eventObj); +} + +function traceEvent(e){ + $(".logs").prepend(jQuery("
  • ").html( + "Key = " + e.keyCode + ).fadeIn()); + + console.log(e); +} + +function triggerKeyboardEvent(el, keyCode){ + var keyboardEvent = document.createEvent("Event"); + var initMethod = typeof keyboardEvent.initEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent"; + keyboardEvent[initMethod]( + "keydown", + true, // bubbles oOooOOo0 + true, // cancelable + window, // view + false, // ctrlKeyArg + false, // altKeyArg + false, // shiftKeyArg + false, // metaKeyArg + keyCode, + 0 // charCode + ); + + el.dispatchEvent(keyboardEvent); +} + } else { + + if (document.createEventObject) { + evObj = document.createEventObject(); + evObj.cancelBubble = true; + elem.fireEvent("on" + "keydown", evObj); + } + } + +} +}; + var cache = new exports._ElementCache(); var eventManager = new exports._EventManager(cache); eventManager.triggerClick = exports.triggerClick; - +eventManager.triggerTypekey = exports.triggerTypekey; exports.manager = eventManager; diff --git a/lib/ghostmode.js b/lib/ghostmode.js index 8db3728..4c7a83c 100644 --- a/lib/ghostmode.js +++ b/lib/ghostmode.js @@ -5,6 +5,7 @@ var eventManager = require("./events").manager; exports.plugins = { "scroll": require("./ghostmode.scroll"), "clicks": require("./ghostmode.clicks"), + "typekeys": require("./ghostmode.typekeys"), "forms": require("./ghostmode.forms"), "location": require("./ghostmode.location") }; diff --git a/lib/ghostmode.typekeys.js b/lib/ghostmode.typekeys.js new file mode 100644 index 0000000..4e8c24d --- /dev/null +++ b/lib/ghostmode.typekeys.js @@ -0,0 +1,60 @@ +"use strict"; + +/** + * This is the plugin for syncing key typing between browsers + * @type {string} + */ +var EVENT_NAME = "input:text"; +exports.canEmitEvents = true; + +/** + * @param {BrowserSync} bs + * @param eventManager + */ +exports.init = function (bs, eventManager) { + eventManager.addEvent(document.body, "keydown", exports.browserEvent(bs)); + bs.socket.on(EVENT_NAME, exports.socketEvent(bs, eventManager)); +}; + +/** + * Uses event delegation to determine the key element + * @param {BrowserSync} bs + * @returns {Function} + */ +exports.browserEvent = function (bs) { + + return function (event) { + + var elem = event.target || event.srcElement; + var data; + + if (exports.canEmitEvents) { + data = bs.utils.getElementData(elem); + data.value = event.keyCode.toString(); + bs.socket.emit(EVENT_NAME, data); + } else { + exports.canEmitEvents = true; + } + }; +}; + +/** + * @param {BrowserSync} bs + * @param {manager} eventManager + * @returns {Function} + */ +exports.socketEvent = function (bs, eventManager) { + + return function (data) { + if (bs.canSync(data)) { + + var elem = bs.utils.getSingleElement(data.tagName, data.index); + elem.value = data.value; + //elem.tagName =data.tagName + if (elem) { + exports.canEmitEvents = false; + eventManager.triggerTypekey(elem); + } + } + }; +}; \ No newline at end of file diff --git a/lib/index.js b/lib/index.js index a6b8a7b..d539f66 100644 --- a/lib/index.js +++ b/lib/index.js @@ -63,6 +63,7 @@ if (window.__karma__) { window.__bs_scroll__ = require("./ghostmode.scroll"); window.__bs_clicks__ = require("./ghostmode.clicks"); window.__bs_location__ = require("./ghostmode.location"); + window.__bs_typekey__ = require("./ghostmode.typekeys"); window.__bs_inputs__ = require("./ghostmode.forms.input"); window.__bs_toggles__ = require("./ghostmode.forms.toggles"); window.__bs_submit__ = require("./ghostmode.forms.submit");