mirror of
https://github.com/Citadel-Station-13/Citadel-Station-13-RP.git
synced 2026-08-24 15:47:14 +01:00
update radial & tooltip (#7479)
<!-- Write **BELOW** The Headers and **ABOVE** The comments else it may not be viewable. --> <!-- You can view Contributing.MD for a detailed description of the pull request process. --> ## About The Pull Request yeah <!-- Describe The Pull Request. Please be sure every change is documented or this can delay review and even discourage maintainers from merging your PR! --> ## Why It's Good For The Game <!-- Argue for the merits of your changes and how they benefit the game, especially if they are controversial and/or far reaching. If you can't actually explain WHY what you are doing will improve the game, then it probably isn't good for the game in the first place. --> ## Changelog <!-- If your PR modifies aspects of the game that can be concretely observed by players or admins you should add a changelog. If your change does NOT meet this description, remove this section. Please note that maintainers freely reserve the right to remove and add tags should they deem it appropriate. You can attempt to finagle the system all you want, but it's best to shoot for clear communication right off the bat. --> <!-- Both 🆑's are required for the changelog to work! You can put your name to the right of the first 🆑 if you want to overwrite your GitHub username as author ingame. --> <!-- You can use multiple of the same prefix (they're only used for the icon ingame) and delete the unneeded ones. Despite some of the tags, changelogs should generally represent how a player might be affected by the changes rather than a summary of the PR's contents. -->
This commit is contained in:
Letter N
+375
-217
@@ -1,261 +1,419 @@
|
||||
<!DOCTYPE html>
|
||||
<!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;
|
||||
}
|
||||
<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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
h1 {
|
||||
margin: -5px 0 2px 0;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Custom Themes */
|
||||
.blob .wrap {border-color: #2E2E2E;}
|
||||
.blob .content {color: #82ED00; border-color: #4E4C4A; background-color: #191918;}
|
||||
/* Custom Themes */
|
||||
.blob .wrap {
|
||||
border-color: #2e2e2e;
|
||||
}
|
||||
.blob .content {
|
||||
color: #82ed00;
|
||||
border-color: #4e4c4a;
|
||||
background-color: #191918;
|
||||
}
|
||||
|
||||
.parasite .wrap {border-color: #88868D;}
|
||||
.parasite .content {color: #EFEEEF; border-color: #35333A; background-color: #636169;}
|
||||
.parasite .wrap {
|
||||
border-color: #88868d;
|
||||
}
|
||||
.parasite .content {
|
||||
color: #efeeef;
|
||||
border-color: #35333a;
|
||||
background-color: #636169;
|
||||
}
|
||||
|
||||
.alien .wrap {border-color: #33165B;}
|
||||
.alien .content {color: #25004A; border-color: #5A3076; background-color: #6D3A8E;}
|
||||
.alien .wrap {
|
||||
border-color: #33165b;
|
||||
}
|
||||
.alien .content {
|
||||
color: #25004a;
|
||||
border-color: #5a3076;
|
||||
background-color: #6d3a8e;
|
||||
}
|
||||
|
||||
.wraith .wrap {border-color: #492136;}
|
||||
.wraith .content {border-color: #331726; background-color: #471962;}
|
||||
.wraith .wrap {
|
||||
border-color: #492136;
|
||||
}
|
||||
.wraith .content {
|
||||
border-color: #331726;
|
||||
background-color: #471962;
|
||||
}
|
||||
|
||||
.cult .wrap {border-color: #292222;}
|
||||
.cult .content {color: #FF0000; border-color: #4C4343; background-color: #3C3434;}
|
||||
.cult .wrap {
|
||||
border-color: #292222;
|
||||
}
|
||||
.cult .content {
|
||||
color: #ff0000;
|
||||
border-color: #4c4343;
|
||||
background-color: #3c3434;
|
||||
}
|
||||
|
||||
.pod .wrap {border-color: #052401;}
|
||||
.pod .content {border-color: #326D29; background-color: #569F4B;}
|
||||
.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;}
|
||||
.colo-pod .wrap {
|
||||
border-color: #256fb9;
|
||||
}
|
||||
.colo-pod .content {
|
||||
border-color: #000000;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.hisgrace .wrap {border-color: #7C1414;}
|
||||
.hisgrace .content {color: #15D512; border-color: #9D1414; background-color: #861414;}
|
||||
.hisgrace .wrap {
|
||||
border-color: #7c1414;
|
||||
}
|
||||
.hisgrace .content {
|
||||
color: #15d512;
|
||||
border-color: #9d1414;
|
||||
background-color: #861414;
|
||||
}
|
||||
|
||||
/* TG: Themes */
|
||||
/* ScreenUI */
|
||||
.midnight .wrap {border-color: #2B2B33;}
|
||||
.midnight .content {color: #6087A0; border-color: #2B2B33; background-color: #36363C;}
|
||||
/* TG: Themes */
|
||||
/* ScreenUI */
|
||||
.midnight .wrap {
|
||||
border-color: #2b2b33;
|
||||
}
|
||||
.midnight .content {
|
||||
color: #6087a0;
|
||||
border-color: #2b2b33;
|
||||
background-color: #36363c;
|
||||
}
|
||||
|
||||
.plasmafire .wrap {border-color: #21213D;}
|
||||
.plasmafire .content {color: #FFA800 ; border-color: #21213D; background-color:#1D1D36;}
|
||||
.plasmafire .wrap {
|
||||
border-color: #21213d;
|
||||
}
|
||||
.plasmafire .content {
|
||||
color: #ffa800;
|
||||
border-color: #21213d;
|
||||
background-color: #1d1d36;
|
||||
}
|
||||
|
||||
.retro .wrap {border-color: #005E00;}
|
||||
.retro .content {color: #003366; border-color: #005E00; background-color: #00BD00;}
|
||||
.retro .wrap {
|
||||
border-color: #005e00;
|
||||
}
|
||||
.retro .content {
|
||||
color: #003366;
|
||||
border-color: #005e00;
|
||||
background-color: #00bd00;
|
||||
}
|
||||
|
||||
.slimecore .wrap {border-color: #18640E;}
|
||||
.slimecore .content {color: #6EA161; border-color: #11450B; background-color: #354E35;}
|
||||
.slimecore .wrap {
|
||||
border-color: #18640e;
|
||||
}
|
||||
.slimecore .content {
|
||||
color: #6ea161;
|
||||
border-color: #11450b;
|
||||
background-color: #354e35;
|
||||
}
|
||||
|
||||
.operative .wrap {border-color: #1E0101;}
|
||||
.operative .content {color: #FFFFFF; border-color: #750000; background-color: #350000;}
|
||||
.operative .wrap {
|
||||
border-color: #13121b;
|
||||
}
|
||||
.operative .content {
|
||||
color: #b01232;
|
||||
border-color: #13121b;
|
||||
background-color: #282831;
|
||||
}
|
||||
|
||||
.clockwork .wrap {
|
||||
border-color: #cfbc47;
|
||||
}
|
||||
.clockwork .content {
|
||||
color: #b18e25;
|
||||
border-color: #cfbc47;
|
||||
background-color: #523c15;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrap" class="wrap">
|
||||
<div id="content" class="content"></div>
|
||||
</div>
|
||||
<script type="text/javascript" src="jquery.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var tooltip = {
|
||||
'tileSize': 32,
|
||||
'control': '',
|
||||
'params': {},
|
||||
'client_view_w': 0,
|
||||
'client_view_h': 0,
|
||||
'text': '',
|
||||
'theme': '',
|
||||
'padding': 2,
|
||||
init: function(tileSize, control) {
|
||||
tooltip.tileSize = parseInt(tileSize);
|
||||
tooltip.control = control;
|
||||
},
|
||||
hide: function() {
|
||||
window.location = 'byond://winset?id='+tooltip.control+';is-visible=false';
|
||||
},
|
||||
updateCallback: function(map) {
|
||||
if (typeof map === 'undefined' || !map) {return false;}
|
||||
.glass .wrap {
|
||||
border-color: #344b58;
|
||||
}
|
||||
.glass .content {
|
||||
color: #75a4c4;
|
||||
border-color: #344b58;
|
||||
background-color: #1f252b;
|
||||
}
|
||||
|
||||
//alert(tooltip.params+' | '+tooltip.clientView+' | '+tooltip.text+' | '+tooltip.theme); //DEBUG
|
||||
.trasen-knox .wrap {
|
||||
border-color: #998e81;
|
||||
}
|
||||
.trasen-knox .content {
|
||||
color: #3ce375;
|
||||
border-color: #998e81;
|
||||
background-color: #1e1d21;
|
||||
}
|
||||
|
||||
//Some reset stuff to avoid fringe issues with sizing
|
||||
window.location = 'byond://winset?id='+tooltip.control+';anchor1=0,0;size=999x999';
|
||||
.detective .wrap {
|
||||
border-color: #2c0f0c;
|
||||
}
|
||||
.detective .content {
|
||||
color: #c7b08b;
|
||||
border-color: #2c0f0c;
|
||||
background-color: #221c1a;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrap" class="wrap">
|
||||
<div id="content" class="content"></div>
|
||||
</div>
|
||||
<script type="text/javascript" src="jquery.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var tooltip = {
|
||||
tileSize: 32,
|
||||
control: "",
|
||||
params: {},
|
||||
client_view_w: 0,
|
||||
client_view_h: 0,
|
||||
text: "",
|
||||
theme: "",
|
||||
padding: 2,
|
||||
init: function (tileSize, control) {
|
||||
tooltip.tileSize = parseInt(tileSize);
|
||||
tooltip.control = control;
|
||||
},
|
||||
hide: function () {
|
||||
window.location =
|
||||
"byond://winset?id=" + tooltip.control + ";is-visible=false";
|
||||
},
|
||||
updateCallback: function (map) {
|
||||
if (typeof map === "undefined" || !map) {
|
||||
return false;
|
||||
}
|
||||
|
||||
//Get the real icon size according to the client view
|
||||
//FYI, this bit is even more borrowed from goon, our widescreen broke tooltips so I took a look at how they do it
|
||||
//To improve our code. Thanks gooncoders, very cool
|
||||
var mapWidth = map['view-size'].x,
|
||||
mapHeight = map['view-size'].y,
|
||||
tilesShownX = tooltip.client_view_w
|
||||
tilesShownY = tooltip.client_view_h
|
||||
realIconSizeX = mapWidth / tilesShownX,
|
||||
realIconSizeY = mapHeight / tilesShownY,
|
||||
resizeRatioX = realIconSizeX / tooltip.tileSize,
|
||||
resizeRatioY = realIconSizeY / tooltip.tileSize,
|
||||
//Calculate letterboxing offsets
|
||||
leftOffset = (map.size.x - mapWidth) / 2,
|
||||
topOffset = (map.size.y - mapHeight) / 2;
|
||||
//alert(tooltip.params+' | '+tooltip.clientView+' | '+tooltip.text+' | '+tooltip.theme); //DEBUG
|
||||
|
||||
//alert(realIconSize + ' | ' +tooltip.tileSize + ' | ' + resizeRatio); //DEBUG
|
||||
//Some reset stuff to avoid fringe issues with sizing
|
||||
window.location =
|
||||
"byond://winset?id=" +
|
||||
tooltip.control +
|
||||
";anchor1=0,0;size=999x999";
|
||||
|
||||
const parameters = new Object();
|
||||
//Get the real icon size according to the client view
|
||||
//FYI, this bit is even more borrowed from goon, our widescreen broke tooltips so I took a look at how they do it
|
||||
//To improve our code. Thanks gooncoders, very cool
|
||||
var mapWidth = map["view-size"].x,
|
||||
mapHeight = map["view-size"].y,
|
||||
tilesShownX = tooltip.client_view_w,
|
||||
tilesShownY = tooltip.client_view_h,
|
||||
realIconSizeX = mapWidth / tilesShownX,
|
||||
realIconSizeY = mapHeight / tilesShownY,
|
||||
resizeRatioX = realIconSizeX / tooltip.tileSize,
|
||||
resizeRatioY = realIconSizeY / tooltip.tileSize,
|
||||
//Calculate letterboxing offsets
|
||||
leftOffset = (map.size.x - mapWidth) / 2,
|
||||
topOffset = (map.size.y - mapHeight) / 2;
|
||||
|
||||
//Parse out the contents of params (e.g. "icon-x=32;icon-y=29;screen-loc=3:10,15:29")
|
||||
//It is worth noting that params is not always ordered in the same way. We therefore need to write the code
|
||||
//To load their values in independantly of their order
|
||||
var paramsA = tooltip.params.cursor.split(';');
|
||||
for (var i = 0; i < paramsA.length; i++) {
|
||||
var entry = paramsA[i];
|
||||
var nameAndValue = entry.split("=");
|
||||
parameters[nameAndValue[0]] = nameAndValue[1];
|
||||
}
|
||||
//alert(realIconSize + ' | ' +tooltip.tileSize + ' | ' + resizeRatio); //DEBUG
|
||||
|
||||
//Sometimes screen-loc is never sent ahaha fuck you byond
|
||||
if (!parameters["icon-x"] || !parameters["icon-y"] || !parameters["screen-loc"]) {
|
||||
return false;
|
||||
}
|
||||
//icon-x
|
||||
var iconX = parseInt(parameters["icon-x"]);
|
||||
//icon-y
|
||||
var iconY = parseInt(parameters["icon-y"]);
|
||||
//screen-loc
|
||||
var screenLoc = parameters["screen-loc"];
|
||||
screenLoc = screenLoc.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]);
|
||||
var enteredX = parseInt(screenLoc[1]);
|
||||
screenLoc = top.split(':');
|
||||
top = parseInt(screenLoc[0]);
|
||||
var enteredY = parseInt(screenLoc[1]);
|
||||
const parameters = new Object();
|
||||
|
||||
//Screen loc offsets on objects (e.g. "WEST+0:6,NORTH-1:26") can royally mess with positioning depending on where the cursor enters
|
||||
//This is a giant bitch to parse. Note that it only expects screen_loc in the format <west>,<north>.
|
||||
var oScreenLoc = tooltip.params.screenLoc.split(','); //o for original ok
|
||||
//Parse out the contents of params (e.g. "icon-x=32;icon-y=29;screen-loc=3:10,15:29")
|
||||
//It is worth noting that params is not always ordered in the same way. We therefore need to write the code
|
||||
//To load their values in independantly of their order
|
||||
var paramsA = tooltip.params.cursor.split(";");
|
||||
for (var i = 0; i < paramsA.length; i++) {
|
||||
var entry = paramsA[i];
|
||||
var nameAndValue = entry.split("=");
|
||||
parameters[nameAndValue[0]] = nameAndValue[1];
|
||||
}
|
||||
|
||||
var west = oScreenLoc[0].split(':');
|
||||
if (west.length > 1) { //Only if west has a pixel offset
|
||||
var westOffset = parseInt(west[1]);
|
||||
if (westOffset !== 0) {
|
||||
if ((iconX + westOffset) !== enteredX) { //Cursor entered on the offset tile
|
||||
left = left + (westOffset < 0 ? 1 : -1);
|
||||
}
|
||||
leftOffset = leftOffset + (westOffset * resizeRatioX);
|
||||
}
|
||||
}
|
||||
//Sometimes screen-loc is never sent ahaha fuck you byond
|
||||
if (
|
||||
!parameters["icon-x"] ||
|
||||
!parameters["icon-y"] ||
|
||||
!parameters["screen-loc"]
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
//icon-x
|
||||
var iconX = parseInt(parameters["icon-x"]);
|
||||
//icon-y
|
||||
var iconY = parseInt(parameters["icon-y"]);
|
||||
//screen-loc
|
||||
var screenLoc = parameters["screen-loc"];
|
||||
screenLoc = screenLoc.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]);
|
||||
var enteredX = parseInt(screenLoc[1]);
|
||||
screenLoc = top.split(":");
|
||||
top = parseInt(screenLoc[0]);
|
||||
var enteredY = parseInt(screenLoc[1]);
|
||||
|
||||
if (oScreenLoc.length > 1) { //If north is given
|
||||
var north = oScreenLoc[1].split(':');
|
||||
if (north.length > 1) { //Only if north has a pixel offset
|
||||
var northOffset = parseInt(north[1]);
|
||||
if (northOffset !== 0) {
|
||||
if ((iconY + northOffset) === enteredY) { //Cursor entered on the original tile
|
||||
top--;
|
||||
topOffset = topOffset - ((tooltip.tileSize + northOffset) * resizeRatioY);
|
||||
} else { //Cursor entered on the offset tile
|
||||
if (northOffset < 0) { //Offset southwards
|
||||
topOffset = topOffset - ((tooltip.tileSize + northOffset) * resizeRatioY);
|
||||
} else { //Offset northwards
|
||||
top--;
|
||||
topOffset = topOffset - (northOffset * resizeRatioY);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Screen loc offsets on objects (e.g. "WEST+0:6,NORTH-1:26") can royally mess with positioning depending on where the cursor enters
|
||||
//This is a giant bitch to parse. Note that it only expects screen_loc in the format <west>,<north>.
|
||||
var oScreenLoc = tooltip.params.screenLoc.split(","); //o for original ok
|
||||
|
||||
//Handle special cases (for fuck sake)
|
||||
if (tooltip.special !== 'none') {
|
||||
//Put yo special cases here
|
||||
}
|
||||
var west = oScreenLoc[0].split(":");
|
||||
if (west.length > 1) {
|
||||
//Only if west has a pixel offset
|
||||
var westOffset = parseInt(west[1]);
|
||||
if (westOffset !== 0) {
|
||||
if (iconX + westOffset !== enteredX) {
|
||||
//Cursor entered on the offset tile
|
||||
left = left + (westOffset < 0 ? 1 : -1);
|
||||
}
|
||||
leftOffset = leftOffset + westOffset * resizeRatioX;
|
||||
}
|
||||
}
|
||||
|
||||
//Clamp values
|
||||
left = (left < 0 ? 0 : (left > tilesShownX ? tilesShownX : left));
|
||||
top = (top < 0 ? 0 : (top > tilesShownY ? tilesShownY : top));
|
||||
if (oScreenLoc.length > 1) {
|
||||
//If north is given
|
||||
var north = oScreenLoc[1].split(":");
|
||||
if (north.length > 1) {
|
||||
//Only if north has a pixel offset
|
||||
var northOffset = parseInt(north[1]);
|
||||
if (northOffset !== 0) {
|
||||
if (iconY + northOffset === enteredY) {
|
||||
//Cursor entered on the original tile
|
||||
top--;
|
||||
topOffset =
|
||||
topOffset - (tooltip.tileSize + northOffset) * resizeRatioY;
|
||||
} else {
|
||||
//Cursor entered on the offset tile
|
||||
if (northOffset < 0) {
|
||||
//Offset southwards
|
||||
topOffset =
|
||||
topOffset -
|
||||
(tooltip.tileSize + northOffset) * resizeRatioY;
|
||||
} else {
|
||||
//Offset northwards
|
||||
top--;
|
||||
topOffset = topOffset - northOffset * resizeRatioY;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Calculate where on the screen the popup should appear (below the hovered tile)
|
||||
var posX = Math.round(((left - 1) * realIconSizeX) + leftOffset + tooltip.padding); //-1 to position at the left of the target tile
|
||||
var posY = Math.round(((tilesShownY - top + 1) * realIconSizeY) + topOffset + tooltip.padding); //+1 to position at the bottom of the target tile
|
||||
//Handle special cases (for fuck sake)
|
||||
if (tooltip.special !== "none") {
|
||||
//Put yo special cases here
|
||||
}
|
||||
|
||||
//alert(mapWidth+' | '+mapHeight+' | '+tilesShown+' | '+realIconSize+' | '+leftOffset+' | '+topOffset+' | '+left+' | '+top+' | '+posX+' | '+posY); //DEBUG
|
||||
//Clamp values
|
||||
left = left < 0 ? 0 : left > tilesShownX ? tilesShownX : left;
|
||||
top = top < 0 ? 0 : top > tilesShownY ? tilesShownY : top;
|
||||
|
||||
$('body').attr('class', tooltip.theme);
|
||||
//Calculate where on the screen the popup should appear (below the hovered tile)
|
||||
var posX = Math.round(
|
||||
(left - 1) * realIconSizeX + leftOffset + tooltip.padding,
|
||||
); //-1 to position at the left of the target tile
|
||||
var posY = Math.round(
|
||||
(tilesShownY - top + 1) * realIconSizeY +
|
||||
topOffset +
|
||||
tooltip.padding,
|
||||
); //+1 to position at the bottom of the target tile
|
||||
|
||||
var $content = $('#content'),
|
||||
$wrap = $('#wrap');
|
||||
$wrap.attr('style', '');
|
||||
$content.off('mouseover');
|
||||
$content.html(tooltip.text);
|
||||
//alert(mapWidth+' | '+mapHeight+' | '+tilesShown+' | '+realIconSize+' | '+leftOffset+' | '+topOffset+' | '+left+' | '+top+' | '+posX+' | '+posY); //DEBUG
|
||||
|
||||
$wrap.width($wrap.width() + 2); //Dumb hack to fix a bizarre sizing bug
|
||||
$("body").attr("class", tooltip.theme);
|
||||
|
||||
var pixelRatio = 1;
|
||||
if (window.devicePixelRatio) {
|
||||
pixelRatio = window.devicePixelRatio;
|
||||
}
|
||||
var $content = $("#content"),
|
||||
$wrap = $("#wrap");
|
||||
$wrap.attr("style", "");
|
||||
$content.off("mouseover");
|
||||
$content.html(tooltip.text);
|
||||
|
||||
var docWidth = Math.floor($wrap.outerWidth() * pixelRatio),
|
||||
docHeight = Math.floor($wrap.outerHeight() * pixelRatio);
|
||||
$wrap.width($wrap.width() + 2); //Dumb hack to fix a bizarre sizing bug
|
||||
|
||||
if (posY + docHeight > map.size.y) { //Is the bottom edge below the window? Snap it up if so
|
||||
posY = (posY - docHeight) - realIconSizeY - tooltip.padding;
|
||||
}
|
||||
var pixelRatio = 1;
|
||||
if (window.devicePixelRatio) {
|
||||
pixelRatio = window.devicePixelRatio;
|
||||
}
|
||||
|
||||
//Actually size, move and show the tooltip box
|
||||
window.location = 'byond://winset?id='+tooltip.control+';size='+docWidth+'x'+docHeight+';pos='+posX+','+posY+';is-visible=true';
|
||||
var docWidth = Math.floor($wrap.outerWidth() * pixelRatio),
|
||||
docHeight = Math.floor($wrap.outerHeight() * pixelRatio);
|
||||
|
||||
$content.on('mouseover', function() {
|
||||
tooltip.hide();
|
||||
});
|
||||
},
|
||||
update: function(params, client_vw , clien_vh , text, theme, special) {
|
||||
//Assign our global object
|
||||
tooltip.params = $.parseJSON(params);
|
||||
tooltip.client_view_w = parseInt(client_vw);
|
||||
tooltip.client_view_h = parseInt(clien_vh);
|
||||
tooltip.text = text;
|
||||
tooltip.theme = theme;
|
||||
tooltip.special = special;
|
||||
if (posY + docHeight > map.size.y) {
|
||||
//Is the bottom edge below the window? Snap it up if so
|
||||
posY = posY - docHeight - realIconSizeY - tooltip.padding;
|
||||
}
|
||||
|
||||
//Go get the map details
|
||||
window.location = 'byond://winget?callback=tooltip.updateCallback;id=mapwindow.map;property=size,view-size';
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
//Actually size, move and show the tooltip box
|
||||
window.location =
|
||||
"byond://winset?id=" +
|
||||
tooltip.control +
|
||||
";size=" +
|
||||
docWidth +
|
||||
"x" +
|
||||
docHeight +
|
||||
";pos=" +
|
||||
posX +
|
||||
"," +
|
||||
posY +
|
||||
";is-visible=true";
|
||||
|
||||
$content.on("mouseover", function () {
|
||||
tooltip.hide();
|
||||
});
|
||||
},
|
||||
update: function (params, client_vw, clien_vh, text, theme, special) {
|
||||
//Assign our global object
|
||||
tooltip.params = $.parseJSON(params);
|
||||
tooltip.client_view_w = parseInt(client_vw);
|
||||
tooltip.client_view_h = parseInt(clien_vh);
|
||||
tooltip.text = text;
|
||||
tooltip.theme = theme;
|
||||
tooltip.special = special;
|
||||
|
||||
//Go get the map details
|
||||
window.location =
|
||||
"byond://winget?callback=tooltip.updateCallback;id=mapwindow.map;property=size,view-size";
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user