tessl/npm-cash-dom

An absurdly small jQuery alternative for modern browsers with jQuery-style syntax for DOM manipulation.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Effects and Visibility

Name: tessl/npm-cash-dom
Author: tessl

Show, hide, and toggle element visibility with display property manipulation. These methods provide immediate visibility changes without animation.

Capabilities

Visibility Control

Control element visibility by manipulating the display CSS property.

/**
 * Hide elements by setting display: none
 * @returns The Cash collection for chaining
 */
hide(): this;

/**
 * Show elements by restoring their display property
 * @returns The Cash collection for chaining
 */
show(): this;

/**
 * Toggle element visibility between hidden and visible states
 * @param force - Optional boolean to force show (true) or hide (false)
 * @returns The Cash collection for chaining
 */
toggle(force?: boolean): this;

Usage Examples:

// Basic visibility control
$('.modal').show();
$('.popup').hide();
$('.menu').toggle();

// Force specific state
$('.element').toggle(true);  // Always show
$('.element').toggle(false); // Always hide

// Conditional visibility
if (user.isLoggedIn) {
  $('.user-menu').show();
  $('.login-form').hide();
} else {
  $('.user-menu').hide();
  $('.login-form').show();
}

// Toggle based on conditions
$('.advanced-settings').toggle(user.isAdmin);
$('.error-message').toggle(hasErrors);

// Chain with other methods
$('.notification')
  .text('Settings saved successfully')
  .addClass('success')
  .show()
  .delay(3000)
  .fadeOut(); // Note: fadeOut not available in Cash, use CSS transitions

// Show/hide with CSS classes for animations
$('.modal')
  .show() // Make visible immediately
  .addClass('fade-in'); // Add class for CSS animation

// Toggle menu visibility
$('.menu-toggle').on('click', function() {
  $('.mobile-menu').toggle();
  $(this).toggleClass('active');
});

// Accordion-style interactions
$('.accordion-header').on('click', function() {
  const content = $(this).next('.accordion-content');
  const isVisible = content.is(':visible');
  
  // Hide all other accordion contents
  $('.accordion-content').hide();
  
  // Show current content if it wasn't visible
  if (!isVisible) {
    content.show();
  }
});

// Conditional display based on form state
$('.form-field').on('change', function() {
  const value = $(this).val();
  $('.conditional-field').toggle(value === 'other');
});

Display Property Behavior

How Cash Handles Display

Cash DOM remembers the original display value when hiding elements and restores it when showing:

// Element originally has display: block
$('.element').hide(); // Sets display: none
$('.element').show(); // Restores display: block

// Element originally has display: inline-block
$('.inline-element').hide(); // Sets display: none
$('.inline-element').show(); // Restores display: inline-block

Combining with CSS Classes

For animations and transitions, combine with CSS classes:

.fade-transition {
  transition: opacity 0.3s ease;
}

.fade-transition.hidden {
  opacity: 0;
}

// Fade out effect
$('.element')
  .addClass('hidden')
  .delay(300) // Wait for transition
  .queue(function() {
    $(this).hide().dequeue();
  });

// Fade in effect
$('.element')
  .show()
  .removeClass('hidden');

Visibility Checking

// Check if element is visible
const isVisible = $('.element').is(':visible');

// Check specific visibility states
const isHidden = $('.element').is(':hidden');
const hasDisplay = $('.element').css('display') !== 'none';

// Conditional actions based on visibility
if ($('.menu').is(':visible')) {
  $('.menu').hide();
} else {
  $('.menu').show();
}

Common Patterns

Modal/Dialog Control

// Modal management
function openModal(modalSelector) {
  $(modalSelector).show();
  $('body').addClass('modal-open'); // Prevent scroll
}

function closeModal(modalSelector) {
  $(modalSelector).hide();
  $('body').removeClass('modal-open');
}

// Usage
$('.open-modal').on('click', () => openModal('.modal'));
$('.close-modal, .modal-overlay').on('click', () => closeModal('.modal'));

Progressive Disclosure

// Show more/less functionality
$('.show-more').on('click', function() {
  const moreContent = $(this).siblings('.more-content');
  const isVisible = moreContent.is(':visible');
  
  moreContent.toggle();
  $(this).text(isVisible ? 'Show more' : 'Show less');
});

Loading States

// Loading state management
function showLoading(container) {
  $(container).find('.content').hide();
  $(container).find('.loading').show();
}

function hideLoading(container) {
  $(container).find('.loading').hide();
  $(container).find('.content').show();
}

// Usage
showLoading('.data-container');
fetchData().then(data => {
  renderData(data);
  hideLoading('.data-container');
});

Responsive Visibility

// Show/hide based on screen size
function handleResponsiveElements() {
  const isMobile = $(window).width() < 768;
  
  $('.desktop-only').toggle(!isMobile);
  $('.mobile-only').toggle(isMobile);
}

$(window).on('resize', handleResponsiveElements);
handleResponsiveElements(); // Initial call

// Show/hide based on scroll position
$(window).on('scroll', function() {
  const scrollTop = $(window).scrollTop();
  $('.back-to-top').toggle(scrollTop > 300);
});

Install with Tessl CLI