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

bdchapril.css

@@ -249,6 +249,7 @@ text-decoration: underline;
 {
   background-color:white;
   position: fixed;
+  display: none;
 
 }
 #newWidth, #newHeight{

index.html

@@ -14,7 +14,7 @@
 
         <!-- ajout conteneur global -->
         <div id="wrapper">
-            <div id="focusImg" style="display:none;"><img id="bigImg" />
+            <div id="focusImg"><img id="bigImg" />
             </div>
             <!-- tableau de bord -->
 
@@ -25,19 +25,16 @@
                     <p class="hidden">Générateur de BD de l'April</p>
                     <div id="lib" class="rc">
                         <div><label for="newText"><span class="hidden">Saisissez votre bulle</span></label> <input
-                                type="text" id="newText" placeholder="Saisissez votre bulle"
-                                onkeypress="cg.createTextFromInput(event)" /></div>
+                                type="text" id="newText" placeholder="Saisissez votre bulle"/></div>
                         <div class="upload">
-                            <input type="file" accept="image/*" id="imageFileInput" class="file" multiple
-                                onchange='cg.createImageFromInput(this)' />
-                            <h2 class="save"><a href="#" onclick="$('#imageFileInput').click();"
-                                    title="Importer une ou plusieurs images">Importer une image</a></h2>
+                            <input type="file" accept="image/*" id="imageFileInput" class="file" multiple/>
+                            <h2 class="save"><a id="uploadSave" href="#" title="Importer une ou plusieurs images">Importer une image</a></h2>
                         </div>
                     </div>
                 </div>
 
                 <div id="hiddenObjs">
-                    <div id="textTool" class="rc mini textTool" title="Ajouter du texte" onclick="cg.createText();">T</div>
+                    <div id="textTool" class="rc mini textTool" title="Ajouter du texte">T</div>
                     <div id="instructs" class="rc instructions">
                         <h2>Instructions</h2>
                         <ul>
@@ -51,21 +48,20 @@
                 </div>
                 <div id="toolbar" class="rcBottom">
 
-                    <h2 class="save"><a href="javascript:cg.saveImage();" title="enregistrer l image">Enregistrer votre
+                    <h2 class="save"><a id="toolbarImageSave" href="#" title="Enregistrer l’image">Enregistrer votre
                             image</a></h2>
                     <h2 class="last">Redimensionner la fenêtre</h2>
                     <br />
                     <p> <input type="text" id="newWidth" placeholder="Largeur" /> x <input type="text" id="newHeight"
                             placeholder="Hauteur" /> </p>
                     <br />
-                    <h2 class="save"><a href="javascript:cg.setScreen($('#newWidth').val(), $('#newHeight').val())"
-                            class="save">Redimensionner</a> </h2>
+                    <h2 class="save"><a id="resizeCanvas" href="#" class="save">Redimensionner</a> </h2>
                 </div>
             </div>
             <!-- fin tableau de bord -->
 
             <div id="cscreen">
-                <canvas class="rc" id="c" crossorigin="anonymous" width="800" height="600">
+                <canvas class="rc" id="c" crossorigin="anonymous" width="800" height="600" tabindex=0>
                     Le générateur du GKND a besoin d'un navigateur récent et de javascript pour fonctionner.
                 </canvas>
             </div>
@@ -75,7 +71,7 @@
                         <em>BD Chapril</em> est une adaptation de <a href="https://framalab.org/gknd-creator/">GéGé</a>,
                         lui-même une adaptation de <a href="https://github.com/willianpc/comicgen"
                             title="Code source de l'auteur original sur Github">Comic Gen de Willian Carvalho</a> réalisée
-                        par Cyrille Largillier pour <a href="https://framasoft.org"
+                        par Cyrille Largillier pour <a href="https://framasoft.org/"
                             title="Vous ne connaissez pas encore Framasoft ?">Framasoft</a>.</p>
             </footer>
             <script type="module" src="bdchapril.js" async="true"></script>

lib/comicgen.js

@@ -18,6 +18,7 @@ scene.update();
 
 var lib = $('#lib');
 
+/** Clear the canvas */
 cg.clearScreen = function(){
     ctx = c.getContext('2d');
     scene = new RB.Scene(c);
@@ -31,9 +32,9 @@ cg.clearScreen = function(){
     scene.update();
 }
 
-$(d).keyup(function(e){
+$(d).on('keyup', function(e){
 
-    var key = e.keyCode || e.which;
+    var key = e.which;
 
     if(key == 46 && currentObj){
         scene.remove(currentObj);
@@ -47,9 +48,9 @@ $(d).keyup(function(e){
     }
 });
 
-$(d).keydown(function(event){
-
-    var key = event.keyCode || event.which;
+canvas.on('focusin').on('keydown', function(event){
+    event.preventDefault();
+    var key = event.which;
 
     if(key == 38 && currentObj){
         cg.zoomIn(currentObj);
@@ -60,14 +61,24 @@ $(d).keydown(function(event){
     }
 });
 
-d.onmousewheel = function(mw){
-    if(currentObj && mw.wheelDelta > 0){
+const onWheelAndFocus = function(event) {
+    event.preventDefault();
+    if(currentObj && event.deltaY > 0){
         cg.zoomIn(currentObj);
-    } else if (currentObj && mw.wheelDelta < 0){
+    } else if (currentObj && event.deltaY < 0){
         cg.zoomOut(currentObj);
     }
 };
 
+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 ;
@@ -82,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'));
@@ -89,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();
@@ -273,3 +332,25 @@ cg.setScreen = function(w, h){
         }
     }
 }
+
+$('#newText').on('keyup', cg.createTextFromInput);
+
+$('#imageFileInput').on('change', function() {
+    cg.createImageFromInput(this);
+});
+
+$('#uploadSave').on('click', function() {
+    $('#imageFileInput').click();
+});
+
+$('#textTool').on('click', function() {
+    cg.createText();
+});
+
+$('#toolbarImageSave').on('click', function() {
+    cg.saveImage();
+});
+
+$('#resizeCanvas').on('click', function() {
+    cg.setScreen($('#newWidth').val(), $('#newHeight').val());
+});