larissasouzapinto · larissasouzapinto · Feb 12, 2021
diff --git a/force-app/main/default/aura/PictureCarousel/PictureCarousel.cmp b/force-app/main/default/aura/PictureCarousel/PictureCarousel.cmp
@@ -0,0 +1,24 @@
+<aura:component access="global">
+
+    <aura:attribute name="slideIndex" type="Integer" default="0"/>
+    <aura:attribute name="slideWidth" type="Integer" default="0"/>
+    <aura:attribute name="slides" type="Object[]"/>
+
+    <div aura:id="gallery" class="gallery">
+        <div class="filmstrip" style="{! 'margin-left: -' + (v.slideIndex * v.slideWidth) + 'px' }">
+            <aura:iteration items="{!v.slides}" var="slide" indexVar="index">
+                <div class="slide" style="{!'width:' + v.slideWidth + 'px;background-image:url(' + slide + ')' }"></div>
+            </aura:iteration>
+        </div>
+        <div class="{! v.slideWidth>640 ? 'btn prev x-large' : 'btn prev'}">
+            <lightning:buttonIcon variant="border-filled" onclick="{!c.prev}"
+                size="large" iconName="utility:chevronleft"
+                disabled="{! v.slideIndex &lt;= 0 }" />
+        </div>
+        <div class="{! v.slideWidth>640 ? 'btn next x-large' : 'btn next'}">
+            <lightning:buttonIcon variant="border-filled" onclick="{!c.next}"
+                size="large" iconName="utility:chevronright"
+                disabled="{! v.slideIndex &gt;= (v.slides.length-1) }" />
+        </div>
+    </div>
+</aura:component>
diff --git a/force-app/main/default/aura/PictureCarousel/PictureCarousel.cmp-meta.xml b/force-app/main/default/aura/PictureCarousel/PictureCarousel.cmp-meta.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>47.0</apiVersion>
+    <description>A Lightning Component Bundle</description>
+</AuraDefinitionBundle>
diff --git a/force-app/main/default/aura/PictureCarousel/PictureCarousel.css b/force-app/main/default/aura/PictureCarousel/PictureCarousel.css
@@ -0,0 +1,57 @@
+.THIS {
+    position: relative;
+    width: 100%;
+    height: 100%;
+	overflow: hidden;
+}
+
+.THIS * {
+	box-sizing: border-box;
+}
+
+.THIS .filmstrip {
+	-webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    transition: all .5s ease-in-out;
+    height: 100%;
+	display: inline-block;
+	white-space: nowrap;
+}
+
+.THIS .slide {
+    height: 100%;
+	display: inline-block;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.THIS .btn {
+    position: absolute;
+}
+
+.THIS .btn.next {
+    top: 44%;
+    right: 6px;
+}
+
+.THIS .btn.prev {
+    top: 44%;
+    left: 6px;
+}
+
+.THIS .btn.fullscreen,
+.THIS .btn.close
+{
+    bottom: 0;
+    left: 0;
+}
+
+.THIS .btn.x-large .slds-button {
+    width: 3.5rem;
+    height: 3.5rem;
+}
+.THIS .btn.x-large .slds-button__icon {
+    width: 1.7rem;
+    height: 1.7rem;
+}
diff --git a/force-app/main/default/aura/PictureCarousel/PictureCarouselController.js b/force-app/main/default/aura/PictureCarousel/PictureCarouselController.js
@@ -0,0 +1,19 @@
+({
+    next: function(component) {
+    	var slideIndex = component.get("v.slideIndex");
+    	var slides = component.get("v.slides");
+        if (slideIndex + 1 < slides.length) {
+            slideIndex = slideIndex + 1;
+	        component.set("v.slideIndex", slideIndex);
+        }
+	},
+
+    prev: function(component) {
+       	var slideIndex = component.get("v.slideIndex");
+        if (slideIndex > 0) {
+            slideIndex = slideIndex - 1;
+	        component.set("v.slideIndex", slideIndex);
+        }
+    }
+
+})
diff --git a/force-app/main/default/aura/PictureCarousel/PictureCarouselHelper.js b/force-app/main/default/aura/PictureCarousel/PictureCarouselHelper.js
@@ -0,0 +1,6 @@
+({
+    setSlideWidth: function (component) {
+        var slideWidth = component.find("gallery").getElement().offsetWidth;
+        component.set("v.slideWidth", slideWidth);
+    }
+})
diff --git a/force-app/main/default/aura/PictureCarousel/PictureCarouselRenderer.js b/force-app/main/default/aura/PictureCarousel/PictureCarouselRenderer.js
@@ -0,0 +1,6 @@
+({
+    afterRender: function (component, helper) {
+        this.superAfterRender();
+		helper.setSlideWidth(component, helper);
+    }
+})
diff --git a/force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.cmp b/force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.cmp
@@ -0,0 +1,30 @@
+<aura:component implements="flexipage:availableForAllPageTypes"
+                access="global">
+
+    <aura:attribute name="fullScreen" type="Boolean" default="false"/>
+    <aura:attribute name="animations" type="Boolean" default="true"/>
+    <aura:attribute name="slides" type="Object[]"/>
+
+	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
+
+    <lightning:card iconName="utility:image" title="Picture Gallery">
+        <aura:set attribute="actions">
+            <lightning:buttonIcon onclick="{!c.fullScreen}" size="large" iconName="utility:expand" />
+        </aura:set>
+        <c:PictureCarousel slides="{!v.slides}"/>
+        <aura:if isTrue="{!v.fullScreen==true}">
+            <div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
+                <div class="slds-modal__container">
+                    <c:PictureCarousel slides="{!v.slides}"/>
+                </div>
+
+                <div class="btn slds-modal__close close x-large">
+                    <lightning:buttonIcon variant="border-filled" onclick="{!c.closeDialog}" size="large" iconName="utility:close" />
+                </div>
+
+            </div>
+            <div class="slds-backdrop slds-backdrop--open"></div>
+        </aura:if>
+    </lightning:card>
+
+</aura:component>
diff --git a/force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.cmp-meta.xml b/force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.cmp-meta.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>47.0</apiVersion>
+    <description>A Lightning Component Bundle</description>
+</AuraDefinitionBundle>
diff --git a/force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.css b/force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.css
@@ -0,0 +1,21 @@
+.THIS * {
+	box-sizing: border-box; 
+}
+
+.THIS .slds-card__body {
+	height: 340px;
+    margin-bottom: 0;
+}
+
+.THIS .slds-modal__container {
+    margin-top: 100px;
+    height: 90%;
+    width: 90%;
+    max-width: initial;
+}
+
+.THIS .slds-modal__close {
+    position: absolute;
+    top: 100px;
+    right: 5%;
+}
diff --git a/force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.design b/force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.design
@@ -0,0 +1,3 @@
+<design:component label="Picture Gallery">
+	<design:attribute name="animations" label="Animations" description="Animated transitions" />
+</design:component>
diff --git a/force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.svg b/force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.svg
diff --git a/force-app/main/default/aura/PictureGalleryCard/PictureGalleryCardController.js b/force-app/main/default/aura/PictureGalleryCard/PictureGalleryCardController.js
@@ -0,0 +1,19 @@
+({
+    doInit : function(component) {
+    	// Hardcoding images in this demo component
+    	component.set("v.slides", [
+            'https://s3-us-west-1.amazonaws.com/sfdc-demo/houses/living_room.jpg',
+            'https://s3-us-west-1.amazonaws.com/sfdc-demo/houses/eatinkitchen.jpg',
+			'https://s3-us-west-1.amazonaws.com/sfdc-demo/houses/kitchen.jpg'
+        ]);
+    },
+
+	fullScreen : function(component) {
+        component.set("v.fullScreen", true);
+	},
+
+	closeDialog : function(component) {
+        component.set("v.fullScreen", false);
+	}
+
+})