Rewrite mediamanager options’ JavaScript, new icons

lib/scripts/media.js

@@ -259,7 +259,7 @@ var media_manager = {
         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');
@@ -270,7 +270,7 @@ var media_manager = {
         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');
@@ -388,79 +388,44 @@ var media_manager = {
         root.appendChild(media_manager.popup);
 
         var headline    = document.createElement('h1');
+        headline.innerHTML = LANG.mediatitle;
         var headlineimg = document.createElement('img');
-        var headtext    = document.createElement('span');
-        headlineimg.src = '/lib/images/close.png';
+        headlineimg.src = DOKU_BASE + '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);
+        headline.insertBefore(headlineimg, headline.firstChild);
         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');
+        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);
-        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); });
+
+        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);
 
@@ -468,63 +433,30 @@ var media_manager = {
 
         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); });
+        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);
 
@@ -532,63 +464,30 @@ var media_manager = {
 
         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); });
+        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);
 
@@ -891,9 +790,9 @@ var media_manager = {
         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");
+            for (var i = 1 ; i <= 4 ; ++i) {
+                media_manager.outSet("media__sizebtn" + i);
+            }
             media_manager.inSet("media__sizebtn"+cb.value);
         } else {
             DokuCookie.setValue('size','');
@@ -910,5 +809,3 @@ addInitEvent(function(){
     media_manager.initpopup();
     media_manager.initFlashUpload();
 });
-
-// style nach linkwiz