diff options
| -rw-r--r-- | inc/media.php | 23 | ||||
| -rw-r--r-- | lib/scripts/media.js | 16 | ||||
| -rw-r--r-- | lib/tpl/default/mediamanager.css | 38 |
3 files changed, 34 insertions, 43 deletions
diff --git a/inc/media.php b/inc/media.php index 4ca4c509c..f5099c1d5 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 8e4cb64a0..76274c868 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 619ca9929..03c2cb9ce 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%; } + |