3DS compatibility: non-emoji fallbacks

copyparty/web/baguettebox.js

@@ -308,7 +308,7 @@ window.baguetteBox = (function () {
                 '<div id="bbox-prev"><a class="btn" aria-label="Previous">◀</a></div>' +
                 '<div id="bbox-next"><a class="btn" aria-label="Next">▶</a></div>' +
                 '<div id="bbox-btns">' +
-                    '<a id="bbox-close" class="btn" aria-label="Close">✕</a>' +
+                    '<a id="bbox-close" class="btn" aria-label="Close"><span class="x">×</span></a>' +
                     '<a id="bbox-vmode" class="btn" tt="a"></a>' +
                     '<a id="bbox-full" class="btn" tt="full-screen">⛶</a>' +
                     '<a id="bbzoom" class="tgl btn" tt="zoom/stretch smaller images to fill screen">↕</a>' +

copyparty/web/browser.css

@@ -532,14 +532,23 @@ html .ayjump:focus-visible {
 #qs_btns a {
 	background: color-mix(in oklab, var(--txt-bg), transparent);
 	width: 1em;
+	height: 1.2em;
 	display: inline-block;
 	text-align: center;
 	border-radius: 5px;
 	border-radius: var(--radius);
+	vertical-align: center;
 }
 #qs_btns a:hover {
 	background: var(--bg);
 }
+#qs_btns a .x {
+	line-height: .75em;
+}
+#moresearch span {
+	font-size: .6em;
+  	vertical-align: center;
+}
 html.y #path {
 	text-shadow: none;
 }
@@ -613,12 +622,14 @@ a:hover {
 }
 .s0:after,
 .s1:after {
-	content: '▴';
+	content: '▲';
+	font-size: .7em;
 	/* margin-left: -.15em; */
 }
 .s0r:after,
 .s1r:after {
-	content: '▾';
+	content: '▼';
+	font-size: .7em;
 	/* margin-left: -.15em; */
 }
 .s0:after,
@@ -978,6 +989,7 @@ tr.play td:nth-child(1) a {
 }
 #ggrid>a .thumb,
 #ggrid>a img {
+	color: #3584e4;
 	z-index: 1;
 	border-radius: 5px;
 	border-radius: var(--radius);
@@ -1756,6 +1768,9 @@ html.b #mu_outer {
 	padding: .15em .4em;
 	margin: 0;
 }
+#ops a:first-child {
+  margin-left: auto;
+}
 .unfun #ops a {
 	font-size: 1.2em;
 }
@@ -1877,6 +1892,7 @@ html.y #ops svg circle {
 .opview input[type=text],
 .opview input[type=color],
 .opview input[type=date] {
+	color: #fff;
 	color: var(--fg);
 	background: #222529;
 	background: var(--txt-bg);
@@ -3673,8 +3689,9 @@ summary {
 	padding: .2em;
 	margin-left: .3em;
 }
-
-
+.x {
+	font-size: 1.5em;
+}
 
 
 
@@ -3945,7 +3962,6 @@ html.d #treepar {
 	position: relative;
 	height: 2.2em;
 	margin: .5em 0 0 0;
-	z-index: -1;
 }
 #pathBar.thin #path a {
 	padding-top: .45em;
@@ -3954,9 +3970,15 @@ html.d #treepar {
 	margin-left: 2.5em;
 }
 #pathBar.thin #actionsArea {
-	position: absolute;
+	position: fixed;
 	top: .6em;
 	right: .6em;
+	z-index: 11;
+	max-width: 80%;
+	overflow-x: auto;
+}
+#pathBar.thin .popup {
+	position: relative;
 }
 html.e #pathBar.thin #path {
 	margin: 0;
@@ -4009,7 +4031,6 @@ html.e #wrap.thin .ghead {
 		position: relative;
 		height: 2.2em;
 		margin: .5em 0 0 0;
-		z-index: -1;
 	}
 	html.dy .ghead,
 	html.a .ghead,
@@ -4055,9 +4076,16 @@ html.e #wrap.thin .ghead {
 	}
 	#actionsArea,
 	#pathBar.thin #actionsArea {
-		position: absolute;
+		position: fixed;
 		top: 1em;
 		right: 1em;
+		z-index: 11;
+		max-width: 80%;
+		overflow-x: auto;
+	}
+	.popup,
+	#pathBar.thin .popup {
+		position: relative;
 	}
 	html.fy #actionsArea,
 	html.fy #pathBar.thin #actionsArea {

