TeaSpeak
/
TeaWeb
1
0
Fork 0
Code Issues 1 Pull Requests Activity

Redesigned some style

canary
WolverinDEV 2019-02-09 20:23:15 +01:00
parent 9cd8f23987
commit 8afab8d100
35 changed files with 9361 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ChangeLog.md
View File

@ -1,4 +1,14 @@
# Changelog:
* **XX.XX.19**
- Improved UI now using the material design framework based on bootstrap
- Fixed several UI overflow or small screen issues
- Improved permission editor performance
- Added hash rate to identity improve
- Merged CSS files in release mode
* **04.02.19**
- Fixed channel permissions
* **27.01.19**
- Made sounds configurable
- Added option to mute sounds when output is muted

30
files.php
View File

@ -37,13 +37,37 @@
"path" => "js/workers/",
"local-path" => "./shared/js/workers/"
],
[ /* shared css files */
[ /* shared developer single css files */
"type" => "css",
"search-pattern" => "/.*\.css$/",
"build-target" => "dev",
"path" => "css/",
"local-path" => "./shared/css/"
],
[ /* shared release css files */
"type" => "css",
"search-pattern" => "/.*\.css$/",
"build-target" => "rel",
"path" => "css/",
"local-path" => "./shared/generated/"
],
[ /* shared release css files */
"type" => "css",
"search-pattern" => "/.*\.css$/",
"build-target" => "rel",
"path" => "css/loader/",
"local-path" => "./shared/css/loader/"
],
[ /* shared release css files */
"type" => "css",
"search-pattern" => "/.*\.css$/",
"build-target" => "dev|rel",
"path" => "css/",
"local-path" => "./shared/css/"
"path" => "css/theme/",
"local-path" => "./shared/css/theme/"
],
[ /* shared sound files */
"type" => "wav",

7
package.json
View File

@ -10,6 +10,7 @@
"dtsgen": "node tools/dtsgen/index.js",
"trgen": "node tools/trgen/index.js",
"ttsc": "ttsc",
"csso": "csso",
"rebuild-structure-web-dev": "php files.php generate web dev"
},
"author": "TeaSpeak (WolverinDEV)",
@ -22,6 +23,7 @@
"@types/node": "^9.4.6",
"@types/sha256": "^0.2.0",
"@types/websocket": "0.0.38",
"csso-cli": "^2.0.2",
"electron": "^3.0.2",
"gulp": "^3.9.1",
"sass": "^1.14.1",
@ -37,5 +39,8 @@
"bugs": {
"url": "https://github.com/TeaSpeak/TeaWeb/issues"
},
"homepage": "https://www.teaspeak.de"
"homepage": "https://www.teaspeak.de",
"dependencies": {
"clean-css": "^4.2.1"
}
}

28
scripts/web_build.sh
View File

