관리-도구

편집 파일: app.js

<div class="input-group">
                            <div class="input-group-prepend"><span class="input-group-text">${t("Title")}</span></div>
                            <input type="text" id="cf_media_file_title" class="form-control" v-bind:value="current_file.title">
                            </div>

<div class="input-group mt-2">
                            <div class="input-group-prepend"><span class="input-group-text">${t("URL")}</span></div>
                            <input type="text" class="form-control" v-bind:value="current_file.url" data-bs-toggle="tooltip" title="${t('Click to copy.')}" v-on:click="doCopyCurrentURL()">
                            <div v-on:click="doCopyCurrentURL()" class="input-group-append">
                                <span class="input-group-text"><i class="fas fa-copy" data-bs-toggle="tooltip" title="${t('Click to copy.')}"></i></span>
                            </div>
                            </div>
                            <div class="input-group mt-2">
                            <div class="input-group-prepend"><span class="input-group-text">${t("File URL")}</span></div>
                            <input type="text" class="form-control" v-bind:value="current_file.file_url"  v-on:click="doCopyCurrentFileURL()">
                            <div v-on:click="doCopyCurrentFileURL()" class="input-group-append">
                                <span class="input-group-text"><i class="fas fa-copy" data-bs-toggle="tooltip" title="${t('Click to copy.')}"></i></span>
                            </div>
                            </div>
                            <div class="input-group mt-2">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">${t("Permission")}</div>
                                </div>
                                <select id="cf_media_file_permission" class="form-control form-select" v-bind:value="current_file.permission">
                                    <option value="public">${t("Public")}</option>
                                    <option value="private">${t("Restricted to members")}</option>
                                </select>
                            </div>
                            <div class="mt-2">
                            <label>${t("Description")}</label>
                            <textarea 
                            id="cf_media_file_desc" class="form-control" v-text="current_file.description" placeholder="${t('Enter file detail.')}"></textarea>
                            </div>
                            <div class="mb-3 mt-4">
                            <div class="row">
                            <div class="col-sm-4 cf-course-chbtn"><button class="btn btn-danger mt-1" v-on:click="doDeleteFile()"><i class="fas fa-trash"></i></button></div>
                            <div class="col-sm-8">
                            <button class="btn btn-primary theme-button btn-block form-control" v-on:click="doSaveFileData()"><i class="fas fa-save"></i>&nbsp;&nbsp;${t("Save Detail")}</button>
                            </div>
                            </div>
                            </div>
                            <p class="text-danger text-right mt-0" v-if="err.trim().length>0" v-html="err"></p>
                            <p class="text-success text-right mt-0" v-if="msg.trim().length>0" v-html="msg"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>`;

let container= `<div class="row main_row">
    
    <div class="col-sm-12" v-if="storage.state.view=='init'">
    <center><br><br><br><h1 style="opacity: 0.5; font-size:200px"><i class="fas fa-spinner fa-spin"></i></h1></center>
    </div>
    
    <div class="col-sm-12" v-else-if="storage.state.view=='uploader'">${media_uploader}</div>
    
    <div class="col-sm-12" v-else-if="storage.state.view">${all_media}</div>
    
    <div class="col-sm-12" v-else></div>
</div>`;

let external_container= `
    <div class="container-fluid external-media-loader overlay">

<div class="row d-flex justify-content-center">
    <div class="col-sm-10">
    <div class="card pnl">
    <div class="card-header">
    <div class="row">
    <div class="col-sm-10">Media</div>
    <div class="col-sm-2 text-right"> <i class="fas fa-times-circle" style="cursor:pointer" onclick="closeMedia()"></i></div>
    </div>
    </div>
    <div class="card-body external-content-body">
    ${container}
    </div>
    <div class="card-footer text-right" v-if="current_file !==null">
        <button class="btn theme-button form-control" v-on:click="doExport(false)"><i class="fas fa-file-import"></i>&nbsp;&nbsp;${t("Import Secure File")}</button>
        <button class="btn theme-button form-control" v-on:click="doExport(true)"><i class="fas fa-file-import"></i>&nbsp;&nbsp;${t("Import File")}</button>
    </div>
    </div>
    </div>
    </div>

