Andrew Zambazos
139 lines
5.9 KiB
HTML
139 lines
5.9 KiB
HTML
<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> |