Event Widget - Add Status Icon

GuildPortal admin site link to the original post

This script adds a status icon to the event widget. So a quick glance will show your signup status for each event. Hovering over the icon will show a tooltip with the actual status text.

Key

Alternate Available Cancelled Confirmed Tentative Wait List undefined

This script was added on to the same external file as the Event Widget - Add Signups to Tooltip script (as well as a few others) to reduce the number of files you need to load. Add the following script to a Free Form Text/HTML type widget on the same page as your Upcoming Events Widget (make sure the editor is in "Raw/Script" mode!), or add it to your Footer Area (Control Panel > Custom HTML & Script > Footer Area) to cover your entire site.

Default settings
(basic setup using all default values)

<style type="text/css">
#tooltip .signups td { padding: 5px; }
</style>
<script type="text/javascript" src="/GuildFiles/258012/events-posts-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 /* add event status icon */
 addStatusIcon();
})
</script>

With other event scripts
(using the hiding elements script to hide events that are too far in the future, adding signups lists to the tooltip and it includes standard options for this status icon script)

<style type="text/css">
#tooltip .signups td { padding: 5px; }
.event-status-icon { vertical-align: middle; float: right; padding: 3px; }
</style>
<script src="/GuildFiles/258012/events-posts-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 /* add signup info to event tooltip, default setup */
 showSignups();
 /* hide events too far in the future, default setup */
 hideNewEvents();
 /* add event status icon */
 addStatusIcon({
  tooltipWidth : 150,
  noStatusText : "You didn't sign up!"
 });
})
</script>

Change Status Icons
(If you want to change the icons in this script, add the following variables. One variable has the options and the second has the status name with the icon url)

<style type="text/css">
.event-status-icon { vertical-align: middle; float: right; padding: 3px; }
</style>
<script src="/GuildFiles/258012/events-posts-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 var options = {
  tooltipWidth : 150,
  noStatusText : "You didn't sign up!"
 };
 var statusImages = {
  'Alternate' : 'http://www.axiomfiles.com/Files/278466/icon-status-alternate.png',
  'Available' : 'http://www.axiomfiles.com/Files/278466/icon-status-available.png',
  'Cancelled' : 'http://www.axiomfiles.com/Files/278466/icon-status-cancelled.png',
  'Confirmed' : 'http://www.axiomfiles.com/Files/278466/icon-status-confirmed.png',
  'Tentative' : 'http://www.axiomfiles.com/Files/278466/icon-status-tentative.png',
  'Wait List' : 'http://www.axiomfiles.com/Files/278466/icon-status-waitlist.png',
  'undefined' : 'http://www.axiomfiles.com/Files/278466/icon-status-notfound.png'
 };
 addStatusIcon( options, statusImages );
})
</script>

Customizing

• Please refer to the Events Widget - Hiding Elements post for additional information on how to customize setting for that script.
• Please refer to the Event Widget - Add Signups to Tooltip post for additions options for that script.
  
  
• This script include some CSS. You can float the image to the right as I have it in the example (in purple), or to the left. And adjust the spacing (padding) between the text and image by modifying the CSS value in red.
  

  .event-status-icon { vertical-align: middle; float: right; padding: 3px; }

• Adjust the tooltip width by changing the "tooltipWidth" value in red, this value is in pixels.
• Currently, if you haven't signed up for an event, it will show "Not Found" in the tooltip. You can change this to whatever text you want by changing the "noStatusText" value in blue.
• If you want to add your own custom icons, you'll set up a variable (seen in the third script) that has the exact status text and your image url (in orange). The "addStatusIcon" function then needs to have both variables added to work properly.
  
  If a new status is ever added to GuildPortal, then you can easily add it by using the exact text of the status in quotes following the format above. For example, if a new status named "Event Full" is added, you can add an icon as follows (note that the example below doesn't change any options by using "{}")
  

  var statusImages = {
   "Event Full" : "http://myhost.com/some-image.gif"
  };
  addStatusIcon( {}, statusImages );

• When you add a variable, make sure the last one in the list doesn't have a comma at the end. This doesn't cause a lot of problems except if you are using IE.

Hrmmmmm... the icons aren't showing up in Firefox, although they show in IE just fine.  Any ideas?

Weird, it's working on Firefox at home, but wasn't at work... and I wouldn't have been able to see the page if I were randomly logged out or something.  Bizarre.  Ah well, if it's specific to my work computer, I'm not bothered  Sorry for bugging you, Mottie!