Permalink
Browse files

Fix Bug 977087 - Fix custom event shim for IE8.

  • Loading branch information...
1 parent c132dde commit d8b22557be8c21edbf97aa6c137b9830a553f9a9 @mjschranz mjschranz committed Feb 25, 2014
Showing with 134 additions and 17 deletions.
  1. +3 −8 ie8/popcorn.ie8.html
  2. +131 −9 ie8/popcorn.ie8.js
View
@@ -4,7 +4,7 @@
<title>Popcorn Youtube Player Example</title>
<script src="popcorn.ie8.js"></script>
<script src="../popcorn.js"></script>
- <script src="../wrappers/common/popcorn._mediaElementProto.js"></script>
+ <script src="../wrappers/common/popcorn._MediaElementProto.js"></script>
<script src="../wrappers/jwplayer/popcorn.HTMLJWPlayerVideoElement.js"></script>
<script src="../plugins/footnote/popcorn.footnote.js"></script>
<script src="../plugins/flickr/popcorn.flickr.js"></script>
@@ -160,14 +160,9 @@
<div>
<h3>Description</h3>
<p>
- This demo will showcase how a Youtube flash video can be integrated into Popcorn. This is done by making the flash video masquerade as HTML 5 video.<br />
- Due to the Flash security model, this demo must be run from a web server<br />
+ This demo will showcase how an HTML5 video can be integrated into Popcorn using our JWPlayer Wrapper. This is done by wrapping the HTML5 video in a flash object and making the flash object masquerade as HTML 5 video.<br />
+ Due to the Flash security model, this demo must be run from a web server<br />
From 5 to 40 seconds, the footnote 'The video is "RiP: A Remix Manifesto", by Brett Gaylor' will appear below 'Footnote Area'.
- <hr >
- Youtube does support their player to be chromeless (hidden controls), but their controls are left in to provide richer interaction.<br />
- Custom controls have been developed and tied into their player for this demo.<br />
- Clicking play/pause or seeking in either the video or via custom controls will cause the other to update.<br />
- The video can be specified in the HTML source by giving the youtube web site url (http://www.youtube.com/watch?v=VIDEOID) to either Popcorn.youtube or as the div src attribute.<br/>
</p>
<h4>Expected Events</h4>
<ul>
View
@@ -1,18 +1,135 @@
(function() {
- document.addEventListener = document.addEventListener || function( event, callBack ) {
+ if ( !document.addEventListener && !document.removeEventListener && !document.dispatchEvent ) {
+ var events = {};
- event = ( event === "DOMContentLoaded" ) ? "onreadystatechange" : "on" + event;
+ var addEventListener = function( eventName, callBack ) {
- document.attachEvent( event, callBack );
- };
+ eventName = ( eventName === "DOMContentLoaded" ) ? "readystatechange" : eventName;
- document.removeEventListener = document.removeEventListener || function( event, callBack ) {
+ if ( Event[ eventName.toUpperCase() ] || eventName === "readystatechange" ) {
+ document.attachEvent( "on" + eventName, callBack );
+ return;
+ }
- event = ( event === "DOMContentLoaded" ) ? "onreadystatechange" : "on" + event;
+ if ( !events[ eventName ] ) {
+ events[ eventName ] = {
+ events: [],
+ queue: [],
+ active: false
+ };
+ }
- document.detachEvent( event, callBack );
- };
+ if ( events[ eventName ].active ) {
+ events[ eventName ].queue.push( callBack );
+ } else {
+ events[ eventName ].events.push( callBack );
+ }
+ };
+
+ var removeEventListener = function( eventName, callBack ) {
+
+ eventName = ( eventName === "DOMContentLoaded" ) ? "readystatechange" : eventName;
+
+ var i = 0,
+ listeners = events[ eventName ];
+
+ if ( Event[ eventName.toUpperCase() ] || eventName === "readystatechange" ) {
+ document.detachEvent( "on" + eventName, callBack );
+ return;
+ }
+
+ if ( !listeners ) {
+ return;
+ }
+
+ for ( i = listeners.events.length - 1; i >= 0; i-- ) {
+ if ( callBack === listeners.events[ i ] ) {
+ delete listeners.events[ i ];
+ }
+ }
+
+ for ( i = listeners.queue.length - 1; i >= 0; i-- ) {
+ if ( callBack === listeners.queue[ i ] ) {
+ delete listeners.queue[ i ];
+ }
+ }
+ };
+
+ var dispatchEvent = function( eventObject ) {
+ var evt,
+ self = this,
+ eventInterface,
+ listeners,
+ eventName = eventObject.type,
+ queuedListener;
+
+ // A string was passed, create event object
+ if ( !eventName ) {
+
+ eventName = eventObject;
+ eventInterface = Popcorn.events.getInterface( eventName );
+
+ if ( eventInterface ) {
+
+ evt = document.createEvent( eventInterface );
+ evt.initCustomEvent( eventName, true, true, window, 1 );
+ }
+ }
+
+ listeners = events[ eventName ];
+
+ if ( listeners ) {
+ listeners.active = true;
+
+ for ( var i = 0; i < listeners.events.length; i++ ) {
+ if ( listeners.events[ i ] ) {
+ listeners.events[ i ].call( self, evt, self );
+ }
+ }
+
+ if ( listeners.queue.length ) {
+ while ( listeners.queue.length ) {
+ queuedListener = listeners.queue.shift();
+
+ if ( queuedListener ) {
+ listeners.events.push( queuedListener );
+ }
+ }
+ }
+
+ listeners.active = false;
+
+ listeners.events.forEach(function( listener ) {
+ if ( !listener ) {
+ listeners.events.splice( listeners.events.indexOf( listener ), 1 );
+ }
+ });
+
+ listeners.queue.forEach(function( listener ) {
+ if ( !listener ) {
+ listeners.queue.splice( listeners.queue.indexOf( listener ), 1 );
+ }
+ });
+ }
+ };
+
+ document.addEventListener = addEventListener;
+ document.removeEventListener = removeEventListener;
+ document.dispatchEvent = dispatchEvent;
+
+ }
+
+ if ( !Event.prototype.preventDefault ) {
+ Event.prototype.preventDefault = function() {
+ this.returnValue = false;
+ };
+ }
+ if ( !Event.prototype.stopPropagation ) {
+ Event.prototype.stopPropagation = function() {
+ this.cancelBubble = true;
+ };
+ }
window.addEventListener = window.addEventListener || function( event, callBack ) {
@@ -58,9 +175,14 @@
target : null,
currentTarget : null,
cancelable : false,
+ detail: false,
bubbles : false,
initEvent : function (type, bubbles, cancelable) {
- this.type = type;
+ this.type = type;
+ },
+ initCustomEvent: function(type, bubbles, cancelable, detail) {
+ this.type = type;
+ this.detail = detail;
},
stopPropagation : function () {},
stopImmediatePropagation : function () {}

0 comments on commit d8b2255

Please sign in to comment.