js/ui/jquery.ui.selectable.js

   1 /*
   2  * jQuery UI Selectable 1.8.10
   3  *
   4  * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
   5  * Dual licensed under the MIT or GPL Version 2 licenses.
   6  * http://jquery.org/license
   7  *
   8  * http://docs.jquery.com/UI/Selectables
   9  *
  10  * Depends:
  11  *      jquery.ui.core.js
  12  *      jquery.ui.mouse.js
  13  *      jquery.ui.widget.js
  14  */
  15 (function( $, undefined ) {
  16
  17 $.widget("ui.selectable", $.ui.mouse, {
  18         options: {
  19                 appendTo: 'body',
  20                 autoRefresh: true,
  21                 distance: 0,
  22                 filter: '*',
  23                 tolerance: 'touch'
  24         },
  25         _create: function() {
  26                 var self = this;
  27
  28                 this.element.addClass("ui-selectable");
  29
  30                 this.dragged = false;
  31
  32                 // cache selectee children based on filter
  33                 var selectees;
  34                 this.refresh = function() {
  35                         selectees = $(self.options.filter, self.element[0]);
  36                         selectees.each(function() {
  37                                 var $this = $(this);
  38                                 var pos = $this.offset();
  39                                 $.data(this, "selectable-item", {
  40                                         element: this,
  41                                         $element: $this,
  42                                         left: pos.left,
  43                                         top: pos.top,
  44                                         right: pos.left + $this.outerWidth(),
  45                                         bottom: pos.top + $this.outerHeight(),
  46                                         startselected: false,
  47                                         selected: $this.hasClass('ui-selected'),
  48                                         selecting: $this.hasClass('ui-selecting'),
  49                                         unselecting: $this.hasClass('ui-unselecting')
  50                                 });
  51                         });
  52                 };
  53                 this.refresh();
  54
  55                 this.selectees = selectees.addClass("ui-selectee");
  56
  57                 this._mouseInit();
  58
  59                 this.helper = $("<div class='ui-selectable-helper'></div>");
  60         },
  61
  62         destroy: function() {
  63                 this.selectees
  64                         .removeClass("ui-selectee")
  65                         .removeData("selectable-item");
  66                 this.element
  67                         .removeClass("ui-selectable ui-selectable-disabled")
  68                         .removeData("selectable")
  69                         .unbind(".selectable");
  70                 this._mouseDestroy();
  71
  72                 return this;
  73         },
  74
  75         _mouseStart: function(event) {
  76                 var self = this;
  77
  78                 this.opos = [event.pageX, event.pageY];
  79
  80                 if (this.options.disabled)
  81                         return;
  82
  83                 var options = this.options;
  84
  85                 this.selectees = $(options.filter, this.element[0]);
  86
  87                 this._trigger("start", event);
  88
  89                 $(options.appendTo).append(this.helper);
  90                 // position helper (lasso)
  91                 this.helper.css({
  92                         "left": event.clientX,
  93                         "top": event.clientY,
  94                         "width": 0,
  95                         "height": 0
  96                 });
  97
  98                 if (options.autoRefresh) {
  99                         this.refresh();
 100                 }
 101
 102                 this.selectees.filter('.ui-selected').each(function() {
 103                         var selectee = $.data(this, "selectable-item");
 104                         selectee.startselected = true;
 105                         if (!event.metaKey) {
 106                                 selectee.$element.removeClass('ui-selected');
 107                                 selectee.selected = false;
 108                                 selectee.$element.addClass('ui-unselecting');
 109                                 selectee.unselecting = true;
 110                                 // selectable UNSELECTING callback
 111                                 self._trigger("unselecting", event, {
 112                                         unselecting: selectee.element
 113                                 });
 114                         }
 115                 });
 116
 117                 $(event.target).parents().andSelf().each(function() {
 118                         var selectee = $.data(this, "selectable-item");
 119                         if (selectee) {
 120                                 var doSelect = !event.metaKey || !selectee.$element.hasClass('ui-selected');
 121                                 selectee.$element
 122                                         .removeClass(doSelect ? "ui-unselecting" : "ui-selected")
 123                                         .addClass(doSelect ? "ui-selecting" : "ui-unselecting");
 124                                 selectee.unselecting = !doSelect;
 125                                 selectee.selecting = doSelect;
 126                                 selectee.selected = doSelect;
 127                                 // selectable (UN)SELECTING callback
 128                                 if (doSelect) {
 129                                         self._trigger("selecting", event, {
 130                                                 selecting: selectee.element
 131                                         });
 132                                 } else {
 133                                         self._trigger("unselecting", event, {
 134                                                 unselecting: selectee.element
 135                                         });
 136                                 }
 137                                 return false;
 138                         }
 139                 });
 140
 141         },
 142
 143         _mouseDrag: function(event) {
 144                 var self = this;
 145                 this.dragged = true;
 146
 147                 if (this.options.disabled)
 148                         return;
 149
 150                 var options = this.options;
 151
 152                 var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX, y2 = event.pageY;
 153                 if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; }
 154                 if (y1 > y2) { var tmp = y2; y2 = y1; y1 = tmp; }
 155                 this.helper.css({left: x1, top: y1, width: x2-x1, height: y2-y1});
 156
 157                 this.selectees.each(function() {
 158                         var selectee = $.data(this, "selectable-item");
 159                         //prevent helper from being selected if appendTo: selectable
 160                         if (!selectee || selectee.element == self.element[0])
 161                                 return;
 162                         var hit = false;
 163                         if (options.tolerance == 'touch') {
 164                                 hit = ( !(selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1) );
 165                         } else if (options.tolerance == 'fit') {
 166                                 hit = (selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2);
 167                         }
 168
 169                         if (hit) {
 170                                 // SELECT
 171                                 if (selectee.selected) {
 172                                         selectee.$element.removeClass('ui-selected');
 173                                         selectee.selected = false;
 174                                 }
 175                                 if (selectee.unselecting) {
 176                                         selectee.$element.removeClass('ui-unselecting');
 177                                         selectee.unselecting = false;
 178                                 }
 179                                 if (!selectee.selecting) {
 180                                         selectee.$element.addClass('ui-selecting');
 181                                         selectee.selecting = true;
 182                                         // selectable SELECTING callback
 183                                         self._trigger("selecting", event, {
 184                                                 selecting: selectee.element
 185                                         });
 186                                 }
 187                         } else {
 188                                 // UNSELECT
 189                                 if (selectee.selecting) {
 190                                         if (event.metaKey && selectee.startselected) {
 191                                                 selectee.$element.removeClass('ui-selecting');
 192                                                 selectee.selecting = false;
 193                                                 selectee.$element.addClass('ui-selected');
 194                                                 selectee.selected = true;
 195                                         } else {
 196                                                 selectee.$element.removeClass('ui-selecting');
 197                                                 selectee.selecting = false;
 198                                                 if (selectee.startselected) {
 199                                                         selectee.$element.addClass('ui-unselecting');
 200                                                         selectee.unselecting = true;
 201                                                 }
 202                                                 // selectable UNSELECTING callback
 203                                                 self._trigger("unselecting", event, {
 204                                                         unselecting: selectee.element
 205                                                 });
 206                                         }
 207                                 }
 208                                 if (selectee.selected) {
 209                                         if (!event.metaKey && !selectee.startselected) {
 210                                                 selectee.$element.removeClass('ui-selected');
 211                                                 selectee.selected = false;
 212
 213                                                 selectee.$element.addClass('ui-unselecting');
 214                                                 selectee.unselecting = true;
 215                                                 // selectable UNSELECTING callback
 216                                                 self._trigger("unselecting", event, {
 217                                                         unselecting: selectee.element
 218                                                 });
 219                                         }
 220                                 }
 221                         }
 222                 });
 223
 224                 return false;
 225         },
 226
 227         _mouseStop: function(event) {
 228                 var self = this;
 229
 230                 this.dragged = false;
 231
 232                 var options = this.options;
 233
 234                 $('.ui-unselecting', this.element[0]).each(function() {
 235                         var selectee = $.data(this, "selectable-item");
 236                         selectee.$element.removeClass('ui-unselecting');
 237                         selectee.unselecting = false;
 238                         selectee.startselected = false;
 239                         self._trigger("unselected", event, {
 240                                 unselected: selectee.element
 241                         });
 242                 });
 243                 $('.ui-selecting', this.element[0]).each(function() {
 244                         var selectee = $.data(this, "selectable-item");
 245                         selectee.$element.removeClass('ui-selecting').addClass('ui-selected');
 246                         selectee.selecting = false;
 247                         selectee.selected = true;
 248                         selectee.startselected = true;
 249                         self._trigger("selected", event, {
 250                                 selected: selectee.element
 251                         });
 252                 });
 253                 this._trigger("stop", event);
 254
 255                 this.helper.remove();
 256
 257                 return false;
 258         }
 259
 260 });
 261
 262 $.extend($.ui.selectable, {
 263         version: "1.8.10"
 264 });
 265
 266 })(jQuery);