Mini Shell

/*=========================================================================================
    File Name: interactions.js
    Description: jQuery UI interactions
    ----------------------------------------------------------------------------------------
    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
    Version: 1.0
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

$(document).ready(function(){

	/********************************
	*			Draggable			*
	********************************/

	// Default
	$( ".draggable-ele" ).draggable({
		containment: ".draggable-container",
		scroll: false
	});

	// Vertically Draggable
	$( ".draggable-vert" ).draggable({
		axis: "y",
		containment: ".constrain-movement-container",
		scroll: false
	});

	// Horizontally Draggable
	$( ".draggable-horz" ).draggable({
		axis: "x",
		containment: ".constrain-movement-container",
		scroll: false
	});

	// Draggable in all the directions
	$( ".draggable-both" ).draggable({
		containment: ".constrain-movement-container",
		scroll: false
	});

	// Cursor Style Move While Dragging
	$( ".draggable-move" ).draggable({
		cursor: "move",
		cursorAt: { top: 56, left: 56 },
		containment: ".draggable-cursor-style",
		scroll: false
	});

	// Cursor Style crosshair
	$( ".draggable-crosshair" ).draggable({
		cursor: "crosshair",
		cursorAt: { top: -5, left: -5 },
		containment: ".draggable-cursor-style",
		scroll: false
	});

	// Cursor Style help
	$( ".draggable-help" ).draggable({
		cursor: "help",
		cursorAt: { bottom: 0 },
		containment: ".draggable-cursor-style",
		scroll: false
	});

	var $start_counter = $( ".draggable-start" ),
		$drag_counter = $( ".draggable-drag" ),
		$stop_counter = $( ".draggable-stop" ),
		counts = [ 0, 0, 0 ];

	// Drag Start
	$start_counter.draggable({
		start: function() {
			counts[ 0 ]++;
			updateCounterStatus( $start_counter, counts[ 0 ] );
		},
		containment: ".events-container",
		scroll: false
	});

	// Dragging
	$drag_counter.draggable({
		drag: function() {
			counts[ 1 ]++;
			updateCounterStatus( $drag_counter, counts[ 1 ] );
		},
		containment: ".events-container",
		scroll: false
	});

	// Drag Stop
	$stop_counter.draggable({
		stop: function() {
			counts[ 2 ]++;
			updateCounterStatus( $stop_counter, counts[ 2 ] );
		},
		containment: ".events-container",
		scroll: false
	});

	function updateCounterStatus( $event_counter, new_count ) {
		// first update the status visually...
		if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
		$event_counter.addClass( "ui-state-hover" )
			.siblings().removeClass( "ui-state-hover" );
		}
		// ...then update the numbers
		$( "span.count", $event_counter ).text( new_count );
    }

    // Drag using text only
	$( ".draggable-text-ele" ).draggable({
		handle: ".draggable-text",
		containment: ".draggable-handles-container",
		scroll: false
	});

	// Drag using element
	$( ".draggable-elem" ).draggable({
		containment: ".draggable-handles-container",
		scroll: false
	});

	// Drag cancel
	$( ".draggable-cancel" ).draggable({
		cancel: ".draggable-cancel",
		containment: ".draggable-handles-container",
		scroll: false
	});

	// Return Draggable
	$( ".draggable-revert-orgi" ).draggable({
		revert: true,
		containment: ".return-draggable",
		scroll: false
	});

	// Return The Helper
	$( ".draggable-revert-helper" ).draggable({
		revert: true,
		helper: "clone",
		containment: ".return-draggable",
		scroll: false
	});

	/********************************
	*			Droppable			*
	********************************/

	// Draggable
	$( ".draggable-drop-ele" ).draggable({
		containment: ".droppable-container",
		scroll: false
	});

    $( ".droppable-ele" ).droppable({
		drop: function( event, ui ) {
			$( this )
				.addClass( "ui-state-highlight" )
				.find( "span" )
					.html( "Dropped!" );
		}
    });

    // Draggable Accept / Reject Elements
	$( ".droppable-accept, .droppable-reject" ).draggable({
		containment: ".accept-drop-container",
		scroll: false
	});

    $( ".droppable-accept-ele" ).droppable({
		accept: ".droppable-accept",
		classes: {
			"ui-droppable-active": "ui-state-active",
			"ui-droppable-hover": "ui-state-hover"
		},
		drop: function( event, ui ) {
			$( this )
				.addClass( "ui-state-highlight" )
				.find( "span" )
					.html( "Dropped!" );
		}
    });

    // Draggable Accept / Reject Elements
	$( ".valid-drop-revert" ).draggable({
		revert: "valid",
		containment: ".revert-droppable-container",
		scroll: false
	});

	$( ".invalid-drop-revert" ).draggable({
		revert: "invalid",
		containment: ".revert-droppable-container",
		scroll: false
	});

    $( ".revert-droppable-ele" ).droppable({
		classes: {
			"ui-droppable-active": "ui-state-active",
			"ui-droppable-hover": "ui-state-hover"
		},
		drop: function( event, ui ) {
			$( this )
				.addClass( "ui-state-highlight" )
				.find( "span" )
					.html( "Dropped!" );
		}
    });

    // Draggable feedback
	$( ".draggable-feedback" ).draggable({
		containment: ".visual-feedback-container",
		scroll: false
	});

	$( ".droppable-hover-feedback" ).droppable({
		classes: {
			"ui-droppable-hover": "ui-state-hover"
		},
		drop: function( event, ui ) {
		$( this )
			.addClass( "ui-state-highlight" )
			.find( "span" )
				.html( "Dropped!" );
		}
    });

    $( ".droppable-active-feedback" ).droppable({
		accept: ".draggable-feedback",
		classes: {
			"ui-droppable-active": "ui-state-default"
		},
		drop: function( event, ui ) {
		$( this )
			.addClass( "ui-state-highlight" )
			.find( "span" )
				.html( "Dropped!" );
		}
    });

	/********************************
	*			Resizable			*
	********************************/

	// Simple Resize
	$('.resize-ele').resizable();

	// Resize with animation
	$('.resize-animate').resizable({
		animate: true
	});

	// Constrain resize area
	$( ".resize-constrain" ).resizable({
		containment: ".resize-container"
    });

	// Resize hlper
	$( ".resize-aspect-ratio" ).resizable({
		aspectRatio: 16 / 9
    });

	/********************************
	*			Selectable			*
	********************************/

	// Simple Select
	$( ".selectable" ).selectable();

	// Serialize select
	$(".selectable-serialize").selectable({
		stop: function() {
			var result = $(".select-result").empty();
			$(".ui-selected", this).each(function() {
				var index = $(".selectable-serialize li").index(this);
				result.append(" #" + (index + 1));
			});
		}
	});

	/********************************
	*			Sortable			*
	********************************/

	// Simple Sort
	$( ".sortable" ).sortable();
	// Disable the selection for sort to work
    $( ".sortable" ).disableSelection();

    // Connect Lists
    $( ".connect-list1, .connect-list2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();

    // Drop Placeholder
    $( ".sortable-placeholder" ).sortable({
      placeholder: "ui-state-highlight"
    });
    $( ".sortable-placeholder" ).disableSelection();

    // Sortable and disabled drop targets
    $( ".sortable-list1" ).sortable({
      items: "li:not(.ui-state-disabled)"
    });

    // Cancel sorting only
    $( ".sortable-list2" ).sortable({
      cancel: ".ui-state-disabled"
    });

    $( ".sortable-list1 li, .sortable-list2 li" ).disableSelection();
});