├── .gitignore
├── .salesforcedx.yaml
├── README.md
├── config
    └── project-scratch-def.json
├── force-app
    └── main
    │   └── default
    │       └── aura
    │           ├── ComponentEventPlaygroundApp
    │               ├── ComponentEventPlaygroundApp.app
    │               └── ComponentEventPlaygroundApp.app-meta.xml
    │           ├── cmpEvent
    │               ├── cmpEvent.evt
    │               └── cmpEvent.evt-meta.xml
    │           ├── container
    │               ├── container.cmp
    │               ├── container.cmp-meta.xml
    │               ├── containerController.js
    │               └── containerHelper.js
    │           ├── eventEmitter
    │               ├── eventEmitter.cmp
    │               ├── eventEmitter.cmp-meta.xml
    │               ├── eventEmitterController.js
    │               └── eventEmitterHelper.js
    │           └── owner
    │               ├── owner.cmp
    │               ├── owner.cmp-meta.xml
    │               ├── ownerController.js
    │               └── ownerHelper.js
├── gfx
    └── overview.gif
└── sfdx-project.json


/.gitignore:
--------------------------------------------------------------------------------
1 | **/.DS_Store
2 | .sfdx


--------------------------------------------------------------------------------
/.salesforcedx.yaml:
--------------------------------------------------------------------------------
1 | scratch-org-def: config/project-scratch-def.json
2 | assign-permset: false
3 | run-apex-tests: false
4 | delete-scratch-org: false
5 | show-scratch-org-url: true
6 | open-path: c/ComponentEventPlaygroundApp.app


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Lightning Component Event Playground
 2 | This project is a sample Lightning application that demonstrates the use of Lightning Component events.
 3 | 
 4 | <img src="https://raw.githubusercontent.com/pozil/sfdc-lightning-component-event-playground/master/gfx/overview.gif"/>
 5 | 
 6 | 
 7 | ## Install
 8 | 1. Deploy the sample application with the Salesforce CLI.
 9 | 
10 | 2. Access the application from this URL:<br/>
11 | https://<b>&lt;YOUR_DOMAIN_HERE&gt;</b>.lightning.force.com/c/ComponentEventPlaygroundApp.app
12 | 


--------------------------------------------------------------------------------
/config/project-scratch-def.json:
--------------------------------------------------------------------------------
1 | {
2 |     "orgName": "Lightning Playground",
3 |     "edition": "Developer",
4 |     "orgPreferences" : {
5 |         "enabled": ["S1DesktopEnabled"]
6 |     }
7 | }
8 | 


--------------------------------------------------------------------------------
/force-app/main/default/aura/ComponentEventPlaygroundApp/ComponentEventPlaygroundApp.app:
--------------------------------------------------------------------------------
 1 | <aura:application extends="force:slds">
 2 |     
 3 |     <div class="slds-page-header">
 4 |         <div class="slds-media">
 5 |             <div class="slds-media__figure">
 6 |                 <lightning:icon iconName="utility:connected_apps" size="normal" alternativeText="Event icon"/>
 7 |             </div>
 8 |             <div class="slds-media__body">
 9 |                 <h1 class="slds-page-header__title slds-truncate slds-align-middle">Lightning Component Event Playground</h1>
10 |                 <p class="slds-text-body_small slds-line-height_reset">Open your developer console, fire events and enjoy!</p>
11 |             </div>
12 |         </div>
13 |     </div>
14 |     
15 |     <c:owner />
16 |     
17 | </aura:application>


--------------------------------------------------------------------------------
/force-app/main/default/aura/ComponentEventPlaygroundApp/ComponentEventPlaygroundApp.app-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>40.0</apiVersion>
4 |     <description>A Lightning Component Bundle</description>
5 | </AuraDefinitionBundle>
6 | 


--------------------------------------------------------------------------------
/force-app/main/default/aura/cmpEvent/cmpEvent.evt:
--------------------------------------------------------------------------------
1 | <aura:event type="COMPONENT"/>
2 | 


--------------------------------------------------------------------------------
/force-app/main/default/aura/cmpEvent/cmpEvent.evt-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="urn:metadata.tooling.soap.sforce.com" fqn="cmpEvent">
3 |     <apiVersion>40.0</apiVersion>
4 |     <description>A Lightning Event Bundle</description>
5 | </AuraDefinitionBundle>


