eswyft/ch1p_io_web
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rewrite css and js assets building

Browse Source
This commit is contained in:
Evgeny Zinoviev 2022-07-11 02:59:35 +03:00
parent cb13ea239b
commit 864e73cdc7
32 changed files with 1046 additions and 852 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,7 +1,6 @@
/debug.log
test.php
/.git
/htdocs/css
/node_modules/
/vendor/
.DS_Store
@ -10,3 +9,5 @@ test.php
config-static.php
config-local.php
/.idea
/htdocs/dist-css
/htdocs/dist-js

96
build_static.php
View File

@ -1,96 +0,0 @@
#!/usr/bin/env php8.1
<?php
function gethash(string $path): string {
return substr(sha1(file_get_contents($path)), 0, 8);
}
function sassc(string $src_file, string $dst_file): int {
$cmd = 'sassc -t compressed '.escapeshellarg($src_file).' '.escapeshellarg($dst_file);
exec($cmd, $output, $code);
return $code;
}
function clean_css(string $file) {
$output = $file.'.out';
if (file_exists($output))
unlink($output);
$cmd = ROOT.'/node_modules/clean-css-cli/bin/cleancss -O2 "all:on;mergeSemantically:on;restructureRules:on" '.escapeshellarg($file).' > '.escapeshellarg($output);
system($cmd);
if (file_exists($output)) {
unlink($file);
rename($output, $file);
} else {
fwrite(STDERR, "error: could not cleancss $file\n");
}
}
function dark_diff(string $light_file, string $dark_file): void {
$temp_output = $dark_file.'.diff';
$cmd = ROOT.'/dark-theme-diff.js '.escapeshellarg($light_file).' '.$dark_file.' > '.$temp_output;
exec($cmd, $output, $code);
if ($code != 0) {
fwrite(STDERR, "dark_diff failed with code $code\n");
return;
}
unlink($dark_file);
rename($temp_output, $dark_file);
}
require __DIR__.'/init.php';
function build_static(): void {
$css_dir = ROOT.'/htdocs/css';
$hashes = [];
if (!file_exists($css_dir))
mkdir($css_dir);
// 1. scss -> css
$themes = ['light', 'dark'];
$entries = ['common', 'admin'];
foreach ($themes as $theme) {
foreach ($entries as $entry) {
$input = ROOT.'/htdocs/scss/entries/'.$entry.'/'.$theme.'.scss';
$output = $css_dir.'/'.$entry.($theme == 'dark' ? '_dark' : '').'.css';
if (sassc($input, $output) != 0)
fwrite(STDERR, "error: could not compile entries/$entry/$theme.scss\n");
}
}
// 2. generate dark theme diff
foreach ($entries as $entry) {
$light_file = $css_dir.'/'.$entry.'.css';
$dark_file = str_replace('.css', '_dark.css', $light_file);
dark_diff($light_file, $dark_file);
// 2.1. apply cleancss (must be done _after_ css-patch)
clean_css($light_file);
clean_css($dark_file);
}
// 3. calculate hashes
foreach (['css', 'js'] as $type) {
$reldir = ROOT.'/htdocs/';
$entries = glob_recursive($reldir.$type.'/*.'.$type);
if (empty($entries)) {
continue;
}
foreach ($entries as $file) {
$name = preg_replace('/^'.preg_quote($reldir, '/').'/', '', $file);
$hashes[$name] = gethash($file);
}
}
logInfo($hashes);
// 4. write config-static.php
$scfg = "<?php\n\n";
$scfg .= "return ".var_export($hashes, true).";\n";
file_put_contents(ROOT.'/config-static.php', $scfg);
}
build_static();

74
deploy/build_common.sh Normal file
View File

@ -0,0 +1,74 @@
#!/bin/bash
set -e
INDIR=
OUTDIR=
error() {
>&2 echo "error: $@"
}
warning() {
>&2 echo "warning: $@"
}
die() {
error "$@"
exit 1
}
usage() {
local code="$1"
cat <<EOF
usage: $PROGNAME [OPTIONS]
Options:
-o output directory
-i input directory
-h show this help
EOF
exit $code
}
input_args() {
[ -z "$1" ] && usage
while [[ $# -gt 0 ]]; do
case $1 in
-o)
OUTDIR="$2"
shift
;;
-i)
INDIR="$2"
shift
;;
-h)
usage
;;
*)
die "unexpected argument: $1"
;;
esac
shift
done
}
check_args() {
[ -z "$OUTDIR" ] && {
error "output directory not specified"
usage 1
}
[ -z "$INDIR" ] && {
error "input directory not specified"
usage 1
}
if [ ! -d "$OUTDIR" ]; then
mkdir "$OUTDIR"
else
warning "$OUTDIR already exists, erasing it"
rm "$OUTDIR"/*
fi
}

62
deploy/build_css.sh Executable file
View File

@ -0,0 +1,62 @@
#!/bin/bash
PROGNAME="$0"
DIR="$( cd "$( dirname "$(readlink -f "${BASH_SOURCE[0]}")" )" && pwd )"
ROOT="$(realpath "$DIR/../")"
CLEANCSS="$ROOT"/node_modules/clean-css-cli/bin/cleancss
. $DIR/build_common.sh
build_scss() {
local entry_name="$1"
local theme="$2"
local input="$INDIR/entries/$entry_name/$theme.scss"
local output="$OUTDIR/$entry_name"
[ "$theme" = "dark" ] && output="${output}_dark"
output="${output}.css"
sassc -t compressed "$input" "$output"
}
cleancss() {
local entry_name="$1"
local theme="$2"
local file="$OUTDIR/$entry_name"
[ "$theme" = "dark" ] && file="${file}_dark"
file="${file}.css"
$CLEANCSS -O2 "all:on;mergeSemantically:on;restructureRules:on" "$file" > "$file.tmp"
rm "$file"
mv "$file.tmp" "$file"
}
create_dark_patch() {
local entry_name="$1"
local light_file="$OUTDIR/$entry_name.css"
local dark_file="$OUTDIR/${entry_name}_dark.css"
"$DIR"/gen_css_diff.js "$light_file" "$dark_file" > "$dark_file.diff"
rm "$dark_file"
mv "$dark_file.diff" "$dark_file"
}
THEMES="light dark"
TARGETS="common admin"
input_args "$@"
check_args
[ -x "$CLEANCSS" ] || die "cleancss is not found"
for theme in $THEMES; do
for target in $TARGETS; do
build_scss "$target" "$theme"
done
done
for target in $TARGETS; do
create_dark_patch "$target"
for theme in $THEMES; do cleancss "$target" "$theme"; done
done

31
deploy/build_js.sh Executable file
View File

@ -0,0 +1,31 @@
#!/bin/bash
PROGNAME="$0"
DIR="$( cd "$( dirname "$(readlink -f "${BASH_SOURCE[0]}")" )" && pwd )"
. $DIR/build_common.sh
# suckless version of webpack
# watch and learn, bitches!
build_chunk() {
local name="$1"
local output="$OUTDIR/$name.js"
local not_first=0
for file in "$INDIR/$name"/*.js; do
# insert newline before out comment
[ "$not_first" = "1" ] && echo "" >> "$output"
echo "/* $(basename "$file") */" >> "$output"
cat "$file" >> "$output"
not_first=1
done
}
TARGETS="common admin"
input_args "$@"
check_args
for f in $TARGETS; do
build_chunk "$f"
done

