add View Object

Author: manatlan

README.md

@@ -352,6 +352,29 @@ self <= ui.Swiper(ll, default=0)
 ```
 
 
+## Object View
+
+A view component which handle the browser navigation mechanism (go back)
+
+**IMPORTANT**:
+
+ - this component is here for tests only (it may disappear if real problems)
+ - FOR POWER USERS : may be used as first class, and you need to understand how htag works, and how the browser history works ! (if the object is deleted -> nothing work)
+
+TODO: make a better good example !
+
+```python
+
+default_view=Tag.div("Default view")
+
+v = ui.View( default_view, _style="border:1px solid red;width:100%;height:400px" )
+
+self <= ui.Button("p1", _onclick = lambda ev: v.go( Tag.div("p1") ))
+self <= ui.Button("p2", _onclick = lambda ev: v.go( Tag.div("p2") ))
+self <= v
+```
+
+
 ## utilities methods
 
 ### hflex & vflex

htagui/all.py

@@ -16,7 +16,7 @@
 from .splitters import HSplit, VSplit
 from .ifields import IText,ITextarea,IRange,IBool,ISelect,IRadios
 from .fileupload import FileUpload
-from .containers import VScroll,VScrollPager    
+from .containers import VScroll,VScrollPager, View    
 from .sortables import Sortable
 from .swipers import Swiper
 class App(Tag.body):
@@ -33,5 +33,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]
+ALL=[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/containers.py

@@ -75,3 +75,24 @@ def _more(self):
         self.first=False
 
 
+class View(Tag.div):
+    def __init__(self,tag=None,**a):  # use complex constructor to do complex things ;-)
+        super().__init__(tag,**a)    
+        self.default = tag
+        self._refs={}
+        self.js = """
+if(!window._hashchange_listener) {
+    window.addEventListener('hashchange',() => {self._hashchange(document.location.hash);});
+    window._hashchange_listener=true;
+}
+"""
+    @expose
+    def _hashchange(self,hash):
+        self.clear( self._refs.get(hash, self.default) )
+
+    def go(self,tag,anchor=None):
+        """ Set object 'tag' in the View, and navigate to it """
+        anchor=anchor or str(id(tag))
+        self._refs[f'#{anchor}'] = tag
+        self.call( f"document.location=`#{anchor}`")
+

manual_tests.py

@@ -280,6 +280,22 @@ def cc(self,ev):
             self<= ui.Swiper([lambda i=i: Item(i) for i in range(50)])
 
 
+
+
+
+    class TestView(Tag.div):
+        def init(self,root):
+            self.output=root.output
+
+            default_view=Tag.div("Default view")
+
+            v = ui.View( default_view, _style="border:1px solid red;width:100%;height:400px" )
+
+            self <= v
+            self <= ui.Button("p1", _onclick = lambda ev: v.go( Tag.div("p1") ))
+            self <= ui.Button("p2", _onclick = lambda ev: v.go( Tag.div("p2") ))
+
+
     class App(ui.App):
         statics="""
         my {cursor:pointer;padding:4px;margin:4px;display:inline-block;text-decoration:underline}
@@ -316,6 +332,7 @@ def setter(o,testobject):
                 menu <= Tag.my("Sortable",_onclick=lambda ev: setter(ev.target,TestSortable(self)) )
                 menu <= Tag.my("VScroll",_onclick=lambda ev: setter(ev.target,TestVscroll(self)) )
                 menu <= Tag.my("Swiper",_onclick=lambda ev: setter(ev.target,TestSwiper(self)) )
+                menu <= Tag.my("View",_onclick=lambda ev: setter(ev.target,TestView(self)) )
             self <= menu
             self <= Tag.hr()
             self <= self.omain