image diffs fixes

5 files changed, 114 insertions, 9 deletions

diff --git a/inc/lang/en/lang.php b/inc/lang/en/lang.php
index 2435f9771..ba80c493c 100644
--- a/inc/lang/en/lang.php
+++ b/inc/lang/en/lang.php
@@ -348,4 +348,9 @@ $lang['media_perm_upload']= 'Sorry, you don\'t have enough rights to upload file
 $lang['media_update']     = 'Upload new version';
 $lang['media_restore']    = 'Restore this version';
 
+$lang['js']['media_diff']          = 'View differences:';
+$lang['js']['media_diff_both']     = 'Both images';
+$lang['js']['media_diff_opacity']  = 'Changeable opacity of images';
+$lang['js']['media_diff_portions'] = 'Portions of images';
+
 //Setup VIM: ex: et ts=2 :
diff --git a/inc/media.php b/inc/media.php
index a249e9b54..a08d394ef 100644
--- a/inc/media.php
+++ b/inc/media.php
@@ -996,6 +996,8 @@ function media_diff($image, $ns, $auth) {
     global $lang;
     global $conf;
 
+    if ($auth < AUTH_READ || !$image) return '';
+
     $rev1 = (int) $_REQUEST['rev'];
 
     if(is_array($_REQUEST['rev2'])){
@@ -1054,6 +1056,24 @@ function _media_file_diff($data) {
  */
 function media_file_diff($image, $l_rev, $r_rev, $ns, $auth){
     global $lang, $config_cascade;
+    $is_img = preg_match("/\.(jpe?g|gif|png)$/", $image);
+
+    if ($is_img) {
+        $difftype = $_REQUEST['difftype'];
+
+        $form = new Doku_Form(array('action'=>media_managerURL(array(), '&'),
+            'id' => 'mediamanager__form_diffview'));
+        $form->addElement('<input type=hidden name=rev2[] value='.$l_rev.' ></input>');
+        $form->addElement('<input type=hidden name=rev2[] value='.$r_rev.' ></input>');
+        $form->addHidden('mediado', 'diff');
+        $form->printForm();
+
+        echo '<div id="mediamanager__diff" >';
+
+        if ($difftype == 'opacity') return media_image_diff($image, $l_rev, $r_rev, $l_meta, 'opacity');
+        if ($difftype == 'portions') return media_image_diff($image, $l_rev, $r_rev, $l_meta, 'portions');
+
+    }
 
     echo '<ul id="mediamanager__diff_table">';
 
@@ -1108,8 +1128,7 @@ function media_file_diff($image, $l_rev, $r_rev, $ns, $auth){
 
     echo '</ul>';
 
-    media_image_diff($image, $l_rev, $r_rev, $l_meta, 'opacity');
-    media_image_diff($image, $l_rev, $r_rev, $l_meta, 'portions');
+    if ($is_img) echo '</div>';
 }
 
 /**
diff --git a/lib/exe/ajax.php b/lib/exe/ajax.php
index 483d65cff..300fb8acb 100644
--- a/lib/exe/ajax.php
+++ b/lib/exe/ajax.php
@@ -236,6 +236,19 @@ function ajax_mediadetails(){
 }
 
 /**
+ * Returns image diff representation for mediamanager
+ * @author Kate Arzamastseva <pshns@ukr.net>
+ */
+function ajax_mediadiff(){
+    global $NS;
+
+    if ($_REQUEST['image']) $image = cleanID($_REQUEST['image']);
+    $NS = $_POST['ns'];
+    $auth = auth_quickaclcheck("$ns:*");
+    media_diff($image, $NS, $auth);
+}
+
+/**
  * Return sub index for index view
  *
  * @author Andreas Gohr <andi@splitbrain.org>
diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index 44928417f..42035a595 100644
--- a/lib/scripts/media.js
+++ b/lib/scripts/media.js
@@ -61,6 +61,7 @@ var dw_mediamanager = {
         $tree.delegate('a', 'click', dw_mediamanager.list);
 
         jQuery('#mediamanager__form_sort').find('input[type=submit]').hide();
+        dw_mediamanager.image_diff();
 
         // changing opened tab in the file list panel
         jQuery('#mediamanager__layout_list').delegate('#mediamanager__tabs_files a', 'click', dw_mediamanager.list)
@@ -357,8 +358,10 @@ var dw_mediamanager = {
 
         if ($link[0].search) {
             params = $link[0].search.substr(1)+'&call=mediadetails';
-        } else {
+        } else if ($link[0].action) {
             params = dw_mediamanager.form_params($link)+'&call=mediadetails';
+        } else if ($link.parents('form')) {
+            params = dw_mediamanager.form_params($link.parents('form'))+'&call=mediadetails';
         }
 
         dw_mediamanager.update_content($content, params);
@@ -385,17 +388,24 @@ var dw_mediamanager = {
                 });
 
                 $content.html(data);
+
                 dw_mediamanager.prepare_content($content);
                 dw_mediamanager.updatehide();
+
                 dw_mediamanager.update_resizable(0);
-                dw_mediamanager.opacity_slider();
-                dw_mediamanager.portions_slider();
                 addInitEvent(revisionsForm);
+                jQuery('#mediamanager__form_sort').find('input[type=submit]').hide();
+                dw_mediamanager.image_diff();
             },
             'html'
         );
     },
 
+    /**
+     * Updates mediamanager layout
+     *
+     * @author Kate Arzamastseva <pshns@ukr.net>
+     */
     update_resizable: function (count_width) {
         $resizable = jQuery("#mediamanager__layout .layout-resizable");
 
@@ -431,6 +441,55 @@ var dw_mediamanager = {
         });
     },
 
+     /**
+     * Prints 'select' for image difference representation type
+     *
+     * @author Kate Arzamastseva <pshns@ukr.net>
+     */
+    image_diff: function () {
+        if (jQuery('#mediamanager__difftype').length) return;
+
+        $form = jQuery('#mediamanager__form_diffview');
+        $label = jQuery(document.createElement('label'));
+        $label.append('<span>'+LANG.media_diff+'</span>');
+        $select = jQuery(document.createElement('select'))
+         .attr('id', 'mediamanager__difftype')
+         .attr('name', 'difftype')
+         .change(dw_mediamanager.change_diff_type);
+        $select.append(new Option(LANG.media_diff_both, "both"));
+        $select.append(new Option(LANG.media_diff_opacity, "opacity"));
+        $select.append(new Option(LANG.media_diff_portions, "portions"));
+        $label.append($select);
+        $form.append($label);
+    },
+
+    /**
+     * Handles selection of image difference representation type
+     *
+     * @author Kate Arzamastseva <pshns@ukr.net>
+     */
+    change_diff_type: function () {
+        $select = jQuery('#mediamanager__difftype');
+        $content = jQuery('#mediamanager__diff');
+
+        params = dw_mediamanager.form_params($select.parents('form'))+'&call=mediadiff';
+        jQuery.post(
+            DOKU_BASE + 'lib/exe/ajax.php',
+            params,
+            function (data) {
+                $content.html(data);
+                dw_mediamanager.opacity_slider();
+                dw_mediamanager.portions_slider();
+            },
+            'html'
+        );
+    },
+
+    /**
+     * Sets options for opacity diff slider
+     *
+     * @author Kate Arzamastseva <pshns@ukr.net>
+     */
     opacity_slider: function () {
         var $slider = jQuery( "#mediamanager__opacity_slider" );
         $slider.slider();
@@ -443,6 +502,11 @@ var dw_mediamanager = {
         });
     },
 
+     /**
+     * Sets options for red line diff slider
+     *
+     * @author Kate Arzamastseva <pshns@ukr.net>
+     */
     portions_slider: function () {
         var $slider = jQuery( "#mediamanager__portions_slider" );
         $slider.slider();
@@ -737,8 +801,6 @@ function hasFlash(version){
 
 jQuery(document).ready(function() {
     dw_mediamanager.update_resizable(1);
-    dw_mediamanager.opacity_slider();
-    dw_mediamanager.portions_slider();
     jQuery(window).resize(dw_mediamanager.update_resizable);
 });
 
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index 490d90c62..431b61d6e 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -321,7 +321,8 @@ form.meta textarea.edit {
 
 #mediamanager__diff_table {
     padding: 0;
-    margin: 0 !important;
+    margin: 0;
+    margin-top: 10px;
 }
 
 #mediamanager__diff_table li {
@@ -345,10 +346,15 @@ form.meta textarea.edit {
     background-color: __highlight__;
 }
 
+#mediamanager__form_diffview {
+    margin-bottom: 10px;
+}
+
 #mediamanager__diff_opacity_image1,
 #mediamanager__diff_portions_image1 {
     width: 99%;
     position: relative;
+    margin-top: 10px;
 }
 
 #mediamanager__diff_opacity_image2 {
@@ -372,5 +378,5 @@ form.meta textarea.edit {
 #mediamanager__opacity_slider,
 #mediamanager__portions_slider {
     margin: 10px;
-    width: 99%;
+    width: 95%;
 }