remy / polyfills

Collection of polyfills that I've written

Polyfills

A way of getting the browser to behave and support the latest specifications.

This is my own collection of code snippets that support different native features of browsers using JavaScript (and if required, Flash in some cases).

Component Installation

You can install polyfills using component:

component install remy/polyfills

If you'd like to include all polyfills (except device motion), you can just:

require( 'polyfills' );

If you'd only like a specific polyfill, you can require indivual ones like this:

require( 'polyfills/classList' );

// now we can use classList in lots of browsers!
element.classList.add( 'foo' );

License

License: http://rem.mit-license.org

polyfills's Issues

DOMTokenList contains implementation seems wrong

I believe your contains method for DOMTokenList in classList.js is incorrect. It is checking the Element's className instead of the array of classes. In the event you check if a DOMTokenList contains a string which is a substring of a class, it would return true when I believe it should return false. Instead it should be something like:

  contains: function(token) {
    return prototype.indexOf.call(this, token) != -1;
  },

How to call this in angular 2

Hello All,
I am trying to call this in my angular 2 component
like:

require('../../../style/vendors/EventSource.js');

	let es = new EventSource(URL);

But, i am getting the exception that event source :ErrorUncaught (in promise): TypeError: EventSource is not a constructor
TypeError: EventSource is not a constructor

Please suggest me i am doing this in correctly or not?

Missing SVG support for classList

I believe you have to use el.setAttribute('class', 'blah') to be able to update the attribute on an SVG element, but it might be a bit tricker than that once you throw IE into the mix.

Create tag so it can be used/found on Bower

At the moment it only works when adding "html5-polyfills": "latest". Ideally your repo should have at least one tag, so it can be used properly with bower.

MessageEvent origin is undefined

Tested on IE11 and Edge.
The origin property on received MessageEvent is undefined.

I think it's due to the use of eventsource.url (instead of eventsource.URL) when creating the MessageEvent.

To go even further I would maybe use window.location.origin instead of eventsource.URL as we may want the protocol://host part of the url instead?

'eventsource' is null or not an object on IE8

After running a very simle demo app (http://sinatra-sse.herokuapp.com) for a while on IE8, IE9, chrome and firefox I got this error message from IE8 (using DebugBar).
It happens from time to time but not often, I have no idea how to reproduce it, I just letting the browser open for a while.

The error is at line 48 character 11 (according to DebugBar)

if message length exceeds 4096 bytes, it won't get processed correctly

Here is a fix. It also performs better. Basically, it effectively does not increment the cache unless that data was actually processed into a MessageEvent.

1. replace the cache variable with chars_processed
2. replace the cache = '' line with chars_processed = 0
3. replace the event handling code with:

          // process this.responseText
          var parts = responseText.substr(chars_processed).split("\n"),
              eventType = 'message',
              data = [],
              i = 0,
              line = '';

          // TODO handle 'event' (for buffer name), retry
          var temp_chars_processed = 0;
          for (; i < parts.length; i++) {
            line = parts[i].replace(reTrim, '');
            temp_chars_processed += line.length + (i + 1 == parts.length ? 0 : 1);
            if (line.startsWith('event')) {
              eventType = line.replace(/event:?\s*/, '');
            } else if (line.startsWith('retry')) {
              retry = parseInt(line.replace(/retry:?\s*/, ''));
              if(!isNaN(retry)) { interval = retry; }
            } else if (line.startsWith('data')) {
              data.push(line.replace(/data:?\s*/, ''));
            } else if (line.startsWith('id:')) {
              lastEventId = line.replace(/id:?\s*/, '');
            } else if (line.startsWith('id')) { // this resets the id
              lastEventId = null;
            } else if (line == '') {
              if (data.length) {
                var event = new MessageEvent(data.join('\n'), eventsource.url, lastEventId);
                eventsource.dispatchEvent(eventType, event);
                data = [];
                eventType = 'message';
                chars_processed += temp_chars_processed;
              }
            }
          }

Browser compatibility

Hi, I was wondering if there is any browser that the EventSource polyfill is not compatible with, or if there are any differences in its usage (as is the case with Yaffle's). Perhaps you would mention it in your README.md?

Thanks!

classList.add() is not working with similar strings

If the element has e.g: 'btn-active' class you can't add 'btn' because the indexOf already returns that it found the string 'btn' as part of 'btn-active'.

removeEventListener ~~ rewrited from web_socket.js

https://github.com/gimite/web-socket-js/blob/master/web_socket.js

removeEventListener = function(type, listener, useCapture) {
            if (!this['_' + type + 'Handlers']) {
                return;
            }
            var handlers = this['_' + type + 'Handlers'];
            for (var i = handlers.length - 1; i >= 0; --i) {
                if (handlers[i] === listener) {
                    handlers.splice(i, 1);
                    break;
                }
            }
        };

EventSource doesn't work properly in IE8/9

InternetExplorer 8 & 9 don't provide a responseText until readyState 4, which seems to happen only when the connection is closed. So I do get the events, but all at once on xhr timeout :(
Is there a trick to get events on the flow?

Missing support for 'force' argument of classList.toggle

See: https://developer.mozilla.org/en-US/docs/Web/API/Element.classList

Some browsers support classList but not the optional force argument of toggle.

Add docs for browser support

Can we add a line to the readme that says what the oldest supported version is?

EventSource.prototype is not getting called

Hello All,

I am using this with angualr 2 my code is like this :

const es = require('../../../style/vendors/EventSource');
es.EventSource(SERVER_URL);

Firstly , i am not able to see that EventSource.protoype getting called which is inside EventSource.js
and secondly, when using es.addEventListener i am getting

TypeError: es.addEventListener is not a function

 es.addEventListener('open', function (event) {
console.log('event source open');
 });

'this._xhr' is null or not an object on line 127 on IE8

I get this error on IE8:

'this._xhr' is null or not an object on line 127

This is the line:
this._xhr.abort();

add a `package.json`

So this can be used with browserify.

range does not work in chrome

Hi,

I tested range.js ( http://jsbin.com/atocep/11 ) without success in chrome 12, also it supports range elements. In Opera it is fine, but there is a problem in chrome:)

Why start with a select and not a range, then degrade to a select?

This is a question, not an issue. I am curious why not degrade to a select from a range, instead of a select upgrading to a range? This way we can right the correct markup we intended.

TypeError Angular 6

Added this to the polyfills file in Angular,

got the error on load:

TypeError: right-hand side of 'in' should be an object, got undefined

publish on npm

Can you publish this on npm?