diff -r 02c04d2c8fd8 -r ac1eacb3aa33 src/widgets/Social.js
--- a/src/widgets/Social.js	Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Social.js	Wed Sep 04 17:32:50 2024 +0200
@@ -1,80 +1,106 @@
 // TODO: Open share links in a small window
+import _ from "lodash";
+import jQuery from "jquery";
+
+import socialStyles from "./Social.module.css";
 
-IriSP.Widgets.Social = function(player, config) {
-    IriSP.Widgets.Widget.call(this, player, config);
-};
-
-IriSP.Widgets.Social.prototype = new IriSP.Widgets.Widget();
+const Social = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
+    }
 
-IriSP.Widgets.Social.prototype.defaults = {
-    text: "",
-    url: "",
-    show_url: true,
-    show_twitter: true,
-    show_fb: true,
-    show_gplus: true,
-    show_mail: true
-};
+    static defaults = {
+      text: "",
+      url: "",
+      show_url: true,
+      show_twitter: true,
+      show_fb: true,
+      show_gplus: true,
+      show_mail: true,
+    };
 
-IriSP.Widgets.Social.prototype.template =
-    '<span class="Ldt-Social">{{#show_url}}<div class="Ldt-Social-Url-Container"><a href="#" draggable="true" target="_blank" class="Ldt-Social-Square Ldt-Social-Url Ldt-TraceMe" title="{{l10n.share_link}}">'
-    + '</a><div class="Ldt-Social-UrlPop"><input class="Ldt-Social-Input"/></div></div>{{/show_url}}'
-    + '{{#show_fb}}<a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Facebook"></a>{{/show_fb}}'
-    + '{{#show_twitter}}<a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Twitter"></a>{{/show_twitter}}'
-    + '{{#show_gplus}}<a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Google+"></a>{{/show_gplus}}'
-    + '{{#show_mail}}<a href="#" target="_blank" class="Ldt-Social-Mail Ldt-TraceMe" title="{{l10n.share_mail}}"></a>{{/show_mail}}</span>';
+    static template =
+      '<span class="Ldt-Social">{{#show_url}}<div class="Ldt-Social-Url-Container"><a href="#" draggable="true" target="_blank" class="Ldt-Social-Square Ldt-Social-Url Ldt-TraceMe" title="{{l10n.share_link}}">' +
+      '</a><div class="Ldt-Social-UrlPop"><input class="Ldt-Social-Input"/></div></div>{{/show_url}}' +
+      '{{#show_fb}}<a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Facebook"></a>{{/show_fb}}' +
+      '{{#show_twitter}}<a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Twitter"></a>{{/show_twitter}}' +
+      '{{#show_gplus}}<a href="#" target="_blank" class="Ldt-Social-Gplus Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Google+"></a>{{/show_gplus}}' +
+      '{{#show_mail}}<a href="#" target="_blank" class="Ldt-Social-Mail Ldt-TraceMe" title="{{l10n.share_mail}}"></a>{{/show_mail}}</span>';
 
