Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

added support to sortable callbacks, removed trailing witespaces, removed unused css class 'actions' #113

Open
wants to merge 1 commit into from

2 participants

@volpino

hi!
I added some changes to your code because i needed a callback for the sortable list. I use your multiselect as a layer selector for OpenLayers (unfortunately i don't have an online public demo). When i sort the list i want the layers on the map to sort too.

So i use this code to create the multiselect:

    $(".multiselect").multiselect({                                            
      sortable: 'left',                                                        
      sortableUpdate:                                                          
        function(event, ui, sortable) {                                        
          var layer_list = sortable.sortable("toArray");                       
          var layer_id = ui.item.attr("id");                                   
          var layer = map.getLayersBy("id", layer_id)[0];                      
          if (!(layer.isBaseLayer || layer_id.search("OSM") != -1)) {          
            var layer_pos = layer_list.length - 1 - layer_list.indexOf(layer_id);
            if (layer_pos != 0) {                                              
              console.log("moving " + layer_id + " to " + layer_pos);          
              map.setLayerIndex(layer, layer_pos);                             
              return;                                                          
            }                                                                  
          }                                                                    
          sortable.sortable('cancel');                                         
        },                                                                     
      selected:                                                                
        function(event, ui) {                                                  
          map.getLayersByName($(ui.option).val())[0].setVisibility(true);   
        },                                                                     
      deselected:                                                              
        function(event, ui) {                                                  
          map.getLayersByName($(ui.option).val())[0].setVisibility(false);  
        }                                                                      
    });

I removed some trailing whitespaces, and an unused css class that was messing everything up because it is defined in the twitter bootstrap css (which i'm using for the whole webpage style).

@Prasanna79

The 'actions' class added in js messes things up with Twitter Bootstrap. Looks like it should be 'action' according to the css.

@volpino

Yes, it's what my patch is about.
You can use my fork in the meanwhile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 21, 2011
  1. @volpino

    added support to sortable callbacks, removed trailing witespaces, rem…

    volpino authored
    …oved unused css class 'actions'
This page is out of date. Refresh to see the latest.
Showing with 57 additions and 40 deletions.
  1. +57 −40 js/ui.multiselect.js
View
97 js/ui.multiselect.js
@@ -4,13 +4,13 @@
* Authors:
* Michael Aufreiter (quasipartikel.at)
* Yanick Rochon (yanick.rochon[at]gmail[dot]com)
- *
+ *
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
- *
+ *
* http://yanickrochon.uuuq.com/multiselect/
*
- *
+ *
* Depends:
* ui.core.js
* ui.draggable.js
@@ -24,8 +24,8 @@
*
* Notes:
* The strings in this plugin use a templating engine to enable localization
- * and allow flexibility in the messages. Read the documentation for more details.
- *
+ * and allow flexibility in the messages. Read the documentation for more details.
+ *
* Todo:
* restore selected items on remote searchable multiselect upon page reload (same behavior as local mode)
* (is it worth it??) add a public function to apply the nodeComparator to all items (when using nodeComparator setter)
@@ -93,7 +93,10 @@ $.widget("ui.multiselect", {
// callbacks
dataParser: defaultDataParser,
nodeComparator: defaultNodeComparator,
- nodeInserted: null
+ nodeInserted: null,
+ sortableStart: null,
+ sortableUpdate: null,
+ sortableStop: null
},
_create: function() {
this.element.hide();
@@ -101,17 +104,17 @@ $.widget("ui.multiselect", {
this.container = $('<div class="ui-multiselect ui-helper-clearfix ui-widget"></div>').insertAfter(this.element);
this.selectedContainer = $('<div class="ui-widget-content list-container selected"></div>').appendTo(this.container);
this.availableContainer = $('<div class="ui-widget-content list-container available"></div>').appendTo(this.container);
- this.selectedActions = $('<div class="actions ui-widget-header ui-helper-clearfix"><span class="count">'+$.tmpl($.ui.multiselect.locale.itemsCount,{count:0})+'</span><a href="#" class="remove-all">'+$.tmpl($.ui.multiselect.locale.removeAll)+'</a></div>').appendTo(this.selectedContainer);
- this.availableActions = $('<div class="actions ui-widget-header ui-helper-clearfix"><span class="busy">'+$.tmpl($.ui.multiselect.locale.busy)+'</span><input type="text" class="search ui-widget-content ui-corner-all"/><a href="#" class="add-all">'+$.tmpl($.ui.multiselect.locale.addAll)+'</a></div>').appendTo(this.availableContainer);
+ this.selectedActions = $('<div class="ui-widget-header ui-helper-clearfix"><span class="count">'+$.tmpl($.ui.multiselect.locale.itemsCount,{count:0})+'</span><a href="#" class="remove-all">'+$.tmpl($.ui.multiselect.locale.removeAll)+'</a></div>').appendTo(this.selectedContainer);
+ this.availableActions = $('<div class="ui-widget-header ui-helper-clearfix"><span class="busy">'+$.tmpl($.ui.multiselect.locale.busy)+'</span><input type="text" class="search ui-widget-content ui-corner-all"/><a href="#" class="add-all">'+$.tmpl($.ui.multiselect.locale.addAll)+'</a></div>').appendTo(this.availableContainer);
this.selectedList = $('<ul class="list selected"><li class="ui-helper-hidden-accessible"></li></ul>').bind('selectstart', function(){return false;}).appendTo(this.selectedContainer);
this.availableList = $('<ul class="list available"><li class="ui-helper-hidden-accessible"></li></ul>').bind('selectstart', function(){return false;}).appendTo(this.availableContainer);
-
+
var that = this;
// initialize data cache
this.availableList.data('multiselect.cache', {});
this.selectedList.data('multiselect.cache', {});
-
+
if ( !this.options.animated ) {
this.options.show = 'show';
this.options.hide = 'hide';
@@ -130,12 +133,12 @@ $.widget("ui.multiselect", {
};
this._prepareLists('selected', 'available', dragOptions);
this._prepareLists('available', 'selected', dragOptions);
-
+
// set up livesearch
this._registerSearchEvents(this.availableContainer.find('input.search'), true);
// make sure that we're not busy yet
this._setBusy(false);
-
+
// batch actions
this.container.find(".remove-all").bind('click.multiselect', function() { that.selectNone(); return false; });
this.container.find(".add-all").bind('click.multiselect', function() { that.selectAll(); return false; });
@@ -244,7 +247,7 @@ $.widget("ui.multiselect", {
this._populateLists($(elements));
}
- this._filter(this.availableList.children('li.ui-element'));
+ this._filter(this.availableList.children('li.ui-element'));
this._setBusy(false);
return elements.length;
@@ -274,7 +277,7 @@ $.widget("ui.multiselect", {
// readonly options
this._messages(
$.ui.multiselect.constants.MESSAGE_WARNING,
- $.ui.multiselect.locale.errorReadonly,
+ $.ui.multiselect.locale.errorReadonly,
{option: key}
);
default:
@@ -306,7 +309,7 @@ $.widget("ui.multiselect", {
_refreshDividerLocation: function() {
this.selectedContainer.width(Math.floor(this.element.width()*this.options.dividerLocation));
this.availableContainer.width(Math.floor(this.element.width()*(1-this.options.dividerLocation)));
- },
+ },
_prepareLists: function(side, otherSide, opts) {
var that = this;
var itemSelected = ('selected' == side);
@@ -318,7 +321,7 @@ $.widget("ui.multiselect", {
.data('multiselect.sortable', opts[side].sortable )
.data('multiselect.droppable', opts[side].droppable )
.data('multiselect.draggable', !opts[side].sortable && (opts[otherSide].sortable || opts[otherSide].droppable) );
-
+
if (opts[side].sortable) {
list.sortable({
appendTo: this.container,
@@ -330,7 +333,7 @@ $.widget("ui.multiselect", {
receive: function(event, ui) {
// DEBUG
//that._messages(0, "Receive : " + ui.item.data('multiselect.optionLink') + ":" + ui.item.parent()[0].className + " = " + itemSelected);
-
+
// we received an element from a sortable to another sortable...
if (opts[otherSide].sortable) {
var optionLink = ui.item.data('multiselect.optionLink');
@@ -346,15 +349,29 @@ $.widget("ui.multiselect", {
that._setSelected(ui.item, itemSelected, true);
} else {
// the other is droppable only, so merely select the element...
- setTimeout(function() {
+ setTimeout(function() {
that._setSelected(ui.item, itemSelected);
}, 10);
}
},
+ start: function(event, ui) {
+ if (that.options.sortableStart) {
+ that.options.sortableStart(event, ui, $(this));
+ }
+ },
+ update: function(event, ui) {
+ that._moveOptionNode(ui.item);
+ if (that.options.sortableUpdate) {
+ that.options.sortableUpdate(event, ui, $(this));
+ }
+ },
stop: function(event, ui) {
// DEBUG
//that._messages(0, "Stop : " + (ui.item.parent()[0] == otherList[0]));
that._moveOptionNode(ui.item);
+ if (that.options.sortableStop) {
+ that.options.sortableStop(event, ui, $(this));
+ }
}
});
}
@@ -388,9 +405,9 @@ $.widget("ui.multiselect", {
// received an item from a sortable to a droppable
} else if (!opts[side].sortable) {
- setTimeout(function() {
- ui.draggable.hide();
- that._setSelected(ui.draggable, itemSelected);
+ setTimeout(function() {
+ ui.draggable.hide();
+ that._setSelected(ui.draggable, itemSelected);
}, 10);
}
@@ -400,7 +417,7 @@ $.widget("ui.multiselect", {
},
_populateLists: function(options) {
this._setBusy(true);
-
+
var that = this;
// do this async so the browser actually display the waiting message
setTimeout(function() {
@@ -415,7 +432,7 @@ $.widget("ui.multiselect", {
that._insertToList(item, list);
}));
-
+
// update count
that._setBusy(false);
that._updateCount();
@@ -447,7 +464,7 @@ $.widget("ui.multiselect", {
} else {
that._messages(
$.ui.multiselect.constants.MESSAGE_EXCEPTION,
- $.ui.multiselect.locale.errorInsertNode,
+ $.ui.multiselect.locale.errorInsertNode,
{key:node.data('multiselect.optionLink').val(), value:node.text()}
);
that._setBusy(false);
@@ -469,7 +486,7 @@ $.widget("ui.multiselect", {
},
_getOptionNode: function(option) {
option = $(option);
- var node = $('<li class="ui-state-default ui-element"><span class="ui-icon"/>'+option.text()+'<a href="#" class="ui-state-default action"><span class="ui-corner-all ui-icon"/></a></li>').hide();
+ var node = $('<li class="ui-state-default ui-element" id="'+option.attr("id")+'"><span class="ui-icon"/>'+option.text()+'<a href="#" class="ui-state-default action"><span class="ui-corner-all ui-icon"/></a></li>').hide();
node.data('multiselect.optionLink', option);
return node;
},
@@ -480,7 +497,7 @@ $.widget("ui.multiselect", {
if (optionLink) {
var prevItem = item.prev('li:not(.ui-helper-hidden-accessible,.ui-sortable-placeholder):visible');
var prevOptionLink = prevItem.size() ? prevItem.data('multiselect.optionLink') : null;
-
+
if (prevOptionLink) {
optionLink.insertAfter(prevOptionLink);
} else {
@@ -504,7 +521,7 @@ $.widget("ui.multiselect", {
return false;
}
},
- // clones an item with
+ // clones an item with
// didn't find a smarter away around this (michael)
// now using cache to speed up the process (yr)
_cloneWithData: function(clonee, cacheName, insertItem) {
@@ -601,7 +618,7 @@ $.widget("ui.multiselect", {
}
// update idx
item.data('multiselect.idx', i);
-
+
return succ;
},
// @param DOMElement item is the item to set
@@ -649,7 +666,7 @@ $.widget("ui.multiselect", {
// fire selection event
this._trigger(selected ? 'selected' : 'deselected', null, this._ui('selection', optionLink));
-
+
return otherItem;
},
_setBusy: function(state) {
@@ -683,13 +700,13 @@ $.widget("ui.multiselect", {
item.children('span').addClass('ui-helper-hidden').removeClass('ui-icon');
item.find('a.action span').addClass('ui-icon-minus').removeClass('ui-icon-plus');
this._registerRemoveEvents(item.find('a.action'));
-
+
} else {
item.children('span').addClass('ui-helper-hidden').removeClass('ui-icon');
item.find('a.action span').addClass('ui-icon-plus').removeClass('ui-icon-minus');
this._registerAddEvents(item.find('a.action'));
}
-
+
this._registerHoverEvents(item);
return item;
@@ -698,7 +715,7 @@ $.widget("ui.multiselect", {
_filter: function(elements) {
var input = this.availableActions.children('input.search');
var term = $.trim( input.val().toLowerCase() );
-
+
if ( !term ) {
elements.removeClass('filtered');
} else {
@@ -776,7 +793,7 @@ $.widget("ui.multiselect", {
_registerSearchEvents: function(input, searchNow) {
var that = this;
var previousValue = input.val(), timer;
-
+
var _searchNow = function(forceUpdate) {
if (that.busy) return;
@@ -790,22 +807,22 @@ $.widget("ui.multiselect", {
$.ajax({
url: that.options.remoteUrl,
data: $.extend(params, {q:escape(value)}),
- success: function(data) {
+ success: function(data) {
that.addOptions(data);
- that._setBusy(false);
+ that._setBusy(false);
},
error: function(request,status,e) {
that._messages(
- $.ui.multiselect.constants.MESSAGE_ERROR,
- $.ui.multiselect.locale.errorRequest,
+ $.ui.multiselect.constants.MESSAGE_ERROR,
+ $.ui.multiselect.locale.errorRequest,
{status:status}
);
- that._setBusy(false);
+ that._setBusy(false);
}
});
} catch (e) {
that._messages($.ui.multiselect.constants.MESSAGE_EXCEPTION, e.message); // error message template ??
- that._setBusy(false);
+ that._setBusy(false);
}
} else {
that._filter(that.availableList.children('li.ui-element'));
@@ -898,4 +915,4 @@ $.extend($.ui.multiselect, {
}
});
-})(jQuery);
+})(jQuery);
Something went wrong with that request. Please try again.