API tools faq
paste
Guest User

vue

a guest
Feb 19th, 2021
211
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 75.36 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="x-ua-compatible" content="ie=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <meta name="csrf-token" content="7F6YWCJ1DunHcbDgmKBnQWihnXnDod8FxQ3gQBjR">
  9.     <title>Media Manager</title>
  10.  
  11.    
  12.     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  13. </head>
  14. <body>
  15.     <section id="app" v-cloak>
  16.        
  17.         <div class="notif-container">
  18.             <my-notification></my-notification>
  19.         </div>
  20.  
  21.         <div class="container is-fluid">
  22.             <div class="columns">
  23.                
  24.                 <div class="column">
  25.                     <media-manager inline-template
  26.    v-cloak
  27.    class='hide-native-scrollbar'
  28.    :config="{&quot;baseUrl&quot;:&quot;https:\/\/trainanywhere.app\/storage\/&quot;,&quot;hideFilesExt&quot;:true,&quot;mimeTypes&quot;:{&quot;image&quot;:[&quot;binary\/octet-stream&quot;],&quot;archive&quot;:[&quot;application\/x-tar&quot;,&quot;application\/zip&quot;]},&quot;broadcasting&quot;:false,&quot;gfi&quot;:true,&quot;ratioBar&quot;:true,&quot;previewFilesBeforeUpload&quot;:true}"
  29.    :routes="{&quot;files&quot;:&quot;https:\/\/trainanywhere.app\/media\/get-files&quot;,&quot;lock&quot;:&quot;https:\/\/trainanywhere.app\/media\/lock-file&quot;,&quot;visibility&quot;:&quot;https:\/\/trainanywhere.app\/media\/change-visibility&quot;,&quot;upload&quot;:&quot;https:\/\/trainanywhere.app\/media\/upload&quot;,&quot;locked_list&quot;:&quot;https:\/\/trainanywhere.app\/media\/get-locked-list&quot;}"
  30.    :translations="{&quot;add_to_list&quot;:&quot;Add To List&quot;,&quot;added&quot;:&quot;Added&quot;,&quot;already_exists&quot;:&quot;A File\/Folder Already Exists With That Name&quot;,&quot;application&quot;:&quot;Application&quot;,&quot;audio&quot;:&quot;Audio&quot;,&quot;bm_add_to_list&quot;:&quot;Save Current Path&quot;,&quot;bm&quot;:&quot;Bookmarks&quot;,&quot;clear&quot;:&quot;Clear selection&quot;,&quot;copy_success&quot;:&quot;Successfully Copied&quot;,&quot;copy&quot;:&quot;Copy&quot;,&quot;create_folder_notif&quot;:&quot;New Folder Was Created&quot;,&quot;create_success&quot;:&quot;Successfully Created&quot;,&quot;crop_apply&quot;:&quot;Apply Changes&quot;,&quot;crop_flip_horizontal&quot;:&quot;Flip Horizontal&quot;,&quot;crop_flip_vertical&quot;:&quot;Flip Vertical&quot;,&quot;crop_reset_filters&quot;:&quot;Clear Filters&quot;,&quot;crop_reset&quot;:&quot;Reset All&quot;,&quot;crop_rotate_left&quot;:&quot;Rotate Left&quot;,&quot;crop_rotate_right&quot;:&quot;Rotate Right&quot;,&quot;crop_zoom_in&quot;:&quot;Zoom In&quot;,&quot;crop_zoom_out&quot;:&quot;Zoom Out&quot;,&quot;crop&quot;:&quot;Crop&quot;,&quot;delete_success&quot;:&quot;Successfully Deleted&quot;,&quot;delete&quot;:&quot;Delete&quot;,&quot;description&quot;:&quot;Description&quot;,&quot;diff&quot;:&quot;Toggle Diff&quot;,&quot;dimension&quot;:&quot;Dimensions&quot;,&quot;downloaded&quot;:&quot;Downloaded&quot;,&quot;editor&quot;:&quot;Editor&quot;,&quot;error_altered_fwli&quot;:&quot;Can&#039;t Be Moved, Renamed Or Deleted Because It Has Some Locked Items&quot;,&quot;filter_by&quot;:&quot;Filter By &quot;,&quot;filtration&quot;:&quot;Filters &amp; Sorting&quot;,&quot;find&quot;:&quot;Find...&quot;,&quot;focals&quot;:&quot;Focal Points&quot;,&quot;folder&quot;:&quot;Folder&quot;,&quot;found&quot;:&quot;Found&quot;,&quot;glbl_search_avail&quot;:&quot;Global Search Is Now Available.&quot;,&quot;glbl_search&quot;:&quot;Global Search&quot;,&quot;go_to_folder&quot;:&quot;Go To Folder !&quot;,&quot;image&quot;:&quot;Image&quot;,&quot;last_modified&quot;:&quot;Last Modified&quot;,&quot;locked&quot;:&quot;Locked&quot;,&quot;move_clear&quot;:&quot;Movable List Successfully Cleared&quot;,&quot;move_success&quot;:&quot;Successfully Moved&quot;,&quot;move&quot;:&quot;Move&quot;,&quot;name&quot;:&quot;Name&quot;,&quot;new_uploads_notif&quot;:&quot;New Items Were Uploaded&quot;,&quot;no_val&quot;:&quot;Maybe You Should Add Something First !!!&quot;,&quot;non&quot;:&quot;Non&quot;,&quot;nothing_found&quot;:&quot;Nothing Found&quot;,&quot;open&quot;:&quot;Open&quot;,&quot;options&quot;:&quot;Options&quot;,&quot;presets&quot;:&quot;Presets&quot;,&quot;refresh_notif&quot;:&quot;Press The Refresh Button To View Them&quot;,&quot;rename_success&quot;:&quot;Successfully Renamed&quot;,&quot;rename&quot;:&quot;Rename&quot;,&quot;reset&quot;:&quot;Reset All&quot;,&quot;save_success&quot;:&quot;Successfully Saved As&quot;,&quot;save&quot;:&quot;Save&quot;,&quot;selected&quot;:&quot;Selected&quot;,&quot;sep_download&quot;:&quot;Folders Should Be Downloaded Separately&quot;,&quot;size&quot;:&quot;Size&quot;,&quot;sort_by&quot;:&quot;Sort By&quot;,&quot;stand_by&quot;:&quot;Please Stand By ...&quot;,&quot;text&quot;:&quot;Text&quot;,&quot;to_cp&quot;:&quot;Copy Link To Clipboard&quot;,&quot;upload_in_progress&quot;:&quot;Upload Is Already In Progress&quot;,&quot;upload_success&quot;:&quot;Successfully Uploaded&quot;,&quot;video&quot;:&quot;Video&quot;}"
  31.    :in-modal="false"
  32.    :hide-ext="[]"
  33.    :hide-path="[]"
  34.    :restrict="{}"
  35.    :user-id="0"
  36.    :upload-panel-img-list="[&quot;\/assets\/vendor\/MediaManager\/patterns\/gif\/5b98026bab87a.gif&quot;,&quot;\/assets\/vendor\/MediaManager\/patterns\/still\/nyc-candy.png&quot;]">
  37.  
  38.     <div class="media-manager"
  39.        :class="[
  40.            {'__stack-reverse': waitingForUpload},
  41.            {'top-space': !inModal}
  42.        ]">
  43.  
  44.        
  45.         <transition name="mm-list" mode="out-in">
  46.             <content-ratio v-if="config.ratioBar && allItemsCount"
  47.                :list="allFiles"
  48.                :total="allItemsCount"
  49.                :file-type-is="fileTypeIs">
  50.             </content-ratio>
  51.         </transition>
  52.  
  53.        
  54.         <global-search-panel
  55.            :trans="trans"
  56.            :file-type-is="fileTypeIs"
  57.            :add-to-movable-list="addToMovableList"
  58.            :in-movable-list="inMovableList"
  59.            :no-scroll="noScroll"
  60.            :browser-support="browserSupport">
  61.         </global-search-panel>
  62.  
  63.        
  64.         <usage-intro-panel :no-scroll="noScroll"></usage-intro-panel>
  65.  
  66.        
  67.         <transition name="mm-list" mode="out-in">
  68.             <nav class="media-manager__toolbar level" v-show="toolBar">
  69.  
  70.                
  71.                 <div class="level-left">
  72.                    
  73.                     <div class="level-item">
  74.                         <div class="field" :class="{'has-addons': !isBulkSelecting()}">
  75.                            
  76.                             <div class="control" v-if="!isBulkSelecting()">
  77.                                 <button class="button"
  78.                                    ref="upload"
  79.                                    :disabled="isLoading"
  80.                                    @click.stop="toggleUploadPanel()"
  81.                                    v-tippy
  82.                                    title="u">
  83.                                     <span class="icon"><icon name="shopping-basket"></icon></span>
  84.                                     <span>Upload</span>
  85.                                 </button>
  86.                             </div>
  87.  
  88.                            
  89.                             <div class="control">
  90.                                 <button class="button"
  91.                                    :disabled="isLoading"
  92.                                    @click.stop="createNewFolder()">
  93.                                     <span class="icon"><icon name="folder"></icon></span>
  94.                                     <span>Add Folder</span>
  95.                                 </button>
  96.                             </div>
  97.                         </div>
  98.                     </div>
  99.  
  100.                    
  101.                     <div class="level-item">
  102.                         <div class="field has-addons">
  103.                            
  104.                             <div class="control">
  105.                                 <button class="button is-link"
  106.                                    ref="move"
  107.                                    :disabled="isLoading || !movableItemsCount"
  108.                                    v-tippy
  109.                                    title="m / p"
  110.                                    @click.stop="moveItem()">
  111.                                     <span class="icon"><icon name="share" scale="0.8"></icon></span>
  112.                                     <span>Move</span>
  113.                                 </button>
  114.                             </div>
  115.  
  116.                            
  117.                             <div class="control" v-if="!isBulkSelecting()">
  118.                                 <button class="button is-link"
  119.                                    ref="rename"
  120.                                    :disabled="ops_btn_disable"
  121.                                    @click.stop="renameItem()">
  122.                                     <span class="icon"><icon name="terminal"></icon></span>
  123.                                     <span>Rename</span>
  124.                                 </button>
  125.                             </div>
  126.  
  127.                            
  128.                             <div class="control" v-show="!isBulkSelecting()">
  129.                                 <button class="button is-link"
  130.                                    ref="editor"
  131.                                    :disabled="editor_btn_disable"
  132.                                    v-tippy
  133.                                    title="e"
  134.                                    @click.stop="imageEditor()">
  135.                                     <span class="icon"><icon name="object-ungroup" scale="1.2"></icon></span>
  136.                                     <span>Editor</span>
  137.                                 </button>
  138.                             </div>
  139.  
  140.                            
  141.                             <div class="control">
  142.                                 <button class="button is-link"
  143.                                    ref="delete"
  144.                                    :disabled="ops_btn_disable"
  145.                                    v-tippy
  146.                                    title="d / del"
  147.                                    @click.stop="deleteItem()">
  148.                                     <span class="icon"><icon name="trash"></icon></span>
  149.                                     <span>Delete</span>
  150.                                 </button>
  151.                             </div>
  152.                         </div>
  153.                     </div>
  154.  
  155.                    
  156.                     <div class="level-item">
  157.                         <div class="field has-addons">
  158.                            
  159.                             <div class="control" v-if="!isBulkSelecting()">
  160.                                 <v-touch class="button is-primary"
  161.                                    ref="refresh"
  162.                                    :disabled="isLoading"
  163.                                    tag="button"
  164.                                    v-tippy
  165.                                    title="(R) efresh"
  166.                                    @tap="refresh()"
  167.                                    @hold="clearAll()">
  168.                                     <span class="icon">
  169.                                         <icon name="refresh" :spin="isLoading"></icon>
  170.                                     </span>
  171.                                 </v-touch>
  172.                             </div>
  173.  
  174.                            
  175.                             <div class="control">
  176.                                 <button class="button is-warning"
  177.                                    ref="lock"
  178.                                    :disabled="lock_btn_disable"
  179.                                    v-tippy
  180.                                    title="(L) ock"
  181.                                    @click.stop="lockFileForm()">
  182.                                     <span class="icon">
  183.                                         <icon :name="IsLocked(selectedFile) ? 'lock' : 'unlock'"></icon>
  184.                                     </span>
  185.                                 </button>
  186.                             </div>
  187.  
  188.                            
  189.                             <div class="control">
  190.                                 <button class="button"
  191.                                    :class="IsVisible(selectedFile) ? 'is-light' : 'is-danger'"
  192.                                    ref="visibility"
  193.                                    :disabled="vis_btn_disable"
  194.                                    v-tippy
  195.                                    title="(V) isibility"
  196.                                    @click.stop="FileVisibilityForm()">
  197.                                     <span class="icon">
  198.                                         <icon :name="IsVisible(selectedFile) ? 'eye' : 'eye-slash'"></icon>
  199.                                     </span>
  200.                                 </button>
  201.                             </div>
  202.                         </div>
  203.                     </div>
  204.  
  205.                 </div>
  206.  
  207.                
  208.  
  209.                
  210.                 <div class="level-right" v-if="!waitingForUpload">
  211.                     <div class="level-item">
  212.                         <div class="field" :class="{'has-addons' : isBulkSelecting()}">
  213.                            
  214.                             <div class="control">
  215.                                 <button @click.stop="blkSlctAll()"
  216.                                    ref="bulkSelectAll"
  217.                                    class="button"
  218.                                    :class="{'is-warning' : bulkSelectAll}"
  219.                                    v-show="isBulkSelecting()"
  220.                                    :disabled="searchItemsCount == 0 || isLoading"
  221.                                    v-tippy
  222.                                    title="a">
  223.                                     <template v-if="bulkSelectAll">
  224.                                         <span class="icon"><icon name="minus" scale="0.8"></icon></span>
  225.                                         <span>Select Non</span>
  226.                                     </template>
  227.                                     <template v-else>
  228.                                         <span class="icon"><icon name="plus" scale="0.8"></icon></span>
  229.                                         <span>Select All</span>
  230.                                     </template>
  231.                                 </button>
  232.                             </div>
  233.  
  234.                            
  235.                             <div class="control">
  236.                                 <button @click.stop="blkSlct()"
  237.                                    ref="bulkSelect"
  238.                                    class="button"
  239.                                    :class="{'is-danger' : bulkSelect}"
  240.                                    :disabled="searchItemsCount == 0 || !allItemsCount || isLoading"
  241.                                    v-tippy
  242.                                    title="b">
  243.                                     <span class="icon"><icon name="puzzle-piece"></icon></span>
  244.                                     <span>Bulk Select</span>
  245.                                 </button>
  246.                             </div>
  247.                         </div>
  248.                     </div>
  249.  
  250.                     <template>
  251.                        
  252.                         <div class="level-item" v-if="searchItemsCount != 0 && allItemsCount">
  253.                             <filter-and-sorting :disabled="isLoading"
  254.                                :filter-name-is="filterNameIs"
  255.                                :sort-name-is="sortNameIs"
  256.                                :set-filter-name="setFilterName"
  257.                                :set-sort-name="setSortName"
  258.                                :have-a-file-of-type="haveAFileOfType"
  259.                                :trans="trans">
  260.                             </filter-and-sorting>
  261.                         </div>
  262.  
  263.                        
  264.                         <div class="level-item" v-if="!restrictModeIsOn && firstRun">
  265.                             <dir-bookmarks :disabled="isLoading"
  266.                                :dir-bookmarks="dirBookmarks"
  267.                                :path="files.path"
  268.                                :trans="trans">
  269.                             </dir-bookmarks>
  270.                         </div>
  271.  
  272.                        
  273.                         <div class="level-item" v-if="allItemsCount">
  274.                             <div class="control">
  275.                                 <div class="field has-addons">
  276.                                     <p class="control" v-if="!restrictModeIsOn">
  277.                                         <global-search-btn
  278.                                            route="https://trainanywhere.app/media/global-search"
  279.                                            :is-loading="isLoading"
  280.                                            :trans="trans"
  281.                                            :show-notif="showNotif">
  282.                                         </global-search-btn>
  283.                                     </p>
  284.  
  285.                                     <p class="control has-icons-left">
  286.                                         <input class="input"
  287.                                            :disabled="isLoading"
  288.                                            type="text"
  289.                                            ref="search"
  290.                                            v-model="searchFor"
  291.                                            :placeholder="trans('find')">
  292.                                         <span class="icon is-left">
  293.                                             <icon name="search"></icon>
  294.                                         </span>
  295.                                     </p>
  296.  
  297.                                     <p class="control">
  298.                                         <button class="button is-black" :disabled="!searchFor"
  299.                                            v-tippy
  300.                                            title="Clear Search"
  301.                                            @click.stop="resetInput('searchFor')">
  302.                                             <span class="icon"><icon name="times"></icon></span>
  303.                                         </button>
  304.                                     </p>
  305.                                 </div>
  306.                             </div>
  307.                         </div>
  308.                     </template>
  309.                 </div>
  310.             </nav>
  311.         </transition>
  312.  
  313.        
  314.  
  315.        
  316.         <section>
  317.             <div class="media-manager__dz" :class="{'__dz-active': uploadArea}">
  318.                 <form id="new-upload" :style="uploadPanelImg">
  319.                     <input type="hidden" name="upload_path" :value="files.path">
  320.                     <input type="hidden" name="random_names" :value="useRandomNamesForUpload">
  321.  
  322.                    
  323.                     <div class="dz-message title is-4">Drag & Drop Files<br>Or<br>Click To Upload</div>
  324.  
  325.                    
  326.                    <div class="form-switcher"
  327.                        title="Use Random Names ?"
  328.                        v-tippy="{arrow: true, placement: 'right'}">
  329.                        <input type="checkbox" id="random_names" v-model="useRandomNamesForUpload">
  330.                        <label class="switcher" for="random_names"></label>
  331.                    </div>
  332.  
  333.                    
  334.                    <div class="save_link" @click.stop="toggleModal('save_link_modal')" v-if="!restrictUpload()">
  335.                        <span class="icon is-large"
  336.                            title="Upload Image From Url"
  337.                            v-tippy="{arrow: true, placement: 'left'}">
  338.                            <icon>
  339.                                <icon class="circle" name="circle" scale="2.5"></icon>
  340.                                <icon class="anchor" name="link"></icon>
  341.                            </icon>
  342.                        </span>
  343.                    </div>
  344.                </form>
  345.            </div>
  346.  
  347.            <transition name="mm-list">
  348.                <div v-show="showProgress" id="uploadProgress" class="progress">
  349.                    <div class="progress-bar is-success progress-bar-striped active" :style="{width: progressCounter}"></div>
  350.                </div>
  351.            </transition>
  352.        </section>
  353.  
  354.        
  355.  
  356.        
  357.        <transition-group tag="ul"
  358.    class="__stack-breadcrumb-mobile is-hidden-desktop"
  359.    ref="bc"
  360.    v-if="pathBarDirsList.length > 0"
  361.    name="mm-list">
  362.    <li id="library-bc" key="library-bc">
  363.        <a v-if="pathBarDirsList.length > 0 && !(isBulkSelecting() || isLoading)"
  364.            v-tippy
  365.            title="BackSpace"
  366.            @click.stop="goToFolder(0)">
  367.            Home
  368.        </a>
  369.        <p v-else>Home</p>
  370.    </li>
  371.  
  372.    <li v-for="(folder, index) in pathBarDirsList" :id="folder + '-bc'" :key="`${index}_${folder}`">
  373.        <p v-if="isLastItemByIndex(index, pathBarDirsList) || isBulkSelecting() || isLoading">{{ folder }}</p>
  374.        <a v-else
  375.            v-tippy
  376.            title="BackSpace"
  377.            @click.stop="pathBarDirsList.length > 1 ? goToFolder(index+1) : false">
  378.            {{ folder }}
  379.        </a>
  380.    </li>
  381. </transition-group>
  382.  
  383.        
  384.  
  385.        <div class="media-manager__stack">
  386.            <section class="__stack-container">
  387.  
  388.                
  389.                <div id="uploadPreview">
  390.                    
  391.                    <div class="dz-preview-ops btn-animate extra-func-btns">
  392.                        
  393.                        <button v-tippy="{arrow: true, placement: 'left'}"
  394.                            title="Add More Files (u)"
  395.                            @click.stop="toggleUploadPanel()"
  396.                            class="btn-plain">
  397.                            <span class="icon is-large">
  398.                                <icon>
  399.                                    <icon name="circle" scale="2.5"></icon>
  400.                                    <icon class="icon-btn" name="cloud-upload"/>
  401.                                </icon>
  402.                            </span>
  403.                        </button>
  404.                        
  405.                        <button v-tippy="{arrow: true, placement: 'left'}"
  406.                            title="Upload (Enter)"
  407.                            ref="process-dropzone"
  408.                            class="btn-plain">
  409.                            <span class="icon is-large">
  410.                                <icon>
  411.                                    <icon name="circle" scale="2.5"></icon>
  412.                                    <icon class="icon-btn" name="check"/>
  413.                                </icon>
  414.                            </span>
  415.                        </button>
  416.                        
  417.                        <button v-tippy="{arrow: true, placement: 'left'}"
  418.                            title="Clear  (Esc)"
  419.                            ref="clear-dropzone"
  420.                            class="btn-plain">
  421.                            <span class="icon is-large">
  422.                                <icon>
  423.                                    <icon name="circle" scale="2.5"></icon>
  424.                                    <icon class="icon-btn" name="times"/>
  425.                                </icon>
  426.                            </span>
  427.                        </button>
  428.                    </div>
  429.  
  430.                    
  431.                    <section class="sidebar-container">
  432.                        <div class="sidebar"></div>
  433.                    </section>
  434.                    <template v-for="file in uploadPreviewList">
  435.                        <keep-alive v-if="checkForUploadedFile(file.name)">
  436.                            <upload-preview v-if="file.name == selectedUploadPreviewName"
  437.                                :key="file.name"
  438.                                :file="file"
  439.                                :file-type-is="fileTypeIs"
  440.                                :trans="trans">
  441.                            </upload-preview>
  442.                        </keep-alive>
  443.                    </template>
  444.                </div>
  445.  
  446.                
  447.                <div>
  448.                    
  449.                    <div id="loading_files" v-show="loading_files">
  450.                        <div id="loading_files_anim" data-json="https://trainanywhere.app/assets/vendor/MediaManager/lottie/world.json"></div>
  451.  
  452.                        <transition name="mm-list" mode="out-in">
  453.                            <h3 key="1" v-if="showProgress" class="mm-animated pulse">
  454.                                Please Stand By ...
  455.                                <strong>{{ progressCounter }}</strong>
  456.                            </h3>
  457.                            <h3 key="2" v-else>Loading Files</h3>
  458.                        </transition>
  459.                    </div>
  460.  
  461.                    
  462.                    <div id="ajax_error" v-show="ajax_error">
  463.                        <div id="ajax_error_anim" data-json="https://trainanywhere.app/assets/vendor/MediaManager/lottie/avalanche.json"></div>
  464.                        <h3>Oh NO! Something Went Wrong</h3>
  465.                    </div>
  466.  
  467.                    
  468.                    <v-touch id="no_files"
  469.                        v-show="no_files"
  470.                        class="no_files"
  471.                        @swiperight="goToPrevFolder()"
  472.                        @swipeleft="goToPrevFolder()"
  473.                        @hold="containerClick($event, 'no_files')"
  474.                        @dbltap="containerClick($event, 'no_files')">
  475.                        <div id="no_files_anim" data-json="https://trainanywhere.app/assets/vendor/MediaManager/lottie/zero.json"></div>
  476.                        <h3>No Files In This Folder</h3>
  477.                    </v-touch>
  478.                </div>
  479.  
  480.                
  481.                <div>
  482.                    <usage-intro-overlay></usage-intro-overlay>
  483.                    <usage-intro-btn v-show="!isLoading && !waitingForUpload"></usage-intro-btn>
  484.                </div>
  485.  
  486.                
  487.                <div v-if="allItemsCount && !isLoading && !waitingForUpload"
  488.                    class="movable-list extra-func-btns">
  489.                    <v-touch class="btn-plain"
  490.                        v-tippy="{arrow: true, hideOnClick: false}"
  491.                        :title="inMovableList() ? 'Added' : 'Add To List (c / x)'"
  492.                        @tap="addToMovableList()"
  493.                        @dbltap="showMovableList()"
  494.                        @hold="clearMovableList()">
  495.                        <span class="icon">
  496.                            <icon name="shopping-cart" scale="1.2"></icon>
  497.                        </span>
  498.                        <span class="counter">{{ movableItemsCount || null }}</span>
  499.                    </v-touch>
  500.                </div>
  501.  
  502.                
  503.  
  504.                
  505.                <v-touch class="__stack-files mm-animated"
  506.                    :class="{'__stack-sidebar-hidden' : !infoSidebar}"
  507.                    ref="__stack-files"
  508.                    @swiperight="goToPrevFolder()"
  509.                    @swipeleft="goToPrevFolder()"
  510.                    @hold="containerClick($event)"
  511.                    @dbltap="containerClick($event)"
  512.                    @pinchin="containerClick($event)">
  513.  
  514.                    
  515.                    <section>
  516.                        <div id="no_search" v-show="no_search">
  517.                            <div id="no_search_anim" data-json="https://trainanywhere.app/assets/vendor/MediaManager/lottie/ice_cream.json"></div>
  518.                            <h3>{{ trans('nothing_found') }}</h3>
  519.                        </div>
  520.                    </section>
  521.  
  522.                    
  523.                    <ul class="__files-boxs" ref="filesList">
  524.                        <li v-for="(file, index) in orderBy(filterBy(allFiles, searchFor, 'name'), sortName, sortDirection)"
  525.                            :key="file.name"
  526.                            :data-file-index="index"
  527.                            @click.stop="setSelected(file, index, $event)">
  528.                            <v-touch class="__file-box mm-animated"
  529.                                :class="{'bulk-selected': IsInBulkList(file), 'selected' : isSelected(file)}"
  530.                                @swipeup="swipGesture($event, file, index)"
  531.                                @swipedown="swipGesture($event, file, index)"
  532.                                @swiperight="swipGesture($event, file, index)"
  533.                                @swipeleft="swipGesture($event, file, index)"
  534.                                @hold="pressGesture($event, file, index)"
  535.                                @dbltap="pressGesture($event, file, index)">
  536.  
  537.                                
  538.                                <button v-if="$refs.lock"
  539.                                    class="__box-lock-icon icon"
  540.                                    :disabled="isLoading"
  541.                                    :class="IsLocked(file) ? 'is-danger' : 'is-success'"
  542.                                    :title="IsLocked(file) ? 'UnLock Item' : 'Lock Item'"
  543.                                    v-tippy="{arrow: true, hideOnClick: false}"
  544.                                    @click.stop="lockFileForm(file)">
  545.                                </button>
  546.  
  547.                                
  548.                                <div v-if="!fileTypeIs(file, 'folder')"
  549.                                    class="__box-copy-link icon"
  550.                                    @click.stop="copyLink(file.path)"
  551.                                    :title="linkCopied ? trans('copied') : trans('to_cp')"
  552.                                    v-tippy="{arrow: true, hideOnClick: false}"
  553.                                    @hidden="linkCopied = false">
  554.                                    <icon name="clone" scale="0.9"></icon>
  555.                                </div>
  556.  
  557.                                <div class="__box-data">
  558.                                    <div class="__box-preview">
  559.                                        <template v-if="fileTypeIs(file, 'image')">
  560.                                            <image-intersect
  561.                                                :file="file"
  562.                                                :check-for-dimensions="checkForDimensions"
  563.                                                :browser-support="browserSupport"
  564.                                                root-el=".__stack-files">
  565.                                            </image-intersect>
  566.                                        </template>
  567.  
  568.                                        <span v-else class="icon is-large">
  569.                                            <icon v-if="fileTypeIs(file, 'folder')" name="folder" scale="2.6"></icon>
  570.                                            <icon v-else-if="fileTypeIs(file, 'application')" name="cogs" scale="2.6"></icon>
  571.                                            <icon v-else-if="fileTypeIs(file, 'compressed')" name="file-archive-o" scale="2.6"></icon>
  572.                                            <icon v-else-if="fileTypeIs(file, 'video')" name="film" scale="2.6"></icon>
  573.                                            <icon v-else-if="fileTypeIs(file, 'audio')" name="music" scale="2.6"></icon>
  574.                                            <icon v-else-if="fileTypeIs(file, 'pdf')" name="file-pdf-o" scale="2.6"></icon>
  575.                                            <icon v-else-if="fileTypeIs(file, 'text')" name="file-text-o" scale="2.6"></icon>
  576.                                        </span>
  577.                                    </div>
  578.  
  579.                                    <div class="__box-info">
  580.                                        
  581.                                        <template v-if="fileTypeIs(file, 'folder')">
  582.                                            <h4>{{ file.name }}</h4>
  583.                                            <small>
  584.                                                <span>{{ file.count }} Item(s)</span>
  585.                                                <span v-if="file.size > 0" class="__info-file-size">"{{ getFileSize(file.size) }}"</span>
  586.                                            </small>
  587.                                        </template>
  588.  
  589.                                        
  590.                                        <template v-else>
  591.                                            <h4>{{ getFileName(file.name) }}</h4>
  592.                                            <small class="__info-file-size">{{ getFileSize(file.size) }}</small>
  593.                                        </template>
  594.                                    </div>
  595.                                </div>
  596.                            </v-touch>
  597.                        </li>
  598.                    </ul>
  599.  
  600.                    <infinite-loading v-if="firstRun && files.next"
  601.                                    spinner="waveDots"
  602.                                    @infinite="loadPaginatedFiles">
  603.                        <span slot="no-more"></span>
  604.                    </infinite-loading>
  605.                </v-touch>
  606.  
  607.                
  608.  
  609.                
  610.                <v-touch v-if="infoSidebar"
  611.                    class="__stack-sidebar is-hidden-touch"
  612.                    @swiperight="toggleInfoSidebar(), saveUserPref()"
  613.                    @swipeleft="toggleInfoSidebar(), saveUserPref()">
  614.  
  615.                    
  616.                    <div class="__sidebar-preview">
  617.                        <transition name="mm-slide" mode="out-in" appear>
  618.                            
  619.                            <div key="none-selected" class="__sidebar-none-selected" v-if="!selectedFile">
  620.                                <span @click.stop="reset()" class="link"><icon name="power-off" scale="3.2"></icon></span>
  621.                                <p>No File Or Folder Selected</p>
  622.                            </div>
  623.  
  624.                            
  625.                            <image-preview v-else-if="selectedFileIs('image')"
  626.                                v-tippy="{arrow: true, placement: 'left'}"
  627.                                title="Space"
  628.                                :key="selectedFile.storage_path">
  629.  
  630.                                <img :src="selectedFile.path"
  631.                                    :alt="selectedFile.name"
  632.                                    class="link image"
  633.                                    @click.stop="isBulkSelecting() ? false : toggleModal('preview_modal')"/>
  634.                            </image-preview>
  635.  
  636.                            
  637.                            <div v-else-if="selectedFileIs('video')"
  638.                                v-tippy="{arrow: true, placement: 'left'}"
  639.                                title="Space"
  640.                                :key="selectedFile.storage_path">
  641.                                <video controls
  642.                                    playsinline
  643.                                    @loadedmetadata="saveVideoDimensions"
  644.                                    preload="metadata"
  645.                                    data-player
  646.                                    :src="selectedFile.path">
  647.                                    Your Browser Does Not Support The Video Tag
  648.                                </video>
  649.                            </div>
  650.  
  651.                            
  652.                            <div v-else-if="selectedFileIs('audio')"
  653.                                v-tippy="{arrow: true, placement: 'left'}"
  654.                                title="Space"
  655.                                :key="selectedFile.storage_path">
  656.                                <template>
  657.                                    <img v-if="audioFileMeta && audioFileMeta.cover"
  658.                                        :src="audioFileMeta.cover"
  659.                                        :alt="selectedFile.name"
  660.                                        class="image"/>
  661.                                    <icon v-else class="svg-prev-icon" name="music" scale="8"></icon>
  662.                                </template>
  663.  
  664.                                <audio controls
  665.                                    class="is-hidden"
  666.                                    preload="none"
  667.                                    data-player
  668.                                    :src="selectedFile.path">
  669.                                    Your Browser Does Not Support The Audio Element
  670.                                </audio>
  671.                            </div>
  672.  
  673.                            
  674.                            <div key="pdf" v-else-if="selectedFileIs('pdf')"
  675.                                class="link"
  676.                                v-tippy="{arrow: true, placement: 'left'}"
  677.                                title="Space"
  678.                                @click.stop="toggleModal('preview_modal')">
  679.                                <icon class="svg-prev-icon" name="file-pdf-o" scale="4"></icon>
  680.                            </div>
  681.  
  682.                            <div key="text" v-else-if="selectedFileIs('text')"
  683.                                class="link"
  684.                                v-tippy="{arrow: true, placement: 'left'}"
  685.                                title="Space"
  686.                                @click.stop="toggleModal('preview_modal')">
  687.                                <icon class="svg-prev-icon" name="file-text-o" scale="4"></icon>
  688.                            </div>
  689.  
  690.                            <icon-types v-else
  691.                                classes="svg-prev-icon"
  692.                                :file="selectedFile"
  693.                                :file-type-is="fileTypeIs"
  694.                                :scale="4"
  695.                                :except="['image', 'audio', 'video', 'pdf', 'text']"/>
  696.                        </transition>
  697.                    </div>
  698.  
  699.                    
  700.                    <div v-if="allItemsCount"
  701.                        class="__sidebar-info"
  702.                        :style="{'background-color': selectedFile ? 'white' : ''}">
  703.  
  704.                        <transition name="mm-list" mode="out-in" appear>
  705.                            <div :key="selectedFile.name" v-if="selectedFile">
  706.                                
  707.                                <template v-if="selectedFileIs('audio') && checkAudioData()">
  708.                                    <table>
  709.                                        <tbody>
  710.                                            <tr v-if="audioFileMeta.artist">
  711.                                                <td class="t-key">Artist:</td>
  712.                                                <td class="t-val">{{ audioFileMeta.artist }}</td>
  713.                                            </tr>
  714.                                            <tr v-if="audioFileMeta.title">
  715.                                                <td class="t-key">Title:</td>
  716.                                                <td class="t-val">{{ audioFileMeta.title }}</td>
  717.                                            </tr>
  718.                                            <tr v-if="audioFileMeta.album">
  719.                                                <td class="t-key">Album:</td>
  720.                                                <td class="t-val">{{ audioFileMeta.album }}</td>
  721.                                            </tr>
  722.                                            <tr v-if="audioFileMeta.track">
  723.                                                <td class="t-key">Track Nº:</td>
  724.                                                <td class="t-val">{{ audioFileMeta.track }} <span v-if="audioFileMeta.track_total">/ {{ audioFileMeta.track_total }}</span></td>
  725.                                            </tr>
  726.                                            <tr v-if="audioFileMeta.year">
  727.                                                <td class="t-key">Year:</td>
  728.                                                <td class="t-val">{{ audioFileMeta.year }}</td>
  729.                                            </tr>
  730.                                            <tr v-if="audioFileMeta.genre">
  731.                                                <td class="t-key">Genre:</td>
  732.                                                <td class="t-val">{{ audioFileMeta.genre }}</td>
  733.                                            </tr>
  734.                                        </tbody>
  735.                                    </table>
  736.                                    <hr>
  737.                                </template>
  738.  
  739.                                <table>
  740.                                    <tbody>
  741.                                        <tr>
  742.                                            <td class="t-key">Name:</td>
  743.                                            <td class="t-val">{{ selectedFile.name }}</td>
  744.                                        </tr>
  745.                                    </tbody>
  746.                                </table>
  747.                                <table>
  748.                                    <tbody>
  749.                                        <tr>
  750.                                            <td class="t-key">Type:</td>
  751.                                            <td class="t-val">{{ selectedFile.type }}</td>
  752.                                        </tr>
  753.                                    </tbody>
  754.                                </table>
  755.                                <table>
  756.                                    <tbody>
  757.                                        <tr>
  758.                                            <td class="t-key">Size:</td>
  759.                                            <td class="t-val">{{ getFileSize(selectedFile.size) }}</td>
  760.                                        </tr>
  761.                                    </tbody>
  762.                                </table>
  763.  
  764.                                
  765.                                <template v-if="selectedFileIs('folder')">
  766.                                    <table>
  767.                                        <tbody>
  768.                                            <tr>
  769.                                                <td class="t-key">Item(s):</td>
  770.                                                <td class="t-val">{{ selectedFile.count }}</td>
  771.                                            </tr>
  772.                                        </tbody>
  773.                                    </table>
  774.  
  775.                                    <div class="__sidebar-zip" v-show="!isBulkSelecting()">
  776.                                        <table>
  777.                                            <tbody>
  778.                                                <tr>
  779.                                                    <td class="t-key">Download Folder:</td>
  780.                                                    <td class="t-val">
  781.                                                        <form action="https://trainanywhere.app/media/folder-download"method="post" @submit.prevent="ZipDownload($event)">
  782.                                                            <input type="hidden" name="_token" value="7F6YWCJ1DunHcbDgmKBnQWihnXnDod8FxQ3gQBjR">
  783.                                                            <input type="hidden" name="folders" :value="files.path">
  784.                                                            <input type="hidden" name="name" :value="selectedFile.name">
  785.                                                            <button type="submit" class="btn-plain zip":disabled="config.gfi && selectedFile.count == 0">
  786.                                                                <span class="icon"><icon name="archive" scale="1.2"></icon></span>
  787.                                                            </button>
  788.                                                        </form>
  789.                                                    </td>
  790.                                                </tr>
  791.                                            </tbody>
  792.                                        </table>
  793.                                    </div>
  794.                                </template>
  795.  
  796.                                
  797.                                <template v-else>
  798.                                    <table v-if="(selectedFileIs('image') || selectedFileIs('video')) && dimensions.length">
  799.                                        <tbody>
  800.                                            <tr>
  801.                                                <td class="t-key">Dimensions:</td>
  802.                                                <td class="t-val">{{ selectedFileDimensions }}</td>
  803.                                            </tr>
  804.                                        </tbody>
  805.                                    </table>
  806.                                    <table>
  807.                                        <tbody>
  808.                                            <tr>
  809.                                                <td class="t-key">Visibility:</td>
  810.                                                <td class="t-val">{{ selectedFile.visibility }}</td>
  811.                                            </tr>
  812.                                        </tbody>
  813.                                    </table>
  814.                                    <table>
  815.                                        <tbody>
  816.                                            <tr>
  817.                                                <td class="t-key">Preview:</td>
  818.                                                <td class="t-val"><a :href="selectedFile.path" target="_blank">Public URL</a></td>
  819.                                            </tr>
  820.                                        </tbody>
  821.                                    </table>
  822.  
  823.                                    <div class="__sidebar-zip">
  824.                                        <table>
  825.                                            <tbody>
  826.                                                <tr>
  827.                                                    <td class="t-key">Download File:</td>
  828.                                                    
  829.                                                    <td class="t-val">
  830.                                                        <button class="btn-plain" @click.prevent="saveFile(selectedFile)">
  831.                                                            <span class="icon"><icon name="download" scale="1.2"></icon></span>
  832.                                                        </button>
  833.                                                    </td>
  834.                                                    
  835.                                                    <td class="t-val">
  836.                                                        <form action="https://trainanywhere.app/media/files-download"
  837.                                                            method="post"
  838.                                                            @submit.prevent="ZipDownload($event)"
  839.                                                            v-show="isBulkSelecting()">
  840.                                                            <input type="hidden" name="_token" value="7F6YWCJ1DunHcbDgmKBnQWihnXnDod8FxQ3gQBjR">
  841.                                                            <input type="hidden" name="list" :value="JSON.stringify(bulkList)">
  842.                                                            <input type="hidden" name="name" :value="folders.length ? folders[folders.length - 1] : 'media_manager'">
  843.                                                            <button type="submit" class="btn-plain zip":disabled="hasFolder()">
  844.                                                                <span class="icon"><icon name="archive" scale="1.2"></icon></span>
  845.                                                            </button>
  846.                                                        </form>
  847.                                                    </td>
  848.                                                </tr>
  849.                                            </tbody>
  850.                                        </table>
  851.                                    </div>
  852.                                </template>
  853.  
  854.                                <table>
  855.                                    <tbody>
  856.                                        <tr>
  857.                                            <td class="t-key">Last Modified:</td>
  858.                                            <td class="t-val">{{ selectedFile.last_modified_formated }}</td>
  859.                                        </tr>
  860.                                    </tbody>
  861.                                </table>
  862.                            </div>
  863.  
  864.                            
  865.                            <div v-else></div>
  866.                        </transition>
  867.  
  868.                        
  869.                        <div class="__sidebar-count">
  870.                            
  871.                            <div key="1" v-if="allItemsCount">
  872.                                <p class="title is-1">{{ allItemsCount }}</p>
  873.                                <p class="heading">Total</p>
  874.                            </div>
  875.  
  876.                            
  877.                            <div key="2" v-if="searchItemsCount !== null && searchItemsCount >= 0">
  878.                                <p class="title is-1">{{ searchItemsCount }}</p>
  879.                                <p class="heading">{{ trans('found') }}</p>
  880.                            </div>
  881.  
  882.                            
  883.                            <div key="3" v-if="bulkItemsCount" class="__sidebar-count-bulk">
  884.                                <p>
  885.                                    <span class="title is-1">{{ bulkItemsCount }}</span>
  886.  
  887.                                    
  888.                                    <template v-if="bulkItemsChild">
  889.                                        <span class="icon is-medium"><icon name="plus"></icon></span>
  890.                                        <span class="title is-5">{{ bulkItemsChild }}</span>
  891.                                    </template>
  892.                                </p>
  893.  
  894.                                
  895.                                <p v-show="bulkItemsSize" class="title is-6 has-text-weight-semibold">{{ bulkItemsSize }}</p>
  896.                                <p class="heading">Selected</p>
  897.                            </div>
  898.                        </div>
  899.                    </div>
  900.                </v-touch>
  901.  
  902.                <v-touch v-else-if="!infoSidebar && !isASmallScreen"
  903.                    class="__sidebar-swipe-hidden"
  904.                    @swiperight="toggleInfoSidebar(), saveUserPref()"
  905.                    @swipeleft="toggleInfoSidebar(), saveUserPref()">
  906.                </v-touch>
  907.            </section>
  908.  
  909.            
  910.  
  911.            
  912.            <section class="__stack-breadcrumb level is-mobile">
  913.                <div class="level-left">
  914.                    
  915.                    <div class="level-item">
  916.                        <nav class="breadcrumb has-arrow-separator is-hidden-touch">
  917.                            <transition-group tag="ul" name="mm-list">
  918.                                <li key="library-bc">
  919.                                    <a v-if="pathBarDirsList.length > 0 && !(isBulkSelecting() || isLoading)"
  920.                                        class="p-l-0 level"
  921.                                        v-tippy
  922.                                        title="BackSpace"
  923.                                        @click.stop="goToFolder(0)">
  924.                                        <span class="icon level-item is-marginless"><icon name="map"></icon></span>
  925.                                        <span class="level-item m-l-5 is-marginless">Home</span>
  926.                                    </a>
  927.                                    <p v-else class="p-l-0 level">
  928.                                        <span class="icon level-item is-marginless"><icon name="map-o"></icon></span>
  929.                                        <span class="level-item m-l-5 is-marginless">Home</span>
  930.                                    </p>
  931.                                </li>
  932.  
  933.                                <li v-for="(folder, index) in pathBarDirsList" :key="`${index}-${folder}`">
  934.                                    <p v-if="isLastItemByIndex(index, pathBarDirsList) || isBulkSelecting() || isLoading"
  935.                                        class="level">
  936.                                        <span class="icon level-item is-marginless"><icon name="folder-open-o"></icon></span>
  937.                                        <span class="level-item m-l-5 is-marginless">{{ folder }}</span>
  938.                                    </p>
  939.                                    <a v-else
  940.                                        v-tippy
  941.                                        title="BackSpace"
  942.                                        class="level"
  943.                                        @click.stop="pathBarDirsList.length > 1 ? goToFolder(index+1) : false">
  944.                                        <span class="icon level-item is-marginless"><icon name="folder"></icon></span>
  945.                                        <span class="level-item m-l-5 is-marginless">{{ folder }}</span>
  946.                                    </a>
  947.                                </li>
  948.                            </transition-group>
  949.                        </nav>
  950.                    </div>
  951.                </div>
  952.  
  953.                <div class="level-right">
  954.                    
  955.                    <div class="level-item" v-if="waitingForUpload">
  956.                        <nav class="breadcrumb">
  957.                            <ul>
  958.                                <li><p class="level has-text-weight-bold">{{ uploadPreviewList.length }} File's</p></li>
  959.                                <li><p class="level has-text-weight-bold">{{ uploadPreviewListSize }}</p></li>
  960.                            </ul>
  961.                        </nav>
  962.                    </div>
  963.  
  964.                    
  965.                    <div class="level-item" v-show="!isLoading && !waitingForUpload">
  966.                        <div class="is-hidden-touch"
  967.                            @click.stop="toggleInfoSidebar(), saveUserPref()"
  968.                            v-tippy
  969.                            title="t"
  970.                            v-if="allItemsCount">
  971.                            <transition :name="infoSidebar ? 'mm-info-out' : 'mm-info-in'" mode="out-in">
  972.                                <div :key="infoSidebar ? 1 : 2" class="__stack-sidebar-toggle has-text-link">
  973.                                    <template v-if="infoSidebar">
  974.                                        <span>Close</span>
  975.                                        <span class="icon"><icon name="angle-double-right"></icon></span>
  976.                                    </template>
  977.                                    <template v-else>
  978.                                        <span>Open</span>
  979.                                        <span class="icon"><icon name="angle-double-left"></icon></span>
  980.                                    </template>
  981.                                </div>
  982.                            </transition>
  983.                        </div>
  984.  
  985.                        
  986.                        <div class="is-hidden-desktop">
  987.                            <button class="button is-link __stack-left-toolbarToggle" @click.stop="toolBar = !toolBar">
  988.                                <span class="icon"><icon :name="toolBar ? 'times' : 'bars'"></icon></span>
  989.                            </button>
  990.                        </div>
  991.                    </div>
  992.                </div>
  993.            </section>
  994.        </div>
  995.  
  996.        
  997.  
  998.        
  999.        <section>
  1000.    
  1001.    <div v-if="isActiveModal('preview_modal')"
  1002.        class="modal mm-animated fadeIn is-active __modal-preview">
  1003.        <div class="modal-background link" @click.stop="toggleModal()"></div>
  1004.        <div class="mm-animated fadeInDown __modal-content-wrapper">
  1005.            <transition :name="`mm-img-${imageSlideDirection}`"
  1006.                mode="out-in"
  1007.                appear>
  1008.                <div class="modal-content" :key="selectedFile.path">
  1009.                    
  1010.                    <v-touch class="card"
  1011.    :class="{'pdf-prev': selectedFileIs('pdf') || selectedFileIs('text')}"
  1012.    @swiperight="cardSwipGesture"
  1013.    @swipeleft="cardSwipGesture"
  1014.    @swipeup="cardSwipGesture"
  1015.    @swipedown="cardSwipGesture">
  1016.  
  1017.    <div class="card-image">
  1018.        
  1019.        <object v-if="selectedFileIs('pdf') || selectedFileIs('text')"
  1020.                :data="selectedFile.path"
  1021.                :type="selectedFile.type">
  1022.            <p v-if="selectedFileIs('pdf')">Your Browser Does Not Support Pdfs, Please Download The Pdf To View It</p>
  1023.        </object>
  1024.  
  1025.        
  1026.        <div v-else-if="selectedFileIs('video')">
  1027.            <video controls
  1028.                playsinline
  1029.                preload="metadata"
  1030.                data-player
  1031.                :src="selectedFile.path">
  1032.                Your Browser Does Not Support The Video Tag
  1033.            </video>
  1034.        </div>
  1035.  
  1036.        
  1037.        <div v-else-if="selectedFileIs('audio')" class="audio-prev">
  1038.            <template>
  1039.                <img v-if="audioFileMeta && audioFileMeta.cover"
  1040.                    :src="audioFileMeta.cover"
  1041.                    :alt="selectedFile.name"
  1042.                    class="image"/>
  1043.  
  1044.                <div v-else class="audio-icon">
  1045.                    <icon class="svg-prev-icon" name="music" scale="8"></icon>
  1046.                </div>
  1047.            </template>
  1048.  
  1049.            <audio controls
  1050.                class="is-hidden"
  1051.                preload="metadata"
  1052.                data-player
  1053.                :src="selectedFile.path">
  1054.                Your Browser Does Not Support The Audio Element
  1055.            </audio>
  1056.        </div>
  1057.  
  1058.        
  1059.        <image-preview v-else
  1060.            :show-ops="true"
  1061.            :trans="trans"
  1062.            :ops_btn_disable="ops_btn_disable"
  1063.            :in-movable-list="inMovableList"
  1064.            :rename-item="renameItem"
  1065.            :delete-item="deleteItem"
  1066.            :image-editor-card="imageEditorCard"
  1067.            :add-to-movable-list="addToMovableList">
  1068.            <a :href="selectedFile.path"
  1069.                rel="noreferrer noopener"
  1070.                target="_blank"
  1071.                class="image">
  1072.                <img :src="selectedFile.path" :alt="selectedFile.name">
  1073.            </a>
  1074.        </image-preview>
  1075.    </div>
  1076.  
  1077.    <div class="card-content">
  1078.        <p class="card-details">
  1079.            
  1080.            <span class="tag" v-if="(selectedFileIs('image') || selectedFileIs('video')) && dimensions.length">
  1081.                {{ selectedFileDimensions }}
  1082.            </span>
  1083.  
  1084.            
  1085.            <span class="tag" v-if="selectedFile.size > 0">{{ getFileSize(selectedFile.size) }}</span>
  1086.        </p>
  1087.  
  1088.        
  1089.        <p class="title is-marginless">
  1090.            <span class="link"
  1091.                @click.stop="copyLink(selectedFile.path)"
  1092.                :title="linkCopied ? trans('copied') : trans('to_cp')"
  1093.                v-tippy="{arrow: true, hideOnClick: false, followCursor: true}"
  1094.                @hidden="linkCopied = false">
  1095.                {{ selectedFile.name }}
  1096.            </span>
  1097.  
  1098.            
  1099.            <a :href="selectedFile.path"
  1100.                v-if="selectedFileIs('pdf') || selectedFileIs('text')"
  1101.                rel="noreferrer noopener"
  1102.                target="_blank"
  1103.                title="Public URL"
  1104.                v-tippy>
  1105.                <icon name="search" scale="1.1"></icon>
  1106.            </a>
  1107.        </p>
  1108.  
  1109.        <p class="subtitle is-6 m-t-5">
  1110.            
  1111.            <span>{{ selectedFile.last_modified_formated }}</span>
  1112.        </p>
  1113.  
  1114.        
  1115.        <div class="level is-mobile">
  1116.            <div class="level-left">
  1117.                
  1118.                <div class="level-item">
  1119.                    <span v-if="$refs.lock"
  1120.                        class="icon is-large link"
  1121.                        :class="IsLocked(selectedFile) ? 'is-danger' : 'is-success'"
  1122.                        :title="IsLocked(selectedFile) ? 'UnLock Item' : 'Lock Item'"
  1123.                        v-tippy="{arrow: true, hideOnClick: false}"
  1124.                        @click.stop="$refs.lock.click()">
  1125.                        <icon :name="IsLocked(selectedFile) ? 'lock' : 'unlock'" scale="1.1"></icon>
  1126.                    </span>
  1127.                </div>
  1128.  
  1129.                
  1130.                <div class="level-item">
  1131.                    <span v-if="$refs.visibility"
  1132.                        class="icon is-large link"
  1133.                        :class="IsVisible(selectedFile) ? 'is-success' : 'is-danger'"
  1134.                        title="Change Visibility"
  1135.                        v-tippy
  1136.                        @click.stop="$refs.visibility.click()">
  1137.                        <icon :name="IsVisible(selectedFile) ? 'eye' : 'eye-slash'" scale="1.1"></icon>
  1138.                    </span>
  1139.                </div>
  1140.            </div>
  1141.  
  1142.            <div class="level-right">
  1143.                
  1144.                <div class="level-item">
  1145.                    <span class="icon is-large link is-black"
  1146.                        title="Download File"
  1147.                        v-tippy
  1148.                        @click.prevent="saveFile(selectedFile)">
  1149.                        <icon name="download" scale="1.1"></icon>
  1150.                    </span>
  1151.                </div>
  1152.            </div>
  1153.        </div>
  1154.    </div>
  1155. </v-touch>
  1156.                </div>
  1157.            </transition>
  1158.        </div>
  1159.        <button class="modal-close is-large" @click.stop="toggleModal()"></button>
  1160.    </div>
  1161.  
  1162.    
  1163.    <div v-if="isActiveModal('imageEditor_modal')"
  1164.        class="modal mm-animated fadeIn is-active __modal-editor">
  1165.        <v-touch class="modal-background link" @dbltap="toggleModal()"></v-touch>
  1166.        <div class="mm-animated fadeInDown __modal-content-wrapper">
  1167.            <image-editor route="https://trainanywhere.app/media/upload-cropped"
  1168.                :no-scroll="noScroll"
  1169.                :file="selectedFile"
  1170.                :trans="trans">
  1171.            </image-editor>
  1172.        </div>
  1173.        <button class="modal-close is-large" @click.stop="toggleModal()"></button>
  1174.    </div>
  1175.  
  1176.    
  1177.    <div class="modal mm-animated fadeIn"
  1178.        :class="{'is-active': isActiveModal('save_link_modal')}">
  1179.        <div class="modal-background link" @click.stop="toggleModal()"></div>
  1180.        <div class="modal-card mm-animated fadeInDown">
  1181.            <header class="modal-card-head is-black">
  1182.                <p class="modal-card-title">
  1183.                    <span>Upload Image From Url</span>
  1184.                </p>
  1185.                <button type="button" class="delete" @click.stop="toggleModal()"></button>
  1186.            </header>
  1187.  
  1188.            <form action="https://trainanywhere.app/media/upload-link" @submit.prevent="saveLinkForm($event)">
  1189.                <section class="modal-card-body">
  1190.                    <input class="input" type="text"
  1191.                        v-model="urlToUpload"
  1192.                        placeholder="Url ..."
  1193.                        ref="save_link_modal_input">
  1194.                </section>
  1195.                <footer class="modal-card-foot">
  1196.                    <button type="reset" class="button" @click.stop="toggleModal()">
  1197.                        Cancel
  1198.                    </button>
  1199.                    <button type="submit"
  1200.                        class="button is-link"
  1201.                        :disabled="isLoading"
  1202.                        :class="{'is-loading': isLoading}">
  1203.                        Upload
  1204.                    </button>
  1205.                </footer>
  1206.            </form>
  1207.        </div>
  1208.    </div>
  1209.  
  1210.    
  1211.    <div class="modal mm-animated fadeIn"
  1212.        :class="{'is-active': isActiveModal('new_folder_modal')}">
  1213.        <div class="modal-background link" @click.stop="toggleModal()"></div>
  1214.        <div class="modal-card mm-animated fadeInDown">
  1215.            <header class="modal-card-head is-link">
  1216.                <p class="modal-card-title">
  1217.                    <span>Add New Folder</span>
  1218.                </p>
  1219.                <button type="button" class="delete" @click.stop="toggleModal()"></button>
  1220.            </header>
  1221.  
  1222.            <form action="https://trainanywhere.app/media/create-new-folder" @submit.prevent="NewFolderForm($event)">
  1223.                <section class="modal-card-body">
  1224.                    <input class="input" type="text"
  1225.                        v-model="newFolderName"
  1226.                        placeholder="New Folder Name"
  1227.                        ref="new_folder_modal_input">
  1228.                </section>
  1229.                <footer class="modal-card-foot">
  1230.                    <button type="reset" class="button" @click.stop="toggleModal()">
  1231.                        Cancel
  1232.                    </button>
  1233.                    <button type="submit"
  1234.                        class="button is-link"
  1235.                        :disabled="isLoading"
  1236.                        :class="{'is-loading': isLoading}">
  1237.                        Create New Folder
  1238.                    </button>
  1239.                </footer>
  1240.            </form>
  1241.        </div>
  1242.    </div>
  1243.  
  1244.    
  1245.    <div class="modal mm-animated fadeIn"
  1246.        :class="{'is-active': isActiveModal('rename_file_modal')}">
  1247.        <div class="modal-background link" @click.stop="toggleModal()"></div>
  1248.        <div class="modal-card mm-animated fadeInDown">
  1249.            <header class="modal-card-head is-warning">
  1250.                <p class="modal-card-title">
  1251.                    <span>Rename File/Folder</span>
  1252.                </p>
  1253.                <button type="button" class="delete" @click.stop="toggleModal()"></button>
  1254.            </header>
  1255.  
  1256.            <form action="https://trainanywhere.app/media/rename-file" @submit.prevent="RenameFileForm($event)">
  1257.                <section class="modal-card-body">
  1258.                    <h3 class="title">New File/Folder Name</h3>
  1259.                    <input class="input" type="text"
  1260.                        v-if="selectedFile"
  1261.                        v-model="newFilename"
  1262.                        ref="rename_file_modal_input"
  1263.                        @focus="newFilename = selectedFileIs('folder') ? selectedFile.name : getFileName(selectedFile.name)">
  1264.                </section>
  1265.                <footer class="modal-card-foot">
  1266.                    <button type="reset" class="button" @click.stop="toggleModal()">
  1267.                        Cancel
  1268.                    </button>
  1269.                    <button type="submit"
  1270.                        class="button is-warning"
  1271.                        :disabled="isLoading"
  1272.                        :class="{'is-loading': isLoading}">
  1273.                        Rename
  1274.                    </button>
  1275.                </footer>
  1276.            </form>
  1277.        </div>
  1278.    </div>
  1279.  
  1280.    
  1281.    <div class="modal mm-animated fadeIn"
  1282.        :class="{'is-active': isActiveModal('move_file_modal')}">
  1283.        <div class="modal-background link" @click.stop="toggleModal()"></div>
  1284.        <form class="modal-card mm-animated fadeInDown"
  1285.            action="https://trainanywhere.app/media/move-file"
  1286.            @submit.prevent="MoveFileForm($event)">
  1287.            <header class="modal-card-head is-warning">
  1288.                <p class="modal-card-title">
  1289.                    <transition :name="copyFilesNotMove ? 'mm-info-in' : 'mm-info-out'" mode="out-in">
  1290.                        <span class="icon" :key="copyFilesNotMove ? 1 : 2">
  1291.                            <icon :name="copyFilesNotMove ? 'clone' : 'share'"></icon>
  1292.                        </span>
  1293.                    </transition>
  1294.  
  1295.                    <transition name="mm-list" mode="out-in">
  1296.                        <span key="1" v-if="copyFilesNotMove">Copy File/Folder</span>
  1297.                        <span key="2" v-else>Move File/Folder</span>
  1298.                    </transition>
  1299.                </p>
  1300.                <button type="button" class="delete" @click.stop="toggleModal()"></button>
  1301.            </header>
  1302.  
  1303.            <section class="modal-card-body">
  1304.                
  1305.                <h5 class="subtitle m-b-20">
  1306.                    Destination Folder :
  1307.                    <span class="tag is-black is-medium">{{ files.path || '/' }}</span>
  1308.                </h5>
  1309.  
  1310.                <template v-if="movableItemsFilter.length">
  1311.    <ul>
  1312.        <li class="media link"
  1313.            v-for="(one, i) in movableItemsFilter"
  1314.            :key="one.path"
  1315.            v-tippy="{arrow: true, placement: 'bottom'}"
  1316.            title="Remove"
  1317.            @click.stop="removeFromMovableList(i)">
  1318.            <figure class="media-left">
  1319.                <span class="icon has-text-link">
  1320.                    <icon-types :file="one" :file-type-is="fileTypeIs"/>
  1321.                </span>
  1322.            </figure>
  1323.            <div class="media-content">
  1324.                <p class="title is-4">
  1325.                    <strong class="has-text-link">{{ one.storage_path }}</strong>
  1326.                    <small v-if="one.items" class="has-text-link">"{{ one.items }} Item(s)"</small>
  1327.                </p>
  1328.                <p class="subtitle is-5 has-text-danger">{{ getFileSize(one.size) }}</p>
  1329.            </div>
  1330.            <figure class="media-right">
  1331.                <span class="delete"></span>
  1332.            </figure>
  1333.        </li>
  1334.    </ul>
  1335.  
  1336.    
  1337.    <p v-if="movableItemsFilterSize" class="__modal-delete-total">
  1338.        <span class="title">{{ movableItemsFilterSize }}</span>
  1339.        <span class="heading">Total</span>
  1340.    </p>
  1341. </template>
  1342.            </section>
  1343.  
  1344.            <footer class="modal-card-foot">
  1345.                <div class="level is-mobile full-width">
  1346.                    
  1347.                    <div class="level-left">
  1348.                        <div class="level-item">
  1349.                            <div class="form-switcher">
  1350.                                <input type="checkbox" name="use_copy" id="use_copy" v-model="copyFilesNotMove">
  1351.                                <label class="switcher" for="use_copy"></label>
  1352.                            </div>
  1353.                        </div>
  1354.                        <div class="level-item">
  1355.                            <label class="label" for="use_copy">Copy Files Instead ?</label>
  1356.                        </div>
  1357.                    </div>
  1358.  
  1359.                    
  1360.                    <div class="level-right">
  1361.                        <div class="level-item">
  1362.                            <button type="reset"
  1363.                                class="button"
  1364.                                @click.stop="toggleModal()">
  1365.                                Cancel
  1366.                            </button>
  1367.                        </div>
  1368.                        <div class="level-item">
  1369.                            <button type="reset"
  1370.                                class="button is-danger"
  1371.                                @click.stop="clearMovableList()">
  1372.                                Reset All
  1373.                            </button>
  1374.                        </div>
  1375.                        <div class="level-item">
  1376.                            <button type="submit"
  1377.                                ref="move_file_modal_submit"
  1378.                                class="button is-warning"
  1379.                                :disabled="isLoading"
  1380.                                :class="{'is-loading': isLoading}">
  1381.                                <span>Paste Here</span>
  1382.                            </button>
  1383.                        </div>
  1384.                    </div>
  1385.                </div>
  1386.            </footer>
  1387.        </form>
  1388.    </div>
  1389.  
  1390.    
  1391.    <div class="modal mm-animated fadeIn"
  1392.        :class="{'is-active': isActiveModal('confirm_delete_modal')}">
  1393.        <div class="modal-background link" @click.stop="toggleModal()"></div>
  1394.        <div class="modal-card mm-animated fadeInDown">
  1395.            <header class="modal-card-head is-danger">
  1396.                <p class="modal-card-title">
  1397.                    <span>Are You Sure You Want To Delete ?!!</span>
  1398.                </p>
  1399.                <button type="button" class="delete" @click.stop="toggleModal()"></button>
  1400.            </header>
  1401.  
  1402.            <form action="https://trainanywhere.app/media/delete-file"
  1403.                @submit.prevent="DeleteFileForm($event)">
  1404.                <section class="modal-card-body">
  1405.                    <template v-if="bulkItemsFilter.length">
  1406.    
  1407.    <template v-if="bulkItemsFilter.length <= 8">
  1408.        <div class="media" v-for="one in bulkItemsFilter" :key="one.path">
  1409.            <figure class="media-left">
  1410.                <span class="icon has-text-link">
  1411.                    <icon-types :file="selectedFile" :file-type-is="fileTypeIs"/>
  1412.                </span>
  1413.            </figure>
  1414.            <div class="media-content">
  1415.                <p class="title is-4">
  1416.                    <strong class="has-text-link">{{ one.name }}</strong>
  1417.                    <small v-if="one.items" class="has-text-link">"{{ one.items }} Item(s)"</small>
  1418.                </p>
  1419.                <p class="subtitle is-5 has-text-danger">{{ getFileSize(one.size) }}</p>
  1420.            </div>
  1421.        </div>
  1422.    </template>
  1423.  
  1424.    
  1425.    <template v-else>
  1426.        <div class="media">
  1427.            <figure class="media-left">
  1428.                <span class="icon has-text-link"><icon name="archive" scale="1.5"></icon></span>
  1429.            </figure>
  1430.            <div class="media-content">
  1431.                <p class="title is-4">
  1432.                    <strong>"{{ bulkItemsFilter.length }}"</strong>
  1433.                    <small class="has-text-link">Items Will Be Deleted !</small>
  1434.                </p>
  1435.            </div>
  1436.        </div>
  1437.    </template>
  1438.  
  1439.    
  1440.    <p v-if="bulkItemsFilterSize" class="__modal-delete-total">
  1441.        <span class="title">{{ bulkItemsFilterSize }}</span>
  1442.        <span class="heading">Total</span>
  1443.    </p>
  1444. </template>
  1445.  
  1446.  
  1447. <template v-else>
  1448.    <template v-if="selectedFile">
  1449.        <div class="media">
  1450.            <figure class="media-left">
  1451.                <span class="icon has-text-link">
  1452.                    <icon-types :file="selectedFile" :file-type-is="fileTypeIs" :scale="1.8"/>
  1453.                </span>
  1454.            </figure>
  1455.            <div class="media-content">
  1456.                <p class="title is-4">
  1457.                    <strong class="has-text-link">{{ selectedFile.name }}</strong>
  1458.                    <small v-if="selectedFile.items" class="has-text-link">
  1459.                        "{{ selectedFile.items }} Item(s)"
  1460.                    </small>
  1461.                </p>
  1462.                <p class="subtitle is-5 has-text-danger">{{ getFileSize(selectedFile.size) }}</p>
  1463.            </div>
  1464.        </div>
  1465.    </template>
  1466. </template>
  1467.  
  1468.                    
  1469.                    <h5 v-show="folderDeleteWarning" class="__modal-folder-warning">
  1470.                        <span class="icon is-medium"><icon name="warning" scale="1.2"></icon></span>
  1471.                        <span>Deleting A Folder Will Also Remove All Of Its Content</span>
  1472.                    </h5>
  1473.                </section>
  1474.  
  1475.                <footer class="modal-card-foot">
  1476.                    <button type="reset" class="button" @click.stop="toggleModal()">
  1477.                        Cancel
  1478.                    </button>
  1479.                    <button type="submit"
  1480.                        ref="confirm_delete_modal_submit"
  1481.                        class="button is-danger"
  1482.                        :disabled="isLoading"
  1483.                        :class="{'is-loading': isLoading}">
  1484.                        Yes, Delete It !
  1485.                    </button>
  1486.                </footer>
  1487.            </form>
  1488.        </div>
  1489.    </div>
  1490. </section>
  1491.    </div>
  1492. </media-manager>
  1493.  
  1494.  
  1495.  
  1496.  
  1497.                </div>
  1498.            </div>
  1499.        </div>
  1500.    </section>
  1501.    
  1502.        <link rel="stylesheet" href="https://trainanywhere.app/assets/vendor/MediaManager/style.css"/>
  1503.        <script src="//cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>
  1504.  
  1505.  
  1506.    <script src="https://trainanywhere.app/js/app.js"></script>
  1507. </body>
  1508. </html>
  1509.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!