jquery-asBreadcrumbs.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
  1. /**
  2. * jQuery asBreadcrumbs v0.2.3
  3. * https://github.com/amazingSurge/jquery-asBreadcrumbs
  4. *
  5. * Copyright (c) amazingSurge
  6. * Released under the LGPL-3.0 license
  7. */
  8. (function(global, factory) {
  9. if (typeof define === 'function' && define.amd) {
  10. define(['jquery'], factory);
  11. } else if (typeof exports !== 'undefined') {
  12. factory(require('jquery'));
  13. } else {
  14. var mod = {
  15. exports: {}
  16. };
  17. factory(global.jQuery);
  18. global.jqueryAsBreadcrumbsEs = mod.exports;
  19. }
  20. })(this, function(_jquery) {
  21. 'use strict';
  22. var _jquery2 = _interopRequireDefault(_jquery);
  23. function _interopRequireDefault(obj) {
  24. return obj && obj.__esModule
  25. ? obj
  26. : {
  27. default: obj
  28. };
  29. }
  30. function _classCallCheck(instance, Constructor) {
  31. if (!(instance instanceof Constructor)) {
  32. throw new TypeError('Cannot call a class as a function');
  33. }
  34. }
  35. var _createClass = (function() {
  36. function defineProperties(target, props) {
  37. for (var i = 0; i < props.length; i++) {
  38. var descriptor = props[i];
  39. descriptor.enumerable = descriptor.enumerable || false;
  40. descriptor.configurable = true;
  41. if ('value' in descriptor) descriptor.writable = true;
  42. Object.defineProperty(target, descriptor.key, descriptor);
  43. }
  44. }
  45. return function(Constructor, protoProps, staticProps) {
  46. if (protoProps) defineProperties(Constructor.prototype, protoProps);
  47. if (staticProps) defineProperties(Constructor, staticProps);
  48. return Constructor;
  49. };
  50. })();
  51. var DEFAULTS = {
  52. namespace: 'breadcrumb',
  53. overflow: 'left',
  54. responsive: true,
  55. ellipsisText: '&#8230;',
  56. ellipsisClass: null,
  57. hiddenClass: 'is-hidden',
  58. dropdownClass: null,
  59. dropdownMenuClass: null,
  60. dropdownItemClass: null,
  61. dropdownItemDisableClass: 'disabled',
  62. toggleClass: null,
  63. toggleIconClass: 'caret',
  64. getItems: function getItems($parent) {
  65. return $parent.children();
  66. },
  67. getItemLink: function getItemLink($item) {
  68. return $item.find('a');
  69. },
  70. // templates
  71. ellipsis: function ellipsis(classes, label) {
  72. return '<li class="' + classes.ellipsisClass + '">' + label + '</li>';
  73. },
  74. dropdown: function dropdown(classes) {
  75. var dropdownClass = 'dropdown';
  76. var dropdownMenuClass = 'dropdown-menu';
  77. if (this.options.overflow === 'right') {
  78. dropdownMenuClass += ' dropdown-menu-right';
  79. }
  80. return (
  81. '<li class="' +
  82. dropdownClass +
  83. ' ' +
  84. classes.dropdownClass +
  85. '">\n <a href="javascript:void(0);" class="' +
  86. classes.toggleClass +
  87. '" data-toggle="dropdown">\n <i class="' +
  88. classes.toggleIconClass +
  89. '"></i>\n </a>\n <ul class="' +
  90. dropdownMenuClass +
  91. ' ' +
  92. classes.dropdownMenuClass +
  93. '"></ul>\n </li>'
  94. );
  95. },
  96. dropdownItem: function dropdownItem(classes, label, href) {
  97. if (!href) {
  98. return (
  99. '<li class="' +
  100. classes.dropdownItemClass +
  101. ' ' +
  102. classes.dropdownItemDisableClass +
  103. '"><a href="#">' +
  104. label +
  105. '</a></li>'
  106. );
  107. }
  108. return (
  109. '<li class="' +
  110. classes.dropdownItemClass +
  111. '"><a href="' +
  112. href +
  113. '">' +
  114. label +
  115. '</a></li>'
  116. );
  117. },
  118. // callbacks
  119. onInit: null,
  120. onReady: null
  121. };
  122. var NAMESPACE = 'asBreadcrumbs';
  123. var instanceId = 0;
  124. /**
  125. * Plugin constructor
  126. **/
  127. var asBreadcrumbs = (function() {
  128. function asBreadcrumbs(element, options) {
  129. _classCallCheck(this, asBreadcrumbs);
  130. this.element = element;
  131. this.$element = (0, _jquery2.default)(element);
  132. this.options = _jquery2.default.extend(
  133. {},
  134. DEFAULTS,
  135. options,
  136. this.$element.data()
  137. );
  138. this.namespace = this.options.namespace;
  139. this.$element.addClass(this.namespace);
  140. this.classes = {
  141. toggleClass: this.options.toggleClass
  142. ? this.options.toggleClass
  143. : this.namespace + '-toggle',
  144. toggleIconClass: this.options.toggleIconClass,
  145. dropdownClass: this.options.dropdownClass
  146. ? this.options.dropdownClass
  147. : this.namespace + '-dropdown',
  148. dropdownMenuClass: this.options.dropdownMenuClass
  149. ? this.options.dropdownMenuClass
  150. : this.namespace + '-dropdown-menu',
  151. dropdownItemClass: this.options.dropdownItemClass
  152. ? this.options.dropdownItemClass
  153. : '',
  154. dropdownItemDisableClass: this.options.dropdownItemDisableClass
  155. ? this.options.dropdownItemDisableClass
  156. : '',
  157. ellipsisClass: this.options.ellipsisClass
  158. ? this.options.ellipsisClass
  159. : this.namespace + '-ellipsis',
  160. hiddenClass: this.options.hiddenClass
  161. };
  162. // flag
  163. this.initialized = false;
  164. this.instanceId = ++instanceId;
  165. this.$children = this.options.getItems(this.$element);
  166. this.$firstChild = this.$children.eq(0);
  167. this.$dropdown = null;
  168. this.$dropdownMenu = null;
  169. this.gap = 6;
  170. this.items = [];
  171. this._trigger('init');
  172. this.init();
  173. }
  174. _createClass(
  175. asBreadcrumbs,
  176. [
  177. {
  178. key: 'init',
  179. value: function init() {
  180. var _this = this;
  181. this.$element.addClass(
  182. this.namespace + '-' + this.options.overflow
  183. );
  184. this._prepareItems();
  185. this._createDropdown();
  186. this._createEllipsis();
  187. this.render();
  188. if (this.options.responsive) {
  189. (0, _jquery2.default)(window).on(
  190. this.eventNameWithId('resize'),
  191. this._throttle(function() {
  192. _this.resize();
  193. }, 250)
  194. );
  195. }
  196. this.initialized = true;
  197. this._trigger('ready');
  198. }
  199. },
  200. {
  201. key: '_prepareItems',
  202. value: function _prepareItems() {
  203. var that = this;
  204. this.$children.each(function() {
  205. var $this = (0, _jquery2.default)(this);
  206. var $link = that.options.getItemLink($this);
  207. var $dropdownItem = (0, _jquery2.default)(
  208. that.options.dropdownItem.call(
  209. that,
  210. that.classes,
  211. $this.text(),
  212. $link.attr('href')
  213. )
  214. );
  215. that.items.push({
  216. $this: $this,
  217. outerWidth: $this.outerWidth(),
  218. $item: $dropdownItem
  219. });
  220. });
  221. if (this.options.overflow === 'left') {
  222. this.items.reverse();
  223. }
  224. }
  225. },
  226. {
  227. key: '_createDropdown',
  228. value: function _createDropdown() {
  229. this.$dropdown = (0, _jquery2.default)(
  230. this.options.dropdown.call(this, this.classes)
  231. )
  232. .addClass(this.classes.hiddenClass)
  233. .appendTo(this.$element);
  234. this.$dropdownMenu = this.$dropdown.find(
  235. '.' + this.classes.dropdownMenuClass
  236. );
  237. this._createDropdownItems();
  238. if (this.options.overflow === 'right') {
  239. this.$dropdown.appendTo(this.$element);
  240. } else {
  241. this.$dropdown.prependTo(this.$element);
  242. }
  243. }
  244. },
  245. {
  246. key: '_createDropdownItems',
  247. value: function _createDropdownItems() {
  248. for (var i = 0; i < this.items.length; i++) {
  249. this.items[i].$item
  250. .appendTo(this.$dropdownMenu)
  251. .addClass(this.classes.hiddenClass);
  252. }
  253. }
  254. },
  255. {
  256. key: '_createEllipsis',
  257. value: function _createEllipsis() {
  258. if (!this.options.ellipsisText) {
  259. return;
  260. }
  261. this.$ellipsis = (0, _jquery2.default)(
  262. this.options.ellipsis.call(
  263. this,
  264. this.classes,
  265. this.options.ellipsisText
  266. )
  267. ).addClass(this.classes.hiddenClass);
  268. if (this.options.overflow === 'right') {
  269. this.$ellipsis.insertBefore(this.$dropdown);
  270. } else {
  271. this.$ellipsis.insertAfter(this.$dropdown);
  272. }
  273. }
  274. },
  275. {
  276. key: 'render',
  277. value: function render() {
  278. var dropdownWidth = this.getDropdownWidth();
  279. var childrenWidthTotal = 0;
  280. var containerWidth = this.getConatinerWidth();
  281. var showDropdown = false;
  282. for (var i = 0; i < this.items.length; i++) {
  283. childrenWidthTotal += this.items[i].outerWidth;
  284. if (childrenWidthTotal + dropdownWidth > containerWidth) {
  285. showDropdown = true;
  286. this._showDropdownItem(i);
  287. } else {
  288. this._hideDropdownItem(i);
  289. }
  290. }
  291. if (showDropdown) {
  292. this.$ellipsis.removeClass(this.classes.hiddenClass);
  293. this.$dropdown.removeClass(this.classes.hiddenClass);
  294. } else {
  295. this.$ellipsis.addClass(this.classes.hiddenClass);
  296. this.$dropdown.addClass(this.classes.hiddenClass);
  297. }
  298. this._trigger('update');
  299. }
  300. },
  301. {
  302. key: 'resize',
  303. value: function resize() {
  304. this.render();
  305. }
  306. },
  307. {
  308. key: 'getDropdownWidth',
  309. value: function getDropdownWidth() {
  310. return (
  311. this.$dropdown.outerWidth() +
  312. (this.options.ellipsisText ? this.$ellipsis.outerWidth() : 0)
  313. );
  314. }
  315. },
  316. {
  317. key: 'getConatinerWidth',
  318. value: function getConatinerWidth() {
  319. var width = 0;
  320. var that = this;
  321. this.$element.children().each(function() {
  322. if (
  323. (0, _jquery2.default)(this).css('display') === 'inline-block' &&
  324. (0, _jquery2.default)(this).css('float') === 'none'
  325. ) {
  326. width += that.gap;
  327. }
  328. });
  329. return this.$element.width() - width;
  330. }
  331. },
  332. {
  333. key: '_showDropdownItem',
  334. value: function _showDropdownItem(i) {
  335. this.items[i].$item.removeClass(this.classes.hiddenClass);
  336. this.items[i].$this.addClass(this.classes.hiddenClass);
  337. }
  338. },
  339. {
  340. key: '_hideDropdownItem',
  341. value: function _hideDropdownItem(i) {
  342. this.items[i].$this.removeClass(this.classes.hiddenClass);
  343. this.items[i].$item.addClass(this.classes.hiddenClass);
  344. }
  345. },
  346. {
  347. key: '_trigger',
  348. value: function _trigger(eventType) {
  349. for (
  350. var _len = arguments.length,
  351. params = Array(_len > 1 ? _len - 1 : 0),
  352. _key = 1;
  353. _key < _len;
  354. _key++
  355. ) {
  356. params[_key - 1] = arguments[_key];
  357. }
  358. var data = [this].concat(params);
  359. // event
  360. this.$element.trigger(NAMESPACE + '::' + eventType, data);
  361. // callback
  362. eventType = eventType.replace(/\b\w+\b/g, function(word) {
  363. return word.substring(0, 1).toUpperCase() + word.substring(1);
  364. });
  365. var onFunction = 'on' + eventType;
  366. if (typeof this.options[onFunction] === 'function') {
  367. this.options[onFunction].apply(this, params);
  368. }
  369. }
  370. },
  371. {
  372. key: 'eventName',
  373. value: function eventName(events) {
  374. if (typeof events !== 'string' || events === '') {
  375. return '.' + this.options.namespace;
  376. }
  377. events = events.split(' ');
  378. var length = events.length;
  379. for (var i = 0; i < length; i++) {
  380. events[i] = events[i] + '.' + this.options.namespace;
  381. }
  382. return events.join(' ');
  383. }
  384. },
  385. {
  386. key: 'eventNameWithId',
  387. value: function eventNameWithId(events) {
  388. if (typeof events !== 'string' || events === '') {
  389. return '.' + this.options.namespace + '-' + this.instanceId;
  390. }
  391. events = events.split(' ');
  392. var length = events.length;
  393. for (var i = 0; i < length; i++) {
  394. events[i] =
  395. events[i] +
  396. '.' +
  397. this.options.namespace +
  398. '-' +
  399. this.instanceId;
  400. }
  401. return events.join(' ');
  402. }
  403. },
  404. {
  405. key: '_throttle',
  406. value: function _throttle(func, wait) {
  407. var _this2 = this;
  408. var _now =
  409. Date.now ||
  410. function() {
  411. return new Date().getTime();
  412. };
  413. var timeout = void 0;
  414. var context = void 0;
  415. var args = void 0;
  416. var result = void 0;
  417. var previous = 0;
  418. var later = function later() {
  419. previous = _now();
  420. timeout = null;
  421. result = func.apply(context, args);
  422. if (!timeout) {
  423. context = args = null;
  424. }
  425. };
  426. return function() {
  427. for (
  428. var _len2 = arguments.length, params = Array(_len2), _key2 = 0;
  429. _key2 < _len2;
  430. _key2++
  431. ) {
  432. params[_key2] = arguments[_key2];
  433. }
  434. /*eslint consistent-this: "off"*/
  435. var now = _now();
  436. var remaining = wait - (now - previous);
  437. context = _this2;
  438. args = params;
  439. if (remaining <= 0 || remaining > wait) {
  440. if (timeout) {
  441. clearTimeout(timeout);
  442. timeout = null;
  443. }
  444. previous = now;
  445. result = func.apply(context, args);
  446. if (!timeout) {
  447. context = args = null;
  448. }
  449. } else if (!timeout) {
  450. timeout = setTimeout(later, remaining);
  451. }
  452. return result;
  453. };
  454. }
  455. },
  456. {
  457. key: 'destroy',
  458. value: function destroy() {
  459. this.$element.children().removeClass(this.classes.hiddenClass);
  460. this.$dropdown.remove();
  461. if (this.options.ellipsisText) {
  462. this.$ellipsis.remove();
  463. }
  464. this.initialized = false;
  465. this.$element.data(NAMESPACE, null);
  466. (0, _jquery2.default)(window).off(this.eventNameWithId('resize'));
  467. this._trigger('destroy');
  468. }
  469. }
  470. ],
  471. [
  472. {
  473. key: 'setDefaults',
  474. value: function setDefaults(options) {
  475. _jquery2.default.extend(
  476. DEFAULTS,
  477. _jquery2.default.isPlainObject(options) && options
  478. );
  479. }
  480. }
  481. ]
  482. );
  483. return asBreadcrumbs;
  484. })();
  485. var info = {
  486. version: '0.2.3'
  487. };
  488. var NAME = 'asBreadcrumbs';
  489. var OtherAsBreadcrumbs = _jquery2.default.fn.asBreadcrumbs;
  490. var jQueryAsBreadcrumbs = function jQueryAsBreadcrumbs(options) {
  491. for (
  492. var _len3 = arguments.length,
  493. args = Array(_len3 > 1 ? _len3 - 1 : 0),
  494. _key3 = 1;
  495. _key3 < _len3;
  496. _key3++
  497. ) {
  498. args[_key3 - 1] = arguments[_key3];
  499. }
  500. if (typeof options === 'string') {
  501. var method = options;
  502. if (/^_/.test(method)) {
  503. return false;
  504. } else if (/^(get)/.test(method)) {
  505. var instance = this.first().data(NAME);
  506. if (instance && typeof instance[method] === 'function') {
  507. return instance[method].apply(instance, args);
  508. }
  509. } else {
  510. return this.each(function() {
  511. var instance = _jquery2.default.data(this, NAME);
  512. if (instance && typeof instance[method] === 'function') {
  513. instance[method].apply(instance, args);
  514. }
  515. });
  516. }
  517. }
  518. return this.each(function() {
  519. if (!(0, _jquery2.default)(this).data(NAME)) {
  520. (0, _jquery2.default)(this).data(
  521. NAME,
  522. new asBreadcrumbs(this, options)
  523. );
  524. }
  525. });
  526. };
  527. _jquery2.default.fn.asBreadcrumbs = jQueryAsBreadcrumbs;
  528. _jquery2.default.asBreadcrumbs = _jquery2.default.extend(
  529. {
  530. setDefaults: asBreadcrumbs.setDefaults,
  531. noConflict: function noConflict() {
  532. _jquery2.default.fn.asBreadcrumbs = OtherAsBreadcrumbs;
  533. return jQueryAsBreadcrumbs;
  534. }
  535. },
  536. info
  537. );
  538. });