Issue #654 : stop using jquery to create the FramesList markup

src/js/app.js

@@ -78,7 +78,7 @@
 
       this.framesListController = new pskl.controller.FramesListController(
         this.piskelController,
-        $('#preview-list'));
+        $('#preview-list-wrapper').get(0));
       this.framesListController.init();
 
       this.layersListController = new pskl.controller.LayersListController(this.piskelController);

src/js/controller/FramesListController.js

@@ -11,6 +11,7 @@
   ns.FramesListController = function (piskelController, container) {
     this.piskelController = piskelController;
     this.container = container;
+    this.previewList = container.querySelector('#preview-list');
     this.refreshZoom_();
 
     this.redrawFlag = true;
@@ -31,8 +32,9 @@
 
     $.subscribe(Events.PISKEL_RESET, this.refreshZoom_.bind(this));
 
-    $('#preview-list-scroller').scroll(this.updateScrollerOverflows.bind(this));
+    this.previewListScroller = document.querySelector('#preview-list-scroller');
-    this.container.get(0).addEventListener('click', this.onContainerClick_.bind(this));
+    this.previewListScroller.addEventListener('scroll', this.updateScrollerOverflows.bind(this));
+    this.container.addEventListener('click', this.onContainerClick_.bind(this));
     this.updateScrollerOverflows();
   };
 
@@ -64,11 +66,11 @@
   };
 
   ns.FramesListController.prototype.updateScrollerOverflows = function () {
-    var scroller = $('#preview-list-scroller');
+    var scroller = this.previewListScroller;
-    var scrollerHeight = scroller.height();
+    var scrollerHeight = scroller.offsetHeight;
-    var scrollTop = scroller.scrollTop();
+    var scrollTop = scroller.scrollTop;
-    var scrollerContentHeight = $('#preview-list').height();
+    var scrollerContentHeight = this.previewList.offsetHeight;
-    var treshold = $('.top-overflow').height();
+    var treshold = this.container.querySelector('.top-overflow').offsetHeight;
     var overflowTop = false;
     var overflowBottom = false;
 
@@ -81,9 +83,8 @@
         overflowBottom = true;
       }
     }
-    var wrapper = $('#preview-list-wrapper');
+    this.container.classList.toggle('top-overflow-visible', overflowTop);
-    wrapper.toggleClass('top-overflow-visible', overflowTop);
+    this.container.classList.toggle('bottom-overflow-visible', overflowBottom);
-    wrapper.toggleClass('bottom-overflow-visible', overflowBottom);
   };
 
   ns.FramesListController.prototype.onContainerClick_ = function (event) {
@@ -97,12 +98,12 @@
     if (action === ACTION.CLONE) {
       this.piskelController.duplicateFrameAt(index);
       var clonedTile = this.createPreviewTile_(index + 1);
-      this.container.get(0).insertBefore(clonedTile, this.tiles[index].nextSibling);
+      this.previewList.insertBefore(clonedTile, this.tiles[index].nextSibling);
       this.tiles.splice(index, 0, clonedTile);
       this.updateScrollerOverflows();
     } else if (action === ACTION.DELETE) {
       this.piskelController.removeFrameAt(index);
-      this.container.get(0).removeChild(this.tiles[index]);
+      this.previewList.removeChild(this.tiles[index]);
       this.tiles.splice(index, 1);
       this.updateScrollerOverflows();
     } else if (action === ACTION.SELECT && !this.justDropped) {
@@ -111,7 +112,7 @@
       this.piskelController.addFrame();
       var newtile = this.createPreviewTile_(this.tiles.length);
       this.tiles.push(newtile);
-      this.container.get(0).insertBefore(newtile, this.addFrameTile);
+      this.previewList.insertBefore(newtile, this.addFrameTile);
       this.updateScrollerOverflows();
     }
 
@@ -147,7 +148,7 @@
     }
 
     // Hide/Show buttons if needed
-    var buttons = this.container.get(0).querySelectorAll('.delete-frame-action, .dnd-action');
+    var buttons = this.container.querySelectorAll('.delete-frame-action, .dnd-action');
     var display = (this.piskelController.getFrameCount() > 1) ? 'block' : 'none';
     for (i = 0, length = buttons.length; i < length; i++) {
       buttons[i].style.display = display;
@@ -158,7 +159,8 @@
   };
 
   ns.FramesListController.prototype.createPreviews_ = function () {
-    this.container.html('');
+    this.previewList.innerHTML = '';
+
     // Manually remove tooltips since mouseout events were shortcut by the DOM refresh:
     $('.tooltip').remove();
 
@@ -166,7 +168,7 @@
 
     for (var i = 0 ; i < frameCount ; i++) {
       var tile = this.createPreviewTile_(i);
-      this.container.append(tile);
+      this.previewList.appendChild(tile);
       this.tiles[i] = tile;
     }
     // Append 'new empty frame' button
@@ -176,7 +178,7 @@
     newFrameButton.setAttribute('data-tile-action', ACTION.NEW_FRAME);
     newFrameButton.innerHTML = '<div class="add-frame-action-icon icon-frame-plus-white">' +
       '</div><div class="label">Add new frame</div>';
-    this.container.append(newFrameButton);
+    this.previewList.appendChild(newFrameButton);
     this.addFrameTile = newFrameButton;
 
     this.updateScrollerOverflows();
@@ -186,8 +188,7 @@
    * @private
    */
   ns.FramesListController.prototype.initDragndropBehavior_ = function () {
-
+    $(this.previewList).sortable({
-    $('#preview-list').sortable({
       placeholder: 'preview-tile preview-tile-drop-proxy',
       update: $.proxy(this.onUpdate_, this),
       stop: $.proxy(this.onSortableStop_, this),
@@ -195,7 +196,7 @@
       axis: 'y',
       tolerance: 'pointer'
     });
-    $('#preview-list').disableSelection();
+    $(this.previewList).disableSelection();
   };
 
   /**