Port's Wirewraith's Tooltip system

2025-02-26 09:04:50 +00:00 · 2015-10-20 20:58:09 +01:00
parent 8a35115f1d
commit 9f368e1b53
4 changed files with 285 additions and 0 deletions
--- a/code/modules/tooltip/tooltip.html
+++ b/code/modules/tooltip/tooltip.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Tooltip</title>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<style type="text/css">
+		body, html {
+			margin: 0;
+			padding: 0;
+			overflow: hidden;
+		}
+
+		.wrap {
+			position: absolute;
+			top: 0;
+			left: 0;
+			max-width: 298px;
+			border: 2px solid #1B2967;
+		}
+
+		.content {
+			font: bold 12px Arial, 'Helvetica Neue', Helvetica, sans-serif;
+			color: #ffffff;
+			padding: 8px;
+			border: 2px solid #0033CC;
+			background: #005CB8;
+		}
+
+		h1 {
+			margin: -5px 0 2px 0;
+			font-size: 1.2em;
+			line-height: 1.4;
+		}
+
+		p {
+			margin: 0;
+			line-height: 1.2;
+		}
+
+		/* Custom Themes */
+		.blob .wrap {border-color: #009900;}
+		.blob .content {border-color: #66FF00; background-color: #475E13;}
+
+		.wraith .wrap {border-color: #492136;}
+		.wraith .content {border-color: #331726; background-color: #471962;}
+
+		.pod .wrap {border-color: #052401;}
+		.pod .content {border-color: #326D29; background-color: #569F4B;}
+
+		.colo-pod .wrap {border-color: #256fb9;}
+		.colo-pod .content {border-color: #000000; background-color: #000000;}
+	</style>
+</head>
+<body>
+	<div id="wrap" class="wrap">
+		<div id="content" class="content"></div>
+	</div>
+	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript">
+		var tooltip = {
+			'control': '',
+			'params': '',
+			'clientView': 0,
+			'text': '',
+			'theme': '',
+			'padding': 2,
+			hide: function() {
+				window.location = 'byond://winset?id='+tooltip.controlName+';is-visible=false';
+			},
+			updateCallback: function(map) {
+				if (typeof map === 'undefined' || !map) {return false;}
+
+				//Some reset stuff to avoid fringe issues with sizing
+				window.location = 'byond://winset?id='+tooltip.controlName+';anchor1=0,0;size=999x999';
+
+				//Get the real icon size according to the client view
+				var mapWidth 		= map['view-size'].x,
+					mapHeight 		= map['view-size'].y,
+					tilesShown 		= (tooltip.clientView * 2) + 1,
+					realIconSize 	= mapWidth / tilesShown,
+					//Calculate letterboxing offsets	
+					leftOffset 		= (map.size.x - mapWidth) / 2,
+					topOffset 		= (map.size.y - mapHeight) / 2;
+
+				//Parse out the tile locations from params screen-loc
+				var paramsA = tooltip.params.split(';');
+				if (paramsA.length < 3) {return false;}
+				var screenLoc = paramsA[2];
+				screenLoc = screenLoc.split('=');
+				screenLoc = screenLoc[1].split(',');
+				if (screenLoc.length < 2) {return false;}
+				var left = screenLoc[0];
+				var top = screenLoc[1];
+				if (!left || !top) {return false;}
+				screenLoc = left.split(':');
+				left = parseInt(screenLoc[0]);
+				screenLoc = top.split(':');
+				top = parseInt(screenLoc[0]);
+
+				//Clamp values
+				left = (left < 0 ? 0 : (left > tilesShown ? tilesShown : left));
+				top = (top < 0 ? 0 : (top > tilesShown ? tilesShown : top));
+
+				//Calculate where on the screen the popup should appear (below the hovered tile) (the +2s are just for padding)
+				var posX = Math.round(((left - 1) * realIconSize) + leftOffset + tooltip.padding); //-1 to position at the left of the target tile
+				var posY = Math.round(((tilesShown - top + 1) * realIconSize) + topOffset + tooltip.padding); //+1 to position at the bottom of the target tile
+
+				$('body').attr('class', tooltip.theme);
+
+				var $content = $('#content'),
+					$wrap 	 = $('#wrap');
+				$wrap.attr('style', '');
+				$content.off('mouseover');
+				$content.html(tooltip.text);
+
+				$wrap.width($wrap.width() + 2); //Dumb hack to fix a bizarre sizing bug
+
+				var docWidth	= $wrap.outerWidth(),
+					docHeight	= $wrap.outerHeight();
+
+				if (posY + docHeight > map.size.y) { //Is the bottom edge below the window? Snap it up if so
+					posY = (posY - docHeight) - realIconSize - tooltip.padding;
+				}
+
+				//Actually size, move and show the tooltip box
+				window.location = 'byond://winset?id='+tooltip.controlName+';size='+docWidth+'x'+docHeight+';pos='+posX+','+posY+';is-visible=true';
+
+				$content.on('mouseover', function() {
+					tooltip.hide();
+				});
+			},
+			update: function(control, params, clientView, text, theme) {
+				if (!tooltip.controlName) {tooltip.controlName = control;}
+
+				//Assign our global object
+				tooltip.params = params;
+				tooltip.clientView = parseInt(clientView);
+				tooltip.text = text;
+				tooltip.theme = theme;
+
+				//Go get the map details
+				window.location = 'byond://winget?callback=tooltip.updateCallback;id=mapwindow.map;property=size,view-size';
+			},
+		};
+	</script>
+</body>
+</html>