Ajax.dbcInPlaceEditor
scriptaculous/control.jsのAjax.InPlaceEditorを使うと、クリックで起動してしまってドラッグと組み合わせているといちいち編集モードに入ってウザイので、ダブルクリックしないと編集モードにならないようにプチ改造。
べた書きは容量に影響するので、Ajax.InPlaceEditorをオーバーライドすることにする。
フック部分をダブルクリックにするだけなのに、initialize()をまるごと入れ替える必要があるので、変更部分は少ないのに長いのが気に入らない。
行数増えるので、もとのInPlaceEditorのオプションで標準搭載してほしい機能だと思うのだけど。
dispose()はなくても動くのだけど、とりあえず入れておいた。
以下日記バックアップ。
/* Double Click in place editor function */ Ajax.dbcInPlaceEditor = Class.create(); Object.extend(Ajax.dbcInPlaceEditor.prototype, Ajax.InPlaceEditor.prototype); Object.extend(Ajax.dbcInPlaceEditor.prototype, { initialize: function(element, url, options) { this.url = url; this.element = $(element); this.options = Object.extend({ okButton: true, okText: "ok", cancelLink: true, cancelText: "cancel", savingText: "Saving...", clickToEditText: "Double Click to edit", okText: "ok", rows: 1, onComplete: function(transport, element) { new Effect.Highlight(element, {startcolor: this.options.highlightcolor}); }, onFailure: function(transport) { alert("Error communicating with the server: " + transport.responseText.stripTags()); }, callback: function(form) { return Form.serialize(form); }, handleLineBreaks: true, loadingText: 'Loading...', savingClassName: 'inplaceeditor-saving', loadingClassName: 'inplaceeditor-loading', formClassName: 'inplaceeditor-form', highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor, highlightendcolor: "#FFFFFF", externalControl: null, submitOnBlur: false, ajaxOptions: {}, evalScripts: false }, options || {}); if(!this.options.formId && this.element.id) { this.options.formId = this.element.id + "-inplaceeditor"; if ($(this.options.formId)) { // there's already a form with that name, don't specify an id this.options.formId = null; } } if (this.options.externalControl) { this.options.externalControl = $(this.options.externalControl); } this.originalBackground = Element.getStyle(this.element, 'background-color'); if (!this.originalBackground) { this.originalBackground = "transparent"; } this.element.title = this.options.clickToEditText; this.ondblclickListener = this.enterEditMode.bindAsEventListener(this); this.mouseoverListener = this.enterHover.bindAsEventListener(this); this.mouseoutListener = this.leaveHover.bindAsEventListener(this); Event.observe(this.element, 'dblclick', this.ondblclickListener); Event.observe(this.element, 'mouseover', this.mouseoverListener); Event.observe(this.element, 'mouseout', this.mouseoutListener); if (this.options.externalControl) { Event.observe(this.options.externalControl, 'dblclick', this.ondblclickListener); Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener); Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener); } }, dispose: function() { if (this.oldInnerHTML) { this.element.innerHTML = this.oldInnerHTML; } this.leaveEditMode(); Event.stopObserving(this.element, 'dblclick', this.ondblclickListener); Event.stopObserving(this.element, 'mouseover', this.mouseoverListener); Event.stopObserving(this.element, 'mouseout', this.mouseoutListener); if (this.options.externalControl) { Event.stopObserving(this.options.externalControl, 'dblclick', this.ondblclickListener); Event.stopObserving(this.options.externalControl, 'mouseover', this.mouseoverListener); Event.stopObserving(this.options.externalControl, 'mouseout', this.mouseoutListener); } } });