|
|
/* eslint-disable func-names, no-var, no-else-return, consistent-return, one-var, no-return-assign */
|
|
/* eslint-disable func-names, no-else-return, consistent-return, one-var, no-return-assign */
|
|
|
|
|
|
|
|
import $ from 'jquery';
|
|
import $ from 'jquery';
|
|
|
|
|
|
| ... | @@ -51,7 +51,7 @@ export default class ImageFile { |
... | @@ -51,7 +51,7 @@ export default class ImageFile { |
|
|
}
|
|
}
|
|
|
// eslint-disable-next-line class-methods-use-this
|
|
// eslint-disable-next-line class-methods-use-this
|
|
|
initDraggable($el, padding, callback) {
|
|
initDraggable($el, padding, callback) {
|
|
|
var dragging = false;
|
|
let dragging = false;
|
|
|
const $body = $('body');
|
|
const $body = $('body');
|
|
|
const $offsetEl = $el.parent();
|
|
const $offsetEl = $el.parent();
|
|
|
const dragStart = function() {
|
|
const dragStart = function() {
|
| ... | @@ -88,14 +88,12 @@ export default class ImageFile { |
... | @@ -88,14 +88,12 @@ export default class ImageFile { |
|
|
}
|
|
}
|
|
|
|
|
|
|
|
static prepareFrames(view) {
|
|
static prepareFrames(view) {
|
|
|
var maxHeight, maxWidth;
|
|
let maxWidth = 0;
|
|
|
maxWidth = 0;
|
|
let maxHeight = 0;
|
|
|
maxHeight = 0;
|
|
|
|
|
$('.frame', view)
|
|
$('.frame', view)
|
|
|
.each((index, frame) => {
|
|
.each((index, frame) => {
|
|
|
var height, width;
|
|
const width = $(frame).width();
|
|
|
width = $(frame).width();
|
|
const height = $(frame).height();
|
|
|
height = $(frame).height();
|
|
|
|
|
maxWidth = width > maxWidth ? width : maxWidth;
|
|
maxWidth = width > maxWidth ? width : maxWidth;
|
|
|
return (maxHeight = height > maxHeight ? height : maxHeight);
|
|
return (maxHeight = height > maxHeight ? height : maxHeight);
|
|
|
})
|
|
})
|
| ... | @@ -110,8 +108,7 @@ export default class ImageFile { |
... | @@ -110,8 +108,7 @@ export default class ImageFile { |
|
|
'two-up': function() {
|
|
'two-up': function() {
|
|
|
return $('.two-up.view .wrap', this.file).each((index, wrap) => {
|
|
return $('.two-up.view .wrap', this.file).each((index, wrap) => {
|
|
|
$('img', wrap).each(function() {
|
|
$('img', wrap).each(function() {
|
|
|
var currentWidth;
|
|
const currentWidth = $(this).width();
|
|
|
currentWidth = $(this).width();
|
|
|
|
|
if (currentWidth > availWidth / 2) {
|
|
if (currentWidth > availWidth / 2) {
|
|
|
return $(this).width(availWidth / 2);
|
|
return $(this).width(availWidth / 2);
|
|
|
}
|
|
}
|
| ... | @@ -124,16 +121,14 @@ export default class ImageFile { |
... | @@ -124,16 +121,14 @@ export default class ImageFile { |
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
swipe() {
|
|
swipe() {
|
|
|
var maxHeight, maxWidth;
|
|
let maxWidth = 0;
|
|
|
maxWidth = 0;
|
|
let maxHeight = 0;
|
|
|
maxHeight = 0;
|
|
|
|
|
return $('.swipe.view', this.file).each((index, view) => {
|
|
return $('.swipe.view', this.file).each((index, view) => {
|
|
|
var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding;
|
|
|
|
|
const ref = ImageFile.prepareFrames(view);
|
|
const ref = ImageFile.prepareFrames(view);
|
|
|
[maxWidth, maxHeight] = ref;
|
|
[maxWidth, maxHeight] = ref;
|
|
|
$swipeFrame = $('.swipe-frame', view);
|
|
const $swipeFrame = $('.swipe-frame', view);
|
|
|
$swipeWrap = $('.swipe-wrap', view);
|
|
const $swipeWrap = $('.swipe-wrap', view);
|
|
|
$swipeBar = $('.swipe-bar', view);
|
|
const $swipeBar = $('.swipe-bar', view);
|
|
|
|
|
|
|
|
$swipeFrame.css({
|
|
$swipeFrame.css({
|
|
|
width: maxWidth + 16,
|
|
width: maxWidth + 16,
|
| ... | @@ -148,7 +143,7 @@ export default class ImageFile { |
... | @@ -148,7 +143,7 @@ export default class ImageFile { |
|
|
left: 1,
|
|
left: 1,
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
|
|
const wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
|
|
|
|
|
|
|
|
this.initDraggable($swipeBar, wrapPadding, (e, left) => {
|
|
this.initDraggable($swipeBar, wrapPadding, (e, left) => {
|
|
|
if (left > 0 && left < $swipeFrame.width() - wrapPadding * 2) {
|
|
if (left > 0 && left < $swipeFrame.width() - wrapPadding * 2) {
|
| ... | @@ -159,19 +154,17 @@ export default class ImageFile { |
... | @@ -159,19 +154,17 @@ export default class ImageFile { |
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
'onion-skin': function() {
|
|
'onion-skin': function() {
|
|
|
var dragTrackWidth, maxHeight, maxWidth;
|
|
let maxHeight, maxWidth;
|
|
|
maxWidth = 0;
|
|
maxWidth = 0;
|
|
|
maxHeight = 0;
|
|
maxHeight = 0;
|
|
|
dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
|
|
const dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
|
|
|
return $('.onion-skin.view', this.file).each((index, view) => {
|
|
return $('.onion-skin.view', this.file).each((index, view) => {
|
|
|
var $frame, $track, $dragger, $frameAdded, framePadding;
|
|
|
|
|
|
|
|
|
|
const ref = ImageFile.prepareFrames(view);
|
|
const ref = ImageFile.prepareFrames(view);
|
|
|
[maxWidth, maxHeight] = ref;
|
|
[maxWidth, maxHeight] = ref;
|
|
|
$frame = $('.onion-skin-frame', view);
|
|
const $frame = $('.onion-skin-frame', view);
|
|
|
$frameAdded = $('.frame.added', view);
|
|
const $frameAdded = $('.frame.added', view);
|
|
|
$track = $('.drag-track', view);
|
|
const $track = $('.drag-track', view);
|
|
|
$dragger = $('.dragger', $track);
|
|
const $dragger = $('.dragger', $track);
|
|
|
|
|
|
|
|
$frame.css({
|
|
$frame.css({
|
|
|
width: maxWidth + 16,
|
|
width: maxWidth + 16,
|
| ... | @@ -186,10 +179,10 @@ export default class ImageFile { |
... | @@ -186,10 +179,10 @@ export default class ImageFile { |
|
|
});
|
|
});
|
|
|
|
|
|
|
|
$frameAdded.css('opacity', 1);
|
|
$frameAdded.css('opacity', 1);
|
|
|
framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
|
|
const framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
|
|
|
|
|
|
|
|
this.initDraggable($dragger, framePadding, (e, left) => {
|
|
this.initDraggable($dragger, framePadding, (e, left) => {
|
|
|
var opacity = left / dragTrackWidth;
|
|
const opacity = left / dragTrackWidth;
|
|
|
|
|
|
|
|
if (opacity >= 0 && opacity <= 1) {
|
|
if (opacity >= 0 && opacity <= 1) {
|
|
|
$dragger.css('left', left);
|
|
$dragger.css('left', left);
|
| ... | |
... | |
| ... | | ... | |