copyparty/web/browser.html

@@ -91,8 +91,8 @@
 						<label for="srch_recursivec" id="srch_recursivelbl" tabindex="0"></label>
 					</span>
 					<div id="qs_btns">
-						<a id="moresearch">▾</a>
-						<a id="closesearch">✕</a>
+						<a id="moresearch"><span>▼</span></a>
+						<a id="closesearch"><span class="x">×</span></a>
 					</div>
 				</div>
 			</div>
@@ -166,7 +166,7 @@
 					<div id="s_list" class="opview splitsub"></div>
 				</div>
 				<a id="reloc_cfg" class="btn winbtn"><span>▼</span></a>
-				<a id="cl_cfg" class="close btn">✕</a>
+				<a id="cl_cfg" class="close btn"><span class="x">×</span></a>
 			</div>
 		</div>
 
@@ -180,7 +180,7 @@
 					<div id="up_info" class="splitsub"></div>
 				</div>
 				<a id="reloc_up" class="btn winbtn"><span>▼</span></a>
-				<a id="cl_up" class="close btn">✕</a>
+				<a id="cl_up" class="close btn"><span class="x">×</span></a>
 			</div>
 		</div>
 
@@ -204,7 +204,7 @@
 					<div id="mu_vol"></div>	
 
 					<a id="cfg_mu" class="btn winbtn" href="#h_mp">⚙️</a>
-					<a id="cl_mu" class="close btn">✕</a>	
+					<a id="cl_mu" class="close btn"><span class="x">×</span></a>	
 				</div>
 			</div>
 		</div>

copyparty/web/browser.js

@@ -879,6 +879,15 @@ if(!fun_tgl){
 	ebi('opa_cfg').innerHTML = 'settings'
 	ebi('acc_pfp').innerHTML = 'account'
 }
