      1 (function ($, rf) {
      2
      3     rf.ui = rf.ui || {};
      4
      5     rf.ui.InplaceInput = function(id, options) {
      6         var mergedOptions = $.extend({}, defaultOptions, options);
      7         $super.constructor.call(this, id, mergedOptions);
      8         this.label = $(document.getElementById(id + "Label"));
      9         var labelText = this.label.text();
     10         var inputLabel = this.__getValue();
     11         this.initialLabel = (labelText == inputLabel) ? labelText : "";
     12         this.useDefaultLabel = labelText != inputLabel
     13         this.saveOnBlur = mergedOptions.saveOnBlur;
     14         this.showControls = mergedOptions.showControls;
     15         this.getInput().bind("focus", $.proxy(this.__editHandler, this));
     16         if (this.showControls) {
     17             var btnContainer = document.getElementById(id + "Btn");
     18             if (btnContainer) {
     19                 btnContainer.tabIndex = -1;
     20             }
     21             this.okbtn = $(document.getElementById(id + "Okbtn"));
     22             this.cancelbtn = $(document.getElementById(id + "Cancelbtn"));
     23             this.okbtn.bind("mousedown", $.proxy(this.__saveBtnHandler, this));
     24             this.cancelbtn.bind("mousedown", $.proxy(this.__cancelBtnHandler, this));
     25         }
     26     };
     27
     28     rf.ui.InplaceBase.extend(rf.ui.InplaceInput);
     29     var $super = rf.ui.InplaceInput.$super;
     30
     31     var defaultOptions = {
     32         defaultLabel: "",
     33         saveOnBlur: true,
     34         showControl: true,
     35         noneCss: "rf-ii-none",
     36         readyCss: "rf-ii",
     37         editCss: "rf-ii-act",
     38         changedCss: "rf-ii-chng"
     39     };
     40
     41     $.extend(rf.ui.InplaceInput.prototype, ( function () {
     42
     43         return {
     44
     45             name : "inplaceInput",
     46             defaultLabelClass : "rf-ii-dflt-lbl",
     47
     48             getName: function() {
     49                 return this.name;
     50             },
     51
     52             getNamespace: function() {
     53                 return this.namespace;
     54             },
     55
     56             __keydownHandler: function(e) {
     57                 this.tabBlur = false;
     58                 switch (e.keyCode || e.which) {
     59                     case rf.KEYS.ESC:
     60                         e.preventDefault();
     61                         this.cancel();
     62                         this.onblur(e);
     63                         break;
     64                     case rf.KEYS.RETURN:
     65                         e.preventDefault();
     66                         this.save();
     67                         this.onblur(e);
     68                         break;
     69                     case rf.KEYS.TAB:
     70                         this.tabBlur = true;
     71                         break;
     72                 }
     73             },
     74
     75             __blurHandler: function(e) {
     76                 this.onblur(e);
     77             },
     78
     79             __isSaveOnBlur: function() {
     80                 return this.saveOnBlur;
     81             },
     82
     83             __setInputFocus: function() {
     84                 this.getInput().unbind("focus", this.__editHandler);
     85                 this.getInput().focus();
     86             },
     87
     88             __saveBtnHandler: function(e) {
     89                 this.cancelButton = false;
     90                 this.save();
     91                 this.onblur(e);
     92             },
     93
     94             __cancelBtnHandler: function(e) {
     95                 this.cancelButton = true;
     96                 this.cancel();
     97                 this.onblur(e);
     98             },
     99
    100             __editHandler: function(e) {
    101                 $super.__editHandler.call(this, e);
    102                 this.onfocus(e);
    103             },
    104
    105             getLabel: function() {
    106                 return this.label.text();
    107             },
    108
    109             setLabel: function(value) {
    110                 this.label.text(value);
    111                 if (value == this.defaultLabel) {
    112                     this.label.addClass(this.defaultLabelClass);
    113                 } else {
    114                     this.label.removeClass(this.defaultLabelClass);
    115                 }
    116             },
    117
    118             isValueChanged: function () {
    119                 return (this.__getValue() != this.initialLabel);
    120             },
    121
    122             onshow: function() {
    123                 this.__setInputFocus();
    124             },
    125
    126             onhide: function() {
    127                 if (this.tabBlur) {
    128                     this.tabBlur = false;
    129                 } else {
    130                     this.getInput().focus();
    131                 }
    132             },
    133
    134             onfocus: function(e) {
    135                 if (!this.__isFocused()) {
    136                     this.__setFocused(true);
    137                     this.focusValue = this.__getValue();
    138                     this.invokeEvent.call(this, "focus", document.getElementById(this.id), e);
    139                 }
    140             },
    141
    142             onblur: function(e) {
    143                 if (this.__isFocused()) {
    144                     this.__setFocused(false);
    145                     this.invokeEvent.call(this, "blur", document.getElementById(this.id), e);
    146
    147                     if (this.isValueSaved() || this.__isSaveOnBlur()) {
    148                         this.save();
    149                     } else {
    150                         this.cancel();
    151                     }
    152
    153                     this.__hide();
    154
    155                     if (!this.cancelButton) {
    156                         if (this.__isValueChanged()) {
    157                             this.invokeEvent.call(this, "change", document.getElementById(this.id), e);
    158                         }
    159                     }
    160                     var _this = this;
    161                     window.setTimeout(function() {
    162                         _this.getInput().bind("focus", $.proxy(_this.__editHandler, _this));
    163                     }, 1);
    164                 }
    165             },
    166
    167             __isValueChanged: function() {
    168                 return (this.focusValue != this.__getValue());
    169             },
    170
    171             __setFocused: function(focused) {
    172                 this.focused = focused;
    173             },
    174
    175             __isFocused: function() {
    176                 return this.focused;
    177             },
    178             setValue: function(value) {
    179                 this.__setValue(value);
    180                 this.save();
    181             }
    182         }
    183     })());
    184
    185 })(RichFaces.jQuery, window.RichFaces);
    186