10
deploy.sh → deploy/deploy.sh
View File

@ -2,9 +2,9 @@
set -e
DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
DIR="$( cd "$( dirname "$(readlink -f "${BASH_SOURCE[0]}")" )" && pwd )"
DEV_DIR="${DIR}"
DEV_DIR="$(realpath "$DIR/../")"
STAGING_DIR="$HOME/staging"
PROD_DIR="$HOME/prod"
PHP=/usr/bin/php8.1
@ -33,7 +33,9 @@ fi
cp "$DEV_DIR/config-local.php" .
sed -i '/is_dev/d' ./config-local.php
$PHP build_static.php
"$DIR"/build_js.sh -i "$DEV_DIR/htdocs/js" -o "$STAGING_DIR/htdocs/dist-js" || die "build_js failed"
"$DIR"/build_css.sh -i "$DEV_DIR/htdocs/scss" -o "$STAGING_DIR/htdocs/dist-css" || die "build_css failed"
$PHP "$DIR"/gen_static_config.php > "$STAGING_DIR/config-static.php" || die "gen_static_config failed"
popd
@ -43,6 +45,8 @@ rsync -a --delete --delete-excluded --info=progress2 "$STAGING_DIR/" "$PROD_DIR/
--exclude debug.log \
--exclude='/composer.*' \
--exclude='/htdocs/scss' \
--exclude='/htdocs/js' \
--exclude='/htdocs/sass.php' \
--exclude='/htdocs/js.php' \
--exclude='*.sh' \
--exclude='*.sql'

0
dark-theme-diff.js → deploy/gen_css_diff.js
View File

57
deploy/gen_static_config.php Executable file
View File

@ -0,0 +1,57 @@
#!/usr/bin/env php8.1
<?php
require __DIR__.'/../init.php';
if ($argc <= 1) {
usage();
exit(1);
}
$input_dir = null;
array_shift($argv);
while (count($argv) > 0) {
switch ($argv[0]) {
case '-i':
array_shift($argv);
$input_dir = array_shift($argv);
break;
default:
cli::die('unsupported argument: '.$argv[0]);
}
}
if (is_null($input_dir))
cli::die("input directory has not been specified");
$hashes = [];
foreach (['css', 'js'] as $type) {
$entries = glob_recursive($input_dir.'/dist-'.$type.'/*.'.$type);
if (empty($entries)) {
cli::error("warning: no files found in $input_dir/dist-$type");
continue;
}
foreach ($entries as $file)
$hashes[$type.'/'.basename($file)] = get_hash($file);
}
echo "<?php\n\n";
echo "return ".var_export($hashes, true).";\n";
function usage(): void {
global $argv;
echo <<<EOF
usage: {$argv[0]} [OPTIONS]
Options:
-i input htdocs directory
EOF;
}
function get_hash(string $path): string {
return substr(sha1(file_get_contents($path)), 0, 8);
}

4
engine/RequestDispatcher.php
View File

@ -39,8 +39,8 @@ class RequestDispatcher {
}
$skin = new Skin();
$skin->static[] = '/css/common.css';
$skin->static[] = '/js/common.js';
$skin->static[] = 'css/common.css';
$skin->static[] = 'js/common.js';
$lang = LangData::getInstance();
$skin->addLangKeys($lang->search('/^theme_/'));

3
engine/logging.php
View File

@ -72,6 +72,9 @@ class logging {
}
public static function logCustom(LogLevel $level, ...$args): void {
global $config;
if (!$config['is_dev'] && $level == LogLevel::DEBUG)
return;
self::write($level, self::strVars($args));
}

4
handler/admin/AdminRequestHandler.php
View File