+else if(!EMOJI){
+	ebi('opa_srch').innerHTML = 's?'
+	ebi('opa_del').innerHTML = 'un'
+	ebi('opa_up').innerHTML = 'u▲'
+	ebi('opa_bup').innerHTML = 'b▲'
+	ebi('opa_msg').innerHTML = 'msg'
+	ebi('opa_cfg').innerHTML = '★'
+	ebi('acc_pfp').innerHTML = 'acc'
+}
 
 // mkdir + md
 function mktemp(is_dir) {
@@ -939,7 +948,7 @@ function mktemp(is_dir) {
 		if (e.key == "Enter" || e.key == "Escape") {
 			input.onblur = null;
 			if(row.remove)
-			row.remove();
+				row.remove();
 			else
 				row.style.display = 'none';
 			ev(e);
@@ -996,7 +1005,7 @@ ebi('widget').innerHTML = (
 		'	<a id="up_quick_btn" class="tgl btn on"><div class="rotatable">+</div></a>' +
 		'</div>' +
 
-		'<a href="#" id="wtico">♫</a>' +
+		'<a href="#" id="wtico">' + (EMOJI ? '♫' : '♪') + '</a>' +
 
 	'</div>' +
 
@@ -6616,13 +6625,24 @@ window.thegrid = (function () {
 					accent = '#07c';
 				ihref += '&a=' + parseColor(accent).replace(/ /g, '');
 			}
+
+			var svg = ''
+			if(ebi('folder-icon').innerHTML != undefined){
+				svg = '<use href="#' +
+					(isdir ? 'folder' : 'file') + '-icon" color="' +
+					(ext == 'unk' || ext.startsWith('/') ? '#0000' : intToHSL(hashCode(ext))) + '"/>'
+				svg = '<svg class="thumb" width="100%" height="100%">' + svg + '</svg>';
+			}
+			else{
+				// 3DS / unsupported: use fallback
+				svg = '<span class="thumb">' + (isdir ? '📁[FOLDER]' : '📄[FILE:' + ext +']') + '</span>';
+			}
+
 			html.push('<a href="' + ohref + '" ref="' + ref +
 				'" class="' + ac + '" ttt="' + esc(name) + '">' +
 				'<div class="imgcontainer">' +
 				'<input type="checkbox" class="gselchk"></input>' +
-				'<svg class="thumb" width="100%" height="100%" version="1.1"><use href="#' +
-					(isdir ? 'folder' : 'file') + '-icon" color="' +
-					(ext == 'unk' || ext.startsWith('/') ? '#0000' : intToHSL(hashCode(ext))) + '"/></svg>' +
+				svg +
 				(isdir || ext == 'unk' || ext.startsWith('/') ? '' :
 					'<span class="th_ext" style="font-size: ' + (r.sz / 5) +'em; font-size:calc((var(--grid-sz) - 2.5em) / 3 * ' +
 					(ext.length > 3 ? 1 / (3 + ext.length * .4) * 3 : 1) + ')"><span class="inner">' + ext + '</span></span>') +
@@ -7370,10 +7390,10 @@ var search_ui = (function () {
 		var ms = ebi('moresearch');
 		if(e){
 			window.scrollTo(0, 0);
-			ms.innerHTML = '▴';
+			ms.innerHTML = '<span>▲</span>';
 		}
 		else{
-			ms.innerHTML = '▾';
+			ms.innerHTML = '<span>▼</span>';
 		}
 	}
 	ebi('moresearch').onclick = function () {
@@ -8138,6 +8158,7 @@ var treectl = (function () {
 		if (!entreed || r.hidden){
 			if(ebi('tree').style.width == '0px')
 				ebi('tree').style.display = 'none';
+			ebi('reszbar').style.left = '2px';
 			setcvar('--nav-sz', 0);
 			return;
 		}
@@ -9090,7 +9111,7 @@ function apply_perms(res) {
 	else{
 		ebi('blogout').style.display = 'none';
 		ebi('acc_name').innerHTML = L.login;
-		ebi('acc_pfp').innerHTML = fun_tgl ? '👤' : 'acc';
+		ebi('acc_pfp').innerHTML = fun_tgl && EMOJI ? '👤' : 'acc';
 	}
 	clmod(ebi('acc_pfp'), 'placeholder', acct == '*');
 
@@ -9177,7 +9198,8 @@ function apply_perms(res) {
 		ebi('reloc_up').innerHTML = up2k_lgcy ? '<span>▲</span>' : '<span>▼</span>';
 		clmod(ebi('up2k'), 'unmodal', up2k_lgcy);
 	}
-	clmod(ebi('opa_mkd'), 'vis', up_only);
+	if(EMOJI)
+		clmod(ebi('opa_mkd'), 'vis', up_only);
 }
 
 function wait_set_fsearch(){
@@ -11168,7 +11190,7 @@ function reload_browser() {
 
 		o = mknod('a');
 		o.setAttribute('href', link2);
-		o.textContent = uricom_dec(parts[a]) || (fun_tgl ? '🏠' : 'home');
+		o.textContent = uricom_dec(parts[a]) || (fun_tgl && EMOJI ? '🏠' : 'home');
 		ebi('path').appendChild(o);
 		ebi('path').appendChild(mknod('i'));
 		drag.mktarget(o);

copyparty/web/util.js

@@ -20,6 +20,13 @@ if (window.CGV)
     Object.assign(window, window.CGV);
 
 
+function supportsEmoji() {
+    var ctx = document.createElement('canvas').getContext('2d');
+    ctx.canvas.width = ctx.canvas.height = 1;
+    ctx.fillText('🎉', -4, 4);
+    return ctx.getImageData(0, 0, 1, 1).data[3] > 0; // Checks if pixels were drawn
+}
+
 var wah = '',
     STG = null,
     NOAC = 'autocorrect="off" autocapitalize="off"',
@@ -35,6 +42,7 @@ var wah = '',
     VCHROME = CHROME ? 1 : 0,
     UA = '' + navigator.userAgent,
     IE = !!document.documentMode,
+    EMOJI = supportsEmoji(),
     FIREFOX = ('netscape' in window) && / rv:/.test(UA),
     IPHONE = TOUCH && /iPhone|iPad|iPod/i.test(UA),
     LINUX = /Linux/.test(UA),
@@ -1823,7 +1831,7 @@ var toast = (function () {
             setcvar('--tmstep', Math.floor(sec * 20));
             html += '<div id="toastt"></div>';
         }
-        obj.innerHTML = html + '<a href="#" id="toastc">✕</a><div id="toastb">' + lf2br(txt) + '</div>';
+        obj.innerHTML = html + '<a href="#" id="toastc"><span class="x">×</span></a><div id="toastb">' + lf2br(txt) + '</div>';
         obj.className = cl;
         sec += obj.offsetWidth;
         obj.className += ' vis';