494 lines
23 KiB
JavaScript
494 lines
23 KiB
JavaScript
if (localStorage.getItem("color"))
|
|
$("#color").attr("href", "./assets/css/" + localStorage.getItem("color") + ".css");
|
|
if (localStorage.getItem("dark"))
|
|
$("body").attr("class", "dark-only");
|
|
let div = `<div class="customizer-contain">
|
|
<div class="tab-content" id="c-pills-tabContent">
|
|
<div class="customizer-header"><i class="icofont-close icon-close"></i><h5>Preview Settings</h5>
|
|
<p class="mb-0">Try It Real Time <i class="fa fa-thumbs-o-up txt-primary"></i></p></div>
|
|
<div class="customizer-body custom-scrollbar">
|
|
<div class="tab-pane fade show active" id="c-pills-home" role="tabpanel" aria-labelledby="c-pills-home-tab">
|
|
<h6>Layout Type</h6>
|
|
<ul class="main-layout layout-grid">
|
|
<li data-attr="ltr" class="active">
|
|
<div class="header bg-light">
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="body">
|
|
<ul>
|
|
<li class="bg-light sidebar"></li>
|
|
<li class="bg-light body"><span class="badge badge-primary">LTR</span></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li data-attr="rtl">
|
|
<div class="header bg-light">
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="body">
|
|
<ul>
|
|
<li class="bg-light body"><span class="badge badge-primary">RTL</span></li>
|
|
<li class="bg-light sidebar"></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li data-attr="ltr" class="box-layout px-3">
|
|
<div class="header bg-light">
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="body">
|
|
<ul>
|
|
<li class="bg-light sidebar"></li>
|
|
<li class="bg-light body"><span class="badge badge-primary">Box</span></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<h6 class="">Sidebar Type</h6>
|
|
<ul class="sidebar-type layout-grid">
|
|
<li data-attr="normal-sidebar">
|
|
<div class="header bg-light">
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="body">
|
|
<ul>
|
|
<li class="bg-dark sidebar"></li>
|
|
<li class="bg-light body"></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li data-attr="compact-sidebar">
|
|
<div class="header bg-light">
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="body">
|
|
<ul>
|
|
<li class="bg-dark sidebar compact"></li>
|
|
<li class="bg-light body"></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<h6 class="">Sidebar settings</h6>
|
|
<ul class="sidebar-setting layout-grid">
|
|
<li class="active" data-attr="default-sidebar">
|
|
<div class="header bg-light">
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="body bg-light"><span class="badge badge-primary">Dubai</span></div>
|
|
</li>
|
|
<li data-attr="border-sidebar">
|
|
<div class="header bg-light">
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="body bg-light"><span class="badge badge-primary">Border</span></div>
|
|
</li>
|
|
<li data-attr="iconcolor-sidebar">
|
|
<div class="header bg-light">
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="body bg-light"><span class="badge badge-primary">icon Color</span></div>
|
|
</li>
|
|
</ul>
|
|
<h6 class="">Unlimited Color</h6>
|
|
<ul class="layout-grid unlimited-color-layout">
|
|
<input id="ColorPicker1" type="color" value="#7366ff" name="Background"/>
|
|
<input id="ColorPicker2" type="color" value="#f73164" name="Background"/>
|
|
<button type="button" class="color-apply-btn btn btn-primary color-apply-btn">Apply</button>
|
|
</ul>
|
|
<h6>Light layout</h6>
|
|
<ul class="layout-grid customizer-color">
|
|
<li class="color-layout" data-attr="color-1" data-primary="#7366ff" data-secondary="#f73164">
|
|
<div></div>
|
|
</li>
|
|
<li class="color-layout" data-attr="color-2" data-primary="#4831D4" data-secondary="#ea2087">
|
|
<div></div>
|
|
</li>
|
|
<li class="color-layout" data-attr="color-3" data-primary="#d64dcf" data-secondary="#8e24aa">
|
|
<div></div>
|
|
</li>
|
|
<li class="color-layout" data-attr="color-4" data-primary="#4c2fbf" data-secondary="#2e9de4">
|
|
<div></div>
|
|
</li>
|
|
<li class="color-layout" data-attr="color-5" data-primary="#7c4dff" data-secondary="#7b1fa2">
|
|
<div></div>
|
|
</li>
|
|
<li class="color-layout" data-attr="color-6" data-primary="#3949ab" data-secondary="#4fc3f7">
|
|
<div></div>
|
|
</li>
|
|
</ul>
|
|
<h6 class="">Dark Layout</h6>
|
|
<ul class="layout-grid customizer-color dark">
|
|
<li class="color-layout" data-attr="color-1" data-primary="#4466f2" data-secondary="#1ea6ec">
|
|
<div></div>
|
|
</li>
|
|
<li class="color-layout" data-attr="color-2" data-primary="#4831D4" data-secondary="#ea2087">
|
|
<div></div>
|
|
</li>
|
|
<li class="color-layout" data-attr="color-3" data-primary="#d64dcf" data-secondary="#8e24aa">
|
|
<div></div>
|
|
</li>
|
|
<li class="color-layout" data-attr="color-4" data-primary="#4c2fbf" data-secondary="#2e9de4">
|
|
<div></div>
|
|
</li>
|
|
<li class="color-layout" data-attr="color-5" data-primary="#7c4dff" data-secondary="#7b1fa2">
|
|
<div></div>
|
|
</li>
|
|
<li class="color-layout" data-attr="color-6" data-primary="#3949ab" data-secondary="#4fc3f7">
|
|
<div></div>
|
|
</li>
|
|
</ul>
|
|
<h6 class="">Mix Layout</h6>
|
|
<ul class="layout-grid customizer-mix">
|
|
<li class="color-layout active" data-attr="light-only">
|
|
<div class="header bg-light">
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="body">
|
|
<ul>
|
|
<li class="bg-light sidebar"></li>
|
|
<li class="bg-light body"></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="color-layout" data-attr="dark-sidebar">
|
|
<div class="header bg-light">
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="body">
|
|
<ul>
|
|
<li class="bg-dark sidebar"></li>
|
|
<li class="bg-light body"></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="color-layout" data-attr="dark-only">
|
|
<div class="header bg-dark">
|
|
<ul>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="body">
|
|
<ul>
|
|
<li class="bg-dark sidebar"></li>
|
|
<li class="bg-dark body"></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- <div class="tab-pane fade" id="c-pills-layouts" role="tabpanel" aria-labelledby="c-pills-layouts-tab">-->
|
|
<!-- <ul class="sidebar-type layout-grid layout-types">-->
|
|
<!-- <li data-attr="compact-sidebar">-->
|
|
<!-- <div class="layout-img">-->
|
|
<!-- <a href="javascript:void(0)"><img src="./assets/images/landing/layout-images/dubai.jpg" class="img-fluid" alt=""/></a>-->
|
|
<!-- <h6>Dubai</h6></div>-->
|
|
<!-- </li>-->
|
|
<!-- <li data-attr="material-layout">-->
|
|
<!-- <div class="layout-img">-->
|
|
<!-- <a href="javascript:void(0)"><img src="./assets/images/landing/layout-images/los.jpg" class="img-fluid" alt=""/></a>-->
|
|
<!-- <h6>Los Angeles</h6></div>-->
|
|
<!-- </li>-->
|
|
<!-- <li data-attr="dark-sidebar">-->
|
|
<!-- <div class="layout-img">-->
|
|
<!-- <a href="javascript:void(0)"><img src="./assets/images/landing/layout-images/paris.jpg" class="img-fluid" alt=""/></a>-->
|
|
<!-- <h6>Paris</h6></div>-->
|
|
<!-- </li>-->
|
|
<!-- <li data-attr="compact-wrap">-->
|
|
<!-- <div class="layout-img">-->
|
|
<!-- <a href="javascript:void(0)"><img src="./assets/images/landing/layout-images/tokyo.jpg" class="img-fluid" alt=""/></a>-->
|
|
<!-- <h6>Tokyo</h6></div>-->
|
|
<!-- </li>-->
|
|
<!-- <li data-attr="compact-small">-->
|
|
<!-- <div class="layout-img">-->
|
|
<!-- <a href="javascript:void(0)"><img src="./assets/images/landing/layout-images/moscow.jpg" class="img-fluid" alt=""/></a>-->
|
|
<!-- <h6>Moscow</h6></div>-->
|
|
<!-- </li>-->
|
|
<!-- <li data-attr="enterprice-type">-->
|
|
<!-- <div class="layout-img">-->
|
|
<!-- <a href="javascript:void(0)"><img src="./assets/images/landing/layout-images/singapore.jpg" class="img-fluid" alt=""/></a>-->
|
|
<!-- <h6>Singapore</h6></div>-->
|
|
<!-- </li>-->
|
|
<!-- <li data-attr="box-layout" class="box-layout">-->
|
|
<!-- <div class="layout-img">-->
|
|
<!-- <a href="javascript:void(0)"><img src="./assets/images/landing/layout-images/newyork.jpg" class="img-fluid" alt=""/></a>-->
|
|
<!-- <h6>New York</h6></div>-->
|
|
<!-- </li>-->
|
|
<!-- <li data-attr="advance-type">-->
|
|
<!-- <div class="layout-img">-->
|
|
<!-- <a href="javascript:void(0)"><img src="./assets/images/landing/layout-images/barc.jpg" class="img-fluid" alt=""/></a>-->
|
|
<!-- <h6>Barcelona</h6></div>-->
|
|
<!-- </li>-->
|
|
<!-- <li data-attr="color-sidebar">-->
|
|
<!-- <div class="layout-img">-->
|
|
<!-- <a href="javascript:void(0)"><img src="./assets/images/landing/layout-images/madrid.jpg" class="img-fluid" alt=""/></a>-->
|
|
<!-- <h6>Madrid</h6></div>-->
|
|
<!-- </li>-->
|
|
<!-- <li data-attr="material-icon">-->
|
|
<!-- <div class="layout-img">-->
|
|
<!-- <a href="javascript:void(0)"><img src="./assets/images/landing/layout-images/romo.jpg" class="img-fluid" alt=""/></a>-->
|
|
<!-- <h6>Rome</h6></div>-->
|
|
<!-- </li>-->
|
|
<!-- <li data-attr="modern-layout">-->
|
|
<!-- <div class="layout-img">-->
|
|
<!-- <a href="javascript:void(0)"><img src="./assets/images/landing/layout-images/seoul.jpg" class="img-fluid" alt=""/></a>-->
|
|
<!-- <h6>Seoul</h6></div>-->
|
|
<!-- </li>-->
|
|
<!-- <li class="only-body" data-attr="default-body">-->
|
|
<!-- <div class="layout-img">-->
|
|
<!-- <a href="javascript:void(0)"><img src="./assets/images/landing/layout-images/london.jpg" class="img-fluid" alt=""/></a>-->
|
|
<!-- <h6>London</h6></div>-->
|
|
<!-- </li>-->
|
|
<!-- </ul>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
$(div).appendTo($('body'));
|
|
(function () { })();
|
|
//live customizer js
|
|
$(document).ready(function () {
|
|
|
|
$(".customizer-color li").on('click', function () {
|
|
$(".customizer-color li").removeClass('active');
|
|
$(this).addClass("active");
|
|
var color = $(this).attr("data-attr");
|
|
var primary = $(this).attr("data-primary");
|
|
var secondary = $(this).attr("data-secondary");
|
|
localStorage.setItem("color", color);
|
|
localStorage.setItem("primary", primary);
|
|
localStorage.setItem("secondary", secondary);
|
|
localStorage.removeItem("dark");
|
|
$("#color").attr("href", "./assets/css/" + color + ".css");
|
|
$(".dark-only").removeClass('dark-only');
|
|
location.reload(true);
|
|
});
|
|
|
|
$(".customizer-color.dark li").on('click', function () {
|
|
$(".customizer-color.dark li").removeClass('active');
|
|
$(this).addClass("active");
|
|
$("body").attr("class", "dark-only");
|
|
localStorage.setItem("dark", "dark-only");
|
|
});
|
|
|
|
|
|
|
|
if (localStorage.getItem("primary") != null) {
|
|
document.documentElement.style.setProperty('--theme-deafult', localStorage.getItem("primary"));
|
|
}
|
|
if (localStorage.getItem("secondary") != null) {
|
|
document.documentElement.style.setProperty('--theme-secondary', localStorage.getItem("secondary"));
|
|
}
|
|
$(".customizer-links #c-pills-home-tab, .customizer-links #c-pills-layouts-tab").click(function () {
|
|
$(".customizer-contain").addClass("open");
|
|
$(".customizer-links").addClass("open");
|
|
});
|
|
|
|
$(".close-customizer-btn").on('click', function () {
|
|
$(".floated-customizer-panel").removeClass("active");
|
|
});
|
|
|
|
$(".customizer-contain .icon-close").on('click', function () {
|
|
$(".customizer-contain").removeClass("open");
|
|
$(".customizer-links").removeClass("open");
|
|
});
|
|
|
|
$(".color-apply-btn").click(function () {
|
|
location.reload(true);
|
|
});
|
|
|
|
var primary = document.getElementById("ColorPicker1").value;
|
|
document.getElementById("ColorPicker1").onchange = function () {
|
|
primary = this.value;
|
|
localStorage.setItem("primary", primary);
|
|
document.documentElement.style.setProperty('--theme-primary', primary);
|
|
};
|
|
|
|
var secondary = document.getElementById("ColorPicker2").value;
|
|
document.getElementById("ColorPicker2").onchange = function () {
|
|
secondary = this.value;
|
|
localStorage.setItem("secondary", secondary);
|
|
document.documentElement.style.setProperty('--theme-secondary', secondary);
|
|
};
|
|
|
|
|
|
$(".customizer-color.dark li").on('click', function () {
|
|
$(".customizer-color.dark li").removeClass('active');
|
|
$(this).addClass("active");
|
|
$("body").attr("class", "dark-only");
|
|
localStorage.setItem("dark", "dark-only");
|
|
});
|
|
|
|
|
|
$(".customizer-mix li").on('click', function () {
|
|
$(".customizer-mix li").removeClass('active');
|
|
$(this).addClass("active");
|
|
var mixLayout = $(this).attr("data-attr");
|
|
$("body").attr("class", mixLayout);
|
|
});
|
|
|
|
|
|
$('.sidebar-setting li').on('click', function () {
|
|
$(".sidebar-setting li").removeClass('active');
|
|
$(this).addClass("active");
|
|
var sidebar = $(this).attr("data-attr");
|
|
$(".sidebar-wrapper").attr("sidebar-layout", sidebar);
|
|
});
|
|
|
|
$('.sidebar-main-bg-setting li').on('click', function () {
|
|
$(".sidebar-main-bg-setting li").removeClass('active')
|
|
$(this).addClass("active")
|
|
var bg = $(this).attr("data-attr");
|
|
$(".sidebar-wrapper").attr("class", "sidebar-wrapper " + bg);
|
|
});
|
|
|
|
$('.sidebar-type li').on('click', function () {
|
|
|
|
$("body").append('');
|
|
console.log("test");
|
|
var type = $(this).attr("data-attr");
|
|
|
|
var boxed = "";
|
|
if ($(".page-wrapper").hasClass("box-layout")) {
|
|
boxed = "box-layout";
|
|
}
|
|
switch (type) {
|
|
case 'compact-sidebar': {
|
|
$(".page-wrapper").attr("class", "page-wrapper compact-wrapper " + boxed);
|
|
$(this).addClass("active");
|
|
localStorage.setItem('page-wrapper', 'compact-wrapper');
|
|
break;
|
|
}
|
|
case 'normal-sidebar': {
|
|
$(".page-wrapper").attr("class", "page-wrapper horizontal-wrapper " + boxed);
|
|
$(".logo-wrapper").find('img').attr('src', '../assets/images/logo/logo.png');
|
|
localStorage.setItem('page-wrapper', 'horizontal-wrapper');
|
|
break;
|
|
}
|
|
case 'default-body': {
|
|
$(".page-wrapper").attr("class", "page-wrapper only-body" + boxed);
|
|
localStorage.setItem('page-wrapper', 'only-body');
|
|
break;
|
|
}
|
|
case 'dark-sidebar': {
|
|
$(".page-wrapper").attr("class", "page-wrapper compact-wrapper dark-sidebar" + boxed);
|
|
localStorage.setItem('page-wrapper', 'compact-wrapper dark-sidebar');
|
|
break;
|
|
}
|
|
case 'compact-wrap': {
|
|
$(".page-wrapper").attr("class", "page-wrapper compact-sidebar" + boxed);
|
|
localStorage.setItem('page-wrapper', 'compact-sidebar');
|
|
break;
|
|
}
|
|
case 'color-sidebar': {
|
|
$(".page-wrapper").attr("class", "page-wrapper compact-wrapper color-sidebar" + boxed);
|
|
localStorage.setItem('page-wrapper', 'compact-wrapper color-sidebar');
|
|
break;
|
|
}
|
|
case 'compact-small': {
|
|
$(".page-wrapper").attr("class", "page-wrapper compact-sidebar compact-small" + boxed);
|
|
localStorage.setItem('page-wrapper', 'compact-sidebar compact-small');
|
|
break;
|
|
}
|
|
case 'box-layout': {
|
|
$(".page-wrapper").attr("class", "page-wrapper compact-wrapper box-layout " + boxed);
|
|
localStorage.setItem('page-wrapper', 'compact-wrapper box-layout');
|
|
break;
|
|
}
|
|
case 'enterprice-type': {
|
|
$(".page-wrapper").attr("class", "page-wrapper horizontal-wrapper enterprice-type" + boxed);
|
|
localStorage.setItem('page-wrapper', 'horizontal-wrapper enterprice-type');
|
|
break;
|
|
}
|
|
case 'modern-layout': {
|
|
$(".page-wrapper").attr("class", "page-wrapper compact-wrapper modern-type" + boxed);
|
|
localStorage.setItem('page-wrapper', 'compact-wrapper modern-type');
|
|
break;
|
|
}
|
|
case 'material-layout': {
|
|
$(".page-wrapper").attr("class", "page-wrapper horizontal-wrapper material-type" + boxed);
|
|
localStorage.setItem('page-wrapper', 'horizontal-wrapper material-type');
|
|
|
|
break;
|
|
}
|
|
case 'material-icon': {
|
|
$(".page-wrapper").attr("class", "page-wrapper compact-sidebar compact-small material-icon" + boxed);
|
|
localStorage.setItem('page-wrapper', 'compact-sidebar compact-small material-icon');
|
|
|
|
break;
|
|
}
|
|
case 'advance-type': {
|
|
$(".page-wrapper").attr("class", "page-wrapper horizontal-wrapper enterprice-type advance-layout" + boxed);
|
|
localStorage.setItem('page-wrapper', 'horizontal-wrapper enterprice-type advance-layout');
|
|
|
|
break;
|
|
}
|
|
default: {
|
|
$(".page-wrapper").attr("class", "page-wrapper compact-wrapper " + boxed);
|
|
localStorage.setItem('page-wrapper', 'compact-wrapper');
|
|
break;
|
|
}
|
|
}
|
|
// $(this).addClass("active");
|
|
location.reload(true);
|
|
});
|
|
|
|
$('.main-layout li').on('click', function () {
|
|
$(".main-layout li").removeClass('active');
|
|
$(this).addClass("active");
|
|
var layout = $(this).attr("data-attr");
|
|
$("body").attr("class", layout);
|
|
$("html").attr("dir", layout);
|
|
});
|
|
|
|
$('.main-layout .box-layout').on('click', function () {
|
|
$(".main-layout .box-layout").removeClass('active');
|
|
$(this).addClass("active");
|
|
var layout = $(this).attr("data-attr");
|
|
$("body").attr("class", "box-layout");
|
|
$("html").attr("dir", layout);
|
|
});
|
|
|
|
}); |