com.hfg.javascript.HoverboardMaker Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of com_hfg Show documentation
Show all versions of com_hfg Show documentation
com.hfg xml, html, svg, and bioinformatics utility library
package com.hfg.javascript;
import com.hfg.html.HTMLTag;
import com.hfg.html.HTML;
import com.hfg.graphics.ColorUtil;
import java.awt.*;
//------------------------------------------------------------------------------
/**
Generic hoverboard generation javascript.
You will also need to add generateJS() to the javascript in the page's <head> tag.
See this page for tooltip examples.
Simple code example:
HoverboardMaker hoverboardMaker = new HoverboardMaker();
HTMLDoc htmlDoc = new HTMLDoc();
// Keep IE from going into quirks mode.
htmlDoc.setDoctype(Doctype.HTML_4_01_TRANSITIONAL_NO_URL);
HTML html = new HTML();
htmlDoc.setRootTag(html);
html.getHead().addSubtag(Meta.CONTENT_TYPE_ISO_8859_1);
// Add the necessary javascript to the page.
html.getHead().addJavascript(hoverboardMaker.generateJS());
html.getHead().addJavascript(generateJS());
// Add CSS
html.getHead().addStyle(hoverboardMaker.generateCSS());
Body body = html.getBody();
body.br(2);
// Create the target tag (in this case a span in a span) that the hoverboard will function on.
Span span = body.addSpan("The quick ");
hoverboardMaker.addHoverboard(span, "generateHoverboardContent");
Span targetSpan = span.addSpan("brown").setId("hoverTarget");
span.addContent(" fox jumped over the lazy dog");
...
private String generateJS()
{
Pre content = new Pre();
content.addSpan("Choose a door to open:\n").setStyle(CSS.BOLD + CSS.fontSize(24));
content.addSpan("1. ").addLink("javascript:void(0);", "One");
content.addSpan("\n2. ").addLink("javascript:void(0);", "Two");
content.addSpan("\n3. ").addLink("javascript:void(0);", "Three");
String contentString = content.toHTML();
String safeString = StringUtil.replaceAll(contentString, "'", "\\'");
safeString = StringUtil.replaceAll(safeString, "\n", "\\n");
safeString = StringUtil.replaceAll(safeString, "\r", "\\r");
StringBuffer js = new StringBuffer();
js.append("//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -\n"
+ "function generateHoverboardContent(inTargetElement)\n"
+ "{\n"
+ " if (inTargetElement.id && inTargetElement.id == 'hoverTarget') {"
+ " return '" + safeString + "';\n"
+ " }\n"
+ "}\n");
return js.toString();
}
@author J. Alex Taylor, hairyfatguy.com
*/
//------------------------------------------------------------------------------
// com.hfg XML/HTML Coding Library
//
// This library is free software; you can redistribute it and/or
// modify it under the terms of the GNU Lesser General Public
// License as published by the Free Software Foundation; either
// version 2.1 of the License, or (at your option) any later version.
//
// This library is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
// Lesser General Public License for more details.
//
// You should have received a copy of the GNU Lesser General Public
// License along with this library; if not, write to the Free Software
// Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
//
// J. Alex Taylor, President, Founder, CEO, COO, CFO, OOPS hairyfatguy.com
// [email protected]
//------------------------------------------------------------------------------
public class HoverboardMaker
{
//##########################################################################
// PRIVATE FIELDS
//##########################################################################
private int mDelay = 500;
private int mXOffset = 10;
private int mYOffset = 20;
private int mWidth = 300;
private String mBorder = "1px ridge #cccccc";
private String mFont = "arial,sans-serif";
private String mFontSize = "11px";
private String mFontColor = "#006600";
private Color mBgColor = Color.decode("#cccccc");
private int mPadding = 3;
private String mShadowColor = "#000000";
private int mShadowWidth = 0;//2;
private boolean mViaOnClick = true;
//##########################################################################
// CONSTRUCTORS
//##########################################################################
//--------------------------------------------------------------------------
public HoverboardMaker()
{
}
//##########################################################################
// PUBLIC METHODS
//##########################################################################
//--------------------------------------------------------------------------
/**
Sets whether to trigger the hoverboard via an onclick() or an onmouseover().
*/
public void activateViaOnClick(boolean inValue)
{
mViaOnClick = inValue;
}
//--------------------------------------------------------------------------
public void setDelay(int inValue)
{
mDelay = inValue;
}
//--------------------------------------------------------------------------
public void setXOffset(int inValue)
{
mXOffset = inValue;
}
//--------------------------------------------------------------------------
public void setYOffset(int inValue)
{
mYOffset = inValue;
}
//--------------------------------------------------------------------------
public void setWidth(int inValue)
{
mWidth = inValue;
}
//--------------------------------------------------------------------------
public void setBorder(String inValue)
{
mBorder = inValue;
}
//--------------------------------------------------------------------------
public void setFont(String inValue)
{
mFont = inValue;
}
//--------------------------------------------------------------------------
public void setFontSize(String inValue)
{
mFontSize = inValue;
}
//--------------------------------------------------------------------------
public void setFontColor(String inValue)
{
mFontColor = inValue;
}
//--------------------------------------------------------------------------
public void setBackgroundColor(Color inValue)
{
mBgColor = inValue;
}
//--------------------------------------------------------------------------
public void setPadding(int inValue)
{
mPadding = inValue;
}
//--------------------------------------------------------------------------
public void setShadowColor(String inValue)
{
mShadowColor = inValue;
}
//--------------------------------------------------------------------------
public void setShadowWidth(int inValue)
{
mShadowWidth = inValue;
}
//--------------------------------------------------------------------------
/**
* Hoverboards can be added to any tag which supports onmouseover and onmouseout.
* You will also need to add generateJS() to the javascript in the page's <head> tag.
* @param inTag the tag to which the onclick() or onmouseover() attribute will
* be set to display a hoverboard.
* @param inJSMethodForContent the javascript method to call for content generation.
*/
public void addHoverboard(HTMLTag inTag, String inJSMethodForContent)
{
String currentValue = inTag.getAttributeValue(mViaOnClick ? HTML.ONCLICK : HTML.ONMOUSEOVER);
inTag.setAttribute(mViaOnClick ? HTML.ONCLICK : HTML.ONMOUSEOVER,
(currentValue != null ? currentValue + ";" : "") + "showHoverboard(event, " + inJSMethodForContent + ")");
currentValue = inTag.getAttributeValue(HTML.CLASS);
inTag.setAttribute(HTML.CLASS, (currentValue != null ? currentValue + " " : "") + "hoverboard");
}
//--------------------------------------------------------------------------
public String generateCSS()
{
StringBuffer css = new StringBuffer();
css.append(".hoverboard:hover {\n"
+ " background-color: #" + ColorUtil.colorToHex(mBgColor) + ";\n"
+ " }\n\n");
return css.toString();
}
//--------------------------------------------------------------------------
public String generateJS()
{
StringBuffer js = new StringBuffer();
line(js, "var hoverboard_delay = " + (mViaOnClick ? 0 : mDelay) + ";");
line(js, "var hoverboard_border = '" + mBorder + "';");
if (mShadowWidth > 0)
{
line(js, "var hoverboard_shadowColor = '" + mShadowColor + "';");
line(js, "var hoverboard_shadowWidth = " + mShadowWidth + ";");
}
line(js, "");
line(js, "");
line(js, "var _hoverboard;");
line(js, "var _hoverboard_timeout;");
line(js, "var _hoverboard_text;");
line(js, "var _hoverboard_eventX;");
line(js, "var _hoverboard_eventY;");
line(js, "var _hoverboard_width;");
line(js, "var _hoverboard_height;");
line(js, "var _hoverboard_parent;");
line(js, "var _hoverboard_content;");
line(js, "var _hoverboard_content_method;");
line(js, "");
line(js, "//----------------------------------");
line(js, "function isSupported() {");
line(js, " return (Boolean(document.getElementsByTagName)");
line(js, " && Boolean(document.getElementById));");
line(js, "}");
line(js, "//----------------------------------");
line(js, "function showHoverboard(event, content_method) {");
line(js, " if (!isSupported() || _hoverboard_parent) return;");
line(js, "");
line(js, " event = event || window.event || window.Event;");
line(js, " _hoverboard_parent = event.originalTarget || event.srcElement;");
line(js, " _hoverboard_parent._bgColor_cache = _hoverboard_parent.style.backgroundColor;");
line(js, " _hoverboard_content_method = content_method;");
line(js, " _hoverboard_timeout = setTimeout('initHoverboard()', hoverboard_delay);");
line(js, "}");
line(js, "//----------------------------------");
line(js, "function initHoverboard() {");
line(js, " // Check to see if there is content for this srcElement");
line(js, " _hoverboard_content = _hoverboard_content_method(_hoverboard_parent)");
line(js, " if (!_hoverboard_content) {");
line(js, " destroyHoverboard();");
line(js, " return;");
line(js, " }");
line(js, "");
line(js, " // Hoverboard");
line(js, " _hoverboard = document.createElement('div');");
line(js, " _hoverboard.style.visibility='hidden';");
line(js, " _hoverboard.style.position='absolute';");
line(js, "");
line(js, " _hoverboard_parent.appendChild(_hoverboard);");
line(js, "");
if (mShadowWidth > 0)
{
line(js, " // Shadow Div");
line(js, " var shadowDiv = document.createElement('div');");
line(js, " shadowDiv.style.position = 'absolute';");
line(js, " shadowDiv.style.display = 'block';");
line(js, " shadowDiv.style.backgroundColor = hoverboard_shadowColor;");
line(js, " shadowDiv.style.width = '100%';");
line(js, " shadowDiv.style.height = '100%';");
line(js, " shadowDiv.style.left = hoverboard_shadowWidth + 'px';");
line(js, " shadowDiv.style.top = hoverboard_shadowWidth + 'px';");
line(js, "");
line(js, " // Opacity");
line(js, " if (shadowDiv.style.MozOpacity) shadowDiv.style.MozOpacity=0.75;");
line(js, " else if (shadowDiv.style.filter) shadowDiv.style.filter='alpha(opacity=85)';");
line(js, "");
line(js, " _hoverboard.appendChild(shadowDiv);");
line(js, "");
}
line(js, " // Content Div");
line(js, " var contentDiv = document.createElement('div');");
line(js, " contentDiv.style.position = 'relative';");
line(js, " contentDiv.style.display = 'block';");
line(js, " contentDiv.style.border = hoverboard_border;");
line(js, " _hoverboard.appendChild(contentDiv);");
line(js, "");
line(js, " if (document.createRange) {");
line(js, " // Gecko & KHTML flavors should be able to handle this.");
line(js, " var range = document.createRange();");
line(js, " range.setStartBefore(contentDiv);");
line(js, " var domfrag = range.createContextualFragment(_hoverboard_content);");
line(js, " contentDiv.appendChild(domfrag);");
line(js, " }");
line(js, " else {");
line(js, " contentDiv.innerHTML = '' ");
line(js, " + _hoverboard_content");
line(js, " + '<\\/td><\\/tr><\\/table>';");
line(js, " }");
line(js, "");
line(js, " _hoverboard_height = (_hoverboard.pixelHeight ? _hoverboard.pixelHeight :");
line(js, " _hoverboard.offsetHeight ? _hoverboard.offsetHeight : 0);");
line(js, " _hoverboard_width = (_hoverboard.pixelWidth ? _hoverboard.pixelWidth :");
line(js, " _hoverboard.offsetWidth ? _hoverboard.offsetWidth : 0);");
line(js, "");
line(js, " if (_hoverboard.style.width) {");
line(js, " _hoverboard.style.width = _hoverboard_width + 'px';");
line(js, " }");
line(js, "");
line(js, " positionHoverboard();");
line(js, " _hoverboard_parent.style.backgroundColor = '#" + ColorUtil.colorToHex(mBgColor) + "';");
line(js, " _hoverboard.style.visibility='visible';");
line(js, "");
line(js, " _hoverboard_parent._onmouseout_cache = _hoverboard_parent.onmouseout || function() {};");
line(js, " _hoverboard_parent.onmouseout = function(event) {");
line(js, " if (_hoverboard) {");
line(js, " event = event || window.event || window.Event;");
line(js, " var x = event.pageX || event.clientX || 0;");
line(js, " var y = event.pageY || event.clientY || 0;");
line(js, " // Safari has a problem with onmouseout() being called while still within the parent's rectangle.");
line(js, " var offsetTrail = _hoverboard_parent;");
line(js, " var offsetLeft = 0;");
line(js, " var offsetTop = 0;");
line(js, " while (offsetTrail) {");
line(js, " offsetLeft += offsetTrail.offsetLeft;");
line(js, " offsetTop += offsetTrail.offsetTop;");
line(js, " offsetTrail = offsetTrail.offsetParent;");
line(js, " }");
line(js, " if (x >= offsetLeft && x <= offsetLeft + _hoverboard_parent.offsetWidth");
line(js, " && y >= offsetTop && y <= offsetTop + _hoverboard_parent.offsetHeight)");
line(js, " {");
line(js, " // Still inside the parent.");
line(js, " return true;");
line(js, " }");
line(js, " offsetTrail = _hoverboard;");
line(js, " offsetLeft = 0;");
line(js, " offsetTop = 0;");
line(js, " while (offsetTrail) {");
line(js, " offsetLeft += offsetTrail.offsetLeft;");
line(js, " offsetTop += offsetTrail.offsetTop;");
line(js, " offsetTrail = offsetTrail.offsetParent;");
line(js, " }");
// line(js, " alert('y:' + y + ' ' + offsetTop + ' ' + _hoverboard_height);");////////////
line(js, " if (x <= offsetLeft || x >= offsetLeft + _hoverboard_width");
line(js, " || y <= offsetTop || y >= offsetTop + _hoverboard_height)");
// line(js, " if (x < parseInt(_hoverboard.style.left) || x > parseInt(_hoverboard.style.left) + _hoverboard_width");
// line(js, " || y < parseInt(_hoverboard.style.top) || y > parseInt(_hoverboard.style.top) + _hoverboard_height)");
line(js, " {");
line(js, " destroyHoverboard(event);");
line(js, " }");
line(js, " }");
line(js, " else {");
line(js, " destroyHoverboard(event);");
line(js, " }");
line(js, " return true;");
line(js, " }");
line(js, "}");
line(js, "//----------------------------------");
line(js, "function destroyHoverboard(event) {");
line(js, " if (!isSupported()) return;");
line(js, "");
line(js, " if (_hoverboard_timeout) {");
line(js, " clearTimeout(_hoverboard_timeout);");
line(js, " }");
line(js, "");
line(js, " if (_hoverboard) {");
line(js, " _hoverboard_parent.removeChild(_hoverboard);");
line(js, " _hoverboard = null;");
line(js, " }");
line(js, "");
line(js, " if (_hoverboard_parent) {");
line(js, " _hoverboard_parent.style.backgroundColor = _hoverboard_parent._bgColor_cache;");
line(js, " if (_hoverboard_parent._onmouseout_cache) {");
line(js, " _hoverboard_parent.onmouseout = _hoverboard_parent._onmouseout_cache;");
line(js, " _hoverboard_parent.onmouseout(event);");
line(js, " }");
line(js, " _hoverboard_parent = null;");
line(js, " }");
line(js, "");
line(js, "}");
line(js, "//----------------------------------");
line(js, "function positionHoverboard() {");
line(js, " var offsetTrail = _hoverboard_parent;");
line(js, " var offsetLeft = 0;");
line(js, " var offsetTop = 0;");
line(js, " while (offsetTrail) {");
line(js, " offsetLeft += offsetTrail.offsetLeft;");
line(js, " offsetTop += offsetTrail.offsetTop;");
line(js, " offsetTrail = offsetTrail.offsetParent;");
line(js, " }");
line(js, " var x = offsetLeft;");
line(js, " var y = offsetTop + _hoverboard_parent.offsetHeight;");
line(js, " var body = document.compatMode && document.compatMode != 'BackCompat' ? document.documentElement : document.body? document.body : null;");
line(js, "");
line(js, " if (_hoverboard) {");
line(js, " var windowWidth = 0;");
line(js, " if (body.clientWidth) {");
line(js, " if (window.innerWidth) {");
line(js, " windowWidth = Math.max(body.clientWidth, window.innerWidth);");
line(js, " }");
line(js, " else {");
line(js, " windowWidth = body.clientWidth;");
line(js, " }");
line(js, " }");
line(js, " else {");
line(js, " windowWidth = window.innerWidth;");
line(js, " }");
line(js, "");
line(js, " var windowHeight = 0;");
line(js, " if (body.clientHeight) {");
line(js, " if (window.innerHeight) {");
line(js, " windowHeight = Math.max(body.clientHeight, window.innerHeight);");
line(js, " }");
line(js, " else {");
line(js, " windowHeight = body.clientHeight;");
line(js, " }");
line(js, " }");
line(js, " else {");
line(js, " windowHeight = window.innerHeight;");
line(js, " }");
line(js, "");
line(js, " var xLimit = windowWidth");
line(js, " + (window.pageXOffset ? window.pageXOffset : body.scrollLeft ? body.scrollLeft : 0)");
line(js, " - _hoverboard_width - 10;");
line(js, "");
line(js, " var yLimit = windowHeight");
line(js, " + (window.pageYOffset ? window.pageYOffset : body.scrollTop ? body.scrollTop : 0)");
line(js, " - _hoverboard_height;");
line(js, "");
line(js, " if (x > xLimit) x = xLimit;");
line(js, "");
line(js, " if (y > yLimit) {");
line(js, " if (hoverboard_yOffset > 0) {");
line(js, " // Flip display to above the cursor");
line(js, " y = y - hoverboard_yOffset - hoverboard_yOffset - _hoverboard_height;");
line(js, " }");
line(js, " if (y > yLimit) y = yLimit;");
line(js, " }");
line(js, "");
line(js, " _hoverboard.style.left = x + 'px';");
line(js, " _hoverboard.style.top = y + 'px';");
line(js, " }");
line(js, "}");
return js.toString();
}
//--------------------------------------------------------------------------
private static void line(StringBuffer inBuffer, String inLine)
{
inBuffer.append(inLine + "\n");
}
}
© 2015 - 2024 Weber Informatics LLC | Privacy Policy