Library

Libaray plugin uses callback to accept data provided by user, allows user to implement this feature with any data sources and minmum effort.

Config Variables

//optional:
var elFunc = (d) => {
    const _node = document.createElement("img");
    _node.setAttribute("data-action", "upload");
    _node.setAttribute("src", o.download_url);
    _node.setAttribute("style","max-width:100%");
    return _node;
};

//optional:
var tileFunc : (d) => {
    const _btn = document.createElement("button");
    _btn.setAttribute("data-id",d.id);
    _btn.innerHTML = '<figure><figure><img src="'+(d.download_url)+'" alt="'+d.author+'"></figure></figure><span class="caption">'+d.author+'</span>';
    return _btn;
}

var cfg = {};
cfg["image.library.per.page"] = 10;
cfg["image.library.allow.paging"] = true;
cfg["image.library.allow.search"] = true;
cfg["image.library.fetch"] = (page, perpage, keyword, callback) => {
    var library_results = {};
    fetch("library.php?page="+page+"&perpage="+perpage+"&keyword="+encodeURIComponent(keyword), {method: 'get',headers: {'Accept': 'application/json'}}).then((response) => {
        return response.json();
        }).then((output) => {
        library_results = output;
        }).catch((err) => { 
        console.log(err);
        }).finally(() => {
        if(Object.keys(library_results).length) {
            //reformat it:
            var data = [];
            library_results.Data.forEach(d => {
                data.push({name : d.author, thumb : d.download_url, url : d.download_url, type : "image/jpeg", elFunc : () => elFunc(d), tileFunc : () => tileFunc(d)});
            });
            callback(library_results.Pages.Total, data);
        }
    });
};


new SubEditor(elem, {cfgList : cfg});

image.library.per.page

Number of results per page.

image.library.allow.paging

Allow paging.

image.library.allow.search

Allow to search using keyword.

image.library.fetch(page : Number, perpage : Number, keyword : string, callback : Function)

This is where all the magic happens. User defines how to get data in any format and from any data source. Data is then processed and converted to SubEditor via callback.

Callback(total: Number, data : Object)

total is the total number of results to be used to calcuate the paging. Data is an object for SubEditor to process and render.

//data, minimum requirement:
{
    name : "file name",
    type : "image/png",
    url : "https://....."
}

//optional
{
    name : "file name",
    type : "image/png",
    url : "https://.....",
    thumb: "https://...",
    elFunc : Function,
    tileFunc : Function
}

elFunc

(optional) elFunc should return the dom element to insert into SubEditor when user select the image or file.

tileFunc

(optional) tileFunc should return a button element to determine how the file is displayed in library. By default it will show the image (or thumbnail if thumb is provided) and file name. For non-image file, it will show the extension and file name.