Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 4.18.0-553.37.1.lve.el8.x86_64

PHP Version:

8.2.27

User:

u732469475

Directory:

/home/u732469475/domains/matrixtrainings.com/public_html/k/admin/assets/js/gallery

Free Space:

3.33 TB

🔧 Quick Actions

✏️ Editing: shuffle.js

/*!
 * Shuffle.js by @Vestride
 * Categorize, sort, and filter a responsive grid of items.
 * Dependencies: jQuery 1.9+, Modernizr 2.6.2+
 * @license MIT license
 * @version 2.1.1
 */
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery', 'modernizr'], factory);
    } else {
        factory(window.$, window.Modernizr);
    }
})(function($, Modernizr, undefined) {

'use strict';

// Validate Modernizr exists.
// Shuffle requires `csstransitions`, `csstransforms`, `csstransforms3d`,
// and `prefixed` to exist on the Modernizr object.
    if (typeof Modernizr !== 'object') {
        throw new Error('Shuffle.js requires Modernizr.\n' +
            'http://vestride.github.io/Shuffle/#dependencies');
    }

/**
     * Returns css prefixed properties like `-webkit-transition` or `box-sizing`
     * from `transition` or `boxSizing`, respectively.
     * @param {(string|boolean)} prop Property to be prefixed.
     * @return {string} The prefixed css property.
     */
    function dashify( prop ) {
        if (!prop) {
            return '';
        }

// Replace upper case with dash-lowercase,
        // then fix ms- prefixes because they're not capitalized.
        return prop.replace(/([A-Z])/g, function( str, m1 ) {
            return '-' + m1.toLowerCase();
        }).replace(/^ms-/,'-ms-');
    }

// Constant, prefixed variables.
    var TRANSITION = Modernizr.prefixed('transition');
    var TRANSITION_DELAY = Modernizr.prefixed('transitionDelay');
    var TRANSITION_DURATION = Modernizr.prefixed('transitionDuration');
    var TRANSITIONEND = {
        'WebkitTransition' : 'webkitTransitionEnd',
        'transition' : 'transitionend'
    }[ TRANSITION ];
    var TRANSFORM = Modernizr.prefixed('transform');
    var CSS_TRANSFORM = dashify(TRANSFORM);

// Constants
    var CAN_TRANSITION_TRANSFORMS = Modernizr.csstransforms && Modernizr.csstransitions;
    var HAS_TRANSFORMS_3D = Modernizr.csstransforms3d;
    var SHUFFLE = 'shuffle';

// Configurable. You can change these constants to fit your application.
// The default scale and concealed scale, however, have to be different values.
    var ALL_ITEMS = 'all';
    var FILTER_ATTRIBUTE_KEY = 'groups';
    var DEFAULT_SCALE = 1;
    var CONCEALED_SCALE = 0.001;

// Underscore's throttle function.
    function throttle(func, wait, options) {
        var context, args, result;
        var timeout = null;
        var previous = 0;
        options = options || {};
        var later = function() {
            previous = options.leading === false ? 0 : $.now();
            timeout = null;
            result = func.apply(context, args);
            context = args = null;
        };
        return function() {
            var now = $.now();
            if (!previous && options.leading === false) {
                previous = now;
            }
            var remaining = wait - (now - previous);
            context = this;
            args = arguments;
            if (remaining <= 0 || remaining > wait) {
                clearTimeout(timeout);
                timeout = null;
                previous = now;
                result = func.apply(context, args);
                context = args = null;
            } else if (!timeout && options.trailing !== false) {
                timeout = setTimeout(later, remaining);
            }
            return result;
        };
    }

// Used for unique instance variables
    var id = 0;

/**
     * Categorize, sort, and filter a responsive grid of items.
     *
     * @param {Element|jQuery} element An element or a jQuery collection which
     *     is the parent container for the grid items.
     * @param {Object} [options=Shuffle.options] Options object.
     * @constructor
     */
    var Shuffle = function( element, options ) {
        options = options || {};
        $.extend( this, Shuffle.options, options, Shuffle.settings );

this.$el = $(element);
        this.$window = $(window);
        this.unique = 'shuffle_' + id++;

this._fire( Shuffle.EventType.LOADING );
        this._init();

// Dispatch the done event asynchronously so that people can bind to it after
        // Shuffle has been initialized.
        setTimeout( $.proxy(function() {
            this.initialized = true;
            this._fire( Shuffle.EventType.DONE );
        }, this), 16 );
    };

/**
     * Events the container element emits with the .shuffle namespace.
     * For example, "done.shuffle".
     * @enum {string}
     */
    Shuffle.EventType = {
        LOADING: 'loading',
        DONE: 'done',
        SHRINK: 'shrink',
        SHRUNK: 'shrunk',
        FILTER: 'filter',
        FILTERED: 'filtered',
        SORTED: 'sorted',
        LAYOUT: 'layout',
        REMOVED: 'removed'
    };

Shuffle.prototype = {

_init : function() {
            var self = this,
                containerCSS,
                containerWidth,
                resizeFunction = $.proxy( self._onResize, self ),
                debouncedResize = self.throttle ?
                    self.throttle( resizeFunction, self.throttleTime ) :
                    resizeFunction,
                sort = self.initialSort ? self.initialSort : null;

self._layoutList = [];
            self._shrinkList = [];

self._setVars();

// Zero out all columns
            self._resetCols();

// Add classes and invalidate styles
            self._addClasses();

// Set initial css for each item
            self._initItems();

// Bind resize events
            // http://stackoverflow.com/questions/1852751/window-resize-event-firing-in-internet-explorer
            self.$window.on('resize.' + SHUFFLE + '.' + self.unique, debouncedResize);

// Get container css all in one request. Causes reflow
            containerCSS = self.$el.css(['paddingLeft', 'paddingRight', 'position']);
            containerWidth = self._getOuterWidth( self.$el[0] );

// Position cannot be static.
            if ( containerCSS.position === 'static' ) {
                self.$el[0].style.position = 'relative';
            }

// Get offset from container
            self.offset = {
                left: parseInt( containerCSS.paddingLeft, 10 ) || 0,
                top: parseInt( containerCSS.paddingTop, 10 ) || 0
            };

// We already got the container's width above, no need to cause another reflow getting it again...
            // Calculate the number of columns there will be
            self._setColumns( parseInt( containerWidth, 10 ) );

// Kick off!
            self.shuffle( self.group, sort );

// The shuffle items haven't had transitions set on them yet
            // so the user doesn't see the first layout. Set them now that the first layout is done.
            if ( self.supported ) {
                setTimeout(function() {
                    self._setTransitions();
                    self.$el[0].style[ TRANSITION ] = 'height ' + self.speed + 'ms ' + self.easing;
                }, 0);
            }
        },

// Will invalidate styles
        _addClasses : function() {
            this.$el.addClass( SHUFFLE );
            this.$items.addClass('shuffle-item filtered');
        },

_setVars : function() {
            var self = this,
                columnWidth = self.columnWidth;

self.$items = self._getItems();

// Column width is the default setting and sizer is not (meaning passed in)
            // Assume they meant column width to be the sizer
            if ( columnWidth === 0 && self.sizer !== null ) {
                columnWidth = self.sizer;
            }

// If column width is a string, treat is as a selector and search for the
            // sizer element within the outermost container
            if ( typeof columnWidth === 'string' ) {
                self.$sizer = self.$el.find( columnWidth );

// Check for an element
            } else if ( columnWidth && columnWidth.nodeType && columnWidth.nodeType === 1 ) {
                // Wrap it in jQuery
                self.$sizer = $( columnWidth );

// Check for jQuery object
            } else if ( columnWidth && columnWidth.jquery ) {
                self.$sizer = columnWidth;
            }

if ( self.$sizer && self.$sizer.length ) {
                self.useSizer = true;
                self.sizer = self.$sizer[0];
            }
        },

/**
         * Filter the elements by a category.
         * @param {string} [category] Category to filter by. If it's given, the last
         *     category will be used to filter the items.
         * @param {jQuery} [$collection] Optionally filter a collection. Defaults to
         *     all the items.
         * @return {jQuery} Filtered items.
         */
        _filter : function( category, $collection ) {
            var self = this,
                isPartialSet = $collection !== undefined,
                $items = isPartialSet ? $collection : self.$items,
                $filtered = $();

category = category || self.lastFilter;

self._fire( Shuffle.EventType.FILTER );

// Loop through each item and use provided function to determine
            // whether to hide it or not.
            if ( $.isFunction( category ) ) {
                $items.each(function() {
                    var $item = $(this);
                    if ( category.call($item[0], $item, self) ) {
                        $filtered = $filtered.add( $item );
                    }
                });

// Otherwise we've been passed a category to filter by
            } else {
                self.group = category;

// category === 'all', add filtered class to everything
                if ( category === ALL_ITEMS ) {
                    $filtered = $items;

// Check each element's data-groups attribute against the given category.
                } else {
                    $items.each(function() {
                        var $item = $(this),
                            groups = $item.data( FILTER_ATTRIBUTE_KEY ),
                            keys = self.delimeter && !$.isArray( groups ) ?
                                groups.split( self.delimeter ) :
                                groups;

if ( $.inArray(category, keys) > -1 ) {
                            $filtered = $filtered.add( $item );
                        }
                    });
                }
            }

// Individually add/remove concealed/filtered classes
            self._toggleFilterClasses( $items, $filtered );

$items = null;
            $collection = null;

return $filtered;
        },

_toggleFilterClasses : function( $items, $filtered ) {
            var concealed = 'concealed',
                filtered = 'filtered';

$items.filter( $filtered ).each(function() {
                var $filteredItem = $(this);
                // Remove concealed if it's there
                if ( $filteredItem.hasClass( concealed ) ) {
                    $filteredItem.removeClass( concealed );
                }
                // Add filtered class if it's not there
                if ( !$filteredItem.hasClass( filtered ) ) {
                    $filteredItem.addClass( filtered );
                }
            });

$items.not( $filtered ).each(function() {
                var $filteredItem = $(this);
                // Add concealed if it's not there
                if ( !$filteredItem.hasClass( concealed ) ) {
                    $filteredItem.addClass( concealed );
                }
                // Remove filtered class if it's there
                if ( $filteredItem.hasClass( filtered ) ) {
                    $filteredItem.removeClass( filtered );
                }
            });
        },

/**
         * Set the initial css for each item
         * @param {jQuery} [$items] Optionally specifiy at set to initialize
         */
        _initItems : function( $items ) {
            $items = $items || this.$items;
            $items.css( this.itemCss ).data('position', {x: 0, y: 0});
        },

_updateItemCount : function() {
            this.visibleItems = this.$items.filter('.filtered').length;
        },

_setTransition : function( element ) {
            element.style[ TRANSITION ] = CSS_TRANSFORM + ' ' + this.speed + 'ms ' + this.easing + ', opacity ' + this.speed + 'ms ' + this.easing;
        },

_setTransitions : function( $items ) {
            var self = this;

$items = $items || self.$items;
            $items.each(function() {
                self._setTransition( this );
            });
        },

_setSequentialDelay : function( $collection ) {
            var self = this;

if ( !self.supported ) {
                return;
            }

// $collection can be an array of dom elements or jquery object
            $.each($collection, function(i, el) {
                // This works because the transition-property: transform, opacity;
                el.style[ TRANSITION_DELAY ] = '0ms,' + ((i + 1) * self.sequentialFadeDelay) + 'ms';

// Set the delay back to zero after one transition
                $(el).on(TRANSITIONEND + '.' + self.unique, function(evt) {
                    var target = evt.currentTarget;
                    if ( target === evt.target ) {
                        target.style[ TRANSITION_DELAY ] = '0ms';
                        $(target).off(TRANSITIONEND + '.' + self.unique);
                    }
                });
            });
        },

_getItems : function() {
            return this.$el.children( this.itemSelector );
        },

_getPreciseDimension : function( element, style ) {
            var dimension;
            if ( window.getComputedStyle ) {
                dimension = window.getComputedStyle( element, null )[ style ];
            } else {
                dimension = $( element ).css( style );
            }
            return parseFloat( dimension );
        },

/**
         * Returns the outer width of an element, optionally including its margins.
         * @param {Element} element The element.
         * @param {boolean} [includeMargins] Whether to include margins. Default is false.
         * @return {number} The width.
         */
        _getOuterWidth : function( element, includeMargins ) {
            var width = element.offsetWidth;

// Use jQuery here because it uses getComputedStyle internally and is
            // cross-browser. Using the style property of the element will only work
            // if there are inline styles.
            if (includeMargins) {
                var styles = $(element).css(['marginLeft', 'marginRight']);

// Defaults to zero if parsing fails because IE will return 'auto' when
                // the element doesn't have margins instead of the computed style.
                var marginLeft = parseFloat(styles.marginLeft) || 0;
                var marginRight = parseFloat(styles.marginRight) || 0;
                width += marginLeft + marginRight;
            }

return width;
        },

/**
         * Returns the outer height of an element, optionally including its margins.
         * @param {Element} element The element.
         * @param {boolean} [includeMargins] Whether to include margins. Default is false.
         * @return {number} The height.
         */
        _getOuterHeight : function( element, includeMargins ) {
            var height = element.offsetHeight;

if (includeMargins) {
                var styles = $(element).css(['marginTop', 'marginBottom']);
                var marginTop = parseFloat(styles.marginTop) || 0;
                var marginBottom = parseFloat(styles.marginBottom) || 0;
                height += marginTop + marginBottom;
            }

return height;
        },

_getColumnSize : function( gutterSize, containerWidth ) {
            var size;

// If the columnWidth property is a function, then the grid is fluid
            if ( $.isFunction( this.columnWidth ) ) {
                size = this.columnWidth(containerWidth);

// columnWidth option isn't a function, are they using a sizing element?
            } else if ( this.useSizer ) {
                size = this._getPreciseDimension(this.sizer, 'width');

// if not, how about the explicitly set option?
            } else if ( this.columnWidth ) {
                size = this.columnWidth;

// or use the size of the first item
            } else if ( this.$items.length > 0 ) {
                size = this._getOuterWidth(this.$items[0], true);

// if there's no items, use size of container
            } else {
                size = containerWidth;
            }

// Don't let them set a column width of zero.
            if ( size === 0 ) {
                size = containerWidth;
            }

return size + gutterSize;
        },

_getGutterSize : function( containerWidth ) {
            var size;
            if ( $.isFunction( this.gutterWidth ) ) {
                size = this.gutterWidth(containerWidth);
            } else if ( this.useSizer ) {
                size = this._getPreciseDimension(this.sizer, 'marginLeft');
            } else {
                size = this.gutterWidth;
            }

return size;
        },

/**
         * Calculate the number of columns to be used. Gets css if using sizer element.
         * @param {number} [theContainerWidth] Optionally specify a container width if it's already available.
         */
        _setColumns : function( theContainerWidth ) {
            var containerWidth = theContainerWidth || this._getOuterWidth(this.$el[0]);
            var gutter = this._getGutterSize(containerWidth);
            var columnWidth = this._getColumnSize(gutter, containerWidth);
            var calculatedColumns = (containerWidth + gutter) / columnWidth;

// Widths given from getComputedStyle are not precise enough...
            if ( Math.abs(Math.round(calculatedColumns) - calculatedColumns) < 0.03 ) {
                // e.g. calculatedColumns = 11.998876
                calculatedColumns = Math.round( calculatedColumns );
            }

this.cols = Math.max( Math.floor(calculatedColumns), 1 );
            this.containerWidth = containerWidth;
            this.colWidth = columnWidth;
        },

/**
         * Adjust the height of the grid
         */
        _setContainerSize : function() {
            var customData = Math.max.apply( Math, this.colYs)+5;
            this.$el.css( 'height', customData);
        },

/**
         * Fire events with .shuffle namespace
         */
        _fire : function( name, args ) {
            this.$el.trigger( name + '.' + SHUFFLE, args && args.length ? args : [ this ] );
        },

/**
         * Loops through each item that should be shown and calculates the x, y position.
         * @param {Array.<Element>} items Array of items that will be shown/layed out in order in their array.
         *     Because jQuery collection are always ordered in DOM order, we can't pass a jq collection.
         * @param {function} fn Callback function.
         * @param {boolean} isOnlyPosition If true this will position the items with zero opacity.
         */
        _layout : function( items, fn, isOnlyPosition ) {
            var self = this;

fn = fn || self._filterEnd;

$.each(items, function(index, item) {
                var $item = $(item);
                var itemData = $item.data();
                var currPos = itemData.position;
                var pos = self._getItemPosition( $item );

// Save data for shrink
                $item.data( 'position', pos );

// If the item will not change its position, do not add it to the render
                // queue. Transitions don't fire when setting a property to the same value.
                if ( pos.x === currPos.x && pos.y === currPos.y && itemData.scale === DEFAULT_SCALE ) {
                    return;
                }

var transitionObj = {
                    $item: $item,
                    x: pos.x,
                    y: pos.y,
                    scale: DEFAULT_SCALE
                };

if ( isOnlyPosition ) {
                    transitionObj.skipTransition = true;
                    transitionObj.opacity = 0;
                } else {
                    transitionObj.opacity = 1;
                    transitionObj.callback = fn;
                }

self.styleQueue.push( transitionObj );
                self._layoutList.push( $item[0] );
            });

// `_layout` always happens after `_shrink`, so it's safe to process the style
            // queue here with styles from the shrink method
            self._processStyleQueue();

// Adjust the height of the container
            self._setContainerSize();
        },

// Reset columns.
        _resetCols : function() {
            var i = this.cols;
            this.colYs = [];
            while (i--) {
                this.colYs.push( 0 );
            }
        },

_reLayout : function() {
            this._resetCols();

// If we've already sorted the elements, keep them sorted
            if ( this.lastSort ) {
                this.sort( this.lastSort, true );
            } else {
                this._layout( this.$items.filter('.filtered').get(), this._filterEnd );
            }
        },

_getItemPosition : function( $item ) {
            var self = this;
            var itemWidth = self._getOuterWidth( $item[0], true );
            var columnSpan = itemWidth / self.colWidth;

// If the difference between the rounded column span number and the
            // calculated column span number is really small, round the number to
            // make it fit.
            if ( Math.abs(Math.round(columnSpan) - columnSpan) < 0.03 ) {
                // e.g. columnSpan = 4.0089945390298745
                columnSpan = Math.round( columnSpan );
            }

// How many columns does this item span. Ensure it's not more than the
            // amount of columns in the whole layout.
            var colSpan = Math.min( Math.ceil(columnSpan), self.cols );

// The item spans only one column.
            if ( colSpan === 1 ) {
                return self._placeItem( $item, self.colYs );

// The item spans more than one column, figure out how many different
                // places it could fit horizontally
            } else {
                var groupCount = self.cols + 1 - colSpan,
                    groupY = [],
                    groupColY,
                    i;

// for each group potential horizontal position
                for ( i = 0; i < groupCount; i++ ) {
                    // make an array of colY values for that one group
                    groupColY = self.colYs.slice( i, i + colSpan );
                    // and get the max value of the array
                    groupY[i] = Math.max.apply( Math, groupColY );
                }

return self._placeItem( $item, groupY );
            }
        },

// worker method that places item in the columnSet with the the minY
        _placeItem : function( $item, setY ) {
            // get the minimum Y value from the columns
            var self = this,
                minimumY = Math.min.apply( Math, setY ),
                shortCol = 0;

// Find index of short column, the first from the left where this item will go
            // if ( setY[i] === minimumY ) requires items' height to be exact every time.
            // The buffer value is very useful when the height is a percentage of the width
            for (var i = 0, len = setY.length; i < len; i++) {
                if ( setY[i] >= minimumY - self.buffer && setY[i] <= minimumY + self.buffer ) {
                    shortCol = i;
                    break;
                }
            }

// Position the item
            var position = {
                x: Math.round( (self.colWidth * shortCol) + self.offset.left ),
                y: Math.round( minimumY + self.offset.top )
            };

// Apply setHeight to necessary columns
            var setHeight = minimumY + self._getOuterHeight( $item[0], true ),
                setSpan = self.cols + 1 - len;
            for ( i = 0; i < setSpan; i++ ) {
                self.colYs[ shortCol + i ] = setHeight;
            }

return position;
        },

/**
         * Hides the elements that don't match our filter.
         * @param {jQuery} $collection jQuery collection to shrink.
         * @param {Function} fn Callback function.
         * @private
         */
        _shrink : function( $collection, fn ) {
            var self = this,
                $concealed = $collection || self.$items.filter('.concealed');

fn = fn || self._shrinkEnd;

// Abort if no items
            if ( !$concealed.length ) {
                return;
            }

self._fire( Shuffle.EventType.SHRINK );

$concealed.each(function() {
                var $item = $(this);
                var itemData = $item.data();
                var alreadyShrunk = itemData.scale === CONCEALED_SCALE;

// Continuing would add a transitionend event listener to the element, but
                // that listener would execute because the transform and opacity would
                // stay the same.
                if ( alreadyShrunk ) {
                    return;
                }

var transitionObj = {
                    $item: $item,
                    x: itemData.position.x,
                    y: itemData.position.y,
                    scale : CONCEALED_SCALE,
                    opacity: 0,
                    callback: fn
                };

self.styleQueue.push( transitionObj );
                self._shrinkList.push( $item[0] );
            });
        },

_onResize : function() {
            // If shuffle is disabled, destroyed, don't do anything
            if ( !this.enabled || this.destroyed ) {
                return;
            }

// Will need to check height in the future if it's layed out horizontaly
            var containerWidth = this._getOuterWidth(this.$el[0]);

// containerWidth hasn't changed, don't do anything
            if ( containerWidth === this.containerWidth ) {
                return;
            }

this.resized();
        },

/**
         * If the browser has 3d transforms available, build a string with those,
         * otherwise use 2d transforms.
         * @param {number} x X position.
         * @param {number} y Y position.
         * @param {number} scale Scale amount.
         * @return {string} A normalized string which can be used with the transform style.
         * @private
         */
        _getItemTransformString : function(x, y, scale) {
            if ( HAS_TRANSFORMS_3D ) {
                return 'translate3d(' + x + 'px, ' + y + 'px, 0) scale3d(' + scale + ', ' + scale + ', 1)';
            } else {
                return 'translate(' + x + 'px, ' + y + 'px) scale(' + scale + ', ' + scale + ')';
            }
        },

_getStylesForTransition : function( opts ) {
            var styles = {
                opacity: opts.opacity
            };

if ( this.supported ) {
                if ( opts.x !== undefined ) {
                    styles[ TRANSFORM ] = this._getItemTransformString( opts.x, opts.y, opts.scale );
                }
            } else {
                styles.left = opts.x;
                styles.top = opts.y;
            }

// Show the item if its opacity will be 1.
            if ( opts.opacity === 1 ) {
                styles.visibility = 'visible';
            }

return styles;
        },

/**
         * Transitions an item in the grid
         *
         * @param {Object}   opts options
         * @param {jQuery}   opts.$item jQuery object representing the current item
         * @param {number}   opts.x translate's x
         * @param {number}   opts.y translate's y
         * @param {number}   opts.scale amount to scale the item
         * @param {number}   opts.opacity opacity of the item
         * @param {Function} opts.callback complete function for the animation
         * @private
         */
        _transition : function( opts ) {
            opts.$item.data('scale', opts.scale);

var styles = this._getStylesForTransition( opts );
            this._startItemAnimation( opts.$item, styles, opts.callback );
        },

_startItemAnimation : function( $item, styles, callback ) {
            var willBeVisible = styles.opacity === 1;
            var complete = $.proxy( this._handleItemAnimationEnd, this,
                callback || $.noop, $item[0], willBeVisible );

// Use CSS Transforms if we have them
            if ( this.supported ) {

$item.css( styles );

// Transitions are not set until shuffle has loaded to avoid the initial transition.
                if ( this.initialized ) {
                    // Namespaced because the reveal appended function also wants to know
                    // about the transition end event.
                    $item.on( TRANSITIONEND + '.shuffleitem', complete );
                } else {
                    complete();
                }

// Use jQuery to animate left/top
            } else {
                // jQuery cannot animate visibility, set it immediately.
                if ( 'visibility' in styles ) {
                    $item.css('visibility', styles.visibility);
                    delete styles.visibility;
                }
                $item.stop( true ).animate( styles, this.speed, 'swing', complete );
            }
        },

_handleItemAnimationEnd : function( callback, item, willBeVisible, evt ) {
            // Make sure this event handler has not bubbled up from a child.
            if ( evt ) {
                if ( evt.target === item ) {
                    $( item ).off( '.shuffleitem' );
                } else {
                    return;
                }
            }

if ( this._layoutList.length > 0 && $.inArray( item, this._layoutList ) > -1 ) {
                this._fire( Shuffle.EventType.LAYOUT );
                callback.call( this );
                this._layoutList.length = 0;
            } else if ( this._shrinkList.length > 0 && $.inArray( item, this._shrinkList ) > -1 ) {
                callback.call( this );
                this._shrinkList.length = 0;
            }

if ( !willBeVisible ) {
                item.style.visibility = 'hidden';
            }
        },

_processStyleQueue : function() {
            var self = this;

$.each(this.styleQueue, function(i, transitionObj) {

if ( transitionObj.skipTransition ) {
                    self._skipTransition(transitionObj.$item[0], function() {
                        transitionObj.$item.css( self._getStylesForTransition( transitionObj ) );
                    });
                } else {
                    self._transition( transitionObj );
                }
            });

// Remove everything in the style queue
            self.styleQueue.length = 0;
        },

_shrinkEnd : function() {
            this._fire( Shuffle.EventType.SHRUNK );
        },

_filterEnd : function() {
            this._fire( Shuffle.EventType.FILTERED );
        },

_sortEnd : function() {
            this._fire( Shuffle.EventType.SORTED );
        },

/**
         * Change a property or execute a function which will not have a transition
         * @param {Element} element DOM element that won't be transitioned
         * @param {(string|Function)} property The new style property which will be set or a function which will be called
         * @param {string} [value] The value that `property` should be.
         * @private
         */
        _skipTransition : function( element, property, value ) {
            var duration = element.style[ TRANSITION_DURATION ];

// Set the duration to zero so it happens immediately
            element.style[ TRANSITION_DURATION ] = '0ms'; // ms needed for firefox!

if ( $.isFunction( property ) ) {
                property();
            } else {
                element.style[ property ] = value;
            }

// Force reflow
            var reflow = element.offsetWidth;
            // Avoid jshint warnings: unused variables and expressions.
            reflow = null;

// Put the duration back
            element.style[ TRANSITION_DURATION ] = duration;
        },

_addItems : function( $newItems, animateIn, isSequential ) {
            var self = this;

if ( !self.supported ) {
                animateIn = false;
            }

$newItems.addClass('shuffle-item');
            self._initItems( $newItems );
            self._setTransitions( $newItems );
            self.$items = self._getItems();

// Hide all items
            $newItems.css('opacity', 0);

// Get ones that passed the current filter
            var $passed = self._filter( undefined, $newItems );
            var passed = $passed.get();

// How many filtered elements?
            self._updateItemCount();

if ( animateIn ) {
                self._layout( passed, null, true );

if ( isSequential ) {
                    self._setSequentialDelay( $passed );
                }

self._revealAppended( $passed );
            } else {
                self._layout( passed );
            }
        },

_revealAppended : function( $newFilteredItems ) {
            var self = this;

setTimeout(function() {
                $newFilteredItems.each(function(i, el) {
                    self._transition({
                        $item: $(el),
                        opacity: 1,
                        scale: DEFAULT_SCALE
                    });
                });
            }, self.revealAppendedDelay);
        },

/**
         * Public Methods
         */

/**
         * The magic. This is what makes the plugin 'shuffle'
         * @param {(string|Function)} [category] Category to filter by. Can be a function
         * @param {Object} [sortObj] A sort object which can sort the filtered set
         */
        shuffle : function( category, sortObj ) {
            var self = this;

if ( !self.enabled ) {
                return;
            }

if ( !category ) {
                category = ALL_ITEMS;
            }

self._filter( category );
            // Save the last filter in case elements are appended.
            self.lastFilter = category;

// How many filtered elements?
            self._updateItemCount();

// Shrink each concealed item
            self._shrink();

// If given a valid sort object, save it so that _reLayout() will sort the items
            if ( sortObj ) {
                self.lastSort = sortObj;
            }
            // Update transforms on .filtered elements so they will animate to their new positions
            self._reLayout();
        },

/**
         * Gets the .filtered elements, sorts them, and passes them to layout
         *
         * @param {Object} opts the options object for the sorted plugin
         * @param {boolean} [fromFilter] was called from Shuffle.filter method.
         */
        sort : function( opts, fromFilter ) {
            var self = this,
                items = self.$items.filter('.filtered').sorted(opts);

if ( !fromFilter ) {
                self._resetCols();
            }

self._layout(items, function() {
                if (fromFilter) {
                    self._filterEnd();
                }
                self._sortEnd();
            });

self.lastSort = opts;
        },

/**
         * Relayout everything
         */
        resized : function( isOnlyLayout ) {
            if ( this.enabled ) {

if ( !isOnlyLayout ) {
                    // Get updated colCount
                    this._setColumns();
                }

// Layout items
                this._reLayout();
            }
        },

/**
         * Use this instead of `update()` if you don't need the columns and gutters updated
         * Maybe an image inside `shuffle` loaded (and now has a height), which means calculations
         * could be off.
         */
        layout : function() {
            this.update( true );
        },

update : function( isOnlyLayout ) {
            this.resized( isOnlyLayout );
        },

/**
         * New items have been appended to shuffle. Fade them in sequentially
         * @param {jQuery} $newItems jQuery collection of new items
         * @param {boolean} [animateIn] If false, the new items won't animate in
         * @param {boolean} [isSequential] If false, new items won't sequentially fade in
         */
        appended : function( $newItems, animateIn, isSequential ) {
            // True if undefined
            animateIn = animateIn === false ? false : true;
            isSequential = isSequential === false ? false : true;

this._addItems( $newItems, animateIn, isSequential );
        },

/**
         * Disables shuffle from updating dimensions and layout on resize
         */
        disable : function() {
            this.enabled = false;
        },

/**
         * Enables shuffle again
         * @param {boolean} [isUpdateLayout=true] if undefined, shuffle will update columns and gutters
         */
        enable : function( isUpdateLayout ) {
            this.enabled = true;
            if ( isUpdateLayout !== false ) {
                this.update();
            }
        },

/**
         * Remove 1 or more shuffle items
         * @param {jQuery} $collection A jQuery object containing one or more element in shuffle
         * @return {Shuffle} The shuffle object
         */
        remove : function( $collection ) {

// If this isn't a jquery object, exit
            if ( !$collection.length || !$collection.jquery ) {
                return;
            }

var self = this;

// Hide collection first
            self._shrink( $collection, function() {
                var shuffle = this;

// Remove the collection in the callback
                $collection.remove();

// Update the items, layout, count and fire off `removed` event
                setTimeout(function() {
                    shuffle.$items = shuffle._getItems();
                    shuffle.layout();
                    shuffle._updateItemCount();
                    shuffle._fire( Shuffle.EventType.REMOVED, [ $collection, shuffle ] );

// Let it get garbage collected
                    $collection = null;
                }, 0);
            });

// Process changes
            self._processStyleQueue();

return self;
        },

/**
         * Destroys shuffle, removes events, styles, and classes
         */
        destroy : function() {
            var self = this;

// If there is more than one shuffle instance on the page,
            // removing the resize handler from the window would remove them
            // all. This is why a unique value is needed.
            self.$window.off('.' + self.unique);

// Reset container styles
            self.$el
                .removeClass( SHUFFLE )
                .removeAttr('style')
                .removeData( SHUFFLE );

// Reset individual item styles
            self.$items
                .removeAttr('style')
                .removeClass('concealed filtered shuffle-item');

// Null DOM references
            self.$window = null;
            self.$items = null;
            self.$el = null;
            self.$sizer = null;
            self.sizer = null;

// Set a flag so if a debounced resize has been triggered,
            // it can first check if it is actually destroyed and not doing anything
            self.destroyed = true;
        }
    };

// Overrideable options
    Shuffle.options = {
        group: ALL_ITEMS, // Filter group
        speed: 250, // Transition/animation speed (milliseconds)
        easing: 'ease-out', // css easing function to use
        itemSelector: '', // e.g. '.picture-item'
        sizer: null, // sizer element. Can be anything columnWidth is
        gutterWidth: 0, // a static number or function that tells the plugin how wide the gutters between columns are (in pixels)
        columnWidth: 0, // a static number or function that returns a number which tells the plugin how wide the columns are (in pixels)
        delimeter: null, // if your group is not json, and is comma delimeted, you could set delimeter to ','
        buffer: 0, // useful for percentage based heights when they might not always be exactly the same (in pixels)
        initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method
        throttle: throttle, // By default, shuffle will try to throttle the resize event. This option will change the method it uses
        throttleTime: 300, // How often shuffle can be called on resize (in milliseconds)
        sequentialFadeDelay: 150, // Delay between each item that fades in when adding items
        supported: CAN_TRANSITION_TRANSFORMS // supports transitions and transforms
    };

// Not overrideable
    Shuffle.settings = {
        $sizer: null,
        useSizer: false,
        itemCss : { // default CSS for each item
            position: 'absolute',
            top: 0,
            left: 0
        },
        offset: { top: 0, left: 0 },
        revealAppendedDelay: 300,
        enabled: true,
        destroyed: false,
        initialized: false,
        styleQueue: []
    };

// Plugin definition
    $.fn.shuffle = function( opts ) {
        var args = Array.prototype.slice.call( arguments, 1 );
        return this.each(function() {
            var $this = $( this ),
                shuffle = $this.data( SHUFFLE );

// If we don't have a stored shuffle, make a new one and save it
            if ( !shuffle ) {
                shuffle = new Shuffle( $this, opts );
                $this.data( SHUFFLE, shuffle );
            }

if ( typeof opts === 'string' && shuffle[ opts ] ) {
                shuffle[ opts ].apply( shuffle, args );
            }
        });
    };

// You can return `undefined` from the `by` function to revert to DOM order
// This plugin does NOT return a jQuery object. It returns a plain array because
// jQuery sorts everything in DOM order.
    $.fn.sorted = function(options) {
        var opts = $.extend({}, $.fn.sorted.defaults, options),
            arr = this.get(),
            revert = false;

if ( !arr.length ) {
            return [];
        }

if ( opts.randomize ) {
            return $.fn.sorted.randomize( arr );
        }

// Sort the elements by the opts.by function.
        // If we don't have opts.by, default to DOM order
        if (opts.by !== $.noop && opts.by !== null && opts.by !== undefined) {
            arr.sort(function(a, b) {

// Exit early if we already know we want to revert
                if ( revert ) {
                    return 0;
                }

var valA = opts.by($(a)),
                    valB = opts.by($(b));

// If both values are undefined, use the DOM order
                if ( valA === undefined && valB === undefined ) {
                    revert = true;
                    return 0;
                }

if ( valA === 'sortFirst' || valB === 'sortLast' ) {
                    return -1;
                }

if ( valA === 'sortLast' || valB === 'sortFirst' ) {
                    return 1;
                }

return (valA < valB) ? -1 :
                    (valA > valB) ? 1 : 0;
            });
        }

// Revert to the original array if necessary
        if ( revert ) {
            return this.get();
        }

if ( opts.reverse ) {
            arr.reverse();
        }

return arr;
    };

$.fn.sorted.defaults = {
        reverse: false, // Use array.reverse() to reverse the results
        by: null, // Sorting function
        randomize: false // If true, this will skip the sorting and return a randomized order in the array
    };

// http://stackoverflow.com/a/962890/373422
    $.fn.sorted.randomize = function( array ) {
        var top = array.length,
            tmp, current;

if ( !top ) {
            return array;
        }

while ( --top ) {
            current = Math.floor( Math.random() * (top + 1) );
            tmp = array[ current ];
            array[ current ] = array[ top ];
            array[ top ] = tmp;
        }

return array;
    };

return Shuffle;

});

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: shuffle.js

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation