andrew/Ultralight-SDK
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added SDK

Browse Source
This commit is contained in:
Andrew Zambazos
2026-06-11 14:01:22 +12:00
commit c0395a49bd
2155 changed files with 451005 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/Sample 8 - Web Browser/assets/ui.html
+139
View File
@@ -0,0 +1,139 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="ui.css">
<link rel="stylesheet" type="text/css" href="chrome-tabs.css">
<script src="ui.js"></script>
<script src="anchorme.js"></script>
</head>
<body>
<button id="chrome-tabs-add-tab">+ New Tab</button>
<div class="chrome-tabs" data-chrome-tabs-instance-id="0">
<div class="chrome-tabs-content"></div>
<div class="chrome-tabs-bottom-bar" style="z-index: 3;"></div>
</div>
<svg style="display: none;">
<defs>
<g id="svg_arrow_back">
<path d="M427 277v-42h-260l119 -120l-30 -30l-171 171l171 171l30 -30l-119 -120h260z" />
</g>
<g id="svg_arrow_forward">
<path d="M256 427l171 -171l-171 -171l-30 30l119 120h-260v42h260l-119 120z" />
</g>
<g id="svg_refresh">
<path transform="matrix(1 0 0 -1 0 512)"
d="M377 377l50 50v-150h-150l69 69c-23 23 -55 38 -90 38c-71 0 -128 -57 -128 -128s57 -128 128 -128c56 0 104 35 121 85h44c-19 -74 -85 -128 -165 -128c-94 0 -170 77 -170 171s76 171 170 171c47 0 90 -19 121 -50z" />
</g>
<g id="svg_stop">
<path
d="M405 375l-119 -119l119 -119l-30 -30l-119 119l-119 -119l-30 30l119 119l-119 119l30 30l119 -119l119 119z" />
</g>
<g id="svg_tools">
<path
d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z" />
</g>
</defs>
</svg>
<div id="bar">
<span id="back" class="icon disabled">
<svg viewBox="0 0 512 512" width="20" height="20">
<use xlink:href="#svg_arrow_back" />
</svg>
</span>
<span id="forward" class="icon disabled">
<svg viewBox="0 0 512 512" width="20" height="20">
<use xlink:href="#svg_arrow_forward" />
</svg>
</span>
<span id="refresh" class="icon">
<svg viewBox="0 0 512 512" width="20" height="20">
<use xlink:href="#svg_refresh" />
</svg>
</span>
<span id="stop" class="icon" style="display: none;">
<svg viewBox="0 0 512 512" width="20" height="20">
<use xlink:href="#svg_stop" />
</svg>
</span>
<input onfocus="select_next_mouseup = true;"
onmouseup="if (select_next_mouseup) this.select(); select_next_mouseup = false;" type="text"
id="address"></input>
<span id="toggle-tools" class="icon">
<svg viewBox="0 0 24 24" width="18" height="18">
<use xlink:href="#svg_tools" />
</svg>
</span>
</div>
<script src="draggabilly.pkgd.min.js"></script>
<script src="chrome-tabs.js"></script>
<script>
var el = document.querySelector('.chrome-tabs')
var chromeTabs = new ChromeTabs()
var select_next_mouseup = false;
var defaultFavicon = "earth.svg";
chromeTabs.init(el, {
tabOverlapDistance: 6,
minWidth: 45,
maxWidth: 243
})
function addTab(id, title, faviconUrl, isLoading) {
chromeTabs.addTab({ id: id, title: title, favicon: defaultFavicon, loading: isLoading });
}
function updateTab(id, title, faviconUrl, isLoading) {
const tab = document.querySelector("[data-tab-id='" + id + "']");
if (tab)
chromeTabs.updateTab(tab, { title: title, favicon: defaultFavicon, loading: isLoading });
}
function closeTab(id) {
const tab = document.querySelector("[data-tab-id='" + id + "']");
if (tab)
chromeTabs.removeTab(tab);
}
function bindCallbacks() {
el.addEventListener('requestNewTab', ({ detail }) => OnRequestNewTab());
el.addEventListener('requestTabClose', ({ detail }) => OnRequestTabClose(detail.tabEl.getAttribute('data-tab-id')));
el.addEventListener('activeTabChange', ({ detail }) => OnActiveTabChange(detail.tabEl.getAttribute('data-tab-id')));
document.querySelector('#back').addEventListener('click', event => OnBack());
document.querySelector('#forward').addEventListener('click', event => OnForward());
document.querySelector('#refresh').addEventListener('click', event => OnRefresh());
document.querySelector('#stop').addEventListener('click', event => OnStop());
document.querySelector('#toggle-tools').addEventListener('click', event => OnToggleTools());
var address = document.querySelector('#address');
address.onkeypress = (function (e) {
if (e.which == '13') {
address.blur();
let url = address.value;
if (anchorme.validate.url(url) || anchorme.validate.ip(url)) {
if (url.toLowerCase().startsWith("http://") || url.toLowerCase().startsWith("https://")) {
OnRequestChangeURL(url);
} else {
OnRequestChangeURL("http://" + url);
}
} else if (url.toLowerCase().startsWith("file:///")) {
OnRequestChangeURL(url);
} else if (url.toLowerCase().startsWith("file://")) {
OnRequestChangeURL("file:///" + url.substring(7));
} else {
// Interpret as search
OnRequestChangeURL("https://www.google.com/search?q=" + encodeURIComponent(url));
}
return false;
}
});
}
bindCallbacks();
</script>
</body>
</html>