help@rskworld.in +91 93305 39277
RSK World
  • Home
  • Development
    • Web Development
    • Mobile Apps
    • Software
    • Games
    • Project
  • Technologies
    • Data Science
    • AI Development
    • Cloud Development
    • Blockchain
    • Cyber Security
    • Dev Tools
    • Testing Tools
  • About
  • Contact

Theme Settings

Color Scheme
Display Options
Font Size
100%
Back to Project
RSK World
ruby-todo-list
/
app
/
assets
/
javascripts
RSK World
ruby-todo-list
Ruby Todo List - Task Management with User Authentication + Categories + Search + File Attachments + Email Notifications + Rails MVC + Modern Web Interface + API Integration + Educational Design
javascripts
  • application.js8.1 KB
application.js
app/assets/javascripts/application.js
Raw Download
Find: Go to:
// Ruby To-Do List Application - Application JavaScript
// Created by: Molla Samser (help@rskworld.in, +91 93305 39277)
// Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India, 713147
// Year: 2026

//= require jquery
//= require bootstrap
//= require rails-ujs
//= require turbolinks
//= require_tree .

$(document).on('turbolinks:load', function() {
  // Initialize all components
  initializeTooltips();
  initializeAlerts();
  initializeFormValidation();
  initializeTaskInteractions();
  initializeSearch();
  initializeCategoryInteractions();
  initializeLoadingStates();
  initializeAnimations();
});

// Initialize Bootstrap tooltips
function initializeTooltips() {
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });
}

// Auto-hide alerts with animation
function initializeAlerts() {
  $('.alert').each(function() {
    var $alert = $(this);
    setTimeout(function() {
      $alert.fadeOut('slow', function() {
        $alert.remove();
      });
    }, 5000);
  });

  // Dismissible alerts
  $('.alert .btn-close').on('click', function() {
    $(this).closest('.alert').fadeOut('fast');
  });
}

// Enhanced form validation with visual feedback
function initializeFormValidation() {
  $('.needs-validation').on('submit', function(event) {
    var $form = $(this);
    var isValid = this.checkValidity();

    if (!isValid) {
      event.preventDefault();
      event.stopPropagation();

      // Highlight invalid fields
      $form.find(':invalid').first().focus();
      $form.find(':invalid').addClass('is-invalid');
    }

    $form.addClass('was-validated');

    // Remove invalid class on input
    $form.find('input, select, textarea').on('input change', function() {
      if (this.checkValidity()) {
        $(this).removeClass('is-invalid').addClass('is-valid');
      } else {
        $(this).removeClass('is-valid').addClass('is-invalid');
      }
    });
  });
}

// Task interactions with animations
function initializeTaskInteractions() {
  // Task completion with smooth animations
  $('.task-complete-btn, .task-toggle-btn').on('ajax:success', function() {
    var $taskItem = $(this).closest('.task-item, .list-group-item');
    var $icon = $(this).find('i');

    // Animate icon change
    $icon.fadeOut(150, function() {
      if ($(this).hasClass('fa-check')) {
        $(this).removeClass('fa-check').addClass('fa-undo');
      } else {
        $(this).removeClass('fa-undo').addClass('fa-check');
      }
      $(this).fadeIn(150);
    });

    // Update task appearance
    $taskItem.toggleClass('completed', !$taskItem.hasClass('completed'));
  });

  // Task item hover effects
  $('.task-item').hover(
    function() {
      $(this).addClass('shadow-sm');
    },
    function() {
      $(this).removeClass('shadow-sm');
    }
  );

  // Priority badge updates
  $('.priority-select').on('change', function() {
    var priority = $(this).val();
    var $badge = $(this).closest('.card-body').find('.priority-badge');

    if ($badge.length) {
      $badge.removeClass('bg-success bg-warning bg-danger');

      switch(priority) {
        case '1':
          $badge.addClass('bg-success').text('Low');
          break;
        case '2':
          $badge.addClass('bg-warning text-dark').text('Medium');
          break;
        case '3':
          $badge.addClass('bg-danger').text('High');
          break;
      }

      // Animate badge update
      $badge.fadeOut(100).fadeIn(200);
    }
  });
}

// Enhanced search with debouncing
function initializeSearch() {
  var searchTimeout;

  $('#task-search').on('input', function() {
    var $searchInput = $(this);
    var query = $searchInput.val();

    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(function() {
      if (query.length > 0) {
        $searchInput.closest('.input-group').find('.btn-outline-primary').html('<i class="fas fa-spinner fa-spin"></i>');
      }

      // Submit search form
      $searchInput.closest('form').submit();
    }, 300);
  });

  // Clear search
  $('.clear-search-btn').on('click', function() {
    $('#task-search').val('');
    $(this).closest('form').submit();
  });
}

