123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393 |
- /**
- * jQuery asBreadcrumbs v0.2.3
- * https://github.com/amazingSurge/jquery-asBreadcrumbs
- *
- * Copyright (c) amazingSurge
- * Released under the LGPL-3.0 license
- */
- import $ from 'jquery';
- var DEFAULTS = {
- namespace: 'breadcrumb',
- overflow: "left",
- responsive: true,
- ellipsisText: "…",
- ellipsisClass: null,
- hiddenClass: 'is-hidden',
- dropdownClass: null,
- dropdownMenuClass: null,
- dropdownItemClass: null,
- dropdownItemDisableClass: 'disabled',
- toggleClass: null,
- toggleIconClass: 'caret',
- getItems: function($parent) {
- return $parent.children();
- },
- getItemLink: function($item) {
- return $item.find('a');
- },
- // templates
- ellipsis: function(classes, label) {
- return `<li class="${classes.ellipsisClass}">${label}</li>`;
- },
- dropdown: function(classes) {
- const dropdownClass = 'dropdown';
- let dropdownMenuClass = 'dropdown-menu';
- if (this.options.overflow === 'right') {
- dropdownMenuClass += ' dropdown-menu-right';
- }
- return `<li class="${dropdownClass} ${classes.dropdownClass}">
- <a href="javascript:void(0);" class="${classes.toggleClass}" data-toggle="dropdown">
- <i class="${classes.toggleIconClass}"></i>
- </a>
- <ul class="${dropdownMenuClass} ${classes.dropdownMenuClass}"></ul>
- </li>`;
- },
- dropdownItem: function(classes, label, href) {
- if(!href) {
- return `<li class="${classes.dropdownItemClass} ${classes.dropdownItemDisableClass}"><a href="#">${label}</a></li>`;
- }
- return `<li class="${classes.dropdownItemClass}"><a href="${href}">${label}</a></li>`;
- },
- // callbacks
- onInit: null,
- onReady: null
- };
- const NAMESPACE = 'asBreadcrumbs';
- let instanceId = 0;
- /**
- * Plugin constructor
- **/
- class asBreadcrumbs {
- constructor(element, options) {
- this.element = element;
- this.$element = $(element);
- this.options = $.extend({}, DEFAULTS, options, this.$element.data());
- this.namespace = this.options.namespace;
- this.$element.addClass(this.namespace);
- this.classes = {
- toggleClass: this.options.toggleClass? this.options.toggleClass: `${this.namespace}-toggle`,
- toggleIconClass: this.options.toggleIconClass,
- dropdownClass: this.options.dropdownClass? this.options.dropdownClass: `${this.namespace}-dropdown`,
- dropdownMenuClass: this.options.dropdownMenuClass? this.options.dropdownMenuClass: `${this.namespace}-dropdown-menu`,
- dropdownItemClass: this.options.dropdownItemClass? this.options.dropdownItemClass: '',
- dropdownItemDisableClass: this.options.dropdownItemDisableClass? this.options.dropdownItemDisableClass: '',
- ellipsisClass: this.options.ellipsisClass? this.options.ellipsisClass: `${this.namespace}-ellipsis`,
- hiddenClass: this.options.hiddenClass
- };
- // flag
- this.initialized = false;
- this.instanceId = (++instanceId);
- this.$children = this.options.getItems(this.$element);
- this.$firstChild = this.$children.eq(0);
- this.$dropdown = null;
- this.$dropdownMenu = null;
- this.gap = 6;
- this.items = [];
- this._trigger('init');
- this.init();
- }
- init() {
- this.$element.addClass(`${this.namespace}-${this.options.overflow}`);
- this._prepareItems();
- this._createDropdown();
- this._createEllipsis();
- this.render();
- if (this.options.responsive) {
- $(window).on(this.eventNameWithId('resize'), this._throttle(() => {
- this.resize();
- }, 250));
- }
- this.initialized = true;
- this._trigger('ready');
- }
- _prepareItems() {
- const that = this;
- this.$children.each(function(){
- const $this = $(this);
- const $link = that.options.getItemLink($this);
- const $dropdownItem = $(that.options.dropdownItem.call(that, that.classes, $this.text(), $link.attr('href')));
- that.items.push({
- $this,
- outerWidth: $this.outerWidth(),
- $item: $dropdownItem
- });
- });
- if (this.options.overflow === "left") {
- this.items.reverse();
- }
- }
- _createDropdown() {
- this.$dropdown = $(this.options.dropdown.call(this, this.classes)).addClass(this.classes.hiddenClass).appendTo(this.$element);
- this.$dropdownMenu = this.$dropdown.find(`.${this.classes.dropdownMenuClass}`);
- this._createDropdownItems();
- if (this.options.overflow === 'right') {
- this.$dropdown.appendTo(this.$element);
- } else {
- this.$dropdown.prependTo(this.$element);
- }
- }
- _createDropdownItems() {
- for (let i = 0; i < this.items.length; i++) {
- this.items[i].$item.appendTo(this.$dropdownMenu).addClass(this.classes.hiddenClass);
- }
- }
- _createEllipsis() {
- if (!this.options.ellipsisText) {
- return;
- }
- this.$ellipsis = $(this.options.ellipsis.call(this, this.classes, this.options.ellipsisText)).addClass(this.classes.hiddenClass);
- if (this.options.overflow === 'right') {
- this.$ellipsis.insertBefore(this.$dropdown);
- } else {
- this.$ellipsis.insertAfter(this.$dropdown);
- }
- }
- render() {
- const dropdownWidth = this.getDropdownWidth();
- let childrenWidthTotal = 0;
- let containerWidth = this.getConatinerWidth();
- let showDropdown = false;
- for (let i = 0; i < this.items.length; i++) {
- childrenWidthTotal += this.items[i].outerWidth;
- if (childrenWidthTotal + dropdownWidth > containerWidth) {
- showDropdown = true;
- this._showDropdownItem(i);
- } else {
- this._hideDropdownItem(i);
- }
- }
- if(showDropdown) {
- this.$ellipsis.removeClass(this.classes.hiddenClass);
- this.$dropdown.removeClass(this.classes.hiddenClass);
- } else {
- this.$ellipsis.addClass(this.classes.hiddenClass);
- this.$dropdown.addClass(this.classes.hiddenClass);
- }
- this._trigger('update');
- }
- resize() {
- this.render();
- }
- getDropdownWidth() {
- return this.$dropdown.outerWidth() + (this.options.ellipsisText? this.$ellipsis.outerWidth() : 0);
- }
- getConatinerWidth() {
- let width = 0;
- const that = this;
- this.$element.children().each(function() {
- if ($(this).css('display') === 'inline-block' && $(this).css('float') === 'none') {
- width += that.gap;
- }
- });
- return this.$element.width() - width;
- }
- _showDropdownItem(i) {
- this.items[i].$item.removeClass(this.classes.hiddenClass);
- this.items[i].$this.addClass(this.classes.hiddenClass);
- }
- _hideDropdownItem(i) {
- this.items[i].$this.removeClass(this.classes.hiddenClass);
- this.items[i].$item.addClass(this.classes.hiddenClass);
- }
- _trigger(eventType, ...params) {
- let data = [this].concat(params);
- // event
- this.$element.trigger(`${NAMESPACE}::${eventType}`, data);
- // callback
- eventType = eventType.replace(/\b\w+\b/g, (word) => {
- return word.substring(0, 1).toUpperCase() + word.substring(1);
- });
- let onFunction = `on${eventType}`;
- if (typeof this.options[onFunction] === 'function') {
- this.options[onFunction].apply(this, params);
- }
- }
- eventName(events) {
- if (typeof events !== 'string' || events === '') {
- return `.${this.options.namespace}`;
- }
- events = events.split(' ');
- let length = events.length;
- for (let i = 0; i < length; i++) {
- events[i] = `${events[i]}.${this.options.namespace}`;
- }
- return events.join(' ');
- }
- eventNameWithId(events) {
- if (typeof events !== 'string' || events === '') {
- return `.${this.options.namespace}-${this.instanceId}`;
- }
- events = events.split(' ');
- let length = events.length;
- for (let i = 0; i < length; i++) {
- events[i] = `${events[i]}.${this.options.namespace}-${this.instanceId}`;
- }
- return events.join(' ');
- }
- _throttle(func, wait) {
- const _now = Date.now || function() {
- return new Date().getTime();
- };
- let timeout;
- let context;
- let args;
- let result;
- let previous = 0;
- let later = function() {
- previous = _now();
- timeout = null;
- result = func.apply(context, args);
- if (!timeout) {
- context = args = null;
- }
- };
- return (...params) => {
- /*eslint consistent-this: "off"*/
- let now = _now();
- let remaining = wait - (now - previous);
- context = this;
- args = params;
- if (remaining <= 0 || remaining > wait) {
- if (timeout) {
- clearTimeout(timeout);
- timeout = null;
- }
- previous = now;
- result = func.apply(context, args);
- if (!timeout) {
- context = args = null;
- }
- } else if (!timeout) {
- timeout = setTimeout(later, remaining);
- }
- return result;
- };
- }
- destroy() {
- this.$element.children().removeClass(this.classes.hiddenClass);
- this.$dropdown.remove();
- if (this.options.ellipsisText) {
- this.$ellipsis.remove();
- }
- this.initialized = false;
- this.$element.data(NAMESPACE, null);
- $(window).off(this.eventNameWithId('resize'));
- this._trigger('destroy');
- }
- static setDefaults(options) {
- $.extend(DEFAULTS, $.isPlainObject(options) && options);
- }
- }
- var info = {
- version:'0.2.3'
- };
- const NAME = 'asBreadcrumbs';
- const OtherAsBreadcrumbs = $.fn.asBreadcrumbs;
- const jQueryAsBreadcrumbs = function(options, ...args) {
- if (typeof options === 'string') {
- let method = options;
- if (/^_/.test(method)) {
- return false;
- } else if ((/^(get)/.test(method))) {
- let instance = this.first().data(NAME);
- if (instance && typeof instance[method] === 'function') {
- return instance[method](...args);
- }
- } else {
- return this.each(function() {
- let instance = $.data(this, NAME);
- if (instance && typeof instance[method] === 'function') {
- instance[method](...args);
- }
- });
- }
- }
- return this.each(function() {
- if (!$(this).data(NAME)) {
- $(this).data(NAME, new asBreadcrumbs(this, options));
- }
- });
- };
- $.fn.asBreadcrumbs = jQueryAsBreadcrumbs;
- $.asBreadcrumbs = $.extend({
- setDefaults: asBreadcrumbs.setDefaults,
- noConflict: function() {
- $.fn.asBreadcrumbs = OtherAsBreadcrumbs;
- return jQueryAsBreadcrumbs;
- }
- }, info);
|