js/jquery/src/jquery-ui/jquery.ui.selectable.js

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