[richfaces-svn-commits] JBoss Rich Faces SVN: r4640 - in branches/3.1.x/ui/menu-components/src/main: resources/org/richfaces/renderkit/html/scripts and 1 other directories.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Sat Dec 8 11:47:35 EST 2007
Author: maksimkaszynski
Date: 2007-12-08 11:47:34 -0500 (Sat, 08 Dec 2007)
New Revision: 4640
Modified:
branches/3.1.x/ui/menu-components/src/main/java/org/richfaces/renderkit/html/AbstractMenuRenderer.java
branches/3.1.x/ui/menu-components/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js
branches/3.1.x/ui/menu-components/src/main/templates/org/richfaces/htmlMenuItem.jspx
Log:
http://jira.jboss.com/jira/browse/RF-1566
Adaptation to Prototype 1.6
Modified: branches/3.1.x/ui/menu-components/src/main/java/org/richfaces/renderkit/html/AbstractMenuRenderer.java
===================================================================
--- branches/3.1.x/ui/menu-components/src/main/java/org/richfaces/renderkit/html/AbstractMenuRenderer.java 2007-12-08 16:00:20 UTC (rev 4639)
+++ branches/3.1.x/ui/menu-components/src/main/java/org/richfaces/renderkit/html/AbstractMenuRenderer.java 2007-12-08 16:47:34 UTC (rev 4640)
@@ -82,17 +82,19 @@
String itemId = null;
int flcloseonclick = 1;
int flagGroup = 0;
+ boolean disabled = false;
if (kid instanceof UIMenuItem) {
UIMenuItem menuItem = (UIMenuItem) kid;
itemId = kid.getClientId(context);
- if (menuItem.isDisabled()) {
+ disabled = menuItem.isDisabled();
+ if (disabled) {
flcloseonclick = 0;
}
} else if (kid instanceof UIMenuGroup) {
UIMenuGroup menuGroup = (UIMenuGroup) kid;
itemId = "ref" + kid.getClientId(context);
flcloseonclick = 0;
- if (menuGroup.isDisabled()) {
+ if ((disabled = menuGroup.isDisabled())) {
flagGroup = 2;
} else {
flagGroup = 1;
@@ -101,13 +103,16 @@
if (itemId != null) {
JSFunction function = new JSFunction(".addItem");
function.addParameter(itemId);
- function.addParameter(new Integer(flcloseonclick));
-
ScriptOptions options = new ScriptOptions(kid);
options.addEventHandler("onmouseout");
options.addEventHandler("onmouseover");
+ options.addOption("closeOnClick", new Integer(flcloseonclick));
options.addOption("flagGroup", new Integer(flagGroup));
options.addOption("selectClass");
+ options.addOption("style");
+ options.addOption("selectStyle");
+ options.addOption("iconClass");
+ options.addOption("disabled", Boolean.valueOf(disabled));
function.addParameter(options);
return function.toScript();
}
Modified: branches/3.1.x/ui/menu-components/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js
===================================================================
--- branches/3.1.x/ui/menu-components/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js 2007-12-08 16:00:20 UTC (rev 4639)
+++ branches/3.1.x/ui/menu-components/src/main/resources/org/richfaces/renderkit/html/scripts/menu.js 2007-12-08 16:47:34 UTC (rev 4640)
@@ -1,4 +1,3 @@
-
if(!window.RichFaces) window.RichFaces = {};
if(!RichFaces.Menu) RichFaces.Menu = {};
@@ -342,13 +341,25 @@
var win = RichFaces.Menu.getWindowDimensions();
var bodyHeight = body.height;
var bodyWidth = body.width;
+
var clientX = this.event.clientX;
var clientY = this.event.clientY;
-
- var top = Event.pointerY(this.event);
- var left = Event.pointerX(this.event);
+
+ var e = this.event;
+ var x = Event.pointerX(e);
+ var y = Event.pointerY(e);
+ var elementDim = Richfaces.Position.getOffsetDimensions(this.layer);
+
+ var offsets = Position.cumulativeOffset(this.layer);
+
+ offsets[0] -= this.layer.offsetLeft || 0;
+ offsets[1] -= this.layer.offsetTop || 0;
+
+ var toolTipX = x - offsets[0];
+ var toolTipY = y - offsets[1];
+
var layerdim = Element.getDimensions(this.layer);
- var layerLeft = left;
+ var layerLeft = toolTipX;
if (clientX + layerdim.width > win.width) {
layerLeft -= (layerdim.width - RichFaces.Menu.Layers.shadowWidth - RichFaces.Menu.Layers.CornerRadius);
@@ -367,7 +378,7 @@
layerLeft = 0;
}
*/
- var layerTop = top;
+ var layerTop = toolTipY;
/*if (layertop + layerdim.height > bodyHeight) {
layertop = bodyHeight - layerdim.height;
}
@@ -709,9 +720,8 @@
function(e){
RichFaces.Menu.MouseIn=true;
RichFaces.Menu.Layers.clearLMTO();
- if (this.highlightParent) {
- var menuNode = RichFaces.Menu.Layers.layers[this.layer.id].layer.parentNode.parentNode;
- menuNode.className='dr-menu-label dr-menu-label-select rich-ddmenu-label rich-ddmenu-label-select';
+ if (this.shouldHighlightParent() && !this.isWithin(e)) {
+ this.highlightLabel();
}
Event.stop(e);
@@ -723,9 +733,8 @@
if (!RichFaces.Menu.selectOpen) {
RichFaces.Menu.Layers.setLMTO(this.hideDelay);
}
- if (this.highlightParent) {
- var menuNode = RichFaces.Menu.Layers.layers[this.layer.id].layer.parentNode.parentNode;
- menuNode.className='dr-menu-label dr-menu-label-unselect rich-ddmenu-label rich-ddmenu-label-unselect';
+ if (this.shouldHighlightParent() && !this.isWithin(e)) {
+ this.unHighlightLabel();
}
Event.stop(e);
}.bindAsEventListener(this);
@@ -799,17 +808,61 @@
A4J.AJAX.AddListener(listener);
} */
},
+
+ getLabel : function() {
+ return RichFaces.Menu.Layers.layers[this.layer.id].layer.parentNode.parentNode;
+ },
+
+ highlightLabel: function() {
+ var label1 = $(this.getLabel());
+ RichFaces.Menu.Items.replaceClasses(label1,
+ ['dr-menu-label-unselect', 'rich-ddmenu-label-unselect'],
+ ['dr-menu-label-select','rich-ddmenu-label-select']);
+ },
+
+ unHighlightLabel: function() {
+ var label1 = $(this.getLabel());
+ RichFaces.Menu.Items.replaceClasses(label1,
+ ['dr-menu-label-select','rich-ddmenu-label-select'],
+ ['dr-menu-label-unselect', 'rich-ddmenu-label-unselect']);
+ },
+
+ shouldHighlightParent : function() {
+ var result = this.highlightParent;
+ var parent = null;
+ if (result && (parent = this.getParentLayer())) {
+ result &= parent.shouldHighlightParent();
+ }
+ return result;
+ },
+
+ getParentLayer: function() {
+ return this.level > 0 ? RichFaces.Menu.Layers.layers[(RichFaces.Menu.Layers.father[this.id])] : null;
+ },
+
+ isWithin : function(event){
+ var within = true;
+ var targetElement = event.relatedTarget;
+ var srcElement = event.target;
+ var layer = $(this.id);
+ if (targetElement) {
+ within = $(targetElement).descendantOf(layer);
+ }
+
+ within &= $(srcElement).descendantOf(layer);
+
+ return within;
+ },
-
-
openSelect: function(event){
RichFaces.Menu.selectOpen = true;
var ClickInputb = this.ClickInput.bindAsEventListener(this);
Event.observe(Event.element(event), "click", this.ClickInput);
},
+
+
-
closeSelect: function(event){
RichFaces.Menu.selectOpen = false;
var ClickInputb = this.ClickInput.bindAsEventListener(this);
@@ -893,104 +946,11 @@
},
//addItem: function(itemId, hoverClass, plainClass, hoverStyle, plainStyle){
- addItem: function(itemId, flag_close_onclick, options) {
+ addItem: function(itemId, options) {
var dis = this;
- var item = {
- highLightGroup: function(light) {
- if (light) {
- Element.removeClassName(this.id,"dr-menu-item-enabled");
- Element.addClassName(this.id,"dr-menu-item-hover");
- Element.addClassName(this.id,"rich-menu-group-hover");
- if (this.options.selectClass) Element.addClassName(this.id, this.options.selectClass);
-
- Element.addClassName(this.id+":icon","rich-menu-item-icon-selected");
- Element.addClassName(this.id+":anchor","rich-menu-item-label");
- } else if (!this.mouseOver) {
- Element.removeClassName(this.id,"dr-menu-item-hover");
- Element.removeClassName(this.id,"rich-menu-group-hover");
- Element.addClassName(this.id,"dr-menu-item-enabled");
- if (this.options.selectClass) Element.removeClassName(this.id, this.options.selectClass);
-
- Element.removeClassName(this.id+":icon","rich-menu-item-icon-selected");
- Element.removeClassName(this.id+":anchor","rich-menu-item-label");
- }
- }
- };
- item.id = itemId;
- item.obj = $(itemId);
- item.menu = this;
- item.options = options || {};
- item.mouseOver = false;
- if (item.options.onmouseover && item.options.onmouseover != ""){
- item.eventOnMouseOver = new Function("event",item.options.onmouseover).bindAsEventListener(item);
- }
- if (item.options.onmouseout && item.options.onmouseout != ""){
- item.eventOnMouseOut = new Function("event",item.options.onmouseout).bindAsEventListener(item);
- }
+ var item = new RichFaces.Menu.Item(itemId, this, options || {});
+ //item.menu = this;
this.items[itemId] = item;
-
- var onmouseover =
- function(e){
- this.menu.closeMinors(this.id);
- if (this.options.flagGroup == 1) {
- this.mouseOver = true;
- this.highLightGroup(true);
- }
- if (this.eventOnMouseOver) {
- var reltg = (e.relatedTarget) ? e.relatedTarget : e.fromElement;
- while (reltg && reltg != this.obj && reltg.nodeName != 'BODY')
- reltg = reltg.parentNode;
- if (reltg == this.obj) return;
- this.eventOnMouseOver();
- }
- }.bindAsEventListener(item);
-
- var onmouseout =
- function(e){
- if (this.options.flagGroup == 1) {
- this.mouseOver = false;
- this.highLightGroup(false);
- }
- if (this.eventOnMouseOut) {
- var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
- while (reltg && reltg != this.obj && reltg.nodeName != 'BODY')
- reltg = reltg.parentNode;
- if (reltg == this.obj) return;
- this.eventOnMouseOut();
- }
- }.bindAsEventListener(item);
-
- var onmouseclick =
- function(e){
- var menuLayer = item.menu;
- while (menuLayer.level > 0) {
- menuLayer = RichFaces.Menu.Layers.layers[(RichFaces.Menu.Layers.father[menuLayer.id])];
- }
- if (menuLayer && menuLayer.eventOnItemSelect) menuLayer.eventOnItemSelect();
- RichFaces.Menu.Layers.shutdown();
- }.bindAsEventListener(item);
-
- var binding = new RichFaces.Menu.Layer.Binding (
- item.id,
- "mouseover",
- onmouseover);
- this.bindings.push(binding);
- binding.refresh();
- binding = new RichFaces.Menu.Layer.Binding (
- item.id,
- "mouseout",
- onmouseout);
- this.bindings.push(binding);
- binding.refresh();
- if (flag_close_onclick==1){
- binding = new RichFaces.Menu.Layer.Binding (
- item.id,
- "click",
- onmouseclick);
- this.bindings.push(binding);
- binding.refresh();
- }
-
return this;
},
hideMe: function(e){
@@ -1019,7 +979,12 @@
if (!e) {
e = window.event;
}
+
RichFaces.Menu.Layers.showDropDownLayer(this.id, topLevel, e,this.delay);
+ if (options.disabled == false && !RichFaces.Menu.isWithin(e, $(topLevel))) {
+ this.highlightLabel();
+ }
+
}.bindAsEventListener(this);
if(!onEvt){
@@ -1036,6 +1001,9 @@
function(e){
RichFaces.Menu.Layers.setLMTO(this.hideDelay);
RichFaces.Menu.Layers.clearPopUpTO();
+ if (options.disabled == false && !RichFaces.Menu.isWithin(e, $(topLevel))) {
+ this.unHighlightLabel();
+ }
}.bindAsEventListener(this);
// var item = $(topLevel);
@@ -1136,84 +1104,208 @@
return false;
}
};
-if(!RichFaces.Menu.Item) RichFaces.Menu.Item = {};
+RichFaces.Menu.Items = {
+ classNames: ['dr-menu-item-enabled', 'rich-menu-item-enabled'],
+ hoverClassNames : ['dr-menu-item-hover', 'rich-menu-item-hover'],
+ iconClassNames : [],
+ hoverIconClassNames: ['dr-menu-icon-selected', 'rich-menu-item-icon-selected'],
+ labelClassNames: [],
+ hoverLabelClassNames: ['rich-menu-item-label-selected'],
+
+ replaceClasses: function(element, toRemove, toAdd) {
+ var e = $(element);
+ $A(toRemove).each(function(className) {e.removeClassName(className)});
+ $A(toAdd).each(function(className) {e.addClassName(className)});
+ },
+
+ onmouseover: function(item) {
+ var element = item.getElement();
+ var icon = item.getIcon();
+ var labl = item.getLabel();
-/**
- *
- */
-RichFaces.Menu.Item.Onclick = function(evt, item, action, params, target) {
- var form = Event.findElement(evt, 'form');
+ var hoverClass = item.getHoverClasses();
+ var iconHoverClass = item.getIconHoverClasses();
+ var labelHoverClass = item.getLabelHoverClasses();
+
+ var inlineStyle = item.getInlineStyle();
+ var hoverStyle = item.getHoverStyle();
+ element.style.cssText = inlineStyle.concat(hoverStyle);
+
+ this.replaceClasses(element, this.classNames, this.hoverClassNames.concat(hoverClass));
+ this.replaceClasses(icon, this.iconClassNames, this.hoverIconClassNames.concat(iconHoverClass));
+ this.replaceClasses(labl, this.labelClassNames, this.hoverLabelClassNames.concat(labelHoverClass));
+ },
+ onmouseout : function(item) {
+ var element = item.getElement();
+ var icon = item.getIcon();
+ var labl = item.getLabel();
- /*if(!form || typeof(form) == 'undefined' || !form.nodeName || form.nodeName.toLowerCase() != 'form'){
- form = document.createElement('form');
- form.setAttribute('method', 'post');
- form.setAttribute('enctype', 'application/x-www-form-urlencoded');
- form.action = action;
- document.body.appendChild(form);
- }*/
- var objectsCreated = new Array();
- var oldValues = new Object();
- RichFaces.Menu.Item._createOrInitHiddenInput(item + ":submit", item + ":submit", objectsCreated, oldValues, form);
+ var hoverClass = item.getHoverClasses();
+ var iconHoverClass = item.getIconHoverClasses();
+ var labelHoverClass = item.getLabelHoverClasses();
+
+ var inlineStyle = item.getInlineStyle();
+ element.style.cssText = inlineStyle;
+
+ this.replaceClasses(element, this.hoverClassNames.concat(hoverClass), this.classNames);
+ this.replaceClasses(icon, this.hoverIconClassNames.concat(iconHoverClass), this.iconClassNames);
+ this.replaceClasses(labl, this.hoverLabelClassNames.concat(labelHoverClass), this.labelClassNames);
+ }
+
+};
+RichFaces.Menu.isWithin = function (event, element) {
+ var within = false;
+ Event.extend(event);
+ var targetElement = event.relatedTarget;
+ var srcElement = Event.element(event);
- if (params) {
+ if (targetElement) {
+ within = targetElement == element ||
+ $(targetElement).descendantOf(element);
+ }
+
+ return within;
+};
- for (var param in params) {
- var paramName = param;
- var paramValue = params[paramName];
- if (typeof(paramValue) != 'function') {
- if (paramValue) {
- paramValue = String(paramValue);
- }
- RichFaces.Menu.Item._createOrInitHiddenInput(paramName, paramValue, objectsCreated, oldValues, form);
+RichFaces.Menu.Item = Class.create({
+ initialize: function(id, menu, options) {
+ this.options = options;
+ this.id = id;
+ this.menu = menu;
+ this.mouseOver = false;
+
+
+
+ var binding;
+
+ binding = new RichFaces.Menu.Layer.Binding (
+ id,
+ "mouseover",
+ this.onmouseover.bindAsEventListener(this));
+ menu.bindings.push(binding);
+ binding.refresh();
+
+ binding = new RichFaces.Menu.Layer.Binding (
+ id,
+ "mouseout",
+ this.onmouseout.bindAsEventListener(this));
+ menu.bindings.push(binding);
+ binding.refresh();
- }
+ binding = new RichFaces.Menu.Layer.Binding (
+ id,
+ "click",
+ this.onclick.bindAsEventListener(this));
+ menu.bindings.push(binding);
+ binding.refresh();
+ },
+
+
+ onclick: function(e){
+ if (this.options.closeOnClick == 1) {
+ var menuLayer = this.menu;
+ while (menuLayer.level > 0) {
+ menuLayer = RichFaces.Menu.Layers.layers[(RichFaces.Menu.Layers.father[menuLayer.id])];
}
+ if (menuLayer && menuLayer.eventOnItemSelect) menuLayer.eventOnItemSelect();
+ RichFaces.Menu.Layers.shutdown();
}
+ RichFaces.Menu.Items.onmouseout(this);
+ },
+ getElement: function() {
+ return $(this.id);
+ },
+ getIcon: function() {
+ return $(this.id + ":icon");
+ },
+ getLabel: function() {
+ return $(this.id + ":anchor");
+ },
+ getInlineStyle: function() {
+ return this.options.style || "";
+ },
+ getHoverStyle: function() {
+ return this.options.selectStyle || "";
+ },
+ getHoverClasses: function() {
+ return $A(this.options.selectClass).compact();
+ },
+ getIconHoverClasses : function() {
+ return $A(this.options.iconHoverClass).compact();
+ },
+ getLabelHoverClasses : function() {
+ return $A(this.options.labelHoverClass).compact();
+ },
+
+ isDisabled : function() {
+ //console.log(this.id + (this.options.disabled));
+ return this.options.disabled || false;
+ },
+ onmouseover : function(event) {
+ var element = this.getElement();
+
+ if (this.options.onmouseover) {
+ if (this.options.onmouseover.call(element, event) == false) {
+ Event.stop(event);
+ return;
+ };
+ }
+ if (RichFaces.Menu.isWithin(event, element)) {
+ return;
+ }
+ this.menu.closeMinors(this.id);
+ if (this.isDisabled()) {
+ return;
+ }
+ if (this.options.flagGroup == 1) {
+ this.mouseOver = true;
+ this.highLightGroup(true);
+ }
+ RichFaces.Menu.Items.onmouseover(this);
+ },
+ onmouseout : function(event) {
+ Event.extend(event);
+ //window.status = $(event.relatedTarget).inspect();
+ if (this.options.onmouseout) {
+ if (this.options.onmouseover.call(element, event) == false) {
+ Event.stop(event);
+ return;
+ };
+ }
+ var element = this.getElement();
+ if (RichFaces.Menu.isWithin(event, element)) {
+ return;
+ }
+ if (this.isDisabled()) {
+ return;
+ }
+ if (this.options.flagGroup == 1) {
+ this.mouseOver = false;
+ this.highLightGroup(false);
+ }
+ RichFaces.Menu.Items.onmouseout(this);
+ },
+ highLightGroup: function(light) {
+ if (light) {
+ Element.removeClassName(this.id,"dr-menu-item-enabled");
+ Element.addClassName(this.id,"dr-menu-item-hover");
+ Element.addClassName(this.id,"rich-menu-group-hover");
+ if (this.options.selectClass) {
+ Element.addClassName(this.id, this.options.selectClass);
+ }
- var l = objectsCreated.length;
-
- for (var i = 0; i < l; i++) {
- var kid = objectsCreated[i];
- form.appendChild(kid);
- }
-
- var targ = form.target;
-
- if (target) {
- form.target = target;
- }
-
- form.submit();
-
- form.target = targ;
-
- for (var j = 0; j < l; j++) {
- var kid = objectsCreated[j];
- if (form && kid) {
- form.removeChild(kid);
- }
- }
-
- for (var key in oldValues) {
- var value = oldValues[key];
- if (typeof(value) != 'function') {
- ($(key) || form[key]).value = value;
- }
- }
+ Element.addClassName(this.id+":icon","rich-menu-item-icon-selected");
+ Element.addClassName(this.id+":anchor","rich-menu-item-label");
+ } else if (!this.mouseOver) {
+ Element.removeClassName(this.id,"dr-menu-item-hover");
+ Element.removeClassName(this.id,"rich-menu-group-hover");
+ Element.addClassName(this.id,"dr-menu-item-enabled");
+ if (this.options.selectClass) {
+ Element.removeClassName(this.id, this.options.selectClass);
+ }
+ Element.removeClassName(this.id+":icon","rich-menu-item-icon-selected");
+ Element.removeClassName(this.id+":anchor","rich-menu-item-label");
+ }
}
-
-RichFaces.Menu.Item._createOrInitHiddenInput = function(name, value, list, oldValues, form) {
- var hiddenObj = $(name) || form[name];
-
- if (!hiddenObj) {
- hiddenObj = document.createElement('input');
- hiddenObj.setAttribute('type', 'hidden');
- hiddenObj.setAttribute('name', name);
- hiddenObj.setAttribute('id', name);
- list.push(hiddenObj);
- } else {
- oldValues[name] = hiddenObj.value;
- }
- hiddenObj.value = value;
-}
-
+
+});
Modified: branches/3.1.x/ui/menu-components/src/main/templates/org/richfaces/htmlMenuItem.jspx
===================================================================
--- branches/3.1.x/ui/menu-components/src/main/templates/org/richfaces/htmlMenuItem.jspx 2007-12-08 16:00:20 UTC (rev 4639)
+++ branches/3.1.x/ui/menu-components/src/main/templates/org/richfaces/htmlMenuItem.jspx 2007-12-08 16:47:34 UTC (rev 4640)
@@ -46,16 +46,8 @@
<div id="#{clientId}"
class="dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled #{component.attributes['styleClass']}"
- onmouseout="this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled #{component.attributes['styleClass']}';
- #{onmouseoutInlineStyles}
- $('#{clientId}:icon').className='dr-menu-icon rich-menu-item-icon #{component.attributes['iconClass']}';
- $('#{clientId}:anchor').className='rich-menu-item-label';"
- onmouseover="this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover #{component.attributes['styleClass']} #{component.attributes['selectClass']}';
- #{onmouseoverInlineStyles}
- $('#{clientId}:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected #{component.attributes['iconClass']}';
- $('#{clientId}:anchor').className='rich-menu-item-label rich-menu-item-label-selected';"
style="#{component.attributes['style']}"
- onclick="this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled #{component.attributes['styleClass']}'; #{component.attributes['onselect']}; #{onclick}">
+ onclick="#{component.attributes['onselect']}; #{onclick}">
<f:call name="utils.encodeAttributes">
<f:parameter value="onmousedown,onmouseup,onmousemove" />
</f:call>
More information about the richfaces-svn-commits
mailing list