elias/vdo.ninja
1
0
Fork 0
mirror of https://github.com/eliasstepanik/vdo.ninja.git synced 2026-01-11 21:58:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update animations.js

Browse Source
This commit is contained in:
Steve Seguin 2021-01-27 10:07:46 -05:00 committed by GitHub
parent 5b86a4f906
commit 4618426724
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 62 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
animations.js
View File

@ -1,33 +1,37 @@
$("body").append('<style id="lightbox-animations" type="text/css"></style>');
$(".column").on('click', function() {
if ( $(this).hasClass( "skip-animation" )){
if ($(this).hasClass("skip-animation")){
return;
}
var bounding_box = $(this).get(0).getBoundingClientRect();
$(this).css({ top: bounding_box.top + 'px', left: bounding_box.left -20+ 'px' });
const bounding_box = $(this).get(0).getBoundingClientRect();
$(this).css({ top: `${bounding_box.top}px`, left: `${bounding_box.left - 20}px` });
$(this).addClass('in-animation').removeClass('pointer');
$("#empty-container").remove();
$('<div id="empty-container" class="column"></div>').insertAfter(this);
const styles = `
@keyframes outlightbox {
0% {
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
var styles = '';
styles = '@keyframes outlightbox {';
styles += '0% {';
styles += 'height: 100%;';
styles += 'width: 100%;';
styles += 'top: 0px;';
styles += 'left: 0px;';
styles += '}';
styles += '50% {';
styles += 'height: 200px;';
styles += 'top: ' + bounding_box.y + 'px;';
styles += '}';
styles += '100% {';
styles += 'height: 200px;';
styles += 'width: '+bounding_box.width+'px;';
styles += 'top: ' + bounding_box.y + 'px;';
styles += 'left: ' + bounding_box.x + 'px;';
styles += '}';
styles += '}';
50% {
height: 200px;
top: ${bounding_box.y}px;
}
100% {
height: 200px;
width: ${bounding_box.width}px;
top: ${bounding_box.y}px;
left: ${bounding_box.x}px;
}
}
`;
$("#lightbox-animations").empty();
$("#lightbox-animations").get(0).sheet.insertRule(styles, 0);
@ -38,19 +42,20 @@ $(".close").on('click', function(e) {
$(this).hide();
$(".container-inner").hide();
$("body").css('overflow', 'auto');
var bounding_box = $(this).parent().get(0).getBoundingClientRect();
$(this).parent().css({ top: bounding_box.top + 'px', left: bounding_box.left + 'px' });
const bounding_box = $(this).parent().get(0).getBoundingClientRect();
$(this).parent().css({ top: `${bounding_box.top}px`, left: `${bounding_box.left}px` });
$(this).parent().addClass('out-animation');
cleanupMediaTracks();
e.stopPropagation();
});
$(".column").on('animationend', function(e){
if (e.originalEvent.animationName == 'inlightbox') {
if (e.originalEvent.animationName === 'inlightbox') {
$(this).children(".close").show();
$(this).children(".container-inner").show();
}
else if (e.originalEvent.animationName == 'outlightbox') {
else if (e.originalEvent.animationName === 'outlightbox') {
$(this).removeClass('in-animation').removeClass('out-animation').removeClass('columnfade').addClass('pointer');
$("#empty-container").remove();
$("#lightbox-animations").get(0).sheet.deleteRule(0);
@ -58,64 +63,64 @@ $(".column").on('animationend', function(e){
});
$('#audioSource').on('mousedown touchend focusin focusout', function(e) {
var state = $('#multiselect-trigger').data('state') || 0;
if( state == 0 ) {
$('#multiselect-trigger').data('state', '1').addClass('open').removeClass('closed');
$('#multiselect-trigger').find('.chevron').removeClass('bottom');
$('#multiselect-trigger').parent().find('.multiselect-contents').show();
$('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();;
$('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();;
}
$('#audioSource').on('mousedown touchend focusin focusout', (_e) => {
const state = $('#multiselect-trigger').data('state') || 0;
if (state === 0) {
$('#multiselect-trigger').data('state', '1').addClass('open').removeClass('closed');
$('#multiselect-trigger').find('.chevron').removeClass('bottom');
$('#multiselect-trigger').parent().find('.multiselect-contents').show();
$('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();
$('#multiselect-trigger').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();
}
});
$('#audioSource3').on('mousedown touchend focusin focusout', function(e) {
var state = $('#multiselect-trigger3').attr('data-state') || 0;
if( state == 0 ) {
$('#multiselect-trigger3').attr('data-state', '1').addClass('open').removeClass('closed');
$('#multiselect-trigger3').find('.chevron').removeClass('bottom');
$('#multiselect-trigger3').parent().find('.multiselect-contents').show();
$('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();;
$('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();;
}
$('#audioSource3').on('mousedown touchend focusin focusout', (_e) => {
const state = $('#multiselect-trigger3').attr('data-state') || 0;
if (state === 0) {
$('#multiselect-trigger3').attr('data-state', '1').addClass('open').removeClass('closed');
$('#multiselect-trigger3').find('.chevron').removeClass('bottom');
$('#multiselect-trigger3').parent().find('.multiselect-contents').show();
$('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();
$('#multiselect-trigger3').parent().find('.multiselect-contents').find('input[type="checkbox"]').show();
}
});
$('#multiselect-trigger').on('mousedown touchend focusin focusout', function(e) {
var state = $(this).data('state') || 0;
if( state == 0 ) {
const state = $(this).data('state') || 0;
if( state === 0 ) {
// open the dropdown
$(this).data('state', '1').addClass('open').removeClass('closed');
$(this).find('.chevron').removeClass('bottom');
$(this).parent().find('.multiselect-contents').show();
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();;
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();;
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();
} else {
// close the dropdown
$(this).data('state', '0').addClass('closed').removeClass('open');
$(this).find('.chevron').addClass('bottom');
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();;
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();;
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();
}
e.preventDefault();
});
// multiselect dropdowns
$('#multiselect-trigger3').on('mousedown touchend focusin focusout', function(e) {
var state = $(this).attr('data-state') || 0;
const state = $(this).attr('data-state') || 0;
if( state == 0 ) {
if(state === 0) {
// open the dropdown
errorlog("STATE: "+state);
errorlog(`STATE: ${state}`);
$(this).attr('data-state', '1').addClass('open').removeClass('closed');
$(this).find('.chevron').removeClass('bottom');
$(this).parent().find('.multiselect-contents').show();
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();;
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();;
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').parent().show();
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').show();
} else {
// close the dropdown
$(this).attr('data-state', '0').addClass('closed').removeClass('open');
$(this).find('.chevron').addClass('bottom');
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();;
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();;
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').not(":checked").parent().hide();
$(this).parent().find('.multiselect-contents').find('input[type="checkbox"]').hide();
}
e.preventDefault();
});