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 • 5.36 kB
JavaScript
const bottomBar={itemList:[],selectedIndex:-1,onItemClickFunc:function(){},create:function(t={}){bottomBar.box=createBox(),bottomBar.default={width:"container-width",height:80,showSelectedText:1,highLightColor:"#141414",reverseColorOfSelectedIcon:1,normalIconSpace:16,selectedIconSpace:6,showWithMotion:0,normalIconOpacity:.7,selectedIconOpacity:.85},UICore.parseParameters(bottomBar.default,t),"container-width"==bottomBar.default.width&&(bottomBar.default.width=bottomBar.box.containerBox.width),that.width=bottomBar.default.width,that.height=bottomBar.default.height,that.color="white",that.border=0,that.borderColor="rgba(0, 0, 0, 0)",that.element.style.borderTopWidth="2px",that.element.style.textAlign="center",that.visible=0,that.left=0,that.top=bottomBar.box.containerBox.height-bottomBar.default.height,that.element.style.overflow="visible",that.setMotion("top 0.2s, opacity 0.2s"),bottomBar.box.boxHighLight=createBox(105,5),bottomBar.box.add(that),that.width=bottomBar.default.height-10,that.height=bottomBar.default.height-10,that.round=50,that.border=0,that.borderColor="rgba(0, 0, 0, 0.05)",that.color=bottomBar.default.highLightColor,that.opacity=1,that.setMotion("left 0.3s, background-color 0.3s"),bottomBar.box.lblText=createLabel(),bottomBar.box.add(that),that.text="",that.fontSize=14,that.color="rgba(255, 255, 255, 0.8)",that.border=1,that.borderColor="rgba(0, 0, 0, 0.6)",that.spaceX=8,that.spaceY=3,that.round=6,that.opacity=0,that.setMotion("left 0.3s, background-color 0.3s, opacity 0.3s"),bottomBar.box.lblText.onResize((function(){}))},moveWithMotion:function(){bottomBar.default.showSelectedText&&0!=bottomBar.box.opacity&&bottomBar.box.lblText.aline(bottomBar.box.boxHighLight,"top",20,"center")},createItemsByDataList:function(t){bottomBar.removeItems();for(var o=0;o<t.length;o++)bottomBar.addItem(t[o],o)},removeItems:function(){for(var t=0;t<bottomBar.itemList.length;t++)bottomBar.itemList[t].remove();bottomBar.itemList=[],bottomBar.selectedIndex=-1},addItem:function(t,o){var e="item"+bottomBar.itemList.length;bottomBar.box[e]=createBox();const a=bottomBar.box[e];bottomBar.box.add(a),a.color="transparent",a.width=bottomBar.default.height,a.height=bottomBar.default.height,a.itemIndex=o,a.itemData=t,a.pageId=t.pageId,a.left=0,a.top=0,a.element.style.position="relative",a.element.style.display="inline-block",a.imgIcon=createImage(),a.add(that),that.load(t.iconFile),that.width=bottomBar.default.height,that.height=bottomBar.default.height,that.space=bottomBar.default.normalIconSpace,that.opacity=bottomBar.default.normalIconOpacity,that.left=0,that.top=0,that.setMotion("padding 0.3s, opacity 0.3s"),a.onClick((function(t){bottomBar.onItemClickFunc(t.pageId)})),bottomBar.itemList.push(a),makeBasicObject(a)},selectItemByIndex:function(t){t>=bottomBar.itemList.length&&(t=bottomBar.itemList.length-1),bottomBar.selectItem(bottomBar.itemList[t])},selectItem:function(t){bottomBar.selectedIndex!=t.itemIndex&&(bottomBar.unselectItem(),bottomBar.selectedIndex=t.itemIndex,t.clickable=0,t.imgIcon.space=bottomBar.default.selectedIconSpace,t.imgIcon.opacity=bottomBar.default.selectedIconOpacity,bottomBar.default.reverseColorOfSelectedIcon&&(t.imgIcon.element.style.filter="invert(100%)"),bottomBar.box.boxHighLight.color=t.itemData.highLightColor||bottomBar.default.highLightColor,bottomBar.box.boxHighLight.left=t.element.offsetLeft+5),bottomBar.default.showSelectedText&&bottomBar.changeSelectedText(t.itemData.text)},unselectItem:function(){if(-1!=bottomBar.selectedIndex){const t=bottomBar.itemList[bottomBar.selectedIndex];t.clickable=1,t.imgIcon.space=bottomBar.default.normalIconSpace,t.imgIcon.opacity=bottomBar.default.normalIconOpacity,t.imgIcon.element.style.filter="none"}},changeSelectedText:function(t){bottomBar.box.lblText.opacity=1,bottomBar.box.lblText.text=t,bottomBar.box.lblText.timer&&clearTimeout(bottomBar.box.lblText.timer),bottomBar.box.lblText.timer=setTimeout((function(){bottomBar.box.lblText.opacity=0}),600),bottomBar.moveWithMotion()},setVisible:function(t){t!=bottomBar.box.visible&&(bottomBar.default.showWithMotion?t?(bottomBar.box.top=bottomBar.box.containerBox.height,bottomBar.box.opacity=0,bottomBar.box.visible=1,bottomBar.box.withMotion((function(t){t.top=bottomBar.box.containerBox.height-bottomBar.default.height,t.opacity=1}))):bottomBar.box.withMotion((function(t){t.top=bottomBar.box.containerBox.height,t.opacity=0,setTimeout((function(){bottomBar.box.visible=0}),250)})):(bottomBar.box.top=t?bottomBar.box.containerBox.height-bottomBar.default.height:bottomBar.box.containerBox.height,bottomBar.box.opacity=t,bottomBar.box.visible=t))},getVisible:function(){return bottomBar.box.visible},onItemClick:function(t){bottomBar.onItemClickFunc=t},getHeight:function(){return bottomBar.box.height},setBorderLine:function(t){bottomBar.box.borderColor=t?"rgba(0, 0, 0, 0.1)":"rgba(0, 0, 0, 0)"},createBudgeOnItem:function(t={}){const o=t.itemIndex||0,e=createLabel();return bottomBar.itemList[o].add(e),e.text="3",e.fontSize=14,e.color="indianred",e.spaceX=8,e.spaceY=3,e.round=20,e.element.style.fontFamily="opensans-bold",e.border=3,e.borderColor="white",e.textColor="white",e.top=6,e.right=4,e.setVisible=function(t){e.visible=t},e.setColor=function(t){e.color=t},e.setValue=function(t){e.text=t,e.visible=t>0?1:0},e.getValue=function(){return e.text},makeBasicObject(e),e}};