return event on second toggle

[REELHERO]

I have a burgermenu with an overlay using toggle to activate the overlay (upper right):

https://pitchlab.net/

I used JS to rotate the burgermenu on toggle... the overlay/menu slides down .but i cant get it it to rotate back to the original position on a second toggle as the overlay/menu clears

my script (what I was trying is in bold):

        <script>

const bento_box_wrapper = document.querySelector('.bento_box_wrapper');

const bento_box = document.querySelectorAll('.bento_box');

bento_box_wrapper.onclick = function() {

const overlayWrapper = document.querySelector('.overlayWrapper');

overlayWrapper.classList.toggle('overlayWrapperSlideDown');

$('.bento_box_wrapper').addClass('blur');

bento_box_wrapper.style.transform = 'rotate(315deg)';

$('div#toggle').addClass('blur');

const mainNavLinksWrapper = document.querySelector('.mainNavLinksWrapper');

mainNavLinksWrapper.classList.toggle('mainNavLinksWrapperSlideUp');

bento_box_wrapper.classList.toggle = 'rotate(45 deg)';

}

[osgood_]

Works fine for me....at least the visa link.......you don't have the other movies linked as yet. What is it you expect to happen?

[REELHERO]

apologies I posted below i figured it out and corrected the regular page https://toddheymandirector.com/

they all work now-

my latest query.. I went for a new look with my pitchdeck site-- i was able to create a new type of burger menu upper left in css and return it to an "X" using  a checkbox that i visual hid- but for some reason the checked class is preventing the overlay menu items from appearing 

the test : https://pitchlab.net/checked_test.html

and the way it should work (without "checked"): https://pitchlab.net/

not sure why that css would prevent the overlay from working

ill post this in a new post so it doesnt get lost here

[REELHERO]

I figured it out - i had created a border correction div bc the body class was skewing the border for some reason..instead of figuring that out i just overlayed! a border to correct it.. Ive corrected the body class and removed the lazy correction i did and voila:

https://toddheymandirector.com/index_test.html

[REELHERO]

still havent figured out the link structure for the main page (below- I show what I was trying but its not working) but I did figure out the play/pause issue..

hit any thumbnail

https://toddheymandirector.com/reel/

it now autplays with PAUSE present when its playing on initial load.. (PLAY was present when it was playing and you had to hit it twice to correct)

in the script  the .vjs-control-bar inside #controls-overlay had a click event to toggle play/pause. But it did not set the initial state to "playing". I set #controls-overlay to "vjs-playing" so the pause button is visible when the video starts and added event listeners for play and pause to dynamically toggle the play/pause button

[REELHERO]

Last question for now 🙂

 if I wanted to add links to the videos on this page: https://toddheymandirector.com/ so that they can go to the film page ie

 adding http://toddheymandirector.com/reel/movies/match to

name: 'match.mp4',
title: '<span class="dotted">the match</span>',
director: '<span class="cross">+</span>step up and shine<span class="cross">+</span>',
agency: 'Agency <span class="dot">&bull;</span> Publicis'
},

how would i do that since it JS?

[L e n a]

I initially wanted it to rotate clockwise 45 degrees on the second toggle- so that it appeared to return to its original state yet all rotations would be clockwise - but this works..

By @REELHERO

I'm glad this helped, in fact I was just applying the same logic you were already using for the other elements...

As for the visual animation of the icon, personally, I will simply set the .rotated class to 180°

.bento_box_wrapper.rotated {
    transform: rotate(180deg);
}

Letting the animation run in a clockwise direction, and on the second click return to its place using an anti-clockwise direction, which seems more natural to me.

[REELHERO]

thank you Lena - very helpful! if you have any thoughts about the pause/play button issue I mention above Id be grateful! 

[L e n a]

thank you Lena - very helpful! if you have any thoughts about the pause/play button issue I mention above Id be grateful! 

By @REELHERO

In fact, I did not understand your problem very well. Could you please explain it to me step by step so that I can reproduce it?

[REELHERO]

sure !

I have an embedded movie player here:

https://toddheymandirector.com/reel/movies/visa/

when the movie begins to play, the 'PLAY' button is present.. it should be the PAUSE button. If you hit the play button twice it corrects and the PAUSE is present when playing and PLAY is present when the movie is paused.

So its not as if the CSS for both buttons is incorrect. 

I imagine its somewhere in the API?

https://toddheymandirector.com/js/video3.js

or the script on the player page?

var movieElement = document.getElementById('movieElement');

$("#movie").addClass("initializing");
videojs(movieElement, { "autoplay": true, "controls": true, "preload": "auto" }, function() {

this.on("loadedmetadata", function() {

$("#movie").addClass("initialLoad");
setTimeout(function () { $("#movie").removeClass("initialLoad"); }, 3000);

$("#controls-overlay")
.append($(".vjs-control-bar"))
.on("click", function() {
if ($(this).is(".vjs-paused")) {
movieElement.player.play();
$(this).removeClass("vjs-paused").addClass("vjs-playing");
}
else {
movieElement.player.pause();
$(this).removeClass("vjs-playing").addClass("vjs-paused");
}
});

$("#movie").removeClass("initializing");
});
});

$(function() {
var video = $("video");
video.on("ended", function() {
var href = $(".next-project2").attr("href");
window.location = href;
});
});