HTML only and JQuery deprecated methods replaced

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,15 +48,14 @@
                 </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 -->
@@ -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

@@ -31,7 +31,7 @@ cg.clearScreen = function(){
     scene.update();
 }
 
-$(d).keyup(function(e){
+$(d).on('keyup', function(e){
 
     var key = e.keyCode || e.which;
 
@@ -47,7 +47,7 @@ $(d).keyup(function(e){
     }
 });
 
-$(d).keydown(function(event){
+$(d).on('keydown', function(event){
 
     var key = event.keyCode || event.which;
 
@@ -273,3 +273,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());
+});