mirror of
https://github.com/Bubberstation/Bubberstation.git
synced 2025-12-29 11:02:05 +00:00
Port's Wirewraith's Tooltip system
This commit is contained in:
Remie Richards
110
code/modules/tooltip/tooltip.dm
Normal file
110
code/modules/tooltip/tooltip.dm
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
/*
|
||||||
|
Tooltips v1.0 - 19/10/15
|
||||||
|
Developed by Wire (#goonstation on irc.synirc.net)
|
||||||
|
- Initial release
|
||||||
|
|
||||||
|
Configuration:
|
||||||
|
- Set control to the correct skin element (remember to actually place the skin element)
|
||||||
|
- Set file to the correct path for the .html file (remember to actually place the html file)
|
||||||
|
- Attach the datum to the user client on login, e.g.
|
||||||
|
/client/New()
|
||||||
|
src.tooltips = new /datum/tooltip(src)
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
- Define mouse event procs on your (probably HUD) object and simply call the show and hide procs respectively:
|
||||||
|
/obj/screen/hud
|
||||||
|
MouseEntered(location, control, params)
|
||||||
|
usr.client.tooltip.show(params, title = src.name, content = src.desc)
|
||||||
|
|
||||||
|
MouseExited()
|
||||||
|
usr.client.tooltip.hide()
|
||||||
|
|
||||||
|
Customization:
|
||||||
|
- Theming can be done by passing the theme var to show() and using css in the html file to change the look
|
||||||
|
- For your convenience some pre-made themes are included
|
||||||
|
|
||||||
|
Notes:
|
||||||
|
- You may have noticed 90% of the work is done via javascript on the client. Gotta save those cycles man.
|
||||||
|
- This is entirely untested in any other codebase besides goonstation so I have no idea if it will port nicely. Good luck!
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/datum/tooltip
|
||||||
|
var
|
||||||
|
client/owner
|
||||||
|
control = "mainwindow.tooltip"
|
||||||
|
file = 'code/modules/tooltip/tooltip.html'
|
||||||
|
showing = 0
|
||||||
|
queueHide = 0
|
||||||
|
|
||||||
|
|
||||||
|
New(client/C)
|
||||||
|
if (C)
|
||||||
|
src.owner = C
|
||||||
|
src.owner << browse(src.file, "window=[src.control]")
|
||||||
|
|
||||||
|
..()
|
||||||
|
|
||||||
|
|
||||||
|
proc/show(params = null, title = null, content = null, theme = "default")
|
||||||
|
if (!params || (!title && !content) || !src.owner) return 0
|
||||||
|
src.showing = 1
|
||||||
|
|
||||||
|
//Format contents
|
||||||
|
if (title && content)
|
||||||
|
title = "<h1>[title]</h1>"
|
||||||
|
content = "<p>[content]</p>"
|
||||||
|
else if (title && !content)
|
||||||
|
title = "<p>[title]</p>"
|
||||||
|
else if (!title && content)
|
||||||
|
content = "<p>[content]</p>"
|
||||||
|
|
||||||
|
//Send stuff to the tooltip
|
||||||
|
src.owner << output(list2params(list(src.control, params, src.owner.view, "[title][content]", theme)), "[src.control]:tooltip.update")
|
||||||
|
|
||||||
|
//DEBUG
|
||||||
|
world << "SHOW() DEBUG"
|
||||||
|
world << "Tooltip Owner View: [src.owner.view]"
|
||||||
|
world << "Params: [params]"
|
||||||
|
|
||||||
|
|
||||||
|
//If a hide() was hit while we were showing, run hide() again to avoid stuck tooltips
|
||||||
|
src.showing = 0
|
||||||
|
if (src.queueHide)
|
||||||
|
src.hide()
|
||||||
|
|
||||||
|
return 1
|
||||||
|
|
||||||
|
|
||||||
|
proc/hide()
|
||||||
|
if (src.queueHide)
|
||||||
|
spawn(1)
|
||||||
|
winshow(src.owner, src.control, 0)
|
||||||
|
else
|
||||||
|
winshow(src.owner, src.control, 0)
|
||||||
|
|
||||||
|
src.queueHide = src.showing ? 1 : 0
|
||||||
|
|
||||||
|
return 1
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/client/var/datum/tooltip/tooltip
|
||||||
|
/client/New()
|
||||||
|
..()
|
||||||
|
tooltip = new /datum/tooltip(src)
|
||||||
|
|
||||||
|
|
||||||
|
/obj/screen/movable/action_button/MouseEntered(location,control,params)
|
||||||
|
usr.client.tooltip.show(params,title = name, content = desc)
|
||||||
|
|
||||||
|
|
||||||
|
/obj/screen/movable/action_button/MouseExited()
|
||||||
|
usr.client.tooltip.hide()
|
||||||
|
|
||||||
|
|
||||||
|
/mob/MouseEntered(location,control,params)
|
||||||
|
usr.client.tooltip.show(params,title = name, content = desc)
|
||||||
|
|
||||||
|
/mob/MouseExited()
|
||||||
|
usr.client.tooltip.hide()
|
||||||
148
code/modules/tooltip/tooltip.html
Normal file
148
code/modules/tooltip/tooltip.html
Normal file
@@ -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>
|
||||||
@@ -1694,6 +1694,32 @@ window "mainwindow"
|
|||||||
is-checked = false
|
is-checked = false
|
||||||
group = ""
|
group = ""
|
||||||
button-type = pushbox
|
button-type = pushbox
|
||||||
|
elem "tooltip"
|
||||||
|
type = BROWSER
|
||||||
|
pos = 0,0
|
||||||
|
size = 999x999
|
||||||
|
anchor1 = none
|
||||||
|
anchor2 = none
|
||||||
|
font-family = ""
|
||||||
|
font-size = 0
|
||||||
|
font-style = ""
|
||||||
|
text-color = #ffffff
|
||||||
|
background-color = #000000
|
||||||
|
is-visible = false
|
||||||
|
is-disabled = false
|
||||||
|
is-transparent = false
|
||||||
|
is-default = false
|
||||||
|
border = none
|
||||||
|
drop-zone = false
|
||||||
|
right-click = false
|
||||||
|
saved-params = ""
|
||||||
|
on-size = ""
|
||||||
|
show-history = false
|
||||||
|
show-url = false
|
||||||
|
auto-format = false
|
||||||
|
use-title = false
|
||||||
|
on-show = ""
|
||||||
|
on-hide = ""
|
||||||
|
|
||||||
window "mapwindow"
|
window "mapwindow"
|
||||||
elem "mapwindow"
|
elem "mapwindow"
|
||||||
|
|||||||
@@ -1532,6 +1532,7 @@
|
|||||||
#include "code\modules\telesci\gps.dm"
|
#include "code\modules\telesci\gps.dm"
|
||||||
#include "code\modules\telesci\telepad.dm"
|
#include "code\modules\telesci\telepad.dm"
|
||||||
#include "code\modules\telesci\telesci_computer.dm"
|
#include "code\modules\telesci\telesci_computer.dm"
|
||||||
|
#include "code\modules\tooltip\tooltip.dm"
|
||||||
#include "code\orphaned procs\AStar.dm"
|
#include "code\orphaned procs\AStar.dm"
|
||||||
#include "code\orphaned procs\dbcore.dm"
|
#include "code\orphaned procs\dbcore.dm"
|
||||||
#include "code\orphaned procs\priority_announce.dm"
|
#include "code\orphaned procs\priority_announce.dm"
|
||||||
|
|||||||
Reference in New Issue
Block a user