Having trouble getting expected behavior from click event in module pattern - events

Question

So I do not have a lot of experiencing working on event handlers within the JavaScript module pattern.
There is this implementation that does what it is supposed to do:
//= require templates/modules/dvic_card_gallery
//=require templates/modals/dvic_modal_card_gallery
(function(exports) {
'use strict';
var Grill = exports.Grill,
Whiskers = exports.Whiskers,
$ = exports.$;
// itialize the modal gallery's initial card to the sorcerer
var selectedCardInstantCredit = 'card-sorcerer';
var ModalCardGallery = Grill.ModuleView.extend({
style_classes: ['modal_card_gallery'],
template: Whiskers.modules.dvic_card_gallery,
initialize: function() {
exports.console.log('The Card Gallery module is initialized');
},
events: {
'click .view-full-gallery': 'onClickLink',
'click .sp-thumbnail': 'onClickThumbnail',
'click .sp-forward': 'onClickForwardChevron',
'click .sp-backward': 'onClickBackwardChevron'
},
onClickLink: function(e) {
e.preventDefault();
var modalConfig = {
template: Whiskers.modals.dvic_modal_card_gallery,
name: 'full-gallery',
ctx_additions: this.ctx_additions(),
linkEl: [e.target]
};
if (this.modal === undefined) {
this.modal = new Grill.FullGalleryModalView(modalConfig);
this.modal.show();
} else {
// if the modal has already been created and closed, reopen it
this.modal.show();
}
},
onClickThumbnail: function(e) {
e.preventDefault();
this.$clickedEl = $(e.currentTarget);
// Tells us what card was clicked.
var clickedCard = this.$clickedEl.data("action").trim();
selectedCardInstantCredit = clickedCard;
// Hide all , then show what was clicked.
$(".sp-slides .sp-slide").hide();
$(".sp-slides .sp-slide." + clickedCard).show();
},
onClickForwardChevron: function(e) {
e.preventDefault();
galleryButtonClick(selectedCardInstantCredit, "forward");
},
onClickBackwardChevron: function(e) {
e.preventDefault();
galleryButtonClick(selectedCardInstantCredit, "backward");
},
render: function() {
this.$el.html(this.template.render(this.model));
}
});
//==========================
// Helpers
//==========================
var galleryButtonClick = function (cardName, direction) {
// this array must match the card order in the template
var cardsArray = [
'card-sorcerer',
'card-th',
'card-frozen',
'card-yoda',
'card-pixie',
'card-bb8',
'card-tinker',
'card-spotlight',
'card-pals',
'card-vader'
];
var index = cardsArray.indexOf(cardName);
$('.sp-slides .sp-slide').hide();
// get the card to show
if (direction === 'forward' && index === cardsArray.length -1) {
selectedCardInstantCredit = cardsArray[0];
$('.thumbnail-container').css("left", "150%");
} else if (direction === 'forward') {
selectedCardInstantCredit = cardsArray[index + 1];
} else if (direction === 'backward' && index === 0) {
selectedCardInstantCredit = cardsArray[cardsArray.length - 1];
} else if (direction === 'backward') {
selectedCardInstantCredit = cardsArray[index - 1];
}
$('.sp-slides .sp-slide.' + selectedCardInstantCredit).show();
};
ModalCardGallery.register('dvic_card_gallery', {});
})(this);
but I am trying to console log here:
onClickForwardChevron: function(e) {
e.preventDefault();
exports.console.log('is this working?');
galleryButtonClick(selectedCardInstantCredit, "forward");
},
but I don't get the message logged to console. So I am not sure now how to test this event so I can start adding an implementation I have been wanting to add.
I have also tried by adding an event in the if conditional in the helper section of this file:
if (direction === 'forward' && index === cardsArray.length -1) {
selectedCardInstantCredit = cardsArray[0];
$('.thumbnail-container').css("left", "150%");
This is not working but the idea is to get the thumbnail container as a whole to move left as the user keeps clicking the chevron forward.
Here is the html file:
<button class="sp-backward"></button>
<div class="sp-slides">
<div class="sp-slide card-sorcerer"><div role="img" aria-label="The Sorcerer Mickey card" class="card-image"></div><div class="card-title" aria-hidden="true">Sorcerer Mickey</div></div>
<div class="sp-slide card-th"><div role="img" aria-label="The Diamond Celebration (2015-2016) card" class="card-image"></div><div class="card-title" aria-hidden="true">Diamond Celebration<br/>(2015-2016)</div></div>
<div class="sp-slide card-frozen"><div role="img" aria-label="The Frozen card" class="card-image"></div><div class="card-title" aria-hidden="true">Frozen</div></div>
<div class="sp-slide card-yoda"><div role="img" aria-label="The Yoda card" class="card-image"></div><div class="card-title" aria-hidden="true">Yoda</div></div>
<div class="sp-slide card-pixie"><div role="img" aria-label="The Pixie Dust card" class="card-image"></div><div class="card-title" aria-hidden="true">Pixie Dust</div></div>
<div class="sp-slide card-bb8"><div role="img" aria-label="The BB-8 card" class="card-image"></div><div class="card-title" aria-hidden="true">BB-8</div></div>
<div class="sp-slide card-tinker"><div role="img" aria-label="The Tink card" class="card-image"></div><div class="card-title" aria-hidden="true">Tink</div></div>
<div class="sp-slide card-spotlight"><div role="img" aria-label="The Spotlight card" class="card-image"></div><div class="card-title" aria-hidden="true">Spotlight</div></div>
<div class="sp-slide card-pals"><div role="img" aria-label="The Mickey and Pals card" class="card-image"></div><div class="card-title" aria-hidden="true">Mickey & Pals</div></div>
<div class="sp-slide card-vader"><div role="img" aria-label="The Darth Vader card" class="card-image"></div><div class="card-title" aria-hidden="true">Darth Vader</div></div>
</div>
<button class="sp-forward"/></button>
</div>
<div class="thumbnail-container">
<button class="sp-thumbnail sorcerer ada-el-focus" data-action="card-sorcerer" title="View the Sorcerer Mickey card"></button>
<button class="sp-thumbnail th ada-el-focus" data-action="card-th" title="View the Diamond Celebration card" id="box1"></button>
<button class="sp-thumbnail frozen ada-el-focus" data-action="card-frozen" title="View the Frozen card" id="box2"></button>
<button class="sp-thumbnail yoda ada-el-focus" data-action="card-yoda" title="View the Yoda card" id="box3"></button>
<button class="sp-thumbnail pixie ada-el-focus" data-action="card-pixie" title="View the Pixie Dust card"></button>
<button class="sp-thumbnail bb8 ada-el-focus" data-action="card-bb8" title="View the BB-8 card"></button>
<button class="sp-thumbnail tinker ada-el-focus" data-action="card-tinker" title="View the Tink card"></button>
<button class="sp-thumbnail spotlight ada-el-focus" data-action="card-spotlight" title="View the Spotlight card"></button>
<button class="sp-thumbnail pals ada-el-focus" data-action="card-pals" title="View the Mickey and Pals card"></button>
<button class="sp-thumbnail vader ada-el-focus" data-action="card-vader" title="View the Darth Vader card"></button>
</div>
</div>

Answer 1

Its scope, so in your code you reference both modal views and then ModuleView. This looks like Backbone and I had the same issue. Not sure your level of experience with, but if you have a modal that opens then you want to have both this: var ModalCardGallery = Grill.ModuleView.extend for the module page and then this: var ModalCardGallery = Grill.ModalView.extend for the modal view as some of your events are in module view and others in modal view. Speaking of which, separate those events out as well.