[7304c7f] | 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); |
---|