@ -8,8 +8,8 @@ use Response;
class AdminRequestHandler extends \RequestHandler {
public function beforeDispatch(): ?Response {
$this->skin->static[] = '/css/admin.css';
$this->skin->static[] = '/js/admin.js';
$this->skin->static[] = 'css/admin.css';
$this->skin->static[] = 'js/admin.js';
if (!($this instanceof Login) && !admin::isAdmin())
throw new \ForbiddenException('looks like you are not admin');

1
htdocs/css/admin.css Normal file
View File

@ -0,0 +1 @@
.admin-page{line-height:155%}

0
htdocs/css/admin_dark.css Normal file
View File

1
htdocs/css/common.css Normal file
View File

File diff suppressed because one or more lines are too long

1
htdocs/css/common_dark.css Normal file
View File

@ -0,0 +1 @@
.head-logo,body,html{background-color:#222}.blog-item-date,.blog-post-date,.blog-post-text blockquote,.blog-post-text pre code span.term-prompt,.blog-upload-item-info,.form-layout-v .form-field-label,.head-logo>a:hover .head-logo-path:not(.alwayshover),.md-file-attach-size,.md-image-note,table.contacts div.note,table.contacts td.label{color:#798086}.blog-item-row.ishidden a.blog-item-title,.blog-tag-item>a,.head-logo-path,.head-logo>a,.md-file-attach-note,.pt h3,a.head-item,body,html{color:#eee}.blog-post-comments{border:1px solid #48535a}.blog-post-text code,.blog-post-text pre,.blog-post-text pre code{background-color:#394146}.blog-post-text h1,.blog-post-text h2{border-bottom:1px solid #48535a}.blog-post-text hr{background:#48535a}.blog-tags{border-left:1px solid #48535a}.blog-upload-item{border-top:1px solid #48535a}.head-inner{border-bottom:2px solid #48535a}.head-logo-dolsign.is_root{color:#e23636}.head-logo-enter{background:#394146;color:#cdd3d8}.head-logo-enter-icon>svg path{fill:#CDD3D8}.head-logo-path:not(.neverhover):hover{color:#eee!important}.head-logo:after{background:linear-gradient(to left,rgba(34,34,34,0) 0,#222 100%);border-left:8px solid #222}.hljs{background:#2b2b2d;color:#cdd3d8}.hljs-addition{background:#144212}.hljs-built_in,.hljs-builtin-name,.hljs-bullet,.hljs-symbol{color:#c792ea}.hljs-comment,.hljs-quote{color:#6272a4}.hljs-deletion{background:#e6e1dc}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#cdd3d8}.hljs-meta,.hljs-section,.hljs-selector-id,.hljs-title{color:#75a5ff}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr,.hljs-template-variable,.hljs-variable{color:#bd93f9}.hljs-link,.hljs-regexp{color:#f77669}.hljs-doctag,.hljs-string{color:#f1fa8c}.hljs-attribute,.hljs-name,.hljs-tag{color:#abb2bf}.hljs-class .hljs-title,.hljs-type{color:#da4939}a{color:#71abe5}a.head-item:hover>span>span{border-bottom:1px solid #5e6264}a.head-item>span{border-right:1px solid #5e6264}a.head-item>span>span>span.moon-icon>svg path{fill:#eee}input[type=password],input[type=text],textarea{background-color:#30373b;border:1px solid #48535a;color:#eee}input[type=password]:focus,input[type=text]:focus,textarea:focus{border-color:#48535a}table.contacts div.note>a{border-bottom:1px solid #48535a;color:#798086}table.contacts div.note>a:hover{border-bottom-color:#71abe5;color:#71abe5}table.contacts td.value span{background:#394146;color:#eee}

31
htdocs/js.php Normal file
View File

@ -0,0 +1,31 @@
<?php
require __DIR__.'/../init.php';
global $config;
$name = $_REQUEST['name'] ?? '';
if (!$config['is_dev'] || !$name || !is_dir($path = ROOT.'/htdocs/js/'.$name)) {
http_response_code(403);
exit;
}
header('Content-Type: application/javascript');
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
$files = scandir($path, SCANDIR_SORT_ASCENDING);
$first = true;
foreach ($files as $file) {
if ($file == '.' || $file == '..')
continue;
// logDebug(__FILE__.': reading '.$path.'/'.$file);
if (!$first)
echo "\n";
else
$first = false;
echo "/* $file */\n";
if (readfile($path.'/'.$file) === false)
logError(__FILE__.': failed to readfile('.$path.'/'.$file.')');
}

1
htdocs/js/admin/00-common.js Normal file
View File

@ -0,0 +1 @@
var LS = window.localStorage;

29
htdocs/js/admin/10-draft.js Normal file
View File

@ -0,0 +1,29 @@
var Draft = {
get: function() {
if (!LS) return null;
var title = LS.getItem('draft_title') || null;
var text = LS.getItem('draft_text') || null;
return {
title: title,
text: text
};
},
setTitle: function(text) {
if (!LS) return null;
LS.setItem('draft_title', text);
},
setText: function(text) {
if (!LS) return null;
LS.setItem('draft_text', text);
},
reset: function() {
if (!LS) return;
LS.removeItem('draft_title');
LS.removeItem('draft_text');
}
};

53
htdocs/js/admin.js → htdocs/js/admin/11-write-form.js
View File

@ -1,35 +1,3 @@
var LS = window.localStorage;
var Draft = {
get: function() {
if (!LS) return null;
var title = LS.getItem('draft_title') || null;
var text = LS.getItem('draft_text') || null;
return {
title: title,
text: text
};
},
setTitle: function(text) {
if (!LS) return null;
LS.setItem('draft_title', text);
},
setText: function(text) {
if (!LS) return null;
LS.setItem('draft_text', text);
},
reset: function() {
if (!LS) return;
LS.removeItem('draft_title');
LS.removeItem('draft_text');
}
};
var AdminWriteForm = {
form: null,
previewTimeout: null,
@ -170,24 +138,5 @@ var AdminWriteForm = {
}
}
};
bindEventHandlers(AdminWriteForm);
var BlogUploadList = {
submitNoteEdit: function(action, note) {
if (note === null)
return;
var form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', action);
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'note');
input.setAttribute('value', note);
form.appendChild(input);
document.body.appendChild(form);
form.submit();
}
};

19
htdocs/js/admin/12-upload-list.js Normal file
View File

@ -0,0 +1,19 @@
var BlogUploadList = {
submitNoteEdit: function(action, note) {
if (note === null)
return;
var form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', action);
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'note');
input.setAttribute('value', note);
form.appendChild(input);
document.body.appendChild(form);
form.submit();
}
};

679
htdocs/js/common.js
View File

