melpomene/comic_reader.js

PAGE_TRANSITION_SPEED = "1.5s"

READER_FRAME = document.getElementById("reader-frame")

READER_PAGES = document.getElementById("reader-pages")

FOCUS_OVERLAY = document.getElementById("focus-overlay")

CURRENT_ZOOM = 0

CURRENT_PAGE = 1

CURRENT_WIDTH = 0
CURRENT_HEIGHT = 0
CURRENT_X = 0
CURRENT_Y = 0

IS_PAGE_MODE = false

// ===========
//  UTILITIES
// ===========

function getFirstZoomOfPage(pageNumber){
   
    for (var zoom_idx = 0; zoom_idx < zooms.length; zoom_idx++){
        if (zooms[zoom_idx][0] == pageNumber) {
            return zoom_idx
        }
    }
}

function getLastZoomOfPage(pageNumber){
    let res = null
    
    for (var zoom_idx = 0; zoom_idx < zooms.length; zoom_idx++){
        if (zooms[zoom_idx][0] == pageNumber) {
            res = zoom_idx
        }
        
        if (res != null && zooms[zoom_idx][0] != pageNumber) {
            break
        }
    }
    
    return res
}

function getReaderFrameRatio() {
    return READER_FRAME.clientWidth / READER_FRAME.clientHeight
}

function getPagesCount() {
    return READER_PAGES.childElementCount
}

function getPagesHeight() {
    return READER_PAGES.dataset.pagesHeight
}

function getPagesWidth() {
    return READER_PAGES.dataset.pagesWidth
}

function getPagesRatio() {
    return READER_PAGES.dataset.pagesWidth / READER_PAGES.dataset.pagesHeight
}


// =========
//  ACTIONS
// =========

function initReader(){
    moveReaderDisplayToZoom(0)
}


function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){
    
    if (width == 0){
        width = getPagesWidth()
    }
    
    if (height == 0){
        height = getPagesHeight()
    }
    
    ratio = width / height
    
    base_scale_factor = getPagesHeight() / READER_FRAME.clientHeight // This is the factor at 100% height
    
    if (ratio < getReaderFrameRatio()) {
        
        scale_factor = READER_FRAME.clientHeight / height
        
        centering_padding = (READER_FRAME.clientWidth - width * scale_factor) / 2
        
        pages_negative_padding = getPagesWidth() * scale_factor * (pageNumber - 1)
        
        READER_PAGES.style.height = base_scale_factor * scale_factor * 100 + "%"
        
        READER_PAGES.style.left = (- posx * scale_factor + centering_padding - pages_negative_padding) + "px"
        
        READER_PAGES.style.top = -posy * scale_factor + "px"
        
        updateFocusByWidth(width * scale_factor)
        
    } else {
        
        scale_factor = READER_FRAME.clientWidth / width
        
        pages_negative_padding = getPagesWidth() * scale_factor * (pageNumber - 1)
        
        scaled_height = height * scale_factor
        
        READER_PAGES.style.height = base_scale_factor * scale_factor * 100 + "%"
        
        READER_PAGES.style.left = (- posx * scale_factor - pages_negative_padding) + "px"
        
        READER_PAGES.style.top = -posy * scale_factor + (READER_FRAME.clientHeight - scaled_height)/2 + "px"
        
        updateFocusByHeight(scaled_height)
        
    }
    
    CURRENT_PAGE = pageNumber
    CURRENT_WIDTH = width
    CURRENT_HEIGHT = height
    CURRENT_X = posx
    CURRENT_Y = posy
}


function moveReaderDisplayToPage(pageNumber) {
    moveReaderDisplayToArea(pageNumber, 0, 0, 0, 0)
}

function moveReaderDisplayToZoom(index) {
    
    moveReaderDisplayToArea(zooms[index][0], zooms[index][1], zooms[index][2], zooms[index][3], zooms[index][4])
    
    CURRENT_ZOOM = index
}

function updateFocusByWidth(width){
    
    side_width = (READER_FRAME.clientWidth - width) / 2
    
    FOCUS_OVERLAY.style.gridTemplateColumns = side_width +"px auto " + side_width + "px"
    FOCUS_OVERLAY.style.gridTemplateRows = "0px auto 0px";
}

function updateFocusByHeight(height){
    
    side_width = (READER_FRAME.clientHeight - height) / 2
    
    FOCUS_OVERLAY.style.gridTemplateRows = side_width +"px auto " + side_width + "px"
    FOCUS_OVERLAY.style.gridTemplateColumns = "0px auto 0px";
}

function moveReader(to_next, move_page) {
    
    if (move_page){
        
        if (IS_PAGE_MODE){
            if (to_next && CURRENT_PAGE < getPagesCount()) {
                moveReaderDisplayToPage(CURRENT_PAGE + 1)
                IS_PAGE_MODE = true
            }
            
            else if (CURRENT_PAGE > 1) {
                moveReaderDisplayToPage(CURRENT_PAGE - 1)
                IS_PAGE_MODE = true
            }
        }
        
        else {
            
            if (to_next && CURRENT_PAGE < getPagesCount()) {
                moveReaderDisplayToPage(CURRENT_PAGE + 1)
                IS_PAGE_MODE = true
            }
                
            else {
                moveReaderDisplayToPage(CURRENT_PAGE)
                IS_PAGE_MODE = true
            }
            
        }
    
    } else {
        
        if (IS_PAGE_MODE){
            
            if (to_next) {
                moveReaderDisplayToZoom(getFirstZoomOfPage(CURRENT_PAGE))
                IS_PAGE_MODE = false
            }
            else {
                if (CURRENT_PAGE == 1) {
                    moveReaderDisplayToZoom(0)
                    IS_PAGE_MODE = false
                } else {
                    moveReaderDisplayToZoom(getLastZoomOfPage(CURRENT_PAGE - 1))
                    IS_PAGE_MODE = false
                }
            }
            
        } else {
            
            if (to_next && CURRENT_ZOOM < zooms.length - 1) {
                moveReaderDisplayToZoom(CURRENT_ZOOM + 1)
                IS_PAGE_MODE = false
            }
            
            else if (CURRENT_ZOOM > 0) {
                moveReaderDisplayToZoom(CURRENT_ZOOM - 1)
                IS_PAGE_MODE = false
            }
            
        }
    }
    
}

function handleKeyPress(key, has_ctrl){
    
    if (key == "ArrowRight") {
        moveReader(true, has_ctrl)
    }
    
    else if (key == "ArrowLeft") {
        moveReader(false, has_ctrl)
    }

}

// ======
//  INIT
// ======

window.addEventListener("load", (event) => {
  initReader()
});

addEventListener("resize", (event) => {
    moveReaderDisplayToArea(CURRENT_PAGE, CURRENT_WIDTH, CURRENT_HEIGHT, CURRENT_X, CURRENT_Y)
});

addEventListener("keydown", (event) => {
    handleKeyPress(event.key, event.ctrlKey)
});