Fix mediamanager JS (diffs not yet working)

2 files changed, 97 insertions, 106 deletions

diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index 798d42a30..54309640c 100644
--- a/lib/scripts/media.js
+++ b/lib/scripts/media.js
@@ -65,27 +65,26 @@ var dw_mediamanager = {
         $tree.delegate('a', 'click', dw_mediamanager.list);
 
         dw_mediamanager.set_filelist_view(dw_mediamanager.view, false);
-        jQuery('#mediamanager__form_sort').find('input[type=submit]').hide();
+
+        dw_mediamanager.init_options();
+
         dw_mediamanager.image_diff();
         dw_mediamanager.init_ajax_uploader();
 
+        console.log(jQuery('#mediamanager__page div.filelist').find('div.panelContent a'));
         // changing opened tab in the file list panel
-        jQuery('#mediamanager__layout_list').delegate('#mediamanager__tabs_files a', 'click', dw_mediamanager.list)
-            // changing type of the file list view
-            .delegate('#mediamanager__tabs_list a', 'click', dw_mediamanager.list_view)
+        jQuery('#mediamanager__page div.filelist').delegate('ul.tabs a', 'click', dw_mediamanager.list)
             // loading file details
-            .delegate('#mediamanager__file_list a', 'click', dw_mediamanager.details)
+            .delegate('div.panelContent a', 'click', dw_mediamanager.details)
             // search form
             .delegate('#dw__mediasearch', 'submit', dw_mediamanager.list)
             // "upload as" field autofill
             .delegate('#upload__file', 'change', dw_mediamanager.suggest)
-            // sort type selection
-            .delegate('#mediamanager__form_sort select', 'change', dw_mediamanager.list)
             // uploaded images
             .delegate('.qq-upload-file a', 'click', dw_mediamanager.details);
 
         // changing opened tab in the file details panel
-        jQuery('#mediamanager__layout_detail').delegate('#mediamanager__tabs_details a', 'click', dw_mediamanager.details)
+        jQuery('#mediamanager__page div.file').delegate('#mediamanager__tabs_details a', 'click', dw_mediamanager.details)
             // "update new version" button
             .delegate('#mediamanager__btn_update', 'submit', dw_mediamanager.list)
             // revisions form
@@ -102,6 +101,37 @@ var dw_mediamanager = {
 
     },
 
+    init_options: function () {
+        var $options = jQuery('div.filelist div.panelHeader form.options'),
+            $listType, $sortBy;
+        if ($options.length === 0) {
+            return;
+        }
+
+        $listType = $options.find('li.listType');
+        $sortBy = $options.find('li.sortBy');
+
+        // Remove the submit button
+        $options.find('input[type=submit]').parent().hide();
+
+        // Prepare HTML for jQuery UI buttonset
+        $listType.add($sortBy).find('label').each(function () {
+            var $this = jQuery(this);
+            $this.children('input').appendTo($this.parent());
+            $this.find('span span').addClass('a11y');
+        });
+
+        // Init buttonset
+        $listType.add($sortBy).buttonset();
+
+        // Change handlers
+        $listType.children('input').change(function (event) {
+            event.preventDefault();
+            dw_mediamanager.set_filelist_view(this.value, true);
+        });
+        $sortBy.children('input').change(dw_mediamanager.list);
+    },
+
     /**
      * build the popup window
      *
@@ -273,14 +303,12 @@ var dw_mediamanager = {
             $content = jQuery('#media__content');
         } else {
             //fullscreen media manager
-            $content = jQuery('#mediamanager__layout_list');
+            $content = jQuery('div.filelist');
 
             if ($link.hasClass('idx_dir')) {
                 //changing namespace
-                jQuery('#mediamanager__layout_detail').empty();
-                jQuery('#media__tree .selected').each(function(){
-                    jQuery(this).removeClass('selected');
-                });
+                jQuery('div.file').empty();
+                jQuery('div.namespaces .selected').removeClass('selected');
                 $link.addClass('selected');
             }
         }
@@ -294,9 +322,9 @@ var dw_mediamanager = {
         } else if ($link.parents('form')) {
             params = dw_mediamanager.form_params($link.parents('form'))+'&call=medialist';
 
-            if ($link.parents('form')[0].id == 'mediamanager__form_sort') {
-                DokuCookie.setValue('sort', $link[0].value);
-                params += '&q=' + jQuery('#mediamanager__sort_textfield').val();
+            if ($link.parents('form').hasClass('options')) {
+                DokuCookie.setValue('sort', $link.val());
+                params += '&q=' + $link.val();
                 params += '&mediado=searchlist';
             }
         }
@@ -310,7 +338,7 @@ var dw_mediamanager = {
             $content.html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
         } else {
             //fullscreen media manager
-            jQuery('.scroll-container', $content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
+            jQuery('div.panelContent', $content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
         }
     },
 
@@ -328,43 +356,17 @@ var dw_mediamanager = {
         return elements+'&'+action;
     },
 
-     /**
-     * Changes view of media files list
-     *
-     * @author Kate Arzamastseva <pshns@ukr.net>
-     */
-    list_view: function (event) {
-        var $link, $content;
-        $link = jQuery(this);
-
-        event.preventDefault();
-
-        $content = jQuery('#mediamanager__file_list');
-
-        if ($link[0].id == 'mediamanager__link_thumbs') {
-            dw_mediamanager.set_filelist_view('thumbs', true);
-
-        } else if ($link[0].id == 'mediamanager__link_list') {
-            dw_mediamanager.set_filelist_view('list', true);
-        }
-    },
-
     set_filelist_view: function (type, cookies) {
-        var $content = jQuery('#mediamanager__file_list');
-        if (!type) type = DokuCookie.getValue('view');
+        type = type || DokuCookie.getValue('view');
 
-        if (type == 'thumbs') {
-            $content.removeClass('mediamanager-list');
-            $content.addClass('mediamanager-thumbs');
-            if (cookies) DokuCookie.setValue('view', 'thumbs');
-            dw_mediamanager.view = 'thumbs';
+        jQuery('div.filelist div.panelContent ul')
+            .toggleClass('rows', type === 'rows')
+            .toggleClass('thumbs', type === 'thumbs');
 
-        } else if (type == 'list') {
-            $content.removeClass('mediamanager-thumbs');
-            $content.addClass('mediamanager-list');
-            if (cookies) DokuCookie.setValue('view', 'list');
-            dw_mediamanager.view = 'list';
+        if (cookies) {
+            DokuCookie.setValue('view', type);
         }
+        dw_mediamanager.view = type;
     },
 
      /**
@@ -375,7 +377,6 @@ var dw_mediamanager = {
     details: function (event) {
         var $link, $content, params, update_list;
         $link = jQuery(this);
-
         event.preventDefault();
 
         jQuery('div.success, div.info, div.error, div.notify').remove();
@@ -383,7 +384,7 @@ var dw_mediamanager = {
         if ($link[0].id == 'mediamanager__btn_delete' && !confirm(LANG['del_confirm'])) return false;
         if ($link[0].id == 'mediamanager__btn_restore' && !confirm(LANG['restore_confirm'])) return false;
 
-        $content = jQuery('#mediamanager__layout_detail');
+        $content = jQuery('div.file');
         params = '';
 
         if ($link[0].search) {
@@ -397,8 +398,8 @@ var dw_mediamanager = {
         update_list = ($link[0].id == 'mediamanager__btn_delete' || $link[0].id == 'mediamanager__btn_restore');
         dw_mediamanager.update_content($content, params, update_list);
 
-        if (jQuery('.scroll-container', $content).length) {
-            jQuery('.scroll-container', $content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
+        if (jQuery('div.panelContent', $content).length) {
+            jQuery('div.panelContent', $content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
         } else {
             jQuery($content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
         }
@@ -420,18 +421,18 @@ var dw_mediamanager = {
 
                 dw_mediamanager.update_resizable();
                 dw_behaviour.revisionBoxHandler();
-                jQuery('#mediamanager__form_sort').find('input[type=submit]').hide();
                 dw_mediamanager.set_filelist_view(dw_mediamanager.view, false);
                 dw_mediamanager.image_diff();
                 dw_mediamanager.init_ajax_uploader();
+                dw_mediamanager.init_options();
 
                 if (update_list) {
                     var $link1, $content1, params1;
                     $link1 = jQuery('a.files');
                     params1 = $link1[0].search.substr(1)+'&call=medialist';
-                    $content1 = jQuery('#mediamanager__layout_list');
+                    $content1 = jQuery('div.filelist');
                     dw_mediamanager.update_content($content1, params1);
-                    jQuery('.scroll-container', $content1).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
+                    jQuery('div.panelContent', $content1).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />');
                 }
             },
             'html'
@@ -439,12 +440,12 @@ var dw_mediamanager = {
     },
 
     window_resize: function () {
-        if (jQuery('#mediamanager__layout').width() == dw_mediamanager.layout_width) {
+        if (jQuery('#mediamanager__page').width() == dw_mediamanager.layout_width) {
             return;
         }
 
-        dw_mediamanager.layout_width = jQuery('#mediamanager__layout').width();
-        $r = jQuery("#mediamanager__layout .layout-resizable, #mediamanager__layout .layout");
+        dw_mediamanager.layout_width = jQuery('#mediamanager__page').width();
+        $r = jQuery("#mediamanager__page div.panel");
 
         var w = 0, wSum = 0, mCount = 0, mArray = [];
         $r.each(function() {
@@ -458,7 +459,7 @@ var dw_mediamanager = {
         });
 
         if (mCount > 0) {
-            var width = (0.95 * jQuery('#mediamanager__layout').width() - wSum - 30);
+            var width = (0.95 * jQuery('#mediamanager__page').width() - wSum - 30);
             wSum = 0;
             for(var i = 0; i < mArray.length; i++) {
                 wSum += mArray[i].width();
@@ -472,7 +473,7 @@ var dw_mediamanager = {
 
         $r.each(function() {
             w = jQuery(this).width();
-            w = (100 * w / jQuery('#mediamanager__layout').width());
+            w = (100 * w / jQuery('#mediamanager__page').width());
             w += "%";
             jQuery(this).width(w);
         });
@@ -481,12 +482,8 @@ var dw_mediamanager = {
         var height = windowHeight - 300;
         if (layout_height < height) {
             layout_height = height;
-            jQuery('#mediamanager__layout .scroll-container').each(function (i) {
-                jQuery(this).height(height);
-            });
-            $resizable.each(function() {
-                jQuery(this).height(height+100);
-            });
+            jQuery('#mediamanager__page div.panelContent').height(height);
+            $resizable.height(height+100);
         }
 
         dw_mediamanager.opacity_slider();
@@ -499,7 +496,7 @@ var dw_mediamanager = {
      * @author Kate Arzamastseva <pshns@ukr.net>
      */
     update_resizable: function () {
-        $resizable = jQuery("#mediamanager__layout .layout-resizable");
+        $resizable = jQuery("#mediamanager__page .layout-resizable");
 
         $resizable.resizable({ handles: 'e' ,
             resize: function(event, ui){
@@ -507,23 +504,23 @@ var dw_mediamanager = {
                 $resizable.each(function() {
                     w += jQuery(this).width();
                 });
-                wSum = w + parseFloat(jQuery('#mediamanager__layout_detail').css("min-width"));
+                wSum = w + parseFloat(jQuery('#mediamanager__page div.file').css("min-width"));
 
                 // max width of resizable column
-                var maxWidth = 0.95 * jQuery('#mediamanager__layout').width() - wSum + jQuery(this).width() - 30;
+                var maxWidth = 0.95 * jQuery('#mediamanager__page').width() - wSum + jQuery(this).width() - 30;
                 $resizable.resizable( "option", "maxWidth", maxWidth );
 
                 // percentage width of the first two columns
-                var wLeft = ( 100*(w+30) / jQuery('#mediamanager__layout').width() );
+                var wLeft = ( 100*(w+30) / jQuery('#mediamanager__page').width() );
 
                 // width of the third column
                 var wRight = 95-wLeft;
                 wRight += "%";
-                jQuery('#mediamanager__layout_detail').width(wRight);
+                jQuery('#mediamanager__page div.file').width(wRight);
 
                 $resizable.each(function() {
                     w = jQuery(this).width();
-                    w = (100 * w / jQuery('#mediamanager__layout').width());
+                    w = (100 * w / jQuery('#mediamanager__page').width());
                     w += "%";
                     jQuery(this).width(w);
                 });
@@ -536,12 +533,8 @@ var dw_mediamanager = {
         var windowHeight = jQuery(window).height();
         var height = windowHeight - 300;
         layout_height = height;
-        jQuery('#mediamanager__layout .scroll-container').each(function (i) {
-            jQuery(this).height(height);
-        });
-        $resizable.each(function() {
-            jQuery(this).height(height+100);
-        });
+        jQuery('#mediamanager__page .panelContent').height(height);
+        $resizable.height(height+100);
     },
 
      /**
@@ -567,11 +560,11 @@ var dw_mediamanager = {
         $label.append($select);
         $form.append($label);
 
-    	// for IE
-    	var select = document.getElementById('mediamanager__difftype');
-    	select.options[0].text = LANG.media_diff_both;
-    	select.options[1].text = LANG.media_diff_opacity;
-    	select.options[2].text = LANG.media_diff_portions;
+        // for IE
+        var select = document.getElementById('mediamanager__difftype');
+        select.options[0].text = LANG.media_diff_both;
+        select.options[1].text = LANG.media_diff_opacity;
+        select.options[2].text = LANG.media_diff_portions;
     },
 
     /**
@@ -602,10 +595,10 @@ var dw_mediamanager = {
      * @author Kate Arzamastseva <pshns@ukr.net>
      */
     opacity_slider: function () {
-        var $slider = jQuery( "#mediamanager__opacity_slider" );
+        var $slider = jQuery( "#mediamanager__diff div.diff_slider" );
         if (!$slider.length) return;
 
-        var $image = jQuery('#mediamanager__diff_opacity_image1 img');
+        var $image = jQuery('#mediamanager__diff div.diff_opacity div.image1 img');
         if (!$image.length) return;
         $slider.width($image.width()-20);
 
@@ -615,7 +608,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_opacity_image2').css({ opacity: $slider.slider("option", "value")});
+            jQuery('#mediamanager__diff div.diff_opacity div.image2 img').css({ opacity: $slider.slider("option", "value")});
         });
     },
 
@@ -625,8 +618,8 @@ var dw_mediamanager = {
      * @author Kate Arzamastseva <pshns@ukr.net>
      */
     portions_slider: function () {
-        var $image1 = jQuery('#mediamanager__diff_portions_image1 img');
-        var $image2 = jQuery('#mediamanager__diff_portions_image2 img');
+        var $image1 = jQuery('#mediamanager__diff div.diff_portions div.image1 img');
+        var $image2 = jQuery('#mediamanager__diff div.diff_portions div.image2 img');
         if (!$image1.length || !$image2.length) return;
 
         var $div = jQuery("#mediamanager__diff_layout");
@@ -645,7 +638,7 @@ var dw_mediamanager = {
         $image2.width($image1.width());
         $image1.width($image1.width());
 
-        var $slider = jQuery("#mediamanager__portions_slider");
+        var $slider = jQuery("#mediamanager__diff div.diff_slider");
         if (!$slider.length) return;
         $slider.width($image1.width()-20);
 
@@ -655,7 +648,7 @@ var dw_mediamanager = {
         $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")+'%'});
+            jQuery('#mediamanager__diff div.diff_portions div.image2').css({ width: $slider.slider("option", "value")+'%'});
         });
     },
 
@@ -964,7 +957,7 @@ function hasFlash(version){
 
 jQuery(document).ready(function() {
     dw_mediamanager.update_resizable();
-    dw_mediamanager.layout_width = jQuery("#mediamanager__layout").width();
+    dw_mediamanager.layout_width = jQuery("#mediamanager__page").width();
     jQuery(window).resize(dw_mediamanager.window_resize);
 });
 
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index e25c0c9f4..a9728f299 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -401,15 +401,14 @@
     margin-top: 10px;
 }
 
-#mediamanager__diff_table {
+#mediamanager__diff table {
     padding: 0;
     margin: 0;
     margin-top: 10px;
 }
 
-#mediamanager__diff_table li {
+#mediamanager__diff table tr {
     width: 48%;
-    display: inline-block;
     margin: 0;
     margin-bottom: 10px;
     padding: 2px;
@@ -418,23 +417,24 @@
     color: __text__;
 }
 
-* html #mediamanager__diff_table li {
+* html #mediamanager__diff table tr {
     display: inline;
 }
 
-*+html #mediamanager__diff_table li {
+*+html #mediamanager__diff table tr {
     display: inline;
 }
 
 /* For IE7 */
-*:first-child+html #mediamanager__diff_table li {
+*:first-child+html #mediamanager__diff table tr {
     width: 45%;
 }
 
 /* Image diff */
 
-#mediamanager__page dl.img_tags dd.highlighted{
+#mediamanager__page dl.img_tags dd strong {
     background-color: __highlight__;
+    font-weight: normal;
 }
 
 #mediamanager__form_diffview {
@@ -451,8 +451,7 @@
     left: 0;
 }
 
-#mediamanager__diff_opacity_image1,
-#mediamanager__diff_portions_image1 {
+#mediamanager__diff div.image1 {
     width: 97%;
 }
 
@@ -460,21 +459,20 @@
     width: 100%;
 }
 
-#mediamanager__diff_opacity_image2 {
+#mediamanager__diff div.diff_opacity div.image2 {
     width: 97%;
     -moz-opacity: 0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
 }
 
-#mediamanager__diff_portions_image2 {
+#mediamanager__diff div.diff_portions div.image2 {
     width: 97%;
     border-right: 1px solid red;
     overflow: hidden;
 }
 
-#mediamanager__opacity_slider,
-#mediamanager__portions_slider {
+#mediamanager__diff div.diff_slider {
     margin: 10px;
     width: 95%;
 }