1 | 'use strict';
|
---|
2 |
|
---|
3 | (function ($) {
|
---|
4 |
|
---|
5 | $(document).on('click', '.layout-builder .layout-builder-toggle', function () {
|
---|
6 | $('.layout-builder').toggleClass('show');
|
---|
7 | });
|
---|
8 |
|
---|
9 | $(window).on('load', function () {
|
---|
10 | setTimeout(function () {
|
---|
11 | $('.layout-builder').removeClass('show');
|
---|
12 | }, 500);
|
---|
13 | });
|
---|
14 |
|
---|
15 | $('.body').append(`
|
---|
16 | <div class="layout-builder show">
|
---|
17 | <div class="layout-builder-toggle shw">
|
---|
18 | <i class="ti-settings"></i>
|
---|
19 | </div>
|
---|
20 | <div class="layout-builder-toggle hdn">
|
---|
21 | <i class="ti-close"></i>
|
---|
22 | </div>
|
---|
23 | <div class="layout-builder-body">
|
---|
24 | <h5>Customizer</h5>
|
---|
25 | <div class="mb-3">
|
---|
26 | <p>Layout</p>
|
---|
27 | <div class="custom-control custom-radio">
|
---|
28 | <input type="radio" class="custom-control-input" name="layout" id="horizontal-side-menu" data-layout="horizontal-side-menu">
|
---|
29 | <label class="custom-control-label" for="horizontal-side-menu">Horizontal Menu</label>
|
---|
30 | </div>
|
---|
31 | <div class="custom-control custom-radio">
|
---|
32 | <input type="radio" class="custom-control-input" name="layout" id="icon-side-menu" data-layout="icon-side-menu">
|
---|
33 | <label class="custom-control-label" for="icon-side-menu">Icon Menu</label>
|
---|
34 | </div>
|
---|
35 | <div class="custom-control custom-radio">
|
---|
36 | <input type="radio" class="custom-control-input" name="layout" id="hidden-side-menu" data-layout="hidden-side-menu">
|
---|
37 | <label class="custom-control-label" for="hidden-side-menu">Hidden Menu</label>
|
---|
38 | </div>
|
---|
39 | <div class="custom-control custom-radio">
|
---|
40 | <input type="radio" class="custom-control-input" name="layout" id="layout-container-1" data-layout="layout-container icon-side-menu">
|
---|
41 | <label class="custom-control-label" for="layout-container-1">Container Layout 1</label>
|
---|
42 | </div>
|
---|
43 | <div class="custom-control custom-radio">
|
---|
44 | <input type="radio" class="custom-control-input" name="layout" id="layout-container-2" data-layout="layout-container horizontal-side-menu">
|
---|
45 | <label class="custom-control-label" for="layout-container-2">Container Layout 2</label>
|
---|
46 | </div>
|
---|
47 | <div class="custom-control custom-radio">
|
---|
48 | <input type="radio" class="custom-control-input" name="layout" id="layout-container-3" data-layout="layout-container hidden-side-menu">
|
---|
49 | <label class="custom-control-label" for="layout-container-3">Container Layout 3</label>
|
---|
50 | </div>
|
---|
51 | <div class="custom-control custom-radio">
|
---|
52 | <input type="radio" class="custom-control-input" name="layout" id="dark-1" data-layout="dark">
|
---|
53 | <label class="custom-control-label" for="dark-1">Dark Layout 1</label>
|
---|
54 | </div>
|
---|
55 | <div class="custom-control custom-radio">
|
---|
56 | <input type="radio" class="custom-control-input" name="layout" id="dark-2" data-layout="layout-container dark icon-side-menu">
|
---|
57 | <label class="custom-control-label" for="dark-2">Dark Layout 2</label>
|
---|
58 | </div>
|
---|
59 | <div class="custom-control custom-radio">
|
---|
60 | <input type="radio" class="custom-control-input" name="layout" id="dark-3" data-layout="layout-container dark horizontal-side-menu">
|
---|
61 | <label class="custom-control-label" for="dark-3">Dark Layout 3</label>
|
---|
62 | </div>
|
---|
63 | <div class="custom-control custom-radio">
|
---|
64 | <input type="radio" class="custom-control-input" name="layout" id="dark-4" data-layout="layout-container dark hidden-side-menu">
|
---|
65 | <label class="custom-control-label" for="dark-4">Dark Layout 4</label>
|
---|
66 | </div>
|
---|
67 | </div>
|
---|
68 | <button id="btn-layout-builder-reset" class="btn btn-danger btn-uppercase">Reset</button>
|
---|
69 | <div class="layout-alert mt-3">
|
---|
70 | <i class="fa fa-warning m-r-5 text-warning"></i>Some theme options can not be displayed in case of combined when they are not relevant each other. For that reason, you are adviced to try all theme options seperately.
|
---|
71 | </div>
|
---|
72 | </div>
|
---|
73 | </div>`);
|
---|
74 |
|
---|
75 | var site_layout = localStorage.getItem('site_layout');
|
---|
76 | $('body').addClass(site_layout);
|
---|
77 |
|
---|
78 | $('.layout-builder .layout-builder-body input[type="radio"][data-layout="' + $('body').attr('class') + '"]').prop('checked', true);
|
---|
79 |
|
---|
80 | $('.layout-builder .layout-builder-body input[type="radio"]').click(function () {
|
---|
81 | var class_names = '';
|
---|
82 |
|
---|
83 | $('.layout-builder .layout-builder-body input[type="radio"]:checked').each(function () {
|
---|
84 | class_names += ' ' + $(this).data('layout');
|
---|
85 | });
|
---|
86 |
|
---|
87 | localStorage.setItem('site_layout', class_names);
|
---|
88 |
|
---|
89 | window.location.href = (window.location.href).replace('#', '');
|
---|
90 | });
|
---|
91 |
|
---|
92 | $(document).on('click', '#btn-layout-builder', function () {
|
---|
93 |
|
---|
94 | });
|
---|
95 |
|
---|
96 | $(document).on('click', '#btn-layout-builder-reset', function () {
|
---|
97 | localStorage.removeItem('site_layout');
|
---|
98 | localStorage.removeItem('site_layout_dark');
|
---|
99 |
|
---|
100 | window.location.href = (window.location.href).replace('#', '');
|
---|
101 | });
|
---|
102 |
|
---|
103 | $(window).on('load', function () {
|
---|
104 | if ($('body').hasClass('horizontal-side-menu') && $(window).width() > 768) {
|
---|
105 | if ($('body').hasClass('layout-container')) {
|
---|
106 | $('.side-menu .side-menu-body').wrap('<div class="container"></div>');
|
---|
107 | } else {
|
---|
108 | $('.side-menu .side-menu-body').wrap('<div class="container"></div>');
|
---|
109 | }
|
---|
110 | setTimeout(function () {
|
---|
111 | $('.side-menu .side-menu-body > ul').append('<li><a href="#"><span>Other</span></a><ul></ul></li>');
|
---|
112 | }, 100);
|
---|
113 | $('.side-menu .side-menu-body > ul > li').each(function () {
|
---|
114 | var index = $(this).index(),
|
---|
115 | $this = $(this);
|
---|
116 | if (index > 7) {
|
---|
117 | setTimeout(function () {
|
---|
118 | $('.side-menu .side-menu-body > ul > li:last-child > ul').append($this.clone());
|
---|
119 | $this.addClass('d-none');
|
---|
120 | }, 100);
|
---|
121 | }
|
---|
122 | });
|
---|
123 | }
|
---|
124 | });
|
---|
125 |
|
---|
126 | $(document).on('click', '[data-attr="layout-builder-toggle"]', function () {
|
---|
127 | $('.layout-builder').toggleClass('show');
|
---|
128 | return false;
|
---|
129 | });
|
---|
130 |
|
---|
131 | })(jQuery); |
---|