Remove use of jquery for DOM manipulation

yuvipanda · yuvipanda · commit 32e6aea13b67 · 2022-06-13T15:40:55.000+03:00
diff --git a/nbgitpuller/static/js/index.js b/nbgitpuller/static/js/index.js
@@ -24,9 +24,9 @@ GitSync.prototype.addHandler = function(event, cb) {
 
 GitSync.prototype._emit = function(event, data) {
     if (this.callbacks[event] == undefined) { return; }
-    $.each(this.callbacks[event], function(i, ev) {
+    for(let ev of this.callbacks[event]) {
         ev(data);
-    });
+    }
 };
 
 
@@ -68,56 +68,53 @@ function GitSyncView(termSelector, progressSelector, termToggleSelector) {
     this.term.loadAddon(this.fit);
 
     this.visible = false;
-    this.$progress = $(progressSelector);
+    this.progress = document.querySelector(progressSelector);
 
-    this.$termToggle = $(termToggleSelector);
-    this.termSelector = termSelector;
+    this.termToggle = document.querySelector(termToggleSelector);
+    this.termElement = document.querySelector(termSelector);
 
-    var that = this;
-    this.$termToggle.click(function() {
-        that.setTerminalVisibility(!that.visible);
-    });
+    this.termToggle.onclick = () => this.setTerminalVisibility(!this.visible)
 }
 
 GitSyncView.prototype.setTerminalVisibility = function(visible) {
     if (visible) {
-        $(this.termSelector).parent().removeClass('hidden');
+        this.termElement.parentElement.classList.remove('hidden');
     } else {
-        $(this.termSelector).parent().addClass('hidden');
+        this.termElement.parentElement.classList.add('hidden');
     }
     this.visible = visible;
     if (visible) {
         // See https://github.com/jupyterhub/nbgitpuller/pull/46 on why this is here.
         if (!this.term.element) {
-            this.term.open($(this.termSelector)[0]);
+            this.term.open(this.termElement);
         }
         this.fit.fit();
     }
 
 }
 
 GitSyncView.prototype.setProgressValue = function(val) {
-    this.$progress.attr('aria-valuenow', val);
-    this.$progress.css('width', val + '%');
+    this.progress.setAttribute('aria-valuenow', val);
+    $(this.progress).css('width', val + '%');
 };
 
 GitSyncView.prototype.getProgressValue = function() {
-    return parseFloat(this.$progress.attr('aria-valuenow'));
+    return parseFloat(this.progress.getAttribute('aria-valuenow'));
 };
 
 GitSyncView.prototype.setProgressText = function(text) {
-    this.$progress.children('span').text(text);
+    this.progress.querySelector('span').innerText = text;
 };
 
 GitSyncView.prototype.getProgressText = function() {
-    return this.$progress.children('span').text();
+    return this.progress.querySelector('span').innerText;
 };
 
 GitSyncView.prototype.setProgressError = function(isError) {
     if (isError) {
-        this.$progress.addClass('progress-bar-danger');
+        this.progress.classList.add('progress-bar-danger');
     } else {
-        this.$progress.removeClass('progress-bar-danger');
+        this.progress.classList.remove('progress-bar-danger');
     }
 };
 
@@ -127,14 +124,15 @@ var get_body_data = function(key) {
      * we should never have any encoded URLs anywhere else in code
      * until we are building an actual request
      */
-    var val = $('body').data(key);
-    if (typeof val === 'undefined')
-        return val;
+    if(!document.body.hasAttribute('data-' + key)) {
+        return undefined;
+    }
+    let val = document.body.getAttribute('data-' + key);
     return decodeURIComponent(val);
 };
 
 var gs = new GitSync(
-    get_body_data('baseUrl'),
+    get_body_data('base-url'),
     get_body_data('repo'),
     get_body_data('branch'),
     get_body_data('depth'),
@@ -169,8 +167,6 @@ gs.addHandler('error', function(data) {
 });
 gs.start();
 
-$('#header, #site').show();
-
 // Make sure we provide plenty of appearances of progress!
 var progressTimers = [];
 progressTimers.push(setInterval(function() {
diff --git a/nbgitpuller/templates/page.html b/nbgitpuller/templates/page.html
@@ -14,6 +14,13 @@
 
     {% block meta %}
     {% endblock meta %}
+
+    <style>
+      /* These are hidden by default in page.css for some reason */
+      #header, #site {
+        display: block;
+      }
+    </style>
 </head>
 
 <body class="{% block bodyclasses %}{% endblock %}" {% block params %} {% if logged_in and token %}
