Media Manager

A Vanilla Javascript Media Manager

Media Manager is built by mimicking Wordpress Media Manager.
As iam no good with words, lets take a look what this plugin does.

Mediamanager with Summernote WYSIWYG editor

Media Manager

Summernote

// Initialize Summernote
$('#summernote').summernote();

// Initialize Media Manager with minimal options
var mediamanager = new Mediamanager({
    loadItemsUrl: 'loadfiles.json',
    uploadUrl: '/'
});

// jQuery click event
$('#summernoteMedia').click(function () { 
    mediamanager.open();
    mediamanager.options.insertType = 'html';
    mediamanager.options.insert = function (data) {
        $('#summernote').summernote('insertNode', data);
    }
});

// of course you can do this too
document.getElementById('summernoteMedia').addEventListener('click', function () {
    mediamanager.open();
    mediamanager.options.insertType = 'html';
    mediamanager.options.insert = function (data) {
        $('#summernote').summernote('insertNode', data);
    }
});

Mediamanager with CKEditor WYSIWYG

Media Manager

Hello world!

I'm an instance of CKEditor.

// Initialize CKEditor
CKEDITOR.replace( 'editor' );
var oEditor = CKEDITOR.instances.editor;

// Initialize Media Manager with minimal options
var mediamanager = new Mediamanager({
    loadItemsUrl: 'loadfiles.json',
    uploadUrl: '/'
});

// jQuery click event
$('#ckeditorMedia').click(function () {
   mediamanager.open();
   mediamanager.options.insertType = 'string';
   mediamanager.options.insert = function (data) {
        var newElement = CKEDITOR.dom.element.createFromHtml( data, oEditor.document );
        oEditor.insertElement( newElement );
   }
});

// and also this
document.getElementById('summernoteMedia').addEventListener('click', function () {
   mediamanager.open();
   mediamanager.options.insertType = 'string';
   mediamanager.options.insert = function (data) {
        var newElement = CKEDITOR.dom.element.createFromHtml( data, oEditor.document );
        oEditor.insertElement( newElement );
   }
});

How to install


1. Download or clone the project.
2. Place the css and javascript for mediamanager at your head and body, and also put dropzone.css and dropzone.js to the page
3. A litle config is needed, and you're ready to go.
PS. dropzone.js is needed if you want to use the upload feature. read-more

All possible Media Manager options

Media Manager
// Initialize Media Manager with all options
var mediamanager = new Mediamanager({
    buttonText: 'Insert to Post',
    loadItemsUrl: '/loaditems',
    loadNextItemsUrl: '/loadnextitem',
    loadNextItemDelay: 5000,
    deleteButtonText: 'Delete',
    deleteConfirmationText: 'Are you sure?',
    deleteItemUrl: '/deleteitem',
    uploadUrl: '/uploadurl',
    insertType: 'object',
    insert: function () {}
});
Options Default Accept Description
buttonText string: 'Insert to Post' 'string' Footer `Insert to Post` button when there are one or more selected item text.
loadItemsUrl null 'string' Url for load all media items for first time, the data returned should be a json with format. read-here
loadNextItemsUrl null 'string' Url for load next media items, the data returned should be a json with format. read-here
loadNextItemDelay integer: 5000(ms) integer Delay in milisecond, how many second needed for mediamanager to be enable to load next item.
deleteButtonText string: 'Delete' 'string' Delete button text at single media item.
deleteConfirmationText string: 'Are you sure?' 'string' Confirmation alert message when deleting a media item.
deleteItemUrl null 'string' Url for delete media item. If this specified, enable delete feature. read-here
uploadUrl null 'string' Url for upload media items, the data returned should be a json with format. read-here
insertType string: 'object' 'string' Data produced by Media Manager when `Insert to post` button pressed. read-here
insert function: function(){} function Function to be executed when `Insert to post` button pressed. read-here
loadItemsUrl 
// loadItemsUrl
1.  Example file: expected returned json loadfiles.json
2. The current working example is using static file.
3. Better to limit the loaded file so the page load time doesnt heavy.
4. Each item is loaded as 'media item object'
5. The example file from No. 1, the 'media item object' is
{
    "path": "files/",
    "filename": "unsplash-1.jpg"
}
6. The example file from No. 1 is what to be expected from loading the data, though you can add more information to the 'media item object', and i encourage you to add the image id to it, so the delete function will be perfeclty functioned
{
    "id": 1,
    "path": "files/",
    "filename": "unsplash-1.jpg",
}
loadNextItemsUrl 
// loadNextItemsUrl
1. Example file: expected returned json loadnextfiles.json
2. The current working example is using static file.
3. The loadNextItem is happening when the scrollbar at Media Manager reach bottom, the loadNextItem has 5second delay (default)(can be changed) before can be executed again.
4. This function send the current total loaded item in Media Manager to be used at backend for showing the next loaded item, you can just see what data is sent at dev tools, network panel.
deleteItemUrl 
// deleteItemUrl
1. If this options is filled with a working URL, Media Manager will send additional 'media item object' to provide information about the item that is being deleted.
2. 'Media item object' is retrieved from loaded items object.
3. The current example of 'media item object' is:
{
    "path": "files/",
    "filename": "unsplash-1.jpg"
}
Or you can just see what data is sent when media item is being deleted at dev tools, network panel.
uploadUrl 
// uploadUrl
1. To enable the upload feature, include dropzone.js and specified what is the upload url, after successfully uploading the file, Media Manager will read the data returned from uploading and append it, so the expected data returned from uploading is exactly needed.
2. The expected returned data is a usual 'media item object' path and filename is most needed
{
    "path": "files/",
    "filename": "unsplash-1.jpg"
}
3. Please refer to: uploadfiles.php for uploading files using PHP, this is a minimalistic approach
insertType 
// insertType
1. insertType is accepting 'object', 'html', and 'string'
2. The data returned is:
object: The data will return 'media item object', like { "path": "files/", "filename": "unsplash-1.jpg" },
html: The data is returned as HTML DOM,
string: The data is returned as text, the data will be look like HTML DOM in the form of text.
3. Please do a test and look at dev tools console tab
insert 
// insert
1. This options accept a function, this function will be executed when 'Insert to post' button is pressed.
2. You can see how this function perform at the Media Manager example above