diff options
Diffstat (limited to 'lib/scripts')
| -rw-r--r-- | lib/scripts/media.js | 572 |
1 files changed, 567 insertions, 5 deletions
diff --git a/lib/scripts/media.js b/lib/scripts/media.js index 3e4213f19..3f0a8fb65 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -6,6 +6,13 @@ var media_manager = { keepopen: false, hide: false, + align: false, + popup: false, + id: false, + display: false, + link: false, + size: false, + ext: false, /** * Attach event handlers to all "folders" below the given element @@ -218,24 +225,466 @@ var media_manager = { }, /** - * Insert the clicked image into the opener's textarea - * - * @author Andreas Gohr <andi@splitbrain.org> + * shows the popup for a image link */ select: function(event,link){ var id = link.name.substr(2); + media_manager.id = id; if(!opener){ // if we don't run in popup display example var ex = $('ex_'+id.replace(/:/g,'_')); if(ex.style.display == ''){ ex.style.display = 'none'; - }else{ + } else { ex.style.display = ''; } return false; } - opener.insertTags('wiki__text','{{'+id+'|','}}',''); + + media_manager.ext = false; + var dot = id.lastIndexOf("."); + if (dot != -1) { + var ext = id.substr(dot,id.length); + + if (ext != '.jpg' && ext != '.jpeg' && ext != '.png' && ext != '.gif' && ext != '.swf') { + media_manager.insert(null); + return false; + } + } else { + media_manager.insert(null); + return false; + } + + media_manager.popup.style.display = 'inline'; + media_manager.popup.style.left = event.pageX + 'px'; + media_manager.popup.style.top = event.pageY + 'px'; + + // set all buttons to outset + media_manager.outSet('media__linkbtn1'); + media_manager.outSet('media__linkbtn2'); + media_manager.outSet('media__linkbtn3'); + media_manager.outSet('media__linkbtn4'); + + media_manager.outSet('media__alignbtn0'); + media_manager.outSet('media__alignbtn1'); + media_manager.outSet('media__alignbtn2'); + media_manager.outSet('media__alignbtn3'); + + media_manager.outSet('media__sizebtn1'); + media_manager.outSet('media__sizebtn2'); + media_manager.outSet('media__sizebtn3'); + media_manager.outSet('media__sizebtn4'); + + + if (ext == '.swf') { + media_manager.ext = 'swf'; + + // disable display buttons for detail and linked image + $('media__linkbtn1').style.display = 'none'; + $('media__linkbtn2').style.display = 'none'; + + // set the link button to default + if (media_manager.link != false) { + if ( media_manager.link == '2' || media_manager.link == '1') { + media_manager.inSet('media__linkbtn3'); + media_manager.link = '3'; + DokuCookie.setValue('link','3'); + } else { + media_manager.inSet('media__linkbtn'+media_manager.link); + } + } else if (DokuCookie.getValue('link')) { + if ( DokuCookie.getValue('link') == '2' || DokuCookie.getValue('link') == '1') { + // this options are not availible + media_manager.inSet('media__linkbtn3'); + media_manager.link = '3'; + DokuCookie.setValue('link','3'); + } else { + media_manager.inSet('media__linkbtn'+DokuCookie.getValue('link')); + media_manager.link = DokuCookie.getValue('link'); + } + } else { + // default case + media_manager.link = '3'; + media_manager.inSet('media__linkbtn3'); + DokuCookie.setValue('link','3'); + } + + } else { + media_manager.ext = 'img'; + + // ensure that the display buttens are there + $('media__linkbtn1').style.display = 'inline'; + $('media__linkbtn2').style.display = 'inline'; + + // set the link button to default + if (media_manager.link != false) { + media_manager.inSet('media__linkbtn'+media_manager.link); + } else if (DokuCookie.getValue('link')) { + media_manager.inSet('media__linkbtn'+DokuCookie.getValue('link')); + media_manager.link = DokuCookie.getValue('link'); + } else { + // default case + media_manager.link = '1'; + media_manager.inSet('media__linkbtn1'); + DokuCookie.setValue('link','1'); + } + } + + if (media_manager.link == '4') { + media_manager.align = false; + media_manager.size = false; + $('media__align').style.display = 'none'; + $('media__size').style.display = 'none'; + } else { + $('media__align').style.display = 'block'; + $('media__size').style.display = 'block'; + + // set the align button to default + if (media_manager.align != false) { + media_manager.inSet('media__alignbtn'+media_manager.align); + } else if (DokuCookie.getValue('align')) { + media_manager.inSet('media__alignbtn'+DokuCookie.getValue('align')); + media_manager.align = DokuCookie.getValue('align'); + } else { + // default case + media_manager.align = '0'; + media_manager.inSet('media__alignbtn0'); + DokuCookie.setValue('align','0'); + } + + // set the size button to default + if (media_manager.size != false) { + media_manager.inSet('media__sizebtn'+media_manager.size); + } else if (DokuCookie.getValue('size')) { + media_manager.inSet('media__sizebtn'+DokuCookie.getValue('size')); + media_manager.size = DokuCookie.getValue('size'); + } else { + // default case + media_manager.size = '2'; + media_manager.inSet('media__sizebtn2'); + DokuCookie.setValue('size','2'); + } + + + $('media__sendbtn').focus(); + } + + return false; + }, + + /** + * build the popup window + * + * @author Dominik Eckelmann <eckelmann@cosmocode.de> + */ + initpopup: function() { + + media_manager.popup = document.createElement('div'); + media_manager.popup.setAttribute('id','media__popup'); + + var root = document.getElementById('media__manager'); + if (root == null) return; + root.appendChild(media_manager.popup); + + var headline = document.createElement('h1'); + var headlineimg = document.createElement('img'); + var headtext = document.createElement('span'); + headlineimg.src = '/lib/images/close.png'; + headlineimg.id = 'media__closeimg'; + addEvent(headlineimg,'click',function(event){ return media_manager.closePopup(event,this); }); + headline.appendChild(headlineimg); + headtext.textContent = LANG['mediatitle']; + headline.appendChild(headtext); + media_manager.popup.appendChild(headline); + drag.attach(media_manager.popup,headline); + + // link + + var linkp = document.createElement('p'); + var linkl = document.createElement('label'); + var linkbtn1 = document.createElement('button'); + var linkbtn2 = document.createElement('button'); + var linkbtn3 = document.createElement('button'); + var linkbtn4 = document.createElement('button'); + var linkimg1 = document.createElement('img'); + var linkimg2 = document.createElement('img'); + var linkimg3 = document.createElement('img'); + var linkimg4 = document.createElement('img'); + + linkp.id = "media__linkstyle"; + if (media_manager.display == "2") { + linkp.style.display = "none"; + } + + linkp.appendChild(linkl); + linkp.appendChild(linkbtn1); + linkp.appendChild(linkbtn2); + linkp.appendChild(linkbtn3); + linkp.appendChild(linkbtn4); + + linkl.innerHTML = LANG['mediatarget']; + + linkimg1.src = '/lib/images/image_info.png'; + linkimg2.src = '/lib/images/image_link.png'; + linkimg3.src = '/lib/images/image.png'; + linkimg4.src = '/lib/images/link.png'; + + linkbtn1.setAttribute('class','button'); + linkbtn1.appendChild(linkimg1); + linkbtn1.value = '1'; + linkbtn1.id = "media__linkbtn1"; + linkbtn1.title = LANG['medialnk']; + linkbtn1.style.borderStyle = 'outset'; + addEvent(linkbtn1,'click',function(event){ return media_manager.setlink(event,this); }); + + linkbtn2.setAttribute('class','button'); + linkbtn2.appendChild(linkimg2); + linkbtn2.value = '2'; + linkbtn2.id = "media__linkbtn2"; + linkbtn2.title = LANG['mediadirect']; + linkbtn2.style.borderStyle = 'outset'; + addEvent(linkbtn2,'click',function(event){ return media_manager.setlink(event,this); }); + + linkbtn3.setAttribute('class','button'); + linkbtn3.appendChild(linkimg3); + linkbtn3.value = '3'; + linkbtn3.id = "media__linkbtn3"; + linkbtn3.title = LANG['medianolnk']; + linkbtn3.style.borderStyle = 'outset'; + addEvent(linkbtn3,'click',function(event){ return media_manager.setlink(event,this); }); + + linkbtn4.setAttribute('class','button'); + linkbtn4.appendChild(linkimg4); + linkbtn4.value = '4'; + linkbtn4.id = "media__linkbtn4"; + linkbtn4.title = LANG['mediadisplaylnk']; + linkbtn4.style.borderStyle = 'outset'; + addEvent(linkbtn4,'click',function(event){ return media_manager.setlink(event,this); }); + + media_manager.popup.appendChild(linkp); + + // align + + var alignp = document.createElement('p'); + var alignl = document.createElement('label'); + var alignbtn0 = document.createElement('button'); + var alignbtn1 = document.createElement('button'); + var alignbtn2 = document.createElement('button'); + var alignbtn3 = document.createElement('button'); + var alignimg0 = document.createElement('img'); + var alignimg1 = document.createElement('img'); + var alignimg2 = document.createElement('img'); + var alignimg3 = document.createElement('img'); + alignp.appendChild(alignl); + alignp.id = 'media__align'; + if (media_manager.display == "2") { + alignp.style.display = "none"; + } + + alignp.appendChild(alignbtn0); + alignp.appendChild(alignbtn1); + alignp.appendChild(alignbtn2); + alignp.appendChild(alignbtn3); + + alignl.innerHTML = LANG['mediaalign']; + + alignimg0.src = '/lib/images/text_align_left.png'; + alignimg1.src = '/lib/images/text_align_left.png'; + alignimg2.src = '/lib/images/text_align_center.png'; + alignimg3.src = '/lib/images/text_align_right.png'; + + alignbtn0.id = "media__alignbtn0"; + alignbtn0.value = '0'; + alignbtn0.title = LANG['medianoalign']; + alignbtn0.setAttribute('class','button'); + alignbtn0.appendChild(alignimg0); + alignbtn0.style.borderStyle = 'outset'; + addEvent(alignbtn0,'click',function(event){ return media_manager.setalign(event,this); }); + + alignbtn1.id = "media__alignbtn1"; + alignbtn1.value = '1'; + alignbtn1.title = LANG['medialeft']; + alignbtn1.setAttribute('class','button'); + alignbtn1.appendChild(alignimg1); + alignbtn1.style.borderStyle = 'outset'; + addEvent(alignbtn1,'click',function(event){ return media_manager.setalign(event,this); }); + + alignbtn2.value = '2'; + alignbtn2.id = "media__alignbtn2"; + alignbtn2.title = LANG['mediacenter']; + alignbtn2.setAttribute('class','button'); + alignbtn2.appendChild(alignimg2); + alignbtn2.style.borderStyle = 'outset'; + addEvent(alignbtn2,'click',function(event){ return media_manager.setalign(event,this); }); + + alignbtn3.value = '3'; + alignbtn3.id = "media__alignbtn3"; + alignbtn3.title = LANG['mediaright']; + alignbtn3.setAttribute('class','button'); + alignbtn3.appendChild(alignimg3); + alignbtn3.style.borderStyle = 'outset'; + addEvent(alignbtn3,'click',function(event){ return media_manager.setalign(event,this); }); + + media_manager.popup.appendChild(alignp); + + // size + + var sizep = document.createElement('p'); + var sizel = document.createElement('label'); + var sizebtn1 = document.createElement('button'); + var sizebtn2 = document.createElement('button'); + var sizebtn3 = document.createElement('button'); + var sizebtn4 = document.createElement('button'); + var sizeimg1 = document.createElement('img'); + var sizeimg2 = document.createElement('img'); + var sizeimg3 = document.createElement('img'); + var sizeimg4 = document.createElement('img'); + sizep.id = 'media__size'; + if (media_manager.display == "2") { + sizep.style.display = "none"; + } + + sizep.appendChild(sizel); + sizep.appendChild(sizebtn1); + sizep.appendChild(sizebtn2); + sizep.appendChild(sizebtn3); + sizep.appendChild(sizebtn4); + + sizel.innerHTML = LANG['mediasize']; + + sizeimg1.src = '/lib/images/magifier_zoom_out.png'; + sizeimg2.src = '/lib/images/magnifier.png'; + sizeimg3.src = '/lib/images/magnifier_zoom_in.png'; + sizeimg4.src = '/lib/images/magnifier_zoom_in.png'; + + sizebtn1.setAttribute('class','button'); + sizebtn1.appendChild(sizeimg1); + sizebtn1.value = '1'; + sizebtn1.id = 'media__sizebtn1'; + sizebtn1.title = LANG['mediasmall']; + sizebtn1.style.borderStyle = 'outset'; + addEvent(sizebtn1,'click',function(event){ return media_manager.setsize(event,this); }); + + sizebtn2.setAttribute('class','button'); + sizebtn2.appendChild(sizeimg2); + sizebtn2.value = '2'; + sizebtn2.id = 'media__sizebtn2'; + sizebtn2.title = LANG['mediamedium']; + sizebtn2.style.borderStyle = 'outset'; + addEvent(sizebtn2,'click',function(event){ return media_manager.setsize(event,this); }); + + sizebtn3.setAttribute('class','button'); + sizebtn3.appendChild(sizeimg3); + sizebtn3.value = '3'; + sizebtn3.id = 'media__sizebtn3'; + sizebtn3.title = LANG['medialarge']; + sizebtn3.style.borderStyle = 'outset'; + addEvent(sizebtn3,'click',function(event){ return media_manager.setsize(event,this); }); + + sizebtn4.setAttribute('class','button'); + sizebtn4.appendChild(sizeimg4); + sizebtn4.value = '4'; + sizebtn4.id = 'media__sizebtn4'; + sizebtn4.title = LANG['mediaextralarge']; + sizebtn4.style.borderStyle = 'outset'; + addEvent(sizebtn4,'click',function(event){ return media_manager.setsize(event,this); }); + + media_manager.popup.appendChild(sizep); + + // send and close button + + var btnp = document.createElement('p'); + media_manager.popup.appendChild(btnp); + btnp.setAttribute('class','btnlbl'); + + var cls = document.createElement('input'); + cls.type = 'button'; + cls.setAttribute('class','button'); + cls.value = LANG['mediaclose']; + btnp.appendChild(cls); + addEvent(cls,'click',function(event){ return media_manager.closePopup(event,this); }); + + var btn = document.createElement('input'); + btn.type = 'button'; + btn.id = 'media__sendbtn'; + btn.setAttribute('class','button'); + btn.value = LANG['mediainsert']; + btnp.appendChild(btn); + addEvent(btn,'click',function(event){ return media_manager.insert(event); }); + }, + + /** + * Insert the clicked image into the opener's textarea + * + * @author Andreas Gohr <andi@splitbrain.org> + * @author Dominik Eckelmann <eckelmann@cosmocode.de> + */ + insert: function(event){ + var id = media_manager.id; + // set syntax options + $('media__popup').style.display = 'none'; + + var opts = ''; + var optsstart = ''; + var alignleft = ''; + var alignright = ''; + + if (media_manager.ext == 'img' || media_manager.ext == 'swf') { + + if (media_manager.link == '4') { + opts = '?linkonly'; + } else { + + if (media_manager.link == "3" && media_manager.ext == 'img') { + opts = '?nolink'; + optsstart = true; + } else if (media_manager.link == "2" && media_manager.ext == 'img') { + opts = '?direct'; + optsstart = true; + } + + var s = parseInt(media_manager.size); + + if (s && s >= 1) { + opts += (optsstart)?'&':'?'; + if (s=="1") { + opts += '100'; + if (media_manager.ext == 'swf') { + opts += 'x62'; + } + } else if (s=="2") { + opts += '200'; + if (media_manager.ext == 'swf') { + opts += 'x123'; + } + } else if (s=="3"){ + opts += '300'; + if (media_manager.ext == 'swf') { + opts += 'x185'; + } + } else if (s=="4") { + opts += '400'; + if (media_manager.ext == 'swf') { + opts += 'x247'; + } + } + } + if (media_manager.align == '1') { + alignleft = ''; + alignright = ' '; + } + if (media_manager.align == '2') { + alignleft = ' '; + alignright = ' '; + } + if (media_manager.align == '3') { + alignleft = ' '; + alignright = ''; + } + } + } + opener.insertTags('wiki__text','{{'+alignleft+id+opts+alignright+'|','}}',''); if(!media_manager.keepopen) window.close(); opener.focus(); @@ -340,6 +789,116 @@ var media_manager = { oflash.style.display = ''; }; oform.appendChild(clicky); + }, + + /** + * closes the link type popup + */ + closePopup: function(event) { + $('media__popup').style.display = 'none'; + }, + + /** + * set the align + * + * @author Dominik Eckelmann <eckelmann@cosmocode.de> + */ + setalign: function(event,cb){ + if(cb.value){ + DokuCookie.setValue('align',cb.value); + media_manager.align = cb.value; + media_manager.outSet("media__alignbtn0"); + media_manager.outSet("media__alignbtn1"); + media_manager.outSet("media__alignbtn2"); + media_manager.outSet("media__alignbtn3"); + media_manager.inSet("media__alignbtn"+cb.value); + }else{ + DokuCookie.setValue('align',''); + media_manager.align = false; + } + }, + /** + * set the link type + * + * @author Dominik Eckelmann <eckelmann@cosmocode.de> + */ + setlink: function(event,cb){ + if(cb.value){ + DokuCookie.setValue('link',cb.value); + media_manager.link = cb.value; + media_manager.outSet("media__linkbtn1"); + media_manager.outSet("media__linkbtn2"); + media_manager.outSet("media__linkbtn3"); + media_manager.outSet("media__linkbtn4"); + media_manager.inSet("media__linkbtn"+cb.value); + var size = document.getElementById("media__size"); + var align = document.getElementById("media__align"); + if (cb.value != '4') { + size.style.display = "block"; + align.style.display = "block"; + } else { + size.style.display = "none"; + align.style.display = "none"; + } + }else{ + DokuCookie.setValue('link',''); + media_manager.link = false; + } + }, + + /** + * set the display type + * + * @author Dominik Eckelmann <eckelmann@cosmocode.de> + */ + setdisplay: function(event,cb){ + if(cb.value){ + DokuCookie.setValue('display',cb.value); + media_manager.display = cb.value; + media_manager.outSet("media__displaybtn1"); + media_manager.outSet("media__displaybtn2"); + media_manager.inSet("media__displaybtn"+cb.value); + + }else{ + DokuCookie.setValue('display',''); + media_manager.align = false; + } + }, + + /** + * sets the border to outset + */ + outSet: function(id) { + var ele = document.getElementById(id); + if (ele == null) return; + ele.style.borderStyle = "outset"; + }, + /** + * sets the border to inset + */ + inSet: function(id) { + var ele = document.getElementById(id); + if (ele == null) return; + ele.style.borderStyle = "inset"; + }, + + /** + * set the image size + * + * @author Dominik Eckelmann <eckelmann@cosmocode.de> + */ + setsize: function(event,cb){ + if (cb.value) { + DokuCookie.setValue('size',cb.value); + media_manager.size = cb.value; + media_manager.outSet("media__sizebtn1"); + media_manager.outSet("media__sizebtn2"); + media_manager.outSet("media__sizebtn3"); + media_manager.inSet("media__sizebtn"+cb.value); + } else { + DokuCookie.setValue('size',''); + media_manager.width = false; + } } }; @@ -348,5 +907,8 @@ addInitEvent(function(){ media_manager.selectorattach($('media__content')); media_manager.confirmattach($('media__content')); media_manager.attachoptions($('media__opts')); + media_manager.initpopup(); media_manager.initFlashUpload(); }); + +// style nach linkwiz |