src/jp/sourceforge/manganetwork/page/javascripts/spinelz/inplaceEditorEx.js

   1 // Copyright (c) 2006 spinelz.org (http://script.spinelz.org/)
   2 //
   3 // This code is substantially based on code from script.aculo.us which has the
   4 // following copyright and permission notice
   5 //
   6 // Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
   7 //
   8 // Permission is hereby granted, free of charge, to any person obtaining
   9 // a copy of this software and associated documentation files (the
  10 // "Software"), to deal in the Software without restriction, including
  11 // without limitation the rights to use, copy, modify, merge, publish,
  12 // distribute, sublicense, and/or sell copies of the Software, and to
  13 // permit persons to whom the Software is furnished to do so, subject to
  14 // the following conditions:
  15 //
  16 // The above copyright notice and this permission notice shall be
  17 // included in all copies or substantial portions of the Software.
  18 //
  19 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  20 // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  21 // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  22 // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
  23 // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
  24 // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
  25 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  26
  27 InPlaceEditorEx = Class.create();
  28 Object.extend(Object.extend(InPlaceEditorEx.prototype, Ajax.InPlaceEditor.prototype), {
  29   /*********************************************
  30    * Edit
  31    *   The URL option is unnecessary because
  32    *   of updating without Ajax.
  33    *********************************************
  34   initialize: function(element, url, options) {
  35     this.url = url;
  36    *********************************************/
  37   initialize: function(element, options) {
  38   /*********************************************/
  39     this.element = $(element);
  40
  41     this.options = Object.extend({
  42       okButton: true,
  43       okText: "ok",
  44       cancelLink: true,
  45       cancelText: "cancel",
  46       savingText: "Saving...",
  47       clickToEditText: "Click to edit",
  48       okText: "ok",
  49       rows: 1,
  50       onComplete: function(transport, element) {
  51         new Effect.Highlight(element, {startcolor: this.options.highlightcolor});
  52       },
  53       onFailure: function(transport) {
  54         alert("Error communicating with the server: " + transport.responseText.stripTags());
  55       },
  56       callback: function(form) {
  57         return Form.serialize(form);
  58       },
  59       handleLineBreaks: true,
  60       loadingText: 'Loading...',
  61       savingClassName: 'inplaceeditor-saving',
  62       loadingClassName: 'inplaceeditor-loading',
  63       formClassName: 'inplaceeditor-form',
  64       highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor,
  65       highlightendcolor: "#FFFFFF",
  66       externalControl: null,
  67       submitOnBlur: false,
  68       ajaxOptions: {},
  69       evalScripts: false
  70     }, options || {});
  71
  72     if(!this.options.formId && this.element.id) {
  73       this.options.formId = this.element.id + "-inplaceeditor";
  74       if ($(this.options.formId)) {
  75         // there's already a form with that name, don't specify an id
  76         this.options.formId = null;
  77       }
  78     }
  79
  80     if (this.options.externalControl) {
  81       this.options.externalControl = $(this.options.externalControl);
  82     }
  83
  84     this.originalBackground = Element.getStyle(this.element, 'background-color');
  85     if (!this.originalBackground) {
  86       this.originalBackground = "transparent";
  87     }
  88
  89     this.element.title = this.options.clickToEditText;
  90
  91   /*********************************************
  92    * Edit
  93    *   The event to enter edit mode is changed
  94    *   from single-click to double-click.
  95    *********************************************
  96     this.onclickListener = this.enterEditMode.bindAsEventListener(this);
  97     this.mouseoverListener = this.enterHover.bindAsEventListener(this);
  98     this.mouseoutListener = this.leaveHover.bindAsEventListener(this);
  99     Event.observe(this.element, 'click', this.onclickListener);
 100     Event.observe(this.element, 'mouseover', this.mouseoverListener);
 101     Event.observe(this.element, 'mouseout', this.mouseoutListener);
 102     if (this.options.externalControl) {
 103       Event.observe(this.options.externalControl, 'click', this.onclickListener);
 104       Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener);
 105       Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener);
 106     }
 107    *********************************************/
 108     this.ondblclickListener = this.enterEditMode.bindAsEventListener(this);
 109     this.mouseoverListener = this.enterHover.bindAsEventListener(this);
 110     this.mouseoutListener = this.leaveHover.bindAsEventListener(this);
 111     Event.observe(this.element, 'dblclick', this.ondblclickListener);
 112     Event.observe(this.element, 'mouseover', this.mouseoverListener);
 113     Event.observe(this.element, 'mouseout', this.mouseoutListener);
 114     if (this.options.externalControl) {
 115       Event.observe(this.options.externalControl, 'dblclick', this.ondblclickListener);
 116       Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener);
 117       Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener);
 118     }
 119   /*********************************************/
 120   },
 121   getText: function() {
 122     return this.element.innerHTML.unescapeHTML();
 123   },
 124   onSubmit: function() {
 125     var value = this.editField.value.escapeHTML();
 126     if(value == '') {
 127       this.onclickCancel();
 128       return false;
 129     } else {
 130       this.onLoading();
 131       this.element.innerHTML = value;
 132       new InPlaceEditorEx(this.element.id, this.options);
 133       return true;
 134     }
 135   },
 136   removeForm: function() {
 137     if(this.form) {
 138       if(this.form.parentNode) {
 139         var childNodes = this.form.parentNode.childNodes;
 140         for(var i = 0; i < childNodes.length; i++) {
 141           childNodes[i].data = '';
 142         }
 143         Element.remove(this.form);
 144       }
 145       this.form = null;
 146     }
 147   }
 148 });