Author: abelevich
Date: 2011-02-01 09:21:26 -0500 (Tue, 01 Feb 2011)
New Revision: 21355
Modified:
trunk/examples/input-demo/src/main/webapp/examples/inplaceSelect.xhtml
trunk/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js
Log:
RF-10163 inplaceSelect: showPopup js API works wrong with default label
Modified: trunk/examples/input-demo/src/main/webapp/examples/inplaceSelect.xhtml
===================================================================
--- trunk/examples/input-demo/src/main/webapp/examples/inplaceSelect.xhtml 2011-02-01
12:29:00 UTC (rev 21354)
+++ trunk/examples/input-demo/src/main/webapp/examples/inplaceSelect.xhtml 2011-02-01
14:21:26 UTC (rev 21355)
@@ -3,7 +3,8 @@
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
-
xmlns:in="http://richfaces.org/input">
+
xmlns:in="http://richfaces.org/input"
+
xmlns:misc="http://richfaces.org/misc">
<f:view contentType="text/html" />
<h:head>
@@ -13,11 +14,11 @@
<h:body>
<h:form id="form">
- <div id="scroll" style="width: 400px; height:200px;
overflow:auto;" >
+ <div id="scroll" style="width: 500px; height:400px;
overflow:auto;" >
<fieldset>
<legend>InplaceSelect Test App</legend>
Fresh off his victory in the Florida primary, Sen. John McCain is poised to take
another big prize. Former
- <in:inplaceSelect defaultLabel="Edit Text"
value="#{inputBean.value}" openOnEdit="true"
saveOnSelect="false">
+ <in:inplaceSelect id='ii' defaultLabel="Edit Text"
value="#{inputBean.value}" openOnEdit="true"
saveOnSelect="false">
<f:selectItem itemLabel="Label#1" itemValue="Value#1"/>
<f:selectItem itemLabel="Label#2" itemValue="Value#2"/>
<f:selectItem itemLabel="Label#3" itemValue="Value#3"/>
@@ -36,7 +37,12 @@
Mayor Rudy Giuliani plans to drop out and endorse McCain, two GOP sources said. That
would give McCain added momentum heading into a debate Wednesday and next week's Super
Tuesday contests
</fieldset>
- <h:commandButton value="submit"></h:commandButton>
+ <ul>
+ <li><h:commandButton
value="submit"></h:commandButton></li>
+ <li> <h:commandButton value="ShowPopup"
onclick="#{misc:component('ii')}.showPopup(); return
false;"/></li>
+ </ul>
+
+
</div>
<h:panelGroup id="out">
<h:outputText value="Entered Value: #{inputBean.value}"/>
Modified:
trunk/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js
===================================================================
---
trunk/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js 2011-02-01
12:29:00 UTC (rev 21354)
+++
trunk/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceSelect.js 2011-02-01
14:21:26 UTC (rev 21355)
@@ -1,239 +1,215 @@
(function ($, rf) {
-
- rf.ui = rf.ui || {};
-
- rf.ui.InplaceSelect = function(id, options) {
- var mergedOptions = $.extend({}, defaultOptions, options);
- $super.constructor.call(this, id, mergedOptions)
- this.getInput().bind("click", $.proxy(this.__clickHandler, this));
- mergedOptions['attachTo'] = id;
- mergedOptions['scrollContainer'] = $(document.getElementById(id +
"Items")).parent()[0];
- this.popupList = new rf.ui.PopupList(id+"List", this, mergedOptions);
- this.items = mergedOptions.items;
- this.selValueInput = $(document.getElementById(id+"selValue"));
- this.list = $(document.getElementById(id+"List"));
- this.list.bind("mousedown", $.proxy(this.__onListMouseDown, this));
- this.list.bind("mouseup", $.proxy(this.__onListMouseUp, this));
- this.openOnEdit = mergedOptions.openOnEdit;
- this.saveOnSelect = mergedOptions.saveOnSelect;
- this.savedIndex = -1;
+ rf.ui = rf.ui || {};
+
+ rf.ui.InplaceSelect = function(id, options) {
+ var mergedOptions = $.extend({}, defaultOptions, options);
+ $super.constructor.call(this, id, mergedOptions) ;
+ this.getInput().bind("click", $.proxy(this.__clickHandler, this));
+ mergedOptions['attachTo'] = id;
+ mergedOptions['scrollContainer'] = $(document.getElementById(id +
"Items")).parent()[0];
+ this.popupList = new rf.ui.PopupList(id+"List", this, mergedOptions);
+ this.items = mergedOptions.items;
+ this.selValueInput = $(document.getElementById(id+"selValue"));
+ this.list = $(document.getElementById(id+"List"));
+ this.list.bind("mousedown", $.proxy(this.__onListMouseDown, this));
+ this.list.bind("mouseup", $.proxy(this.__onListMouseUp, this));
+ this.openOnEdit = mergedOptions.openOnEdit;
+ this.saveOnSelect = mergedOptions.saveOnSelect;
+ this.savedIndex = -1;
+
this.inputItem = $(document.getElementById(id + "Input"));
this.inputItemWidth = this.inputItem.width();
this.inputWidthDefined = options.inputWidth !== undefined;
- }
-
+ };
rf.ui.InplaceInput.extend(rf.ui.InplaceSelect);
- var $super = rf.ui.InplaceSelect.$super;
-
- var defaultOptions = {
- defaultLabel: "",
- saveOnSelect: true,
- openOnEdit: true,
- showControl: false,
- itemCss: "rf-is-opt",
- selectItemCss: "rf-is-sel",
- listCss: "rf-is-lst-cord",
- noneCss: "rf-is-none",
- editCss: "rf-is-edit",
- changedCss: "rf-is-c-s"
- };
+ var $super = rf.ui.InplaceSelect.$super;
-
- $.extend(rf.ui.InplaceSelect.prototype, ( function () {
-
- return{
- name : "inplaceSelect",
-
- getName: function() {
- return this.name;
- },
-
- geNamespace: function() {
- return this.namespace;
- },
-
- onshow: function() {
- $super.onshow.call(this);
- if(this.openOnEdit) {
- this.__showPopup();
- }
- },
-
- onhide: function() {
- this.__hidePopup();
- },
-
- showPopup: function() {
- this.editState = true;
- this.scrollElements = rf.Event.bindScrollEventHandlers(this.id, this.__scrollHandler,
this);
- this.__setInputFocus();
- this.__setFocused(true);
- this.focusValue = this.__getValue();
- this.invokeEvent.call(this, "focus", document.getElementById(this.id +
'Input'));
- this.__showPopup();
-
-
- },
-
- __showPopup: function() {
- this.popupList.show();
- this.__hideLabel();
- },
-
- __hidePopup: function() {
- this.popupList.hide();
- this.__showLabel();
- },
-
- onsave: function() {
- var item = this.popupList.currentSelectItem();
- if(item) {
- this.savedIndex = this.popupList.getSelectedItemIndex();
- var value = this.getItemValue(item);
- this.saveItemValue(value);
- }
- },
-
- oncancel: function() {
- var prevItem = this.popupList.getItemByIndex(this.savedIndex);
- if(prevItem) {
- var value = this.getItemValue(prevItem);
- this.saveItemValue(value);
- }
- },
-
- onblur: function(e) {
- this.__hidePopup();
- $super.onblur.call(this);
- },
-
- onfocus: function(e) {
- if(!this.__isFocused()) {
- this.__setFocused(true);
- this.focusValue = this.selValueInput.val();
- this.invokeEvent.call(this, "focus", document.getElementById(this.id +
'Input'), e);
- }
- },
-
- processItem: function(item) {
- var label = this.getItemLabel(item);
- this.__setValue(label);
-
- this.__setInputFocus();
- this.__hidePopup();
-
- if(this.saveOnSelect) {
- this.save();
- }
+ var defaultOptions = {
+ defaultLabel: "",
+ saveOnSelect: true,
+ openOnEdit: true,
+ showControl: false,
+ itemCss: "rf-is-opt",
+ selectItemCss: "rf-is-sel",
+ listCss: "rf-is-lst-cord",
+ noneCss: "rf-is-none",
+ editCss: "rf-is-edit",
+ changedCss: "rf-is-c-s"
+ };
- this.invokeEvent.call(this,"selectitem",
document.getElementById(this.id + 'Input'));
- },
-
- getItemValue: function(item) {
- var key = $(item).attr("id");
+ $.extend(rf.ui.InplaceSelect.prototype, (function () {
- var value;
- $.each(this.items, function(){
- if (this.id == key) {
- value = this.value;
- return false;
- }
- });
-
- return value;
- },
-
- saveItemValue: function(value) {
- this.selValueInput.val(value);
-
- },
-
- getItemLabel: function(item) {
- var key = $(item).attr("id");
- var label;
- $.each(this.items, function(){
- if (this.id == key) {
- label = this.label;
- return false;
- }
- });
-
- return label;
- },
-
- __isValueChanged: function() {
- return (this.focusValue != this.selValueInput.val());
- },
-
- __keydownHandler: function(e) {
-
- var code;
-
- if(e.keyCode) {
- code = e.keyCode;
- } else if(e.which) {
- code = e.which;
- }
-
- if(this.popupList.isVisible()) {
- switch(code) {
- case rf.KEYS.DOWN:
- e.preventDefault();
- this.popupList.__selectNext();
- this.__setInputFocus();
- break;
-
- case rf.KEYS.UP:
- e.preventDefault();
- this.popupList.__selectPrev();
- this.__setInputFocus();
- break;
-
- case rf.KEYS.RETURN:
- e.preventDefault();
- this.popupList.__selectCurrent();
- this.__setInputFocus();
- return false;
- break;
- }
- }
-
- $super.__keydownHandler.call(this,e);
- },
-
- __blurHandler: function(e) {
- if(this.saveOnSelect || !this.isMouseDown) {
- if(this.isEditState()) {
- this.timeoutId = window.setTimeout($.proxy(function(){
- this.onblur(e);
- }, this), 200);
- }
- } else {
- this.__setInputFocus();
- this.isMouseDown = false;
- }
- },
-
- __clickHandler: function(e) {
- this.__showPopup();
- },
+ return{
+ name : "inplaceSelect",
- __onListMouseDown: function(e) {
- this.isMouseDown = true;
- },
-
- __onListMouseUp: function(e) {
- this.isMouseDown = false;
- this.__setInputFocus();
- },
+ getName: function() {
+ return this.name;
+ },
+ geNamespace: function() {
+ return this.namespace;
+ },
+ onshow: function() {
+ $super.onshow.call(this);
+ if(this.openOnEdit) {
+ this.__showPopup();
+ }
+ },
+ onhide: function() {
+ this.__hidePopup();
+ },
+ showPopup: function() {
+ this.isSaved = false;
+ this.element.addClass(this.editCss);
+ this.editContainer.removeClass(this.noneCss);
+
+ this.editState = true;
+ this.scrollElements = rf.Event.bindScrollEventHandlers(this.id,
this.__scrollHandler, this);
+ this.__setInputFocus();
+ this.onfocus();
+ this.__showPopup();
+
+ },
+ __showPopup: function() {
+ this.popupList.show();
+ this.__hideLabel();
+ },
+ __hidePopup: function() {
+ this.popupList.hide();
+ this.__showLabel();
+ },
+ onsave: function() {
+ var item = this.popupList.currentSelectItem();
+ if(item) {
+ this.savedIndex = this.popupList.getSelectedItemIndex();
+ var value = this.getItemValue(item);
+ this.saveItemValue(value);
+ }
+ },
+ oncancel: function() {
+ var prevItem = this.popupList.getItemByIndex(this.savedIndex);
+ if(prevItem) {
+ var value = this.getItemValue(prevItem);
+ this.saveItemValue(value);
+ }
+ },
+ onblur: function(e) {
+ this.__hidePopup();
+ $super.onblur.call(this);
+ },
+ onfocus: function(e) {
+ if(!this.__isFocused()) {
+ this.__setFocused(true);
+ this.focusValue = this.selValueInput.val();
+ this.invokeEvent.call(this, "focus",
document.getElementById(this.id + 'Input'), e);
+ }
+ },
+ processItem: function(item) {
+ var label = this.getItemLabel(item);
+ this.__setValue(label);
+
+ this.__setInputFocus();
+ this.__hidePopup();
+
+ if(this.saveOnSelect) {
+ this.save();
+ }
+
+ this.invokeEvent.call(this,"selectitem",
document.getElementById(this.id + 'Input'));
+ },
+ getItemValue: function(item) {
+ var key = $(item).attr("id");
+
+ var value;
+ $.each(this.items, function() {
+ if (this.id == key) {
+ value = this.value;
+ return false;
+ }
+ });
+ return value;
+ },
+ saveItemValue: function(value) {
+ this.selValueInput.val(value);
+
+ },
+ getItemLabel: function(item) {
+ var key = $(item).attr("id");
+ var label;
+ $.each(this.items, function() {
+ if (this.id == key) {
+ label = this.label;
+ return false;
+ }
+ });
+ return label;
+ },
+ __isValueChanged: function() {
+ return (this.focusValue != this.selValueInput.val());
+ },
+ __keydownHandler: function(e) {
+
+ var code;
+
+ if(e.keyCode) {
+ code = e.keyCode;
+ } else if(e.which) {
+ code = e.which;
+ }
+
+ if(this.popupList.isVisible()) {
+ switch(code) {
+ case rf.KEYS.DOWN:
+ e.preventDefault();
+ this.popupList.__selectNext();
+ this.__setInputFocus();
+ break;
+
+ case rf.KEYS.UP:
+ e.preventDefault();
+ this.popupList.__selectPrev();
+ this.__setInputFocus();
+ break;
+
+ case rf.KEYS.RETURN:
+ e.preventDefault();
+ this.popupList.__selectCurrent();
+ this.__setInputFocus();
+ return false;
+ break;
+ }
+ }
+
+ $super.__keydownHandler.call(this,e);
+ },
+ __blurHandler: function(e) {
+ if(this.saveOnSelect || !this.isMouseDown) {
+ if(this.isEditState()) {
+ this.timeoutId = window.setTimeout($.proxy( function() {
+ this.onblur(e);
+ }, this), 200);
+ }
+ } else {
+ this.__setInputFocus();
+ this.isMouseDown = false;
+ }
+ },
+ __clickHandler: function(e) {
+ this.__showPopup();
+ },
+ __onListMouseDown: function(e) {
+ this.isMouseDown = true;
+ },
+ __onListMouseUp: function(e) {
+ this.isMouseDown = false;
+ this.__setInputFocus();
+ },
__showLabel: function(e) {
this.label.show();
this.editContainer.css("position", "absolute");
this.inputItem.width(this.inputItemWidth);
},
-
__hideLabel: function(e) {
this.label.hide();
this.editContainer.css("position", "static");
@@ -241,24 +217,21 @@
this.inputItem.width(this.label.width());
}
},
-
- getValue: function() {
- return this.selValueInput.val();
- },
-
- setValue: function(value) {
- var item;
- for (var i=0; i<this.items.length; i++) {
- item = this.items[i];
- if (item.value == value) {
- this.__setValue(item.label);
- this.save();
- this.popupList.__selectByIndex(i);
- }
- }
- }
- }
-
- })());
+ getValue: function() {
+ return this.selValueInput.val();
+ },
+ setValue: function(value) {
+ var item;
+ for (var i=0; i<this.items.length; i++) {
+ item = this.items[i];
+ if (item.value == value) {
+ this.__setValue(item.label);
+ this.save();
+ this.popupList.__selectByIndex(i);
+ }
+ }
+ }
+ };
+ })());
})(jQuery, window.RichFaces);