Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Button Component JS Demo in Pattern Lab #933

Merged
merged 1 commit into from
Nov 7, 2018
Merged

Update Button Component JS Demo in Pattern Lab #933

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 29 additions & 26 deletions apps/pattern-lab/src/_patterns/02-components/button/60-button-with-3rd-party-js.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,38 +16,41 @@

<script>
// Fired every time the custom element has rendered.
var element = document.querySelector('.js-button-theme-xdark');
var setupHasAlreadyRun = false;
var elementBeingTargeted = 'button';
var selector;

if (element._wasInitiallyRendered === true){
setupEventListener(false);
} else {
element.addEventListener('rendered', setupEventListener);
}

function setupEventListener(removeEventListener = true){
if (element.useShadow){
selector = element.shadowRoot.querySelector(elementBeingTargeted);
var buttonElement = document.querySelector('.js-button-theme-xdark');
var buttonEventAdded = false;
var alreadyExistingButtonEvent = false;
var clickEventAdded = false;
var innerButtonElement;

if (buttonElement._wasInitiallyRendered === true){
if (innerButtonElement && alreadyExistingButtonEvent){
console.log('was already rendered but an event already exists so using that.');
} else {
selector = element.querySelector(elementBeingTargeted);
}

ready();

if (removeEventListener){
element.removeEventListener('rendered', setupEventListener, true);
alreadyExistingButtonEvent = true;
console.log('The button has already been rendered BUT the initially targeted element does not currently exist (likely due to the component re-rendering). Removing old event listener + re-adding an event listener to account for that.');
buttonElement.removeEventListener('rendered', setupButtonClickEvent, false);
buttonElement.addEventListener('rendered', setupButtonClickEvent, true);
}
} else {
console.log('waiting for button to be initially rendered');
alreadyExistingButtonEvent = true;
buttonElement.addEventListener('rendered', setupButtonClickEvent);
}

function ready(){
if (setupHasAlreadyRun){
selector.removeEventListener('click', buttonClicked, true);
function setupButtonClickEvent(){
console.log('handle button click event');
innerButtonElement = buttonElement.renderRoot.querySelector('button');

if (clickEventAdded === true){
clickEventAdded = false;
console.log('button click event already added -- removing old click event');
innerButtonElement.removeEventListener('click', buttonClicked, true);
} else {
setupHasAlreadyRun = true;
console.log('button click event not yet added -- no need to remove old click event.');
}
selector.addEventListener('click', buttonClicked);

clickEventAdded = true;
innerButtonElement.addEventListener('click', buttonClicked, true);
}

function buttonClicked(){
Expand Down