fhenry2/bd-chapril
fhenry2/bd-chapril
1
0
Fork 0
forked from gee/bd-chapril
Code Pull Requests Activity

Zoomable canvas picture without movement in the page (wheel fix)

Browse Source
This commit is contained in:
Frédéric Henry 2025-01-03 10:08:33 +01:00
parent 392dd2a4aa
commit 4b2e78015c
Signed by: fhenry2
GPG Key ID: D752390BFF432D86
1 changed files with 66 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
lib/comicgen.js
View File

@ -18,6 +18,7 @@ scene.update();
var lib = $('#lib');
/** Clear the canvas */
cg.clearScreen = function(){
ctx = c.getContext('2d');
scene = new RB.Scene(c);
@ -60,15 +61,24 @@ canvas.on('focusin').on('keydown', function(event){
}
});
d.addEventListener('wheel', function(event) {
const onWheelAndFocus = function(event) {
event.preventDefault();
if(currentObj && event.deltaY > 0){
cg.zoomIn(currentObj);
} else if (currentObj && event.deltaY < 0){
cg.zoomOut(currentObj);
}
}, { passive: false });
};
c.addEventListener('wheel', onWheelAndFocus, { passive: false });
canvas.on('focusin', onWheelAndFocus);
/**
* Hover 'div' element
* @param {Event} e Event
* @param {string} divid 'div' element ID
* @returns 'false' value
*/
cg.hoverdiv = function(e,divid){
var x = e.clientX + 25;
var y = e.clientY ;
@ -83,6 +93,11 @@ cg.hoverdiv = function(e,divid){
$('#'+divid).toggle();
return false;
}
/**
* Source swap
* @param {Event} e Event
*/
cg.sourceSwap = function (e) {
var div_mini = $(this);
var img_id = parseInt(div_mini.data('src-id'));
@ -90,25 +105,68 @@ cg.sourceSwap = function (e) {
$('#bigImg').attr('src','toons/' + img_url);
cg.hoverdiv(e,'focusImg')
}
/**
* Build minitoons
*/
cg.buildMinis = function(){
var buffer = '';
var divString = "<div class='himg' data-src-id='IMG_ID'>";
/*
var divString = "<div class='himg' data-src-id='IMG_ID'>";
var imgString = "<img src='toons/IMG_URL' data-src-id='IMG_ID' class='rc mini' alt='toons'></img>";
var link = "<a href=\"javascript:cg.createImage('toons/IMG_URL')\">";
for(var i=0; i < cgd.miniUrls.length; i++){
buffer += divString.replace(/IMG_ID/,i);
buffer += divString.replace(/IMG_ID/,i);
buffer += link.replace(/IMG_URL/, cgd.toonUrls[i]);
buffer += imgString.replace(/IMG_URL/, cgd.miniUrls[i]).replace(/IMG_ID/, i) + '</a></div>';
buffer += `<div class='himg' data-src-id='${i}'>\n`;
buffer += ` <a href=\"#\" onclick=\"cg.createImage('toons/${cgd.toonUrls[i]}')\">\n`;
buffer += ` <img src='toons/${cgd.miniUrls[i]}' data-src-id='${i}' class='rc mini' alt='toons'/>\n`
buffer += ` </a>\n</div>\n`;
}
lib.append(buffer);
*/
const addDiv = function(index) {
const div = d.createElement('div');
div.classList.add('himg');
div.setAttribute('data-src-id', index);
return div;
};
const addA = function(index) {
const a = d.createElement('a');
a.setAttribute('href', '#');
a.addEventListener('click', function(){
cg.createImage(`toons/${cgd.toonUrls[index]}`);
});
return a;
};
const addImg = function(index) {
const img = d.createElement('img');
img.classList.add('rc', 'mini');
img.setAttribute('src', `toons/${cgd.miniUrls[index]}`);
img.setAttribute('alt', 'toons');
img.setAttribute('data-src-id', index);
return img;
};
const elements = [];
for(let i=0; i < cgd.miniUrls.length; i++){
const div = addDiv(i);
const a = addA(i);
const img = addImg(i);
div.appendChild(a);
a.appendChild(img);
elements.push(div);
}
lib.append(elements);
//lib.append( $('#textTool').clone() );
$('#menuContainer').append( $('#instructs').clone() );
$(function () {
$('div.himg').hover(cg.sourceSwap, cg.sourceSwap);
});
$(function () {
$('div.himg').hover(cg.sourceSwap, cg.sourceSwap);
});
}
cg.buildMinis();