jquery.finder.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577
  1. // jQuery finderSelect: a jQuery plugin that activates selecting elements
  2. // within a parent with Ctrl+Click, Command+Click and Shift+Click.
  3. //
  4. // Copyright 2013 Mike Angell
  5. //
  6. // Please see:
  7. //
  8. // https://github.com/evulse/finderselect
  9. //
  10. // For complete documentation.
  11. (function( $ ) {
  12. var d = $(document);
  13. var b = $('body');
  14. var commands = {
  15. highlight: highlight,
  16. unHighlight: unHighlight,
  17. highlightAll: highlightAll,
  18. unHighlightAll: unHighlightAll,
  19. selected: selected,
  20. children: children,
  21. update: update,
  22. addHook: addHook
  23. };
  24. var hooks = {};
  25. var o = {};
  26. var f = $.fn.finderSelect = function() {
  27. if (typeof arguments[0] === 'string') {
  28. var args = Array.prototype.slice.call(arguments);
  29. args.splice(0, 1);
  30. return commands[arguments[0]].apply(this, args);
  31. }
  32. else {
  33. finderSelect.apply(this, arguments);
  34. return this;
  35. }
  36. };
  37. function finderSelect(opt) {
  38. var p = $(this);
  39. var options = {
  40. selectClass: "selected",
  41. unSelectClass: "un-selected",
  42. currentClass: "selected-current",
  43. lastClass: "selected-last",
  44. shiftClass: "selected-shift",
  45. ctrlClass: "selected-ctrl",
  46. triggerUpdate: "finderSelectUpdate",
  47. children: false,
  48. event: "mousedown",
  49. cursor: "pointer",
  50. dragEvent: "mouseenter",
  51. enableClickDrag: true,
  52. enableShiftClick: true,
  53. enableCtrlClick: true,
  54. enableSingleClick: true,
  55. enableSelectAll: true,
  56. enableDisableSelection: true,
  57. enableTouchCtrlDefault: true,
  58. enableDesktopCtrlDefault: false,
  59. totalSelector: false,
  60. menuSelector: false,
  61. menuXOffset: 0,
  62. menuYOffset: 0
  63. };
  64. $.extend(options, opt);
  65. o = options;
  66. if(!o.children) {
  67. o.children = f.detect.children(p);
  68. }
  69. f.h.off(f.get.siblings(p,o), o);
  70. if(o.cursor) {
  71. f.set.cursor(p,o);
  72. }
  73. if(o.enableDisableSelection) {
  74. f.core.disableSelection(p,o);
  75. }
  76. if(o.enableClickDrag) {
  77. f.core.clickDrag(p,o);
  78. }
  79. if(o.enableSelectAll) {
  80. f.core.selectAll(p,o);
  81. }
  82. if(o.enableShiftClick || o.enableCtrlClick || o.enableSingleClick) {
  83. f.core.click(p,o);
  84. }
  85. if(o.totalSelector) {
  86. f.core.totalUpdate(p,o);
  87. }
  88. if(o.menuSelector) {
  89. f.core.loadMenu(p,o);
  90. }
  91. };
  92. function highlight(el) {
  93. f.h.on(el, o);
  94. return this;
  95. }
  96. function unHighlight(el) {
  97. f.h.off(el, o);
  98. return this;
  99. }
  100. function highlightAll() {
  101. var p = $(this);
  102. f.h.on(p.find(o.children), o);
  103. return this;
  104. }
  105. function unHighlightAll() {
  106. var p = $(this);
  107. f.h.off(p.find(o.children), o);
  108. return this;
  109. }
  110. function selected() {
  111. var p = $(this);
  112. return p.find(o.children+'.'+o.selectClass);
  113. }
  114. function children() {
  115. var p = $(this);
  116. return p.find(o.children);
  117. }
  118. function update() {
  119. var p = $(this);
  120. f.t.update(p, o);
  121. return this;
  122. }
  123. function addHook(hookName, fn) {
  124. if(!hooks[hookName]){
  125. hooks[hookName] = [];
  126. }
  127. hooks[hookName] = [fn];
  128. return this;
  129. }
  130. f.core = {
  131. clickDrag: function(p,o) {
  132. f.set.mouseDown(false);
  133. b.mousedown(function(e) {
  134. if(f.detect.leftMouse(e)) { f.set.mouseDown(true);}
  135. });
  136. b.mouseup(function(e) {
  137. if(f.detect.leftMouse(e)) { f.set.mouseDown(false);}
  138. });
  139. p.on(o.dragEvent, o.children, function(e){
  140. var c = f.get.clicks(p,o,$(this));
  141. if (f.get.mouseDown() && f.detect.ctrl(e)) {
  142. f.t.deleteSelection(o);
  143. f.t.toggleDrag(p,c,o);
  144. }
  145. });
  146. return p;
  147. },
  148. click: function(p,o) {
  149. p.on(o.event, o.children, function(e){
  150. if(f.detect.leftMouse(e)) {
  151. if (!$(e.target).hasClass('ch-toggle')) {
  152. var c = f.get.clicks(p,o,$(this));
  153. var ref = $(e.target);
  154. if (ref.parents('.data-row').hasClass('selected') && $('.selected').length == 1) {console.warn(1);
  155. ref.parents('.data-row').removeClass('selected');
  156. ref.parents('.data-row').find('.ch-toggle').attr('checked', false);
  157. return;
  158. }
  159. if (!(f.detect.ctrl(e) && o.enableCtrlClick) && (f.detect.shift(e) && o.enableShiftClick)) {
  160. f.t.deleteSelection(o);
  161. f.t.shiftClick(p,c,o);
  162. }
  163. if (((f.detect.ctrl(e) && o.enableCtrlClick) || (f.detect.touch() && o.enableTouchCtrlDefault) || o.enableDesktopCtrlDefault) && !(f.detect.shift(e) && o.enableShiftClick)) {
  164. f.t.toggleClick(p,c,o);
  165. }
  166. if (!(f.detect.ctrl(e) && o.enableCtrlClick) && !(f.detect.shift(e) && o.enableShiftClick) && o.enableSingleClick && !o.enableDesktopCtrlDefault) {
  167. f.t.singleClick(p,c,o);
  168. }
  169. }
  170. }
  171. o.onFinish(e);
  172. });
  173. },
  174. selectAll: function(p,o) {
  175. p.on('mouseover', function(){
  176. d.on("keydown", turnOff);
  177. });
  178. p.on('mouseout', function(){
  179. d.off("keydown", turnOff);
  180. });
  181. function turnOff(e) {
  182. if (f.detect.ctrl(e)) {
  183. if (e.keyCode == 65) {
  184. e.preventDefault();
  185. if(f.detect.alt(e)) {
  186. f.t.unHAll(p, o);
  187. } else {
  188. f.t.hAll(p,o);
  189. }
  190. }
  191. }
  192. if (e.keyCode == 38) {
  193. var last = f.get.click(p, o.shiftClass);
  194. if(last.length == 0) {
  195. last = f.get.click(p, o.lastClass);
  196. }
  197. var cur = f.get.prev(last,o);
  198. if(last.length == 0) {
  199. cur = p.find(o.children).last();
  200. }
  201. if(f.detect.alt(e)) {
  202. cur = p.find(o.children).first();
  203. }
  204. e.preventDefault();
  205. if(cur.length != 0) {
  206. if(f.detect.shift(e) && o.enableShiftClick) {
  207. var c = f.get.clicks(p,o,cur);
  208. f.t.shiftClick(p,c,o);
  209. } else {
  210. var c = f.get.clicks(p,o,cur);
  211. f.t.singleClick(p,c,o);
  212. }
  213. }
  214. }
  215. if (e.keyCode == 40) {
  216. var last = f.get.click(p, o.shiftClass);
  217. if(last.length == 0) {
  218. last = f.get.click(p, o.lastClass);
  219. }
  220. var cur = f.get.next(last,o);
  221. if(last.length == 0) {
  222. cur = p.find(o.children).first();
  223. }
  224. if(f.detect.alt(e)) {
  225. cur = p.find(o.children).last();
  226. }
  227. e.preventDefault();
  228. if(cur.length != 0) {
  229. if(f.detect.shift(e) && o.enableShiftClick) {
  230. var c = f.get.clicks(p,o,cur);
  231. f.t.shiftClick(p,c,o);
  232. } else {
  233. var c = f.get.clicks(p,o,cur);
  234. f.t.singleClick(p,c,o);
  235. }
  236. }
  237. }
  238. }
  239. },
  240. totalUpdate: function(p,o) {
  241. p.on(o.triggerUpdate, function(){
  242. $(o.totalSelector).html($(this).find(o.children).filter('.'+o.selectClass).length)
  243. });
  244. },
  245. loadMenu: function(p, o) {
  246. p.bind("contextmenu",function(e){
  247. $(o.menuSelector).css({left:(e.pageX+o.menuXOffset),top:(e.pageY+o.menuYOffset)}).show();
  248. return false;
  249. }).bind("mousedown",function(){
  250. $(o.menuSelector).hide();
  251. });
  252. $(o.menuSelector).bind("click",function(){
  253. $(this).hide();
  254. });
  255. },
  256. disableSelection: function(p, o) {
  257. d.on('keydown', function(){
  258. p.on("selectstart", turnOffSelection);
  259. }).on('keyup', function(){
  260. p.off("selectstart", turnOffSelection);
  261. });
  262. function turnOffSelection(e) {
  263. e.preventDefault();
  264. }
  265. }
  266. };
  267. f.h = {
  268. on: function(el, o) {
  269. f.get.hook('highlight:before', [el, o]);
  270. el.removeClass(o.unSelectClass);
  271. el.addClass(o.selectClass);
  272. f.get.hook('highlight:after', [el, o]);
  273. },
  274. off: function(el,o) {
  275. f.get.hook('unHighlight:before', [el, o]);
  276. el.removeClass(o.selectClass);
  277. el.addClass(o.unSelectClass);
  278. f.get.hook('unHighlight:after', [el, o]);
  279. },
  280. tog: function(el,o) {
  281. el.each(function () {
  282. var child = $(this);
  283. if(f.detect.h(child, o)) {
  284. f.h.off(child, o);
  285. } else {
  286. f.h.on(child, o);
  287. }
  288. });
  289. },
  290. reset: function(el,o) {
  291. el.each(function () {
  292. var child = $(this);
  293. if(f.detect.lastH(child, o)) {
  294. f.h.on(child, o);
  295. } else {
  296. f.h.off(child, o);
  297. }
  298. });
  299. },
  300. state: function(el,o) {
  301. el.each(function () {
  302. var child = $(this);
  303. if(f.detect.h(child, o)) {
  304. child.removeClass('stateUnSelected');
  305. child.addClass('stateSelected');
  306. } else {
  307. child.removeClass('stateSelected');
  308. child.addClass('stateUnSelected');
  309. }
  310. });
  311. }
  312. };
  313. f.detect = {
  314. leftMouse: function(e) {
  315. return (e.which == 1);
  316. },
  317. shift: function(e) {
  318. return e.shiftKey;
  319. },
  320. alt: function(e) {
  321. return e.altKey;
  322. },
  323. ctrl: function(e) {
  324. return (e.ctrlKey || e.metaKey);
  325. },
  326. h: function(el,o) {
  327. return el.hasClass(o.selectClass);
  328. },
  329. lastH: function(el,o) {
  330. return el.hasClass('stateSelected');
  331. },
  332. touch: function() {
  333. return !!('ontouchstart' in window) // works on most browsers
  334. || !!('onmsgesturechange' in window); // works on ie10
  335. },
  336. children: function(el) {
  337. return el.children().get(0).tagName;
  338. }
  339. };
  340. f.set = {
  341. clicks: function(curr, shif, ctrl, p, o) {
  342. f.set.click(p, false, o.currentClass);
  343. f.set.click(p, curr, o.lastClass);
  344. f.set.click(p, shif,o.shiftClass);
  345. f.set.click(p, ctrl,o.ctrlClass);
  346. f.t.update(p, o);
  347. },
  348. click: function(p,el,c) {
  349. f.get.click(p,c).removeClass(c);
  350. if(el) { el.addClass(c); }
  351. },
  352. mouseDown: function(bool) {
  353. return b.data('down', bool);
  354. },
  355. cursor: function(p,o) {
  356. var s = f.get.siblings(p,o);
  357. return s.css('cursor', o.cursor);
  358. }
  359. };
  360. f.get = {
  361. clicks: function(p, o, curr) {
  362. var c = {};
  363. f.set.click(p, curr, o.currentClass);
  364. c.current = {v:curr,c: o.currentClass};
  365. c.hard = {v:f.get.click(p, o.lastClass),c:o.lastClass};
  366. c.shift = {v:f.get.click(p, o.shiftClass),c:o.shiftClass};
  367. c.ctrl = {v:f.get.click(p, o.ctrlClass),c:o.ctrlClass};
  368. return c;
  369. },
  370. click: function(p,c) {
  371. return p.find('.'+c);
  372. },
  373. mouseDown: function() {
  374. return b.data('down');
  375. },
  376. siblings: function(p, o) {
  377. return p.find(o.children);
  378. },
  379. between: function(s,y, z) {
  380. if(s.index(y.v) < s.index(z.v)) {
  381. return f.get.elem(true, y.v, false, z.c);
  382. } else {
  383. return f.get.elem(false, y.v, false, z.c);
  384. }
  385. },
  386. elem: function(d, el, s, u) {
  387. var $els = [], $el = (d) ? el.next() : el.prev();
  388. while( $el.length ) {
  389. if(typeof u === 'undefined' || !u || !$el.hasClass(u)) {
  390. if(typeof s === 'undefined' || !s || $el.hasClass(s)) {
  391. $els.push($el[0]);
  392. }
  393. $el = (d) ? $el.next() : $el.prev();
  394. } else {
  395. $el = {};
  396. }
  397. }
  398. return $($els)
  399. },
  400. next: function(p, o) {
  401. return p.next(o.children);
  402. },
  403. prev: function(p, o) {
  404. return p.prev(o.children);
  405. },
  406. hook: function(hookName, data){
  407. var hooked = hooks[hookName]
  408. if(hooked){
  409. for(i=0; i<hooked.length; i++){
  410. hooked[i].apply(undefined, data);
  411. }
  412. }
  413. }
  414. };
  415. f.t = {
  416. update: function(el, o) {
  417. return el.trigger(o.triggerUpdate);
  418. },
  419. deleteSelection: function(o) {
  420. if(o.enableDisableSelection) {
  421. if(document.getSelection) {
  422. var sel = document.getSelection();
  423. if(sel.removeAllRanges) {
  424. sel.removeAllRanges();
  425. }
  426. }
  427. }
  428. },
  429. singleClick: function(p,c,o) {
  430. var s = f.get.siblings(p,o);
  431. f.h.off(s, o);
  432. f.h.on(c.current.v, o);
  433. f.set.clicks(c.current.v, null, null, p, o);
  434. },
  435. toggleClick: function(p,c,o) {
  436. var s = f.get.siblings(p,o);
  437. f.h.tog(c.current.v, o);
  438. f.h.state(s,o);
  439. f.set.clicks(c.current.v, null, null, p, o);
  440. },
  441. toggleClick: function(p,c,o) {
  442. var s = f.get.siblings(p,o);
  443. f.h.tog(c.current.v, o);
  444. f.h.state(s,o);
  445. f.set.clicks(c.current.v, null, null, p, o);
  446. },
  447. toggleDrag: function(p,c,o) {
  448. var s = f.get.siblings(p,o);
  449. f.h.reset(s,o);
  450. if(s.index(c.current.v) != s.index(c.hard.v)) {
  451. f.h.tog(f.get.between(s, c.current, c.hard), o);
  452. f.h.tog(c.current.v, o);
  453. }
  454. f.set.clicks(c.hard.v, null, null, p, o);
  455. },
  456. shiftClick: function(p, c, o) {
  457. var s = f.get.siblings(p,o);
  458. var z = s.index(c.current.v);
  459. var x = s.index(c.hard.v);
  460. if(c.hard.v.length != 0 && !f.detect.h(c.hard.v, o)) {
  461. var start = f.get.elem(true, c.hard.v, o.selectClass);
  462. if(start.length > 0) {
  463. c.hard.v = $(start[0]);
  464. f.set.click(p, c.hard.v, o.lastClass);
  465. } else {
  466. var start = f.get.elem(z < x, c.hard.v, o.selectClass);
  467. if(start.length > 0) {
  468. start = (z > x ) ? $(start[0]) : $(start[start.length-1]);
  469. c.hard.v = start;
  470. f.set.click(p, c.hard.v, o.lastClass);
  471. } else {
  472. c.hard.v = s.first();
  473. f.set.click(p, c.hard.v, o.lastClass);
  474. f.t.singleClick(s,{current:{v:s.first()}},o);
  475. }
  476. }
  477. }
  478. var x = s.index(c.hard.v);
  479. var y = s.index(c.shift.v);
  480. var z = s.index(c.current.v);
  481. if(c.hard.v.length == 0){
  482. f.t.singleClick(s,{current:{v:s.first()}},o);
  483. }
  484. if(c.shift.v.length != 0) {
  485. if((x < y && x < z && z < y) || (x > y && x > z && z > y)) {
  486. f.h.off(f.get.between(s, c.shift, c.current), o);
  487. }
  488. if((x < y && x > z && z < y) || (x > y && x < z && z > y)) {
  489. f.h.off(f.get.between(s, c.shift, c.hard), o);
  490. f.h.on(f.get.between(s, c.current, c.hard), o);
  491. }
  492. if((x > y && x > z && z < y) || (x < y && x < z && z > y) || (x == y)) {
  493. f.h.on(f.get.between(s, c.shift, c.current), o);
  494. } else {
  495. f.h.off(c.shift.v, o);
  496. f.t.unHExist(z>y, c.shift.v,o);
  497. }
  498. } else {
  499. f.t.unHExist(z>x,c.hard.v,o);
  500. f.h.on(f.get.between(s, c.current, c.hard), o);
  501. }
  502. f.h.on(c.current.v, o);
  503. f.set.clicks(c.hard.v, c.current.v, null, p, o);
  504. },
  505. unHAll: function(p,o) {
  506. f.h.off(p.find(o.children), o);
  507. f.t.update(p, o);
  508. },
  509. hAll: function(p,o) {
  510. f.h.on(p.find(o.children), o);
  511. f.t.update(p, o);
  512. },
  513. unHExist: function(bool,el,o) {
  514. if(bool) {
  515. f.h.off(f.get.elem(false, el, false, o.unSelectClass), o);
  516. } else {
  517. f.h.off(f.get.elem(true, el, false, o.unSelectClass), o);
  518. }
  519. }
  520. };
  521. })(window.jQuery || window.Zepto);