https://github.com/foxysolutions/LWC-Style-Distributor

Style Distributor Component for Salesforce, where Sibling Event Structures are applied (PubSub and Lightning Messaging Service).
https://github.com/foxysolutions/LWC-Style-Distributor

css-variables events lightning-messaging-service lightning-web-components lwc pubsub salesforce style-distributor

Last synced: about 2 months ago
JSON representation

Style Distributor Component for Salesforce, where Sibling Event Structures are applied (PubSub and Lightning Messaging Service).

• Host: GitHub
• URL: https://github.com/foxysolutions/LWC-Style-Distributor
• Owner: foxysolutions
• Created: 2020-05-24T10:50:56.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-05-24T16:44:24.000Z (over 4 years ago)
• Last Synced: 2024-08-01T12:11:07.433Z (5 months ago)
• Topics: css-variables, events, lightning-messaging-service, lightning-web-components, lwc, pubsub, salesforce, style-distributor
• Language: JavaScript
• Homepage: https://www.foxy-solutions.com/salesforce/style-distributor-pubsub-messaging-service/
• Size: 132 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-lwc - LWC Style Distributor

README

        
# LWC Style Distributor

Style Distributor Lightning Web Component for Salesforce.

On style change either/both a PubSub-event and/or Lightning-Message are published, for sibling components to listen to.

The component has been developed out of personal interest and learning and can be used without any cost,

as long as the original source is referenced.

Demo:  http://lab.foxy-solutions.com/style-distributor 

## Included techniques

- CSS Variables (incl. Javascript get and set)

- Pub Sub (incl. minor library extensions)

- Lightning Messaging Service

- Lightning Web Components

- Aura Component

## How to apply

### Pre-requisites

- Salesforce Org with MyDomain enabled (required for Lightning Components)

### How to set-up

1) Retrieve this GIT Repository locally

2) Deploy the full folder structure to your own Salesforce Org

3) Grant your profile access to the StyleDistributor Tab (Default On)

4) Visit the StyleDistributor Tab

## Screenshots

Style Distributor within Salesforce Lightning Experience - initial page load

![Initial screen](screenshots/StyleDistributor-InitialLoad.png)

Style Distributor within Salesforce Lightning Experience - Example changes

[_Changed color and font-size slider range (due to font-unit change); list of retrieved messages_]

![Events Example](screenshots/StyleDistributor-ExampleEvents.png)

Style Distributor Input parameters

![Input Configuration](screenshots/StyleDistributor-ConfigurableInput.png)