@ -1,679 +0,0 @@
if (!String.prototype.startsWith) {
String.prototype.startsWith = function(search, pos) {
pos = !pos || pos < 0 ? 0 : +pos;
return this.substring(pos, pos + search.length) === search;
};
}
if (!String.prototype.endsWith) {
String.prototype.endsWith = function(search, this_len) {
if (this_len === undefined || this_len > this.length) {
this_len = this.length;
}
return this.substring(this_len - search.length, this_len) === search;
};
}
if (!Object.assign) {
Object.defineProperty(Object, 'assign', {
enumerable: false,
configurable: true,
writable: true,
value: function(target, firstSource) {
'use strict';
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
var keysArray = Object.keys(Object(nextSource));
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
}
});
}
//
// AJAX
//
(function() {
var defaultOpts = {
json: true
};
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
var xhr;
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {}
}
if (!xhr) {
console.error('Your browser doesn\'t support XMLHttpRequest.');
}
return xhr;
}
function request(method, url, data, optarg1, optarg2) {
data = data || null;
var opts, callback;
if (optarg2 !== undefined) {
opts = optarg1;
callback = optarg2;
} else {
callback = optarg1;
}
opts = opts || {};
if (typeof callback != 'function') {
throw new Error('callback must be a function');
}
if (!url) {
throw new Error('no url specified');
}
switch (method) {
case 'GET':
if (isObject(data)) {
for (var k in data) {
if (data.hasOwnProperty(k)) {
url += (url.indexOf('?') == -1 ? '?' : '&')+encodeURIComponent(k)+'='+encodeURIComponent(data[k])
}
}
}
break;
case 'POST':
if (isObject(data)) {
var sdata = [];
for (var k in data) {
if (data.hasOwnProperty(k)) {
sdata.push(encodeURIComponent(k)+'='+encodeURIComponent(data[k]));
}
}
data = sdata.join('&');
}
break;
}
opts = Object.assign({}, defaultOpts, opts);
var xhr = createXMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
if (method == 'POST') {
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ('status' in xhr && !/^2|1223/.test(xhr.status)) {
throw new Error('http code '+xhr.status)
}
if (opts.json) {
var resp = JSON.parse(xhr.responseText)
if (!isObject(resp)) {
throw new Error('ajax: object expected')
}
if (resp.error) {
throw new Error(resp.error)
}
callback(null, resp.response);
} else {
callback(null, xhr.responseText);
}
}
};
xhr.onerror = function(e) {
callback(e);
};
xhr.send(method == 'GET' ? null : data);
return xhr;
}
window.ajax = {
get: request.bind(request, 'GET'),
post: request.bind(request, 'POST')
}
})();
function bindEventHandlers(obj) {
for (var k in obj) {
if (obj.hasOwnProperty(k)
&& typeof obj[k] == 'function'
&& k.length > 2
&& k.startsWith('on')
&& k[2].charCodeAt(0) >= 65
&& k[2].charCodeAt(0) <= 90) {
obj[k] = obj[k].bind(obj)
}
}
}
//
// DOM helpers
//
function ge(id) {
return document.getElementById(id)
}
function hasClass(el, name) {
return el && el.nodeType === 1 && (" " + el.className + " ").replace(/[\t\r\n\f]/g, " ").indexOf(" " + name + " ") >= 0
}
function addClass(el, name) {
if (!el) {
return console.warn('addClass: el is', el)
}
if (!hasClass(el, name)) {
el.className = (el.className ? el.className + ' ' : '') + name
}
}
function removeClass(el, name) {
if (!el) {
return console.warn('removeClass: el is', el)
}
if (isArray(name)) {
for (var i = 0; i < name.length; i++) {
removeClass(el, name[i]);
}
return;
}
el.className = ((el.className || '').replace((new RegExp('(\\s|^)' + name + '(\\s|$)')), ' ')).trim()
}
function addEvent(el, type, f, useCapture) {
if (!el) {
return console.warn('addEvent: el is', el, stackTrace())
}
if (isArray(type)) {
for (var i = 0; i < type.length; i++) {
addEvent(el, type[i], f, useCapture);
}
return;
}
if (el.addEventListener) {
el.addEventListener(type, f, useCapture || false);
return true;
} else if (el.attachEvent) {
return el.attachEvent('on' + type, f);
}
return false;
}
function removeEvent(el, type, f, useCapture) {
if (isArray(type)) {
for (var i = 0; i < type.length; i++) {
var t = type[i];
removeEvent(el, type[i], f, useCapture);
}
return;
}
if (el.removeEventListener) {
el.removeEventListener(type, f, useCapture || false);
} else if (el.detachEvent) {
return el.detachEvent('on' + type, f);
}
return false;
}
function cancelEvent(evt) {
if (!evt) {
return console.warn('cancelEvent: event is', evt)
}
if (evt.preventDefault) evt.preventDefault();
if (evt.stopPropagation) evt.stopPropagation();
evt.cancelBubble = true;
evt.returnValue = false;
return false;
}
//
// Cookies
//
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; domain=" + window.appConfig.cookieHost + "; path=/";
}
function unsetCookie(name) {
document.cookie = name + '=; Max-Age=-99999999; domain=' + window.appConfig.cookieHost + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ')
c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0)
return c.substring(nameEQ.length, c.length);
}
return null;
}
//
// Misc
//
function isObject(o) {
return Object.prototype.toString.call(o) === '[object Object]';
}
function isArray(a) {
return Object.prototype.toString.call(a) === '[object Array]';
}
function extend(dst, src) {
if (!isObject(dst)) {
return console.error('extend: dst is not an object');
}
if (!isObject(src)) {
return console.error('extend: src is not an object');
}
for (var key in src) {
dst[key] = src[key];
}
return dst;
}
function stackTrace(split) {
if (split === undefined) {
split = true;
}
try {
o.lo.lo += 0;
} catch(e) {
if (e.stack) {
var stack = split ? e.stack.split('\n') : e.stack;
stack.shift();
stack.shift();
return stack.join('\n');
}
}
return null;
}
function escape(str) {
var pre = document.createElement('pre');
var text = document.createTextNode(str);
pre.appendChild(text);
return pre.innerHTML;
}
function parseUrl(uri) {
var parser = document.createElement('a');
parser.href = uri;
return {
protocol: parser.protocol, // => "http:"
host: parser.host, // => "example.com:3000"
hostname: parser.hostname, // => "example.com"
port: parser.port, // => "3000"
pathname: parser.pathname, // => "/pathname/"
hash: parser.hash, // => "#hash"
search: parser.search, // => "?search=test"
origin: parser.origin, // => "http://example.com:3000"
path: (parser.pathname || '') + (parser.search || '')
}
}
function once(fn, context) {
var result;
return function() {
if (fn) {
result = fn.apply(context || this, arguments);
fn = null;
}
return result;
};
}
//
//
function lang(key) {
return __lang[key] !== undefined ? __lang[key] : '{'+key+'}';
}
var DynamicLogo = {
dynLink: null,
afr: null,
afrUrl: null,
init: function() {
this.dynLink = ge('head_dyn_link');
this.cdText = ge('head_cd_text');
if (!this.dynLink) {
return console.warn('DynamicLogo.init: !this.dynLink');
}
var spans = this.dynLink.querySelectorAll('span.head-logo-path');
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
addEvent(span, 'mouseover', this.onSpanOver);
addEvent(span, 'mouseout', this.onSpanOut);
}
},
setUrl: function(url) {
if (this.afr !== null) {
cancelAnimationFrame(this.afr);
}
this.afrUrl = url;
this.afr = requestAnimationFrame(this.onAnimationFrame);
},
onAnimationFrame: function() {
var url = this.afrUrl;
// update link
this.dynLink.setAttribute('href', url);
// update console text
if (this.afrUrl === '/') {
url = '~';
} else {
url = '~'+url.replace(/\/$/, '');
}
this.cdText.innerHTML = escape(url);
this.afr = null;
},
onSpanOver: function() {
var span = event.target;
this.setUrl(span.getAttribute('data-url'));
cancelEvent(event);
},
onSpanOut: function() {
var span = event.target;
this.setUrl('/');
cancelEvent(event);
}
};
bindEventHandlers(DynamicLogo);
window.__lang = {};
// set/remove retina cookie
(function() {
var isRetina = window.devicePixelRatio >= 1.5;
if (isRetina) {
setCookie('is_retina', 1, 365);
} else {
unsetCookie('is_retina');
}
})();
var StaticManager = {
loadedStyles: [],
versions: {},
setStyles: function(list, versions) {
this.loadedStyles = list;
this.versions = versions;
},
loadStyle: function(name, theme, callback) {
var url;
if (!window.appConfig.devMode) {
var filename = name + (theme === 'dark' ? '_dark' : '') + '.css';
url = '/css/'+filename+'?'+this.versions[filename];
} else {
url = '/sass.php?name='+name+'&theme='+theme;
}
var el = document.createElement('link');
el.onerror = callback
el.onload = callback
el.setAttribute('rel', 'stylesheet');
el.setAttribute('type', 'text/css');
el.setAttribute('id', 'style_'+name+'_dark');
el.setAttribute('href', url);
document.getElementsByTagName('head')[0].appendChild(el);
}
};
var ThemeSwitcher = (function() {
/**
* @type {string[]}
*/
var modes = ['auto', 'dark', 'light'];
/**
* @type {number}
*/
var currentModeIndex = -1;
/**
* @type {boolean|null}
*/
var systemState = null;
/**
* @returns {boolean}
*/
function isSystemModeSupported() {
try {
// crashes on:
// Mozilla/5.0 (Windows NT 6.2; ARM; Trident/7.0; Touch; rv:11.0; WPDesktop; Lumia 630 Dual SIM) like Gecko
// Mozilla/5.0 (iPhone; CPU iPhone OS 13_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Mobile/15E148 Safari/604.1
// Mozilla/5.0 (iPad; CPU OS 12_5_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Mobile/15E148 Safari/604.1
//
// error examples:
// - window.matchMedia("(prefers-color-scheme: dark)").addEventListener is not a function. (In 'window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",this.onSystemSettingChange.bind(this))', 'window.matchMedia("(prefers-color-scheme: dark)").addEventListener' is undefined)
// - Object [object MediaQueryList] has no method 'addEventListener'
return !!window['matchMedia']
&& typeof window.matchMedia("(prefers-color-scheme: dark)").addEventListener === 'function';
} catch (e) {
return false
}
}
/**
* @returns {boolean}
*/
function isDarkModeApplied() {
var st = StaticManager.loadedStyles;
for (var i = 0; i < st.length; i++) {
var name = st[i];
if (ge('style_'+name+'_dark'))
return true;
}
return false;
}
/**
* @returns {string}
*/
function getSavedMode() {
var val = getCookie('theme');
if (!val)
return modes[0];
if (modes.indexOf(val) === -1) {
console.error('[ThemeSwitcher getSavedMode] invalid cookie value')
unsetCookie('theme')
return modes[0]
}
return val
}
/**
* @param {boolean} dark
*/
function changeTheme(dark) {
addClass(document.body, 'theme-changing');
var onDone = function() {
window.requestAnimationFrame(function() {
removeClass(document.body, 'theme-changing');
})
};
window.requestAnimationFrame(function() {
if (dark)
enableDark(onDone);
else
disableDark(onDone);
})
}
/**
* @param {function} callback
*/
function enableDark(callback) {
var names = [];
StaticManager.loadedStyles.forEach(function(name) {
var el = ge('style_'+name+'_dark');
if (el)
return;
names.push(name);
});
var left = names.length;
names.forEach(function(name) {
StaticManager.loadStyle(name, 'dark', once(function(e) {
left--;
if (left === 0)
callback();
}));
})
}
/**
* @param {function} callback
*/
function disableDark(callback) {
StaticManager.loadedStyles.forEach(function(name) {
var el = ge('style_'+name+'_dark');
if (el)
el.remove();
})
callback();
}
/**
* @param {string} mode
*/
function setLabel(mode) {
var labelEl = ge('theme-switcher-label');
labelEl.innerHTML = escape(lang('theme_'+mode));
}
return {
init: function() {
var cur = getSavedMode();
currentModeIndex = modes.indexOf(cur);
var systemSupported = isSystemModeSupported();
if (!systemSupported) {
if (currentModeIndex === 0) {
modes.shift(); // remove 'auto' from the list
currentModeIndex = 1; // set to 'light'
if (isDarkModeApplied())
disableDark();
}
} else {
/**
* @param {boolean} dark
*/
var onSystemChange = function(dark) {
var prevSystemState = systemState;
systemState = dark;
if (modes[currentModeIndex] !== 'auto')
return;
if (systemState !== prevSystemState)
changeTheme(systemState);
};
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
onSystemChange(e.matches === true)
});
onSystemChange(window.matchMedia('(prefers-color-scheme: dark)').matches === true);
}
setLabel(modes[currentModeIndex]);
},
next: function(e) {
if (hasClass(document.body, 'theme-changing')) {
console.log('next: theme changing is in progress, ignoring...')
return;
}
currentModeIndex = (currentModeIndex + 1) % modes.length;
switch (modes[currentModeIndex]) {
case 'auto':
if (systemState !== null)
changeTheme(systemState);
break;
case 'light':
if (isDarkModeApplied())
changeTheme(false);
break;
case 'dark':
if (!isDarkModeApplied())
changeTheme(true);
break;
}
setLabel(modes[currentModeIndex]);
setCookie('theme', modes[currentModeIndex]);
return cancelEvent(e);
}
};
})();

