Fix mediamanager JS (diffs not yet working)

1 files changed, 86 insertions, 93 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);
 });