cyberpresidentvanellope/Bubberstation
1
0
Fork 0
mirror of https://github.com/Bubberstation/Bubberstation.git synced 2025-12-11 10:11:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updates ToolTips system to V1.1, by Wirewraith

Browse Source
This commit is contained in:
Remie Richards
2015-10-22 21:40:16 +01:00
parent 124fc81cdb
commit 2ad13eea59
4 changed files with 95 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
code/_onclick/hud/action.dm
View File

@@ -187,7 +187,7 @@
/obj/screen/movable/action_button/MouseEntered(location,control,params) /obj/screen/movable/action_button/MouseEntered(location,control,params)
openToolTip(usr,params,title = name,content = desc) openToolTip(usr,src,params,title = name,content = desc)
/obj/screen/movable/action_button/MouseExited() /obj/screen/movable/action_button/MouseExited()

2
code/_onclick/hud/alert.dm
View File

@@ -86,7 +86,7 @@
/obj/screen/alert/MouseEntered(location,control,params) /obj/screen/alert/MouseEntered(location,control,params)
openToolTip(usr,params,title = name,content = desc) openToolTip(usr,src,params,title = name,content = desc)
/obj/screen/alert/MouseExited() /obj/screen/alert/MouseExited()

31
code/modules/tooltip/tooltip.dm
View File

@@ -1,7 +1,8 @@
/* /*
Tooltips v1.0 - 19/10/15 Tooltips v1.1 - 22/10/15
Developed by Wire (#goonstation on irc.synirc.net) Developed by Wire (#goonstation on irc.synirc.net)
- Initial release - Added support for screen_loc pixel offsets. Should work. Maybe.
- Added init function to more efficiently send base vars
Configuration: Configuration:
- Set control to the correct skin element (remember to actually place the skin element) - Set control to the correct skin element (remember to actually place the skin element)
@@ -37,21 +38,26 @@ Notes:
file = 'code/modules/tooltip/tooltip.html' file = 'code/modules/tooltip/tooltip.html'
showing = 0 showing = 0
queueHide = 0 queueHide = 0
init = 0
New(client/C) New(client/C)
if (C) if (C)
src.owner = C src.owner = C
src.owner << browse(src.file, "window=[src.control]") src.owner << browse(file2text(src.file), "window=[src.control]")
..() ..()
proc/show(params = null, title = null, content = null, theme = "default") proc/show(atom/movable/thing, params = null, title = null, content = null, theme = "default", special = "none")
if (!params || (!title && !content) || !src.owner) return 0 if (!thing || !params || (!title && !content) || !src.owner || !isnum(world.icon_size)) return 0
if (!src.init)
//Initialize some vars
src.init = 1
src.owner << output(list2params(list(world.icon_size, src.control)), "[src.control]:tooltip.init")
src.showing = 1 src.showing = 1
//Format contents
if (title && content) if (title && content)
title = "<h1>[title]</h1>" title = "<h1>[title]</h1>"
content = "<p>[content]</p>" content = "<p>[content]</p>"
@@ -60,8 +66,11 @@ Notes:
else if (!title && content) else if (!title && content)
content = "<p>[content]</p>" content = "<p>[content]</p>"
//Make our dumb param object
params = {"{ "cursor": "[params]", "screenLoc": "[thing.screen_loc]" }"}
//Send stuff to the tooltip //Send stuff to the tooltip
src.owner << output(list2params(list(src.control, params, src.owner.view, "[title][content]", theme)), "[src.control]:tooltip.update") src.owner << output(list2params(list(params, src.owner.view, "[title][content]", theme, special)), "[src.control]:tooltip.update")
//If a hide() was hit while we were showing, run hide() again to avoid stuck tooltips //If a hide() was hit while we were showing, run hide() again to avoid stuck tooltips
src.showing = 0 src.showing = 0
@@ -83,21 +92,20 @@ Notes:
return 1 return 1
/* TG SPECIFIC CODE */ /* TG SPECIFIC CODE */
//Open a tooltip for user, at a location based on params //Open a tooltip for user, at a location based on params
//Theme is a CSS class in tooltip.html, by default this wrapper chooses a CSS class based on the user's UI_style (Midnight, Plasmafire, Retro) //Theme is a CSS class in tooltip.html, by default this wrapper chooses a CSS class based on the user's UI_style (Midnight, Plasmafire, Retro)
//Includes sanity.checks //Includes sanity.checks
/proc/openToolTip(mob/user = null,params = null,title = "",content = "",theme = "") /proc/openToolTip(mob/user = null, atom/movable/tip_src = null, params = null,title = "",content = "",theme = "")
if(istype(user)) if(istype(user))
if(user.client && user.client.tooltips) if(user.client && user.client.tooltips)
if(!theme && user.client.prefs && user.client.prefs.UI_style) if(!theme && user.client.prefs && user.client.prefs.UI_style)
theme = lowertext(user.client.prefs.UI_style) theme = lowertext(user.client.prefs.UI_style)
if(!theme) if(!theme)
theme = "default" theme = "default"
user.client.tooltips.show(params,title,content,theme) user.client.tooltips.show(tip_src, params,title,content,theme)
//Arbitrarily close a user's tooltip //Arbitrarily close a user's tooltip
@@ -108,6 +116,3 @@ Notes:
user.client.tooltips.hide() user.client.tooltips.hide()

