diff --git a/lib/scripts/media.js b/lib/scripts/media.js index fa84371621891f27951c94fe847cacc2d81d2ec9..ee387e42fb61136e4e2c22ea817ea20450d321aa 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -1,10 +1,11 @@ -/*jslint white: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: false, strict: true, newcap: true, immed: true */ + lib/scripts/media.js/*jslint white: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: false, strict: true, newcap: true, immed: true */ /*global jQuery, window, DOKU_BASE*/ "use strict"; // TODO // * fix the css to have pointers on the +/- images in the tree when JS is enabled // * fix the css to have pointers on a.select when JS is enabled +// * remame all the variables starting with $ once the port is over /** * JavaScript functionality for the media management popup @@ -13,7 +14,215 @@ * @author Pierre Spring <pierre.spring@caillou.ch> */ (function ($) { - var toggle, list, cleanup_content; + var toggle, list, prepare_content, insert, confirmattach, attachoptions, initpopup; + + /** + * build the popup window + * + * @author Dominik Eckelmann <eckelmann@cosmocode.de> + */ + initpopup = function() { + var popup; + + popup = document.createElement('div'); + popup.setAttribute('id','media__popup'); + + var root = document.getElementById('media__manager'); + if (root == null) return; + root.appendChild(popup); + + var headline = document.createElement('h1'); + headline.innerHTML = LANG.mediatitle; + var headlineimg = document.createElement('img'); + headlineimg.src = DOKU_BASE + 'lib/images/close.png'; + headlineimg.id = 'media__closeimg'; + $(headlineimg).click(function () {$(popup).hide()}); + headline.insertBefore(headlineimg, headline.firstChild); + popup.appendChild(headline); + drag.attach(popup,headline); // Pierre: TODO + + // link + + var linkp = document.createElement('p'); + + linkp.id = "media__linkstyle"; + if (media_manager.display == "2") { + linkp.style.display = "none"; + } + + var linkl = document.createElement('label'); + linkl.innerHTML = LANG.mediatarget; + linkp.appendChild(linkl); + + var linkbtns = ['lnk', 'direct', 'nolnk', 'displaylnk']; + for (var i = 0 ; i < linkbtns.length ; ++i) { + var linkbtn = document.createElement('button'); + linkbtn.className = 'button'; + linkbtn.value = i + 1; + linkbtn.id = "media__linkbtn" + (i + 1); + linkbtn.title = LANG['media' + linkbtns[i]]; + linkbtn.style.borderStyle = 'outset'; + $(linkbtn).click(function (event) { return media_manager.setlink(event,this); }); + + var linkimg = document.createElement('img'); + linkimg.src = DOKU_BASE + 'lib/images/media_link_' + linkbtns[i] + '.png'; + + linkbtn.appendChild(linkimg); + linkp.appendChild(linkbtn); + } + + popup.appendChild(linkp); + + // align + + var alignp = document.createElement('p'); + var alignl = document.createElement('label'); + + alignp.appendChild(alignl); + alignp.id = 'media__align'; + if (media_manager.display == "2") { + alignp.style.display = "none"; + } + alignl.innerHTML = LANG['mediaalign']; + + var alignbtns = ['noalign', 'left', 'center', 'right']; + for (var n = 0 ; n < alignbtns.length ; ++n) { + var alignbtn = document.createElement('button'); + var alignimg = document.createElement('img'); + alignimg.src = DOKU_BASE + 'lib/images/media_align_' + alignbtns[n] + '.png'; + + alignbtn.id = "media__alignbtn" + n; + alignbtn.value = n; + alignbtn.title = LANG['media' + alignbtns[n]]; + alignbtn.className = 'button'; + alignbtn.appendChild(alignimg); + alignbtn.style.borderStyle = 'outset'; + $(alignbtn).click(function (event) { return media_manager.setalign(event,this); }); + + alignp.appendChild(alignbtn); + } + + popup.appendChild(alignp); + + // size + + var sizep = document.createElement('p'); + var sizel = document.createElement('label'); + + sizep.id = 'media__size'; + if (media_manager.display == "2") { + sizep.style.display = "none"; + } + sizep.appendChild(sizel); + sizel.innerHTML = LANG['mediasize']; + + var sizebtns = ['small', 'medium', 'large', 'original']; + for (var size = 0 ; size < sizebtns.length ; ++size) { + var sizebtn = document.createElement('button'); + var sizeimg = document.createElement('img'); + + sizep.appendChild(sizebtn); + sizeimg.src = DOKU_BASE + 'lib/images/media_size_' + sizebtns[size] + '.png'; + + sizebtn.className = 'button'; + sizebtn.appendChild(sizeimg); + sizebtn.value = size + 1; + sizebtn.id = 'media__sizebtn' + (size + 1); + sizebtn.title = LANG['media' + sizebtns[size]]; + sizebtn.style.borderStyle = 'outset'; + $(sizebtn).click(function (event) { return media_manager.setsize(event,this); }); + } + + popup.appendChild(sizep); + + // send and close button + + var btnp = document.createElement('p'); + popup.appendChild(btnp); + btnp.setAttribute('class','btnlbl'); + + + var btn = document.createElement('input'); + btn.type = 'button'; + btn.id = 'media__sendbtn'; + btn.setAttribute('class','button'); + btn.value = LANG['mediainsert']; + btnp.appendChild(btn); + }; + + /** + * Insert the clicked image into the opener's textarea + * + * @author Andreas Gohr <andi@splitbrain.org> + * @author Dominik Eckelmann <eckelmann@cosmocode.de> + * @author Pierre Spring <pierre.spring@caillou.ch> + */ + insert = function (id) { + var opts, optsstart, alignleft, alignright; + + // set syntax options + $('#media__popup').hide(); + + opts = ''; + optsstart = ''; + alignleft = ''; + 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'; + } + } + } + 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(); + return false; + }; /** * Prefills the wikiname. @@ -98,37 +307,31 @@ link.attr('search').substr(1)+'&call=medialist', function (data) { content.html(data); - cleanup_content(content); - - - content = content[0]; - media_manager.confirmattach(content); + prepare_content(content); media_manager.updatehide(); - media_manager.initFlashUpload(); }, 'html' ); }; - cleanup_content = function (content) { + prepare_content = function (content) { // hide syntax example content.find('div.example:visible').hide(); + initFlashUpload(); }; /** * shows the popup for a image link */ select = function(event){ - var link, id; + var link, id, dot, ext; event.preventDefault(); link = $(this); id = link.attr('name').substr(2); - media_manager.id = id; ///////////////////////////////////////////// - if(!opener){ // if we don't run in popup display example // the id's are a bit wired and $('#ex_wiki_dokuwiki-128.png') will not be found @@ -138,50 +341,39 @@ return; } - // pierre: continue here link = link[0]; media_manager.ext = false; - var dot = id.lastIndexOf("."); - if (dot != -1) { - var ext = id.substr(dot,id.length); + dot = id.lastIndexOf("."); - if (ext != '.jpg' && ext != '.jpeg' && ext != '.png' && ext != '.gif' && ext != '.swf') { - media_manager.insert(null); - return false; - } - } else { - media_manager.insert(null); - return false; + if (-1 === dot) { + insert(id); + return; } - media_manager.popup.style.display = 'inline'; - media_manager.popup.style.left = event.pageX + 'px'; - media_manager.popup.style.top = event.pageY + 'px'; + ext = id.substr(dot); - // 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'); + if (ext != '.jpg' && ext != '.jpeg' && ext != '.png' && ext != '.gif' && ext != '.swf') { + insert(id); + return; + } - media_manager.outSet('media__alignbtn0'); - media_manager.outSet('media__alignbtn1'); - media_manager.outSet('media__alignbtn2'); - media_manager.outSet('media__alignbtn3'); + // remove old callback from the insert button and set the new one. + $('#media__sendbtn').unbind().click(function () {insert(id)}); - media_manager.outSet('media__sizebtn1'); - media_manager.outSet('media__sizebtn2'); - media_manager.outSet('media__sizebtn3'); - media_manager.outSet('media__sizebtn4'); + $('#media__popup').show() + .css('left', event.pageX + 'px') + .css('top', event.pageY + 'px'); + + $('#media__popup button.button').each(function (index, element) { media_manager.outSet(element) } ); 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'; + $('#media__linkbtn1').hide(); + $('#media__linkbtn2').hide(); // set the link button to default if (media_manager.link != false) { @@ -210,15 +402,15 @@ } // disable button for original size - $('media__sizebtn4').style.display = 'none'; + $('#media__sizebtn4').hide(); } else { media_manager.ext = 'img'; // ensure that the display buttons are there - $('media__linkbtn1').style.display = 'inline'; - $('media__linkbtn2').style.display = 'inline'; - $('media__sizebtn4').style.display = 'inline'; + $('#media__linkbtn1').show(); + $('#media__linkbtn2').show(); + $('#media__sizebtn4').show(); // set the link button to default if (DokuCookie.getValue('link')) { @@ -235,11 +427,11 @@ if (media_manager.link == '4') { media_manager.align = false; media_manager.size = false; - $('media__align').style.display = 'none'; - $('media__size').style.display = 'none'; + $('#media__align').hide(); + $('#media__size').hide(); } else { - $('media__align').style.display = 'block'; - $('media__size').style.display = 'block'; + $('#media__align').show(); + $('#media__size').show(); // set the align button to default if (media_manager.align != false) { @@ -265,71 +457,32 @@ } media_manager.inSet('media__sizebtn'+media_manager.size); - $('media__sendbtn').focus(); + $('#media__sendbtn').focus(); } - return false; + return; }; - - $(function () { - var content = $('#media__content'); - cleanup_content(content); - - // add the action to autofill the "upload as" field - content.delegate('#upload__file', 'change', suggest) - // Attach the image selector action to all links - .delegate('a.select', 'click', select) - - $('#media__tree').delegate('img', 'click', toggle) - .delegate('a', 'click', list); - }); -}(jQuery)); - -var media_manager = { - keepopen: false, - hide: false, - align: false, - popup: false, - id: false, - display: false, - link: false, - size: false, - ext: false, - /** - * Attach deletion confirmation dialog to the delete buttons. + * Deletion confirmation dialog to the delete buttons. * - * Michael Klier <chi@chimeric.de> + * @author Michael Klier <chi@chimeric.de> + * @author Pierre Spring <pierre.spring@caillou.ch> */ - confirmattach: function(obj){ - if(!obj) return; - - items = getElementsByClass('btn_media_delete',obj,'a'); - for(var i=0; i<items.length; i++){ - var elem = items[i]; - addEvent(elem,'click',function(e){ - if(e.target.tagName == 'IMG'){ - var name = e.target.parentNode.title; - }else{ - var name = e.target.title; - } - if(!confirm(LANG['del_confirm'] + "\n" + name)) { - e.preventDefault(); - return false; - } else { - return true; - } - }); + confirmattach = function(e){ + if(!confirm(LANG['del_confirm'] + "\n" + jQuery(this).attr('title'))) { + e.preventDefault(); } - }, + }; /** * Creates checkboxes for additional options * * @author Andreas Gohr <andi@splitbrain.org> + * @author Pierre Spring <pierre.spring@caillou.ch> */ - attachoptions: function(obj){ + attachoptions = function(){ + obj = $('#media__opts')[0] if(!obj) return; // keep open @@ -342,8 +495,13 @@ var media_manager = { kobox.defaultChecked = true; //IE wants this media_manager.keepopen = true; } - addEvent(kobox,'click',function(event){ return media_manager.togglekeepopen(event,this); }); - + + $(kobox).click( + function () { + toggleOption(this, 'keepopen'); + } + ); + var kolbl = document.createElement('label'); kolbl.htmlFor = 'media__keepopen'; kolbl.innerHTML = LANG['keepopen']; @@ -364,7 +522,12 @@ var media_manager = { hdbox.defaultChecked = true; //IE wants this media_manager.hide = true; } - addEvent(hdbox,'click',function(event){ return media_manager.togglehide(event,this); }); + $(hdbox).click( + function () { + toggleOption(this, 'hide'); + media_manager.updatehide(); + } + ); var hdlbl = document.createElement('label'); hdlbl.htmlFor = 'media__hide'; @@ -379,35 +542,73 @@ var media_manager = { }, /** - * Toggles the keep open state + * Generalized toggler * - * @author Andreas Gohr <andi@splitbrain.org> - */ - togglekeepopen: function(event,cb){ - if(cb.checked){ - DokuCookie.setValue('keepopen',1); - media_manager.keepopen = true; - }else{ - DokuCookie.setValue('keepopen',''); - media_manager.keepopen = false; + * @author Pierre Spring <pierre.spring@caillou.ch> + */ + toggleOption = function (checkbox, variable) { + if (checkbox.checked) { + DokuCookie.setValue(variable, 1); + media_manager[variable] = true; + } else { + DokuCookie.setValue(variable, ''); + media_manager[variable] = false; } - }, + } - /** - * Toggles the hide details state - * - * @author Andreas Gohr <andi@splitbrain.org> - */ - togglehide: function(event,cb){ - if(cb.checked){ - DokuCookie.setValue('hide',1); - media_manager.hide = true; - }else{ - DokuCookie.setValue('hide',''); - media_manager.hide = false; - } - media_manager.updatehide(); - }, + initFlashUpload = function () { + var oform, oflash, title; + if(!hasFlash(8)) return; + + oform = $('#dw__upload'); + oflash = $('#dw__flashupload'); + + if(!oform.size() || !oflash.size()) return; + + title = LANG['mu_btn']; + + $('<img/>').attr('src', DOKU_BASE+'lib/images/multiupload.png') + .attr('title', title) + .attr('alt', title) + .css('cursor', 'pointer') + .click( + function () { + oform.hide(); + oflash.show(); + } + ) + .appendTo(oform); + }; + + $(function () { + var content = $('#media__content'); + prepare_content(content); + + attachoptions(); + initpopup(); + + // add the action to autofill the "upload as" field + content.delegate('#upload__file', 'change', suggest) + // Attach the image selector action to all links + .delegate('a.select', 'click', select) + // Attach deletion confirmation dialog to the delete buttons + .delegate('#media__content a.btn_media_delete', 'click', confirmattach); + + + $('#media__tree').delegate('img', 'click', toggle) + .delegate('a', 'click', list); + }); +}(jQuery)); + +var media_manager = { + keepopen: false, + hide: false, + align: false, + popup: false, + display: false, + link: false, + size: false, + ext: false, /** * Sets the visibility of the image details accordingly to the @@ -428,236 +629,6 @@ var media_manager = { } }, - /** - * 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'); - headline.innerHTML = LANG.mediatitle; - var headlineimg = document.createElement('img'); - headlineimg.src = DOKU_BASE + 'lib/images/close.png'; - headlineimg.id = 'media__closeimg'; - addEvent(headlineimg,'click',function(event){ return media_manager.closePopup(event,this); }); - headline.insertBefore(headlineimg, headline.firstChild); - media_manager.popup.appendChild(headline); - drag.attach(media_manager.popup,headline); - - // link - - var linkp = document.createElement('p'); - - linkp.id = "media__linkstyle"; - if (media_manager.display == "2") { - linkp.style.display = "none"; - } - - var linkl = document.createElement('label'); - linkl.innerHTML = LANG.mediatarget; - linkp.appendChild(linkl); - - var linkbtns = ['lnk', 'direct', 'nolnk', 'displaylnk']; - for (var i = 0 ; i < linkbtns.length ; ++i) { - var linkbtn = document.createElement('button'); - linkbtn.className = 'button'; - linkbtn.value = i + 1; - linkbtn.id = "media__linkbtn" + (i + 1); - linkbtn.title = LANG['media' + linkbtns[i]]; - linkbtn.style.borderStyle = 'outset'; - addEvent(linkbtn,'click',function(event){ return media_manager.setlink(event,this); }); - - var linkimg = document.createElement('img'); - linkimg.src = DOKU_BASE + 'lib/images/media_link_' + linkbtns[i] + '.png'; - - linkbtn.appendChild(linkimg); - linkp.appendChild(linkbtn); - } - - media_manager.popup.appendChild(linkp); - - // align - - var alignp = document.createElement('p'); - var alignl = document.createElement('label'); - - alignp.appendChild(alignl); - alignp.id = 'media__align'; - if (media_manager.display == "2") { - alignp.style.display = "none"; - } - alignl.innerHTML = LANG['mediaalign']; - - var alignbtns = ['noalign', 'left', 'center', 'right']; - for (var n = 0 ; n < alignbtns.length ; ++n) { - var alignbtn = document.createElement('button'); - var alignimg = document.createElement('img'); - alignimg.src = DOKU_BASE + 'lib/images/media_align_' + alignbtns[n] + '.png'; - - alignbtn.id = "media__alignbtn" + n; - alignbtn.value = n; - alignbtn.title = LANG['media' + alignbtns[n]]; - alignbtn.className = 'button'; - alignbtn.appendChild(alignimg); - alignbtn.style.borderStyle = 'outset'; - addEvent(alignbtn,'click',function(event){ return media_manager.setalign(event,this); }); - - alignp.appendChild(alignbtn); - } - - media_manager.popup.appendChild(alignp); - - // size - - var sizep = document.createElement('p'); - var sizel = document.createElement('label'); - - sizep.id = 'media__size'; - if (media_manager.display == "2") { - sizep.style.display = "none"; - } - sizep.appendChild(sizel); - sizel.innerHTML = LANG['mediasize']; - - var sizebtns = ['small', 'medium', 'large', 'original']; - for (var size = 0 ; size < sizebtns.length ; ++size) { - var sizebtn = document.createElement('button'); - var sizeimg = document.createElement('img'); - - sizep.appendChild(sizebtn); - sizeimg.src = DOKU_BASE + 'lib/images/media_size_' + sizebtns[size] + '.png'; - - sizebtn.className = 'button'; - sizebtn.appendChild(sizeimg); - sizebtn.value = size + 1; - sizebtn.id = 'media__sizebtn' + (size + 1); - sizebtn.title = LANG['media' + sizebtns[size]]; - sizebtn.style.borderStyle = 'outset'; - addEvent(sizebtn,'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 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'; - } - } - } - 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(); - return false; - }, - - initFlashUpload: function(){ - if(!hasFlash(8)) return; - var oform = $('dw__upload'); - var oflash = $('dw__flashupload'); - if(!oform || !oflash) return; - - var clicky = document.createElement('img'); - clicky.src = DOKU_BASE+'lib/images/multiupload.png'; - clicky.title = LANG['mu_btn']; - clicky.alt = LANG['mu_btn']; - clicky.style.cursor = 'pointer'; - clicky.onclick = function(){ - oform.style.display = 'none'; - oflash.style.display = ''; - }; - oform.appendChild(clicky); - }, - - /** - * closes the link type popup - */ - closePopup: function(event) { - $('media__popup').style.display = 'none'; - }, - /** * set the align * @@ -728,11 +699,13 @@ var media_manager = { /** * sets the border to outset */ - outSet: function(id) { - var ele = document.getElementById(id); - if (ele == null) return; - ele.style.borderStyle = "outset"; + outSet: function(element) { + if ('string' === typeof element) { + element = '#' + element; + } + jQuery(element).css('border-style', 'outset'); }, + /** * sets the border to inset */ @@ -761,11 +734,3 @@ var media_manager = { } } }; - -addInitEvent(function(){ - //media_manager.treeattach($('media__tree')); - media_manager.confirmattach($('media__content')); - media_manager.attachoptions($('media__opts')); - media_manager.initpopup(); - media_manager.initFlashUpload(); -});