JavaScript Plugins

// Load all Bootstrap JavaScript plugins
//= require bootstrap

// Load individual plugins using Sprockets
//= require bootstrap-sprockets

// Load specific plugins individually
//= require bootstrap/modal
//= require bootstrap/dropdown
//= require bootstrap/tooltip
//= require bootstrap/popover
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/button
//= require bootstrap/tab
//= require bootstrap/alert
//= require bootstrap/affix
//= require bootstrap/scrollspy
//= require bootstrap/transition

// Sprockets manifest (Rails asset pipeline)
//= require jquery
//= require bootstrap

// Or load individual plugins
//= require jquery
//= require bootstrap/modal
//= require bootstrap/dropdown

/**
 * Modal plugin constructor
 * @param element - DOM element or jQuery selector for modal
 * @param options - Configuration options
 */
$.fn.modal(options?: ModalOptions | string): JQuery;

interface ModalOptions {
  /** Show backdrop (true/false/'static') */
  backdrop?: boolean | 'static';
  /** Close modal on escape key */
  keyboard?: boolean;
  /** Focus modal when shown */
  focus?: boolean;
  /** Show modal on initialization */
  show?: boolean;
  /** Load remote content URL */
  remote?: string;
}

// Modal methods
$.fn.modal('show'): JQuery;     // Show modal
$.fn.modal('hide'): JQuery;     // Hide modal
$.fn.modal('toggle'): JQuery;   // Toggle modal visibility
$.fn.modal('handleUpdate'): JQuery; // Readjust modal positioning

// Modal constants
Modal.VERSION = '3.4.1';
Modal.TRANSITION_DURATION = 300;
Modal.BACKDROP_TRANSITION_DURATION = 150;
Modal.DEFAULTS = {
  backdrop: true,
  keyboard: true,
  show: true
};

// Initialize modal with options
$('#myModal').modal({
  backdrop: 'static',
  keyboard: false,
  show: true
});

// Manual control
$('#myModal').modal('show');
$('#myModal').modal('hide');

// Event handling
$('#myModal').on('show.bs.modal', function (e) {
  console.log('Modal is about to be shown');
});

$('#myModal').on('hidden.bs.modal', function (e) {
  console.log('Modal has been hidden');
});

/**
 * Dropdown plugin for toggle behavior
 * @param options - 'toggle' to toggle dropdown state
 */
$.fn.dropdown(options?: 'toggle'): JQuery;

// Dropdown methods
$.fn.dropdown('toggle'): JQuery; // Toggle dropdown

// Auto-initialize on elements with data-toggle="dropdown"
$('.dropdown-toggle').dropdown();

// Manual toggle
$('.dropdown-toggle').dropdown('toggle');

// Event handling
$('#myDropdown').on('show.bs.dropdown', function () {
  console.log('Dropdown is about to be shown');
});

$('#myDropdown').on('hide.bs.dropdown', function () {
  console.log('Dropdown is about to be hidden');
});

/**
 * Tooltip plugin for hover/focus/click tooltips
 * @param options - Configuration options or method name
 */
$.fn.tooltip(options?: TooltipOptions | string): JQuery;

interface TooltipOptions {
  /** Animation for show/hide */
  animation?: boolean;
  /** Tooltip placement ('top'|'bottom'|'left'|'right'|'auto') */
  placement?: string | ((tooltip: any, element: any) => string);
  /** Selector to delegate tooltip events */
  selector?: string | false;
  /** Template for tooltip */
  template?: string;
  /** How tooltip is triggered ('click'|'hover'|'focus'|'manual') */
  trigger?: string;
  /** Tooltip title text */
  title?: string | (() => string);
  /** Show/hide delay in ms or object {show: 500, hide: 100} */
  delay?: number | {show: number, hide: number};
  /** Use HTML content */
  html?: boolean;
  /** Container element to append tooltip */
  container?: string | Element | false;
  /** Viewport constraints */
  viewport?: string | Element | {selector: string, padding: number};
  /** Sanitize HTML content (security feature) */
  sanitize?: boolean;
  /** Custom HTML sanitization function */
  sanitizeFn?: (unsafeHtml: string) => string;
  /** HTML whitelist for sanitization */
  whiteList?: {[key: string]: string[]};
}

