web2app-spa
Version:
This template is primarily designed to easily convert HTML pages and URLs into a Capacitor/Cordova based iOS/Android app that can be used as Single-page application (SPA).
1 lines • 4.61 kB
JavaScript
const sideBar={itemList:[],selectedItem:null,selectedItemIndex:-1,onSelectionChangeFunc:function(){},lockScreenButton:{}};sideBar.lockScreenButton.onClickFunc=function(){},sideBar.create=function(){const t=createBox(0,0,getDefaultContainerBox().width,getDefaultContainerBox().height);sideBar.box=t,t.color="transparent",t.border=0,t.visible=0,t.boxCover=createBox(0,0,getDefaultContainerBox().width,getDefaultContainerBox().height),t.add(that),that.color="rgba(0, 0, 0, 0.4)",that.setMotion("opacity 0.2s"),that.onClick((function(){sideBar.setVisible(0)})),t.boxContent=createBox(),t.add(that),that.border=0,that.color="whitesmoke",that.right=0,that.width=450,that.height=getDefaultContainerBox().height-8,that.top=4,that.element.style.borderTopLeftRadius="13px",that.element.style.borderBottomLeftRadius="13px",that.setMotion("right 0.2s, opacity 0.2s"),t.boxContent.lblTitle=createLabel(40,46,"auto"),t.boxContent.add(that),that.text="",that.element.style.fontFamily="opensans-bold",that.fontSize=28,t.boxContent.boxItems=createBox(0,105,t.boxContent.width,t.boxContent.height-200),t.boxContent.add(that),that.color="transparent",that.scrollY=1,1==settings.showLoginViewButtonOnSideBar&&(t.boxContent.imgLock=createImage(0,0,50,50),t.boxContent.add(that),that.load("assets/lock.png"),that.bottom=30,that.right=30,that.color="white",that.border=1,that.round=4,that.space=25,that.onClick((function(t){sideBar.setVisible(0),sideBar.lockScreenButton.onClickFunc()})))},sideBar.createItemsByDataList=function(t){sideBar.removeItems();for(let e=0;e<t.length;e++)sideBar.addItem(t[e],e)},sideBar.addItem=function(t,e){const o=createBox();that.top=0,that.left=0,that.index=e,that.itemId=t.itemId,that.itemData=t,that.height=54,that.width=sideBar.box.boxContent.width,that.color="transparent",that.border=0,that.element.style.position="relative",o.boxBackground=createBox(4,0,o.width-8,o.height),o.add(that),that.setMotion("background-color 0.2s"),that.round=4,that.borderColor="rgba(0, 0, 0, 0.2)",o.imgIcon=createImage(40,0,30,30),o.add(that),that.load(t.iconFile),that.element.style.filter="grayscale(50%)",that.center("top"),t.iconFile||(o.imgIcon.visible=0),o.lblName=createLabel(80,0,o.width-160,"auto"),o.add(that),that.textAlign="left",that.color="transparent",that.text=t.title,that.fontSize=26,that.clickable=0,that.border=0,that.onResize((function(t){t.center("top")})),o.lblCount=createLabel(0,0,"auto","auto"),o.add(that),that.color="rgba(0, 0, 0, 0.05)",that.spaceX=14,that.spaceY=6,that.text=t.info,that.round=13,that.right=30,that.onResize((function(t){t.center("top")})),""==t.info&&(o.lblCount.visible=0),o.onClick((function(t){sideBar.selectItem(t),sideBar.setVisible(0)})),sideBar.box.boxContent.boxItems.add(o),sideBar.normalItemStyle(o),sideBar.itemList.push(o)},sideBar.normalItemStyle=function(t){t.clickable=1,t.boxBackground.color="transparent",t.boxBackground.border=0},sideBar.selectedItemStyle=function(t){t.clickable=0,t.boxBackground.color="white",t.boxBackground.border=1},sideBar.removeItems=function(){for(var t=0;t<sideBar.itemList.length;t++)sideBar.itemList[t].remove();sideBar.itemList=[]},sideBar.setVisible=function(t){t!=sideBar.box.visible&&(t?(sideBar.box.boxCover.clickable=0,sideBar.box.boxCover.opacity=0,sideBar.box.boxContent.right=-1*sideBar.box.boxContent.width,sideBar.box.visible=1,sideBar.box.withMotion((function(t){sideBar.box.boxCover.opacity=1,sideBar.box.boxContent.right=0,sideBar.box.boxCover.clickable=1}))):(sideBar.box.boxCover.clickable=0,sideBar.box.boxCover.opacity=1,sideBar.box.boxContent.right=0,sideBar.box.withMotion((function(t){sideBar.box.boxCover.opacity=0,sideBar.box.boxContent.right=-1*sideBar.box.boxContent.width})),setTimeout((function(){sideBar.box.visible=0}),250)))},sideBar.selectItem=function(t){t.boxBackground.dontMotion(),t.boxBackground.color="white",t.boxBackground.border=1,t.boxBackground.withMotion((function(t){t.color="transparent",t.border=0})),sideBar.onSelectionChangeFunc(t.itemId)},sideBar.selectItemByIndex=function(t){const e=sideBar.getItemByIndex(t);e&&sideBar.selectItem(e)},sideBar.getItemByIndex=function(t){return t<sideBar.itemList.length&&t>=0?sideBar.itemList[t]:null},sideBar.getSelectedIndex=function(t){return sideBar.selectedItemIndex},sideBar.getSelectedItem=function(t){return sideBar.selectedItem},sideBar.setTitle=function(t){sideBar.box.boxContent.lblTitle.text=t},sideBar.setBackgroundColor=function(t){sideBar.box.boxContent.color=t},sideBar.onSelectionChange=function(t){sideBar.onSelectionChangeFunc=t},sideBar.lockScreenButton.onClick=function(t){sideBar.lockScreenButton.onClickFunc=t};