We Keep Coding

Vimeo player.js - Can't stop last video triggering on "ended" listener

I have a gallery of images that load a vimeo video into an overlay. That part was very easy!!
The more difficult part:
If a user clicks one of the videos, then the remaining videos should automatically load and autoplay until the last video. I have this (almost) working too, (but I may not be doing it in the best way).
And now the trickiest part for me, and my question:
How can I get the last video to stop, and not trigger the on ended event listener?
Here is a pen on codepen I have been working on:
https://codepen.io/mginter/pen/LvMmjK
I have tried forking the logic several ways. I have also tried using the destroy method and rebuild the iframe method (but I can't get the new iframe to show up and put itself into the vacancy left by the destroy method).
I thought if I wrapped the newPlayer.on('ended', function() {}); in a separate function then I could prevent it from triggering, but NO! This is an event listener and it doesn't matter where it is in the code. I have tried turning off the event listener with the newPlayer.off(); method, but apparently I am doing it wrong.
Does anyone out there have any suggestions?? I have been at this for three days with no luck yet.
// Query All Needed Elements
var overlay = document.querySelector("#videomodal");
var iframePlayer = document.querySelector(".iframe-respwrap");
var videoIframe = document.querySelector(".iframe-respwrap iframe");
var newPlayer = new Vimeo.Player(videoIframe);
// Expose the Source Attribute of the iframe
var iframeSrcAtt = videoIframe.src;
// console.log("Iframe Source: " + iframeSrcAtt);
// Get all of the links
var allItems = document.querySelectorAll('.lightbox a');
console.log(allItems + " - Total (NodeList) Length: " + (allItems.length));
// Get source of Last Item in Array
const finalVideoSrc = allItems[allItems.length-1].children[0].dataset.vidsrc;
// Open/Close overlay
function toggleOverlay(state) { overlay.classList.toggle('video-on'); }
function closeOverlay(e) {
overlay.classList.toggle('video-on');
newPlayer.pause().then(function() {newPlayer.unload();}).catch(function(error) { console.log(error); });
}
overlay.addEventListener('click', closeOverlay, false);
// Get initial clicked item source and number
function clickedItem(e) {
e.preventDefault();
let clickedSource = e.target.dataset.vidsrc;
let clickedNumber = parseInt(e.target.parentNode.dataset.number, 10);
startVidLoop(clickedSource, clickedNumber);
}
// ------------------------------------------
// START HERE!! Add Event listener to each link
var z;
for (z=0; z < allItems.length; z++) {
// console.log(allItems[z].children[0].dataset.vidsrc);
allItems[z].addEventListener('click', clickedItem, false);
allItems[z].addEventListener('click', toggleOverlay, false);
}
function startVidLoop(vidSrc, vidNumber) {
if (vidSrc == finalVideoSrc) {
console.log("Incoming: "+ vidSrc + ", Equals Final Video in List: " + finalVideoSrc);
newPlayer.loadVideo(vidSrc).then(function(src) {console.log("END! " + src); newPlayer.play(src);}).catch(function(error) {console.log(error);});
newPlayer.off();
return;
} else {
let nextNumber = vidNumber + 1;
let comingUp = allItems[nextNumber].children[0].dataset.vidsrc;
console.log("Playing Now: "+vidNumber+" - "+vidSrc); console.log("Coming Up: "+nextNumber+" - "+comingUp);
newPlayer.loadVideo(vidSrc).then(function(src) {playVideo(src,comingUp,nextNumber);}).catch(function(error) {console.log(error);});
}
}
function playVideo(vimeoSource,nextVid,nextNumber) {
console.log("Play: " + vimeoSource + " Next: " + nextVid);
newPlayer.play(vimeoSource);
if (nextVid == finalVideoSrc) {
console.log("Last Video is Next!");
nextVid = finalVideoSrc;
}
newPlayer.on('ended', function go(data) {
startVidLoop(nextVid, nextNumber)
});
}

localStorage clears on refresh, parse & stringify not working

Working on a practice app with localStorage, but the stored data is getting cleared on page refresh. Based on answers to similar questions, I've used JSON.stringify(); on setItem, and JSON.parse(); on getItem, but still no luck. Am I using those methods in the wrong way? For reference, #petType and #petName are input IDs, and #name and #type are ul IDs. Thanks!
var animalArray = [];
var addPet = function(type,name) {
var type = $("#petType").val();
var name = $("#petName").val();
localStorage.setItem("petType", JSON.stringify(type));
localStorage.setItem("petName", JSON.stringify(name));
animalArray.push(type,name);
};
var logPets = function() {
animalArray.forEach( function(element,index) {
//empty array
animalArray.length = 0;
//empty input
$("input").val("");
var storedName = JSON.parse(localStorage.getItem("petName"));
var storedType = JSON.parse(localStorage.getItem("petType"));
//append localStorage values onto ul's
$("#name").append("<li>" + storedName + "</li>");
$("#type").append("<li>" + storedType + "</li>");
});
};
//click listPets button, call logPets function
$("#listPets").on("click", function() {
logPets();
$("#check").html("");
});
//click enter button, call addPet function
$("#enter").on("click", function() {
addPet(petType,petName);
$("#check").append("<i class='fa fa-check' aria-hidden='true'></i>");
});

It appears to clear because you are not loading data from it when the page loads. There are multiple bugs in the code:
It appears that you're only saving the last added pet to localStorage, which would create inconsistent behaviour
Setting animalArray.length to 0 is incorrect
animalArray.push(type, name); is probably not what you want, since it adds 2 items to the array, do something like animalArray.push({type: type, name: name});
logPets can just use the in memory array, since it's identical to the one saved
Fixed code:
var storedArray = localStorage.getItem("animalArray");
var animalArray = [];
if(storedArray) {
animalArray = JSON.parse(storedArray);
}
var addPet = function(type,name) {
var type = $("#petType").val();
var name = $("#petName").val();
animalArray.push({type: type, name: name});
localStorage.setItem("animalArray", JSON.stringify(animalArray));
};
var logPets = function() {
animalArray.forEach( function(element,index) {
//empty input
$("input").val("");
//append localStorage values onto ul's
$("#name").append("<li>" + element.name + "</li>");
$("#type").append("<li>" + element.type + "</li>");
});
};
//click listPets button, call logPets function
$("#listPets").on("click", function() {
logPets();
$("#check").html("");
});
//click enter button, call addPet function
$("#enter").on("click", function() {
addPet(petType,petName);
$("#check").append("<i class='fa fa-check' aria-hidden='true'></i>");
});
A quick fiddle to demo it: https://jsfiddle.net/rhnnvvL0/1/

Transforming old code to ember component

currently i'm starting with Ember, and i'm loving it! I'm with some difficulties, especially when it comes to components.
For you to understand, I'm going through old code to Ember, and I would like to turn this code into a Component, but I do not know actually how to start, since I do not know how to catch the button being clicked, and I also realized that Ember has several helpers, maybe I do not need any of this giant code to do what I want.
This is the old code result: http://codepen.io/anon/pen/WQjobV?editors=110
var eventObj = {};
var eventInstances = {};
var actual;
var others;
var clicked;
var createEventInstance = function (obj) {
for (var key in obj) {
eventInstances[key] = new Event(obj[key]);
}
};
var returnStyle = function (inCommon) {
var $inCommon = inCommon;
$inCommon.css({
width: '342.4px',
minWidth: '342.4px'
});
$inCommon.find('.cta').removeClass('hidden');
$inCommon.find('.event-close').removeClass('inline');
$inCommon.find('.event-info_list').removeClass('inline');
$inCommon.removeClass('hidden');
$inCommon.find('.expanded').slideUp();
$inCommon.find('.expanded').slideUp();
$inCommon.find('.event-arrow').remove();
$inCommon.find('h2').find('ul').remove('ul');
};
var Event = function (id) {
this.id = id;
};
Event.prototype.expandForm = function () {
actual.css('width', '100%');
actual.find('.event-info_list').addClass('inline');
actual.find('.expanded').slideDown().css('display', 'block');
actual.find('.event-close').addClass('inline');
};
Event.prototype.close = function () {
returnStyle(actual);
returnStyle(others);
};
Event.prototype.hideElements = function () {
clicked.addClass('hidden');
others.addClass('hidden');
};
Event.prototype.maskPhone = function () {
$('[name$=phone]').mask('(99) 99999-9999', {
placeholder: '(00) 0000-0000'
});
};
$('.submit-form').on('click', function (e) {
e.preventDefault();
var id = '.' + $(this).data('id');
var name = $(id).children('#person-name').val();
var email = $(id).children('#person-email').val();
var guests = $(id).children('#person-obs.guests').val();
var phone = $(id).children('#person-phone').val();
var participants = $(id).children('#booking-participants').val();
if (name === '' || email === '' || phone === '' || participants === '' || guests === '') {
alert('Preencha os campos obrigatórios.');
} else {
$(id).submit();
}
});
Event.prototype.createDropDown = function () {
actual.find('h2').addClass('event-change')
.append('<span class="event-arrow" aria-hidden="true">▼</span>')
.append(function () {
var self = $(this);
var list = '<ul class="dropdown hidden">';
$('.event').each(function (index) {
if ($(this).find('h2')[0] != self[0]) {
list += '<li data-index="' + index + '">' + $(this).find('h2').text() + '</li>';
}
});
return list;
}).click(function () {
if ($(this).attr('data-expanded') == true) {
$(this).find('ul').toggleClass('hidden');
$(this).attr('data-expanded', false);
} else {
$(this).find('ul').toggleClass('hidden');
$(this).attr('data-expanded', true);
}
}).find('li').click(function (e) {
e.stopPropagation();
actual.find('.event-info_list').removeClass('inline');
actual.find('h2').attr('data-expanded', false);
actual.find('h2').removeClass('event-change');
actual.find('.expanded').slideUp().css('display', 'inline-block');
others.removeClass('hidden');
actual.find('.cta').removeClass('hidden');
actual.find('h2').find('.event-arrow').remove();
actual.find('h2').off('click');
actual.find('h2').find('ul').remove('ul');
$($('.event')[$(this).attr('data-index')]).find('.cta').trigger('click');
});
};
Event.prototype.open = function () {
actual = $('[data-id="' + this.id + '"]');
others = $('.event').not(actual);
clicked = actual.find('.cta');
this.hideElements();
this.expandForm();
this.createDropDown();
this.maskPhone();
};
$('.event').each(function (i, event) {
var prop = 'id' + $(event).data('id');
var value = $(event).data('id');
eventObj[prop] = value;
});
createEventInstance(eventObj);
Basically i have this boxes, which box represent one booking in some event (will be populate by the server). When the user clicks in one box, this boxes expands and the other disappear. But than a dropbox will be created with the other boxes, so the user can navigate in the events by this dropdown.
I didn't do much with Ember, i transform the "events" div into a component with the name "BookingBoxComponent" and two actions:
SiteApp.BookingBoxComponent = Ember.Component.extend({
actions:
open: function() {
// HOW COULD I ACCESS THE CLICKED BUTTON HERE?
},
close: function() {
}
});
As you can see, i put two actions, one for opening the box and other for closing, should i just put the logic in both, or i can improve this like a Ember way?
I don't know if i am asking to much here, so if i am, at least i would like to know how to access the button clicked in the open method, i was trying passing as a parameter, like:
<button {{action 'open' this}}></button>
But didn't work.
I could offer 50 of my points to someone who help transform the old cold in a Ember way code.
Thanks.

The event object will be passed with every action as the last parameter, so when you specified this you were actually passing whatever object has context in that block. In your open function, do not pass this and do
open: function(event) {
// event.currentTarget would be the button
}
And now you can do something like event.currentTarget or event.target

JavaScript local storage for pages

I have here a little script that I found and am using it to create a simple game of sorts...
/*
Here add:
'image_path': ['id_elm1', 'id_elm2']
"id_elm1" is the ID of the tag where the image is initially displayed
"id_elm2" is the ID of the second tag, where the image is moved, when click on the first tag
*/
var obimids = {
'http://www.notreble.com/buzz/wp-content/uploads/2011/12/les-claypool-200x200.jpg': ['lesto', 'les'],
'http://rs902.pbsrc.com/albums/ac223/walkingdeadheartbreaker/Muzak/Guitarists/LarryLalondePrimus.jpg~c200': ['lerto', 'ler'],
'http://www.noise11.com/wp/wp-content/uploads/2014/07/Primus-Alexander-200x200.jpg': ['timto', 'tim']
};
// function executed when click to move the image into the other tag
function whenAddImg() {
/* Here you can add a code to be executed when the images is added in the other tag */
return true;
}
/* From here no need to edit */
// create object that will contain functions to alternate image from a tag to another
var obaImg = new Object();
// http://coursesweb.net/javascript/
// put the image in element with ID from "ide"
obaImg.putImg = function(img, ide, stl) {
if(document.getElementById(ide)) {
document.getElementById(ide).innerHTML = '<img src="'+ img+ '" '+stl+' />';
}
}
// empty the element with ID from "elmid", add image in the other element associated to "img"
obaImg.alternateImg = function(elmid) {
var img = obaImg.storeim[elmid];
var addimg = (elmid == obimids[img][0]) ? obimids[img][1] : obimids[img][0];
$('#'+elmid+ ' img').hide(800, function(){
$('#'+elmid).html('');
obaImg.putImg(img, addimg, 'style="display:none;"');
$('#'+addimg+ ' img').fadeIn(500);
});
// function executed after the image is moved into "addimg"
whenAddImg();
}
obaImg.storeim = {}; // store /associate id_elm: image
// add 'image': 'id_elm1', and 'image': 'id_elm1' in "storeim"
// add the image in the first tag associated to image
// register 'onclick' to each element associated with images in "obimids"
obaImg.regOnclick = function() {
for(var im in obimids) {
obaImg.storeim[obimids[im][0]] = im;
obaImg.storeim[obimids[im][2]] = im;
obaImg.putImg(im, obimids[im][0], '');
document.getElementById(obimids[im][0]).onclick = function(){ obaImg.alternateImg(this.id); };
document.getElementById(obimids[im][3]).onclick = function(){ obaImg.alternateImg(this.id); };
}
}
obaImg.regOnclick(); // to execute regOnclick()
FIDDLE
When clicking the items it adds them to a container where I'd like them to be stored if the user navigates to another page. I have seen some local storage cookie code on another script
FIDDLE
var $chks = $('.compare').change(function () {
console.log('c', this)
if ($(this).is(':checked')) {
var img = $('<img>'),
findimg = $(this).closest('.box').find('img'),
data_term = findimg.data('term');
img.attr('src', findimg.attr('src'));
img.attr('data-term', data_term);
var input = '<input type="hidden" name="imagecompare" value="' + data_term + '">';
$('#area').find('div:empty:first').append(img).append(input);
} else {
var term = $(this).data('term'),
findboximage = $('#area > div > img[data-term=' + term + ']')
findboximage.parent('div').empty();
}
localStorage.setItem("imagecookie", $chks.filter(':checked').map(function () {
return $(this).data('term')
}).get().join(','));
});
$(document).on('click', '#area > div', function () {
$(this).empty();
localStorage.clear();
});
var cookie = localStorage.getItem("imagecookie");
if (cookie) {
var terms = cookie.split(',');
if (terms.length) {
$chks.filter($.map(terms, function (val) {
return '[data-term="' + val + '"]'
}).join()).prop('checked', true).change();
}
}
but can't figure how to apply something similar to this one. I would be grateful for any help or to be pointed to some useful places for help.

Why is some jQuery/javascript code being skipped?

I am currently coding an instant chatbox using jquery which will show the latest chat on top (refreshes when user send data via post request)
and push the oldest chat downward and remove it.
The problem is that if more than one latest chat is retrieved(for example, 2), two new div will be prepended but only one oldest div is removed instead of two...I tried timeout but it didnt work either..
Below are the code snippets I believe which got problem in it.
function showData(currentchatstyle, data, final){
var newchatstyle;
if (currentchatstyle == "chatone") {
newchatstyle = "chattwo";
}
else {
newchatstyle = "chatone";
}
$('div[class^="chat"]:first').before('<div class="' + newchatstyle + '" style="display:none;">' + data + ' </div>');
$('div[class^="chat"]:first').slideDown(500,"swing", function(){
$('div[class^="chat"]').last().fadeOut(500, function() {
$(this).remove();
});
});
return newchatstyle;
}
$('input[name="content"]').keyup(function(key) {
if (key.which==13) {
var author = $('input[name="author"]').val();
var content = $('input[name="content"]').val();
var lastnum = $('postn:first').text();
var chatstyle = $('div[class^="chat"]:first').attr("class");
$.post(
"chatajax.php",
{ "author": author, "content": content, "lastnum": lastnum },
function(data) {
var msg = data.split("|~|");
for (var i = 0; i < msg.length; i++) {
chatstyle = showData(chatstyle, msg[i], true);
}
}
);
}
});
Help will be very much appreciated.

The problem is that you do select also currently-fading-out divs with $('div[class^="chat"]').last(), as you don't remove them immediately but in the animation callback. You for example might immediately remove the chat class so it won't be selected in the next call to showData.
Also, you should only use one class "chat" for a similar divs and for a zebra-style give them independent classes.
var chatstyle = "one";
function showData(data, final){
chatstyle = chatstyle=="one" ? "two" : "one";
var newDiv = $('<div class="chat '+chatstyle+'" style="display:none;">'+data+'</div>');
$('div.chat:first').before(newDiv);
newDiv.slideDown(500, "swing", function(){
$('div.chat:last').removeClass('chat').fadeOut(500, function() {
// ^^^^^^^^^^^^^^^^^^^^
$(this).remove();
});
});
}
function post(data) {
return $.post(
"chatajax.php",
data,
function(data) {
var msg = data.split("|~|");
for (var i = 0; i < msg.length; i++)
showData(msg[i], true); // what's "final"?
}
);
}
$('input[name="content"]').keyup(function(key) {
if (key.which==13)
post({
"author": $('input[name="author"]').val(),
"content": $('input[name="content"]').val(),
"lastnum": $('postn:first').text() // I'm sure this should not be extracted from the DOM
});
});