--------------------------------------------------------------------------------
/force-app/main/default/aura/container/container.cmp:
--------------------------------------------------------------------------------
 1 | <aura:component >
 2 | 	<aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventBubble}" includeFacets="true"/>
 3 |     <aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventCapture}" includeFacets="true" phase="capture"/>
 4 |     
 5 |     <aura:attribute name="pausedCmpEvent" type="Object"/>
 6 |     
 7 |     <div style="border:solid 1px green; color:green;" class="slds-p-around_medium slds-m-top_medium">
 8 |         <div class="slds-text-heading_medium">Container</div>
 9 |         <div>(event handlers with includeFacets="true")</div>
10 |        	
11 |         <div class="slds-form slds-form_compound">
12 |             <div class="slds-form-element__group">
13 |                 <div class="slds-form-element__row">
14 |                     <lightning:select name="propagationToggle" aura:id="propagationToggle" label="Event propagation" class="slds-size_1-of-2">
15 |                         <option value="none">Standard behavior</option>
16 |                         <option value="stop-capture">Stop during capture phase</option>
17 |                         <option value="stop-bubble">Stop during bubble phase</option>
18 |                         <option value="pause-capture">Pause during capture phase</option>
19 |                         <option value="pause-bubble">Pause during bubble phase</option>
20 |                     </lightning:select>
21 |                     <div class="slds-form-element slds-size_1-of-2 slds-align-bottom">
22 |                     	<lightning:button label="Resume" onclick="{! c.onResumeCmpEvent }" iconName="utility:right" class="{!empty(v.pausedCmpEvent) ? 'slds-hide' : ''}"/>
23 |                     </div>
24 |                 </div>
25 |             </div>
26 |         </div>
27 |         
28 |     	{!v.body}
29 |     </div>
30 | </aura:component>


--------------------------------------------------------------------------------
/force-app/main/default/aura/container/container.cmp-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>40.0</apiVersion>
4 |     <description>A Lightning Component Bundle</description>
5 | </AuraDefinitionBundle>
6 | 


--------------------------------------------------------------------------------
/force-app/main/default/aura/container/containerController.js:
--------------------------------------------------------------------------------
 1 | ({
 2 |     handleCmpEventBubble : function(component, event, helper) {       
 3 |         helper.handleCmpEvent(component, event);
 4 |     },
 5 |     
 6 |     handleCmpEventCapture : function(component, event, helper) {
 7 |         helper.handleCmpEvent(component, event);
 8 |     },
 9 |     
10 |     onResumeCmpEvent : function(component, event, helper) {
11 |         helper.resumeEvent(component);
12 |     }
13 | })


--------------------------------------------------------------------------------
/force-app/main/default/aura/container/containerHelper.js:
--------------------------------------------------------------------------------
 1 | ({
 2 | 	handleCmpEvent : function(component, event) {
 3 | 		var componentName = component.getName().substr(1); // Removing the 'c' namespace prefix
 4 |         var phase = event.getPhase();
 5 |         console.log(componentName +' - event handled ('+ phase +')');
 6 |         
 7 |         var propagationToggle = component.find('propagationToggle').get('v.value');
 8 |         if (propagationToggle === 'stop-'+ phase) {
 9 |             console.log(componentName +' - stopping event propagation ('+ phase +')');
10 |             event.stopPropagation();
11 |         }
12 |         else if (propagationToggle === 'pause-'+ phase) {
13 |             console.log(componentName +' - pausing event propagation ('+ phase +')');
14 |             event.pause();
15 |             component.set('v.pausedCmpEvent', event);
16 |         }
17 | 	},
18 |     
19 |     resumeEvent : function(component) {
20 |         var event = component.get('v.pausedCmpEvent');
21 |         console.log(component.getName().substr(1) +' - resuming event propagation ('+ event.getPhase() +')');
22 |         event.resume();
23 |         component.set('v.pausedCmpEvent', null);
24 | 	}
25 | })


--------------------------------------------------------------------------------
/force-app/main/default/aura/eventEmitter/eventEmitter.cmp:
--------------------------------------------------------------------------------
 1 | <aura:component >
 2 | 	<aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventBubble}"/>
 3 |     <aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventCapture}" phase="capture"/>
 4 |     
 5 |     <aura:registerEvent name="cmpEvent" type="c:cmpEvent"/>
 6 |     
 7 |     <aura:attribute name="pausedCmpEvent" type="Object"/>
 8 |     
 9 |     <div style="border:solid 1px blue; color:blue;" class="slds-p-around_medium slds-m-top_medium">
