// // Open Web Analytics - An Open Source Web Analytics Framework // // Copyright 2010 Peter Adams. All rights reserved. // // Licensed under GPL v2.0 http://www.gnu.org/copyleft/gpl.html // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. // // $Id$ // /** * Javascript Domstream Player Library * * @author Peter Adams * @web Open Web Analytics * @copyright Copyright © 2006-2010 Peter Adams * @license http://www.gnu.org/copyleft/gpl.html GPL v2.0 * @category owa * @package owa * @version $Revision$ * @since owa 1.2.1 */ OWA.player = function() { OWA.util.loadScript(OWA.getSetting('baseUrl')+'/modules/base/js/includes/jquery/jquery-1.3.2.min.js', function(){}); OWA.util.loadScript(OWA.getSetting('baseUrl')+'/modules/base/js/includes/jquery/jquery.jgrowl_minimized.js', function(){}); OWA.util.loadCss(OWA.getSetting('baseUrl')+'/modules/base/css/jquery.jgrowl.css', function(){}); OWA.util.loadCss(OWA.getSetting('baseUrl')+'/modules/base/css/owa.overlay.css', function(){}); this.fetchData(); this.showPlayerControls(); } OWA.player.prototype = { timer : null, queue_step : 1, queue_count : 0, animateInterval : 250, stream : null, lock : false, block : function() { this.lock = true; }, unblock : function() { this.lock = false; }, load : function(data) { this.stream = data; // count the events in the queue this.queue_count = this.stream.events.length; }, /** * Fetches data via ajax request */ fetchData: function() { var p = OWA.util.readCookie('owa_overlay'); //alert(unescape(p)); var params = OWA.util.parseCookieStringToJson(p); params.action = 'getDomstream'; //closure var that = this; jQuery.ajax({ url: OWA.getApiEndpoint(), data: OWA.util.nsParams(params), dataType: 'jsonp', jsonp: 'owa_jsonpCallback', success: function(data) { that.load(data); } }); //OWA.debug(data.page); }, moveCursor : function(x, y) { this.block(); jQuery('#owa-cursor').animate({top: y +'px', left: x +'px'}, { queue:true, duration:100}, 'swing', this.unblock()); //console.log("Moving to X: %s Y: %s", x, y); this.setStatus("Mouse Movement to: "+x+", "+y); }, scrollViewport : function(x, y) { //jQuery('html, body').animate({scrollTop: y}, 0); window.scroll(0,y) //console.log("Scrolling to Y: %s", y); this.setStatus("Scrolling to: "+ y); }, start : function() { var that = this; this.timer = setInterval(function(){that.step()}, this.animateInterval); }, step : function() { if (this.lock) { OWA.debug("Can not step as player is locked"); return; } if (this.queue_count === 0) { this.stop(); } else if ((this.queue_count > 0) && (this.queue_step >= this.queue_count)) { this.stop(); } else { // get the next event in the queue var event = this.getNextEvent(); // trigger dom stream events //jQuery().trigger(event.event_type, [event]); this.playEvent(event); } }, getNextEvent : function() { OWA.debug("Queue step is: "+ this.queue_step); var event = this.stream.events[this.queue_step]; OWA.debug("getting event... " + event.event_type); // increment the queue step this.queue_step++; return event; }, playEvent : function(event) { OWA.debug("playing event of type: " + event.event_type); switch (event.event_type) { case 'dom.movement': return this.movementEventHandler(event); case 'dom.scroll': return this.scrollEventHandler(event); case 'dom.keypress': return this.keypressEventHandler(event); case 'dom.click': return this.clickEventHandler(event); } }, stop : function() { // change control static color jQuery('#owa_overlay_start').removeClass('active'); if (!this.timer) return false; clearInterval(this.timer); this.setStatus('Ready.'); }, play : function() { OWA.debug("Now playing Domstream."); if ((this.queue_step = this.queue_count)) { this.queue_step = 1; } this.start(); this.setStatus('Playing...'); }, showPlayerControls : function() { //create player control bar var player = '
'; jQuery('body').append(player); jQuery('#owa_overlay').append(''); //logo var startlink = '
Play
'; jQuery('#owa_overlay').append(startlink); var pauselink = '
Pause
'; jQuery('#owa_overlay').append(pauselink); var closelink = '
Hide
'; jQuery('#owa_overlay').append(closelink); var status_msg = '
...
'; jQuery('#owa_overlay').append(status_msg); //create hidden player controls container var hiddenplayer = '
'; jQuery('body').append(hiddenplayer); jQuery("#owa_overlay_hidden").hide(); //add cursor var cursor = '
'; jQuery('body').append(cursor); jQuery('#owa_overlay_start').toggleClass('active'); // set active color. not sure this works right.... jQuery('.owa_overlay_control').click( function(){ jQuery(".owa_overlay_control").removeClass('active'); jQuery(this).addClass('active'); }); //hide toolbar and make visible the 'show' button jQuery("#owa_overlay_logo").click(function() { jQuery("#owa_overlay").slideToggle("fast"); jQuery("#owa_overlay_hidden").fadeIn("slow"); }); //show toolbar and hide the 'show' button jQuery("#owa_overlay_hidden").click(function() { jQuery("#owa_overlay").slideToggle("fast"); jQuery("#owa_overlay_hidden").fadeOut(); }); //closure var that = this; // start player jQuery('#owa_player_start').bind('click', function(e) {that.play(e)}); // pause player jQuery('#owa_player_stop').bind('click', function(e) {that.stop(e)}); // eliminate overlay cookie when close button is pressed. jQuery('#owa_player_close').click( function() { jQuery("#owa_overlay").slideToggle("fast"); jQuery("#owa_overlay_hidden").fadeIn("slow"); }); // eliminate overlay cookie when window closes. jQuery(window).unload(function() {OWA.endOverlaySession()}); }, setStatus : function(msg) { jQuery('#owa-overlay-status').html(msg); }, showNotification : function(msg, header) { jQuery.jGrowl.defaults.position = 'center'; jQuery.jGrowl.defaults.closer = false; jQuery.jGrowl.defaults.pool = 1; jQuery.jGrowl(msg, { life: 250, speed: 25, position: "center", closer: false, header: header }); }, movementEventHandler : function(e) { return this.moveCursor(e.cursor_x, e.cursor_y); }, scrollEventHandler : function(e) { this.scrollViewport(e.x, e.y); }, keypressEventHandler : function(event) { if (event.dom_element_id != "" || undefined) { var accessor = '#'+event.dom_element_id; } else if (event.dom_element_name) { var accessor = event.dom_element_tag+"[name="+event.dom_element_name+"]"; //console.log("accessor: %s", accessor); } var element_value = jQuery(accessor).val() || ''; element_value += event.key_value; jQuery(accessor).val(element_value); this.showNotification(event.key_value, "Key Press:"); this.setStatus("Key Press: " + event.key_value); }, clickEventHandler : function(event) { var accessor = ''; if (event.dom_element_id != "" && event.dom_element_id != "(not set)" ) { accessor = '#'+event.dom_element_id; var accessor_msg = accessor; } else if (event.dom_element_name != "" && event.dom_element_name != "(not set)" ) { accessor = event.dom_element_tag+"[name="+event.dom_element_name+"]"; var accessor_msg = accessor; //console.log("accessor: %s", accessor); } else if(event.dom_element_class != "" && event.dom_element_class != "(not set)") { var accessor_msg = event.dom_element_tag+"."+event.dom_element_class; } else { var accessor_msg = event.dom_element_tag; } var d = new Date(); var id = 'owa-click-marker' + '_' + d.getTime()+1; var marker = '
'; jQuery('body').append(marker); jQuery('#'+id).css({'position': 'absolute','left': event.click_x +'px', 'top': event.click_y +'px', 'z-index' : 89}); if (accessor) { jQuery(accessor).click(); jQuery(accessor).focus(); } //jQuery('#owa-latest-click').slideToggle('normal'); //console.log("Clicking: %s", accessor); //this.setStatus("Clicking: "+accessor); this.setStatus("Click @ "+event.click_x+", "+event.click_y); this.showNotification(accessor_msg, "Clicked On DOM Element:"); } }