mirror of https://github.com/piskelapp/piskel.git
Issue #654 : stop using jquery to create the FramesList markup
This commit is contained in:
juliandescottes
parent
89199f2d6a
commit
a8c85b8a29
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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.container.get(0).addEventListener('click', this.onContainerClick_.bind(this));
|
||||
this.previewListScroller = document.querySelector('#preview-list-scroller');
|
||||
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 scrollerHeight = scroller.height();
|
||||
var scrollTop = scroller.scrollTop();
|
||||
var scrollerContentHeight = $('#preview-list').height();
|
||||
var treshold = $('.top-overflow').height();
|
||||
var scroller = this.previewListScroller;
|
||||
var scrollerHeight = scroller.offsetHeight;
|
||||
var scrollTop = scroller.scrollTop;
|
||||
var scrollerContentHeight = this.previewList.offsetHeight;
|
||||
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');
|
||||
wrapper.toggleClass('top-overflow-visible', overflowTop);
|
||||
wrapper.toggleClass('bottom-overflow-visible', overflowBottom);
|
||||
this.container.classList.toggle('top-overflow-visible', overflowTop);
|
||||
this.container.classList.toggle('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 () {
|
||||
|
||||
$('#preview-list').sortable({
|
||||
$(this.previewList).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();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue