-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from dvolk20/feature-maria-gallery
Added picture gallery
- Loading branch information
Showing
13 changed files
with
216 additions
and
0 deletions.
There are no files selected for viewing
24 changes: 24 additions & 0 deletions
24
force-app/main/default/aura/PictureCarousel/PictureCarousel.cmp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <= 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 >= (v.slides.length-1) }" /> | ||
| </div> | ||
| </div> | ||
| </aura:component> |
5 changes: 5 additions & 0 deletions
5
force-app/main/default/aura/PictureCarousel/PictureCarousel.cmp-meta.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata"> | ||
| <apiVersion>38.0</apiVersion> | ||
| <description>A Lightning Component Bundle</description> | ||
| </AuraDefinitionBundle> |
57 changes: 57 additions & 0 deletions
57
force-app/main/default/aura/PictureCarousel/PictureCarousel.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
19 changes: 19 additions & 0 deletions
19
force-app/main/default/aura/PictureCarousel/PictureCarouselController.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| } | ||
|
|
||
| }) |
6 changes: 6 additions & 0 deletions
6
force-app/main/default/aura/PictureCarousel/PictureCarouselHelper.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| ({ | ||
| setSlideWidth: function (component) { | ||
| var slideWidth = component.find("gallery").getElement().offsetWidth; | ||
| component.set("v.slideWidth", slideWidth); | ||
| } | ||
| }) |
6 changes: 6 additions & 0 deletions
6
force-app/main/default/aura/PictureCarousel/PictureCarouselRenderer.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| ({ | ||
| afterRender: function (component, helper) { | ||
| this.superAfterRender(); | ||
| helper.setSlideWidth(component, helper); | ||
| } | ||
| }) |
30 changes: 30 additions & 0 deletions
30
force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.cmp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
5 changes: 5 additions & 0 deletions
5
force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.cmp-meta.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata"> | ||
| <apiVersion>38.0</apiVersion> | ||
| <description>A Lightning Component Bundle</description> | ||
| </AuraDefinitionBundle> |
21 changes: 21 additions & 0 deletions
21
force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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%; | ||
| } |
3 changes: 3 additions & 0 deletions
3
force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.design
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <design:component label="Picture Gallery"> | ||
| <design:attribute name="animations" label="Animations" description="Animated transitions" /> | ||
| </design:component> |
14 changes: 14 additions & 0 deletions
14
force-app/main/default/aura/PictureGalleryCard/PictureGalleryCard.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions
19
force-app/main/default/aura/PictureGalleryCard/PictureGalleryCardController.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
|
|
||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters