jquery.finder.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604
  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: "mouseup",
  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. $(e.target).hasClass('check-label') ||
  153. ( $(e.target).hasClass('l-unit-toolbar__col--left')) ) {
  154. var c = f.get.clicks(p,o,$(this));
  155. var ref = $(e.target);
  156. if (ref.parents('.l-unit').hasClass('selected')/* && $('.l-unit.selected').length == 1*/) {
  157. $('.toggle-all').removeClass('clicked-on');
  158. f.t.toggleClick(p,c,o);
  159. o.onFinish(e);
  160. return;
  161. }
  162. if (!(f.detect.ctrl(e) && o.enableCtrlClick) && (f.detect.shift(e) && o.enableShiftClick)) {
  163. f.t.deleteSelection(o);
  164. f.t.shiftClick(p,c,o);
  165. }
  166. if (((f.detect.ctrl(e) && o.enableCtrlClick) || (f.detect.touch() && o.enableTouchCtrlDefault) || o.enableDesktopCtrlDefault) && !(f.detect.shift(e) && o.enableShiftClick)) {
  167. f.t.toggleClick(p,c,o);
  168. }
  169. if (!(f.detect.ctrl(e) && o.enableCtrlClick) && !(f.detect.shift(e) && o.enableShiftClick) && o.enableSingleClick && !o.enableDesktopCtrlDefault) {
  170. f.t.singleClick(p,c,o);
  171. }
  172. }
  173. }
  174. o.onFinish(e);
  175. });
  176. },
  177. selectAll: function(p,o) {
  178. p.on('mouseover', function(){
  179. //d.on("keydown", turnOff);
  180. });
  181. p.on('mouseout', function(){
  182. //d.off("keydown", turnOff);
  183. });
  184. function turnOff(e) {
  185. if (f.detect.ctrl(e)) {
  186. /*
  187. shortcut.add("Ctrl+a", function(evt){
  188. if(jQuery('.ch-toggle:checked').length > 0) {
  189. f.t.unHAll(p, o);
  190. jQuery('.ch-toggle:checked').attr('checked', false);
  191. } else {
  192. f.t.hAll(p,o);
  193. }
  194. }, {
  195. 'type': 'keyup',
  196. 'propagate': false,
  197. 'disable_in_input': true,
  198. 'target': document
  199. }
  200. );
  201. */
  202. if (e.keyCode == 65) { // ctrl + a
  203. e.preventDefault();
  204. //if(f.detect.alt(e)) {
  205. if(jQuery('.ch-toggle:checked').length > 0) {
  206. f.t.unHAll(p, o);
  207. jQuery('.ch-toggle:checked').attr('checked', false);
  208. } else {
  209. f.t.hAll(p,o);
  210. }
  211. }
  212. }
  213. if (e.keyCode == 38) {
  214. var last = f.get.click(p, o.shiftClass);
  215. if(last.length == 0) {
  216. last = f.get.click(p, o.lastClass);
  217. }
  218. var cur = f.get.prev(last,o);
  219. if(last.length == 0) {
  220. cur = p.find(o.children).last();
  221. }
  222. if(f.detect.alt(e)) {
  223. cur = p.find(o.children).first();
  224. }
  225. e.preventDefault();
  226. if(cur.length != 0) {
  227. if(f.detect.shift(e) && o.enableShiftClick) {
  228. var c = f.get.clicks(p,o,cur);
  229. f.t.shiftClick(p,c,o);
  230. } else {
  231. var c = f.get.clicks(p,o,cur);
  232. f.t.singleClick(p,c,o);
  233. }
  234. }
  235. }
  236. if (e.keyCode == 40) {
  237. var last = f.get.click(p, o.shiftClass);
  238. if(last.length == 0) {
  239. last = f.get.click(p, o.lastClass);
  240. }
  241. var cur = f.get.next(last,o);
  242. if(last.length == 0) {
  243. cur = p.find(o.children).first();
  244. }
  245. if(f.detect.alt(e)) {
  246. cur = p.find(o.children).last();
  247. }
  248. e.preventDefault();
  249. if(cur.length != 0) {
  250. if(f.detect.shift(e) && o.enableShiftClick) {
  251. var c = f.get.clicks(p,o,cur);
  252. f.t.shiftClick(p,c,o);
  253. } else {
  254. var c = f.get.clicks(p,o,cur);
  255. f.t.singleClick(p,c,o);
  256. }
  257. }
  258. }
  259. }
  260. },
  261. totalUpdate: function(p,o) {
  262. p.on(o.triggerUpdate, function(){
  263. $(o.totalSelector).html($(this).find(o.children).filter('.'+o.selectClass).length)
  264. });
  265. },
  266. loadMenu: function(p, o) {
  267. p.bind("contextmenu",function(e){
  268. $(o.menuSelector).css({left:(e.pageX+o.menuXOffset),top:(e.pageY+o.menuYOffset)}).show();
  269. return false;
  270. }).bind("mousedown",function(){
  271. $(o.menuSelector).hide();
  272. });
  273. $(o.menuSelector).bind("click",function(){
  274. $(this).hide();
  275. });
  276. },
  277. disableSelection: function(p, o) {
  278. d.on('keydown', function(){
  279. p.on("selectstart", turnOffSelection);
  280. }).on('keyup', function(){
  281. p.off("selectstart", turnOffSelection);
  282. });
  283. function turnOffSelection(e) {
  284. e.preventDefault();
  285. }
  286. }
  287. };
  288. f.h = {
  289. on: function(el, o) {
  290. f.get.hook('highlight:before', [el, o]);
  291. el.removeClass(o.unSelectClass);
  292. el.addClass(o.selectClass);
  293. f.get.hook('highlight:after', [el, o]);
  294. },
  295. off: function(el,o) {
  296. f.get.hook('unHighlight:before', [el, o]);
  297. el.removeClass(o.selectClass);
  298. el.addClass(o.unSelectClass);
  299. f.get.hook('unHighlight:after', [el, o]);
  300. },
  301. tog: function(el,o) {
  302. el.each(function () {
  303. var child = $(this);
  304. if(f.detect.h(child, o)) {
  305. f.h.off(child, o);
  306. } else {
  307. f.h.on(child, o);
  308. }
  309. });
  310. },
  311. reset: function(el,o) {
  312. el.each(function () {
  313. var child = $(this);
  314. if(f.detect.lastH(child, o)) {
  315. f.h.on(child, o);
  316. } else {
  317. f.h.off(child, o);
  318. }
  319. });
  320. },
  321. state: function(el,o) {
  322. el.each(function () {
  323. var child = $(this);
  324. if(f.detect.h(child, o)) {
  325. child.removeClass('stateUnSelected');
  326. child.addClass('stateSelected');
  327. } else {
  328. child.removeClass('stateSelected');
  329. child.addClass('stateUnSelected');
  330. }
  331. });
  332. }
  333. };
  334. f.detect = {
  335. leftMouse: function(e) {
  336. return (e.which == 1);
  337. },
  338. shift: function(e) {
  339. return e.shiftKey;
  340. },
  341. alt: function(e) {
  342. return e.altKey;
  343. },
  344. ctrl: function(e) {
  345. return (e.ctrlKey || e.metaKey);
  346. },
  347. h: function(el,o) {
  348. return el.hasClass(o.selectClass);
  349. },
  350. lastH: function(el,o) {
  351. return el.hasClass('stateSelected');
  352. },
  353. touch: function() {
  354. return !!('ontouchstart' in window) // works on most browsers
  355. || !!('onmsgesturechange' in window); // works on ie10
  356. },
  357. children: function(el) {
  358. return el.children().get(0).tagName;
  359. }
  360. };
  361. f.set = {
  362. clicks: function(curr, shif, ctrl, p, o) {
  363. f.set.click(p, false, o.currentClass);
  364. f.set.click(p, curr, o.lastClass);
  365. f.set.click(p, shif,o.shiftClass);
  366. f.set.click(p, ctrl,o.ctrlClass);
  367. f.t.update(p, o);
  368. },
  369. click: function(p,el,c) {
  370. f.get.click(p,c).removeClass(c);
  371. if(el) { el.addClass(c); }
  372. },
  373. mouseDown: function(bool) {
  374. return b.data('down', bool);
  375. },
  376. cursor: function(p,o) {
  377. /* do not set cursor pointer inline styles
  378. var s = f.get.siblings(p,o);
  379. return s.css('cursor', o.cursor);*/
  380. }
  381. };
  382. f.get = {
  383. clicks: function(p, o, curr) {
  384. var c = {};
  385. f.set.click(p, curr, o.currentClass);
  386. c.current = {v:curr,c: o.currentClass};
  387. c.hard = {v:f.get.click(p, o.lastClass),c:o.lastClass};
  388. c.shift = {v:f.get.click(p, o.shiftClass),c:o.shiftClass};
  389. c.ctrl = {v:f.get.click(p, o.ctrlClass),c:o.ctrlClass};
  390. return c;
  391. },
  392. click: function(p,c) {
  393. return p.find('.'+c);
  394. },
  395. mouseDown: function() {
  396. return b.data('down');
  397. },
  398. siblings: function(p, o) {
  399. return p.find(o.children);
  400. },
  401. between: function(s,y, z) {
  402. if(s.index(y.v) < s.index(z.v)) {
  403. return f.get.elem(true, y.v, false, z.c);
  404. } else {
  405. return f.get.elem(false, y.v, false, z.c);
  406. }
  407. },
  408. elem: function(d, el, s, u) {
  409. var $els = [], $el = (d) ? el.next() : el.prev();
  410. while( $el.length ) {
  411. if(typeof u === 'undefined' || !u || !$el.hasClass(u)) {
  412. if(typeof s === 'undefined' || !s || $el.hasClass(s)) {
  413. $els.push($el[0]);
  414. }
  415. $el = (d) ? $el.next() : $el.prev();
  416. } else {
  417. $el = {};
  418. }
  419. }
  420. return $($els)
  421. },
  422. next: function(p, o) {
  423. return p.next(o.children);
  424. },
  425. prev: function(p, o) {
  426. return p.prev(o.children);
  427. },
  428. hook: function(hookName, data){
  429. var hooked = hooks[hookName]
  430. if(hooked){
  431. for(i=0; i<hooked.length; i++){
  432. hooked[i].apply(undefined, data);
  433. }
  434. }
  435. }
  436. };
  437. f.t = {
  438. update: function(el, o) {
  439. return el.trigger(o.triggerUpdate);
  440. },
  441. deleteSelection: function(o) {
  442. if(o.enableDisableSelection) {
  443. if(document.getSelection) {
  444. var sel = document.getSelection();
  445. if(sel.removeAllRanges) {
  446. sel.removeAllRanges();
  447. }
  448. }
  449. }
  450. },
  451. singleClick: function(p,c,o) {
  452. var s = f.get.siblings(p,o);
  453. //f.h.off(s, o);
  454. f.h.on(c.current.v, o);
  455. f.set.clicks(c.current.v, null, null, p, o);
  456. },
  457. toggleClick: function(p,c,o) {
  458. var s = f.get.siblings(p,o);
  459. f.h.tog(c.current.v, o);
  460. f.h.state(s,o);
  461. f.set.clicks(c.current.v, null, null, p, o);
  462. },
  463. toggleClick: function(p,c,o) {
  464. var s = f.get.siblings(p,o);
  465. f.h.tog(c.current.v, o);
  466. f.h.state(s,o);
  467. f.set.clicks(c.current.v, null, null, p, o);
  468. },
  469. toggleDrag: function(p,c,o) {
  470. var s = f.get.siblings(p,o);
  471. f.h.reset(s,o);
  472. if(s.index(c.current.v) != s.index(c.hard.v)) {
  473. f.h.tog(f.get.between(s, c.current, c.hard), o);
  474. f.h.tog(c.current.v, o);
  475. }
  476. f.set.clicks(c.hard.v, null, null, p, o);
  477. },
  478. shiftClick: function(p, c, o) {
  479. var s = f.get.siblings(p,o);
  480. var z = s.index(c.current.v);
  481. var x = s.index(c.hard.v);
  482. if(c.hard.v.length != 0 && !f.detect.h(c.hard.v, o)) {
  483. var start = f.get.elem(true, c.hard.v, o.selectClass);
  484. if(start.length > 0) {
  485. c.hard.v = $(start[0]);
  486. f.set.click(p, c.hard.v, o.lastClass);
  487. } else {
  488. var start = f.get.elem(z < x, c.hard.v, o.selectClass);
  489. if(start.length > 0) {
  490. start = (z > x ) ? $(start[0]) : $(start[start.length-1]);
  491. c.hard.v = start;
  492. f.set.click(p, c.hard.v, o.lastClass);
  493. } else {
  494. c.hard.v = s.first();
  495. f.set.click(p, c.hard.v, o.lastClass);
  496. f.t.singleClick(s,{current:{v:s.first()}},o);
  497. }
  498. }
  499. }
  500. var x = s.index(c.hard.v);
  501. var y = s.index(c.shift.v);
  502. var z = s.index(c.current.v);
  503. if(c.hard.v.length == 0){
  504. f.t.singleClick(s,{current:{v:s.first()}},o);
  505. }
  506. if(c.shift.v.length != 0) {
  507. if((x < y && x < z && z < y) || (x > y && x > z && z > y)) {
  508. f.h.off(f.get.between(s, c.shift, c.current), o);
  509. }
  510. if((x < y && x > z && z < y) || (x > y && x < z && z > y)) {
  511. f.h.off(f.get.between(s, c.shift, c.hard), o);
  512. f.h.on(f.get.between(s, c.current, c.hard), o);
  513. }
  514. if((x > y && x > z && z < y) || (x < y && x < z && z > y) || (x == y)) {
  515. f.h.on(f.get.between(s, c.shift, c.current), o);
  516. } else {
  517. f.h.off(c.shift.v, o);
  518. f.t.unHExist(z>y, c.shift.v,o);
  519. }
  520. } else {
  521. f.t.unHExist(z>x,c.hard.v,o);
  522. f.h.on(f.get.between(s, c.current, c.hard), o);
  523. }
  524. f.h.on(c.current.v, o);
  525. f.set.clicks(c.hard.v, c.current.v, null, p, o);
  526. },
  527. unHAll: function(p,o) {
  528. f.h.off(p.find(o.children), o);
  529. f.t.update(p, o);
  530. $('.toggle-all').removeClass('clicked-on');
  531. },
  532. hAll: function(p,o) {
  533. f.h.on(p.find(o.children), o);
  534. f.t.update(p, o);
  535. o.toggleAllHook && o.toggleAllHook();
  536. $('.toggle-all').addClass('clicked-on');
  537. },
  538. unHExist: function(bool,el,o) {
  539. if(bool) {
  540. f.h.off(f.get.elem(false, el, false, o.unSelectClass), o);
  541. } else {
  542. f.h.off(f.get.elem(true, el, false, o.unSelectClass), o);
  543. }
  544. }
  545. };
  546. })(window.jQuery || window.Zepto);