thetempusproject/app/js/main.js

/**
 * app/js/main.js
 *
 * This file is for 'access anywhere' javascript.
 *
 * @version 3.0
 * @author  Joey Kimsey <Joey@thetempusproject.com>
 * @link    https://TheTempusProject.com
 * @license https://opensource.org/licenses/MIT [MIT LICENSE]
 */
/**
 * Automatically selects/de-selects all check boxes associated with that field
 **/
function checkAll(ele) {
    var checkboxes = document.getElementsByTagName( 'input' );
    if (ele.checked) {
        test = true;
    } else {
        test = false;
    }
    for ( var i = 0; i < checkboxes.length; i++ ) {
        if ( checkboxes[i].type == 'checkbox' ) {
            if ( checkboxes[i].name == ele.value ) {
                checkboxes[i].checked = test;
            }
        }
    }
}

function copyAll( ele ) {
    var eleName = '#' + ele;
    var text = $( eleName ).text();
    text = text.replaceAll( "''", "\n" ).trim();
    text = text.substring( 1, text.length - 1 );
    navigator.clipboard.writeText( text );
    console.log( '#' + ele );
}

function insertTag( box, tag ) {
    var Field = document.getElementById( box );
    var currentPos = cursorPos( Field );
    var val = Field.value;
    var before = val.substring( 0, currentPos );
    var after = val.substring( currentPos, val.length );
    Field.value = before + '(' + tag + ')' + after;
}

function cursorPos( el ) {
    if ( el.selectionStart ) {
        return el.selectionStart;
    } else if ( document.selection ) {
        el.focus();
        var r = document.selection.createRange();
        if ( r == null ) {
            return 0;
        }
        var re = el.createTextRange(),
            rc = re.duplicate();
        re.moveToBookmark( r.getBookmark() );
        rc.setEndPoint( 'EndToStart', re );
        return rc.text.length;
    }
    return 0;
}

function getRandomInt(min, max) {
    const minCeiled = Math.ceil(min);
    const maxFloored = Math.floor(max);
    return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled);
}

$(document).ready(function() {
    $('select').each(function() {
        var selectedValue = $(this).attr('value');
        if (selectedValue) {
            $(this).removeAttr('value');
            $(this).find('option').each(function() {
                if ($(this).attr('value') === selectedValue) {
                    $(this).prop('selected', true);
                }
            });
        }
    });
});

// with the dynamic footer, you need to adjust the content padding to make sure the footer doesn't overlap the content
  document.addEventListener('DOMContentLoaded', function () {
    const toggleButton = document.getElementById('dark-mode-toggle');
    const enableButton = document.getElementById('dark-mode-toggle-button');
    const darkModeStylesheet = document.getElementById('dark-mode-stylesheet');

    // Check if dark mode is saved in localStorage
    if (localStorage.getItem('darkMode') === 'enabled') {
      darkModeStylesheet.disabled = false;
      toggleButton.checked = true;
      
        if ( enableButton ) {
            enableButton.innerText = 'Disable Now';
        }
    }
    
    if ( enableButton ) {
        enableButton.addEventListener('click', function () {
          if (darkModeStylesheet.disabled) {
            darkModeStylesheet.disabled = false;
            localStorage.setItem('darkMode', 'enabled');
            enableButton.innerText = 'Disable Now';
          } else {
            darkModeStylesheet.disabled = true;
            localStorage.setItem('darkMode', 'disabled');
            enableButton.innerText = 'Enable Now';
          }
        });
    }

    toggleButton.addEventListener('click', function () {
      if (darkModeStylesheet.disabled) {
        darkModeStylesheet.disabled = false;
        localStorage.setItem('darkMode', 'enabled');
      } else {
        darkModeStylesheet.disabled = true;
        localStorage.setItem('darkMode', 'disabled');
      }
    });
  });

  document.addEventListener('DOMContentLoaded', () => {
    // Initialize Masonry
    const masonryContainer = document.querySelector('[data-masonry]');
    const masonryInstance = new Masonry(masonryContainer, {
        // horizontalOrder: false,  // Maintains natural order in DOM
        columnHeight: '.accordion',
        // columnWidth: '.card', // Use the card width as the column reference
        percentPosition: true
    });
    
    
    // const sortContainer = document.getElementById('bookmarkSort');
    // Sortable.create(masonryContainer, {
    //     // animation: 150, // Smooth animations
    //     sort: true,
    // ghostClass: 'bg-primary',
    //     onEnd: () => {
    //         // Trigger Masonry layout after drag-and-drop
    //         masonryInstance.layout();
    //     }
    // });

    // Function to trigger layout after any accordion change
    const updateMasonryLayout = () => masonryInstance.layout();

    // Listen for all accordion collapse/expand events
    masonryContainer.addEventListener('hidden.bs.collapse', updateMasonryLayout);
    masonryContainer.addEventListener('shown.bs.collapse', updateMasonryLayout);

    // Observe dynamic content changes (e.g., rows added/removed)
    const observer = new MutationObserver(() => {
        updateMasonryLayout();
    });

    // Observe all cards for changes in the DOM
    document.querySelectorAll('.card').forEach((card) => {
        observer.observe(card, { childList: true, subtree: true });
    });

    jQuery(function($) {
        var panelList = $('#bookmarkSort');
    
        panelList.sortable({
            // Only make the .panel-heading child elements support dragging.
            // Omit this to make then entire <li>...</li> draggable.
            handle: '.card', 
            update: function() {
                console.error( 'update' );
                $('.bookmark-card', panelList).each(function(index, elem) {
                     var $listItem = $(elem),
                     
                         newIndex = $listItem.index();
                         masonryInstance.layout();
                         console.error( $listItem );
                         console.error( index );
                         console.error( newIndex );
    
                     // Persist the new indices.
                });
            }
        });
    });
});