asset-manager-picker.php
6 months ago
asset-manager-ui.php
1 week ago
dir-viewer.php
9 months ago
embed-asset.php
5 years ago
dir-viewer.php
88 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Base: wpdmpro |
| 4 | * Developer: shahjada |
| 5 | * Team: W3 Eden |
| 6 | * Date: 2019-08-30 12:11 |
| 7 | */ |
| 8 | |
| 9 | if(!defined("ABSPATH")) die(); |
| 10 | global $flatList; |
| 11 | $flatList = []; |
| 12 | function __print_items($items, $level = 0){ |
| 13 | global $flatList; |
| 14 | foreach ($items as $index => $node) { |
| 15 | $flatList[$index] = $node; |
| 16 | if($node['type'] === 'dir') { |
| 17 | $file = esc_attr(basename($node['path'])); |
| 18 | echo "<li class='tree-item level-{$level}' data-index='{$index}'>{$file}"; |
| 19 | if (count($node['items']) > 0) { |
| 20 | echo "<ul>"; |
| 21 | __print_items($node['items'], $level+1); |
| 22 | echo "</ul>"; |
| 23 | } |
| 24 | echo "</li>"; |
| 25 | } |
| 26 | } |
| 27 | } |
| 28 | |
| 29 | ?> |
| 30 | |
| 31 | <style> |
| 32 | .__wpdm_asset_tree ul{ |
| 33 | margin-left: 0px; |
| 34 | padding-left: 0; |
| 35 | } |
| 36 | .__wpdm_asset_tree li{ |
| 37 | list-style: none; |
| 38 | background: url("<?php echo WPDM_BASE_URL; ?>assets/images/folder.svg") left 4px no-repeat; |
| 39 | background-size: 12px; |
| 40 | padding-left: 18px; |
| 41 | margin-left: 0; |
| 42 | font-size: 12px; |
| 43 | line-height:20px; |
| 44 | cursor: pointer; |
| 45 | } |
| 46 | .container{ |
| 47 | display: flex; |
| 48 | } |
| 49 | .container .sidebar{ |
| 50 | width: 25%; |
| 51 | } |
| 52 | .container .content{ |
| 53 | width: 75%; |
| 54 | } |
| 55 | </style> |
| 56 | |
| 57 | <div class="container"> |
| 58 | <div class="sidebar"> |
| 59 | <ul class="__wpdm_asset_tree"> |
| 60 | <?php __print_items($dirTree); ?> |
| 61 | </ul> |
| 62 | </div> |
| 63 | <div class="content" id="dircontent"> |
| 64 | <div v-for="file in files"> |
| 65 | <div class="file-item">{{ file.name }}</div> |
| 66 | </div> |
| 67 | </div> |
| 68 | </div> |
| 69 | <script src="<?php echo WPDM_BASE_URL ?>assets/js/vue.min.js"></script> |
| 70 | <script> |
| 71 | var dirviewer = Vue.createApp({ |
| 72 | data() { |
| 73 | return { |
| 74 | files: [] |
| 75 | }; |
| 76 | } |
| 77 | }).mount('#dircontent'); |
| 78 | |
| 79 | var assets = <?php echo json_encode($flatList); ?>; |
| 80 | jQuery(function ($) { |
| 81 | $('.tree-item').on('click', function () { |
| 82 | var asset = assets[$(this).data('index')]; |
| 83 | console.log(asset.items); |
| 84 | dirviewer.files = asset.items; |
| 85 | }); |
| 86 | }); |
| 87 | </script> |
| 88 |