Vscroll* and Sortable should be ok + tests

Author: manatlan

README.md

@@ -283,7 +283,7 @@ Force the navigator to download a file named 'name', with the content bytes 'con
 
 ## Object HSplit & VSplit
 
-A Tag object to use "SplitJS" (currently only in horizontal form)
+A Tag object to use "SplitJS"
 
 ```python
 import htagui as ui
@@ -296,6 +296,46 @@ split.setSizes( [50,50] )
 split.onchange = lambda object: print( object.sizes )   # event
 
 
+## Object Sortable
+
+A component to let the user reorder items using drag'n'drop.
+
+```python
+ll=[Tag.div(f"Item {i} (drag me)",value=i) for i in range(10)]
+        
+def onchange(o:ui.Sortable):
+    print( str([i.value for i in o.values]) )
+
+self <= ui.Sortable(ll,onchange=onchange)
+```
+
+## Object VScroll
+
+A component to help you to create an infinite scroller.
+
+```python
+def feed():
+    yield [Tag.div(i) for i in range(20) ]
+
+self <= Tag.div(_style="height:200px; border:1px solid red;" ) <= ui.VScroll( feed )
+```
+
+This component should be embbeded in an element which have a constraint on its height. The given callback should yield Tag(s) (or `None` to finnish the endless scroll)
+
+## Object VScrollPager
+
+A component (which inherit from VScroll) to present a finnished list of items in an "on-demand" way (create items on-demand), can contain a big amount of data.
+
+```python
+
+ll=[lambda i=i: MyObject(i) for i in range(1,200_000_000)]
+self <= Tag.div(_style="height:200px; border:1px solid red;" ) <= ui.VScrollPager(ll,preload=50,moreload=10,endzone=50)
+
+```
+This component should be embbeded in an element which have a constraint on its height. `preload` is the number of items which will be created (it should overflow on height). `moreload` is the number of items which will be loaded when scrolling is in the `endzone` pixels at the end.
+
+Note that the list is a list of lambda (`List[Callable[[], Tag]]`) to create the rendering on-demand.
+
 ## utilities methods
 
 ### hflex & vflex

htagui/all.py

@@ -16,8 +16,8 @@
 from .splitters import HSplit, VSplit
 from .ifields import IText,ITextarea,IRange,IBool,ISelect,IRadios
 from .fileupload import FileUpload
-from .containers import VScroll,VScrollPager    # NEW TODO:doc
-from .sortables import Sortable                 # NEW TODO:doc
+from .containers import VScroll,VScrollPager    
+from .sortables import Sortable                 
 class App(Tag.body):
     _ui=None
 
@@ -31,4 +31,4 @@ def ui(self):
 from .flex import hflex,vflex  # utilities (Htag contructor methods)
 
 
-ALL=[App,Form,Tabs,Dialog,HSplit,VSplit,IText,ITextarea,IRange,IBool,ISelect,IRadios,FileUpload]
+ALL=[App,Form,Tabs,Dialog,HSplit,VSplit,IText,ITextarea,IRange,IBool,ISelect,IRadios,FileUpload,Sortable,VScroll,VScrollPager]

htagui/containers.py

@@ -11,8 +11,7 @@
 
 from typing import Callable, List
 
-creators= List[Callable[[], Tag]]
-
+TagCreators = List[Callable[[], Tag]]
 
 class VScroll(Tag.div):
     def init(self,cbloader:Callable[[], Tag],endzone:int=50,**a):
@@ -49,7 +48,7 @@ def _loadmore(self):
 
 
 class VScrollPager(VScroll):
-    def __init__(self,all:creators,preload:int=50,moreload:int=10,endzone:int=50,**a):
+    def __init__(self,all:TagCreators,preload:int=50,moreload:int=10,endzone:int=50,**a):
         """
         the CONTAINER/PARENT should have a "height" !
         
@@ -63,7 +62,7 @@ def __init__(self,all:creators,preload:int=50,moreload:int=10,endzone:int=50,**a
         self.all=all
         self.preload=preload
         self.moreload=moreload
-        VScroll.__init__(self,self._more)
+        VScroll.__init__(self,self._more,endzone=endzone)
 
 
     def _more(self):
@@ -76,28 +75,3 @@ def _more(self):
         self.first=False
 
 
-class O(Tag.div):
-    def init(self,x):
-        self <= x
-        self["style"]="display:inline-block;width:100px;height:100px;border:1px solid black"
-    
-    
-class App(Tag.div):
-    imports=[]
-    statics=""" html,body {height:100%;overflow:hidden} """ # NEEDED !
-    
-    def init(self):
-        with Tag.div(_style="display:flex;flow-flow: row nowrap;height:100%") as d:
-            def feed():
-                yield [O(i) for i in range(50) ]
-            
-            # unlimited scrolling
-            d <= VScroll( feed,_style="flex: 0 0 50%" )
-            
-            # scrolling on demand in a defined list (of lambda())
-            d <= Tag.div( Tag.button("hello") + VScrollPager([lambda i=i: O(i) for i in range(1000,1200)]) ,_style="height:100%")
-        self += d
-
-if __name__=="__main__":
-    from htag import Runner
-    Runner(App,interface=(800,600)).run()

htagui/sortables.py

@@ -225,6 +225,45 @@ def doit(name:str,content:bytes):
             self <= Tag.div("Simple:") <= ui.FileUpload( doit )
             self <= Tag.div("Multiple:") <= ui.FileUpload( doit, _multiple=True )
 
+
+    class TestSortable(Tag.div):
+        def init(self,root):
+            self.output=root.output
+
+            ll=[Tag.div(f"Item {i} (drag me)",value=i) for i in range(10)]
+                    
+            def onchange(o:ui.Sortable):
+                self.output( str([i.value for i in o.values]) )
+
+            self <= ui.Sortable(ll,onchange=onchange)
+
+
+    class TestVscroll(Tag.div):
+        def init(self,root):
+            self.output=root.output
+
+            #=====================================================================
+            def feed():
+                yield [Tag.div(i) for i in range(20) ]
+            
+            self <= Tag.h3("Unlimited scrolling")
+            self <= Tag.div(_style="height:200px; border:1px solid red;" ) <= ui.VScroll( feed )
+            #=====================================================================
+
+            
+
+            #=====================================================================
+            class O(Tag.div):
+                def init(self,x):
+                    self <= x
+                    self["style"]="display:inline-block;width:100px;height:100px;border:1px solid black"
+    
+            # scrolling on demand in a defined list (of lambda())
+            self <= Tag.h3("On-demand vertical scroll")
+            self <= Tag.div(_style="height:200px; border:1px solid red;" ) <= ui.VScrollPager([lambda i=i: O(i) for i in range(1,200)])
+
+
+
     class App(ui.App):
         statics="""
         my {cursor:pointer;padding:4px;margin:4px;display:inline-block;text-decoration:underline}
@@ -258,6 +297,8 @@ def setter(o,testobject):
                 menu <= Tag.my("Inputs statics",_onclick=lambda ev: setter(ev.target,TestInputs(self)) )
                 menu <= Tag.my("I-fields dynamics",_onclick=lambda ev: setter(ev.target,TestInputs(self,True)) )
                 menu <= Tag.my("others",_onclick=lambda ev: setter(ev.target,TestOthers(self)) )
+                menu <= Tag.my("Sortable",_onclick=lambda ev: setter(ev.target,TestSortable(self)) )
+                menu <= Tag.my("VScroll",_onclick=lambda ev: setter(ev.target,TestVscroll(self)) )
             self <= menu
             self <= Tag.hr()
             self <= self.omain