xref: /dokuwiki/lib/scripts/media.js (revision 36f2d7c159dca3a958e96bb913d64c8768dc7518)
1/**
2 * JavaScript functionalitiy for the media management popup
3 *
4 * @author Andreas Gohr <andi@splitbrain.org>
5 */
6media = {
7    keepopen: false,
8    hide: false,
9
10    /**
11     * Attach event handlers to all "folders" below the given element
12     *
13     * @author Andreas Gohr <andi@splitbrain.org>
14     */
15    treeattach: function(obj){
16        if(!obj) return;
17
18        var items = obj.getElementsByTagName('li');
19        for(var i=0; i<items.length; i++){
20            var elem = items[i];
21
22            // attach action to make the +/- clickable
23            var clicky = elem.getElementsByTagName('img')[0];
24            clicky.style.cursor = 'pointer';
25            addEvent(clicky,'click',function(event){ return media.toggle(event,this); });
26
27            // attach action load folder list via AJAX
28            var link = elem.getElementsByTagName('a')[0];
29            link.style.cursor = 'pointer';
30            addEvent(link,'click',function(event){ return media.list(event,this); });
31        }
32    },
33
34    /**
35     * Attach the image selector action to all links below the given element
36     * also add the action to autofill the "upload as" field
37     *
38     * @author Andreas Gohr <andi@splitbrain.org>
39     */
40    selectorattach: function(obj){
41        if(!obj) return;
42
43        var items = getElementsByClass('select',obj,'a');
44        for(var i=0; i<items.length; i++){
45            var elem = items[i];
46            elem.style.cursor = 'pointer';
47            addEvent(elem,'click',function(event){ return media.select(event,this); });
48        }
49
50        // hide syntax example
51        items = getElementsByClass('example',obj,'div');
52        for(var i=0; i<items.length; i++){
53            elem = items[i];
54            elem.style.display = 'none';
55        }
56
57        var file = $('upload__file');
58        if(!file) return;
59        addEvent(file,'change',media.suggest);
60    },
61
62	/**
63	 * Attache deletion confirmation dialog to the delete buttons.
64	 *
65	 * Michael Klier <chi@chimeric.de>
66	 */
67	confirmattach: function(obj){
68		if(!obj) return;
69
70		items = getElementsByClass('btn_media_delete',obj,'a');
71		for(var i=0; i<items.length; i++){
72			elem = items[i];
73			addEvent(elem,'click',function(){
74				return confirm(reallyDel + "\n" + elem.title);
75			});
76		}
77	},
78
79    /**
80     * Creates checkboxes for additional options
81     *
82     * @author Andreas Gohr <andi@splitbrain.org>
83     */
84    attachoptions: function(obj){
85        if(!obj) return;
86
87        // keep open
88        if(opener){
89            var kobox  = document.createElement('input');
90            kobox.type = 'checkbox';
91            kobox.id   = 'media__keepopen';
92            if(DokuCookie.getValue('keepopen')){
93                kobox.checked  = true;
94                kobox.defaultChecked = true; //IE wants this
95                media.keepopen = true;
96            }
97            addEvent(kobox,'click',function(event){ return media.togglekeepopen(event,this); });
98
99            var kolbl  = document.createElement('label');
100            kolbl.htmlFor   = 'media__keepopen';
101            kolbl.innerHTML = LANG['keepopen'];
102
103            var kobr = document.createElement('br');
104
105            obj.appendChild(kobox);
106            obj.appendChild(kolbl);
107            obj.appendChild(kobr);
108        }
109
110        // hide details
111        var hdbox  = document.createElement('input');
112        hdbox.type = 'checkbox';
113        hdbox.id   = 'media__hide';
114        if(DokuCookie.getValue('hide')){
115            hdbox.checked = true;
116            hdbox.defaultChecked = true; //IE wants this
117            media.hide    = true;
118        }
119        addEvent(hdbox,'click',function(event){ return media.togglehide(event,this); });
120
121        var hdlbl  = document.createElement('label');
122        hdlbl.htmlFor   = 'media__hide';
123        hdlbl.innerHTML = LANG['hidedetails'];
124
125        var hdbr = document.createElement('br');
126
127        obj.appendChild(hdbox);
128        obj.appendChild(hdlbl);
129        obj.appendChild(hdbr);
130        media.updatehide();
131    },
132
133    /**
134     * Toggles the keep open state
135     *
136     * @author Andreas Gohr <andi@splitbrain.org>
137     */
138    togglekeepopen: function(event,cb){
139        if(cb.checked){
140            DokuCookie.setValue('keepopen',1);
141            media.keepopen = true;
142        }else{
143            DokuCookie.setValue('keepopen','');
144            media.keepopen = false;
145        }
146    },
147
148    /**
149     * Toggles the hide details state
150     *
151     * @author Andreas Gohr <andi@splitbrain.org>
152     */
153    togglehide: function(event,cb){
154        if(cb.checked){
155            DokuCookie.setValue('hide',1);
156            media.hide = true;
157        }else{
158            DokuCookie.setValue('hide','');
159            media.hide = false;
160        }
161        media.updatehide();
162    },
163
164    /**
165     * Sets the visibility of the image details accordingly to the
166     * chosen hide state
167     *
168     * @author Andreas Gohr <andi@splitbrain.org>
169     */
170    updatehide: function(){
171        var obj = $('media__content');
172        if(!obj) return;
173        var details = getElementsByClass('detail',obj,'div');
174        for(var i=0; i<details.length; i++){
175            if(media.hide){
176                details[i].style.display = 'none';
177            }else{
178                details[i].style.display = '';
179            }
180        }
181    },
182
183    /**
184     * Insert the clicked image into the opener's textarea
185     *
186     * @author Andreas Gohr <andi@splitbrain.org>
187     */
188    select: function(event,link){
189        var id = link.name.substr(2);
190
191        if(!opener){
192            // if we don't run in popup display example
193            var ex = $('ex_'+id.replace(/:/g,'_'));
194            if(ex.style.display == ''){
195                ex.style.display = 'none';
196            }else{
197                ex.style.display = '';
198            }
199            return false;
200        }
201        opener.insertTags('wiki__text','{{:'+id+'|','}}','');
202
203        if(!media.keepopen) window.close();
204        opener.focus();
205        return false;
206    },
207
208    /**
209     * list the content of a namespace using AJAX
210     *
211     * @author Andreas Gohr <andi@splitbrain.org>
212     */
213    list: function(event,link){
214        // prepare an AJAX call to fetch the subtree
215        var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php');
216        ajax.AjaxFailedAlert = '';
217        ajax.encodeURIString = false;
218        if(ajax.failed) return true;
219
220        cleanMsgArea();
221
222        var content = $('media__content');
223        content.innerHTML = '<img src="'+DOKU_BASE+'lib/images/loading.gif" alt="..." class="load" />';
224
225        ajax.elementObj = content;
226        ajax.afterCompletion = function(){
227            media.selectorattach(content);
228			media.confirmattach(content);
229            media.updatehide();
230            media.initFlashUpload();
231        };
232        ajax.runAJAX(link.search.substr(1)+'&call=medialist');
233        return false;
234    },
235
236
237    /**
238     * Open or close a subtree using AJAX
239     *
240     * @author Andreas Gohr <andi@splitbrain.org>
241     */
242    toggle: function(event,clicky){
243        var listitem = clicky.parentNode;
244
245        // if already open, close by removing the sublist
246        var sublists = listitem.getElementsByTagName('ul');
247        if(sublists.length){
248            listitem.removeChild(sublists[0]);
249            clicky.src = DOKU_BASE+'lib/images/plus.gif';
250            return false;
251        }
252
253        // get the enclosed link (is always the first one)
254        var link = listitem.getElementsByTagName('a')[0];
255
256        // prepare an AJAX call to fetch the subtree
257        var ajax = new sack(DOKU_BASE + 'lib/exe/ajax.php');
258        ajax.AjaxFailedAlert = '';
259        ajax.encodeURIString = false;
260        if(ajax.failed) return true;
261
262        //prepare the new ul
263        var ul = document.createElement('ul');
264        //fixme add classname here
265        listitem.appendChild(ul);
266        ajax.elementObj = ul;
267        ajax.afterCompletion = function(){ media.treeattach(ul); };
268        ajax.runAJAX(link.search.substr(1)+'&call=medians');
269        clicky.src = DOKU_BASE+'lib/images/minus.gif';
270        return false;
271    },
272
273    /**
274     * Prefills the wikiname.
275     *
276     * @author Andreas Gohr <andi@splitbrain.org>
277     */
278    suggest: function(){
279        var file = $('upload__file');
280        var name = $('upload__name');
281        if(!file || !name) return;
282
283        var text = file.value;
284        text = text.substr(text.lastIndexOf('/')+1);
285        text = text.substr(text.lastIndexOf('\\')+1);
286        name.value = text;
287    },
288
289
290    initFlashUpload: function(){
291        if(!hasFlash(8)) return;
292        var oform  = $('dw__upload');
293        var oflash = $('dw__flashupload');
294        if(!oform || !oflash) return;
295
296        var clicky = document.createElement('img');
297        clicky.src     = DOKU_BASE+'lib/images/multiupload.png';
298        clicky.title   = LANG['mu_btn'];
299        clicky.alt     = LANG['mu_btn'];
300        clicky.style.cursor = 'pointer';
301        clicky.onclick = function(){
302                            oform.style.display  = 'none';
303                            oflash.style.display = '';
304                         };
305        oform.appendChild(clicky);
306    }
307};
308
309addInitEvent(function(){
310    media.treeattach($('media__tree'));
311    media.selectorattach($('media__content'));
312	media.confirmattach($('media__content'));
313    media.attachoptions($('media__opts'));
314    media.initFlashUpload();
315});
316