47
htdocs/js/common/00-polyfills.js Normal file
View File

@ -0,0 +1,47 @@
if (!String.prototype.startsWith) {
String.prototype.startsWith = function(search, pos) {
pos = !pos || pos < 0 ? 0 : +pos;
return this.substring(pos, pos + search.length) === search;
};
}
if (!String.prototype.endsWith) {
String.prototype.endsWith = function(search, this_len) {
if (this_len === undefined || this_len > this.length) {
this_len = this.length;
}
return this.substring(this_len - search.length, this_len) === search;
};
}
if (!Object.assign) {
Object.defineProperty(Object, 'assign', {
enumerable: false,
configurable: true,
writable: true,
value: function(target, firstSource) {
'use strict';
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
var keysArray = Object.keys(Object(nextSource));
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
}
});
}

118
htdocs/js/common/02-ajax.js Normal file
View File

@ -0,0 +1,118 @@
//
// AJAX
//
(function() {
var defaultOpts = {
json: true
};
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
var xhr;
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {}
}
if (!xhr) {
console.error('Your browser doesn\'t support XMLHttpRequest.');
}
return xhr;
}
function request(method, url, data, optarg1, optarg2) {
data = data || null;
var opts, callback;
if (optarg2 !== undefined) {
opts = optarg1;
callback = optarg2;
} else {
callback = optarg1;
}
opts = opts || {};
if (typeof callback != 'function') {
throw new Error('callback must be a function');
}
if (!url) {
throw new Error('no url specified');
}
switch (method) {
case 'GET':
if (isObject(data)) {
for (var k in data) {
if (data.hasOwnProperty(k)) {
url += (url.indexOf('?') == -1 ? '?' : '&')+encodeURIComponent(k)+'='+encodeURIComponent(data[k])
}
}
}
break;
case 'POST':
if (isObject(data)) {
var sdata = [];
for (var k in data) {
if (data.hasOwnProperty(k)) {
sdata.push(encodeURIComponent(k)+'='+encodeURIComponent(data[k]));
}
}
data = sdata.join('&');
}
break;
}
opts = Object.assign({}, defaultOpts, opts);
var xhr = createXMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
if (method == 'POST') {
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ('status' in xhr && !/^2|1223/.test(xhr.status)) {
throw new Error('http code '+xhr.status)
}
if (opts.json) {
var resp = JSON.parse(xhr.responseText)
if (!isObject(resp)) {
throw new Error('ajax: object expected')
}
if (resp.error) {
throw new Error(resp.error)
}
callback(null, resp.response);
} else {
callback(null, xhr.responseText);
}
}
};
xhr.onerror = function(e) {
callback(e);
};
xhr.send(method == 'GET' ? null : data);
return xhr;
}
window.ajax = {
get: request.bind(request, 'GET'),
post: request.bind(request, 'POST')
}
})();

