Commit 18de7eb8 authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'remove-jquery-ui-draggable' into 'master'

Removed jQuery UI draggable

See merge request !8582
parents 34685c58 288064c5
Pipeline #6714820 failed with stages
in 98 minutes and 57 seconds
...@@ -7,8 +7,6 @@ ...@@ -7,8 +7,6 @@
/* global Aside */ /* global Aside */
window.$ = window.jQuery = require('jquery'); window.$ = window.jQuery = require('jquery');
require('jquery-ui/ui/draggable');
require('jquery-ui/ui/sortable');
require('jquery-ujs'); require('jquery-ujs');
require('vendor/jquery.endless-scroll'); require('vendor/jquery.endless-scroll');
require('vendor/jquery.highlight'); require('vendor/jquery.highlight');
......
...@@ -52,6 +52,30 @@ ...@@ -52,6 +52,30 @@
return this.views[viewMode].call(this); return this.views[viewMode].call(this);
}; };
ImageFile.prototype.initDraggable = function($el, padding, callback) {
var dragging = false;
var $body = $('body');
var $offsetEl = $el.parent();
$el.off('mousedown').on('mousedown', function() {
dragging = true;
$body.css('user-select', 'none');
});
$body.off('mouseup').off('mousemove').on('mouseup', function() {
dragging = false;
$body.css('user-select', '');
})
.on('mousemove', function(e) {
var left;
if (!dragging) return;
left = e.pageX - ($offsetEl.offset().left + padding);
callback(e, left);
});
};
prepareFrames = function(view) { prepareFrames = function(view) {
var maxHeight, maxWidth; var maxHeight, maxWidth;
maxWidth = 0; maxWidth = 0;
...@@ -96,26 +120,30 @@ ...@@ -96,26 +120,30 @@
maxHeight = 0; maxHeight = 0;
return $('.swipe.view', this.file).each((function(_this) { return $('.swipe.view', this.file).each((function(_this) {
return function(index, view) { return function(index, view) {
var ref; var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
ref = prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1]; ref = prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
$('.swipe-frame', view).css({ $swipeFrame = $('.swipe-frame', view);
$swipeWrap = $('.swipe-wrap', view);
$swipeBar = $('.swipe-bar', view);
$swipeFrame.css({
width: maxWidth + 16, width: maxWidth + 16,
height: maxHeight + 28 height: maxHeight + 28
}); });
$('.swipe-wrap', view).css({ $swipeWrap.css({
width: maxWidth + 1, width: maxWidth + 1,
height: maxHeight + 2 height: maxHeight + 2
}); });
return $('.swipe-bar', view).css({ $swipeBar.css({
left: 0 left: 0
}).draggable({ });
axis: 'x',
containment: 'parent', wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
drag: function(event) {
return $('.swipe-wrap', view).width((maxWidth + 1) - $(this).position().left); _this.initDraggable($swipeBar, wrapPadding, function(e, left) {
}, if (left > 0 && left < $swipeFrame.width() - (wrapPadding * 2)) {
stop: function(event) { $swipeWrap.width((maxWidth + 1) - left);
return $('.swipe-wrap', view).width((maxWidth + 1) - $(this).position().left); $swipeBar.css('left', left);
} }
}); });
}; };
...@@ -128,9 +156,14 @@ ...@@ -128,9 +156,14 @@
dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width(); dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
return $('.onion-skin.view', this.file).each((function(_this) { return $('.onion-skin.view', this.file).each((function(_this) {
return function(index, view) { return function(index, view) {
var ref; var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false;
ref = prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1]; ref = prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
$('.onion-skin-frame', view).css({ $frame = $('.onion-skin-frame', view);
$frameAdded = $('.frame.added', view);
$track = $('.drag-track', view);
$dragger = $('.dragger', $track);
$frame.css({
width: maxWidth + 16, width: maxWidth + 16,
height: maxHeight + 28 height: maxHeight + 28
}); });
...@@ -138,16 +171,18 @@ ...@@ -138,16 +171,18 @@
width: maxWidth + 1, width: maxWidth + 1,
height: maxHeight + 2 height: maxHeight + 2
}); });
return $('.dragger', view).css({ $dragger.css({
left: dragTrackWidth left: dragTrackWidth
}).draggable({ });
axis: 'x',
containment: 'parent', framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
drag: function(event) {
return $('.frame.added', view).css('opacity', $(this).position().left / dragTrackWidth); _this.initDraggable($dragger, framePadding, function(e, left) {
}, var opacity = left / dragTrackWidth;
stop: function(event) {
return $('.frame.added', view).css('opacity', $(this).position().left / dragTrackWidth); if (opacity >= 0 && opacity <= 1) {
$dragger.css('left', left);
$frameAdded.css('opacity', opacity);
} }
}); });
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment