diff --git a/inc/media.php b/inc/media.php
index 4ca4c509c2796c57b2c0c6b3234cacb7f1d3b408..f5099c1d568097aee7e9c7aa3ad09421c15daec7 100644
--- a/inc/media.php
+++ b/inc/media.php
@@ -1077,9 +1077,12 @@ function media_file_diff($image, $l_rev, $r_rev, $ns, $auth, $fromajax){
$difftype = $_REQUEST['difftype'];
if (!$fromajax) {
- $form = new Doku_Form(array('action' => media_managerURL(array(), '&'),
- 'method' => 'get',
- 'id' => 'mediamanager__form_diffview'));
+ $form = new Doku_Form(array(
+ 'action' => media_managerURL(array(), '&'),
+ 'method' => 'get',
+ 'id' => 'mediamanager__form_diffview',
+ 'class' => 'diffView'
+ ));
$form->addHidden('sectok', null);
$form->addElement('<input type="hidden" name="rev2[]" value="'.$l_rev.'" ></input>');
$form->addElement('<input type="hidden" name="rev2[]" value="'.$r_rev.'" ></input>');
@@ -1189,8 +1192,6 @@ function media_image_diff($image, $l_rev, $r_rev, $l_size, $r_size, $type) {
}
}
- echo '<div class="mediamanager-preview">';
-
$l_more = array('rev' => $l_rev, 'h' => $l_size[1], 'w' => $l_size[0]);
$r_more = array('rev' => $r_rev, 'h' => $l_size[1], 'w' => $l_size[0]);
@@ -1198,19 +1199,17 @@ function media_image_diff($image, $l_rev, $r_rev, $l_size, $r_size, $type) {
$r_src = ml($image, $r_more);
// slider
- echo '<div class="diff_slider" style="max-width: '.($l_size[0]-20).'px;" ></div>';
+ echo '<div class="slider" style="max-width: '.($l_size[0]-20).'px;" ></div>'.NL;
// two images in divs
- echo '<div class="diff_' . $type . '">';
+ echo '<div class="imageDiff ' . $type . '">'.NL;
echo '<div class="image1" style="max-width: '.$l_size[0].'px;">';
echo '<img src="'.$l_src.'" alt="" />';
- echo '</div>';
+ echo '</div>'.NL;
echo '<div class="image2" style="max-width: '.$l_size[0].'px;">';
echo '<img src="'.$r_src.'" alt="" />';
- echo '</div>';
- echo '</div>';
-
- echo '</div>';
+ echo '</div>'.NL;
+ echo '</div>'.NL;
}
/**
diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index 8e4cb64a09369de0cdef39b71d631c826a0d7da2..76274c868c454324f0e91297fa219e5fc1258650 100644
--- a/lib/scripts/media.js
+++ b/lib/scripts/media.js
@@ -580,7 +580,7 @@ var dw_mediamanager = {
if (!$form.length) return;
$label = jQuery(document.createElement('label'));
- $label.append('<span>'+LANG.media_diff+'</span>');
+ $label.append('<span>'+LANG.media_diff+'</span> ');
$select = jQuery(document.createElement('select'))
.attr('id', 'mediamanager__difftype')
.attr('name', 'difftype')
@@ -626,10 +626,10 @@ var dw_mediamanager = {
* @author Kate Arzamastseva <pshns@ukr.net>
*/
opacity_slider: function () {
- var $slider = jQuery( "#mediamanager__diff div.diff_slider" );
+ var $slider = jQuery( "#mediamanager__diff div.slider" );
if (!$slider.length) return;
- var $image = jQuery('#mediamanager__diff div.diff_opacity div.image1 img');
+ var $image = jQuery('#mediamanager__diff div.imageDiff.opacity div.image1 img');
if (!$image.length) return;
$slider.width($image.width()-20);
@@ -639,7 +639,7 @@ var dw_mediamanager = {
$slider.slider("option", "step", 0.001);
$slider.slider("option", "value", 0.5);
$slider.bind("slide", function(event, ui) {
- jQuery('#mediamanager__diff div.diff_opacity div.image2 img').css({ opacity: $slider.slider("option", "value")});
+ jQuery('#mediamanager__diff div.imageDiff.opacity div.image2 img').css({ opacity: $slider.slider("option", "value")});
});
},
@@ -649,8 +649,8 @@ var dw_mediamanager = {
* @author Kate Arzamastseva <pshns@ukr.net>
*/
portions_slider: function () {
- var $image1 = jQuery('#mediamanager__diff div.diff_portions div.image1 img');
- var $image2 = jQuery('#mediamanager__diff div.diff_portions div.image2 img');
+ var $image1 = jQuery('#mediamanager__diff div.imageDiff.portions div.image1 img');
+ var $image2 = jQuery('#mediamanager__diff div.imageDiff.portions div.image2 img');
if (!$image1.length || !$image2.length) return;
var $div = jQuery("#mediamanager__diff");
@@ -669,7 +669,7 @@ var dw_mediamanager = {
$image2.width($image1.width());
$image1.width($image1.width());
- var $slider = jQuery("#mediamanager__diff div.diff_slider");
+ var $slider = jQuery("#mediamanager__diff div.slider");
if (!$slider.length) return;
$slider.width($image1.width()-20);
@@ -679,7 +679,7 @@ var dw_mediamanager = {
$slider.slider("option", "step", 1);
$slider.slider("option", "value", 50);
$slider.bind("slide", function(event, ui) {
- jQuery('#mediamanager__diff div.diff_portions div.image2').css({ width: $slider.slider("option", "value")+'%'});
+ jQuery('#mediamanager__diff div.imageDiff.portions div.image2').css({ width: $slider.slider("option", "value")+'%'});
});
},
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index 619ca9929ae6205f39035843e131f27f38c91cd8..03c2cb9ce5ba24a2a68a2d60b2755b2964ef111e 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -382,55 +382,47 @@
font-size: 90%;
}
-/* Image diff */
-
#mediamanager__diff dl dd strong{
background-color: __highlight__;
color: __text__;
font-weight: normal;
}
-#mediamanager__form_diffview {
+/* Image diff */
+
+#mediamanager__page .file form.diffView {
margin-bottom: 10px;
display: block;
}
+#mediamanager__diff div.slider {
+ margin: 10px;
+ width: 95%;
+}
-
-
-
-#mediamanager__diff_layout {
+#mediamanager__diff .imageDiff {
position: relative;
}
-
-#mediamanager__diff_layout div {
+#mediamanager__diff .imageDiff .image1,
+#mediamanager__diff .imageDiff .image2 {
position: absolute;
top: 0;
left: 0;
-}
-
-#mediamanager__diff div.image1 {
width: 97%;
}
-#mediamanager__diff_layout div img {
- width: 100%;
-}
-
-#mediamanager__diff div.diff_opacity div.image2 {
- width: 97%;
+#mediamanager__diff .imageDiff.opacity .image2 {
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
-#mediamanager__diff div.diff_portions div.image2 {
- width: 97%;
+#mediamanager__diff .imageDiff.portions .image2 {
border-right: 1px solid red;
overflow: hidden;
}
-#mediamanager__diff div.diff_slider {
- margin: 10px;
- width: 95%;
+#mediamanager__diff .imageDiff img {
+ width: 100%;
}
+