4836: side menu inline edit now properly saved after exiting edit mode.
[acontent.git] / docs / include / jscripts / infusion / components / inlineEdit / js / InlineEdit.js
1 fluid_1_1=fluid_1_1||{};(function($,fluid){function sendKey(control,event,virtualCode,charCode){var kE=document.createEvent("KeyEvents");kE.initKeyEvent(event,1,1,null,0,0,0,0,virtualCode,charCode);control.dispatchEvent(kE)}fluid.setCaretToEnd=function(control,value){var pos=value?value.length:0;try{control.focus();if(control.setSelectionRange){control.setSelectionRange(pos,pos);if($.browser.mozilla&&pos>0){sendKey(control,"keypress",92,92);sendKey(control,"keydown",8,0);sendKey(control,"keypress",8,0)}}else{if(control.createTextRange){var range=control.createTextRange();range.move("character",pos);range.select()}}}catch(e){}};fluid.deadMansBlur=function(control,exclusions,handler){var blurPending=false;$(control).blur(function(){blurPending=true;setTimeout(function(){if(blurPending){handler(control)}},150)});var canceller=function(){blurPending=false};exclusions.focus(canceller);exclusions.click(canceller)};var renderEditContainer=function(that,really){that.editContainer=that.locate("editContainer");that.editField=that.locate("edit");if(that.editContainer.length!==1){if(that.editField.length===1){that.editContainer=that.editField}else{if(that.editContainer.length>1){fluid.fail("InlineEdit did not find a unique container for selector "+that.options.selectors.editContainer+": "+fluid.dumpEl(that.editContainer))}}}if(that.editContainer.length===1&&!that.editField){that.editField=that.locate("edit",that.editContainer)}if(!really){return }var editElms=that.options.editModeRenderer(that);if(editElms){that.editContainer=editElms.container;that.editField=editElms.field}if(that.editField.length===0){fluid.fail("InlineEdit improperly initialised - editField could not be located (selector "+that.options.selectors.edit+")")}};var switchToViewMode=function(that){that.editContainer.hide();that.viewEl.show()};var cancel=function(that){if(that.isEditing()){setTimeout(function(){that.editView.value(that.model.value)},1);switchToViewMode(that);that.events.afterFinishEdit.fire(that.model.value,that.model.value,that.editField[0],that.viewEl[0])}};var finish=function(that){var newValue=that.editView.value();var oldValue=that.model.value;var viewNode=that.viewEl[0];var editNode=that.editField[0];var ret=that.events.onFinishEdit.fire(newValue,oldValue,editNode,viewNode);if(ret===false){return }that.updateModelValue(newValue);that.events.afterFinishEdit.fire(newValue,oldValue,editNode,viewNode);switchToViewMode(that)};var bindEditFinish=function(that){if(that.options.submitOnEnter===undefined){that.options.submitOnEnter="textarea"!==fluid.unwrap(that.editField).nodeName.toLowerCase()}function keyCode(evt){return evt.keyCode?evt.keyCode:(evt.which?evt.which:0)}var escHandler=function(evt){var code=keyCode(evt);if(code===$.ui.keyCode.ESCAPE){cancel(that);return false}};var finishHandler=function(evt){var code=keyCode(evt);if(code!==$.ui.keyCode.ENTER){return true}finish(that);that.viewEl.focus();return false};if(that.options.submitOnEnter){that.editContainer.keypress(finishHandler)}that.editContainer.keydown(escHandler)};var bindBlurHandler=function(that){if(that.options.blurHandlerBinder){that.options.blurHandlerBinder(that)}else{var blurHandler=function(evt){if(that.isEditing()){finish(that)}return false};that.editField.blur(blurHandler)}};var initializeEditView=function(that,initial){if(!that.editInitialized){renderEditContainer(that,!that.options.lazyEditView||!initial);if(!that.options.lazyEditView||!initial){that.editView=fluid.initSubcomponent(that,"editView",that.editField);$.extend(true,that.editView,fluid.initSubcomponent(that,"editAccessor",that.editField));bindEditFinish(that);bindBlurHandler(that);that.editView.refreshView(that);that.editInitialized=true}}};var edit=function(that){initializeEditView(that,false);var viewEl=that.viewEl;var displayText=that.displayView.value();that.updateModelValue(that.model.value===""?"":displayText);if(that.options.applyEditPadding){that.editField.width(Math.max(viewEl.width()+that.options.paddings.edit,that.options.paddings.minimumEdit))}viewEl.removeClass(that.options.styles.invitation);viewEl.removeClass(that.options.styles.focus);viewEl.hide();that.editContainer.show();if(that.tooltipEnabled()){$("#"+that.options.tooltipId).hide()}setTimeout(function(){that.editField.focus();fluid.setCaretToEnd(that.editField[0],that.editView.value());if(that.options.selectOnEdit){that.editField[0].select()}},0);that.events.afterBeginEdit.fire()};var clearEmptyViewStyles=function(textEl,defaultViewStyle,originalViewPadding){textEl.removeClass(defaultViewStyle);textEl.css("padding-right",originalViewPadding)};var showDefaultViewText=function(that){that.displayView.value(that.options.defaultViewText);that.viewEl.css("padding-right",that.existingPadding);that.viewEl.addClass(that.options.styles.defaultViewStyle)};var showNothing=function(that){that.displayView.value("");if($.browser.msie){if(that.viewEl.css("display")==="inline"){that.viewEl.css("display","inline-block")}}};var showEditedText=function(that){that.displayView.value(that.model.value);clearEmptyViewStyles(that.viewEl,that.options.styles.defaultViewStyle,that.existingPadding)};var refreshView=function(that,source){that.displayView.refreshView(that,source);if(that.editView){that.editView.refreshView(that,source)}};var initModel=function(that,value){that.model.value=value;that.refreshView()};var updateModelValue=function(that,newValue,source){var comparator=that.options.modelComparator;var unchanged=comparator?comparator(that.model.value,newValue):that.model.value===newValue;if(!unchanged){var oldModel=$.extend(true,{},that.model);that.model.value=newValue;that.events.modelChanged.fire(that.model,oldModel,source);that.refreshView(source)}};var bindHoverHandlers=function(viewEl,invitationStyle){var over=function(evt){viewEl.addClass(invitationStyle)};var out=function(evt){viewEl.removeClass(invitationStyle)};viewEl.hover(over,out)};var makeEditHandler=function(that){return function(){var prevent=that.events.onBeginEdit.fire();if(prevent===false){return false}edit(that);return true}};function makeEditTriggerGuard(that){var viewEl=fluid.unwrap(that.viewEl);return function(event){var outer=fluid.findAncestor(event.target,function(elem){if(/input|select|textarea|button|a/i.test(elem.nodeName)||elem===viewEl){return true}});if(outer===viewEl){that.edit();return false}}}var bindMouseHandlers=function(that){bindHoverHandlers(that.viewEl,that.options.styles.invitation);that.viewEl.click(makeEditTriggerGuard(that))};var bindHighlightHandler=function(viewEl,focusStyle,invitationStyle){var focusOn=function(){viewEl.addClass(focusStyle);viewEl.addClass(invitationStyle)};var focusOff=function(){viewEl.removeClass(focusStyle);viewEl.removeClass(invitationStyle)};viewEl.focus(focusOn);viewEl.blur(focusOff)};var bindKeyboardHandlers=function(that){fluid.tabbable(that.viewEl);var guard=makeEditTriggerGuard(that);fluid.activatable(that.viewEl,function(event){return guard(event)})};var aria=function(viewEl,editContainer){viewEl.attr("role","button")};var defaultEditModeRenderer=function(that){if(that.editContainer.length>0&&that.editField.length>0){return{container:that.editContainer,field:that.editField}}var editModeTemplate="<span><input type='text' class='flc-inlineEdit-edit fl-inlineEdit-edit'/></span>";var editContainer=$(editModeTemplate);var editField=$("input",editContainer);var componentContainerId=that.container.attr("id");if(componentContainerId){var editContainerId=componentContainerId+"-edit-container";var editFieldId=componentContainerId+"-edit";editContainer.attr("id",editContainerId);editField.attr("id",editFieldId)}that.viewEl.after(editContainer);return{container:editContainer,field:editField}};var makeIsEditing=function(that){var isEditing=false;that.events.onBeginEdit.addListener(function(){isEditing=true});that.events.afterFinishEdit.addListener(function(){isEditing=false});return function(){return isEditing}};var setupInlineEdit=function(componentContainer,that){var padding=that.viewEl.css("padding-right");that.existingPadding=padding?parseFloat(padding):0;initModel(that,that.displayView.value());bindMouseHandlers(that);bindKeyboardHandlers(that);bindHighlightHandler(that.viewEl,that.options.styles.focus,that.options.styles.invitation);aria(that.viewEl);if(that.editContainer){that.editContainer.hide()}var initTooltip=function(){if(that.tooltipEnabled()){that.viewEl.tooltip({delay:that.options.tooltipDelay,extraClass:that.options.styles.tooltip,bodyHandler:function(){return that.options.tooltipText},id:that.options.tooltipId})}};$(initTooltip);that.decorators=fluid.initSubcomponents(that,"componentDecorators",[that,fluid.COMPONENT_OPTIONS])};var setupInlineEdits=function(editables,options){var editors=[];editables.each(function(idx,editable){editors.push(fluid.inlineEdit($(editable),options))});return editors};fluid.inlineEdit=function(componentContainer,userOptions){var that=fluid.initView("inlineEdit",componentContainer,userOptions);that.viewEl=that.locate("text");that.displayView=fluid.initSubcomponent(that,"displayView",that.viewEl);$.extend(true,that.displayView,fluid.initSubcomponent(that,"displayAccessor",that.viewEl));that.model={value:""};that.edit=makeEditHandler(that);that.isEditing=makeIsEditing(that);that.finish=function(){finish(that)};that.cancel=function(){cancel(that)};that.tooltipEnabled=function(){return that.options.useTooltip&&$.fn.tooltip};that.refreshView=function(source){refreshView(that,source)};that.updateModelValue=function(newValue,source){updateModelValue(that,newValue,source)};that.updateModel=function(newModel,source){updateModelValue(that,newModel.value,source)};initializeEditView(that,true);setupInlineEdit(componentContainer,that);return that};fluid.inlineEdit.standardAccessor=function(element){var nodeName=element.nodeName.toLowerCase();var func="input"===nodeName||"textarea"===nodeName?"val":"text";return{value:function(newValue){return $(element)[func](newValue)}}};fluid.inlineEdit.richTextViewAccessor=function(element){return{value:function(newValue){return $(element).html(newValue)}}};fluid.inlineEdit.standardDisplayView=function(viewEl){var that={refreshView:function(componentThat,source){if(componentThat.model.value){showEditedText(componentThat)}else{if(componentThat.options.defaultViewText){showDefaultViewText(componentThat)}else{showNothing(componentThat)}}if(($.trim(componentThat.viewEl.text()).length===0)&&(componentThat.existingPadding<componentThat.options.paddings.minimumView)){componentThat.viewEl.css("padding-right",componentThat.options.paddings.minimumView)}}};return that};fluid.inlineEdit.standardEditView=function(editField){var that={refreshView:function(componentThat,source){if(componentThat.editField&&componentThat.editField.index(source)===-1){componentThat.editView.value(componentThat.model.value)}}};$.extend(true,that,fluid.inlineEdit.standardAccessor(editField));return that};fluid.inlineEdits=function(componentContainer,options){options=options||{};var selectors=$.extend({},fluid.defaults("inlineEdits").selectors,options.selectors);var container=fluid.container(componentContainer);var editables=$(selectors.editables,container);return setupInlineEdits(editables,options)};fluid.defaults("inlineEdit",{selectors:{text:".flc-inlineEdit-text",editContainer:".flc-inlineEdit-editContainer",edit:".flc-inlineEdit-edit"},styles:{text:"fl-inlineEdit-text",edit:"fl-inlineEdit-edit",invitation:"fl-inlineEdit-invitation",defaultViewStyle:"fl-inlineEdit-invitation-text",tooltip:"fl-inlineEdit-tooltip",focus:"fl-inlineEdit-focus"},events:{modelChanged:null,onBeginEdit:"preventable",afterBeginEdit:null,onFinishEdit:"preventable",afterFinishEdit:null,afterInitEdit:null},paddings:{edit:10,minimumEdit:80,minimumView:60},applyEditPadding:true,blurHandlerBinder:null,submitOnEnter:undefined,modelComparator:null,displayAccessor:{type:"fluid.inlineEdit.standardAccessor"},displayView:{type:"fluid.inlineEdit.standardDisplayView"},editAccessor:{type:"fluid.inlineEdit.standardAccessor"},editView:{type:"fluid.inlineEdit.standardEditView"},editModeRenderer:defaultEditModeRenderer,lazyEditView:false,defaultViewText:"Click here to edit",tooltipText:"Click item to edit",tooltipId:"tooltip",useTooltip:false,tooltipDelay:1000,selectOnEdit:false});fluid.defaults("inlineEdits",{selectors:{editables:".flc-inlineEditable"}})})(jQuery,fluid_1_1);