Use dataset rather than jquery data function

Start decoupling from jquery
sul-dlss · Oct 24, 2023 · 15df46d · 15df46d
1 parent 15c480f
commit 15df46d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 34 deletions.
diff --git a/app/javascript/src/modules/css_injection.js b/app/javascript/src/modules/css_injection.js
@@ -1,12 +1,12 @@
 // Module injects css into head of embeded page
 
 (function( global ) {
-  var Module = (function() {
+  const Module = (function() {
 
-    var linkHtml = '<link rel="stylesheet" href="{{stylesheetLink}}" type="text/css" />',
-        themeUrl = $("[data-sul-embed-theme]").data("sul-embed-theme"),
-        iconsUrl = $('[data-sul-icons]').data('sul-icons'),
-        pluginStylesheets = $('[data-plugin-styles]').data('plugin-styles') || '';
+    const linkHtml = '<link rel="stylesheet" href="{{stylesheetLink}}" type="text/css" />',
+        themeUrl = document.querySelector("[data-sul-embed-theme]").dataset.sulEmbedTheme,
+        iconsNode = document.querySelector('[data-sul-icons]'),
+        pluginStylesheets = document.querySelector('[data-plugin-styles]')?.dataset?.pluginStyles || '';
 
     return {
       appendToHead: function() {
@@ -17,8 +17,9 @@
       },
 
       injectFontIcons: function() {
-        if ( iconsUrl ) {
-          var htmlSnippet = linkHtml.replace('{{stylesheetLink}}', iconsUrl);
+        if ( iconsNode ) {
+          const iconsUrl = iconsNode.dataset.sulIcons
+          const htmlSnippet = linkHtml.replace('{{stylesheetLink}}', iconsUrl);
           $('head').append(htmlSnippet);
         }
       },

diff --git a/app/javascript/src/modules/embed_this.js b/app/javascript/src/modules/embed_this.js
@@ -15,21 +15,22 @@
         var _this    = this,
             textarea = $('textarea', formContainer);
         $('input[type="checkbox"], input[type="text"]', formContainer).on('change', function(){
-          var checked   = $(this).is(':checked'),
+          const checked   = $(this).is(':checked'),
               inputType = $(this).attr('type'),
               src       = textarea.text().match(/src="(\S+)"/)[1],
-              urlAttr   = '&' + $(this).data('embed-attr') + '=true';
+              urlAttr   = `&${this.dataset.embedAttr}=true`
           if(inputType === 'checkbox'){
             if(checked) {
               textarea.text(textarea.text().replace(urlAttr, ''));
             }else{
               textarea.text(textarea.text().replace(src, src + urlAttr));
             }
           }else{
-            if(oldParam = textarea.text().match('&' + $(this).data('embed-attr') + "=\\w+")) {
-              textarea.text(textarea.text().replace(oldParam, '&' + $(this).data('embed-attr') + '=' + $(this).val()));
+            const value = $(this).val()
+            if(oldParam = textarea.text().match(`&${this.dataset.embedAttr}=\\w+`)) {
+              textarea.text(textarea.text().replace(oldParam, `&${this.dataset.embedAttr}=${value}`));
             }else{
-              textarea.text(textarea.text().replace(src, src + '&' + $(this).data('embed-attr') + '=' + $(this).val()));
+              textarea.text(textarea.text().replace(src, `${src}&${this.dataset.embedAttr}=${value}`));
             }
           }
         });

diff --git a/app/javascript/src/modules/geo_viewer.js b/app/javascript/src/modules/geo_viewer.js
@@ -1,20 +1,28 @@
 (function( global ) {
   'use strict';
-  var Module = (function() {
-    var dataAttributes;
-    var map;
-    var $el;
+  const Module = (function() {
+    let dataAttributes;
+    let map;
+    let $el;
 
     var isDefined = function(object) {
        return typeof object !== 'undefined';
     };
 
     return {
       init: function(options) {
-        $el = jQuery('#sul-embed-geo-map');
-        dataAttributes = $el.data();
+        const el = document.getElementById('sul-embed-geo-map')
 
-        map = L.map('sul-embed-geo-map', options).fitBounds(dataAttributes.boundingBox);
+        dataAttributes = el.dataset;
+        // dataAttributes looks like this:
+        // {
+        //   "boundingBox": "[[\"-1.478794\", \"29.572742\"], [\"4.234077\", \"35.000308\"]]",
+        //   "wmsUrl": "https://geowebservices.stanford.edu/geoserver/wms/",
+        //   "layers": "druid:cz128vq0535"
+        // }
+        $el = jQuery(el);
+
+        map = L.map('sul-embed-geo-map', options).fitBounds(JSON.parse(dataAttributes.boundingBox));
 
         L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
           maxZoom: 19,

diff --git a/app/javascript/src/modules/m3_viewer.js b/app/javascript/src/modules/m3_viewer.js
@@ -14,11 +14,11 @@ import cdlAuthPlugin from '../plugins/cdlAuthPlugin';
 
 export default {
   init: function() {
-    var $el = jQuery('#sul-embed-m3');
-    var data = $el.data();
+    const el = document.getElementById('sul-embed-m3');
+    const data = el.dataset;
 
     // Determine which panel should be open
-    var sideBarPanel = 'info';
+    let sideBarPanel = 'info';
     if (data.search) {
       sideBarPanel = 'search';
     }

diff --git a/app/javascript/src/modules/media_viewer.js b/app/javascript/src/modules/media_viewer.js
@@ -56,33 +56,32 @@ export default (function() {
           cssClass = 'sul-i-file-video-3';
         }
 
-        var activeClass = '';
+        let activeClass = '';
         if (index === 0) {
           activeClass = 'active';
         }
 
-        var thumbClass = 'sul-embed-slider-thumb sul-embed-media-slider-thumb ';
-        var labelClass = 'sul-embed-thumb-label';
+        const thumbClass = 'sul-embed-slider-thumb sul-embed-media-slider-thumb ';
+        let labelClass = 'sul-embed-thumb-label';
         const isStanfordRestricted = mediaDiv.dataset.stanfordOnly === "true"
         if (isStanfordRestricted) {
           labelClass += ' sul-embed-thumb-stanford-only';
         }
 
-        var thumbnailIcon = '';
+        let thumbnailIcon = '';
         const thumbnailUrl = mediaDiv.dataset.thumbnailUrl
         if (thumbnailUrl !== '') {
-          thumbnailIcon = '<img class="sul-embed-media-square-icon" src="' + thumbnailUrl + '" />';
+          thumbnailIcon = `<img class="sul-embed-media-square-icon" src="${thumbnailUrl}" />`
         } else {
-          thumbnailIcon = '<i class="' + cssClass + '"></i>';
+          thumbnailIcon = `<i class="${cssClass}"></i>`
         }
 
         const isLocationRestricted = mediaDiv.dataset.locationRestricted === "true"
         const fileLabel = String(mediaDiv.dataset.fileLabel || '');
         const duration = String(mediaDiv.dataset.duration || '');
         thumbs.push(
-          '<li class="' + thumbClass + activeClass + '">' +
-            thumbnailIcon +
-            '<a class="' + labelClass + '" href="#">' +
+          `<li class="${thumbClass}${activeClass}">${thumbnailIcon}` +
+            `<a class="${labelClass}" href="#">` +
               stanfordOnlyScreenreaderText(isStanfordRestricted) +
               restrictedTextMarkup(isLocationRestricted) +
               truncateWithEllipsis(fileLabel, maxFileLabelLength(isLocationRestricted)) +
@@ -168,12 +167,12 @@ export default (function() {
         }
 
         if(data.status === 'success') {
-          updateMediaSrcWithToken(mediaObject, data.token);
-          initializeVideoJSPlayer(mediaObject);
+          updateMediaSrcWithToken($mediaObject, data.token);
+          initializeVideoJSPlayer($mediaObject);
         }
 
         if(typeof(completeCallback) === 'function') {
-          completeCallback(mediaObject, data);
+          completeCallback($mediaObject, data);
         }
       });
     }