/*
Template: Streamit - Responsive Bootstrap 4 Admin Dashboard Template
Author: iqonicthemes.in
Design and Developed by: iqonicthemes.in
NOTE: This file contains the styling for responsive Template.
*/
/*----------------------------------------------
Index Of Script
------------------------------------------------
:: Tooltip
:: Magnific Popup
:: Ripple Effect
:: Sidebar Widget
:: Page FAQ
:: Page Loader
:: Owl Carousel
:: Search input
:: Scrollbar
:: Counter
:: slick
:: Progress Bar
:: Page Menu
:: Wow Animation
:: Form Validation
:: Active Class for Pricing Table
:: Flatpicker
:: Scroll up menu
:: Checkout
:: Datatables
:: image-upload
:: video
:: button
------------------------------------------------
Index Of Script
----------------------------------------------*/
(function(jQuery) {
"use strict";
jQuery(document).ready(function() {
/*---------------------------------------------------------------------
Tooltip
-----------------------------------------------------------------------*/
jQuery('[data-toggle="popover"]').popover();
jQuery('[data-toggle="tooltip"]').tooltip();
/*---------------------------------------------------------------------
Magnific Popup
-----------------------------------------------------------------------*/
jQuery('.popup-gallery').magnificPopup({
delegate: 'a.popup-img',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + 'by Marsel Van Oosten';
}
}
});
jQuery('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
/*---------------------------------------------------------------------
Ripple Effect
-----------------------------------------------------------------------*/
jQuery(document).on('click', ".iq-waves-effect", function(e) {
// Remove any old one
jQuery('.ripple').remove();
// Setup
let posX = jQuery(this).offset().left,
posY = jQuery(this).offset().top,
buttonWidth = jQuery(this).width(),
buttonHeight = jQuery(this).height();
// Add the element
jQuery(this).prepend("");
// Make it round!
if (buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
}
// Get the center of the element
let x = e.pageX - posX - buttonWidth / 2;
let y = e.pageY - posY - buttonHeight / 2;
// Add the ripples CSS and start the animation
jQuery(".ripple").css({
width: buttonWidth,
height: buttonHeight,
top: y + 'px',
left: x + 'px'
}).addClass("rippleEffect");
});
/*---------------------------------------------------------------------
Sidebar Widget
-----------------------------------------------------------------------*/
jQuery(document).on("click", '.iq-menu > li > a', function() {
jQuery('.iq-menu > li > a').parent().removeClass('active');
jQuery(this).parent().addClass('active');
});
/*---------------------------------------------------------------------
Page FAQ
-----------------------------------------------------------------------*/
jQuery('.iq-accordion .iq-accordion-block .accordion-details').hide();
jQuery('.iq-accordion .iq-accordion-block:first').addClass('accordion-active').children().slideDown('slow');
jQuery(document).on("click", '.iq-accordion .iq-accordion-block', function() {
if (jQuery(this).children('div.accordion-details ').is(':hidden')) {
jQuery('.iq-accordion .iq-accordion-block').removeClass('accordion-active').children('div.accordion-details ').slideUp('slow');
jQuery(this).toggleClass('accordion-active').children('div.accordion-details ').slideDown('slow');
}
});
/*---------------------------------------------------------------------
Page Loader
-----------------------------------------------------------------------*/
jQuery("#load").fadeOut();
jQuery("#loading").delay().fadeOut("");
/*---------------------------------------------------------------------
Owl Carousel
-----------------------------------------------------------------------*/
jQuery('.owl-carousel').each(function() {
let jQuerycarousel = jQuery(this);
jQuerycarousel.owlCarousel({
items: jQuerycarousel.data("items"),
loop: jQuerycarousel.data("loop"),
margin: jQuerycarousel.data("margin"),
nav: jQuerycarousel.data("nav"),
dots: jQuerycarousel.data("dots"),
autoplay: jQuerycarousel.data("autoplay"),
autoplayTimeout: jQuerycarousel.data("autoplay-timeout"),
navText: ["", ""],
responsiveClass: true,
responsive: {
// breakpoint from 0 up
0: {
items: jQuerycarousel.data("items-mobile-sm"),
nav: false,
dots: true
},
// breakpoint from 480 up
480: {
items: jQuerycarousel.data("items-mobile"),
nav: false,
dots: true
},
// breakpoint from 786 up
786: {
items: jQuerycarousel.data("items-tab")
},
// breakpoint from 1023 up
1023: {
items: jQuerycarousel.data("items-laptop")
},
1199: {
items: jQuerycarousel.data("items")
}
}
});
});
/*---------------------------------------------------------------------
Search input
-----------------------------------------------------------------------*/
jQuery(document).on('click', function(e) {
let myTargetElement = e.target;
let selector, mainElement;
if (jQuery(myTargetElement).hasClass('search-toggle') || jQuery(myTargetElement).parent().hasClass('search-toggle') || jQuery(myTargetElement).parent().parent().hasClass('search-toggle')) {
if (jQuery(myTargetElement).hasClass('search-toggle')) {
selector = jQuery(myTargetElement).parent();
mainElement = jQuery(myTargetElement);
} else if (jQuery(myTargetElement).parent().hasClass('search-toggle')) {
selector = jQuery(myTargetElement).parent().parent();
mainElement = jQuery(myTargetElement).parent();
} else if (jQuery(myTargetElement).parent().parent().hasClass('search-toggle')) {
selector = jQuery(myTargetElement).parent().parent().parent();
mainElement = jQuery(myTargetElement).parent().parent();
}
if (!mainElement.hasClass('active') && jQuery(".navbar-list li").find('.active')) {
jQuery('.navbar-list li').removeClass('iq-show');
jQuery('.navbar-list li .search-toggle').removeClass('active');
}
selector.toggleClass('iq-show');
mainElement.toggleClass('active');
e.preventDefault();
} else if (jQuery(myTargetElement).is('.search-input')) {} else {
jQuery('.navbar-list li').removeClass('iq-show');
jQuery('.navbar-list li .search-toggle').removeClass('active');
}
});
/*---------------------------------------------------------------------
Scrollbar
-----------------------------------------------------------------------*/
let Scrollbar = window.Scrollbar;
if (jQuery('#sidebar-scrollbar').length) {
Scrollbar.init(document.querySelector('#sidebar-scrollbar'), options);
}
let Scrollbar1 = window.Scrollbar;
if (jQuery('#right-sidebar-scrollbar').length) {
Scrollbar1.init(document.querySelector('#right-sidebar-scrollbar'), options);
}
/*---------------------------------------------------------------------
Counter
-----------------------------------------------------------------------*/
jQuery('.counter').counterUp({
delay: 10,
time: 1000
});
/*---------------------------------------------------------------------
slick
-----------------------------------------------------------------------*/
jQuery('.slick-slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 9,
slidesToScroll: 1,
focusOnSelect: true,
responsive: [{
breakpoint: 992,
settings: {
arrows: false,
centerMode: true,
centerPadding: '30',
slidesToShow: 3
}
}, {
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '15',
slidesToShow: 1
}
}],
nextArrow: '',
prevArrow: '',
});
jQuery('.top-rated-item').slick({
slidesToShow: 4,
speed: 300,
slidesToScroll: 1,
focusOnSelect: true,
appendArrows: $('#top-rated-item-slick-arrow'),
responsive: [{
breakpoint: 1200,
settings: {
slidesToShow: 3
}
},{
breakpoint: 798,
settings: {
slidesToShow: 2
}
},{
breakpoint: 480,
settings: {
arrows: false,
autoplay:true,
slidesToShow: 1
}
}],
});
$('#newrealease-slider').slick({
dots: false,
arrows: false,
infinite: true,
speed: 300,
centerMode: true,
centerPadding: false,
variableWidth: true ,
infinite: true,
focusOnSelect: true,
autoplay: false,
slidesToShow: 7,
slidesToScroll: 1,
});
$("#newrealease-slider .slick-active.slick-center").prev('.slick-active').addClass('temp');
$("#newrealease-slider .slick-active.temp").prev().addClass('temp-1');
$("#newrealease-slider .slick-active.temp-1").prev().addClass('temp-2');
$("#newrealease-slider .slick-active.slick-center").next('.slick-active').addClass('temp-next');
$("#newrealease-slider .slick-active.temp-next").next().addClass('temp-next-1');
$("#newrealease-slider .slick-active.temp-next-1").next().addClass('temp-next-2');
$("#newrealease-slider").on("afterChange", function (){
var slick_index = $(".slick-active.slick-center").data('slick-index');
$('#newrealease-slider .slick-active[data-slick-index="'+(slick_index-1)+'"]').addClass('temp');
$('#newrealease-slider .slick-active[data-slick-index="'+(slick_index-2)+'"]').addClass('temp-1');
$('#newrealease-slider .slick-active[data-slick-index="'+(slick_index-3)+'"]').addClass('temp-2');
$('#newrealease-slider .slick-active[data-slick-index="'+(parseInt(slick_index+1))+'"]').addClass('temp-next');
$('#newrealease-slider .slick-active[data-slick-index="'+(parseInt(slick_index+2))+'"]').addClass('temp-next-1');
$('#newrealease-slider .slick-active[data-slick-index="'+(parseInt(slick_index+3))+'"]').addClass('temp-next-2');
});
$("#newrealease-slider").on("beforeChange", function (){
var slick_index = $(".slick-active.slick-center").data('slick-index');
$('#newrealease-slider .slick-active[data-slick-index="'+(slick_index-1)+'"]').removeClass('temp');
$('#newrealease-slider .slick-active[data-slick-index="'+(slick_index-2)+'"]').removeClass('temp-1');
$('#newrealease-slider .slick-active[data-slick-index="'+(slick_index-3)+'"]').removeClass('temp-2');
$('#newrealease-slider .slick-active[data-slick-index="'+(parseInt(slick_index+1))+'"]').removeClass('temp-next');
$('#newrealease-slider .slick-active[data-slick-index="'+(parseInt(slick_index+2))+'"]').removeClass('temp-next-1');
$('#newrealease-slider .slick-active[data-slick-index="'+(parseInt(slick_index+3))+'"]').removeClass('temp-next-2');
});
$('#favorites-slider').slick({
dots: false,
arrows: false,
infinite: true,
speed: 300,
centerMode: false,
autoplay: true,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
$('#similar-slider').slick({
dots: false,
arrows: false,
infinite: true,
speed: 300,
centerMode: false,
autoplay: true,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
$('#single-similar-slider').slick({
dots: false,
arrows: false,
infinite: true,
speed: 300,
centerMode: false,
autoplay: true,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
$('#trendy-slider').slick({
dots: false,
arrows: false,
infinite: true,
speed: 300,
centerMode: false,
autoplay: true,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
$('#description-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '#description-slider-nav'
});
$('#description-slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '#description-slider',
dots: false,
arrows: false,
infinite: true,
vertical: true,
centerMode: false,
focusOnSelect: true
});
/*---------------------------------------------------------------------
Select 2 Dropdown
-----------------------------------------------------------------------*/
if (jQuery('select').hasClass('season-select')) {
jQuery('select').select2({
theme: 'bootstrap4',
allowClear: false
});
}
/*---------------------------------------------------------------------
Progress Bar
-----------------------------------------------------------------------*/
jQuery('.iq-progress-bar > span').each(function() {
let progressBar = jQuery(this);
let width = jQuery(this).data('percent');
progressBar.css({
'transition': 'width 2s'
});
setTimeout(function() {
progressBar.appear(function() {
progressBar.css('width', width + '%');
});
}, 100);
});
/*---------------------------------------------------------------------
Page Menu
-----------------------------------------------------------------------*/
jQuery(document).on('click', '.wrapper-menu', function() {
jQuery(this).toggleClass('open');
});
jQuery(document).on('click', ".wrapper-menu", function() {
jQuery("body").toggleClass("sidebar-main");
});
/*---------------------------------------------------------------------
Wow Animation
-----------------------------------------------------------------------*/
let wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: false,
live: true
});
wow.init();
/*---------------------------------------------------------------------
Form Validation
-----------------------------------------------------------------------*/
// Example starter JavaScript for disabling form submissions if there are invalid fields
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
/*---------------------------------------------------------------------
Active Class for Pricing Table
-----------------------------------------------------------------------*/
jQuery("#my-table tr th").click(function () {
jQuery('#my-table tr th').children().removeClass('active');
jQuery(this).children().addClass('active');
jQuery("#my-table td").each(function () {
if (jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active')
}
});
var col = jQuery(this).index();
jQuery("#my-table tr td:nth-child(" + parseInt(col + 1) + ")").addClass('active');
});
/*------------------------------------------------------------------
Flatpicker
* -----------------------------------------------------------------*/
if (jQuery('.date-input').hasClass('basicFlatpickr')) {
jQuery('.basicFlatpickr').flatpickr();
jQuery('#inputTime').flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
jQuery('#inputDatetime').flatpickr({
enableTime: true
});
jQuery('#inputWeek').flatpickr({
weekNumbers: true
});
}
/*---------------------------------------------------------------------
Scroll up menu
-----------------------------------------------------------------------*/
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
// console.log(scroll);
if(scroll < position) {
$('.tab-menu-horizontal').addClass('menu-up');
$('.tab-menu-horizontal').removeClass('menu-down');
}
else {
$('.tab-menu-horizontal').addClass('menu-down');
$('.tab-menu-horizontal').removeClass('menu-up');
}
if(scroll == 0)
{
$('.tab-menu-horizontal').removeClass('menu-up');
$('.tab-menu-horizontal').removeClass('menu-down');
}
position = scroll;
});
/*---------------------------------------------------------------------
checkout
-----------------------------------------------------------------------*/
jQuery(document).ready(function(){
jQuery('#place-order').click(function(){
jQuery('#cart').removeClass('show');
jQuery('#address').addClass('show');
});
jQuery('#deliver-address').click(function(){
jQuery('#address').removeClass('show');
jQuery('#payment').addClass('show');
});
});
/*---------------------------------------------------------------------
Datatables
-----------------------------------------------------------------------*/
if(jQuery('.data-tables').length)
{
$('.data-tables').DataTable();
}
/*---------------------------------------------------------------------
image-upload
-----------------------------------------------------------------------*/
$('.form_gallery-upload').on('change', function() {
var length = $(this).get(0).files.length;
var galleryLabel = $(this).attr('data-name');
if( length > 1 ){
$(galleryLabel).text(length + " files selected");
} else {
$(galleryLabel).text($(this)[0].files[0].name);
}
});
$('.form_trailer-upload').on('change', function() {
var length = $(this).get(0).files.length;
var galleryLabel = $(this).attr('data-name');
if( length > 1 ){
$(galleryLabel).text(length + " files selected");
} else {
$(galleryLabel).text($(this)[0].files[0].name);
}
});
/*---------------------------------------------------------------------
video
-----------------------------------------------------------------------*/
$(document).ready(function(){
$('.form_video-upload input').change(function () {
$('.form_video-upload p').text(this.files.length + " file(s) selected");
});
});
/*---------------------------------------------------------------------
Button
-----------------------------------------------------------------------*/
jQuery('.qty-btn').on('click',function(){
var id = jQuery(this).attr('id');
var val = parseInt(jQuery('#quantity').val());
if(id == 'btn-minus')
{
if(val != 0)
{
jQuery('#quantity').val(val-1);
}
else
{
jQuery('#quantity').val(0);
}
}
else
{
jQuery('#quantity').val(val+1);
}
});
// Função para carregar os itens inicialmente
function loadInitialItems() {
// Aqui você pode carregar os itens iniciais via AJAX
// Vou simular alguns resultados estáticos
$.ajax({
type: "POST",
url: "/video/search",
data: {},
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
"content"
),
},
beforeSend: function () {
$("#searchResults").html(
'Carregando...'
);
},
success: function (response) {
var initialItems = response;
displayItems(initialItems);
},
});
}
// Função para exibir os itens na lista
function displayItems(items) {
var $resultsList = $("#searchResults");
$resultsList.empty();
if (items.length === 0) {
$resultsList.append(
'Nenhum resultado encontrado'
);
} else {
items.forEach(function (item) {
$resultsList.append(
'' +
item.name +
""
);
});
}
}
// Carregar os itens iniciais ao carregar a página
loadInitialItems();
// Lidar com a pesquisa quando o usuário digitar
$("#searchInput").on("input", function () {
var query = $(this).val().trim();
if (query === "") {
loadInitialItems(); // Carregar os itens iniciais se a pesquisa estiver vazia
} else {
// Mostrar "Carregando" enquanto a pesquisa é feita
$("#searchResults").html(
'Carregando...'
);
$.ajax({
type: "POST",
url: "/video/search",
data: {
searchVideo: query,
},
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
"content"
),
},
beforeSend: function () {
$("#searchResults").html(
'Carregando...'
);
},
success: function (response) {
var initialItems = response;
displayItems(initialItems);
},
});
}
});
// Lidar com o botão de limpar pesquisa
$("#clearBtn").click(function () {
$("#searchInput").val(""); // Limpar o campo de pesquisa
loadInitialItems(); // Carregar os itens iniciais
$("#searchResults").removeClass("show"); // Fechar a lista de resultados
});
// Lidar com a seleção de itens
$("#searchResults").on("click", ".list-group-item", function () {
$(this).toggleClass("active").siblings().removeClass("active");
$("#video_id").val($(this).data("value"));
$("#searchInput").val($(this).text()); // Inserir o valor do item no campo de pesquisa
$("#searchResults").removeClass("show"); // Fechar a lista de resultados
});
// Lidar com o efeito dropdown ao clicar no campo de pesquisa
$("#searchInput").click(function () {
$("#searchResults").toggleClass("show");
});
// Fechar a lista de resultados quando clicar fora dela ou quando o campo de pesquisa perder o foco
$(document).click(function (event) {
if (
!$(event.target).closest("#searchInput").length &&
!$(event.target).closest("#searchResults").length
) {
$("#searchResults").removeClass("show");
}
});
});
})(jQuery);