broncowdd / BoZoN

Minimalist Drag & drop file sharing app (version 2.4 build 15)
Other
285 stars 46 forks source link

Erreur html dans la création d'un arbre de partage #236

Open jerrywham opened 6 years ago

jerrywham commented 6 years ago

Il manque des balises lors d'un partage de dossier de documents. Ce qui fait que la liste a toujours des puces (et ça gratte). Il faudrait modifier la fonction draw_tree et le css associé comme suit : Fichier core/core.php

function draw_tree($tree=null){
        if (!$tree){return false;}
        $first=array_keys($tree);
        $second=$first[1];
        $first=$first[0];
        $image_only=only_type($tree,'.jpg .jpeg .gif .png');
        $sound_only=only_type($tree,'.mp3 .ogg .wav');
        $readme=array_search(dirname($tree[$second]).'/readme.md', array_map('strtolower',$tree));
        if ($readme&&!empty($tree[$readme])&&is_file($tree[$readme])){$readme=file_get_contents($tree[$readme]);}
        if (!$image_only&&!$sound_only){
            # file list tree        
            echo '<section class="tree">';
            $tree=array_map(function($i){return $i.'/';}, $tree);
            natcasesort($tree);
            echo '<h1>'._basename(rtrim($tree[$first], '/\\')).'</h1>'."\n";
            echo '<ul>'."\n";
            unset($tree[$first]);
            if (empty($tree)){return false;}

            $previous_branch=explode('/',$tree[$second]);
            $previous_level=$current_level=count($previous_branch);

            $current_branch = '';

            foreach ($tree as $id=>$branch){
                if (!is_dir($branch)) $branch = rtrim($branch, '/\\');
                if (is_dir($branch)){
                    if ($current_branch != $branch) {
                        if ($current_branch != '') echo '</ul></li>'."\n";
                        $current_branch = $branch;
                    }
                    echo '<li class="folder"><span class="icon-folder-1"></span> '._basename(rtrim($branch, '/\\'))."\n";
                    echo '<ul class="folder_content">'."\n";    
                }elseif (is_file($branch)){
                    $extension=strtolower(pathinfo($branch,PATHINFO_EXTENSION));                    
                    echo '<li><a href="index.php?f='.$id.'"><span class="icon-file '.$extension.'"><em>'.$extension.'</em></span> '._basename($branch).'</a></li>'."\n";
                }
            }

            echo '</ul></ul>'."\n";
            echo '</section>';
            return;
        }elseif($image_only){
            # image gallery
            if (!function_exists('auto_thumb')){include('core/auto_thumb.php');}
            global $gallery_thumbs_width;
            $title=explode('/',$tree[$first]);$title=$title[count($title)-1];unset($tree[$first]);
            echo '<link rel="stylesheet" type="text/css" href="'.THEME_PATH.'/css/gallery.css">';           
            echo '<section><ul class="gallery"><h1>'.$title.'</h1>';
            if (!empty($readme)){echo parse($readme);}

            foreach($tree as $id=>$image){
                if (is_file($image)){
                    $link='index.php?f='.$id;
                    $file=_basename($image);
                    $filesize = sizeconvert(filesize($image));
                    $ext=strtolower(pathinfo($image,PATHINFO_EXTENSION));
                    if ($ext!='mp4'){                   
                        $size = getimagesize($image);
                        $size=$size[0].'x'.$size[1];
                        auto_thumb($image,$width=conf('gallery_thumbs_width'),$height=conf('gallery_thumbs_width'),$add_to_thumb_filename='_THUMBGALLERY_',$crop_image=true);
                        echo '<a class="image" data-type="img" data-group="gallery" href="'.$link.'" ><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="'.$link.'&gthumbs" alt="'.$file.'"/><span class="info"><em>'.$file.'</em> '.$size.' '.$filesize.'</span></a>';

                    }else{
                        $size = sizeconvert(filesize($image));
                        echo '<a class="image video" data-type="" data-group="gallery" href="'.$link.'" ><img class="blank b-lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="  data-src="'.THEME_PATH.'img/video.png"/><span class="info"><em>'.$file.'</em>'.$size.'</span></a>';
                    }
                }
            }
            echo '</ul></section>';
            echo '
            <script src="core/js/blazy.js"></script>
            <script>
                ;(function() {
                    // Initialize
                    var bLazy = new Blazy();
                })();
            </script>';
            return;

        }elseif($sound_only){
            # music player
            $title=explode('/',$tree[$first]);
            $title=$title[count($title)-1];unset($tree[$first]);
            echo '<section class="music_player"><h1>'.$title.'</h1>';
            if (!empty($readme)){echo '<div class="markdown">'.parse($readme).'</div>';}            
            echo '<audio controls  src="index.php?f='.$second.'"></audio>';
            $i=1;
            if (!empty($readme)){$nb=count($tree)-1;}else{$nb=count($tree);}
            if ($nb>1){
                foreach($tree as $id=>$sound){
                    if (is_file($sound)&&strtolower(basename($sound))!='readme.md'){
                        $link='index.php?f='.$id;
                        $file=_basename($sound);
                        $ext=strtolower(pathinfo($sound,PATHINFO_EXTENSION));                           
                        $filename=pathinfo($sound,PATHINFO_FILENAME);
                        $size = sizeconvert(filesize($sound));
                        echo '<li class="sound" data-href="'.$link.'" data-index="'.$i.'"><em>'.$filename.'</em> '.$size.'</li>';
                        $i++;
                    }
                }   
            }
            echo '</section>';
            echo '          
            <script src="core/js/playlist.js"></script>';
            return;
        }
    }

Fichier templates/default/css/share.css

#share {
    /*text-align: center;*/
    width:100%;
}
#share .markdown{background-color: white}
#share section.tree{
    margin-bottom:50px;
    width:100%;
}
#share section{
    font-size:1.3em;
    display:inline-block;
    padding:20px;
    text-align:left;
}
#share section ul{
    margin-left:20px;
    list-style-type: none;
}
#share section li{
    cursor:pointer;
    padding-left:30px;
    background-size: contain;
    /*background-position: 2px center;*/
    background-repeat: no-repeat;
}
#share section ul li{
    list-style-type: none;
}
#share section li a:hover{color:#hover_color_dark;}

#share .folder span.icon-folder-1:after{
    content:"▸";
}
#share .folder.unfolded span.icon-folder-1:after{
    content:"▾";
}
#share .folder{
    padding-top:3px;
    padding-bottom:3px;
    color:rgba(0,0,0,0.5);
    text-shadow:0 0 1px rgba(0,0,0,0.2);
}
#share  .icon-file em{
  font-size:8px;
  color:white;
  position:absolute;
  margin-left: -15px;
  margin-top: 10px;
}
#share .folder_content{
    padding-left:5px;
    border-left:1px solid rgba(0,0,0,0.1);
    display: none;
    margin-left: 40px;
}
#share .folder_content.show{

    display:block;
    transition:all 300ms;
}