Remove $ from progress.js

src/ui/progress.js

@@ -1,4 +1,3 @@
-import $ from 'jquery'
 import { canvas } from '../utils/abilities'
 import { tpl } from '../templates'
 
@@ -19,11 +18,11 @@ class Circle {
     selectorFn =
       selector != null
         ? function(info) {
-            return info[selector]
-          }
+          return info[selector]
+        }
         : function(x) {
-            return x
-          }
+          return x
+        }
     this.observed = file
     if (this.observed.state() === 'resolved') {
       this.renderer.setValue(1, true)
@@ -56,9 +55,8 @@ class Circle {
 
 class BaseRenderer {
   constructor(el) {
-    this.element = $(el)
-    this.element.data('uploadcare-progress-renderer', this)
-    this.element.addClass('uploadcare--progress')
+    this.element = el
+    this.element.classList.add('uploadcare--progress')
   }
 
   update() {}
@@ -67,31 +65,36 @@ class BaseRenderer {
 class TextRenderer extends BaseRenderer {
   constructor() {
     super(...arguments)
-    this.element.addClass('uploadcare--progress_type_text')
-    this.element.html(tpl('progress__text'))
-    this.text = this.element.find('.uploadcare--progress__text')
+    this.element.classList.add('uploadcare--progress_type_text')
+    this.element.innerHTML = tpl('progress__text')
+    this.text = this.element.querySelector('.uploadcare--progress__text')
   }
 
   setValue(val) {
     val = Math.round(val * 100)
-    return this.text.html(`${val} %`)
+    return (this.text.innerHTML = `${val} %`)
   }
 }
 
 class CanvasRenderer extends BaseRenderer {
   constructor() {
     super(...arguments)
-    this.canvasEl = $('<canvas>')
-      .addClass('uploadcare--progress__canvas')
-      .get(0)
-    this.element.addClass('uploadcare--progress_type_canvas')
-    this.element.html(this.canvasEl)
+    this.canvasEl = document
+      .createElement('canvas')
+    this.canvasEl.className = 'uploadcare--progress__canvas'
+    this.element.classList.add('uploadcare--progress_type_canvas')
+    this.element.appendChild(this.canvasEl)
     this.setValue(0, true)
   }
 
   update() {
     var arc, ctx, half, size
-    half = Math.floor(Math.min(this.element.width(), this.element.height()))
+    const getWidth = element =>
+      parseFloat(window.getComputedStyle(element, null).width.replace('px', ''))
+    const getHeight = element => element.offsetHeight
+
+    half = Math.floor(Math.min(getWidth(this.element), getHeight(this.element)))
+
     size = half * 2
     if (half) {
       if (this.canvasEl.width !== size || this.canvasEl.height !== size) {
@@ -111,10 +114,10 @@ class CanvasRenderer extends BaseRenderer {
       ctx.clearRect(0, 0, size, size)
       // Background circle
       ctx.globalCompositeOperation = 'source-over'
-      ctx.fillStyle = this.element.css('border-left-color')
+      ctx.fillStyle = window.getComputedStyle(this.element)['border-left-color']
       arc(half - 0.5, 1)
       // Progress circle
-      ctx.fillStyle = this.element.css('color')
+      ctx.fillStyle = window.getComputedStyle(this.element).color
       arc(half, this.val)
       // Make a hole
       ctx.globalCompositeOperation = 'destination-out'
@@ -150,7 +153,7 @@ class CanvasRenderer extends BaseRenderer {
 
   __setValue(val) {
     this.val = val
-    this.element.attr('aria-valuenow', (val * 100).toFixed(0))
+    this.element.setAttribute('aria-valuenow', (val * 100).toFixed(0))
     return this.update()
   }
 

src/widget/template.js

@@ -13,7 +13,7 @@ class Template {
     this.circle = new Circle(
       this.content
         .find('.uploadcare--widget__progress')
-        .removeClass('uploadcare--widget__progress')
+        .removeClass('uploadcare--widget__progress')[0]
     )
     this.content
       .find('.uploadcare--progress')