117
htdocs/js/common/03-dom.js Normal file
View File

@ -0,0 +1,117 @@
//
// DOM helpers
//
function ge(id) {
return document.getElementById(id)
}
function hasClass(el, name) {
return el && el.nodeType === 1 && (" " + el.className + " ").replace(/[\t\r\n\f]/g, " ").indexOf(" " + name + " ") >= 0
}
function addClass(el, name) {
if (!el) {
return console.warn('addClass: el is', el)
}
if (!hasClass(el, name)) {
el.className = (el.className ? el.className + ' ' : '') + name
}
}
function removeClass(el, name) {
if (!el) {
return console.warn('removeClass: el is', el)
}
if (isArray(name)) {
for (var i = 0; i < name.length; i++) {
removeClass(el, name[i]);
}
return;
}
el.className = ((el.className || '').replace((new RegExp('(\\s|^)' + name + '(\\s|$)')), ' ')).trim()
}
function addEvent(el, type, f, useCapture) {
if (!el) {
return console.warn('addEvent: el is', el, stackTrace())
}
if (isArray(type)) {
for (var i = 0; i < type.length; i++) {
addEvent(el, type[i], f, useCapture);
}
return;
}
if (el.addEventListener) {
el.addEventListener(type, f, useCapture || false);
return true;
} else if (el.attachEvent) {
return el.attachEvent('on' + type, f);
}
return false;
}
function removeEvent(el, type, f, useCapture) {
if (isArray(type)) {
for (var i = 0; i < type.length; i++) {
var t = type[i];
removeEvent(el, type[i], f, useCapture);
}
return;
}
if (el.removeEventListener) {
el.removeEventListener(type, f, useCapture || false);
} else if (el.detachEvent) {
return el.detachEvent('on' + type, f);
}
return false;
}
function cancelEvent(evt) {
if (!evt) {
return console.warn('cancelEvent: event is', evt)
}
if (evt.preventDefault) evt.preventDefault();
if (evt.stopPropagation) evt.stopPropagation();
evt.cancelBubble = true;
evt.returnValue = false;
return false;
}
//
// Cookies
//
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; domain=" + window.appConfig.cookieHost + "; path=/";
}
function unsetCookie(name) {
document.cookie = name + '=; Max-Age=-99999999; domain=' + window.appConfig.cookieHost + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ')
c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0)
return c.substring(nameEQ.length, c.length);
}
return null;
}

89
htdocs/js/common/04-util.js Normal file
View File

@ -0,0 +1,89 @@
function bindEventHandlers(obj) {
for (var k in obj) {
if (obj.hasOwnProperty(k)
&& typeof obj[k] == 'function'
&& k.length > 2
&& k.startsWith('on')
&& k[2].charCodeAt(0) >= 65
&& k[2].charCodeAt(0) <= 90) {
obj[k] = obj[k].bind(obj)
}
}
}
function isObject(o) {
return Object.prototype.toString.call(o) === '[object Object]';
}
function isArray(a) {
return Object.prototype.toString.call(a) === '[object Array]';
}
function extend(dst, src) {
if (!isObject(dst)) {
return console.error('extend: dst is not an object');
}
if (!isObject(src)) {
return console.error('extend: src is not an object');
}
for (var key in src) {
dst[key] = src[key];
}
return dst;
}
function timestamp() {
return Math.floor(Date.now() / 1000)
}
function stackTrace(split) {
if (split === undefined) {
split = true;
}
try {
o.lo.lo += 0;
} catch(e) {
if (e.stack) {
var stack = split ? e.stack.split('\n') : e.stack;
stack.shift();
stack.shift();
return stack.join('\n');
}
}
return null;
}
function escape(str) {
var pre = document.createElement('pre');
var text = document.createTextNode(str);
pre.appendChild(text);
return pre.innerHTML;
}
function parseUrl(uri) {
var parser = document.createElement('a');
parser.href = uri;
return {
protocol: parser.protocol, // => "http:"
host: parser.host, // => "example.com:3000"
hostname: parser.hostname, // => "example.com"
port: parser.port, // => "3000"
pathname: parser.pathname, // => "/pathname/"
hash: parser.hash, // => "#hash"
search: parser.search, // => "?search=test"
origin: parser.origin, // => "http://example.com:3000"
path: (parser.pathname || '') + (parser.search || '')
}
}
function once(fn, context) {
var result;
return function() {
if (fn) {
result = fn.apply(context || this, arguments);
fn = null;
}
return result;
};
}