</div>
    `;

Vue.component('media_app',{
        template: `<div>
        <div style="display:none;"><button type="button" class="plupload_browse_file">${t("File Browse")}</button></div>
        <div v-if="use_mode=='external'" class="external-container-media">${external_container}</div>
        <div v-else>${container}</div>
        </div>`,
        mounted: function(){
            if(this.storage.state.view=='init')
            {
                this.loadCurrentCategoryAssets(true);
            }
            this.doAssignPluploader();
        },
        updated: function(){
            setTimeout(()=>{
                $(function () {
                    //$('[data-bs-toggle="tooltip"]').tooltip()
                  });
            }, 1000);
        },
        data: function(){return {
            storage: media_storage,
            
            request: new ajaxRequest(),
            uploading: false,
            upload_stat: null,
            err: '',
            msg: '',
            page_load_err: '',
            search_content: '',
            searching: false,
            get_order: 'desc',
            uploader: false,
            uploadDone: 0,
        }},
        props:['view', 'use_mode'],
        methods: {
            t:function(txt,arr=[]){
                return t(txt,arr);
            },
            doAssignPluploader: function()
            {
                this.uploader= new plupload.Uploader({
                    browse_button: document.querySelectorAll(".plupload_browse_file")[0], // this can be an id of a DOM element or the DOM element itself
                    url: 'req.php',
                    multipart_params : {
                        "manage_media" : 1,
                        "upload" : 1
                    }
                    });
                this.uploader.init();

this.uploader.setOption('chunk_size', '4mb');

this.uploader.bind('FilesAdded', (up, files)=> {
                if(this.uploader.files.length > 1)
                {
                    this.uploader.removeFile(this.uploader.files[0]);
                    this.uploader.refresh();// must refresh for flash runtime
                }
                this.doUpload('change', {target:{files}});
            });

this.uploader.bind('UploadProgress', (up, file)=> {
                this.uploadDone= file.percent;
                this.err= "";
                if(parseInt(this.uploadDone)===100)
                {
                    this.processPostUpload('1');
                }
              });
               
              this.uploader.bind('Error', (up, err)=> {
                this.err = "Error #" + err.code + ": " + err.message;
                 if(this.uploading)
                 {
                     let err= this.err;
                     this.err= "";
                    this.processPostUpload(this.err);
                 }
              });
            },
            processPostUpload: function(res)
            {
                res=res.trim();
                this.uploading= false;
                if(res=='1')
                {
                    this.msg=t("File uploaded successfully.");
                    this.upload_stat =true;
                    setTimeout(()=>{
                        this.storage.commit('update', {
                            current_type: 'all'
                        });
                        this.changeView('all', true);
                    }, 1000);
                }
                else
                {
                    this.err= res;
                    this.upload_stat= false;
                    console.log(res);
                }
                setTimeout(()=>{this.upload_stat= null;}, 1000);
            },
            doUpload:function(step='init', e=null){
                this.err= "";
                this.msg= "";
                this.upload_stat= null;
                this.uploadDone= 0;

if(step=='init')
                {
                    document.querySelectorAll(".plupload_browse_file")[0].click();
                    //document.querySelectorAll(`input[vid='cf_file_inp']`)[0].click();
                }
                else if(step=='change')
                {
                    let file= e.target.files[0];
                    this.storage.commit('update',{uploadable_file: file});
                }
                else if(step=='upload')
                {
                    this.uploading= true;
                    this.uploader.start();
                }
            },
            getObjectKeyCount: function(ob){
                try
                {
                    return Object.keys(ob).length;
                }catch(err){
                    console.log(err);
                    return 0;
                }
            },
            getCurrentFilesCount: function()
            {
                try
                {
                    return Object.keys(this.storage.state.files[this.storage.state.current_type]).length;
                }catch(err){return 0;}
            },
            changeView: function(view, re_render=false)
            {
                this.err="";
                this.msg="";
                this.storage.commit('update', {view,
                    selected_file: null,
                    uploadable_file: null,
                });
                if(re_render)
                {
                    if(view !=='uploader'|| view !=='init')
                    {
                        //alert("loading");
                        this.loadCurrentCategoryAssets();
                    }
                }
                this.doResetSearch();
            },
            doChangeCategory: function(categ){
                this.storage.commit('update',{
                    current_type: categ
                });
                try
                {
                    if(Object.keys(this.storage.state.files[categ]).length<1)
                    {
                        this.loadCurrentCategoryAssets();
                    }
                    this.doResetSearch();
                }catch(err){console.log(err);}
            },
            loadCurrentCategoryAssets: async function(init=false, page_only=false){
                return new Promise((resolve, reject)=>{
                    let current_view= this.storage.state.view;
                    let type= this.storage.state.current_type;
                    let page= (page_only)? this.storage.state.selected_page: 1;
                    //alert(page);

});
            },
            getFileFSIcon(file, type)
            {
                let arr=file.trim().split('.');
                let ext=arr[arr.length-1].toLowerCase();

},
            getSize(bytes)
            {
                var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                if (bytes == 0) return '0 Byte';
                var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
                return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
            },
            doExport:function(check)
            {
                let is_html= ((cf_media_export_html !==undefined) && cf_media_export_html)? true: false;
                let current_file= this.current_file;

if(this.current_file !==null)
                {
                    if(global_cf_media_export_callback !==undefined && global_cf_media_export_callback)
                    {
                        let file_url='';
                        if(check)
                        {
                            file_url= this.current_file.file_url;

}else{
                            file_url= this.current_file.url;
                        }
                        let content=file_url;
                        if(is_html)
                        {
                            let type= current_file.type;
                            if(type=='image')
                            {
                                content= `<img src="${file_url}" alt="${current_file.title}"/>`;
                            }
                            else if(type== 'audio')
                            {
                                content= `<audio controls>
                                <source src="${file_url}" type="audio/ogg">
                                Your browser does not support the audio element.
                                </audio>`;
                            }
                            else if(type== 'video')
                            {
                                content= `<video class="video-js" controls>
                                <source src="${file_url}" type="video/mp4">
                              Your browser does not support the video tag.
                              </video>`;
                            }
                            else
                            {
                                content= `<a href="${file_url}">${current_file.title}</a>`;
                            }
                        }
                        global_cf_media_export_callback(content);
                        closeMedia();
                    }
                }
                else
                {
                    return;
                }
            },
            doLoadMore: async function(e){
                e.target.disabled= true;
                this.page_load_err= "";