// Category interactions
function initializeCategoryInteractions() {
  $('.category-card').hover(
    function() {
      $(this).find('.category-color-indicator').addClass('shadow');
    },
    function() {
      $(this).find('.category-color-indicator').removeClass('shadow');
    }
  );

  // Color picker preview
  $('#category_color').on('input', function() {
    var color = $(this).val();
    $('.color-preview').css('background-color', color);
  });
}

// Loading states for better UX
function initializeLoadingStates() {
  // Show loading on form submit
  $('form').on('submit', function() {
    var $form = $(this);
    var $submitBtn = $form.find('input[type="submit"], button[type="submit"]');

    if ($submitBtn.length && !$form.hasClass('no-loading')) {
      $submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Processing...');

      // Re-enable after 10 seconds (fallback)
      setTimeout(function() {
        $submitBtn.prop('disabled', false).html($submitBtn.data('original-text') || 'Submit');
      }, 10000);
    }
  });

  // Store original button text
  $('input[type="submit"], button[type="submit"]').each(function() {
    $(this).data('original-text', $(this).html());
  });

  // Loading overlay for AJAX requests
  $(document).on('ajax:before', function() {
    $('.loading-overlay').show();
  });

  $(document).on('ajax:complete', function() {
    $('.loading-overlay').hide();
  });
}

// Smooth animations and transitions
function initializeAnimations() {
  // Fade in cards on page load
  $('.card').each(function(index) {
    var $card = $(this);
    setTimeout(function() {
      $card.addClass('fade-in-up');
    }, index * 100);
  });

  // Smooth scroll for anchor links
  $('a[href^="#"]').on('click', function(event) {
    var target = $(this.getAttribute('href'));
    if (target.length) {
      event.preventDefault();
      $('html, body').stop().animate({
        scrollTop: target.offset().top - 70
      }, 500);
    }
  });

  // Progress bar animations
  $('.progress-bar').each(function() {
    var $bar = $(this);
    var width = $bar.data('width') || $bar.css('width');
    $bar.css('width', '0%').animate({
      width: width
    }, 1000);
  });
}

// Utility functions
function showNotification(message, type = 'info') {
  var alertClass = 'alert-' + type;
  var $alert = $('<div class="alert ' + alertClass + ' alert-dismissible fade show" role="alert">' +
    message +
    '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>' +
    '</div>');

  $('.main-container').prepend($alert);

  setTimeout(function() {
    $alert.fadeOut('slow', function() {
      $alert.remove();
    });
  }, 5000);
}

function confirmAction(message, callback) {
  if (window.confirm(message)) {
    callback();
  }
}

// Export functions for global use
window.showNotification = showNotification;
window.confirmAction = confirmAction;

// Keyboard shortcuts
$(document).on('keydown', function(e) {
  // Ctrl/Cmd + Enter to submit forms
  if ((e.ctrlKey || e.metaKey) && e.keyCode === 13) {
    $('form:visible').first().submit();
  }

  // Escape to close modals
  if (e.keyCode === 27) {
    $('.modal').modal('hide');
  }
});

// Handle offline/online status
$(window).on('online offline', function(e) {
  var status = e.type === 'online' ? 'success' : 'warning';
  var message = e.type === 'online' ? 'Connection restored' : 'You are offline';

  showNotification(message, status);
});

// Performance optimizations
$(document).on('turbolinks:before-cache', function() {
  // Clean up before page change
  $('.tooltip').remove();
  $('.modal').modal('hide');
  $('.alert').remove();
});
295 lines•8.1 KB
javascript

About RSK World

Founded by Molla Samser, with Designer & Tester Rima Khatun, RSK World is your one-stop destination for free programming resources, source code, and development tools.

Founder: Molla Samser
Designer & Tester: Rima Khatun

Development

  • Game Development
  • Web Development
  • Mobile Development
  • AI Development
  • Development Tools

Legal

  • Terms & Conditions
  • Privacy Policy
  • Disclaimer

Contact Info

Nutanhat, Mongolkote
Purba Burdwan, West Bengal
India, 713147

+91 93305 39277

hello@rskworld.in
support@rskworld.in

© 2026 RSK World. All rights reserved.

Content used for educational purposes only. View Disclaimer