From 7b63547fc03ef0df23ae8c4bb61e3da41500149b Mon Sep 17 00:00:00 2001 From: Adrian Lang Date: Fri, 19 Feb 2010 14:58:22 +0100 Subject: =?UTF-8?q?Rewrite=20mediamanager=20options=E2=80=99=20JavaScript,?= =?UTF-8?q?=20new=20icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/images/image.png | Bin 516 -> 0 bytes lib/images/image_info.png | Bin 651 -> 0 bytes lib/images/image_link.png | Bin 773 -> 0 bytes lib/images/link.png | Bin 343 -> 0 bytes lib/images/link_break.png | Bin 657 -> 0 bytes lib/images/link_go.png | Bin 655 -> 0 bytes lib/images/magifier_zoom_out.png | Bin 657 -> 0 bytes lib/images/magnifier_zoom_in.png | Bin 680 -> 0 bytes lib/images/media_align_center.png | Bin 0 -> 294 bytes lib/images/media_align_left.png | Bin 0 -> 312 bytes lib/images/media_align_noalign.png | Bin 0 -> 269 bytes lib/images/media_align_right.png | Bin 0 -> 312 bytes lib/images/media_link_direct.png | Bin 0 -> 773 bytes lib/images/media_link_displaylnk.png | Bin 0 -> 343 bytes lib/images/media_link_lnk.png | Bin 0 -> 651 bytes lib/images/media_link_nolnk.png | Bin 0 -> 516 bytes lib/images/media_size_large.png | Bin 0 -> 153 bytes lib/images/media_size_medium.png | Bin 0 -> 296 bytes lib/images/media_size_original.png | Bin 0 -> 312 bytes lib/images/media_size_small.png | Bin 0 -> 305 bytes lib/images/text_align_center.png | Bin 234 -> 0 bytes lib/images/text_align_left.png | Bin 209 -> 0 bytes lib/images/text_align_right.png | Bin 209 -> 0 bytes lib/scripts/media.js | 227 ++++++++++------------------------- lib/tpl/default/_mediaoptions.css | 92 ++++++++++++++ lib/tpl/default/media.css | 93 -------------- lib/tpl/default/style.ini | 1 + 27 files changed, 155 insertions(+), 258 deletions(-) delete mode 100644 lib/images/image.png delete mode 100644 lib/images/image_info.png delete mode 100644 lib/images/image_link.png delete mode 100644 lib/images/link.png delete mode 100644 lib/images/link_break.png delete mode 100644 lib/images/link_go.png delete mode 100644 lib/images/magifier_zoom_out.png delete mode 100644 lib/images/magnifier_zoom_in.png create mode 100644 lib/images/media_align_center.png create mode 100644 lib/images/media_align_left.png create mode 100644 lib/images/media_align_noalign.png create mode 100644 lib/images/media_align_right.png create mode 100644 lib/images/media_link_direct.png create mode 100644 lib/images/media_link_displaylnk.png create mode 100644 lib/images/media_link_lnk.png create mode 100644 lib/images/media_link_nolnk.png create mode 100644 lib/images/media_size_large.png create mode 100644 lib/images/media_size_medium.png create mode 100644 lib/images/media_size_original.png create mode 100644 lib/images/media_size_small.png delete mode 100644 lib/images/text_align_center.png delete mode 100644 lib/images/text_align_left.png delete mode 100644 lib/images/text_align_right.png create mode 100644 lib/tpl/default/_mediaoptions.css (limited to 'lib') diff --git a/lib/images/image.png b/lib/images/image.png deleted file mode 100644 index fc3c393ca..000000000 Binary files a/lib/images/image.png and /dev/null differ diff --git a/lib/images/image_info.png b/lib/images/image_info.png deleted file mode 100644 index 1209164ca..000000000 Binary files a/lib/images/image_info.png and /dev/null differ diff --git a/lib/images/image_link.png b/lib/images/image_link.png deleted file mode 100644 index 4bdb3541e..000000000 Binary files a/lib/images/image_link.png and /dev/null differ diff --git a/lib/images/link.png b/lib/images/link.png deleted file mode 100644 index 25eacb7c2..000000000 Binary files a/lib/images/link.png and /dev/null differ diff --git a/lib/images/link_break.png b/lib/images/link_break.png deleted file mode 100644 index 523575306..000000000 Binary files a/lib/images/link_break.png and /dev/null differ diff --git a/lib/images/link_go.png b/lib/images/link_go.png deleted file mode 100644 index ae8cae806..000000000 Binary files a/lib/images/link_go.png and /dev/null differ diff --git a/lib/images/magifier_zoom_out.png b/lib/images/magifier_zoom_out.png deleted file mode 100644 index 81f28199a..000000000 Binary files a/lib/images/magifier_zoom_out.png and /dev/null differ diff --git a/lib/images/magnifier_zoom_in.png b/lib/images/magnifier_zoom_in.png deleted file mode 100644 index af4fe0747..000000000 Binary files a/lib/images/magnifier_zoom_in.png and /dev/null differ diff --git a/lib/images/media_align_center.png b/lib/images/media_align_center.png new file mode 100644 index 000000000..3db90fc17 Binary files /dev/null and b/lib/images/media_align_center.png differ diff --git a/lib/images/media_align_left.png b/lib/images/media_align_left.png new file mode 100644 index 000000000..cebbb1a9a Binary files /dev/null and b/lib/images/media_align_left.png differ diff --git a/lib/images/media_align_noalign.png b/lib/images/media_align_noalign.png new file mode 100644 index 000000000..74f34e5f1 Binary files /dev/null and b/lib/images/media_align_noalign.png differ diff --git a/lib/images/media_align_right.png b/lib/images/media_align_right.png new file mode 100644 index 000000000..5f54a4a49 Binary files /dev/null and b/lib/images/media_align_right.png differ diff --git a/lib/images/media_link_direct.png b/lib/images/media_link_direct.png new file mode 100644 index 000000000..4bdb3541e Binary files /dev/null and b/lib/images/media_link_direct.png differ diff --git a/lib/images/media_link_displaylnk.png b/lib/images/media_link_displaylnk.png new file mode 100644 index 000000000..25eacb7c2 Binary files /dev/null and b/lib/images/media_link_displaylnk.png differ diff --git a/lib/images/media_link_lnk.png b/lib/images/media_link_lnk.png new file mode 100644 index 000000000..1209164ca Binary files /dev/null and b/lib/images/media_link_lnk.png differ diff --git a/lib/images/media_link_nolnk.png b/lib/images/media_link_nolnk.png new file mode 100644 index 000000000..fc3c393ca Binary files /dev/null and b/lib/images/media_link_nolnk.png differ diff --git a/lib/images/media_size_large.png b/lib/images/media_size_large.png new file mode 100644 index 000000000..e2fb548d9 Binary files /dev/null and b/lib/images/media_size_large.png differ diff --git a/lib/images/media_size_medium.png b/lib/images/media_size_medium.png new file mode 100644 index 000000000..b33157256 Binary files /dev/null and b/lib/images/media_size_medium.png differ diff --git a/lib/images/media_size_original.png b/lib/images/media_size_original.png new file mode 100644 index 000000000..d179aa2db Binary files /dev/null and b/lib/images/media_size_original.png differ diff --git a/lib/images/media_size_small.png b/lib/images/media_size_small.png new file mode 100644 index 000000000..04efe7080 Binary files /dev/null and b/lib/images/media_size_small.png differ diff --git a/lib/images/text_align_center.png b/lib/images/text_align_center.png deleted file mode 100644 index 57beb3813..000000000 Binary files a/lib/images/text_align_center.png and /dev/null differ diff --git a/lib/images/text_align_left.png b/lib/images/text_align_left.png deleted file mode 100644 index 6c8fcc116..000000000 Binary files a/lib/images/text_align_left.png and /dev/null differ diff --git a/lib/images/text_align_right.png b/lib/images/text_align_right.png deleted file mode 100644 index a1502571c..000000000 Binary files a/lib/images/text_align_right.png and /dev/null differ diff --git a/lib/scripts/media.js b/lib/scripts/media.js index 3f0a8fb65..599dbbdfa 100644 --- a/lib/scripts/media.js +++ b/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 diff --git a/lib/tpl/default/_mediaoptions.css b/lib/tpl/default/_mediaoptions.css new file mode 100644 index 000000000..7ac489929 --- /dev/null +++ b/lib/tpl/default/_mediaoptions.css @@ -0,0 +1,92 @@ +/* --- popup --- */ + +#media__popup { + background-color:__background__; + display:none; + border: 1px solid __border__; + position: absolute; + width:270px; +} + +#media__popup h1 { + text-align:center; + font-weight:normal; + background-color: __background_alt__; + height: 16px; + margin-bottom: 5px; + font-size:12px; + border-bottom: 0; +} + +#media__popup p { + display:block; + line-height:14pt; + margin:0.5em; +} + +#media_nolink { + padding:4px 0; +} + +#media__popup label { + float:left; + width:9em; +} + +#media__popup .button { + margin-left:auto; + margin-right:auto; +} + +#media__popup .btnlbl { + text-align:center; +} + +#media__popup .btnlbl input { + margin:0 1em; +} + +#media__closeimg { + float:right; +} + +/* --- display options --- */ + +#media__linkopts label, +#media__nolnk { + width: 80px; + float: left; + margin-left: 10px; +} + +#media__linkopts label{ + line-height: 20px; +} + +#media__nolnk, +#media__linkopts label.long{ + margin-bottom: 8px; + line-height: 12px; +} + +#media__linkopts label.long{ + width: 150px; + float: none; +} + +#media__linkopts br { + clear: both; +} + +#media__linkopts select { + width: 60px; + margin-left: 10px; +} + +#media__linkopts input.edit { + width:50px; + margin-left:10px; +} +#media__linkopts #media__title { + width:150px; +} diff --git a/lib/tpl/default/media.css b/lib/tpl/default/media.css index 0bd70db3c..2831c984f 100644 --- a/lib/tpl/default/media.css +++ b/lib/tpl/default/media.css @@ -89,99 +89,6 @@ it's dirty, so any "real" fixes are welcome */ clear: left; } -/* --- popup --- */ - -#media__popup { - background-color:__background__; - display:none; - border: 1px solid __border__; - position: absolute; - width:270px; -} - -#media__popup h1 { - text-align:center; - font-weight:normal; - background-color: __background_alt__; - height: 16px; - margin-bottom: 5px; - font-size:12px; - border-bottom: 0; -} - -#media__popup p { - display:block; - line-height:14pt; - margin:0.5em; -} - -#media_nolink { - padding:4px 0; -} - -#media__popup label { - float:left; - width:9em; -} - -#media__popup .button { - margin-left:auto; - margin-right:auto; -} - -#media__popup .btnlbl { - text-align:center; -} - -#media__popup .btnlbl input { - margin:0 1em; -} - -#media__closeimg { - float:right; -} - -/* --- display options --- */ - -#media__linkopts label, -#media__nolnk { - width: 80px; - float: left; - margin-left: 10px; -} - -#media__linkopts label{ - line-height: 20px; -} - -#media__nolnk, -#media__linkopts label.long{ - margin-bottom: 8px; - line-height: 12px; -} - -#media__linkopts label.long{ - width: 150px; - float: none; -} - -#media__linkopts br { - clear: both; -} - -#media__linkopts select { - width: 60px; - margin-left: 10px; -} - -#media__linkopts input.edit { - width:50px; - margin-left:10px; -} -#media__linkopts #media__title { - width:150px; -} - /* --- file list --- */ #media__content img.load { diff --git a/lib/tpl/default/style.ini b/lib/tpl/default/style.ini index 84d04e743..c5b2c31a5 100644 --- a/lib/tpl/default/style.ini +++ b/lib/tpl/default/style.ini @@ -11,6 +11,7 @@ design.css = screen style.css = screen media.css = screen +_mediaoptions.css = screen _admin.css = screen _linkwiz.css = screen _subscription.css = screen -- cgit v1.2.3