Source: ChatObserver.js

  1. /**
  2.  * ChatObserver.js
  3.  *
  4.  * Created by Matthias Seemann on 17.01.2013.
  5.  * Copyright (c) 2013 Visisoft GbR. All rights reserved.
  6.  */
  8. define(['underscore', 'lib/UserAgent', 'api/ManagedError', 'api/errorCodes', 'api/configuration', 'lib/asyncLoadElement', 'lib/ajax', 'lib/devTools'],
  9. 	function(_, UserAgent, ManagedError, ErrorCode, Configuration, asyncLoadExternalSourceIntoElement, ajax, devTools)
  10. {
  11. 	/**
  12. 	 * @type {ChatObserver}
  13. 	 */
  14. 	var instance;
  16. 	/**
  17. 	 * @type {Element}
  18. 	 */
  19. 	var iFrameTag;
  21. 	/**
  22. 	 * preparations for message reception completed
  23. 	 * @type {Boolean}
  24. 	 */
  25. 	var isArmed = false;
  27. 	/**
  28. 	 *
  29. 	 * @type {function[]}
  30. 	 */
  31. 	var readyCallbacks = [];
  33. 	var LiveSupport = window[Configuration.configuration.GLOBAL_NAMESPACE];
  35. 	/**
  36. 	 * @class ChatObserver
  37. 	 * @constructor
  38. 	 * @memberof LiveSupport.VisitorAPI
  39. 	 * @description The central event publisher for all events the chat window sends.<br><br>
  40. 	 * <h6>LIMITED SUPPORT:</h6> ChatObserver requires a <em>yalst Business</em> edition<br><br>
  41. 	 * ChatObserver is not available on <em>mobile devices</em> where the chat runs in a dedicated browser tab
  42. 	 * as touch-friendly single page web application. In this case you can use the
  43. 	 * [ThemeApi ChatEventPublisher]{@link http://www.visisoft.de/theme_api/module-themeApi.html#.chatEventPublisher}.<br><br>
  44. 	 * The chat window to be observed can be created by {@link LiveSupport.VisitorAPI.startLiveChat} or by
  45. 	 * the chat button which is created by the regular <em>yalst</em> integration code.<br><br>
  46. 	 * There can be just a single instance of ChatObserver per page. <em>It must be
  47. 	 * accessed via {@link LiveSupport.VisitorAPI.ChatObserver.asyncSharedChatObserver}().</em><br><br>
  48. 	 * IMPORTANT: Attempts to call this constructor will fail with an exception. (Singleton pattern)
  49. 	 * <br><br>
  50. 	 * <h6>LIMITED BROWSER SUPPORT:</h6>
  51. 	 * <ul><li>will not work in Internet Explorer version 7 or older.</li>
  52. 	 * <li>will not work in Google Chrome if third-party cookies are blocked by the user</li>
  53. 	 * <li>in Internet Explorer 8 and 9 the schema (<tt>http</tt> or <tt>https</tt>) of the url in the
  54. 	 * {@link LiveSupport.VisitorAPI.associateWithLiveSupportProduct} command must match the SSL capability of
  55. 	 * your yalst product.</li>
  56. 	 * <li>will not work with the touch-friendly chat for mobile devices. Instead inject JavaScript via user
  57. 	 * theme and subscribe to `KeyStepPublisher`.</li>
  58. 	 * </ul>
  59. 	 * <br><br><strong>Throws</strong> {@link LiveSupport.ManagedError} in case readyCallback is not given and
  60. 	 * <ul><li>the constructor is called more than once or</li>
  61. 	 * <li>the browser is not supported (IE 7 and older)</li></ul>
  62. 	 * @property {function()} onChatEvent Event handlers receive a single parameter
  63. 	 * which is in case of success a
  64. 	 * {@link LiveSupport.VisitorAPI.ChatObserver.Event} or a {@link LiveSupport.ManagedError} in
  65. 	 * case of failure.
  66. 	 */
  67. 	var ChatObserver = function()
  68. 	{
  69. 		this.onChatEvent = function(evt){};
  71. 		this.urlRegExp = new RegExp("^(https?:)?\/\/([a-z0-9-]+(\\.[a-z0-9-]+)+)([\\/?].+)?$");
  72. 		this.productOriginDomain = this.urlRegExp.exec(Configuration.configuration.PRODUCT_URL)[2];
  74. 		/**
  75. 		 * @private
  76. 		 * @param {MessageEvent} event
  77. 		 */
  78. 		this.postMessageEventHandler = function(event)
  79. 		{
  80. 			if (!event.data || !(event.data in eventByXOriginMessageEventKey))
  81. 			{
  82. 				return;
  83. 			}
  85. 			var originDomain = this.urlRegExp.exec(event.origin)[2];
  86. 			if ((event.origin == location.href) || (originDomain == this.productOriginDomain))
  87. 			{
  88. 				this.onChatEvent(eventByXOriginMessageEventKey[event.data]);
  89. 			}
  90. 		};
  92. 		var sanityError;
  94. 		if (typeof instance == "object")
  95. 		{
  96. 			sanityError = new ManagedError(ErrorCode.ForbiddenSingletonConstructorError,
  97. 				"Invalid attempt to create another ChatObserver instance.");
  98. 		}
  100. 		var userAgent = UserAgent.sharedUserAgent();
  102. 		if (userAgent.isIE() && (userAgent.version() < 8.0))
  103. 		{
  104. 			sanityError = new ManagedError(ErrorCode.UnsupportedBrowser,
  105. 				"Method requires at least Internet Explorer 8");
  106. 		}
  108. 		if (sanityError)
  109. 		{
  110. 			if (readyCallbacks.length > 0)
  111. 			{
  112. 				while (readyCallbacks.length > 0)
  113. 				{
  114. 					readyCallbacks.shift().call(null, sanityError);
  115. 				}
  116. 			}
  117. 			else
  118. 			{
  119. 				throw sanityError;
  120. 			}
  122. 			return;
  123. 		}
  127. 		function onEventReceiverIFrameLoaded()
  128. 		{
  129. 			isArmed = true;
  131. 			while (readyCallbacks.length > 0)
  132. 			{
  133. 				readyCallbacks.shift().call(null, instance);
  134. 			}
  136. 			if (window.LiveSupport != undefined && window.LiveSupport.VisitorAPI != undefined
  137. 				&& window.LiveSupport.VisitorAPI._registeredChatObserverIds instanceof Array)
  138. 			{
  139. 				/// origin ids written by yalst.js.php if loaded to create a chat button ("button != 'no'")
  141. 				ChatObserver.addRegisteredOriginIds(LiveSupport.VisitorAPI._registeredChatObserverIds);
  142. 			}
  143. 		}
  146. 		var shouldSendViaLocalStorage = (userAgent.isIE() && (userAgent.version() >= 9.0))
  147. 													|| userAgent.isChrome() || userAgent.isNotBranded();
  148. 		var shouldUseJavascriptHandler = userAgent.isIE() && (userAgent.version() < 9.0);
  150. 		if (shouldSendViaLocalStorage || shouldUseJavascriptHandler)
  151. 		{
  152. 			/**
  153. 			 * name attribute of the helper iFrame must be identically named in "msgframe.html"
  154. 			 * @const
  155. 			 * @default yeventreceiver
  156. 			 * @type {String}
  157. 			 */
  158. 			var FRAME_NAME = "yeventreceiver";
  159. 			if (document.getElementsByName(FRAME_NAME).length == 0)
  160. 			{
  161. 				iFrameTag = document.createElement("iframe");
  163. 				iFrameTag.name = FRAME_NAME;
  164. 				(iFrameTag.frameElement || iFrameTag).style.display = "none";
  165. 				(iFrameTag.frameElement || iFrameTag).style.cssText
  166. 					= "width: 0; height: 0; border: 0";
  168. 				/// find out if the chat will run under https or http
  169. 				/// so that the iFrame will be loaded with the right schema
  171. 				if (ajax.isCORSSupported() && ajax.isJsonSupported())
  172. 				{
  173. 					ajax.getJson(Configuration.configuration.PRODUCT_URL + "chat.api.php?cmd=hello&clientcap=1.3&site="
  174. 						+ Configuration.configuration.PRODUCT_SITE
  175. 						, function(response, error)
  176. 						{
  177. 							var schema;
  179. 							if (error)
  180. 							{
  181. 								if (Configuration.configuration.DEBUG)
  182. 								{
  183. 									devTools.console.log("Chat API Ajax error: " + error.message);
  184. 								}
  186. 								schema = "https://";
  187. 							}
  189. 							schema = response.ssl ? "https://" : "http://";
  191. 							var iFrameUrl = Configuration.configuration.PRODUCT_URL.replace(/^.*?\/\//, schema)
  192. 								+ "eventreceiver.html?" + encodeURIComponent(location.href);
  194. 							asyncLoadExternalSourceIntoElement(iFrameTag
  195. 								, iFrameUrl
  196. 								, onEventReceiverIFrameLoaded
  197. 								, document.body
  198. 							);
  199. 						}
  200. 					);
  201. 				}
  202. 				else
  203. 				{
  204. 					/// for old IEs
  205. 					// I assume that the url parameter of the associate command is already in the right schema
  207. 					var iFrameUrl = Configuration.configuration.PRODUCT_URL	+ "eventreceiver.html?"
  208. 							+ encodeURIComponent(location.href);
  210. 					asyncLoadExternalSourceIntoElement(iFrameTag
  211. 						, iFrameUrl
  212. 						, onEventReceiverIFrameLoaded
  213. 						, document.body);
  214. 				}
  216. 			}
  217. 			else if (document.getElementsByName(FRAME_NAME).contentWindow)
  218. 			{
  219. 				isArmed = true;
  221. 				_.defer(function()
  222. 				{
  223. 					while (readyCallbacks.length > 0)
  224. 					{
  225. 						readyCallbacks.shift().call(null, instance);
  226. 					}
  227. 				});
  228. 			}
  229. 		}
  230. 		else
  231. 		{
  232. 			isArmed = true;
  234. 			_.defer(function()
  235. 			{
  236. 				while (readyCallbacks.length > 0)
  237. 				{
  238. 					readyCallbacks.shift().call(null, instance);
  239. 				}
  240. 			});
  241. 		}
  243. 		if (window.addEventListener)
  244.       {
  245. 			window.addEventListener("message", _.bind(this.postMessageEventHandler, this), false);
  246. 		}
  247.      	else if (window.attachEvent)
  248.       {
  249. 			window.attachEvent("onmessage", _.bind(this.postMessageEventHandler, this));
  250. 		}
  252. 		instance = this;
  253. 	};
  255. 	/**
  256. 	 * observable events fired by the chat (popup) window
  257. 	 * @enum {string} Event
  258. 	 * @readonly
  259. 	 * @memberof LiveSupport.VisitorAPI.ChatObserver
  260. 	 */
  261. 	ChatObserver.Event = {
  262. 		/**
  263. 		 * Event is fired when the (popup) window showing the start chat form appears.
  264. 		 * Event is silenced when the start form is skipped by specifying `direct=true` as
  265. 		 * additional parameter to {@link LiveSupport.VisitorAPI.startLiveChat}
  266. 		 */
  267. 		open : 'open',
  268. 		/**
  269. 		 * Event is fired when the chat is started.
  270. 		 */
  271. 		start : 'start',
  272. 		/**
  273. 		 * Event is fired when the operator joins the chat.
  274. 		 */
  275. 		join : 'join',
  276. 		/**
  277. 		 * Event is fired when the chat is finished. This event is only delivered if the chat is
  278. 		 * closed by the operator or by the user through the inner close button.
  279. 		 * It does not fire if the user quits the popup using the window's system close button or
  280. 		 * closes the popup before the chat is started.
  281. 		 */
  282. 		finish : 'finish'
  283. 	};
  285. 	/**
  286. 	 * @private
  287. 	 * @param {array} ids
  288. 	 */
  289. 	ChatObserver.addRegisteredOriginIds = function(ids)
  290. 	{
  291. 		if (_.isArray(ids))
  292. 		{
  293. 			_(ids).forEach(ChatObserver.addOriginId);
  294. 		}
  295. 	};
  297. 	/**
  298. 	 * Registers an origin id which is broadcast by the popup window together with
  299. 	 * the particular chat events.
  300. 	 * @param {string} id
  301. 	 */
  302. 	ChatObserver.addOriginId = function(id)
  303. 	{
  304. 		if (iFrameTag && isArmed && instance)
  305. 		{
  306. 			/// contentWindow is null when called in JsTestDriver environment from the traditional
  307. 			/// yalst integration code....!!!
  308. 			iFrameTag.contentWindow.postMessage(JSON.stringify({addId : id}), "*");
  309. 		}
  310. 	};
  312. 	/**
  313. 	 * mapper between traditional 'yevent_' strings and the ChatObserver.Event enumeration
  314. 	 * @type {Object}
  315. 	 * @private
  316. 	 */
  317. 	var eventByXOriginMessageEventKey = {
  318. 		"yevent_chatwindowopen" : ChatObserver.Event.open
  319. 		, "yevent_chatstarted" : ChatObserver.Event.start
  320. 		, "yevent_chatrunning" : ChatObserver.Event.join
  321. 		, "yevent_chatend" : ChatObserver.Event.finish
  322. 	};
  324. 	/**
  325. 	 * Accesses and creates the single ChatObserver object.<br><br>
  326. 	 * If called for the first time depending on the user agent this method may load additional external
  327. 	 * resources to receive chat events. When this setup is complete the callback will be invoked
  328. 	 * with the ChatObserver object as parameter or in case of an error an {@link LiveSupport.ManagedError} object.
  329. 	 * @param {function} [resultCallback] called when ChatObserver is ready
  330. 	 * to receive and re-publish chat window events. It may receive an Error object in case of an error the single
  331. 	 * ChatObserver instance otherwise.
  332. 	 * @memberof LiveSupport.VisitorAPI.ChatObserver
  333. 	 * @example
  334. LiveSupport.VisitorAPI.ChatObserver.asyncSharedChatObserver(function(chatObserverOrError){
  335. 	if (chatObserverOrError instanceof Error){
  336. 		alert(chatObserverOrError.message);
  337. 	}
  338. 	else{
  339. 		chatObserverOrError.onChatEvent = chatEventHandler;
  340. 		startButton.removeAttribute("disabled");
  341. 	}
  342. });
  343. startButton.setAttribute("disabled", "disabled");
  345. function chatEventHandler(evtOrError){
  346. 	if (evtOrError instanceof LiveSupport.ManagedError){
  347. 		alert(evtOrError.message);
  348. 		return;
  349. 	}
  351. 	if (evtOrError == LiveSupport.VisitorAPI.ChatObserver.Event.join){
  352. 		startButton.style.visibility = "hidden";
  353. 	}
  354. 	else{
  355. 		startButton.style.visibility = "visible";
  356. 	}
  357. }
  358. 	 */
  359. 	ChatObserver.asyncSharedChatObserver = /** @param {function} resultCallback */ function(resultCallback)
  360. 	{
  361. 		var callback = /** @param {LiveSupport.VisitorAPI.ChatObserver|Error} observerOrError */ function(observerOrError){};
  362. 		if (typeof resultCallback == "function")
  363. 		{
  364. 			callback = resultCallback;
  365. 		}
  367. 		if (typeof instance == "object")
  368. 		{
  369. 			_.defer(_.bind(callback, null, instance));
  370. 		}
  371. 		else if (UserAgent.sharedUserAgent().isIE() && (UserAgent.sharedUserAgent().version() < 8.0))
  372. 		{
  373. 			_.defer(_.bind(callback, null, new ManagedError(ErrorCode.UnsupportedBrowser,
  374. 					"Method requires at least Internet Explorer 8")));
  375. 		}
  376. 		else if (!Configuration.configuration.IS_ASSOCIATED)
  377. 		{
  378. 			_.defer(_.bind(callback, null, new ManagedError(ErrorCode.ServerNotYetAssociated
  379. 					, "Illegal API use. Attempt to call the method 'asyncSharedChatObserver'" +
  380. 						" before associated to a live support server.")));
  381. 		}
  382. 		else
  383. 		{
  384. 			readyCallbacks.push(callback);
  386. 			new ChatObserver();
  387. 		}
  388. 	};
  390. 	return ChatObserver;
  391. });