I have a requirement where javascript library Mergely is used to compare two strings. This seems to work as expected when Locker service is disabled but when it is enabled this library is not invoked. The library is used along with jQuery library to function. Below is the code I used
Component:
<aura:component>
<ltng:require styles="/resource/CompareLib/CompareLib/codemirror.css,
/resource/CompareLib/CompareLib/mergely.css" />
<ltng:require scripts="/resource/CompareLib/CompareLib/codemirror.js,
/resource/CompareLib/CompareLib/mergely.js" />
<ltng:require scripts="/resource/jQueryLibrary/jQueryLibrary/jquery.js" />
<ui:button label="Open" class="slds-button slds-button--neutral" labelClass="label" press="{!c.open}" />
<div aria-hidden="false" aura:id="popUpSectionId" role="dialog" class="slds-modal slds-fade-in-open slds-modal--large hideClass">
<div class="slds-modal__container">
<div class="slds-modal__header">
<ui:button label="" class="slds-button slds-button--icon-inverse slds-modal__close button2" press="{!c.hideCompareCodePopup}">
<c:svg ariaHidden="true" class="slds-button__icon slds-button__icon--large" xlinkHref="/resource/slds0122/assets/icons/action-sprite/svg/symbols.svg#close"></c:svg>
<span class="slds-assistive-text">Close</span>
</ui:button>
</div>
<div class="slds-modal__content">
<div id="mergely-resizer" class="codeContentClass">
<div aura:id="compare"></div>
</div>
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop--open hideClass" aura:id="popUpBackgroundId"></div>
</aura:component>
Controller:
({
open : function(component, event, helper) {
var item1 = "the quick red fox jumped over the hairy dog";
var item2 = "the quick red fox jumped over the hairy dog";
$(document).ready(function() {
var editor = $(component.find("compare").getElement());
editor.mergely({
cmsettings : {
readOnly : false
}
});
editor.mergely('lhs', item1);
editor.mergely('rhs', item2);
});
$A.util.removeClass(component.find("popUpSectionId"), "hideClass");
$A.util.removeClass(component.find("popUpBackgroundId"), "hideClass");
}
})
CSS:
.THIS.hideClass{
display: none;
}
This code works when Locker service disabled but not when enabled. Please help.