5
htdocs/js/common/10-lang.js Normal file
View File

@ -0,0 +1,5 @@
function lang(key) {
return __lang[key] !== undefined ? __lang[key] : '{'+key+'}';
}
window.__lang = {};

60
htdocs/js/common/20-dynlogo.js Normal file
View File

@ -0,0 +1,60 @@
var DynamicLogo = {
dynLink: null,
afr: null,
afrUrl: null,
init: function() {
this.dynLink = ge('head_dyn_link');
this.cdText = ge('head_cd_text');
if (!this.dynLink) {
return console.warn('DynamicLogo.init: !this.dynLink');
}
var spans = this.dynLink.querySelectorAll('span.head-logo-path');
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
addEvent(span, 'mouseover', this.onSpanOver);
addEvent(span, 'mouseout', this.onSpanOut);
}
},
setUrl: function(url) {
if (this.afr !== null) {
cancelAnimationFrame(this.afr);
}
this.afrUrl = url;
this.afr = requestAnimationFrame(this.onAnimationFrame);
},
onAnimationFrame: function() {
var url = this.afrUrl;
// update link
this.dynLink.setAttribute('href', url);
// update console text
if (this.afrUrl === '/') {
url = '~';
} else {
url = '~'+url.replace(/\/$/, '');
}
this.cdText.innerHTML = escape(url);
this.afr = null;
},
onSpanOver: function() {
var span = event.target;
this.setUrl(span.getAttribute('data-url'));
cancelEvent(event);
},
onSpanOut: function() {
var span = event.target;
this.setUrl('/');
cancelEvent(event);
}
};
bindEventHandlers(DynamicLogo);

30
htdocs/js/common/30-static-manager.js Normal file
View File

@ -0,0 +1,30 @@
var StaticManager = {
loadedStyles: [],
versions: {},
init: function(loadedStyles, versions) {
this.loadedStyles = loadedStyles;
this.versions = versions;
},
loadStyle: function(name, theme, callback) {
var url;
if (!window.appConfig.devMode) {
if (theme === 'dark')
name += '_dark';
url = '/css/'+name+'.css?'+this.versions.css[name];
} else {
url = '/sass.php?name='+name+'&theme='+theme+'&v='+timestamp();
}
var el = document.createElement('link');
el.onerror = callback;
el.onload = callback;
el.setAttribute('rel', 'stylesheet');
el.setAttribute('type', 'text/css');
el.setAttribute('id', 'style_'+name);
el.setAttribute('href', url);
document.getElementsByTagName('head')[0].appendChild(el);
}
};

195
htdocs/js/common/35-theme-switcher.js Normal file
View File

@ -0,0 +1,195 @@
var ThemeSwitcher = (function() {
/**
* @type {string[]}
*/
var modes = ['auto', 'dark', 'light'];
/**
* @type {number}
*/
var currentModeIndex = -1;
/**
* @type {boolean|null}
*/
var systemState = null;
/**
* @returns {boolean}
*/
function isSystemModeSupported() {
try {
// crashes on:
// Mozilla/5.0 (Windows NT 6.2; ARM; Trident/7.0; Touch; rv:11.0; WPDesktop; Lumia 630 Dual SIM) like Gecko
// Mozilla/5.0 (iPhone; CPU iPhone OS 13_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Mobile/15E148 Safari/604.1
// Mozilla/5.0 (iPad; CPU OS 12_5_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Mobile/15E148 Safari/604.1
//
// error examples:
// - window.matchMedia("(prefers-color-scheme: dark)").addEventListener is not a function. (In 'window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",this.onSystemSettingChange.bind(this))', 'window.matchMedia("(prefers-color-scheme: dark)").addEventListener' is undefined)
// - Object [object MediaQueryList] has no method 'addEventListener'
return !!window['matchMedia']
&& typeof window.matchMedia("(prefers-color-scheme: dark)").addEventListener === 'function';
} catch (e) {
return false
}
}
/**
* @returns {boolean}
*/
function isDarkModeApplied() {
var st = StaticManager.loadedStyles;
for (var i = 0; i < st.length; i++) {
var name = st[i];
if (ge('style_'+name+'_dark'))
return true;
}
return false;
}
/**
* @returns {string}
*/
function getSavedMode() {
var val = getCookie('theme');
if (!val)
return modes[0];
if (modes.indexOf(val) === -1) {
console.error('[ThemeSwitcher getSavedMode] invalid cookie value')
unsetCookie('theme')
return modes[0]
}
return val
}
/**
* @param {boolean} dark
*/
function changeTheme(dark) {
addClass(document.body, 'theme-changing');
var onDone = function() {
window.requestAnimationFrame(function() {
removeClass(document.body, 'theme-changing');
})
};
window.requestAnimationFrame(function() {
if (dark)
enableDark(onDone);
else
disableDark(onDone);
})
}
/**
* @param {function} callback
*/
function enableDark(callback) {
var names = [];
StaticManager.loadedStyles.forEach(function(name) {
var el = ge('style_'+name+'_dark');
if (el)
return;
names.push(name);
});
var left = names.length;
names.forEach(function(name) {
StaticManager.loadStyle(name, 'dark', once(function(e) {
left--;
if (left === 0)
callback();
}));
})
}
/**
* @param {function} callback
*/
function disableDark(callback) {
StaticManager.loadedStyles.forEach(function(name) {
var el = ge('style_'+name+'_dark');
if (el)
el.remove();
})
callback();
}
/**
* @param {string} mode
*/
function setLabel(mode) {
var labelEl = ge('theme-switcher-label');
labelEl.innerHTML = escape(lang('theme_'+mode));
}
return {
init: function() {
var cur = getSavedMode();
currentModeIndex = modes.indexOf(cur);
var systemSupported = isSystemModeSupported();
if (!systemSupported) {
if (currentModeIndex === 0) {
modes.shift(); // remove 'auto' from the list
currentModeIndex = 1; // set to 'light'
if (isDarkModeApplied())
disableDark();
}
} else {
/**
* @param {boolean} dark
*/
var onSystemChange = function(dark) {
var prevSystemState = systemState;
systemState = dark;
if (modes[currentModeIndex] !== 'auto')
return;
if (systemState !== prevSystemState)
changeTheme(systemState);
};
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
onSystemChange(e.matches === true)
});
onSystemChange(window.matchMedia('(prefers-color-scheme: dark)').matches === true);
}
setLabel(modes[currentModeIndex]);
},
next: function(e) {
if (hasClass(document.body, 'theme-changing')) {
console.log('next: theme changing is in progress, ignoring...')
return;
}
currentModeIndex = (currentModeIndex + 1) % modes.length;
switch (modes[currentModeIndex]) {
case 'auto':
if (systemState !== null)
changeTheme(systemState);
break;
case 'light':
if (isDarkModeApplied())
changeTheme(false);
break;
case 'dark':
if (!isDarkModeApplied())
changeTheme(true);
break;
}
setLabel(modes[currentModeIndex]);
setCookie('theme', modes[currentModeIndex]);
return cancelEvent(e);
}
};
})();