// Tooltip methods
$.fn.tooltip('show'): JQuery;         // Show tooltip
$.fn.tooltip('hide'): JQuery;         // Hide tooltip
$.fn.tooltip('toggle'): JQuery;       // Toggle tooltip
$.fn.tooltip('enable'): JQuery;       // Enable tooltip
$.fn.tooltip('disable'): JQuery;      // Disable tooltip
$.fn.tooltip('toggleEnabled'): JQuery; // Toggle enabled state
$.fn.tooltip('destroy'): JQuery;      // Remove tooltip

// Initialize tooltips
$('[data-toggle="tooltip"]').tooltip();

// Custom options
$('.my-tooltip').tooltip({
  placement: 'top',
  trigger: 'hover',
  delay: { show: 500, hide: 100 }
});

// Manual control
$('#myTooltip').tooltip('show');
$('#myTooltip').tooltip('hide');

// Security: HTML sanitization (enabled by default)
$('.safe-tooltip').tooltip({
  html: true,
  sanitize: true, // Default: true (recommended for security)
  title: '<strong>Safe HTML</strong>' // Will be sanitized
});

// Custom sanitization
$('.custom-tooltip').tooltip({
  html: true,
  sanitizeFn: function(unsafeHtml) {
    // Custom sanitization logic
    return DOMPurify.sanitize(unsafeHtml);
  }
});

/**
 * Popover plugin extending tooltip functionality
 * @param options - Configuration options or method name
 */
$.fn.popover(options?: PopoverOptions | string): JQuery;

interface PopoverOptions extends TooltipOptions {
  /** Popover content */
  content?: string | (() => string);
  /** Template for popover */
  template?: string;
}

// Popover methods (inherits all tooltip methods)
$.fn.popover('show'): JQuery;     // Show popover
$.fn.popover('hide'): JQuery;     // Hide popover
$.fn.popover('toggle'): JQuery;   // Toggle popover
$.fn.popover('destroy'): JQuery;  // Remove popover

// Initialize popovers
$('[data-toggle="popover"]').popover();

// Custom popover
$('.my-popover').popover({
  title: 'Popover Title',
  content: 'This is popover content',
  placement: 'right',
  trigger: 'click'
});

/**
 * Carousel plugin for image/content sliders
 * @param options - Configuration options or method name
 */
$.fn.carousel(options?: CarouselOptions | string | number): JQuery;

interface CarouselOptions {
  /** Auto-cycling interval in milliseconds (false to disable) */
  interval?: number | false;
  /** Pause on hover */
  pause?: string | null;
  /** Whether carousel should cycle continuously or stop at last slide */
  wrap?: boolean;
  /** Keyboard navigation */
  keyboard?: boolean;
}

// Carousel methods
$.fn.carousel('cycle'): JQuery;    // Start cycling
$.fn.carousel('pause'): JQuery;    // Pause cycling
$.fn.carousel('next'): JQuery;     // Go to next slide
$.fn.carousel('prev'): JQuery;     // Go to previous slide
$.fn.carousel(slideNumber: number): JQuery; // Go to specific slide

// Carousel constants
Carousel.VERSION = '3.4.1';
Carousel.TRANSITION_DURATION = 600;
Carousel.DEFAULTS = {
  interval: 5000,
  pause: 'hover',
  wrap: true,
  keyboard: true
};

// Auto-initialize carousel
$('#myCarousel').carousel({
  interval: 3000,
  pause: 'hover',
  wrap: true
});

// Manual control
$('#myCarousel').carousel('next');
$('#myCarousel').carousel('prev');
$('#myCarousel').carousel(2); // Go to slide 2

/**
 * Collapse plugin for expandable content
 * @param options - Configuration options or method name
 */
$.fn.collapse(options?: CollapseOptions | string): JQuery;

