mediamanager image diff

2 files changed, 62 insertions, 0 deletions

diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index 777eb4825..8500166dc 100644
--- a/lib/scripts/media.js
+++ b/lib/scripts/media.js
@@ -369,6 +369,9 @@ var dw_mediamanager = {
                 dw_mediamanager.prepare_content($content);
                 dw_mediamanager.updatehide();
                 dw_mediamanager.update_resizable(0);
+                dw_mediamanager.opacity_slider();
+                dw_mediamanager.portions_slider();
+
             },
             'html'
         );
@@ -398,6 +401,30 @@ var dw_mediamanager = {
         });
     },
 
+    opacity_slider: function () {
+        var $slider = jQuery( "#mediamanager__opacity_slider" );
+        $slider.slider();
+        $slider.slider("option", "min", 0);
+        $slider.slider("option", "max", 0.999);
+        $slider.slider("option", "step", 0.001);
+        $slider.slider("option", "value", 0.5);
+        $slider.bind("slide", function(event, ui) {
+            jQuery('#mediamanager__diff_opacity_image2').css({ opacity: $slider.slider("option", "value")});
+        });
+    },
+
+    portions_slider: function () {
+        var $slider = jQuery( "#mediamanager__portions_slider" );
+        $slider.slider();
+        $slider.slider("option", "min", 0);
+        $slider.slider("option", "max", 100);
+        $slider.slider("option", "step", 1);
+        $slider.slider("option", "value", 50);
+        $slider.bind("slide", function(event, ui) {
+            jQuery('#mediamanager__diff_portions_image2').css({ width: $slider.slider("option", "value")+'%'});
+        });
+    },
+
     prepare_content: function ($content) {
         // hide syntax example
         $content.find('div.example:visible').hide();
@@ -680,6 +707,8 @@ function hasFlash(version){
 
 jQuery(document).ready(function() {
     dw_mediamanager.update_resizable(1);
+    dw_mediamanager.opacity_slider();
+    dw_mediamanager.portions_slider();
 });
 
 jQuery(dw_mediamanager.init);
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index df2b961b6..6c4b64d3e 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -263,6 +263,7 @@ form.meta textarea.edit {
 }
 
 .mediamanager-preview {
+    text-align: center;
     margin-bottom: 5px;
 }
 
@@ -282,3 +283,35 @@ form.meta textarea.edit {
 .background-container .icon {
     margin-right: 5px;
 }
+
+.mediamanager dl.img_tags dd.highlighted{
+    background-color: __highlight__;
+}
+
+#mediamanager__diff_opacity_image1,
+#mediamanager__diff_portions_image1 {
+    width: 99%;
+    position: relative;
+}
+
+#mediamanager__diff_opacity_image2 {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0.5;
+}
+
+#mediamanager__diff_portions_image2 {
+    width: 50%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-right: 1px solid red;
+}
+
+#mediamanager__opacity_slider,
+#mediamanager__portions_slider {
+    margin: 10px;
+    width: 99%;
+}