thooge
/
esp32-nmea2000-obp60
mirror of https://github.com/thooge/esp32-nmea2000-obp60.git
1
0
Fork 0
Code Releases Activity

allow to add an url tab button

This commit is contained in:
andreas 2024-10-13 17:12:10 +02:00
parent 47973b6bcf
commit 795117b6f4
4 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/exampletask/index.css Normal file
View File

@ -0,0 +1,3 @@
.examplecss{
background-color: coral;
}

8
lib/exampletask/index.js
View File

@ -8,6 +8,7 @@
let isActive=false; let isActive=false;
const tabName="example"; const tabName="example";
const configName="exampleBDSel"; const configName="exampleBDSel";
const infoUrl='https://github.com/wellenvogel/esp32-nmea2000/tree/master/lib/exampletask';
let boatItemName; let boatItemName;
let boatItemElement; let boatItemElement;
api.registerListener((id,data)=>{ api.registerListener((id,data)=>{
@ -21,7 +22,12 @@
//using normal dom manipulation methods //using normal dom manipulation methods
//you can use the helper addEl to create elements //you can use the helper addEl to create elements
let page=api.addTabPage(tabName,"Example"); let page=api.addTabPage(tabName,"Example");
api.addEl('div','',page,"this is a test tab"); api.addEl('div','hdg',page,"this is a test tab");
api.addEl('button','',page,'Info').addEventListener('click',function(ev){
window.open(infoUrl,'info');
})
//add a tab for an external URL
api.addTabPage('exhelp','Info',infoUrl);
} }
} }
if (isActive){ if (isActive){

1
web/index.css
View File

@ -223,6 +223,7 @@ body {
} }
#tabs { #tabs {
display: flex; display: flex;
flex-wrap: wrap;
border-bottom: 1px solid grey; border-bottom: 1px solid grey;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }

8
web/index.js
View File

@ -1944,13 +1944,17 @@
reader.readAsArrayBuffer(slice); reader.readAsArrayBuffer(slice);
}); });
} }
function addTabPage(name,label){ function addTabPage(name,label,url){
if (label === undefined) label=name; if (label === undefined) label=name;
let tab=addEl('div','tab','#tabs',label); let tab=addEl('div','tab','#tabs',label);
tab.setAttribute('data-page',name);
tab.addEventListener('click',function(ev){ tab.addEventListener('click',function(ev){
handleTab(ev.target); handleTab(ev.target);
}) })
if (url !== undefined){
tab.setAttribute('data-url',url);
return;
}
tab.setAttribute('data-page',name);
let page=addEl('div','tabPage hidden','#tabPages'); let page=addEl('div','tabPage hidden','#tabPages');
page.setAttribute('id',name); page.setAttribute('id',name);
return page; return page;