Skip to content

Commit

Permalink
New: Drag with mouse in scroll mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@ollm
ollm committed Jul 27, 2020
1 parent c3e8dfa commit 016a069
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 29 deletions.
5 changes: 5 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
"handlebars": "^4.7.6",
"jimp": "^0.10.3",
"jquery": "^3.5.1",
"jquery-bez": "^1.0.11",
"ldd": "^1.0.0",
"mime": "^2.4.4",
"node-7z": "^1.1.0",
Expand Down
40 changes: 20 additions & 20 deletions scripts/events.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ var buttonCancel, buttonPulsed;
function eventButton()
{

$('.button').on('mousedown touchstart', function(e){
$('.button').on('mousedown.events touchstart.events', function(e){

$(this).removeClass('p c d').addClass('a');
clearTimeout(eventHoverTimeout);
Expand All @@ -13,7 +13,7 @@ function eventButton()

});

$('.button').on('mouseup touchend', function(e){
$('.button').on('mouseup.events touchend.events', function(e){

if(!buttonCancel)
{
Expand All @@ -24,7 +24,7 @@ function eventButton()

});

$('.button').on('mouseout', function(){
$('.button').on('mouseout.events', function(){

if(buttonPulsed)
{
Expand All @@ -36,7 +36,7 @@ function eventButton()

});

$('.floating-action-button').on('mousedown touchstart', function(e){
$('.floating-action-button').on('mousedown.events touchstart.events', function(e){

$(this).removeClass('p c d').addClass('a');
clearTimeout(eventHoverTimeout);
Expand All @@ -45,7 +45,7 @@ function eventButton()

});

$('.floating-action-button').on('mouseup touchend', function(e){
$('.floating-action-button').on('mouseup.events touchend.events', function(e){

if(!buttonCancel)
{
Expand All @@ -56,7 +56,7 @@ function eventButton()

});

$('.floating-action-button').on('mouseleave', function(){
$('.floating-action-button').on('mouseleave.events', function(){

if(buttonPulsed)
{
Expand Down Expand Up @@ -85,27 +85,27 @@ function eventHover()

});

$('.hover-text').on('mouseleave', function(){
$('.hover-text').on('mouseleave.events', function(){

hideHoverText();

});

$(document).on('mouseleave', function(){
$(document).on('mouseleave.events', function(){

hideHoverText();

clearTimeout(eventHoverTimeout);

});

$(window).on('mousedown touchstart', function(){
$(window).on('mousedown.events touchstart.events', function(){

hideHoverText();

});

$(window).on('mousemove', function (e){
$(window).on('mousemove.events', function(e){

clearTimeout(eventHoverTimeout);

Expand All @@ -116,7 +116,7 @@ function eventHover()

});

$(window).on('mousemove touchstart touchmove', function (e){
$(window).on('mousemove.events touchstart.events touchmove', function(e){

currentPageX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
currentPageY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY;
Expand All @@ -128,7 +128,7 @@ function eventHover()
function eventSwitch()
{

$('.switch').on('click', function(){
$('.switch').on('click.events', function(){

if($(this).hasClass('a'))
{
Expand All @@ -147,7 +147,7 @@ function eventSwitch()

function eventRange()
{
$('.range').on('change input', function(event) {
$('.range').on('change.events input.events', function(event) {

var onrange = $(this).attr('onrange');

Expand Down Expand Up @@ -181,13 +181,13 @@ function eventRange()

function events()
{
$('.button').off('mousedown mouseup touchstart touchend mouseout');
$(window).off('mouseover mouseleave mousedown mousemove');
$(document).off('mouseleave');
$('.hover-text').off('mousemove');
$('.floating-action-button').off('mousedown mouseup touchstart touchend');
$('.switch').off('click');
$('.range').off('change input');
$('.button').off('mousedown.events mouseup.events touchstart.events touchend.events mouseout.events');
$(window).off('mouseleave.events mousedown.events mousemove.events');
$(document).off('mouseleave.events');
$('.hover-text').off('mousemove.events');
$('.floating-action-button').off('mousedown.events mouseup.events touchstart.events touchend.events');
$('.switch').off('click.events');
$('.range').off('change.events input.events');

eventHover();
eventButton();
Expand Down
2 changes: 2 additions & 0 deletions scripts/opencomic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ const electron = require('electron'),
p = require('path'),
$ = require('jquery');

require('jquery-bez');

//console.timeEnd('Require time 1');

var testVar = 'test';
Expand Down
115 changes: 106 additions & 9 deletions scripts/reading.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -359,8 +359,8 @@ function calculateView()
if(readingViewIs('scroll'))
{
imagesPosition = [];
var element = template.contentRight().children('div');
var scrollTop = element.scrollTop() + element.offset().top;

var scrollTop = content.scrollTop() - content.offset().top;

for(var key1 in imagesDistribution)
{
Expand All @@ -370,7 +370,7 @@ function calculateView()
{
var image = template.contentRight('.image-position'+key1+'-'+key2);

imagesPosition[key1][key2] = (image.offset().top + (image.height() / 2)) - scrollTop;
imagesPosition[key1][key2] = (image.offset().top + (image.height() / 2)) + scrollTop;
}
}
}
Expand Down Expand Up @@ -489,7 +489,7 @@ function returnLargerImage(index)
return image;
}

var currentPageVisibility = 0, maxPageVisibility = 0, currentPageStart = true, readingDirection = true, previousReadingDirection = true, readingDirection = true;
var currentPageVisibility = 0, maxPageVisibility = 0, currentPageStart = true, readingDirection = true, previousReadingDirection = true, readingDirection = true, disableOnScrollST = false;

//Go to a specific comic index
function goToIndex(index, animation = true, nextPrevious = false, end = false)
Expand Down Expand Up @@ -623,7 +623,15 @@ function goToIndex(index, animation = true, nextPrevious = false, end = false)
}
}

disableOnScroll(1)
clearTimeout(disableOnScrollST);

disableOnScroll(1);

disableOnScrollST = setTimeout(function(){

reading.disableOnScroll(2);

}, animationDurationMS);

content.stop(true).animate({scrollTop: (scrollTop + scrollSum)+'px'}, animationDurationMS);
}
Expand Down Expand Up @@ -746,7 +754,7 @@ function leftClick(e)
{
var isTouch = (e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents) ? true : false;

if(!reading.haveZoom() && (!isTouch || !config.readingMagnifyingGlass))
if(!reading.haveZoom() && (!readingDragScroll || !readingDragScroll.start) && (!isTouch || !config.readingMagnifyingGlass))
{
if(isTouch)
reading.goNext();
Expand All @@ -759,7 +767,7 @@ function rightClick(e)
{
var isTouch = (e.sourceCapabilities && e.sourceCapabilities.firesTouchEvents) ? true : false;

if(!reading.haveZoom() && (!isTouch || !config.readingMagnifyingGlass))
if(!reading.haveZoom() && (!readingDragScroll || !readingDragScroll.start) && (!isTouch || !config.readingMagnifyingGlass))
{
if(isTouch)
reading.goPrevious();
Expand Down Expand Up @@ -1262,6 +1270,11 @@ function disableOnScroll(mode)
activeOnScroll = true;
}

function setReadingDragScroll(dragScroll)
{
readingDragScroll = dragScroll;
}

function updateReadingPagesConfig(key, value)
{
_config[key] = value;
Expand Down Expand Up @@ -2094,7 +2107,7 @@ function eachImagesDistribution(index, contains, callback, first = false, notFou
}
}

var touchTimeout, mouseOut = {lens: false, body: false}, touchStart = false, magnifyingGlassOffset = false, readingCurrentPath = false, readingCurrentBookmarks = undefined, zoomMoveData = {}, magnifyingGlassScroll = {scrollTop: false, time: 0};
var touchTimeout, mouseOut = {lens: false, body: false}, touchStart = false, magnifyingGlassOffset = false, readingCurrentPath = false, readingCurrentBookmarks = undefined, zoomMoveData = {}, magnifyingGlassScroll = {scrollTop: false, time: 0}, readingDragScroll = false;

//It starts with the reading of a comic, events, argar images, counting images ...
function read(path, index = 1, end = false)
Expand Down Expand Up @@ -2167,6 +2180,35 @@ function read(path, index = 1, end = false)

});

template.contentRight('.reading-body, .reading-lens').on('pointerdown', function(e) {

if(onReading && !haveZoom && readingViewIs('scroll'))
{
if(e.originalEvent.pointerType != 'touch')
{
// e.preventDefault();

var content = template.contentRight().children();

var pageY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : (e.pageY ? e.pageY : e.clientY);

readingDragScroll = {
start: false,
pageY: pageY,
content: content,
scrollTop: content.scrollTop(),
speed: [{
time: performance.now(),
pageY: pageY,
}],
};

content.stop(true);
}
}

});

$(window).on('keydown', function(e) {

if(onReading)
Expand Down Expand Up @@ -2336,7 +2378,7 @@ function read(path, index = 1, end = false)

$(window).on('mousemove touchmove', function(e) {

if(haveZoom && zoomMoveData.active)
if(haveZoom && zoomMoveData.active) // Drag Image zoom
{
e.preventDefault();

Expand Down Expand Up @@ -2374,6 +2416,30 @@ function read(path, index = 1, end = false)
'transform-origin': 'center center',
});
}

if(readingDragScroll) // Drag to scroll
{
e.preventDefault();

if(!readingDragScroll.start)
{
readingDragScroll.start = true;

$('body').addClass('dragging');
}

var pageY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : (e.pageY ? e.pageY : e.clientY);

if(readingDragScroll.speed.length > 2)
readingDragScroll.speed.shift();

readingDragScroll.speed.push({
time: performance.now(),
pageY: pageY,
});

readingDragScroll.content.scrollTop(readingDragScroll.scrollTop - (pageY - readingDragScroll.pageY));
}

});

Expand All @@ -2391,6 +2457,35 @@ function read(path, index = 1, end = false)

$('body').removeClass('dragging');
}

if(readingDragScroll)
{
if(readingDragScroll.start)
{
var first = readingDragScroll.speed[0];
var last = readingDragScroll.speed[readingDragScroll.speed.length-1];

var dragSpeed = (first.pageY - last.pageY) / ((performance.now() - first.time) / 1000);

if(Math.abs(dragSpeed) > 120)
{
var duration = Math.abs(dragSpeed) / 1000;

if(duration > 2)
duration = 2;
else if(duration < 0.4)
duration = 0.4;

var moreScroll = Math.round((dragSpeed * duration) * 0.366);

readingDragScroll.content.stop(true).animate({scrollTop: (readingDragScroll.content.scrollTop() + moreScroll)+'px'}, duration * 1000, $.bez([0.22, 0.6, 0.3, 1]));
}

$('body').removeClass('dragging');
}

setTimeout(function(){reading.setReadingDragScroll(false)}, 10);
}

});

Expand Down Expand Up @@ -2605,6 +2700,7 @@ module.exports = {
setCurrentComics: setCurrentComics,
currentComics: function(){return currentComics},
disableOnScroll: disableOnScroll,
activeOnScroll: function(){return activeOnScroll},
saveReadingProgress: saveReadingProgress,
saveReadingProgressA: function(){return saveReadingProgressA},
createAndDeleteBookmark: createAndDeleteBookmark,
Expand All @@ -2626,4 +2722,5 @@ module.exports = {
haveZoom: function(){return haveZoom},
imagesPosition: function(){return imagesPosition},
readingCurrentPath: function () {return readingCurrentPath},
setReadingDragScroll: setReadingDragScroll,
};

0 comments on commit 016a069

Please sign in to comment.