-IriSP.Widgets.Social.prototype.messages = {
-    "fr": {
+    static messages =  {
+      fr: {
         share_on: "Partager sur",
         share_mail: "Envoyer par courriel",
         share_link: "Partager le lien hypertexte",
-        copy: "Copier"
-    },
-    "en" : {
+        copy: "Copier",
+      },
+      en: {
         share_on: "Share on",
         share_mail: "Share by e-mail",
         share_link: "Share hypertext link",
-        copy: "Copy"
+        copy: "Copy",
+      },
+    };
+
+    draw() {
+      this.renderTemplate();
+      this.clipId = _.uniqueId("Ldt-Social-CopyBtn-");
+      this.$.find(".Ldt-Social-CopyBtn").attr("id", this.clipId);
+      var _this = this;
+      this.$.find(".Ldt-Social-Url")
+        .click(function () {
+          _this.toggleCopy();
+          return false;
+        })
+        .on("dragstart", function (e) {
+          e.originalEvent.dataTransfer.setData("text/x-iri-title", _this.text);
+          e.originalEvent.dataTransfer.setData("text/x-iri-uri", _this.url);
+        });
+      this.$.find(".Ldt-Social-Input").focus(function () {
+        this.select();
+      });
+      this.$.find(".Ldt-Social-Ext").click(function () {
+        window.open(
+          jQuery(this).attr("href"),
+          "_blank",
+          "height=300,width=450,left=100,top=100,toolbar=0,menubar=0,status=0,location=0"
+        );
+        return false;
+      });
+      this.updateUrls(this.url, this.text);
     }
+
+    toggleCopy() {
+      var _pop = this.$.find(".Ldt-Social-UrlPop");
+      _pop.toggle();
+      this.$.find(".Ldt-Social-Input").val(this.url).focus();
+    }
+
+    updateUrls(_url, _text) {
+      this.url = _url;
+      this.text = _text;
+      this.$.find(".Ldt-Social-Fb").attr(
+        "href",
+        "http://www.facebook.com/share.php?" +
+          jQuery.param({ u: _url, t: _text })
+      );
+      this.$.find(".Ldt-Social-Twitter").attr(
+        "href",
+        "https://twitter.com/intent/tweet?" +
+          jQuery.param({ url: _url, text: _text })
+      );
+      this.$.find(".Ldt-Social-Gplus").attr(
+        "href",
+        "https://plus.google.com/share?" +
+          jQuery.param({ url: _url, title: _text })
+      );
+      this.$.find(".Ldt-Social-Mail").attr(
+        "href",
+        "mailto:?" + jQuery.param({ subject: _text, body: _text + ": " + _url })
+      );
+    }
+  };
 };
 
-IriSP.Widgets.Social.prototype.draw = function() {
-    this.renderTemplate();
-    this.clipId = IriSP._.uniqueId("Ldt-Social-CopyBtn-");
-    this.$.find(".Ldt-Social-CopyBtn").attr("id", this.clipId);
-    var _this = this;
-    this.$.find(".Ldt-Social-Url").click(function() {
-        _this.toggleCopy();
-        return false;
-    }).on("dragstart", function(e) {
-    	e.originalEvent.dataTransfer.setData("text/x-iri-title",_this.text);
-    	e.originalEvent.dataTransfer.setData("text/x-iri-uri",_this.url);
-    });
-    this.$.find(".Ldt-Social-Input").focus(function() {
-        this.select();
-    });
-    this.$.find(".Ldt-Social-Ext").click(function() {
-        window.open(
-            IriSP.jQuery(this).attr("href"),
-            "_blank",
-            "height=300,width=450,left=100,top=100,toolbar=0,menubar=0,status=0,location=0");
-        return false;
-    });
-    this.updateUrls(this.url, this.text);
-};
-
-IriSP.Widgets.Social.prototype.toggleCopy = function() {
-    var _pop = this.$.find(".Ldt-Social-UrlPop");
-    _pop.toggle();
-    this.$.find(".Ldt-Social-Input").val(this.url).focus();
-};
-
-IriSP.Widgets.Social.prototype.updateUrls = function(_url, _text) {
-    this.url = _url;
-    this.text = _text;
-    this.$.find(".Ldt-Social-Fb").attr("href", "http://www.facebook.com/share.php?" + IriSP.jQuery.param({ u: _url, t: _text }));
-    this.$.find(".Ldt-Social-Twitter").attr("href", "https://twitter.com/intent/tweet?" + IriSP.jQuery.param({ url: _url, text: _text }));
-    this.$.find(".Ldt-Social-Gplus").attr("href", "https://plus.google.com/share?" + IriSP.jQuery.param({ url: _url, title: _text }));
-    this.$.find(".Ldt-Social-Mail").attr("href", "mailto:?" + IriSP.jQuery.param({ subject: _text, body: _text + ": " + _url }));
-};
+export { Social, socialStyles };