add keyable js method

Author: manatlan

htagui/all.py

@@ -19,6 +19,7 @@
 from .containers import VScroll,VScrollPager, View    
 from .sortables import Sortable
 from .swipers import Swiper
+from .javascripts import JSKEYABLE
 class App(Tag.body):
     _ui=None
 
@@ -33,5 +34,5 @@ def ui(self):
 
 # Swiper not inluded by default !!!!!
 
-ALL=[App,Form,Tabs,Dialog,HSplit,VSplit,IText,ITextarea,IRange,IBool,ISelect,IRadios,FileUpload,Sortable,VScroll,VScrollPager,View]
+ALL=[JSKEYABLE, App,Form,Tabs,Dialog,HSplit,VSplit,IText,ITextarea,IRange,IBool,ISelect,IRadios,FileUpload,Sortable,VScroll,VScrollPager,View]
 FULL=ALL+[Swiper] # Swiper not inluded by default !!!!! (coz +170ko)

htagui/ifields.py

@@ -1,3 +1,12 @@
+# -*- coding: utf-8 -*-
+# #############################################################################
+# Copyright (C) 2024 manatlan manatlan[at]gmail(dot)com
+#
+# MIT licence
+#
+# https://github.com/manatlan/htag
+# #############################################################################
+
 import time
 from htag import Tag,expose
 

htagui/javascripts.py

@@ -0,0 +1,69 @@
+# -*- coding: utf-8 -*-
+# #############################################################################
+# Copyright (C) 2024 manatlan manatlan[at]gmail(dot)com
+#
+# MIT licence
+#
+# https://github.com/manatlan/htag
+# #############################################################################
+from htag import Tag
+
+""" will contains some htag placeholder objects, to just add some JS at import """
+
+
+class JSKEYABLE(Tag):
+    statics = [Tag.script("""function keyable(o) {
+    o.onkeydown = function(e) {
+        const ll = [...o.querySelectorAll(".keyable")];
+
+        function calcOffset() {
+            let hh={};
+            for(let i of ll) {
+                const h=i.getBoundingClientRect().top;
+                hh[h]=(!hh[h]) ? 1 : hh[h]+1;
+            }
+            return Math.max( ...Object.values(hh) );
+        }
+        
+        const current=document.activeElement;
+        if(ll.indexOf(current)>=0) {
+            let idx=ll.indexOf(current);
+            if(e['key']=="ArrowLeft") {
+                idx = (idx - 1 >= 0) ? idx-1 : 0;
+                ll[idx].focus();
+                e.preventDefault();
+            }
+            else if(e['key']=="ArrowRight") {
+                idx = (idx + 1 < ll.length) ? idx+1 : ll.length-1;
+                ll[idx].focus();
+                e.preventDefault();
+            }
+            else if(e['key']=="ArrowUp") {
+                const offset = calcOffset();
+                idx = (idx - offset >= 0) ? idx-offset : 0;
+                ll[idx].focus();
+                e.preventDefault();
+            }
+            else if(e['key']=="ArrowDown") {
+                const offset = calcOffset();
+                idx = (idx + offset < ll.length) ? idx+offset : ll.length-1;
+                ll[idx].focus();
+                e.preventDefault();
+            }
+            else if(e['key']=="Enter" ) {
+                ll[idx].click();
+                e.preventDefault();
+            }
+        }
+    }    
+        
+    const ll = [...o.querySelectorAll(".keyable")];
+    if(ll) {
+        for(const i of ll)
+            i.setAttribute("tabindex",1)
+        ll[0].focus();
+    }
+    else
+        console.warn( "keyable(element):", "No child elements with 'keyable' class in", o )
+}
+""")]

manual_tests.py

@@ -263,6 +263,8 @@ def init(self,x):
             self <= Tag.div(_style="height:200px; border:1px solid red;" ) <= ui.VScrollPager([lambda i=i: O(i) for i in range(1,200)])
 
 
+            #=====================================================================
+
     class TestSwiper(Tag.div):
         def init(self,root):
             self.output=root.output