0

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.

  • See the comment thread on this answer for some information about the Locker Service. – Keith C Oct 14 '16 at 12:14
  • Hi Keith, Thank you for the info. I have other JS libraries which are working good when Locker service enabled. Currently I have issue with this Mergely JS library (or can be with JQuery library which is needed to implement mergely). I am posting this question in hope to get resolved about the issue or an alternate to implement my functionality. – Pradeep Chary Oct 14 '16 at 12:22
  • I provided the link in case you could wait little while; appears the next Locker Service will be less likely to break 3rd party libraries. – Keith C Oct 14 '16 at 17:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.