Issue with jquery ui 1.12

[chrispcb]

With the new jquery ui 1.12, list and miniature buttons don't work correctly.

[jhickstap]

I have updated my plupload ui file to fix the problem. I fix it in the no minified version. Just not that this was a fast fix and can most likely be change to work better. Also not that the changes will brake in older versions of jquery ui. around line 217 in the js file the place where the html for the buttons is made need to look something like this:

'<div class="plupload_view_switch">' +
                            '<input type="radio" id="'+obj.id+'_view_list" name="view_mode_'+obj.id+'"  />'+
                            '<label class="plupload_button ui-corner-left" for="'+obj.id+'_view_list" data-view="list">'+
                            '<span class="  ui-icon ui-icon-grip-dotted-horizontal"></span></label>' +
                            '<input type="radio" id="'+obj.id+'_view_thumbs" name="view_mode_'+obj.id+'" />'+
                            '<label  class="plupload_button ui-corner-right" for="'+obj.id+'_view_thumbs" data-view="thumbs">'+
                            '<span class=" ui-icon ui-icon-image "></span></label>' +
                        '</div>' +

Around where the buttons are defined for the ui need to be changed to the following. I include lines to find the area:

// buttons
        this.browse_button = $('.plupload_add', this.container).attr('id', id + '_browse');
        this.start_button = $('.plupload_start', this.container).attr('id', id + '_start');
        this.stop_button = $('.plupload_stop', this.container).attr('id', id + '_stop');
        this.thumbs_switcher = $('#' + id + '_view_thumbs');
        this.list_switcher = $('#' + id + '_view_list');

        if ($.ui.button) {
            this.browse_button.button({
                icon: 'ui-icon-circle-plus' ,
                disabled: true
            });

            this.start_button.button({
                icon: 'ui-icon-circle-arrow-e' ,
                disabled: true
            });

            this.stop_button.button({
                icon:'ui-icon-circle-close' 
            });

            this.list_switcher.checkboxradio({
                icon: false
            });

            this.thumbs_switcher.checkboxradio({            
                icon: false
            });
        }

Now for the last change so that the height light works: This is add to the _viewChanged function before calling the trigger.

 if (view == 'list'){
                $("label[for='"+this.list_switcher[0].id+"']").addClass('ui-state-hover');
                $("label[for='"+this.thumbs_switcher[0].id+"']").removeClass('ui-state-hover');
        }else{
            $("label[for='"+this.thumbs_switcher[0].id+"']").addClass('ui-state-hover');
                $("label[for='"+this.list_switcher[0].id+"']").removeClass('ui-state-hover');
        }

Hope this helps. I do not know if anyone is update the project on gitHub because last update is over a year ago.

[chrispcb]

OK thanks, I'm going to test this. I hope that the project is not dead. The latest version of the project is May.

[fnagel]

Afaics jQuery UI 1.11.4 with jQuery 1.10 is the latest working version. Both have serious security issues and should not be used anymore.

Related to #1367 Related to #1623