ES6 Symbol breaks < IE Edge

[4rn0]

Hi Stephen,

great work on this project. I just noticed the usage of ES6 Symbols in the source: https://github.com/stephband/jquery.event.move/blob/master/js/jquery.event.move.js#L83

As you might know no IE version except Edge supports this. Any chance on some more IE support or should I just use an ES6-shim?

Cheers!
Arno

[stephband]

Oh yeah. I polyfill Symbol, normally, but you're right, I probably shouldn't assume it's existence here.

This code replaces symbols with strings (via .toString when setting the symbol property). It's not a polyfill, but it will get things working in IE:

if (!window.Symbol) {
    (function(window){
        "use strict";

        var defineProperty = Object.defineProperty;
        var prefix = '__symbol-' + Math.ceil(Math.random() * 1000000000) + '-';
        var id = 0;

        function Symbol(description) {
            if (!(this instanceof Symbol)) { return new Symbol(description); }
            var symbol = prefix + id++;
            this._symbol = symbol;
        }

        defineProperty(Symbol.prototype, 'toString', {
            enumerable: false,
            configurable: false,
            writable: false,
            value: function toString() {
                return this._symbol;
            }
        });

        window.Symbol = Symbol;
    }(this));
}

[4rn0]

Works like a charm! Thanks!

[szamanr]

@stephband i'm still getting this problem and my app is not running on IE11. could you release a solution as a commit?

i am using jquery.event.move 2.0.0 and jquery 3.3.1.

[andreszs]

Oh yeah. I polyfill Symbol, normally, but you're right, I probably shouldn't assume it's existence here.

This code replaces symbols with strings (via .toString when setting the symbol property). It's not a polyfill, but it will get things working in IE:

if (!window.Symbol) {
    (function(window){
        "use strict";

        var defineProperty = Object.defineProperty;
        var prefix = '__symbol-' + Math.ceil(Math.random() * 1000000000) + '-';
        var id = 0;

        function Symbol(description) {
            if (!(this instanceof Symbol)) { return new Symbol(description); }
            var symbol = prefix + id++;
            this._symbol = symbol;
        }

        defineProperty(Symbol.prototype, 'toString', {
            enumerable: false,
            configurable: false,
            writable: false,
            value: function toString() {
                return this._symbol;
            }
        });

        window.Symbol = Symbol;
    }(this));
}

Adding this effectively disables vertical scroll in both Internet Explorer 11 Mobile and Edge Mobile (that is, the complete Windows Phone and Windows Mobile device family).

I'll never understand that obsession with the implementation of ES 2015 (and newer) functions with the only goal of rendering scripts unusable in older browsers. Please remember that not everyone can acquire a 1300 USD iPhone device to use the methods from ECMA Script 2020... it's the other way around: scripts must work in older devices whenever possible. Do not take this as a personal attack to the plugin developers, this is just a suggestion.

[Nukro]

Oh yeah. I polyfill Symbol, normally, but you're right, I probably shouldn't assume it's existence here.

This code replaces symbols with strings (via .toString when setting the symbol property). It's not a polyfill, but it will get things working in IE:

if (!window.Symbol) {
    (function(window){
        "use strict";

        var defineProperty = Object.defineProperty;
        var prefix = '__symbol-' + Math.ceil(Math.random() * 1000000000) + '-';
        var id = 0;

        function Symbol(description) {
            if (!(this instanceof Symbol)) { return new Symbol(description); }
            var symbol = prefix + id++;
            this._symbol = symbol;
        }

        defineProperty(Symbol.prototype, 'toString', {
            enumerable: false,
            configurable: false,
            writable: false,
            value: function toString() {
                return this._symbol;
            }
        });

        window.Symbol = Symbol;
    }(this));
}

Where to place that code?