+ Start a Discussion
bharath kumar 52bharath kumar 52 

resize lightning card on click of a hyperlink/button

Hi All,

I am working on a PoC where i need to display sobject records cards. But when i do i have few hyperlinks on each card onclick of which i want my card to be resized. I used addstyle but am not able to do it for more than 1 record.
Also, is there any way to store the card size for that particular user? i.e when i resize the card it should be visible with the same size next time the user visits the page.
<aura:component controller="tileController">
    <aura:attribute name="tiles" type="TileRecord__c[]" />
    <aura:attribute name="tileCount" type="Integer" default="0" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:layout multipleRows="true">
        <aura:iteration items="{!v.tiles}" var="tile" indexVar="index">
            <lightning:layoutItem padding="around-small" size="10" smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="4" >
                <article aura:id="{!tile.Id}" class="slds-card slds-card__narrow slds-size_2-of-3" style="padding-left: 10px;" data-row-index="{!index}">
                    <a href="{! '#tiles/' + tile.Id }">
                        <span class="slds-badge">{!tile.Name}</span>
                    <!--<lightning:button label="Toggle" onclick="{!c.resizeToSmall}"/> -->
                    <p><!--<ui:button aura:id="sml" press="{!c.resizeToSmall}">s</ui:button> -->
                        <a aura:id="md" href="javascript:void(0)" onclick="{!c.resizeToSmall}">s</a>
                        <a aura:id="md" href="javascript:void(0)" onclick="{!c.resizeToMedium}">m</a>
                        <a aura:id ="lg" href="javascript:void(0)" onclick="{!c.resizeToLarge}">l</a>
                    <p style="color:red; font-weight:bold;">{!index}</p>
                    <a href="javascript:void(0)" onclick="{!c.doSomething}">
                        Click me to do Something </a>

Controller :
	doInit : function(component, event, helper) {
		var tiles=component.get("c.displayTiles");
        $A.enqueueAction(tiles);//tiles ---> action on server side	
    applyCSS: function(cmp, event) {
        //var href = event.currentTarget;
        //$A.util.addClass(href, 'changeMe');
         var cmpTarget = cmp.find('{!tile.Id}');
        $A.util.addClass(cmpTarget, 'changeMe');
    resizeToSmall:function(component, event, helper){
//OnClick on s,m,l hyperlinks on the component it should be resized.
       	/*var src = event.getSource().getLocalId();
        var cmpTarget = component.find('changeIt');
        $A.util.addClass(src, 'changeMe');
        var cmpTarget = component.find('{!tile.Id}');
        var arr = [];
        //arr = component.find("main").getElement().childNodes;
    resizeToLarge:function(component, event, helper){
    resizeToMedium:function(component, event, helper){
    doSomething : function(component,event, helper) {
       console.log('Hey There .. the anchor was clicked');
       var href = event.srcElement.href;