interface CollapseOptions {
  /** Parent selector for accordion behavior */
  parent?: string | Element;
  /** Toggle collapse on initialization */
  toggle?: boolean;
}

// Collapse methods
$.fn.collapse('show'): JQuery;    // Show content
$.fn.collapse('hide'): JQuery;    // Hide content
$.fn.collapse('toggle'): JQuery;  // Toggle visibility

// Initialize collapsible content
$('#myCollapse').collapse({
  toggle: false
});

// Manual control
$('#myCollapse').collapse('show');
$('#myCollapse').collapse('hide');

// Accordion behavior
$('.panel-collapse').collapse({
  parent: '#accordion'
});

/**
 * Button plugin for state management
 * @param options - State name ('loading', 'reset', etc.) or 'toggle'
 */
$.fn.button(options?: string): JQuery;

// Button methods
$.fn.button('toggle'): JQuery;         // Toggle button state
$.fn.button('loading'): JQuery;        // Set loading state
$.fn.button('reset'): JQuery;          // Reset to original state
$.fn.button(state: string): JQuery;    // Set custom state

// Toggle button
$('#myButton').button('toggle');

// Loading state
$('#submitBtn').button('loading');

// Reset button
$('#submitBtn').button('reset');

/**
 * Tab plugin for tabbed navigation
 * @param options - 'show' to activate tab
 */
$.fn.tab(options?: 'show'): JQuery;

// Tab methods
$.fn.tab('show'): JQuery; // Show tab

// Activate tab
$('#myTab a[href="#profile"]').tab('show');

// Event handling
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  console.log('Tab activated:', e.target);
  console.log('Previous tab:', e.relatedTarget);
});

/**
 * Alert plugin for dismissible alerts
 * @param options - 'close' to close alert
 */
$.fn.alert(options?: 'close'): JQuery;

// Alert methods
$.fn.alert('close'): JQuery; // Close alert

// Close alert
$('#myAlert').alert('close');

// Event handling
$('#myAlert').on('close.bs.alert', function () {
  console.log('Alert is about to close');
});

/**
 * Affix plugin for sticky positioning
 * @param options - Configuration options
 */
$.fn.affix(options?: AffixOptions): JQuery;

interface AffixOptions {
  /** Pixels to offset from top when calculating position */
  offset?: number | {top?: number, bottom?: number} | (() => number | {top?: number, bottom?: number});
  /** Target element to spy on for scroll events */
  target?: string | Element;
}

/**
 * ScrollSpy plugin for navigation highlighting
 * @param options - Configuration options or 'refresh'
 */
$.fn.scrollspy(options?: ScrollSpyOptions | 'refresh'): JQuery;

interface ScrollSpyOptions {
  /** Pixels to offset from top when calculating position */
  offset?: number;
  /** Target navigation to update */
  target?: string;
}

// ScrollSpy methods
$.fn.scrollspy('refresh'): JQuery; // Refresh scrollspy

// Transition support detection
$.support.transition: boolean | undefined;

// Transition end event name
$.support.transition.end: string;

// Event naming pattern: [event].bs.[plugin]
// Examples:
'show.bs.modal'     // Before modal shows
'shown.bs.modal'    // After modal shown
'hide.bs.modal'     // Before modal hides
'hidden.bs.modal'   // After modal hidden

'show.bs.dropdown'  // Before dropdown shows
'shown.bs.dropdown' // After dropdown shown
'hide.bs.dropdown'  // Before dropdown hides
'hidden.bs.dropdown' // After dropdown hidden

'show.bs.tooltip'   // Before tooltip shows
'shown.bs.tooltip'  // After tooltip shown
'hide.bs.tooltip'   // Before tooltip hides
'hidden.bs.tooltip' // After tooltip hidden

// Disable data-api auto-initialization
$(document).off('.data-api');

// Disable specific plugin data-api
$(document).off('.modal.data-api');

// Modify default options
$.fn.modal.Constructor.DEFAULTS.backdrop = false;
$.fn.tooltip.Constructor.DEFAULTS.delay = { show: 500, hide: 250 };