10 |         <div class="slds-text-heading_medium">Emitter</div>
11 |         
12 |         <div class="slds-form slds-form_compound">
13 |             <div class="slds-form-element__group">
14 |                 <div class="slds-form-element__row">
15 |                     <lightning:select name="propagationToggle" aura:id="propagationToggle" label="Event propagation" class="slds-size_1-of-2">
16 |                         <option value="none">Standard behavior</option>
17 |                         <option value="stop-capture">Stop during capture phase</option>
18 |                         <option value="stop-bubble">Stop during bubble phase</option>
19 |                         <option value="pause-capture">Pause during capture phase</option>
20 |                         <option value="pause-bubble">Pause during bubble phase</option>
21 |                     </lightning:select>
22 |                     <div class="slds-form-element slds-size_1-of-2 slds-align-bottom">
23 |                     	<lightning:button label="Resume" onclick="{! c.onResumeCmpEvent }" iconName="utility:right" class="{!empty(v.pausedCmpEvent) ? 'slds-hide' : ''}"/>
24 |                     </div>
25 |                 </div>
26 |             </div>
27 |         </div>
28 |         
29 |         <div class="slds-align_absolute-center">
30 |             <lightning:button label="Fire Component event" onclick="{! c.fireEvent }" iconName="utility:power" variant="brand" class="slds-m-top_medium"/>
31 |         </div>
32 |     </div>
33 | </aura:component>


--------------------------------------------------------------------------------
/force-app/main/default/aura/eventEmitter/eventEmitter.cmp-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>40.0</apiVersion>
4 |     <description>A Lightning Component Bundle</description>
5 | </AuraDefinitionBundle>
6 | 


--------------------------------------------------------------------------------
/force-app/main/default/aura/eventEmitter/eventEmitterController.js:
--------------------------------------------------------------------------------
 1 | ({
 2 |     handleCmpEventBubble : function(component, event, helper) {       
 3 |         helper.handleCmpEvent(component, event);
 4 |     },
 5 |     
 6 |     handleCmpEventCapture : function(component, event, helper) {
 7 |         helper.handleCmpEvent(component, event);
 8 |     },
 9 |     
10 |     onResumeCmpEvent : function(component, event, helper) {
11 |         helper.resumeEvent(component);
12 |     },
13 |     
14 | 	fireEvent : function(component, event, helper) {
15 |         console.log('');
16 |         console.log(component.getName().substr(1) +' - firing event');
17 |         var myEvent = component.getEvent("cmpEvent");
18 |         myEvent.fire();
19 | 	}
20 | })


--------------------------------------------------------------------------------
/force-app/main/default/aura/eventEmitter/eventEmitterHelper.js:
--------------------------------------------------------------------------------
 1 | ({
 2 | 	handleCmpEvent : function(component, event) {
 3 | 		var componentName = component.getName().substr(1); // Removing the 'c' namespace prefix
 4 |         var phase = event.getPhase();
 5 |         console.log(componentName +' - event handled ('+ phase +')');
 6 |         
 7 |         var propagationToggle = component.find('propagationToggle').get('v.value');
 8 |         if (propagationToggle === 'stop-'+ phase) {
 9 |             console.log(componentName +' - stopping event propagation ('+ phase +')');
10 |             event.stopPropagation();
11 |         }
12 |         else if (propagationToggle === 'pause-'+ phase) {
13 |             console.log(componentName +' - pausing event propagation ('+ phase +')');
14 |             event.pause();
15 |             component.set('v.pausedCmpEvent', event);
16 |         }
17 | 	},
18 |     
19 |     resumeEvent : function(component) {
20 |         var event = component.get('v.pausedCmpEvent');
21 |         console.log(component.getName().substr(1) +' - resuming event propagation ('+ event.getPhase() +')');
22 |         event.resume();
23 |         component.set('v.pausedCmpEvent', null);
24 | 	}
25 | })


