-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
364 lines (349 loc) · 16.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
<html>
<head>
<title>Media Manager</title>
<link href="dist/mediamanager.min.css" rel="stylesheet" type="text/css" />
<link href="dist/dropzone.min.css" rel="stylesheet" type="text/css" />
<link href="example/src/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="example/src/summernote.css" rel="stylesheet" type="text/css" />
<link href="example/src/zenburn.css" rel="stylesheet" type="text/css" />
<style>
body {padding-top: 50px;}
</style>
</head>
<body>
<div class="container">
<div class="row" style="margin-bottom: 50px;">
<div class="col-md-12">
<div class="jumbotron text-center">
<h1>Media Manager</h1>
<h3>A Vanilla Javascript Media Manager</h3>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 50px;">
<div class="col-md-12 text-center">
<h2>Media Manager is built by mimicking Wordpress Media Manager. <br>
As iam no good with words, lets take a look what this plugin does.
</h2>
</div>
</div>
<div class="row" style="margin-bottom: 50px;">
<div class="col-md-10 col-md-push-1">
<div class="text-center" style="margin-bottom: 20px;">
<h1><code>Mediamanager with Summernote WYSIWYG editor</code></h1>
</div>
<div id="summernoteMedia" class="btn btn-primary" style="margin-bottom: 10px;">Media Manager</div>
<div id="summernote">
<h1>Summernote</h1>
</div>
<div style="margin-top: 20px;">
<pre><code>// 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);
}
});</code></pre>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 50px;">
<div class="col-md-10 col-md-push-1">
<div class="text-center" style="margin-bottom: 20px;">
<h1><code>Mediamanager with CKEditor WYSIWYG</code></h1>
</div>
<div id="ckeditorMedia" class="btn btn-primary" style="margin-bottom: 10px;">Media Manager</div>
<div id="editor">
<h1>Hello world!</h1>
<p>I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>
</div>
<div style="margin-top: 20px;">
<pre><code>// 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 );
}
});</code></pre>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 50px;">
<div class="col-md-10 col-md-push-1">
<h2 class="text-center">How to install</h2>
<pre><code class="html">
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. <a href="#uploadUrl">read-more</a>
</code></pre>
</div>
</div>
<div class="row" style="margin-bottom: 50px;">
<div class="col-md-10 col-md-push-1">
<h2 class="text-center" style="margin-bottom: 20px; margin-top: 0;">All possible Media Manager options</h2>
<div id="allOptionsButton" class="btn btn-primary">Media Manager</div>
<div style="margin-top: 20px; margin-bottom: 20px;">
<pre><code>// 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 () {}
});</code></pre>
</div>
<table class="table table-bordered table-striped">
<tr>
<td width="20%">Options</td>
<td width="20%">Default</td>
<td width="10%">Accept</td>
<td width="50%">Description</td>
</tr>
<tr>
<td><code>buttonText</code></td>
<td>string: <span class="text-success">'Insert to Post'</span></td>
<td><span class="text-success">'string'</span></td>
<td>Footer `Insert to Post` button when there are one or more selected item text.</td>
</tr>
<tr>
<td><code>loadItemsUrl</code></td>
<td><span class="text-primary">null</span></td>
<td><span class="text-success">'string'</span></td>
<td>Url for load all media items for first time, the data returned should be a json with format. <a href="#loadItemsUrl">read-here</a></td>
</tr>
<tr>
<td><code>loadNextItemsUrl</code></td>
<td><span class="text-primary">null</span></td>
<td><span class="text-success">'string'</span></td>
<td>Url for load next media items, the data returned should be a json with format. <a href="#loadNextItemsUrl">read-here</a></td>
</tr>
<tr>
<td><code>loadNextItemDelay</code></td>
<td>integer: <span class="text-primary">5000(ms)</span></td>
<td><span class="text-primary">integer</span></td>
<td>Delay in milisecond, how many second needed for mediamanager to be enable to load next item.</td>
</tr>
<tr>
<td><code>deleteButtonText</code></td>
<td>string: <span class="text-success">'Delete'</span></td>
<td><span class="text-success">'string'</span></td>
<td>Delete button text at single media item.</td>
</tr>
<tr>
<td><code>deleteConfirmationText</code></td>
<td>string: <span class="text-success">'Are you sure?'</span></td>
<td><span class="text-success">'string'</span></td>
<td>Confirmation alert message when deleting a media item.</td>
</tr>
<tr>
<td><code>deleteItemUrl</code></td>
<td><span class="text-primary">null</span></td>
<td><span class="text-success">'string'</span></td>
<td>Url for delete media item. If this specified, enable delete feature. <a href="#deleteItemUrl">read-here</a></td>
</tr>
<tr>
<td><code>uploadUrl</code></td>
<td><span class="text-primary">null</span></td>
<td><span class="text-success">'string'</span></td>
<td>Url for upload media items, the data returned should be a json with format. <a href="#uploadUrl">read-here</a></td>
</tr>
<tr>
<td><code>insertType</code></td>
<td>string: <span class="text-success">'object'</span></td>
<td><span class="text-success">'string'</span></td>
<td>Data produced by Media Manager when `Insert to post` button pressed. <a href="#insertType">read-here</a></td>
</tr>
<tr>
<td><code>insert</code></td>
<td>function: function(){}</td>
<td><span class="text-primary">function</span></td>
<td>Function to be executed when `Insert to post` button pressed. <a href="#insert">read-here</a></td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-push-1">
<table class="table table-striped table-bordered">
<tr id="loadItemsUrl">
<td width="20%"><code>loadItemsUrl</code></td>
<td>
<pre><code class="html">// loadItemsUrl
1. Example file: expected returned json <a href="example/loadfiles.json" target="_blank">loadfiles.json</a>
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",
}
</code></pre>
</td>
</tr>
<tr id="loadNextItemsUrl">
<td width="20%"><code>loadNextItemsUrl</code></td>
<td>
<pre><code class="html">// loadNextItemsUrl
1. Example file: expected returned json <a href="example/loadnextfiles.json" target="_blank">loadnextfiles.json</a>
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.
</code></pre>
</td>
</tr>
<tr id="deleteItemUrl">
<td><code>deleteItemUrl</code></td>
<td>
<pre><code class="html">// 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.</code></pre>
</td>
</tr>
<tr id="uploadUrl">
<td><code>uploadUrl</code></td>
<td>
<pre><code class="html">// 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: <a href="example/uploadfiles.php" target="_blank">uploadfiles.php</a> for uploading files using PHP, this is a minimalistic approach
</code></pre>
</td>
</tr>
<tr id="insertType">
<td><code>insertType</code></td>
<td>
<pre><code class="html">// 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
</code></pre>
</td>
</tr>
<tr id="insert">
<td><code>insert</code></td>
<td>
<pre><code class="html">// 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
</code></pre>
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="example/src/jquery.js" type="text/javascript"></script>
<script src="example/src/bootstrap.js" type="text/javascript"></script>
<script src="example/src/summernote.js" type="text/javascript"></script>
<script src="example/src/highlight.pack.js" type="text/javascript"></script>
<script src="example/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="dist/dropzone.min.js" type="text/javascript"></script>
<script src="dist/mediamanager.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
$('#summernote').summernote();
CKEDITOR.replace( 'editor' );
var oEditor = CKEDITOR.instances.editor;
var mediamanager = new Mediamanager({
loadItemsUrl: 'loadfiles.json',
});
document.getElementById('summernoteMedia').addEventListener('click', function () {
mediamanager.open();
mediamanager.options.insertType = 'html';
mediamanager.options.insert = function (data) {
$('#summernote').summernote('insertNode', data);
}
});
$('#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 );
}
});
var mediamanager2 = new Mediamanager({
buttonText: 'Insert to Post',
deleteButtonText: 'Delete',
deleteConfirmationText: 'Are you sure?',
deleteItemUrl: '/',
loadItemsUrl: 'loadfiles.json',
loadNextItemsUrl: 'loadnextfiles.json',
loadNextItemDelay: 3000,
uploadUrl: '/',
insertType: 'object',
insert: function (data) {
console.log(data);
}
});
$('#allOptionsButton').click(function () {
mediamanager2.open();
});
});
</script>
</body>
</html>