@ -4,14 +4,14 @@ BASEDIR=$(dirname "$0")
cd "$BASEDIR/../"
source ./scripts/resolve_commands.sh
if [ "$1" == "development" ] || [ "$1" == "dev" ]; then
if [[ "$1" == "development" ]] || [[ "$1" == "dev" ]]; then
source_path="web/environment/development"
type="development"
elif [ "$1" == "release" ] || [ "$1" == "rel" ]; then
elif [[ "$1" == "release" ]] || [[ "$1" == "rel" ]]; then
source_path="web/environment/release"
type="release"
else
if [ $# -lt 1 ]; then
if [[ $# -lt 1 ]]; then
echo "Invalid argument count!"
else
echo "Invalid option $1"
@ -22,14 +22,14 @@ fi
echo "Generating style files"
npm run compile-sass
if [ $? -ne 0 ]; then
if [[ $? -ne 0 ]]; then
echo "Failed to generate style files"
exit 1
fi
echo "Generating web workers"
npm run build-worker
if [ $? -ne 0 ]; then
if [[ $? -ne 0 ]]; then
echo "Failed to build web workers"
exit 1
fi
@ -37,7 +37,7 @@ fi
#Lets build some tools
#dtsgen should be already build by build_declarations.sh
./tools/build_trgen.sh
if [ $? -ne 0 ]; then
if [[ $? -ne 0 ]]; then
echo "Failed to build typescript translation generator"
exit 1
fi
@ -45,16 +45,16 @@ fi
#Now lets build the declarations
echo "Building declarations"
./scripts/build_declarations.sh
if [ $? -ne 0 ]; then
if [[ $? -ne 0 ]]; then
echo "Failed to generate declarations"
exit 1
fi
if [ "$type" == "release" ]; then #Compile everything for release mode
if [[ "$type" == "release" ]]; then #Compile everything for release mode
#Compile the shared source first
echo "Building shared source"
./shared/generate_packed.sh
if [ $? -ne 0 ]; then
if [[ $? -ne 0 ]]; then
echo "Failed to build shared source"
exit 1
fi
@ -62,21 +62,21 @@ if [ "$type" == "release" ]; then #Compile everything for release mode
#Now compile the web client itself
echo "Building web client"
./web/generate_packed.sh
if [ $? -ne 0 ]; then
if [[ $? -ne 0 ]]; then
echo "Failed to build web client"
exit 1
fi
elif [ "$type" == "development" ]; then
elif [[ "$type" == "development" ]]; then
echo "Building shared source"
execute_ttsc -p ./shared/tsconfig/tsconfig.json
if [ $? -ne 0 ]; then
if [[ $? -ne 0 ]]; then
echo "Failed to compile shared sources"
exit 1
fi
echo "Building web client source"
execute_ttsc -p ./web/tsconfig/tsconfig.json
if [ $? -ne 0 ]; then
if [[ $? -ne 0 ]]; then
echo "Failed to compile web sources"
exit 1
fi
@ -84,7 +84,7 @@ fi
echo "Generating environment"
php files.php generate web ${type}
if [ $? -ne 0 ]; then
if [[ $? -ne 0 ]]; then
echo "Failed to generate environment"
exit 1
fi

0
shared/css/loader.scss → shared/css/loader/loader.scss
View File

0
shared/css/context_menu.scss → shared/css/static/context_menu.scss
View File

0
shared/css/control_bar.scss → shared/css/static/control_bar.scss
View File

0
shared/css/frame/SelectInfo.scss → shared/css/static/frame/SelectInfo.scss
View File

2
shared/css/general.scss → shared/css/static/general.scss
View File

@ -344,7 +344,7 @@ body {
width: 32px;
height: 32px;
background: url('../img/music/playlist.svg') no-repeat;
background: url('%%base_path%%/img/music/playlist.svg') no-repeat;
background-position: -11px -9px;
background-size: 50px;
}

0
shared/css/helptag.scss → shared/css/static/helptag.scss
View File

0
shared/css/htmltags.scss → shared/css/static/htmltags.scss
View File

0
shared/css/modal-bancreate.scss → shared/css/static/modal-bancreate.scss
View File

0
shared/css/modal-banlist.scss → shared/css/static/modal-banlist.scss
View File

0
shared/css/modal-bookmarks.scss → shared/css/static/modal-bookmarks.scss
View File

0
shared/css/modal-channel.scss → shared/css/static/modal-channel.scss
View File

0
shared/css/modal-connect.scss → shared/css/static/modal-connect.scss
View File

0
shared/css/modal-permissions.scss → shared/css/static/modal-permissions.scss
View File

0
shared/css/modal-playlist.scss → shared/css/static/modal-playlist.scss
View File

0
shared/css/modal-poke.scss → shared/css/static/modal-poke.scss
View File

0
shared/css/modal-query.scss → shared/css/static/modal-query.scss
View File

0
shared/css/modal-server.scss → shared/css/static/modal-server.scss
View File

0
shared/css/modal-settings.scss → shared/css/static/modal-settings.scss
View File

0
shared/css/modals.scss → shared/css/static/modals.scss
View File

6
shared/css/music/info_plate.scss → shared/css/static/music/info_plate.scss
View File

@ -132,17 +132,17 @@ $ease: cubic-bezier(.45, 0, .55, 1);
.btn-forward span {
background-size: calc(42px * 2) calc(42px * 2);
margin-left: 10px;
background: url("../../img/music/forward.svg") no-repeat center;
background: url("%%base_path%%/img/music/forward.svg") no-repeat center;
}
.btn-rewind span {
background-size: calc(42px * 2) calc(42px * 2);
margin-left: 10px;
background: url("../../img/music/rewind.svg") no-repeat center;
background: url("%%base_path%%/img/music/rewind.svg") no-repeat center;
}
.btn-settings span {
background-size: calc(42px * 2) calc(42px * 2);
margin-left: 10px;
background: url("../../img/music/playlist.svg") no-repeat center;
background: url("%%base_path%%/img/music/playlist.svg") no-repeat center;
}
}

0
shared/css/scroll.scss → shared/css/static/scroll.scss
View File

0
shared/css/ts/chat.scss → shared/css/static/ts/chat.scss
View File

8
shared/css/ts/client.scss → shared/css/static/ts/client.scss
View File

@ -44,12 +44,6 @@
.channelTree div.c {justify-content: center;}
.channelTree div.r {justify-content: flex-end;}
.channelTree div.solidline{ background: url('../images/viewer/spacer_solidline.gif') repeat-x left center;margin: 0px; }
.channelTree div.dashline{ background: url('../images/viewer/spacer_dashline.gif') repeat-x left center;margin: 0px; }
.channelTree div.dashdotline{ background: url('../images/viewer/spacer_dashdotline.gif') repeat-x left center;margin: 0px; }
.channelTree div.dashdotdotline{ background: url('../images/viewer/spacer_dashdotdotline.gif') repeat-x left center;margin: 0px; }
.channelTree div.dotline{ background: url('../images/viewer/spacer_dotline.gif') repeat-x left center;margin: 0px; }
.channelTree div * {vertical-align: middle;display:inline-block;height: 16px;padding: 0px;}
.channelTree div img {border: 0;}
.channelTree div > span {position: absolute; right: 0;}
@ -143,7 +137,7 @@
background: #005cbf;
}
.clicon {width:16px;height:16px;background:url('../../img/ts/basic_icons.png') no-repeat;background-size: 16px 608px;}
.clicon {width:16px;height:16px;background:url('%%base_path%%/img/ts/basic_icons.png') no-repeat;background-size: 16px 608px;}
.host {background-position: 0 -448px}
.server_open {background-position: 0 -352px}

4
shared/css/ts/icons.scss → shared/css/static/ts/icons.scss
View File

@ -8,7 +8,7 @@
width: 16px;
height: 16px;
background: url('../../img/client_icon_sprite.svg') no-repeat;
background: url('%%base_path%%/img/client_icon_sprite.svg') no-repeat;
}
/* Icons x16 */
@ -612,7 +612,7 @@
.icon_x32 {
display: inline-block;
background: url('../../img/client_icon_sprite.svg') no-repeat;
background: url('%%base_path%%/img/client_icon_sprite.svg') no-repeat;
background-size: calc(496px * 2) calc(400px * 2);
height: 32px;
width: 32px;

0
shared/css/ts/tab.scss → shared/css/static/ts/tab.scss
View File

18
shared/generate_packed.sh
View File

@ -6,29 +6,37 @@ source ../scripts/resolve_commands.sh
#Generate the loader definitions first
LOADER_FILE="declarations/exports_loader.d.ts"
if [ -e ${LOADER_FILE} ]; then
if [[ -e ${LOADER_FILE} ]]; then
rm ${LOADER_FILE}
if [ $? -ne 0 ]; then
if [[ $? -ne 0 ]]; then
echo "Failed to remove loader file!\nThis could be critical later!"
fi
fi
npm run dtsgen -- --config $(pwd)/tsconfig/dtsconfig_loader.json -v
if [ ! -e ${LOADER_FILE} ]; then
if [[ ! -e ${LOADER_FILE} ]]; then
echo "Failed to generate definitions"
echo "$result"
exit 1
fi
execute_ttsc -p tsconfig/tsconfig_packed.json
if [ $? -ne 0 ]; then
if [[ $? -ne 0 ]]; then
echo "Failed to generate packed file!"
exit 1
fi
#Now link the loader file
if [ ! -L generated/load.js ]; then
if [[ ! -L generated/load.js ]]; then
rm generated/load.js 2>/dev/null
ln -rs js/load.js generated/load.js
fi
if [[ ! -d generated/static/ ]]; then
mkdir -p generated/static/
fi
# Create packed CSS file
find css/static/ -name '*.css' -exec cat {} \; | npm run csso -- --output `pwd`/generated/static/base.css
echo "Packed file generated!"
exit 0

130
shared/html/index.php
View File

@ -33,6 +33,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="TeaSpeak Web Client, connect to any TeaSpeak server without installing anything." />
<?php
if(!$WEB_CLIENT) {
@ -42,54 +43,25 @@
}
?>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/helptag.css" type="text/css">
<link rel="stylesheet" href="css/scroll.css" type="text/css">
<link rel="stylesheet" href="css/ts/tab.css" type="text/css">
<link rel="stylesheet" href="css/ts/chat.css" type="text/css">
<link rel="stylesheet" href="css/ts/client.css" type="text/css">
<link rel="stylesheet" href="css/ts/icons.css" type="text/css">
<link rel="stylesheet" href="css/general.css" type="text/css">
<link rel="stylesheet" href="css/modals.css" type="text/css">
<link rel="stylesheet" href="css/modal-bookmarks.css" type="text/css">
<link rel="stylesheet" href="css/modal-connect.css" type="text/css">
<link rel="stylesheet" href="css/modal-channel.css" type="text/css">
<link rel="stylesheet" href="css/modal-query.css" type="text/css">
<link rel="stylesheet" href="css/modal-playlist.css" type="text/css">
<link rel="stylesheet" href="css/modal-banlist.css" type="text/css">
<link rel="stylesheet" href="css/modal-bancreate.css" type="text/css">
<link rel="stylesheet" href="css/modal-settings.css" type="text/css">
<link rel="stylesheet" href="css/modal-poke.css" type="text/css">
<link rel="stylesheet" href="css/modal-server.css" type="text/css">
<link rel="stylesheet" href="css/modal-permissions.css" type="text/css">
<link rel="stylesheet" href="css/loader.css" type="text/css">
<link rel="stylesheet" href="css/music/info_plate.css" type="text/css">
<link rel="stylesheet" href="css/frame/SelectInfo.css" type="text/css">
<link rel="stylesheet" href="css/control_bar.css" type="text/css">
<link rel="stylesheet" href="css/context_menu.css" type="text/css">
<link rel="stylesheet" href="css/htmltags.css" type="text/css">
<link rel="stylesheet" href="vendor/bbcode/xbbcode.css" type="text/css">
<!-- https://localhost:9987/?forward_url=http%3A%2F%2Flocalhost%3A63344%2FWeb-Client%2Findex.php%3F_ijt%3D82b1uhmnh0a5l1n35nnjps5eid%26loader_ignore_age%3D1%26connect_default_host%3Dlocalhost%26default_connect_type%3Dforum%26default_connect_url%3Dtrue%26default_connect_type%3Dteamspeak%26default_connect_url%3Dlocalhost%253A9987 -->
<!-- PHP generated properies -->
<!-- localhost:63342/TeaSpeak-Web/index.php?_ijt=o48hmliefjoa8cer8v7mpl98pj&connect_default_host=192.168.43.141 -->
<!-- PHP generated properties -->
<x-properties id="properties">
<!-- <x-property key="" value=""/> -->
<?php
function spawnProperty($name, $value)
function spawn_property($name, $value)
{
echo '<x-property key="' . $name . '" value="' . urlencode($value) . '"></x-property>';
if(isset($value))
echo "\t\t\t<x-property key=\"" . $name . "\" value=\"" . urlencode($value) . "\"></x-property>\r\n";
}
spawnProperty('connect_default_host', $localhost ? "localhost" : "ts.TeaSpeak.de");
spawnProperty('localhost_debug', $localhost ? "true" : "false");
spawnProperty('forum_user_data', isset($GLOBALS["COOKIE_NAME_USER_DATA"]) ? $_COOKIE[$GLOBALS["COOKIE_NAME_USER_DATA"]] : "");
spawnProperty('forum_user_sign', isset($GLOBALS["COOKIE_NAME_USER_SIGN"]) ? $_COOKIE[$GLOBALS["COOKIE_NAME_USER_SIGN"]] : "");
spawnProperty('forum_path', authPath());
spawn_property('connect_default_host', $localhost ? "localhost" : "ts.TeaSpeak.de");
spawn_property('localhost_debug', $localhost ? "true" : "false");
spawn_property('forum_user_data', isset($GLOBALS["COOKIE_NAME_USER_DATA"]) ? $_COOKIE[$GLOBALS["COOKIE_NAME_USER_DATA"]] : null);
spawn_property('forum_user_sign', isset($GLOBALS["COOKIE_NAME_USER_SIGN"]) ? $_COOKIE[$GLOBALS["COOKIE_NAME_USER_SIGN"]] : null);
spawn_property('forum_path', authPath());
$version = file_get_contents("./version");
if ($version === false)
$version = "unknown";
spawnProperty("version", $version);
spawn_property("version", $version);
?>
</x-properties>
@ -106,28 +78,44 @@
gtag('config', 'UA-113151733-4');
</script>
<!-- material design -->
<!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"> -->
<link rel="stylesheet" href="css/bootstrap-material-design.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
<!-- required static style for the critical page and the enable javascript page -->
<style>
.fulloverlay {
z-index: 10000;
display: none;
position: fixed;
<script>
//const exports = {};
</script>
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
text-align: center;
}
.fulloverlay .container {
position: relative;
display: inline-block;
top: 30%
}
.no-js {
display: block;
}
</style>
<div id="style">
<link rel="stylesheet" href="css/loader/loader.css">
</div>
<div id="scripts">
<script type="application/javascript" src="js/load.js" defer></script>
</div>
</head>
<body>
<?php
if(true) {
?>
<!-- No javascript error -->
<div style="display: block; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: gray; z-index: 1000; text-align: center;" class="no-js">
<div style="position: relative; display: inline-block; top: 30%">
<div class="fulloverlay no-js">
<div class="container">
<img src="img/script.svg" height="128px">
<h1>Please enable JavaScript</h1>
<h3>TeaSpeak web could not run without it!</h3>
@ -139,7 +127,6 @@
while (elements.length > 0) //Removing these elements (even self)
elements.item(0).remove();
</script>
<?php } ?>
<!-- Loading screen -->
<div class="loader">
@ -159,8 +146,8 @@
</div>
<!-- Critical load error -->
<div style="display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: gray; z-index: 1000; text-align: center;" id="critical-load">
<div style="position: relative; display: inline-block; top: 30%">
<div class="fulloverlay" id="critical-load">
<div class="container">
<img src="img/script.svg" height="128px">
<h1 style="color: red">Got some trouble while loading important files!</h1>
<h3 class="detail"></h3>
@ -176,23 +163,26 @@
</div>
</body>
<?php
if($WEB_CLIENT) {
$TAG = "<footer>
<div class=\"container\" style=\"display: flex; flex-direction: row; align-content: space-between;\">
<div style=\"align-self: center; position: fixed; left: 5px;\">Open source on <a href=\"https://github.com/TeaSpeak/TeaSpeak-Web\" style=\"display: inline-block; position: relative\">github.com</a></div>
<div style=\"align-self: center;\">TeaSpeak Web client (" . $version . ") by WolverinDEV</div>
<div style=\"align-self: center; position: fixed; right: 5px;\">";
<?php
$footer_style = "display: none;";
$footer_forum = '';
if($WEB_CLIENT) {
$footer_style = "display: block;";
if (logged_in()) {
$TAG = $TAG . "<a href=\"" . authPath() . "auth.php?type=logout\">logout</a>";
$footer_forum = "<a href=\"" . authPath() . "auth.php?type=logout\">logout</a>";
} else {
$TAG = $TAG . "<a href=\"" . authPath() . "login.php\">Login</a> via the TeaSpeak forum.";
$footer_forum = "<a href=\"" . authPath() . "login.php\">Login</a> via the TeaSpeak forum.";
}
echo $TAG . "</div>
</div>
</footer>";
}
?>
<footer style="<?php echo $footer_style; ?>">
<div class="container" style="display: flex; flex-direction: row; align-content: space-between;">
<div style="align-self: center; position: fixed; left: 5px;">Open source on <a href="https://github.com/TeaSpeak/TeaSpeak-Web" style="display: inline-block; position: relative">github.com</a></div>
<div style="align-self: center;">TeaSpeak Web client (<?php echo $version; ?>) by WolverinDEV</div>
<div style="align-self: center; position: fixed; right: 5px;"><?php echo $footer_forum; ?></div>
</div>
</footer>
</html>

267
shared/js/load.ts
View File

@ -1,3 +1,14 @@
namespace app {
export enum Type {
UNKNOWN,
CLIENT_RELEASE,
CLIENT_DEBUG,
WEB_DEBUG,
WEB_RELEASE
}
export let type: Type = Type.UNKNOWN;
}
namespace loader {
type Task = {
name: string,
@ -14,6 +25,10 @@ namespace loader {
setting up the loading process
*/
SETUP,
/*
loading all style sheet files
*/
STYLE,
/*
loading all javascript files
*/
@ -113,7 +128,7 @@ namespace loader {
console.debug("[loader] finished loader.");
}
type Script = string | string[];
type SourcePath = string | string[];
function script_name(path: string | string[]) {
if(Array.isArray(path)) {
@ -133,7 +148,7 @@ namespace loader {
}
}
export async function load_script(path: Script) : Promise<void> {
export async function load_script(path: SourcePath) : Promise<void> {
if(Array.isArray(path)) { //We have some fallback
return load_script(path[0]).catch(error => {
if(error instanceof SyntaxError)
@ -161,28 +176,35 @@ namespace loader {
};
window.addEventListener('error', error_handler as any);
const timeout_handle = setTimeout(() => {
reject("timeout");
}, 5000);
tag.type = "application/javascript";
tag.async = true;
tag.defer = true;
tag.onerror = error => {
clearTimeout(timeout_handle);
window.removeEventListener('error', error_handler as any);
tag.remove();
reject(error);
};
tag.onload = () => {
clearTimeout(timeout_handle);
window.removeEventListener('error', error_handler as any);
console.debug("Script %o loaded", path);
setTimeout(resolve, 100);
};
document.getElementById("scripts").appendChild(tag);
tag.src = path;
});
}
}
export async function load_scripts(paths: Script[]) : Promise<void> {
export async function load_scripts(paths: SourcePath[]) : Promise<void> {
const promises: Promise<void>[] = [];
const errors: {
script: Script,
script: SourcePath,
error: any
}[] = [];
@ -206,6 +228,111 @@ namespace loader {
throw "failed to load script " + script_name(errors[0].script);
}
}
export async function load_style(path: SourcePath) : Promise<void> {
if(Array.isArray(path)) { //We have some fallback
return load_script(path[0]).catch(error => {
if(error instanceof SyntaxError)
return Promise.reject(error.source);
if(path.length > 1)
return load_script(path.slice(1));
return Promise.reject(error);
});
} else {
return new Promise<void>((resolve, reject) => {
const tag: HTMLLinkElement = document.createElement("link");
let error = false;
const error_handler = (event: ErrorEvent) => {
console.log("msg: %o, url: %o, line: %o, col: %o, error: %o", event.message, event.filename, event.lineno, event.colno, event.error);
if(event.filename == tag.href) { //FIXME!
window.removeEventListener('error', error_handler as any);
reject(new SyntaxError(event.error));
event.preventDefault();
error = true;
}
};
window.addEventListener('error', error_handler as any);
const timeout_handle = setTimeout(() => {
reject("timeout");
}, 5000);
tag.type = "text/css";
tag.rel="stylesheet";
tag.onerror = error => {
clearTimeout(timeout_handle);
window.removeEventListener('error', error_handler as any);
tag.remove();
console.error("File load error for file %s: %o", path, error);
reject("failed to load file " + path);
};
tag.onload = () => {
{
const css: CSSStyleSheet = tag.sheet as CSSStyleSheet;
const rules = css.cssRules;
const rules_remove: number[] = [];
const rules_add: string[] = [];
for(let index = 0; index < rules.length; index++) {
const rule = rules.item(index);
let rule_text = rule.cssText;
if(rule.cssText.indexOf("%%base_path%%") != -1) {
rules_remove.push(index);
rules_add.push(rule_text.replace("%%base_path%%", document.location.href));
}
}
for(const index of rules_remove.sort((a, b) => b > a ? 1 : 0))
css.removeRule(index);
for(const rule of rules_add)
css.insertRule(rule);
}
clearTimeout(timeout_handle);
window.removeEventListener('error', error_handler as any);
console.debug("Style sheet %o loaded", path);
setTimeout(resolve, 100);
};
document.getElementById("style").appendChild(tag);
tag.href = path;
});
}
}
export async function load_styles(paths: SourcePath[]) : Promise<void> {
const promises: Promise<void>[] = [];
const errors: {
sheet: SourcePath,
error: any
}[] = [];
for(const sheet of paths)
promises.push(load_style(sheet).catch(error => {
errors.push({
sheet: sheet,
error: error
});
return Promise.resolve();
}));
await Promise.all([...promises]);
if(errors.length > 0) {
console.error("Failed to load the following style sheet:");
for(const sheet of errors)
console.log(" - %o: %o", sheet.sheet, sheet.error);
displayCriticalError("Failed to load style sheet " + script_name(errors[0].sheet) + " <br>" + "View the browser console for more information!");
throw "failed to load style sheet " + script_name(errors[0].sheet);
}
}
}
/* define that here */
@ -247,6 +374,28 @@ function displayCriticalError(message: string) {
/* all javascript loaders */
const loader_javascript = {
detect_type: async () => {
/* test if js/proto.js is available. If so we're in debug mode */
const request = new XMLHttpRequest();
request.open('GET', 'js/proto.js', true);
await new Promise((resolve, reject) => {
request.onreadystatechange = () => {
if (request.readyState === 4){
if (request.status === 404) {
app.type = app.Type.WEB_RELEASE;
} else {
app.type = app.Type.WEB_DEBUG;
}
resolve();
}
};
request.onerror = () => {
reject("Failed to detect app type");
};
request.send();
});
},
load_scripts: async () => {
/*
if(window.require !== undefined) {
@ -261,8 +410,21 @@ const loader_javascript = {
*/
if(!window.require) {
//await loader.load_script(["vendor/jquery/jquery.min.js"]);
await loader.load_script(["vendor/jquery/jquery.min.js"]);
}
/* bootstrap material design and libs */
await loader.load_script(["vendor/popper/popper.js"]);
//depends on popper
await loader.load_script(["vendor/bootstrap-material/bootstrap-material-design.js"]);
loader.register_task(loader.Stage.JAVASCRIPT_INITIALIZING, {
name: "materialize body",
priority: 10,
function: async () => { $(document).ready(function() { $('body').bootstrapMaterialDesign(); }); }
});
await loader.load_script("vendor/jsrender/jsrender.min.js");
await loader.load_scripts([
["vendor/bbcode/xbbcode.js"],
@ -270,21 +432,18 @@ const loader_javascript = {
["https://webrtc.github.io/adapter/adapter-latest.js"]
]);
try {
await loader.load_script("js/proto.js");
//we're loading for debug
loader.register_task(loader.Stage.JAVASCRIPT, {
name: "scripts debug",
priority: 20,
function: loader_javascript.load_scripts_debug
});
} catch(error) {
if(app.type == app.Type.WEB_RELEASE || app.type == app.Type.CLIENT_RELEASE) {
loader.register_task(loader.Stage.JAVASCRIPT, {
name: "scripts release",
priority: 20,
function: loader_javascript.loadRelease
});
} else {
loader.register_task(loader.Stage.JAVASCRIPT, {
name: "scripts debug",
priority: 20,
function: loader_javascript.load_scripts_debug
});
}
},
load_scripts_debug: async () => {
@ -297,10 +456,12 @@ const loader_javascript = {
})
}
/* load the main app */
await loader.load_scripts([
["wasm/TeaWeb-Identity.js"],
//Load general API's
"js/proto.js",
"js/i18n/localize.js",
"js/log.js",
@ -328,7 +489,6 @@ const loader_javascript = {
"js/ui/modal/ModalSettings.js",
"js/ui/modal/ModalCreateChannel.js",
"js/ui/modal/ModalServerEdit.js",
"js/ui/modal/ModalConnect.js",
"js/ui/modal/ModalChangeVolume.js",
"js/ui/modal/ModalBanClient.js",
"js/ui/modal/ModalBanCreate.js",
@ -372,10 +532,9 @@ const loader_javascript = {
"js/client.js",
"js/chat.js",
"js/PPTListener.js"
]);
"js/PPTListener.js",
await loader.load_scripts([
"js/codec/CodecWrapperWorker.js",
"js/profiles/identities/NameIdentity.js", //Depends on Identity
"js/profiles/identities/TeaForumIdentity.js", //Depends on Identity
@ -450,6 +609,59 @@ const loader_webassembly = {
})
};
const loader_style = {
load_style: async () => {
await loader.load_styles([
"vendor/bbcode/xbbcode.css"
]);
if(app.type == app.Type.WEB_DEBUG || app.type == app.Type.CLIENT_DEBUG) {
await loader_style.load_style_debug();
} else {
await loader_style.load_style_release();
}
/* the material design */
await loader.load_style("css/theme/bootstrap-material-design.css");
},
load_style_debug: async () => {
await loader.load_styles([
"css/static/main.css",
"css/static/helptag.css",
"css/static/scroll.css",
"css/static/ts/tab.css",
"css/static/ts/chat.css",
"css/static/ts/client.css",
"css/static/ts/icons.css",
"css/static/general.css",
"css/static/modals.css",
"css/static/modal-bookmarks.css",
"css/static/modal-connect.css",
"css/static/modal-channel.css",
"css/static/modal-query.css",
"css/static/modal-playlist.css",
"css/static/modal-banlist.css",
"css/static/modal-bancreate.css",
"css/static/modal-settings.css",
"css/static/modal-poke.css",
"css/static/modal-server.css",
"css/static/modal-permissions.css",
"css/static/music/info_plate.css",
"css/static/frame/SelectInfo.css",
"css/static/control_bar.css",
"css/static/context_menu.css",
"css/static/htmltags.css"
]);
},
load_style_release: async () => {
await loader.load_styles([
"css/static/base.css",
"css/static/main.css",
]);
}
}
async function load_templates() {
try {
@ -527,9 +739,7 @@ function fadeoutLoader(duration = undefined, minAge = undefined, ignoreAge = und
}
if(typeof Module === "undefined")
this["Module"] = {};
window["Module"] = window["Module"] || {};
navigator.browserSpecs = (function(){
let ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
@ -595,6 +805,13 @@ loader.register_task(loader.Stage.INITIALIZING, {
priority: 10
});
loader.register_task(loader.Stage.INITIALIZING, {
name: "app type test",
function: loader_javascript.detect_type,
priority: 20
});
loader.register_task(loader.Stage.JAVASCRIPT_INITIALIZING, {
name: "javascript webassembly",
function: loader_webassembly.awaiter,
@ -608,6 +825,12 @@ loader.register_task(loader.Stage.JAVASCRIPT, {
priority: 10
});
loader.register_task(loader.Stage.STYLE, {
name: "style",
function: loader_style.load_style,
priority: 10
});
loader.register_task(loader.Stage.TEMPLATES, {
name: "templates",
function: load_templates,

6537
vendor/bootstrap-material/bootstrap-material-design.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

2442
vendor/popper/popper.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

0
web/css/main.scss → web/css/static/main.scss
View File