--------------------------------------------------------------------------------
/force-app/main/default/aura/owner/owner.cmp:
--------------------------------------------------------------------------------
 1 | <aura:component >
 2 |     <aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventBubble}"/>
 3 |     <aura:handler name="cmpEvent" event="c:cmpEvent" action="{!c.handleCmpEventCapture}" phase="capture"/>
 4 |     
 5 |     <aura:attribute name="pausedCmpEvent" type="Object"/>
 6 |     
 7 |     <div style="border:solid 1px red; color:red;" class="slds-p-around_medium slds-m-around_medium">
 8 |         <div class="slds-text-heading_medium">Owner</div>
 9 |         
10 |         <div class="slds-form slds-form_compound">
11 |             <div class="slds-form-element__group">
12 |                 <div class="slds-form-element__row">
13 |                     <lightning:select name="propagationToggle" aura:id="propagationToggle" label="Event propagation" class="slds-size_1-of-2">
14 |                         <option value="none">Standard behavior</option>
15 |                         <option value="stop-capture">Stop during capture phase</option>
16 |                         <option value="stop-bubble">Stop during bubble phase</option>
17 |                         <option value="pause-capture">Pause during capture phase</option>
18 |                         <option value="pause-bubble">Pause during bubble phase</option>
19 |                     </lightning:select>
20 |                     <div class="slds-form-element slds-size_1-of-2 slds-align-bottom">
21 |                     	<lightning:button label="Resume" onclick="{! c.onResumeCmpEvent }" iconName="utility:right" class="{!empty(v.pausedCmpEvent) ? 'slds-hide' : ''}"/>
22 |                     </div>
23 |                 </div>
24 |             </div>
25 |         </div>
26 |         
27 |         <c:container >
28 |             <c:eventEmitter />
29 |         </c:container>
30 |     </div>
31 | </aura:component>


--------------------------------------------------------------------------------
/force-app/main/default/aura/owner/owner.cmp-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 |     <apiVersion>40.0</apiVersion>
4 |     <description>A Lightning Component Bundle</description>
5 | </AuraDefinitionBundle>
6 | 


--------------------------------------------------------------------------------
/force-app/main/default/aura/owner/ownerController.js:
--------------------------------------------------------------------------------
 1 | ({
 2 |     handleCmpEventBubble : function(component, event, helper) {       
 3 |         helper.handleCmpEvent(component, event);
 4 |     },
 5 |     
 6 |     handleCmpEventCapture : function(component, event, helper) {
 7 |         helper.handleCmpEvent(component, event);
 8 |     },
 9 |     
10 |     onResumeCmpEvent : function(component, event, helper) {
11 |         helper.resumeEvent(component);
12 |     }
13 | })


--------------------------------------------------------------------------------
/force-app/main/default/aura/owner/ownerHelper.js:
--------------------------------------------------------------------------------
 1 | ({
 2 | 	handleCmpEvent : function(component, event) {
 3 | 		var componentName = component.getName().substr(1); // Removing the 'c' namespace prefix
 4 |         var phase = event.getPhase();
 5 |         console.log(componentName +' - event handled ('+ phase +')');
 6 |         
 7 |         var propagationToggle = component.find('propagationToggle').get('v.value');
 8 |         if (propagationToggle === 'stop-'+ phase) {
 9 |             console.log(componentName +' - stopping event propagation ('+ phase +')');
10 |             event.stopPropagation();
11 |         }
12 |         else if (propagationToggle === 'pause-'+ phase) {
13 |             console.log(componentName +' - pausing event propagation ('+ phase +')');
14 |             event.pause();
15 |             component.set('v.pausedCmpEvent', event);
16 |         }
17 | 	},
18 |     
19 |     resumeEvent : function(component) {
20 |         var event = component.get('v.pausedCmpEvent');
21 |         console.log(component.getName().substr(1) +' - resuming event propagation ('+ event.getPhase() +')');
22 |         event.resume();
23 |         component.set('v.pausedCmpEvent', null);
24 | 	}
25 | })


--------------------------------------------------------------------------------
/gfx/overview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pozil/sfdc-lightning-component-event-playground/a5abf97e870a08b6e1d6a4b2a11db897b0c42e4f/gfx/overview.gif


--------------------------------------------------------------------------------
/sfdx-project.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "packageDirectories": [
 3 |     {
 4 |       "path": "force-app",
 5 |       "default": true
 6 |     }
 7 |   ],
 8 |   "namespace": "",
 9 |   "sfdcLoginUrl": "https://login.salesforce.com",
10 |   "sourceApiVersion": "41.0"
11 | }
12 | 


--------------------------------------------------------------------------------