xref: /dokuwiki/lib/scripts/media.js (revision 5e7a292691951a0fa0a18f06c8b9bcfb509a032d) 
1/**
2 * JavaScript functionality for the media management popup
3 *
4 * @author Andreas Gohr <andi@splitbrain.org>
5 * @author Pierre Spring <pierre.spring@caillou.ch>
6 */
7
8var dw_mediamanager = {
9    keepopen: false,
10    hide: false,
11    popup: false,
12    display: false,
13    ext: false,
14    $popup: null,
15
16    // Image insertion opts
17    align: false,
18    link: false,
19    size: false,
20    forbidden_opts: {},
21
22    // File list view type
23    view: false,
24
25    layout_width: 0,
26    layout_height: 0,
27
28    init: function () {
29        var $content, $tree;
30        $content = jQuery('#media__content');
31        $tree    = jQuery('#media__tree');
32
33        dw_mediamanager.prepare_content($content);
34
35        dw_mediamanager.attachoptions();
36        dw_mediamanager.initpopup();
37
38        // add the action to autofill the "upload as" field
39        $content.delegate('#upload__file', 'change', dw_mediamanager.suggest)
40                // Attach the image selector action to all links
41                .delegate('a.select', 'click', dw_mediamanager.select)
42                // Attach deletion confirmation dialog to the delete buttons
43                .delegate('#media__content a.btn_media_delete', 'click',
44                          dw_mediamanager.confirmattach)
45                .delegate('#mediamanager__done_form', 'submit', dw_mediamanager.list);
46
47        $tree.dw_tree({toggle_selector: 'img',
48                       load_data: function (show_sublist, $clicky) {
49                           // get the enclosed link (is always the first one)
50                           var $link = $clicky.parent().find('div.li a.idx_dir');
51
52                           jQuery.post(
53                               DOKU_BASE + 'lib/exe/ajax.php',
54                               $link[0].search.substr(1) + '&call=medians',
55                               show_sublist,
56                               'html'
57                           );
58                       },
59
60                       toggle_display: function ($clicky, opening) {
61                           $clicky.attr('src',
62                                        DOKU_BASE + 'lib/images/' +
63                                        (opening ? 'minus' : 'plus') + '.gif');
64                       }});
65        $tree.delegate('a', 'click', dw_mediamanager.list);
66
67        dw_mediamanager.set_filelist_view(dw_mediamanager.view, false);
68        jQuery('#mediamanager__form_sort').find('input[type=submit]').hide();
69        dw_mediamanager.image_diff();
70        dw_mediamanager.init_ajax_uploader();
71
72        // changing opened tab in the file list panel
73        jQuery('#mediamanager__layout_list').delegate('#mediamanager__tabs_files a', 'click', dw_mediamanager.list)
74            // changing type of the file list view
75            .delegate('#mediamanager__tabs_list a', 'click', dw_mediamanager.list_view)
76            // loading file details
77            .delegate('#mediamanager__file_list a', 'click', dw_mediamanager.details)
78            // search form
79            .delegate('#dw__mediasearch', 'submit', dw_mediamanager.list)
80            // "upload as" field autofill
81            .delegate('#upload__file', 'change', dw_mediamanager.suggest)
82            // sort type selection
83            .delegate('#mediamanager__form_sort select', 'change', dw_mediamanager.list)
84            // uploaded images
85            .delegate('.qq-upload-file a', 'click', dw_mediamanager.details);
86
87        // changing opened tab in the file details panel
88        jQuery('#mediamanager__layout_detail').delegate('#mediamanager__tabs_details a', 'click', dw_mediamanager.details)
89            // "update new version" button
90            .delegate('#mediamanager__btn_update', 'submit', dw_mediamanager.list)
91            // revisions form
92            .delegate('#page__revisions', 'submit', dw_mediamanager.details)
93            .delegate('#page__revisions a', 'click', dw_mediamanager.details)
94            // meta edit form
95            .delegate('#mediamanager__save_meta', 'submit', dw_mediamanager.details)
96            // delete button
97            .delegate('#mediamanager__btn_delete', 'submit', dw_mediamanager.details)
98            // "restore this version" button
99            .delegate('#mediamanager__btn_restore', 'submit', dw_mediamanager.details)
100            // less/more recent buttons in media revisions form
101            .delegate('.btn_newer, .btn_older', 'submit', dw_mediamanager.details);
102
103    },
104
105    /**
106     * build the popup window
107     *
108     * @author Dominik Eckelmann <eckelmann@cosmocode.de>
109     */
110    initpopup: function () {
111        var opts, $insp, $insbtn;
112
113        dw_mediamanager.$popup = jQuery(document.createElement('div'))
114                 .attr('id', 'media__popup_content')
115                 .dialog({autoOpen: false, width: 280, modal: true,
116                          draggable: true, title: LANG.mediatitle,
117                          resizable: false});
118
119        opts = [{id: 'link', label: LANG.mediatarget,
120                 btns: ['lnk', 'direct', 'nolnk', 'displaylnk']},
121                {id: 'align', label: LANG.mediaalign,
122                 btns: ['noalign', 'left', 'center', 'right']},
123                {id: 'size', label: LANG.mediasize,
124                 btns: ['small', 'medium', 'large', 'original']}
125               ];
126
127        jQuery.each(opts, function (_, opt) {
128            var $p, $l;
129            $p = jQuery(document.createElement('p'))
130                 .attr('id', 'media__' + opt.id);
131
132            if (dw_mediamanager.display === "2") {
133                $p.hide();
134            }
135
136            $l = jQuery(document.createElement('label'))
137                 .text(opt.label);
138            $p.append($l);
139
140            jQuery.each(opt.btns, function (i, text) {
141                var $btn, $img;
142                $btn = jQuery(document.createElement('button'))
143                       .addClass('button')
144                       .attr('id', "media__" + opt.id + "btn" + (i + 1))
145                       .attr('title', LANG['media' + text])
146                       .click(bind(dw_mediamanager.setOpt, opt.id));
147
148                $img = jQuery(document.createElement('img'))
149                       .attr('src', DOKU_BASE + 'lib/images/media_' +
150                                    opt.id + '_' + text + '.png');
151
152                $btn.append($img);
153                $p.append($btn);
154            });
155
156            dw_mediamanager.$popup.append($p);
157        });
158
159        // insert button
160        $insp = jQuery(document.createElement('p'))
161                .addClass('btnlbl');
162        dw_mediamanager.$popup.append($insp);
163
164        $insbtn = jQuery(document.createElement('input'))
165                  .attr('id', 'media__sendbtn')
166                  .attr('type', 'button')
167                  .addClass('button')
168                  .val(LANG.mediainsert);
169        $insp.append($insbtn);
170    },
171
172    /**
173     * Insert the clicked image into the opener's textarea
174     *
175     * @author Andreas Gohr <andi@splitbrain.org>
176     * @author Dominik Eckelmann <eckelmann@cosmocode.de>
177     * @author Pierre Spring <pierre.spring@caillou.ch>
178     */
179    insert: function (id) {
180        var opts, alignleft, alignright, edid, s;
181
182        // set syntax options
183        dw_mediamanager.$popup.dialog('close');
184
185        opts = '';
186        alignleft = '';
187        alignright = '';
188
189        if ({img: 1, swf: 1}[dw_mediamanager.ext] === 1) {
190
191            if (dw_mediamanager.link === '4') {
192                    opts = '?linkonly';
193            } else {
194
195                if (dw_mediamanager.link === "3" && dw_mediamanager.ext === 'img') {
196                    opts = '?nolink';
197                } else if (dw_mediamanager.link === "2" && dw_mediamanager.ext === 'img') {
198                    opts = '?direct';
199                }
200
201                s = parseInt(dw_mediamanager.size, 10);
202
203                if (s && s >= 1 && s < 4) {
204                    opts += (opts.length)?'&':'?';
205                    opts += dw_mediamanager.size + '00';
206                    if (dw_mediamanager.ext === 'swf') {
207                        switch (s) {
208                        case 1:
209                            opts += 'x62';
210                            break;
211                        case 2:
212                            opts += 'x123';
213                            break;
214                        case 3:
215                            opts += 'x185';
216                            break;
217                        }
218                    }
219                }
220                alignleft = dw_mediamanager.align === '2' ? '' : ' ';
221                alignright = dw_mediamanager.align === '4' ? '' : ' ';
222            }
223        }
224        edid = String.prototype.match.call(document.location, /&edid=([^&]+)/);
225        opener.insertTags(edid ? edid[1] : 'wiki__text',
226                          '{{'+alignleft+id+opts+alignright+'|','}}','');
227
228        if(!dw_mediamanager.keepopen) {
229            window.close();
230        }
231        opener.focus();
232        return false;
233    },
234
235    /**
236     * Prefills the wikiname.
237     *
238     * @author Andreas Gohr <andi@splitbrain.org>
239     */
240    suggest: function(){
241        var $file, $name, text;
242
243        $file = jQuery(this);
244        $name = jQuery('#upload__name');
245
246        if ($name.val() != '') return;
247
248        if(!$file.length || !$name.length) {
249            return;
250        }
251
252        text = $file.val();
253        text = text.substr(text.lastIndexOf('/')+1);
254        text = text.substr(text.lastIndexOf('\\')+1);
255        $name.val(text);
256    },
257
258    /**
259     * list the content of a namespace using AJAX
260     *
261     * @author Andreas Gohr <andi@splitbrain.org>
262     * @author Pierre Spring <pierre.spring@caillou.ch>
263     */
264    list: function (event) {
265        var $link, $content, params;
266        $link = jQuery(this);
267
268        event.preventDefault();
269
270        jQuery('div.success, div.info, div.error, div.notify').remove();
271
272        if (document.getElementById('media__content')) {
273            //popup
274            $content = jQuery('#media__content');
275        } else {
276            //fullscreen media manager
277            $content = jQuery('#mediamanager__layout_list');
278
279            if ($link.hasClass('idx_dir')) {
280                //changing namespace
281                jQuery('#mediamanager__layout_detail').empty();
282                jQuery('#media__tree .selected').each(function(){
283                    jQuery(this).removeClass('selected');
284                });
285                $link.addClass('selected');
286            }
287        }
288
289        params = '';
290
291        if ($link[0].search) {
292            params = $link[0].search.substr(1)+'&call=medialist';
293        } else if ($link[0].action) {
294            params = dw_mediamanager.form_params($link)+'&call=medialist';
295        } else if ($link.parents('form')) {
296            params = dw_mediamanager.form_params($link.parents('form'))+'&call=medialist';
297
298            if ($link.parents('form')[0].id == 'mediamanager__form_sort') {
299                DokuCookie.setValue('sort', $link[0].value);
300                params += '&q=' + jQuery('#mediamanager__sort_textfield').val();
301                params += '&mediado=searchlist';
302            }
303        }
304
305        // fetch the subtree
306        dw_mediamanager.update_content($content, params);
307
308        if (document.getElementById('media__content')) {
309            //popup
310            $content = jQuery('#media__content');
311            $content.html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
312        } else {
313            //fullscreen media manager
314            jQuery('.scroll-container', $content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
315        }
316    },
317
318     /**
319     * Returns form parameters
320     *
321     * @author Kate Arzamastseva <pshns@ukr.net>
322     */
323    form_params: function ($form) {
324        if (!$form.length) return;
325        var elements = $form.serialize();
326        var action = '';
327        var i = $form[0].action.indexOf('?');
328        if (i >= 0) action = $form[0].action.substr(i+1);
329        return elements+'&'+action;
330    },
331
332     /**
333     * Changes view of media files list
334     *
335     * @author Kate Arzamastseva <pshns@ukr.net>
336     */
337    list_view: function (event) {
338        var $link, $content;
339        $link = jQuery(this);
340
341        event.preventDefault();
342
343        $content = jQuery('#mediamanager__file_list');
344
345        if ($link[0].id == 'mediamanager__link_thumbs') {
346            dw_mediamanager.set_filelist_view('thumbs', true);
347
348        } else if ($link[0].id == 'mediamanager__link_list') {
349            dw_mediamanager.set_filelist_view('list', true);
350        }
351    },
352
353    set_filelist_view: function (type, cookies) {
354        var $content = jQuery('#mediamanager__file_list');
355        if (!type) type = DokuCookie.getValue('view');
356
357        if (type == 'thumbs') {
358            $content.removeClass('mediamanager-list');
359            $content.addClass('mediamanager-thumbs');
360            if (cookies) DokuCookie.setValue('view', 'thumbs');
361            dw_mediamanager.view = 'thumbs';
362
363        } else if (type == 'list') {
364            $content.removeClass('mediamanager-thumbs');
365            $content.addClass('mediamanager-list');
366            if (cookies) DokuCookie.setValue('view', 'list');
367            dw_mediamanager.view = 'list';
368        }
369    },
370
371     /**
372     * Lists the content of the right column (image details) using AJAX
373     *
374     * @author Kate Arzamastseva <pshns@ukr.net>
375     */
376    details: function (event) {
377        var $link, $content, params, update_list;
378        $link = jQuery(this);
379
380        event.preventDefault();
381
382        jQuery('div.success, div.info, div.error, div.notify').remove();
383
384        if ($link[0].id == 'mediamanager__btn_delete' && !confirm(LANG['del_confirm'])) return false;
385        if ($link[0].id == 'mediamanager__btn_restore' && !confirm(LANG['restore_confirm'])) return false;
386
387        $content = jQuery('#mediamanager__layout_detail');
388        params = '';
389
390        if ($link[0].search) {
391            params = $link[0].search.substr(1)+'&call=mediadetails';
392        } else if ($link[0].action) {
393            params = dw_mediamanager.form_params($link)+'&call=mediadetails';
394        } else if ($link.parents('form')) {
395            params = dw_mediamanager.form_params($link.parents('form'))+'&call=mediadetails';
396        }
397
398        update_list = ($link[0].id == 'mediamanager__btn_delete' || $link[0].id == 'mediamanager__btn_restore');
399        dw_mediamanager.update_content($content, params, update_list);
400
401        if (jQuery('.scroll-container', $content).length) {
402            jQuery('.scroll-container', $content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
403        } else {
404            jQuery($content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
405        }
406    },
407
408    update_content: function ($content, params, update_list) {
409        jQuery.post(
410            DOKU_BASE + 'lib/exe/ajax.php',
411            params,
412            function (data) {
413                jQuery('.ui-resizable').each(function(){
414                    jQuery(this).resizable('destroy');
415                });
416
417                $content.html(data);
418
419                dw_mediamanager.prepare_content($content);
420                dw_mediamanager.updatehide();
421
422                dw_mediamanager.update_resizable();
423                dw_behaviour.revisionBoxHandler();
424                jQuery('#mediamanager__form_sort').find('input[type=submit]').hide();
425                dw_mediamanager.set_filelist_view(dw_mediamanager.view, false);
426                dw_mediamanager.image_diff();
427                dw_mediamanager.init_ajax_uploader();
428
429                if (update_list) {
430                    var $link1, $content1, params1;
431                    $link1 = jQuery('a.files');
432                    params1 = $link1[0].search.substr(1)+'&call=medialist';
433                    $content1 = jQuery('#mediamanager__layout_list');
434                    dw_mediamanager.update_content($content1, params1);
435                    jQuery('.scroll-container', $content1).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
436                }
437            },
438            'html'
439        );
440    },
441
442    window_resize: function () {
443        if (jQuery('#mediamanager__layout').width() == dw_mediamanager.layout_width) {
444            return;
445        }
446
447        dw_mediamanager.layout_width = jQuery('#mediamanager__layout').width();
448        $r = jQuery("#mediamanager__layout .layout-resizable, #mediamanager__layout .layout");
449
450        var w = 0, wSum = 0, mCount = 0, mArray = [];
451        $r.each(function() {
452            w = jQuery(this).width();
453            if (w == parseFloat(jQuery(this).css("min-width"))) {
454                wSum += w;
455            } else {
456                mArray[mCount] = jQuery(this);
457                mCount++;
458            }
459        });
460
461        if (mCount > 0) {
462            var width = (0.95 * jQuery('#mediamanager__layout').width() - wSum - 30);
463            wSum = 0;
464            for(var i = 0; i < mArray.length; i++) {
465                wSum += mArray[i].width();
466            }
467            for(var i = 0; i < mArray.length; i++) {
468                w = mArray[i].width();
469                w = 100*w / wSum;
470                mArray[i].width(width*w/100);
471            }
472        }
473
474        $r.each(function() {
475            w = jQuery(this).width();
476            w = (100 * w / jQuery('#mediamanager__layout').width());
477            w += "%";
478            jQuery(this).width(w);
479        });
480
481        var windowHeight = jQuery(window).height();
482        var height = windowHeight - 300;
483        if (layout_height < height) {
484            layout_height = height;
485            jQuery('#mediamanager__layout .scroll-container').each(function (i) {
486                jQuery(this).height(height);
487            });
488            $resizable.each(function() {
489                jQuery(this).height(height+100);
490            });
491        }
492
493        dw_mediamanager.opacity_slider();
494        dw_mediamanager.portions_slider();
495    },
496
497    /**
498     * Updates mediamanager layout
499     *
500     * @author Kate Arzamastseva <pshns@ukr.net>
501     */
502    update_resizable: function () {
503        $resizable = jQuery("#mediamanager__layout .layout-resizable");
504
505        $resizable.resizable({ handles: 'e' ,
506            resize: function(event, ui){
507                var w = 0;
508                $resizable.each(function() {
509                    w += jQuery(this).width();
510                });
511                wSum = w + parseFloat(jQuery('#mediamanager__layout_detail').css("min-width"));
512
513                // max width of resizable column
514                var maxWidth = 0.95 * jQuery('#mediamanager__layout').width() - wSum + jQuery(this).width() - 30;
515                $resizable.resizable( "option", "maxWidth", maxWidth );
516
517                // percentage width of the first two columns
518                var wLeft = ( 100*(w+30) / jQuery('#mediamanager__layout').width() );
519
520                // width of the third column
521                var wRight = 95-wLeft;
522                wRight += "%";
523                jQuery('#mediamanager__layout_detail').width(wRight);
524
525                $resizable.each(function() {
526                    w = jQuery(this).width();
527                    w = (100 * w / jQuery('#mediamanager__layout').width());
528                    w += "%";
529                    jQuery(this).width(w);
530                });
531
532                dw_mediamanager.opacity_slider();
533                dw_mediamanager.portions_slider();
534            }
535        });
536
537        var windowHeight = jQuery(window).height();
538        var height = windowHeight - 300;
539        layout_height = height;
540        jQuery('#mediamanager__layout .scroll-container').each(function (i) {
541            jQuery(this).height(height);
542        });
543        $resizable.each(function() {
544            jQuery(this).height(height+100);
545        });
546    },
547
548     /**
549     * Prints 'select' for image difference representation type
550     *
551     * @author Kate Arzamastseva <pshns@ukr.net>
552     */
553    image_diff: function () {
554        if (jQuery('#mediamanager__difftype').length) return;
555
556        $form = jQuery('#mediamanager__form_diffview');
557        if (!$form.length) return;
558
559        $label = jQuery(document.createElement('label'));
560        $label.append('<span>'+LANG.media_diff+'</span>');
561        $select = jQuery(document.createElement('select'))
562         .attr('id', 'mediamanager__difftype')
563         .attr('name', 'difftype')
564         .change(dw_mediamanager.change_diff_type);
565        $select.append(new Option(LANG.media_diff_both, "both"));
566        $select.append(new Option(LANG.media_diff_opacity, "opacity"));
567        $select.append(new Option(LANG.media_diff_portions, "portions"));
568        $label.append($select);
569        $form.append($label);
570
571    	// for IE
572    	var select = document.getElementById('mediamanager__difftype');
573    	select.options[0].text = LANG.media_diff_both;
574    	select.options[1].text = LANG.media_diff_opacity;
575    	select.options[2].text = LANG.media_diff_portions;
576    },
577
578    /**
579     * Handles selection of image difference representation type
580     *
581     * @author Kate Arzamastseva <pshns@ukr.net>
582     */
583    change_diff_type: function () {
584        $select = jQuery('#mediamanager__difftype');
585        $content = jQuery('#mediamanager__diff');
586
587        params = dw_mediamanager.form_params($select.parents('form'))+'&call=mediadiff';
588        jQuery.post(
589            DOKU_BASE + 'lib/exe/ajax.php',
590            params,
591            function (data) {
592                $content.html(data);
593                dw_mediamanager.portions_slider();
594                dw_mediamanager.opacity_slider();
595            },
596            'html'
597        );
598    },
599
600    /**
601     * Sets options for opacity diff slider
602     *
603     * @author Kate Arzamastseva <pshns@ukr.net>
604     */
605    opacity_slider: function () {
606        var $slider = jQuery( "#mediamanager__opacity_slider" );
607        if (!$slider.length) return;
608
609        var $image = jQuery('#mediamanager__diff_opacity_image1 img');
610        if (!$image.length) return;
611        $slider.width($image.width()-20);
612
613        $slider.slider();
614        $slider.slider("option", "min", 0);
615        $slider.slider("option", "max", 0.999);
616        $slider.slider("option", "step", 0.001);
617        $slider.slider("option", "value", 0.5);
618        $slider.bind("slide", function(event, ui) {
619            jQuery('#mediamanager__diff_opacity_image2').css({ opacity: $slider.slider("option", "value")});
620        });
621    },
622
623     /**
624     * Sets options for red line diff slider
625     *
626     * @author Kate Arzamastseva <pshns@ukr.net>
627     */
628    portions_slider: function () {
629        var $image1 = jQuery('#mediamanager__diff_portions_image1 img');
630        var $image2 = jQuery('#mediamanager__diff_portions_image2 img');
631        if (!$image1.length || !$image2.length) return;
632
633        var $div = jQuery("#mediamanager__diff_layout");
634        if (!$div.length) return;
635
636        $div.width('100%');
637        $image2.parent().width('97%');
638        $image1.width('100%');
639        $image2.width('100%');
640
641        if ($image1.width() < $div.width()) {
642            $div.width($image1.width());
643        }
644
645        $image2.parent().width('50%');
646        $image2.width($image1.width());
647        $image1.width($image1.width());
648
649        var $slider = jQuery("#mediamanager__portions_slider");
650        if (!$slider.length) return;
651        $slider.width($image1.width()-20);
652
653        $slider.slider();
654        $slider.slider("option", "min", 0);
655        $slider.slider("option", "max", 97);
656        $slider.slider("option", "step", 1);
657        $slider.slider("option", "value", 50);
658        $slider.bind("slide", function(event, ui) {
659            jQuery('#mediamanager__diff_portions_image2').css({ width: $slider.slider("option", "value")+'%'});
660        });
661    },
662
663    params_toarray: function (str) {
664        var vars = [], hash;
665        var hashes = str.split('&');
666        for(var i = 0; i < hashes.length; i++) {
667            hash = hashes[i].split('=');
668            vars[hash[0]] = hash[1];
669        }
670        return vars;
671    },
672
673    init_ajax_uploader: function () {
674        if (!jQuery('#mediamanager__uploader').length) return;
675        if (jQuery('.qq-upload-list').length) return;
676
677        var params = dw_mediamanager.form_params(jQuery('#dw__upload'))+'&call=mediaupload';
678        params = dw_mediamanager.params_toarray(params);
679
680        var uploader = new qq.FileUploaderExtended({
681            element: document.getElementById('mediamanager__uploader'),
682            action: DOKU_BASE + 'lib/exe/ajax.php',
683            params: params
684        });
685    },
686
687    prepare_content: function ($content) {
688        // hide syntax example
689        $content.find('div.example:visible').hide();
690    },
691
692    /**
693     * shows the popup for a image link
694     */
695    select: function(event){
696        var $link, id, dot, ext;
697
698        event.preventDefault();
699
700        $link = jQuery(this);
701        id = $link.attr('name').substr(2);
702
703        if(!opener){
704            // if we don't run in popup display example
705            // the id's are a bit wierd and jQuery('#ex_wiki_dokuwiki-128.png')
706            // will not be found by Sizzle (the CSS Selector Engine
707            // used by jQuery), hence the document.getElementById() call
708            jQuery(document.getElementById('ex_'+id.replace(/:/g,'_').replace(/^_/,''))).dw_toggle();
709            return;
710        }
711
712        dw_mediamanager.ext = false;
713        dot = id.lastIndexOf(".");
714
715        if (-1 === dot) {
716            dw_mediamanager.insert(id);
717            return;
718        }
719
720        ext = id.substr(dot);
721
722        if ({'.jpg':1, '.jpeg':1, '.png':1, '.gif':1, '.swf':1}[ext] !== 1) {
723            dw_mediamanager.insert(id);
724            return;
725        }
726
727        // remove old callback from the insert button and set the new one.
728        jQuery('#media__sendbtn').unbind().click(bind(dw_mediamanager.insert, id));
729
730        dw_mediamanager.unforbid('ext');
731        if (ext === '.swf') {
732            dw_mediamanager.ext = 'swf';
733            dw_mediamanager.forbid('ext', {link: ['1', '2'],
734                                           size: ['4']});
735        } else {
736            dw_mediamanager.ext = 'img';
737        }
738
739        // Set to defaults
740        dw_mediamanager.setOpt('link');
741        dw_mediamanager.setOpt('align');
742        dw_mediamanager.setOpt('size');
743
744        // toggle buttons for detail and linked image, original size
745        jQuery('#media__linkbtn1, #media__linkbtn2, #media__sizebtn4')
746            .toggle(dw_mediamanager.ext === 'img');
747
748        dw_mediamanager.$popup.dialog('open');
749
750        jQuery('#media__sendbtn').focus();
751    },
752
753    /**
754     * Deletion confirmation dialog to the delete buttons.
755     *
756     * @author Michael Klier <chi@chimeric.de>
757     * @author Pierre Spring <pierre.spring@caillou.ch>
758     */
759    confirmattach: function(e){
760        if(!confirm(LANG.del_confirm + "\n" + jQuery(this).attr('title'))) {
761            e.preventDefault();
762        }
763    },
764
765    /**
766     * Creates checkboxes for additional options
767     *
768     * @author Andreas Gohr <andi@splitbrain.org>
769     * @author Pierre Spring <pierre.spring@caillou.ch>
770     */
771    attachoptions: function(){
772        var $obj, opts;
773
774        $obj = jQuery('#media__opts');
775        if($obj.length === 0) {
776            return;
777        }
778
779        opts = [];
780        // keep open
781        if(opener){
782            opts.push(['keepopen', 'keepopen']);
783        }
784        opts.push(['hide', 'hidedetails']);
785
786        jQuery.each(opts,
787                    function(_, opt) {
788                        var $box, $lbl;
789                        $box = jQuery(document.createElement('input'))
790                                 .attr('type', 'checkbox')
791                                 .attr('id', 'media__' + opt[0])
792                                 .click(bind(dw_mediamanager.toggleOption,
793                                             opt[0]));
794
795                        if(DokuCookie.getValue(opt[0])){
796                            $box.prop('checked', true);
797                            dw_mediamanager[opt[0]] = true;
798                        }
799
800                        $lbl = jQuery(document.createElement('label'))
801                                 .attr('for', 'media__' + opt[0])
802                                 .text(LANG[opt[1]]);
803
804                        $obj.append($box, $lbl, document.createElement('br'));
805                    });
806
807        dw_mediamanager.updatehide();
808    },
809
810    /**
811     * Generalized toggler
812     *
813     * @author Pierre Spring <pierre.spring@caillou.ch>
814     */
815    toggleOption: function (variable) {
816        if (jQuery(this).prop('checked')) {
817            DokuCookie.setValue(variable, 1);
818            dw_mediamanager[variable] = true;
819        } else {
820            DokuCookie.setValue(variable, '');
821            dw_mediamanager[variable] = false;
822        }
823        if (variable === 'hide') {
824            dw_mediamanager.updatehide();
825        }
826    },
827
828    initFlashUpload: function () {
829        var $oform, $oflash;
830        if(!hasFlash(8)) {
831            return;
832        }
833
834        $oform  = jQuery('#dw__upload');
835        $oflash = jQuery('#dw__flashupload');
836
837        if(!$oform.length || !$oflash.length) {
838            return;
839        }
840
841        jQuery(document.createElement('img'))
842            .attr('src', DOKU_BASE+'lib/images/multiupload.png')
843            .attr('title', LANG.mu_btn)
844            .attr('alt', LANG.mu_btn)
845            .css('cursor', 'pointer')
846            .click(
847                function () {
848                    $oform.hide();
849                    $oflash.show();
850                }
851            )
852            .appendTo($oform);
853    },
854
855    /**
856     * Sets the visibility of the image details accordingly to the
857     * chosen hide state
858     *
859     * @author Andreas Gohr <andi@splitbrain.org>
860     */
861    updatehide: function(){
862        jQuery('#media__content div.detail').dw_toggle(!dw_mediamanager.hide);
863    },
864
865    /**
866     * set media insertion option
867     *
868     * @author Dominik Eckelmann <eckelmann@cosmocode.de>
869     */
870    setOpt: function(opt, e){
871        var val, i;
872        if (typeof e !== 'undefined') {
873            val = this.id.substring(this.id.length - 1);
874        } else {
875            val = dw_mediamanager.getOpt(opt);
876        }
877
878        if (val === false) {
879            DokuCookie.setValue(opt,'');
880            dw_mediamanager[opt] = false;
881            return;
882        }
883
884        if (opt === 'link') {
885            if (val !== '4' && dw_mediamanager.link === '4') {
886                dw_mediamanager.unforbid('linkonly');
887                dw_mediamanager.setOpt('align');
888                dw_mediamanager.setOpt('size');
889            } else if (val === '4') {
890                dw_mediamanager.forbid('linkonly', {align: false, size: false});
891            }
892
893            jQuery("#media__size, #media__align").dw_toggle(val !== '4');
894        }
895
896        DokuCookie.setValue(opt, val);
897        dw_mediamanager[opt] = val;
898
899        for (i = 1; i <= 4; i++) {
900            jQuery("#media__" + opt + "btn" + i).removeClass('selected');
901        }
902        jQuery('#media__' + opt + 'btn' + val).addClass('selected');
903    },
904
905    unforbid: function (group) {
906        delete dw_mediamanager.forbidden_opts[group];
907    },
908
909    forbid: function (group, forbids) {
910        dw_mediamanager.forbidden_opts[group] = forbids;
911    },
912
913    allowedOpt: function (opt, val) {
914        var ret = true;
915        jQuery.each(dw_mediamanager.forbidden_opts,
916                    function (_, forbids) {
917                        ret = forbids[opt] !== false &&
918                              jQuery.inArray(val, forbids[opt]) === -1;
919                        return ret;
920                    });
921        return ret;
922    },
923
924    getOpt: function (opt) {
925        var allowed = bind(dw_mediamanager.allowedOpt, opt);
926
927        // Current value
928        if (dw_mediamanager[opt] !== false && allowed(dw_mediamanager[opt])) {
929            return dw_mediamanager[opt];
930        }
931
932        // From cookie
933        if (DokuCookie.getValue(opt) && allowed(DokuCookie.getValue(opt))) {
934            return DokuCookie.getValue(opt);
935        }
936
937        // size default
938        if (opt === 'size' && allowed('2')) {
939            return '2';
940        }
941
942        // Whatever is allowed, and be it false
943        return jQuery.grep(['1', '2', '3', '4'], allowed)[0] || false;
944    }
945};
946
947// moved from helpers.js temporarily here
948/**
949 * Very simplistic Flash plugin check, probably works for Flash 8 and higher only
950 *
951 */
952function hasFlash(version){
953    var ver = 0, axo;
954    try{
955        if(navigator.plugins !== null && navigator.plugins.length > 0){
956           ver = navigator.plugins["Shockwave Flash"].description.split(' ')[2].split('.')[0];
957        }else{
958           axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
959           ver = axo.GetVariable("$version").split(' ')[1].split(',')[0];
960        }
961    }catch(e){ }
962
963    return ver >= version;
964}
965
966jQuery(document).ready(function() {
967    dw_mediamanager.update_resizable();
968    dw_mediamanager.layout_width = jQuery("#mediamanager__layout").width();
969    jQuery(window).resize(dw_mediamanager.window_resize);
970});
971
972jQuery(dw_mediamanager.init);
973