css Espacedetéléchargementdefichier

Posted 2021-05-13

<div id="folders">
	
	<div id="explorer">
		<ul>
		<?php
			$racine = 0; // A modifier s'il ne faut pas afficher toutes les catégories de média
			
			wp_list_categories( array(
				'taxonomy' => 'media_category',
				'title_li' => '<a href="#">Accueil</a>',
				'show_count' => true,
				'child_of' => $racine
			) );
		?>
		</ul>
	</div>

	<div id="filelist">
		<?php

			$terms = get_terms( array(
				'taxonomy' => 'media_category',
				'parent' => $racine
			) );

			foreach($terms as $term) { ?>

		<div class="parent">
			<a href="#" data-id="<?= $term->term_id; ?>"><img class="folder" src="<?= get_template_directory_uri(); ?>/img/folder.png"><?= $term->name ?></a>
		</div>

		<?php
		 } ?>

		<div class="espace-prive-content">
			<?php get_media($racine); ?>
		</div>
	</div>

</div> 

var request;

$(document).on('click', '.parent a, #back-folder, #explorer a', function(e) {
	console.log('Click');
	e.preventDefault();

	if (request) {
		request.abort();
	}
	
	if($(this).parent().hasClass('cat-item')) {
		var termId = parseInt($(this).parent().attr('class').replace(/\D/g, ''));
	} else if($(this).parent().hasClass('media_category')) {
		var termId = <?= $racine ?>;
	} else {
		var termId = $(this).attr('data-id');
	}
	
	var racine = <?= $racine ?>;

	request = $.post('<?= get_template_directory_uri(); ?>/ajax-folder.php', {termId: termId, racine: racine}, function(r) {
		console.log('Response: ' + r);
		$('#folders').html(r);
	});

	request.fail(function (jqXHR, textStatus, errorThrown){
		console.error(
			'The following error occurred: ' +
			textStatus, errorThrown
		);
	});
});

<?php
	$path = $_SERVER['DOCUMENT_ROOT'];
	
	include_once $path . '/wp-config.php';
	include_once $path . '/wp-load.php';
	include_once $path . '/wp-includes/wp-db.php';
	include_once $path . '/wp-includes/pluggable.php';
	
	if(isset($_POST['termId'])) {
        
    $terms = get_terms( array(
        'taxonomy' => 'media_category',
        'parent' => $_POST['termId']
    ) );
    
    if($_POST['termId'] != $_POST['racine']) {
        $termParent = get_term($_POST['termId'], 'media_category')->parent;
        $name = $term->name;
        echo '<a href="#" id="back-folder" data-id="'.$termParent.'">Retour</a>';
    } ?>
    
    <div id="explorer">
        <ul>
        <?php
            wp_list_categories( array(
                'taxonomy' => 'media_category',
                'title_li' => '<a href="#">Accueil</a>',
                'show_count' => true,
                'current_category' => $_POST['termId'],
			          'child_of' => $_POST['racine']
            ) );
        ?>
        </ul>
    </div>
    
    <div id="filelist">
    
        <?php foreach($terms as $term) { ?>

            <div class="parent">
                <a href="#" data-id="<?= $term->term_id; ?>"><img class="folder" src="<?= get_template_directory_uri(); ?>/img/folder.png"><?= $term->name ?></a>
            </div>

            <?php
        } ?>

        <div class="espace-prive-content">
            <?php get_media($_POST['termId']); ?>
        </div>
    </div>
		
<?php } ?>

<?php
/**
 * Espace privé - media
 */
 
function get_media($terms){
	$args = array( 
		'numberposts' 		=> -1, 
		'post_status' 		=> null, 
		'order' 			=> 'DESC', 
		'orderby'			=> $date, 
		'post_type' 		=> 'attachment',
		'tax_query' 		=> array(
			array(
			  'taxonomy' 			=> 'media_category',
			  'field' 				=> 'ID',
			  'terms' 				=> $terms,
			  'include_children' 	=> false,
			)
		)
	);
	
	$medias = get_posts( $args );
	
	foreach($medias as $media){
		global $post;

		$post = $media;

		setup_postdata( $post );
		
		$post_permalink = get_attachment_link($post->ID);
		$post_permalink_file = wp_get_attachment_url($post->ID);é
	?>
		<div><a href="<?php echo $post_permalink_file; ?>" target="_blank"><img class="folder" src="<?php bloginfo('stylesheet_directory'); ?>/img/file.png"><?php echo $post->post_title; ?></a></div>
	<?php
		wp_reset_postdata();
	
	}
}
?>

#folders {
	display: flex;
	flex-flow: row nowrap;
	justify-content: left;
	align-items: start;
	width: 100%;
	position: relative;
}

#back-folder {
	position: absolute;
	text-decoration: none;
	top: -45px;
	right: 1%;
	color: #b30001;
	border: 1px solid #b30001;
	border-radius: 2px;
	padding: 8px 10px;
	transition: all 400ms ease-in-out;
}

#back-folder:hover {
	background-color: rgba(185,185,185,0.1);
}

#explorer {
	width: 25%;
	background-color: rgba(185,185,185,0.1);
	border-right: solid 2px #014489;
	margin-right: 28px;
	padding-bottom: 30px;
}

#explorer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#explorer .media_category {
	padding: 15px 5px;
}

#explorer .media_category > a {
	padding: 5px 10px;
	font-weight: bold;
}

#explorer a {
	color: #014489;
	text-decoration: none;
}

#explorer a:hover {
	text-decoration: underline;
}

#explorer .cat-item {
	padding: 8px 10px 8px 20px;
}

#explorer .cat-item {
	padding: 8px 10px 8px 20px;
}

#explorer .children .cat-item {
	padding: 5px 10px 5px 20px;
}

#explorer .children {
	display: none;
	border-left: 2px solid #dcdcdc;
	margin: 10px 0;
}

#explorer .current-cat > a {
	font-weight: bold;
}

#explorer .current-cat > .children, #explorer .current-cat-ancestor > .children {
	display: block;
}

#filelist, #filelist .espace-prive-content {
	width: 75%;
	display: flex;
	flex-flow: row wrap;
	justify-content: left;
	padding-bottom: 30px;
}


#filelist .espace-prive-content {
    width: 100%;
	padding-bottom: 0;
}

#filelist .parent, #filelist .espace-prive-content > div {
	background-color: #014489;
	margin: 1%;
	width: 31.3%;
	height: 100px;
	box-sizing: border-box;
	border-bottom: 4px solid #0b3561;
	transition: all 400ms ease-in-out;
	border-radius: 2px;
}

#filelist .espace-prive-content > div {
	border: 1px solid #0b3561;
	background: transparent;
}

#filelist .parent:hover {
	border-bottom: 0px solid #0b3561;
}

#filelist .espace-prive-content > div:hover {
	background-color: rgba(185,185,185,0.1);
}

#filelist .parent a, #filelist .espace-prive-content > div a {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 50px 10px 10px;
	position: relative;
	text-decoration: none;
	color: white;
	overflow: hidden;
}

#filelist .espace-prive-content > div a {
	color: #014489;
}

#filelist .parent img, #filelist .espace-prive-content > div img {
	position: absolute;
	transform: translateX(-50%);
	left: 50%;
	top: 16px;
}

@media screen and (max-width: 700px) {
	#folders {
		flex-flow: column;
	}
	
	#explorer, #filelist {
		width: 100%;
	}
	
	#explorer {
		margin-bottom: 30px;
	}
	
	#filelist .parent, #filelist .espace-prive-content > div {
		width: 48%;
		height: 140px;
	}
}