90
code/modules/tooltip/tooltip.html
View File

@@ -51,7 +51,6 @@
.colo-pod .wrap {border-color: #256fb9;} .colo-pod .wrap {border-color: #256fb9;}
.colo-pod .content {border-color: #000000; background-color: #000000;} .colo-pod .content {border-color: #000000; background-color: #000000;}
/* TG: Themes */ /* TG: Themes */
/* ScreenUI */ /* ScreenUI */
.midnight .wrap {border-color: #2B2B33;} .midnight .wrap {border-color: #2B2B33;}
@@ -63,8 +62,7 @@
.retro .wrap {border-color: #005E00;} .retro .wrap {border-color: #005E00;}
.retro .content {color: #003366; border-color: #005E00; background-color: #00BD00;} .retro .content {color: #003366; border-color: #005E00; background-color: #00BD00;}
</style> </style>
</head> </head>
<body> <body>
@@ -74,33 +72,52 @@
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var tooltip = { var tooltip = {
'tileSize': 32,
'control': '', 'control': '',
'params': '', 'params': {},
'clientView': 0, 'clientView': 0,
'text': '', 'text': '',
'theme': '', 'theme': '',
'padding': 2, 'padding': 2,
init: function(tileSize, control) {
tooltip.tileSize = parseInt(tileSize);
tooltip.control = control;
},
hide: function() { hide: function() {
window.location = 'byond://winset?id='+tooltip.controlName+';is-visible=false'; window.location = 'byond://winset?id='+tooltip.control+';is-visible=false';
}, },
updateCallback: function(map) { updateCallback: function(map) {
if (typeof map === 'undefined' || !map) {return false;} if (typeof map === 'undefined' || !map) {return false;}
//alert(tooltip.params+' | '+tooltip.clientView+' | '+tooltip.text+' | '+tooltip.theme); //DEBUG
//Some reset stuff to avoid fringe issues with sizing //Some reset stuff to avoid fringe issues with sizing
window.location = 'byond://winset?id='+tooltip.controlName+';anchor1=0,0;size=999x999'; window.location = 'byond://winset?id='+tooltip.control+';anchor1=0,0;size=999x999';
//Get the real icon size according to the client view //Get the real icon size according to the client view
var mapWidth = map['view-size'].x, var mapWidth = map['view-size'].x,
mapHeight = map['view-size'].y, mapHeight = map['view-size'].y,
tilesShown = (tooltip.clientView * 2) + 1, tilesShown = (tooltip.clientView * 2) + 1,
realIconSize = mapWidth / tilesShown, realIconSize = mapWidth / tilesShown,
resizeRatio = realIconSize / tooltip.tileSize,
//Calculate letterboxing offsets //Calculate letterboxing offsets
leftOffset = (map.size.x - mapWidth) / 2, leftOffset = (map.size.x - mapWidth) / 2,
topOffset = (map.size.y - mapHeight) / 2; topOffset = (map.size.y - mapHeight) / 2;
//Parse out the tile locations from params screen-loc //alert(realIconSize + ' | ' +tooltip.tileSize + ' | ' + resizeRatio); //DEBUG
var paramsA = tooltip.params.split(';');
if (paramsA.length < 3) {return false;} //Parse out the tile and cursor locations from params (e.g. "icon-x=32;icon-y=29;screen-loc=3:10,15:29")
var paramsA = tooltip.params.cursor.split(';');
if (paramsA.length < 3) {return false;} //Sometimes screen-loc is never sent ahaha fuck you byond
//icon-x
var iconX = paramsA[0];
iconX = iconX.split('=');
iconX = parseInt(iconX[1]);
//icon-y
var iconY = paramsA[1];
iconY = iconY.split('=');
iconY = parseInt(iconY[1]);
//screen-loc
var screenLoc = paramsA[2]; var screenLoc = paramsA[2];
screenLoc = screenLoc.split('='); screenLoc = screenLoc.split('=');
screenLoc = screenLoc[1].split(','); screenLoc = screenLoc[1].split(',');
@@ -110,17 +127,61 @@
if (!left || !top) {return false;} if (!left || !top) {return false;}
screenLoc = left.split(':'); screenLoc = left.split(':');
left = parseInt(screenLoc[0]); left = parseInt(screenLoc[0]);
var enteredX = parseInt(screenLoc[1]);
screenLoc = top.split(':'); screenLoc = top.split(':');
top = parseInt(screenLoc[0]); top = parseInt(screenLoc[0]);
var enteredY = parseInt(screenLoc[1]);
//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
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 * resizeRatio);
}
}
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) * resizeRatio);
} else { //Cursor entered on the offset tile
if (northOffset < 0) { //Offset southwards
topOffset = topOffset - ((tooltip.tileSize + northOffset) * resizeRatio);
} else { //Offset northwards
top--;
topOffset = topOffset - (northOffset * resizeRatio);
}
}
}
}
}
//Handle special cases (for fuck sake)
if (tooltip.special !== 'none') {
//Put yo special cases here
}
//Clamp values //Clamp values
left = (left < 0 ? 0 : (left > tilesShown ? tilesShown : left)); left = (left < 0 ? 0 : (left > tilesShown ? tilesShown : left));
top = (top < 0 ? 0 : (top > tilesShown ? tilesShown : top)); 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) //Calculate where on the screen the popup should appear (below the hovered tile)
var posX = Math.round(((left - 1) * realIconSize) + leftOffset + tooltip.padding); //-1 to position at the left of the target tile 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 var posY = Math.round(((tilesShown - top + 1) * realIconSize) + topOffset + tooltip.padding); //+1 to position at the bottom of the target tile
//alert(mapWidth+' | '+mapHeight+' | '+tilesShown+' | '+realIconSize+' | '+leftOffset+' | '+topOffset+' | '+left+' | '+top+' | '+posX+' | '+posY); //DEBUG
$('body').attr('class', tooltip.theme); $('body').attr('class', tooltip.theme);
var $content = $('#content'), var $content = $('#content'),
@@ -139,20 +200,19 @@
} }
//Actually size, move and show the tooltip box //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'; window.location = 'byond://winset?id='+tooltip.control+';size='+docWidth+'x'+docHeight+';pos='+posX+','+posY+';is-visible=true';
$content.on('mouseover', function() { $content.on('mouseover', function() {
tooltip.hide(); tooltip.hide();
}); });
}, },
update: function(control, params, clientView, text, theme) { update: function(params, clientView, text, theme, special) {
if (!tooltip.controlName) {tooltip.controlName = control;}
//Assign our global object //Assign our global object
tooltip.params = params; tooltip.params = $.parseJSON(params);
tooltip.clientView = parseInt(clientView); tooltip.clientView = parseInt(clientView);
tooltip.text = text; tooltip.text = text;
tooltip.theme = theme; tooltip.theme = theme;
tooltip.special = special;
//Go get the map details //Go get the map details
window.location = 'byond://winget?callback=tooltip.updateCallback;id=mapwindow.map;property=size,view-size'; window.location = 'byond://winget?callback=tooltip.updateCallback;id=mapwindow.map;property=size,view-size';