svn commit: r661954 - in /ofbiz/trunk/framework/images/webapp/images/prototypejs: tooltips.css tooltips.js

[apatel-2]

Author: apatel
Date: Fri May 30 22:46:44 2008
New Revision: 661954

URL: http://svn.apache.org/viewvc?rev=661954&view=rev
Log:
Adding tooltips effects javascript library,

Added:
    ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.css   (with props)
    ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.js   (with props)

Added: ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.css
URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.css?rev=661954&view=auto
==============================================================================
--- ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.css (added)
+++ ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.css Fri May 30 22:46:44 2008
@@ -0,0 +1,28 @@
+/* Tooltips CSS definitions */
+
+.tooltip {
+ position: absolute!important;
+ overflow:hidden;
+ font-size: 12px;
+ z-index: 10000!important;
+}
+ .tooltip .xtop, .tooltip .xbottom { display: block; background: transparent; font-size: 1px; }
+ .tooltip .xb1, .tooltip .xb2, .tooltip .xb3, .tooltip .xb4 { display: block; overflow: hidden; }
+ .tooltip .xb1, .tooltip .xb2, .tooltip .xb3 { height: 1px; }
+ .tooltip .xb2, .tooltip .xb3, .tooltip .xb4 { background: #666; border-left: 1px solid #333; border-right: 1px solid #333; }
+ .tooltip .xbottom .xb2, .tooltip .xbottom .xb3, .tooltip .xbottom .xb4 { background: #666; }
+ .tooltip .xb1 { margin: 0 5px; background: #333; }
+ .tooltip .xb2 { margin: 0 3px; border-width: 0 2px; }
+ .tooltip .xb3 { margin: 0 2px; }
+ .tooltip .xb4 { height: 2px; margin: 0 1px; }
+
+ .tooltip .xboxcontent {
+ padding: 0 .5em;
+ margin: 0;
+ color: #000;
+ text-shadow: 2px 2px 0px #CCC;
+ word-wrap:break-word;
+ border: 1px solid #333;
+ border-width: 0px 1px 0 1px;
+ background-color: #666;
+ }
\ No newline at end of file

Propchange: ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.css
------------------------------------------------------------------------------
    svn:eol-style = native

Propchange: ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.css
------------------------------------------------------------------------------
    svn:keywords = "Date Rev Author URL Id"

Propchange: ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.css
------------------------------------------------------------------------------
    svn:mime-type = text/css

Added: ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.js
URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.js?rev=661954&view=auto
==============================================================================
--- ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.js (added)
+++ ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.js Fri May 30 22:46:44 2008
@@ -0,0 +1,119 @@
+// Tooltip Object
+var Tooltip = Class.create();
+Tooltip.prototype = {
+ initialize: function(el, options) {
+ this.el = $(el);
+ this.initialized = false;
+ this.setOptions(options);
+
+ // Event handlers
+ this.showEvent = this.show.bindAsEventListener(this);
+ this.hideEvent = this.hide.bindAsEventListener(this);
+ this.updateEvent = this.update.bindAsEventListener(this);
+ Event.observe(this.el, "mouseover", this.showEvent );
+ Event.observe(this.el, "mouseout", this.hideEvent );
+
+ // Removing title from DOM element to avoid showing it
+ this.content = this.el.title;
+ this.el.title = "";
+
+ // If descendant elements has 'alt' attribute defined, clear it
+ this.el.descendants().each(function(el){
+ if(Element.readAttribute(el, 'alt'))
+ el.alt = "";
+ });
+ },
+ setOptions: function(options) {
+ this.options = {
+ backgroundColor: '#999', // Default background color
+ borderColor: '#666', // Default border color
+ textColor: '', // Default text color (use CSS value)
+ textShadowColor: '', // Default text shadow color (use CSS value)
+ maxWidth: 250, // Default tooltip width
+ align: "left", // Default align
+ delay: 250, // Default delay before tooltip appears in ms
+ mouseFollow: true, // Tooltips follows the mouse moving
+ opacity: .75, // Default tooltips opacity
+ appearDuration: .25, // Default appear duration in sec
+ hideDuration: .25 // Default disappear duration in sec
+ };
+ Object.extend(this.options, options || {});
+ },
+ show: function(e) {
+ this.xCord = Event.pointerX(e);
+ this.yCord = Event.pointerY(e);
+ if(!this.initialized)
+ this.timeout = window.setTimeout(this.appear.bind(this), this.options.delay);
+ },
+ hide: function(e) {
+ if(this.initialized) {
+ this.appearingFX.cancel();
+ if(this.options.mouseFollow)
+ Event.stopObserving(this.el, "mousemove", this.updateEvent);
+ new Effect.Fade(this.tooltip, {duration: this.options.hideDuration, afterFinish: function() { Element.remove(this.tooltip) }.bind(this) });
+ }
+ this._clearTimeout(this.timeout);
+
+ this.initialized = false;
+ },
+ update: function(e){
+ this.xCord = Event.pointerX(e);
+ this.yCord = Event.pointerY(e);
+ this.setup();
+ },
+ appear: function() {
+ // Building tooltip container
+ this.tooltip = Builder.node("div", {className: "tooltip", style: "display: none;" }, [
+ Builder.node("div", {className:"xtop"}, [
+ Builder.node("div", {className:"xb1", style:"background-color:" + this.options.borderColor + ";"}),
+ Builder.node("div", {className:"xb2", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
+ Builder.node("div", {className:"xb3", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
+ Builder.node("div", {className:"xb4", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"})
+ ]),
+ Builder.node("div", {className: "xboxcontent", style: "background-color:" + this.options.backgroundColor +
+ "; border-color:" + this.options.borderColor +
+ ((this.options.textColor != '') ? "; color:" + this.options.textColor : "") +
+ ((this.options.textShadowColor != '') ? "; text-shadow:2px 2px 0" + this.options.textShadowColor + ";" : "")}, this.content),
+ Builder.node("div", {className:"xbottom"}, [
+ Builder.node("div", {className:"xb4", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
+ Builder.node("div", {className:"xb3", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
+ Builder.node("div", {className:"xb2", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
+ Builder.node("div", {className:"xb1", style:"background-color:" + this.options.borderColor + ";"})
+ ]),
+ ]);
+ document.body.insertBefore(this.tooltip, document.body.childNodes[0]);
+
+ Element.extend(this.tooltip); // IE needs element to be manually extended
+ this.options.width = this.tooltip.getWidth();
+ this.tooltip.style.width = this.options.width + 'px'; // IE7 needs width to be defined
+
+ this.setup();
+
+ if(this.options.mouseFollow)
+ Event.observe(this.el, "mousemove", this.updateEvent);
+
+ this.initialized = true;
+ this.appearingFX = new Effect.Appear(this.tooltip, {duration: this.options.appearDuration, to: this.options.opacity });
+ },
+ setup: function(){
+ // If content width is more then allowed max width, set width to max
+ if(this.options.width > this.options.maxWidth) {
+ this.options.width = this.options.maxWidth;
+ this.tooltip.style.width = this.options.width + 'px';
+ }
+
+ // Tooltip doesn't fit the current document dimensions
+ if(this.xCord + this.options.width >= Element.getWidth(document.body)) {
+ this.options.align = "right";
+ this.xCord = this.xCord - this.options.width + 20;
+ }
+
+ this.tooltip.style.left = this.xCord - 7 + "px";
+ this.tooltip.style.top = this.yCord + 12 + "px";
+ },
+ _clearTimeout: function(timer) {
+ clearTimeout(timer);
+ clearInterval(timer);
+ return null;
+ }
+};
\ No newline at end of file

Propchange: ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.js
------------------------------------------------------------------------------
    svn:eol-style = native

Propchange: ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.js
------------------------------------------------------------------------------
    svn:keywords = "Date Rev Author URL Id"

Propchange: ofbiz/trunk/framework/images/webapp/images/prototypejs/tooltips.js
------------------------------------------------------------------------------
    svn:mime-type = text/plain