2
2
* JavaScript functionality for the media management popup
4
4
* @author Andreas Gohr <andi@splitbrain.org>
5
* @author Pierre Spring <pierre.spring@caillou.ch>
8
var dw_mediamanager = {
16
// Image insertion opts
18
* Attach event handlers to all "folders" below the given element
20
* @author Andreas Gohr <andi@splitbrain.org>
22
treeattach: function(obj){
25
var items = obj.getElementsByTagName('li');
26
for(var i=0; i<items.length; i++){
29
// attach action to make the +/- clickable
30
var clicky = elem.getElementsByTagName('img')[0];
31
clicky.style.cursor = 'pointer';
32
addEvent(clicky,'click',function(event){ return media_manager.toggle(event,this); });
34
// attach action load folder list via AJAX
35
var link = elem.getElementsByTagName('a')[0];
36
link.style.cursor = 'pointer';
37
addEvent(link,'click',function(event){ return media_manager.list(event,this); });
42
* Attach the image selector action to all links below the given element
43
* also add the action to autofill the "upload as" field
45
* @author Andreas Gohr <andi@splitbrain.org>
47
selectorattach: function(obj){
50
var items = getElementsByClass('select',obj,'a');
51
for(var i=0; i<items.length; i++){
53
elem.style.cursor = 'pointer';
54
addEvent(elem,'click',function(event){ return media_manager.select(event,this); });
57
// hide syntax example
58
items = getElementsByClass('example',obj,'div');
59
for(var i=0; i<items.length; i++){
61
elem.style.display = 'none';
64
var file = $('upload__file');
66
addEvent(file,'change',media_manager.suggest);
70
* Attach deletion confirmation dialog to the delete buttons.
72
* Michael Klier <chi@chimeric.de>
74
confirmattach: function(obj){
77
items = getElementsByClass('btn_media_delete',obj,'a');
78
for(var i=0; i<items.length; i++){
80
addEvent(elem,'click',function(e){
81
if(e.target.tagName == 'IMG'){
82
var name = e.target.parentNode.title;
84
var name = e.target.title;
86
if(!confirm(LANG['del_confirm'] + "\n" + name)) {
97
* Creates checkboxes for additional options
99
* @author Andreas Gohr <andi@splitbrain.org>
101
attachoptions: function(obj){
106
var kobox = document.createElement('input');
107
kobox.type = 'checkbox';
108
kobox.id = 'media__keepopen';
109
if(DokuCookie.getValue('keepopen')){
110
kobox.checked = true;
111
kobox.defaultChecked = true; //IE wants this
112
media_manager.keepopen = true;
114
addEvent(kobox,'click',function(event){ return media_manager.togglekeepopen(event,this); });
116
var kolbl = document.createElement('label');
117
kolbl.htmlFor = 'media__keepopen';
118
kolbl.innerHTML = LANG['keepopen'];
120
var kobr = document.createElement('br');
122
obj.appendChild(kobox);
123
obj.appendChild(kolbl);
124
obj.appendChild(kobr);
128
var hdbox = document.createElement('input');
129
hdbox.type = 'checkbox';
130
hdbox.id = 'media__hide';
131
if(DokuCookie.getValue('hide')){
132
hdbox.checked = true;
133
hdbox.defaultChecked = true; //IE wants this
134
media_manager.hide = true;
136
addEvent(hdbox,'click',function(event){ return media_manager.togglehide(event,this); });
138
var hdlbl = document.createElement('label');
139
hdlbl.htmlFor = 'media__hide';
140
hdlbl.innerHTML = LANG['hidedetails'];
142
var hdbr = document.createElement('br');
144
obj.appendChild(hdbox);
145
obj.appendChild(hdlbl);
146
obj.appendChild(hdbr);
147
media_manager.updatehide();
151
* Toggles the keep open state
153
* @author Andreas Gohr <andi@splitbrain.org>
155
togglekeepopen: function(event,cb){
157
DokuCookie.setValue('keepopen',1);
158
media_manager.keepopen = true;
160
DokuCookie.setValue('keepopen','');
161
media_manager.keepopen = false;
166
* Toggles the hide details state
168
* @author Andreas Gohr <andi@splitbrain.org>
170
togglehide: function(event,cb){
172
DokuCookie.setValue('hide',1);
173
media_manager.hide = true;
175
DokuCookie.setValue('hide','');
176
media_manager.hide = false;
178
media_manager.updatehide();
182
* Sets the visibility of the image details accordingly to the
185
* @author Andreas Gohr <andi@splitbrain.org>
187
updatehide: function(){
188
var obj = $('media__content');
190
var details = getElementsByClass('detail',obj,'div');
191
for(var i=0; i<details.length; i++){
192
if(media_manager.hide){
193
details[i].style.display = 'none';
195
details[i].style.display = '';
201
* shows the popup for a image link
203
select: function(event,link){
204
var id = link.name.substr(2);
206
media_manager.id = id;
208
// if we don't run in popup display example
209
var ex = $('ex'+id.replace(/:/g,'_'));
210
if(ex.style.display == ''){
211
ex.style.display = 'none';
213
ex.style.display = '';
218
media_manager.ext = false;
219
var dot = id.lastIndexOf(".");
221
var ext = id.substr(dot,id.length);
223
if (ext != '.jpg' && ext != '.jpeg' && ext != '.png' && ext != '.gif' && ext != '.swf') {
224
media_manager.insert(null);
228
media_manager.insert(null);
232
media_manager.popup.style.display = 'inline';
233
media_manager.popup.style.left = event.pageX + 'px';
234
media_manager.popup.style.top = event.pageY + 'px';
236
// set all buttons to outset
237
for (var i = 1; i < 5; i++) {
238
media_manager.outSet('media__linkbtn' + i);
239
media_manager.outSet('media__alignbtn' + i);
240
media_manager.outSet('media__sizebtn' + i);
244
media_manager.ext = 'swf';
246
// disable display buttons for detail and linked image
247
$('media__linkbtn1').style.display = 'none';
248
$('media__linkbtn2').style.display = 'none';
250
// set the link button to default
251
if (media_manager.link !== false) {
252
if ( media_manager.link == '2' || media_manager.link == '1') {
253
media_manager.inSet('media__linkbtn3');
254
media_manager.link = '3';
255
DokuCookie.setValue('link','3');
257
media_manager.inSet('media__linkbtn'+media_manager.link);
259
} else if (DokuCookie.getValue('link')) {
260
if ( DokuCookie.getValue('link') == '2' || DokuCookie.getValue('link') == '1') {
261
// this options are not availible
262
media_manager.inSet('media__linkbtn3');
263
media_manager.link = '3';
264
DokuCookie.setValue('link','3');
266
media_manager.inSet('media__linkbtn'+DokuCookie.getValue('link'));
267
media_manager.link = DokuCookie.getValue('link');
271
media_manager.link = '3';
272
media_manager.inSet('media__linkbtn3');
273
DokuCookie.setValue('link','3');
276
// disable button for original size
277
$('media__sizebtn4').style.display = 'none';
278
if (media_manager.size == 4) {
279
media_manager.size = 2;
280
DokuCookie.setValue('size', '2');
281
media_manager.inSet('media__sizebtn2');
285
media_manager.ext = 'img';
287
// ensure that the display buttons are there
288
$('media__linkbtn1').style.display = 'inline';
289
$('media__linkbtn2').style.display = 'inline';
290
$('media__sizebtn4').style.display = 'inline';
292
// set the link button to default
293
if (DokuCookie.getValue('link')) {
294
media_manager.link = DokuCookie.getValue('link');
296
if (!media_manager.link) {
298
media_manager.link = '1';
299
DokuCookie.setValue('link','1');
301
media_manager.inSet('media__linkbtn'+media_manager.link);
304
if (media_manager.link == '4') {
305
media_manager.align = false;
306
media_manager.size = false;
307
$('media__align').style.display = 'none';
308
$('media__size').style.display = 'none';
310
$('media__align').style.display = 'block';
311
$('media__size').style.display = 'block';
313
// set the align button to default
314
if (media_manager.align !== false) {
315
media_manager.inSet('media__alignbtn'+media_manager.align);
316
} else if (DokuCookie.getValue('align')) {
317
media_manager.inSet('media__alignbtn'+DokuCookie.getValue('align'));
318
media_manager.align = DokuCookie.getValue('align');
321
media_manager.align = '1';
322
media_manager.inSet('media__alignbtn1');
323
DokuCookie.setValue('align','1');
326
// set the size button to default
327
if (DokuCookie.getValue('size')) {
328
media_manager.size = DokuCookie.getValue('size');
330
if (!media_manager.size || (media_manager.size === '4' && ext === '.swf')) {
332
media_manager.size = '2';
333
DokuCookie.setValue('size','2');
335
media_manager.inSet('media__sizebtn'+media_manager.size);
337
$('media__sendbtn').focus();
23
view_opts: {list: false, sort: false},
27
// The minimum height of the full-screen mediamanager in px
28
minHeights: {thumbs: 200, rows: 100},
32
$content = jQuery('#media__content');
33
$tree = jQuery('#media__tree');
35
dw_mediamanager.prepare_content($content);
37
dw_mediamanager.attachoptions();
38
dw_mediamanager.initpopup();
40
// add the action to autofill the "upload as" field
41
$content.delegate('#upload__file', 'change', dw_mediamanager.suggest)
42
// Attach the image selector action to all links
43
.delegate('a.select', 'click', dw_mediamanager.select)
44
// Attach deletion confirmation dialog to the delete buttons
45
.delegate('#media__content a.btn_media_delete', 'click',
46
dw_mediamanager.confirmattach)
47
.delegate('#mediamanager__done_form', 'submit', dw_mediamanager.list);
49
$tree.dw_tree({toggle_selector: 'img',
50
load_data: function (show_sublist, $clicky) {
51
// get the enclosed link (is always the first one)
52
var $link = $clicky.parent().find('div.li a.idx_dir');
55
DOKU_BASE + 'lib/exe/ajax.php',
56
$link[0].search.substr(1) + '&call=medians',
62
toggle_display: function ($clicky, opening) {
64
DOKU_BASE + 'lib/images/' +
65
(opening ? 'minus' : 'plus') + '.gif');
67
$tree.delegate('a', 'click', dw_mediamanager.list);
70
dw_mediamanager.set_fileview_list();
72
dw_mediamanager.init_options();
74
dw_mediamanager.image_diff();
75
dw_mediamanager.init_ajax_uploader();
77
// changing opened tab in the file list panel
78
jQuery('#mediamanager__page div.filelist').delegate('ul.tabs a', 'click', dw_mediamanager.list)
79
// loading file details
80
.delegate('div.panelContent a', 'click', dw_mediamanager.details)
82
.delegate('#dw__mediasearch', 'submit', dw_mediamanager.list)
83
// "upload as" field autofill
84
.delegate('#upload__file', 'change', dw_mediamanager.suggest)
86
.delegate('.qq-upload-file a', 'click', dw_mediamanager.details);
88
// changing opened tab in the file details panel
89
jQuery('#mediamanager__page div.file').delegate('ul.tabs a', 'click', dw_mediamanager.details)
90
// "update new version" button
91
.delegate('#mediamanager__btn_update', 'submit', dw_mediamanager.list)
93
.delegate('#page__revisions', 'submit', dw_mediamanager.details)
94
.delegate('#page__revisions a', 'click', dw_mediamanager.details)
96
.delegate('#mediamanager__save_meta', 'submit', dw_mediamanager.details)
98
.delegate('#mediamanager__btn_delete', 'submit', dw_mediamanager.details)
99
// "restore this version" button
100
.delegate('#mediamanager__btn_restore', 'submit', dw_mediamanager.details)
101
// less/more recent buttons in media revisions form
102
.delegate('.btn_newer, .btn_older', 'submit', dw_mediamanager.details);
104
dw_mediamanager.update_resizable();
105
dw_mediamanager.layout_width = jQuery("#mediamanager__page").width();
106
jQuery(window).resize(dw_mediamanager.window_resize);
109
init_options: function () {
110
var $options = jQuery('div.filelist div.panelHeader form.options'),
111
$listType, $sortBy, $both;
112
if ($options.length === 0) {
116
$listType = $options.find('li.listType');
117
$sortBy = $options.find('li.sortBy');
118
$both = $listType.add($sortBy);
120
// Remove the submit button
121
$options.find('input[type=submit]').parent().hide();
123
// Prepare HTML for jQuery UI buttonset
124
$both.find('label').each(function () {
125
var $this = jQuery(this);
126
$this.children('input').appendTo($this.parent());
133
$listType.children('input').change(function (event) {
134
dw_mediamanager.set_fileview_list();
136
$sortBy.children('input').change(function (event) {
137
dw_mediamanager.set_fileview_sort();
138
dw_mediamanager.list.call(jQuery('#dw__mediasearch')[0] || this, event);
346
145
* @author Dominik Eckelmann <eckelmann@cosmocode.de>
348
initpopup: function() {
350
media_manager.popup = document.createElement('div');
351
media_manager.popup.setAttribute('id','media__popup');
352
media_manager.popup.style.display = 'none';
354
var root = document.getElementById('media__manager');
355
if (root === null) return;
356
root.appendChild(media_manager.popup);
358
var headline = document.createElement('h1');
359
headline.innerHTML = LANG.mediatitle;
360
var headlineimg = document.createElement('img');
361
headlineimg.src = DOKU_BASE + 'lib/images/close.png';
362
headlineimg.id = 'media__closeimg';
363
addEvent(headlineimg,'click',function(event){ return media_manager.closePopup(event,this); });
364
headline.insertBefore(headlineimg, headline.firstChild);
365
media_manager.popup.appendChild(headline);
366
drag.attach(media_manager.popup,headline);
370
var linkp = document.createElement('p');
372
linkp.id = "media__linkstyle";
373
if (media_manager.display == "2") {
374
linkp.style.display = "none";
377
var linkl = document.createElement('label');
378
linkl.innerHTML = LANG.mediatarget;
379
linkp.appendChild(linkl);
381
var linkbtns = ['lnk', 'direct', 'nolnk', 'displaylnk'];
382
for (var i = 0 ; i < linkbtns.length ; ++i) {
383
var linkbtn = document.createElement('button');
384
linkbtn.className = 'button';
385
linkbtn.id = "media__linkbtn" + (i+1);
386
linkbtn.title = LANG['media' + linkbtns[i]];
387
linkbtn.style.borderStyle = 'outset';
388
addEvent(linkbtn,'click',function(event){ return media_manager.setlink(event,this); });
390
var linkimg = document.createElement('img');
391
linkimg.src = DOKU_BASE + 'lib/images/media_link_' + linkbtns[i] + '.png';
393
linkbtn.appendChild(linkimg);
394
linkp.appendChild(linkbtn);
397
media_manager.popup.appendChild(linkp);
401
var alignp = document.createElement('p');
402
var alignl = document.createElement('label');
404
alignp.appendChild(alignl);
405
alignp.id = 'media__align';
406
if (media_manager.display == "2") {
407
alignp.style.display = "none";
409
alignl.innerHTML = LANG['mediaalign'];
411
var alignbtns = ['noalign', 'left', 'center', 'right'];
412
for (var n = 0 ; n < alignbtns.length ; ++n) {
413
var alignbtn = document.createElement('button');
414
var alignimg = document.createElement('img');
415
alignimg.src = DOKU_BASE + 'lib/images/media_align_' + alignbtns[n] + '.png';
417
alignbtn.id = "media__alignbtn" + (n+1);
418
alignbtn.title = LANG['media' + alignbtns[n]];
419
alignbtn.className = 'button';
420
alignbtn.appendChild(alignimg);
421
alignbtn.style.borderStyle = 'outset';
422
addEvent(alignbtn,'click',function(event){ return media_manager.setalign(event,this); });
424
alignp.appendChild(alignbtn);
427
media_manager.popup.appendChild(alignp);
431
var sizep = document.createElement('p');
432
var sizel = document.createElement('label');
434
sizep.id = 'media__size';
435
if (media_manager.display == "2") {
436
sizep.style.display = "none";
438
sizep.appendChild(sizel);
439
sizel.innerHTML = LANG['mediasize'];
441
var sizebtns = ['small', 'medium', 'large', 'original'];
442
for (var size = 0 ; size < sizebtns.length ; ++size) {
443
var sizebtn = document.createElement('button');
444
var sizeimg = document.createElement('img');
446
sizep.appendChild(sizebtn);
447
sizeimg.src = DOKU_BASE + 'lib/images/media_size_' + sizebtns[size] + '.png';
449
sizebtn.className = 'button';
450
sizebtn.appendChild(sizeimg);
451
sizebtn.id = 'media__sizebtn' + (size + 1);
452
sizebtn.title = LANG['media' + sizebtns[size]];
453
sizebtn.style.borderStyle = 'outset';
454
addEvent(sizebtn,'click',function(event){ return media_manager.setsize(event,this); });
457
media_manager.popup.appendChild(sizep);
459
// send and close button
461
var btnp = document.createElement('p');
462
media_manager.popup.appendChild(btnp);
463
btnp.setAttribute('class','btnlbl');
465
var btn = document.createElement('input');
467
btn.id = 'media__sendbtn';
468
btn.setAttribute('class','button');
469
btn.value = LANG['mediainsert'];
470
btnp.appendChild(btn);
471
addEvent(btn,'click',function(event){ return media_manager.insert(event); });
147
initpopup: function () {
148
var opts, $insp, $insbtn;
150
dw_mediamanager.$popup = jQuery(document.createElement('div'))
151
.attr('id', 'media__popup_content')
152
.dialog({autoOpen: false, width: 280, modal: true,
153
draggable: true, title: LANG.mediatitle,
156
opts = [{id: 'link', label: LANG.mediatarget,
157
btns: ['lnk', 'direct', 'nolnk', 'displaylnk']},
158
{id: 'align', label: LANG.mediaalign,
159
btns: ['noalign', 'left', 'center', 'right']},
160
{id: 'size', label: LANG.mediasize,
161
btns: ['small', 'medium', 'large', 'original']}
164
jQuery.each(opts, function (_, opt) {
166
$p = jQuery(document.createElement('p'))
167
.attr('id', 'media__' + opt.id);
169
if (dw_mediamanager.display === "2") {
173
$l = jQuery(document.createElement('label'))
177
jQuery.each(opt.btns, function (i, text) {
179
$btn = jQuery(document.createElement('button'))
181
.attr('id', "media__" + opt.id + "btn" + (i + 1))
182
.attr('title', LANG['media' + text])
183
.click(bind(dw_mediamanager.setOpt, opt.id));
185
$img = jQuery(document.createElement('img'))
186
.attr('src', DOKU_BASE + 'lib/images/media_' +
187
opt.id + '_' + text + '.png');
193
dw_mediamanager.$popup.append($p);
197
$insp = jQuery(document.createElement('p'));
198
dw_mediamanager.$popup.append($insp);
200
$insbtn = jQuery(document.createElement('input'))
201
.attr('id', 'media__sendbtn')
202
.attr('type', 'button')
204
.val(LANG.mediainsert);
205
$insp.append($insbtn);
477
211
* @author Andreas Gohr <andi@splitbrain.org>
478
212
* @author Dominik Eckelmann <eckelmann@cosmocode.de>
213
* @author Pierre Spring <pierre.spring@caillou.ch>
480
insert: function(event){
481
var id = media_manager.id;
215
insert: function (id) {
216
var opts, alignleft, alignright, edid, s;
482
218
// set syntax options
483
$('media__popup').style.display = 'none';
490
if (media_manager.ext == 'img' || media_manager.ext == 'swf') {
492
if (media_manager.link == '4') {
219
dw_mediamanager.$popup.dialog('close');
225
if ({img: 1, swf: 1}[dw_mediamanager.ext] === 1) {
227
if (dw_mediamanager.link === '4') {
493
228
opts = '?linkonly';
496
if (media_manager.link == "3" && media_manager.ext == 'img') {
231
if (dw_mediamanager.link === "3" && dw_mediamanager.ext === 'img') {
497
232
opts = '?nolink';
499
} else if (media_manager.link == "2" && media_manager.ext == 'img') {
233
} else if (dw_mediamanager.link === "2" && dw_mediamanager.ext === 'img') {
500
234
opts = '?direct';
504
var s = parseInt(media_manager.size, 10);
237
s = parseInt(dw_mediamanager.size, 10);
507
opts += (optsstart)?'&':'?';
510
if (media_manager.ext == 'swf') {
239
if (s && s >= 1 && s < 4) {
240
opts += (opts.length)?'&':'?';
241
opts += dw_mediamanager.size + '00';
242
if (dw_mediamanager.ext === 'swf') {
515
if (media_manager.ext == 'swf') {
520
if (media_manager.ext == 'swf') {
525
if (media_manager.align == '2') {
529
if (media_manager.align == '3') {
533
if (media_manager.align == '4') {
256
if (dw_mediamanager.align !== '1') {
257
alignleft = dw_mediamanager.align === '2' ? '' : ' ';
258
alignright = dw_mediamanager.align === '4' ? '' : ' ';
539
var edid = String.prototype.match.call(document.location, /&edid=([^&]+)/);
540
edid = edid ? edid[1] : 'wiki__text';
541
opener.insertTags(edid,'{{'+alignleft+id+opts+alignright+'|','}}','');
262
edid = String.prototype.match.call(document.location, /&edid=([^&]+)/);
263
opener.insertTags(edid ? edid[1] : 'wiki__text',
264
'{{'+alignleft+id+opts+alignright+'|','}}','');
543
if(!media_manager.keepopen) window.close();
266
if(!dw_mediamanager.keepopen) {
549
* list the content of a namespace using AJAX
551
* @author Andreas Gohr <andi@splitbrain.org>
553
list: function(event,link){
554
// prepare an AJAX call to fetch the subtree
555
var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php');
556
ajax.AjaxFailedAlert = '';
557
ajax.encodeURIString = false;
558
if(ajax.failed) return true;
562
var content = $('media__content');
563
content.innerHTML = '<img src="'+DOKU_BASE+'lib/images/loading.gif" alt="..." class="load" />';
565
ajax.elementObj = content;
566
ajax.afterCompletion = function(){
567
media_manager.selectorattach(content);
568
media_manager.confirmattach(content);
569
media_manager.updatehide();
570
media_manager.initFlashUpload();
572
ajax.runAJAX(link.search.substr(1)+'&call=medialist');
578
* Open or close a subtree using AJAX
580
* @author Andreas Gohr <andi@splitbrain.org>
582
toggle: function(event,clicky){
583
var listitem = clicky.parentNode;
585
// if already open, close by removing the sublist
586
var sublists = listitem.getElementsByTagName('ul');
588
listitem.removeChild(sublists[0]);
589
clicky.src = DOKU_BASE+'lib/images/plus.gif';
593
// get the enclosed link (is always the first one)
594
var link = listitem.getElementsByTagName('a')[0];
596
// prepare an AJAX call to fetch the subtree
597
var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php');
598
ajax.AjaxFailedAlert = '';
599
ajax.encodeURIString = false;
600
if(ajax.failed) return true;
603
var ul = document.createElement('ul');
604
//fixme add classname here
605
listitem.appendChild(ul);
606
ajax.elementObj = ul;
607
ajax.afterCompletion = function(){ media_manager.treeattach(ul); };
608
ajax.runAJAX(link.search.substr(1)+'&call=medians');
609
clicky.src = DOKU_BASE+'lib/images/minus.gif';
614
274
* Prefills the wikiname.
616
276
* @author Andreas Gohr <andi@splitbrain.org>
618
278
suggest: function(){
619
var file = $('upload__file');
620
var name = $('upload__name');
621
if(!file || !name) return;
623
var text = file.value;
279
var $file, $name, text;
281
$file = jQuery(this);
282
$name = jQuery('#upload__name');
284
if ($name.val() != '') return;
286
if(!$file.length || !$name.length) {
624
291
text = text.substr(text.lastIndexOf('/')+1);
625
292
text = text.substr(text.lastIndexOf('\\')+1);
630
initFlashUpload: function(){
631
if(!hasFlash(8)) return;
632
var oform = $('dw__upload');
633
var oflash = $('dw__flashupload');
634
if(!oform || !oflash) return;
636
var clicky = document.createElement('img');
637
clicky.src = DOKU_BASE+'lib/images/multiupload.png';
638
clicky.title = LANG['mu_btn'];
639
clicky.alt = LANG['mu_btn'];
640
clicky.style.cursor = 'pointer';
641
clicky.onclick = function(){
642
oform.style.display = 'none';
643
oflash.style.display = '';
645
oform.appendChild(clicky);
649
* closes the link type popup
651
closePopup: function(event) {
652
$('media__popup').style.display = 'none';
658
* @author Dominik Eckelmann <eckelmann@cosmocode.de>
660
setalign: function(event,cb){
662
var id = cb.id.substring(cb.id.length -1);
664
DokuCookie.setValue('align',id);
665
media_manager.align = id;
666
for (var i = 1; i<=4; i++) {
667
media_manager.outSet("media__alignbtn" + i);
669
media_manager.inSet("media__alignbtn"+id);
671
DokuCookie.setValue('align','');
672
media_manager.align = false;
678
* @author Dominik Eckelmann <eckelmann@cosmocode.de>
680
setlink: function(event,cb){
681
var id = cb.id.substring(cb.id.length -1);
683
DokuCookie.setValue('link',id);
684
for (var i = 1; i<=4; i++) {
685
media_manager.outSet("media__linkbtn"+i);
687
media_manager.inSet("media__linkbtn"+id);
689
var size = document.getElementById("media__size");
690
var align = document.getElementById("media__align");
692
size.style.display = "block";
693
align.style.display = "block";
694
if (media_manager.link == '4') {
695
media_manager.align = '1';
696
DokuCookie.setValue('align', '1');
697
media_manager.inSet('media__alignbtn1');
699
media_manager.size = '2';
700
DokuCookie.setValue('size', '2');
701
media_manager.inSet('media__sizebtn2');
705
size.style.display = "none";
706
align.style.display = "none";
708
media_manager.link = id;
710
DokuCookie.setValue('link','');
711
media_manager.link = false;
716
* set the display type
718
* @author Dominik Eckelmann <eckelmann@cosmocode.de>
720
setdisplay: function(event,cb){
722
DokuCookie.setValue('display',cb.value);
723
media_manager.display = cb.value;
724
media_manager.outSet("media__displaybtn1");
725
media_manager.outSet("media__displaybtn2");
726
media_manager.inSet("media__displaybtn"+cb.value);
729
DokuCookie.setValue('display','');
730
media_manager.align = false;
735
* sets the border to outset
737
outSet: function(id) {
738
var ele = document.getElementById(id);
739
if (ele == null) return;
740
ele.style.borderStyle = "outset";
743
* sets the border to inset
745
inSet: function(id) {
746
var ele = document.getElementById(id);
747
if (ele == null) return;
748
ele.style.borderStyle = "inset";
754
* @author Dominik Eckelmann <eckelmann@cosmocode.de>
756
setsize: function(event,cb){
757
var id = cb.id.substring(cb.id.length -1);
759
DokuCookie.setValue('size',id);
760
media_manager.size = id;
761
for (var i = 1 ; i <=4 ; ++i) {
762
media_manager.outSet("media__sizebtn" + i);
764
media_manager.inSet("media__sizebtn"+id);
766
DokuCookie.setValue('size','');
767
media_manager.width = false;
297
* list the content of a namespace using AJAX
299
* @author Andreas Gohr <andi@splitbrain.org>
300
* @author Pierre Spring <pierre.spring@caillou.ch>
302
list: function (event) {
303
var $link, $content, params;
306
event.preventDefault();
309
jQuery('div.success, div.info, div.error, div.notify').remove();
311
$link = jQuery(this);
314
$content = jQuery('#media__content');
316
if ($content.length === 0) {
317
//fullscreen media manager
318
$content = jQuery('div.filelist');
320
if ($link.hasClass('idx_dir')) {
322
jQuery('div.file').empty();
323
jQuery('div.namespaces .selected').removeClass('selected');
324
$link.addClass('selected');
328
params = 'call=medialist&';
330
if ($link[0].search) {
331
params += $link[0].search.substr(1);
332
} else if ($link.is('form')) {
333
params += dw_mediamanager.form_params($link);
334
} else if ($link.closest('form').length > 0) {
335
params += dw_mediamanager.form_params($link.closest('form'));
339
dw_mediamanager.update_content($content, params);
343
* Returns form parameters
345
* @author Kate Arzamastseva <pshns@ukr.net>
347
form_params: function ($form) {
348
if (!$form.length) return;
350
var i = $form[0].action.indexOf('?');
351
if (i >= 0) action = $form[0].action.substr(i+1);
352
return action+'&'+$form.serialize();
355
set_fileview_list: function (new_type) {
356
dw_mediamanager.set_fileview_opt(['list', 'listType', function (new_type) {
357
jQuery('div.filelist div.panelContent ul')
358
.toggleClass('rows', new_type === 'rows')
359
.toggleClass('thumbs', new_type === 'thumbs');
362
// FIXME: Move to onchange handler (opt[2])?
363
dw_mediamanager.resize();
366
set_fileview_sort: function (new_sort) {
367
dw_mediamanager.set_fileview_opt(['sort', 'sortBy', function (new_sort) {
372
set_fileview_opt: function (opt, new_val) {
373
if (typeof new_val === 'undefined') {
374
new_val = jQuery('form.options li.' + opt[1] + ' input')
375
.filter(':checked').val();
376
// if new_val is still undefined (because form.options is not in active tab), set to most spacious option
377
if (typeof new_val === 'undefined') {
382
if (new_val !== dw_mediamanager.view_opts[opt[0]]) {
385
DokuCookie.setValue(opt[0], new_val);
387
dw_mediamanager.view_opts[opt[0]] = new_val;
392
* Lists the content of the right column (image details) using AJAX
394
* @author Kate Arzamastseva <pshns@ukr.net>
396
details: function (event) {
397
var $link, $content, params, update_list;
398
$link = jQuery(this);
399
event.preventDefault();
401
jQuery('div.success, div.info, div.error, div.notify').remove();
403
if ($link[0].id == 'mediamanager__btn_delete' && !confirm(LANG.del_confirm)) {
406
if ($link[0].id == 'mediamanager__btn_restore' && !confirm(LANG.restore_confirm)) {
410
$content = jQuery('div.file');
411
params = 'call=mediadetails&';
413
if ($link[0].search) {
414
params += $link[0].search.substr(1);
415
} else if ($link.is('form')) {
416
params += dw_mediamanager.form_params($link);
417
} else if ($link.closest('form').length > 0) {
418
params += dw_mediamanager.form_params($link.closest('form'));
421
update_list = ($link[0].id == 'mediamanager__btn_delete' ||
422
$link[0].id == 'mediamanager__btn_restore');
424
dw_mediamanager.update_content($content, params, update_list);
427
update_content: function ($content, params, update_list) {
431
DOKU_BASE + 'lib/exe/ajax.php',
434
dw_mediamanager.$resizables().resizable('destroy');
437
dw_mediamanager.list.call(jQuery('input[value="Apply"]')[0]);
442
dw_mediamanager.prepare_content($content);
443
dw_mediamanager.updatehide();
445
dw_mediamanager.update_resizable();
446
dw_behaviour.revisionBoxHandler();
448
// Make sure that the list view style stays the same
449
dw_mediamanager.set_fileview_list(dw_mediamanager.view_opts.list);
451
dw_mediamanager.image_diff();
452
dw_mediamanager.init_ajax_uploader();
453
dw_mediamanager.init_options();
458
$container = $content.find('div.panelContent');
459
if ($container.length === 0) {
460
$container = $content;
462
$container.html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
465
window_resize: function () {
466
dw_mediamanager.resize();
468
dw_mediamanager.opacity_slider();
469
dw_mediamanager.portions_slider();
472
$resizables: function () {
473
return jQuery('#mediamanager__page').find('div.namespaces, div.filelist');
477
* Updates mediamanager layout
479
* @author Kate Arzamastseva <pshns@ukr.net>
481
update_resizable: function () {
482
$resizables = dw_mediamanager.$resizables();
484
$resizables.resizable({
486
resize: function(event, ui){
487
var widthFull = jQuery('#mediamanager__page').width();
488
var widthResizables = 0;
489
$resizables.each(function() {
490
widthResizables += jQuery(this).width();
492
var $filePanel = jQuery('#mediamanager__page div.panel.file');
494
// set max width of resizable column
495
var widthOtherResizable = widthResizables - jQuery(this).width();
496
var minWidthNonResizable = parseFloat($filePanel.css("min-width"));
497
var maxWidth = widthFull - (widthOtherResizable + minWidthNonResizable);
498
$resizables.resizable( "option", "maxWidth", maxWidth );
500
// width of file panel in % = 100% - width of resizables in %
501
// this calculates with 99.99 and not 100 to overcome rounding errors
502
var relWidthNonResizable = 99.99 - (100 * widthResizables / widthFull);
503
// set width of file panel
504
$filePanel.width(relWidthNonResizable+'%');
506
// FIXME: please fix without browser sniffing
507
if (!jQuery.browser.webkit) {
508
$resizables.each(function() {
509
w = jQuery(this).width();
510
w = (99.99 * w / widthFull);
512
jQuery(this).width(w);
516
dw_mediamanager.opacity_slider();
517
dw_mediamanager.portions_slider();
521
dw_mediamanager.resize();
524
resize: function () {
525
var $contents = jQuery('#mediamanager__page div.panelContent'),
526
height = jQuery(window).height() - jQuery(document.body).height() +
527
Math.max.apply(null, jQuery.map($contents, function (v) {
528
return jQuery(v).height();
531
// If the screen is too small, don’t try to resize
532
if (height < dw_mediamanager.minHeights[dw_mediamanager.view_opts.list]) {
533
$contents.add(dw_mediamanager.$resizables()).height('auto');
535
$contents.height(height);
536
dw_mediamanager.$resizables().each(function () {
537
var $this = jQuery(this);
538
$this.height(height + $this.find('div.panelContent').offset().top -
545
* Prints 'select' for image difference representation type
547
* @author Kate Arzamastseva <pshns@ukr.net>
549
image_diff: function () {
550
if (jQuery('#mediamanager__difftype').length) return;
552
$form = jQuery('#mediamanager__form_diffview');
553
if (!$form.length) return;
555
$label = jQuery(document.createElement('label'));
556
$label.append('<span>'+LANG.media_diff+'</span> ');
557
$select = jQuery(document.createElement('select'))
558
.attr('id', 'mediamanager__difftype')
559
.attr('name', 'difftype')
560
.change(dw_mediamanager.change_diff_type);
561
$select.append(new Option(LANG.media_diff_both, "both"));
562
$select.append(new Option(LANG.media_diff_opacity, "opacity"));
563
$select.append(new Option(LANG.media_diff_portions, "portions"));
564
$label.append($select);
565
$form.append($label);
568
var select = document.getElementById('mediamanager__difftype');
569
select.options[0].text = LANG.media_diff_both;
570
select.options[1].text = LANG.media_diff_opacity;
571
select.options[2].text = LANG.media_diff_portions;
575
* Handles selection of image difference representation type
577
* @author Kate Arzamastseva <pshns@ukr.net>
579
change_diff_type: function () {
580
$select = jQuery('#mediamanager__difftype');
581
$content = jQuery('#mediamanager__diff');
583
params = dw_mediamanager.form_params($select.closest('form'))+'&call=mediadiff';
585
DOKU_BASE + 'lib/exe/ajax.php',
589
dw_mediamanager.portions_slider();
590
dw_mediamanager.opacity_slider();
597
* Sets options for opacity diff slider
599
* @author Kate Arzamastseva <pshns@ukr.net>
601
opacity_slider: function () {
602
var $slider = jQuery( "#mediamanager__diff div.slider" );
603
if (!$slider.length) return;
605
var $image = jQuery('#mediamanager__diff div.imageDiff.opacity div.image1 img');
606
if (!$image.length) return;
607
$slider.width($image.width()-20);
610
$slider.slider("option", "min", 0);
611
$slider.slider("option", "max", 0.999);
612
$slider.slider("option", "step", 0.001);
613
$slider.slider("option", "value", 0.5);
614
$slider.bind("slide", function(event, ui) {
615
jQuery('#mediamanager__diff div.imageDiff.opacity div.image2 img').css({ opacity: $slider.slider("option", "value")});
620
* Sets options for red line diff slider
622
* @author Kate Arzamastseva <pshns@ukr.net>
624
portions_slider: function () {
625
var $image1 = jQuery('#mediamanager__diff div.imageDiff.portions div.image1 img');
626
var $image2 = jQuery('#mediamanager__diff div.imageDiff.portions div.image2 img');
627
if (!$image1.length || !$image2.length) return;
629
var $div = jQuery("#mediamanager__diff");
630
if (!$div.length) return;
633
$image2.parent().width('97%');
634
$image1.width('100%');
635
$image2.width('100%');
637
if ($image1.width() < $div.width()) {
638
$div.width($image1.width());
641
$image2.parent().width('50%');
642
$image2.width($image1.width());
643
$image1.width($image1.width());
645
var $slider = jQuery("#mediamanager__diff div.slider");
646
if (!$slider.length) return;
647
$slider.width($image1.width()-20);
650
$slider.slider("option", "min", 0);
651
$slider.slider("option", "max", 97);
652
$slider.slider("option", "step", 1);
653
$slider.slider("option", "value", 50);
654
$slider.bind("slide", function(event, ui) {
655
jQuery('#mediamanager__diff div.imageDiff.portions div.image2').css({ width: $slider.slider("option", "value")+'%'});
660
* Parse a URI query string to an associative array
662
* @author Kate Arzamastseva <pshns@ukr.net>
664
params_toarray: function (str) {
666
var hashes = str.split('&');
667
for(var i = 0; i < hashes.length; i++) {
668
hash = hashes[i].split('=');
669
vars[decodeURIComponent(hash[0])] = decodeURIComponent(hash[1]);
674
init_ajax_uploader: function () {
675
if (!jQuery('#mediamanager__uploader').length) return;
676
if (jQuery('.qq-upload-list').length) return;
678
var params = dw_mediamanager.form_params(jQuery('#dw__upload'))+'&call=mediaupload';
679
params = dw_mediamanager.params_toarray(params);
681
var uploader = new qq.FileUploaderExtended({
682
element: document.getElementById('mediamanager__uploader'),
683
action: DOKU_BASE + 'lib/exe/ajax.php',
688
prepare_content: function ($content) {
689
// hide syntax example
690
$content.find('div.example:visible').hide();
694
* shows the popup for a image link
696
select: function(event){
697
var $link, id, dot, ext;
699
event.preventDefault();
701
$link = jQuery(this);
702
id = $link.attr('name').substr(2);
705
// if we don't run in popup display example
706
// the id's are a bit wierd and jQuery('#ex_wiki_dokuwiki-128.png')
707
// will not be found by Sizzle (the CSS Selector Engine
708
// used by jQuery), hence the document.getElementById() call
709
jQuery(document.getElementById('ex_'+id.replace(/:/g,'_').replace(/^_/,''))).dw_toggle();
713
dw_mediamanager.ext = false;
714
dot = id.lastIndexOf(".");
717
dw_mediamanager.insert(id);
721
ext = id.substr(dot);
723
if ({'.jpg':1, '.jpeg':1, '.png':1, '.gif':1, '.swf':1}[ext] !== 1) {
724
dw_mediamanager.insert(id);
728
// remove old callback from the insert button and set the new one.
729
jQuery('#media__sendbtn').unbind().click(bind(dw_mediamanager.insert, id));
731
dw_mediamanager.unforbid('ext');
732
if (ext === '.swf') {
733
dw_mediamanager.ext = 'swf';
734
dw_mediamanager.forbid('ext', {link: ['1', '2'],
737
dw_mediamanager.ext = 'img';
741
dw_mediamanager.setOpt('link');
742
dw_mediamanager.setOpt('align');
743
dw_mediamanager.setOpt('size');
745
// toggle buttons for detail and linked image, original size
746
jQuery('#media__linkbtn1, #media__linkbtn2, #media__sizebtn4')
747
.toggle(dw_mediamanager.ext === 'img');
749
dw_mediamanager.$popup.dialog('open');
751
jQuery('#media__sendbtn').focus();
755
* Deletion confirmation dialog to the delete buttons.
757
* @author Michael Klier <chi@chimeric.de>
758
* @author Pierre Spring <pierre.spring@caillou.ch>
760
confirmattach: function(e){
761
if(!confirm(LANG.del_confirm + "\n" + jQuery(this).attr('title'))) {
767
* Creates checkboxes for additional options
769
* @author Andreas Gohr <andi@splitbrain.org>
770
* @author Pierre Spring <pierre.spring@caillou.ch>
772
attachoptions: function(){
775
$obj = jQuery('#media__opts');
776
if($obj.length === 0) {
783
opts.push(['keepopen', 'keepopen']);
785
opts.push(['hide', 'hidedetails']);
790
$box = jQuery(document.createElement('input'))
791
.attr('type', 'checkbox')
792
.attr('id', 'media__' + opt[0])
793
.click(bind(dw_mediamanager.toggleOption,
796
if(DokuCookie.getValue(opt[0])){
797
$box.prop('checked', true);
798
dw_mediamanager[opt[0]] = true;
801
$lbl = jQuery(document.createElement('label'))
802
.attr('for', 'media__' + opt[0])
805
$obj.append($box, $lbl, document.createElement('br'));
808
dw_mediamanager.updatehide();
812
* Generalized toggler
814
* @author Pierre Spring <pierre.spring@caillou.ch>
816
toggleOption: function (variable) {
817
if (jQuery(this).prop('checked')) {
818
DokuCookie.setValue(variable, 1);
819
dw_mediamanager[variable] = true;
821
DokuCookie.setValue(variable, '');
822
dw_mediamanager[variable] = false;
824
if (variable === 'hide') {
825
dw_mediamanager.updatehide();
830
* Sets the visibility of the image details accordingly to the
833
* @author Andreas Gohr <andi@splitbrain.org>
835
updatehide: function(){
836
jQuery('#media__content div.detail').dw_toggle(!dw_mediamanager.hide);
840
* set media insertion option
842
* @author Dominik Eckelmann <eckelmann@cosmocode.de>
844
setOpt: function(opt, e){
846
if (typeof e !== 'undefined') {
847
val = this.id.substring(this.id.length - 1);
849
val = dw_mediamanager.getOpt(opt);
853
DokuCookie.setValue(opt,'');
854
dw_mediamanager[opt] = false;
858
if (opt === 'link') {
859
if (val !== '4' && dw_mediamanager.link === '4') {
860
dw_mediamanager.unforbid('linkonly');
861
dw_mediamanager.setOpt('align');
862
dw_mediamanager.setOpt('size');
863
} else if (val === '4') {
864
dw_mediamanager.forbid('linkonly', {align: false, size: false});
867
jQuery("#media__size, #media__align").dw_toggle(val !== '4');
870
DokuCookie.setValue(opt, val);
871
dw_mediamanager[opt] = val;
873
for (i = 1; i <= 4; i++) {
874
jQuery("#media__" + opt + "btn" + i).removeClass('selected');
876
jQuery('#media__' + opt + 'btn' + val).addClass('selected');
879
unforbid: function (group) {
880
delete dw_mediamanager.forbidden_opts[group];
883
forbid: function (group, forbids) {
884
dw_mediamanager.forbidden_opts[group] = forbids;
887
allowedOpt: function (opt, val) {
889
jQuery.each(dw_mediamanager.forbidden_opts,
890
function (_, forbids) {
891
ret = forbids[opt] !== false &&
892
jQuery.inArray(val, forbids[opt]) === -1;
898
getOpt: function (opt) {
899
var allowed = bind(dw_mediamanager.allowedOpt, opt);
902
if (dw_mediamanager[opt] !== false && allowed(dw_mediamanager[opt])) {
903
return dw_mediamanager[opt];
907
if (DokuCookie.getValue(opt) && allowed(DokuCookie.getValue(opt))) {
908
return DokuCookie.getValue(opt);
912
if (opt === 'size' && allowed('2')) {
916
// Whatever is allowed, and be it false
917
return jQuery.grep(['1', '2', '3', '4'], allowed)[0] || false;
772
addInitEvent(function(){
773
media_manager.treeattach($('media__tree'));
774
media_manager.selectorattach($('media__content'));
775
media_manager.confirmattach($('media__content'));
776
media_manager.attachoptions($('media__opts'));
777
media_manager.initpopup();
778
media_manager.initFlashUpload();
921
// moved from helpers.js temporarily here
923
* Very simplistic Flash plugin check, probably works for Flash 8 and higher only
926
function hasFlash(version){
929
if(navigator.plugins !== null && navigator.plugins.length > 0){
930
ver = navigator.plugins["Shockwave Flash"].description.split(' ')[2].split('.')[0];
932
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
933
ver = axo.GetVariable("$version").split(' ')[1].split(',')[0];
937
return ver >= version;
940
jQuery(dw_mediamanager.init);
added
removed
lib/scripts/media.js