9
htdocs/js/common/90-retina.js Normal file
View File

@ -0,0 +1,9 @@
// set/remove retina cookie
(function() {
var isRetina = window.devicePixelRatio >= 1.5;
if (isRetina) {
setCookie('is_retina', 1, 365);
} else {
unsetCookie('is_retina');
}
})();

6
lib/cli.php
View File

@ -63,8 +63,12 @@ class cli {
}
public static function die($error): void {
fwrite(STDERR, "error: {$error}\n");
self::error($error);
exit(1);
}
public static function error($error): void {
fwrite(STDERR, "error: {$error}\n");
}
}

63
skin/base.skin.php
View File

@ -45,11 +45,20 @@ function renderScript($ctx, $unsafe_js, $unsafe_lang, $enable_dynlogo) {
global $config;
$styles = json_encode($ctx->styleNames);
$versions = !$config['is_dev'] ? json_encode($config['static']) : '{}';
if ($config['is_dev'])
$versions = '{}';
else {
$versions = [];
foreach ($config['static'] as $name => $v) {
list($type, $bname) = getStaticNameParts($name);
$versions[$type][$bname] = $v;
}
$versions = json_encode($versions);
}
return <<<HTML
<script type="text/javascript">
StaticManager.setStyles({$styles}, {$versions});
StaticManager.init({$styles}, {$versions});
{$ctx->if_true($unsafe_js, '(function(){'.$unsafe_js.'})();')}
{$ctx->if_true($unsafe_lang, 'extend(__lang, '.$unsafe_lang.');')}
{$ctx->if_true($enable_dynlogo, 'DynamicLogo.init();')}
@ -77,40 +86,46 @@ function renderStatic($ctx, $static, $theme) {
$ctx->styleNames = [];
foreach ($static as $name) {
// javascript
if (str_ends_with($name, '.js'))
if (str_starts_with($name, 'js/'))
$html[] = jsLink($name);
// cs
else if (str_ends_with($name, '.css')) {
// css
else if (str_starts_with($name, 'css/')) {
$html[] = cssLink($name, 'light', $style_name);
$ctx->styleNames[] = $style_name;
if ($dark)
$html[] = cssLink($name, 'dark', $style_name);
else if (!$config['is_dev'])
$html[] = cssPrefetchLink(str_replace('.css', '_dark.css', $name));
$html[] = cssPrefetchLink($style_name.'_dark');
}
else
logError(__FUNCTION__.': unexpected static entry: '.$name);
}
return implode("\n", $html);
}
function jsLink(string $name): string {
return '<script src="'.$name.'?'.getStaticVersion($name).'" type="text/javascript"></script>';
global $config;
list (, $bname) = getStaticNameParts($name);
if ($config['is_dev']) {
$href = '/js.php?name='.urlencode($bname).'&amp;v='.time();
} else {
$href = '/dist-js/'.$bname.'.js?'.getStaticVersion($name);
}
return '<script src="'.$href.'" type="text/javascript"></script>';
}
function cssLink(string $name, string $theme, &$bname = null): string {
global $config;
$dname = dirname($name);
$bname = basename($name);
if (($pos = strrpos($bname, '.')))
$bname = substr($bname, 0, $pos);
list(, $bname) = getStaticNameParts($name);
if ($config['is_dev']) {
$href = '/sass.php?name='.urlencode($bname).'&amp;theme='.$theme.'&amp;v='.time();
} else {
$version = getStaticVersion('css/'.$bname.($theme == 'dark' ? '_dark' : '').'.css');
$href = $dname.'/'.$bname.($theme == 'dark' ? '_dark' : '').'.css?'.$version;
$href = '/dist-css/'.$bname.($theme == 'dark' ? '_dark' : '').'.css?'.$version;
}
$id = 'style_'.$bname;
@ -121,17 +136,33 @@ function cssLink(string $name, string $theme, &$bname = null): string {
}
function cssPrefetchLink(string $name): string {
$url = $name.'?'.getStaticVersion($name);
return <<<HTML
$url = '/dist-css/'.$name.'.css?'.getStaticVersion('css/'.$name.'.css');
return <<<HTML
<link rel="prefetch" href="{$url}" />
HTML;
}
function getStaticNameParts(string $name): array {
$dname = dirname($name);
$bname = basename($name);
if (($pos = strrpos($bname, '.'))) {
$ext = substr($bname, $pos+1);
$bname = substr($bname, 0, $pos);
} else {
$ext = '';
}
return [$dname, $bname, $ext];
}
function getStaticVersion(string $name): string {
global $config;
if (str_starts_with($name, '/'))
if ($config['is_dev'])
return time();
if (str_starts_with($name, '/')) {
logWarning(__FUNCTION__.': '.$name.' starts with /');
$name = substr($name, 1);
return $config['is_dev'] ? time() : $config['static'][$name] ?? 'notfound';
}
return $config['static'][$name] ?? 'notfound';
}
function renderHeader($ctx, $theme, $unsafe_logo_html) {