customize.html

{% include ui/modal/header.html title="Customize Tabler" %}

<div class="modal-body">
	<p class="text-muted">Set preferences that will be saved for your live preview.</p>

	<div class="mb-3">
		<label class="form-label">Color scheme</label>
		<div class="form-hint">Light or dark presentation.</div>

		<div class="btn-group w-100">
			<button class="btn btn-secondary" data-theme-toggle="theme:light">{% include ui/icon.html icon="sun" %} Light</button>
			<button class="btn btn-secondary" data-theme-toggle="theme:dark">{% include ui/icon.html icon="moon" %} Dark</button>
		</div>
	</div>

	<div class="mb-4 text-muted">
		You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
	</div>

	<div class="mb-3">
		<label class="form-label">Navigation position</label>
		<div class="form-hint">Choose where the main navigation in your project should be located.</div>

		<div class="btn-group w-100">
			<button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
			<button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
			<button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
		</div>
	</div>

	<div class="mb-3">
		<label class="form-label">Sidebar size</label>
		<div class="form-hint">Standard sidebar width or narrow version with icons only.</div>

		<div class="btn-group w-100">
			<button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
			<button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
		</div>
	</div>

	<div class="mb-3">
		<label class="form-label">Sidebar position</label>
		<div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>

		<div class="btn-group w-100">
			<button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
			<button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
		</div>
	</div>

	<div>
		<label class="form-label">Navigation color</label>
		<div class="form-hint">Light or dark version of the sidebar </div>

		<div class="btn-group w-100">
			<button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
			<button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
		</div>
	</div>
</div>

{% capture_global scripts %}
<script>
	(function() {
		var navbarPrimary = document.getElementById('navbar-primary'),
			navbarSecondary = document.getElementById('navbar-secondary');

		var defaults = {
			theme: 'light',
			'navbar-position': 'horizontal',
			'navbar-size': 'wide',
			'navbar-side': 'left',
			'navbar-color': 'light',
		};

		var eventsClean = {
			'theme': function () {
				document.body.classList.remove('theme-dark');
			},
			'navbar-position': function () {
				navbarPrimary.classList.remove('navbar-vertical');
				navbarSecondary.classList.remove('d-none');
			},
			'navbar-size': function () {
				navbarPrimary.classList.remove('navbar-vertical-narrow');
			},
			'navbar-side': function () {
				navbarPrimary.classList.remove('navbar-right');
			},
			'navbar-color': function () {
				navbarPrimary.classList.remove('navbar-dark');
				navbarPrimary.classList.add('navbar-light');
			},
		};

		var events = {
			'theme:light': function () {
			},
			'theme:dark': function () {
				document.body.classList.add('theme-dark');
			},

			'navbar-position:vertical': function () {
				navbarPrimary.classList.add('navbar-vertical');
				navbarSecondary.classList.add('d-none');
			},
			'navbar-position:horizontal': function () {
			},
			'navbar-position:both': function () {
				navbarPrimary.classList.add('navbar-vertical');
			},

			'navbar-size:wide': function () {
			},
			'navbar-size:narrow': function () {
				navbarPrimary.classList.add('navbar-vertical-narrow');
			},

			'navbar-side:left': function () {
			},
			'navbar-side:right': function () {
				navbarPrimary.classList.add('navbar-right');
			},

			'navbar-color:light': function () {
			},
			'navbar-color:dark': function () {
				navbarPrimary.classList.add('navbar-dark');
				navbarPrimary.classList.remove('navbar-light');
			},

		};

		var updateThemeConfig = function (name) {
			var key, value;

			if (name) {
				[key, value] = name.split(':');
				setConfig(key, value);
			}

			applyConfig();
		};

		var disableTransitions = function () {
			document.body.classList.add('no-transitions');

			setTimeout(function () {
				document.body.classList.remove('no-transitions');
			}, 300);
		};

		var getConfig = function () {
			var config = {};

			for (var key in defaults) {
				config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
			}

			return config;
		};

		var setConfig = function (key, value) {
			localStorage.setItem('tabler-' + key, value);
		};

		var applyConfig = function () {
			disableTransitions();

			var config = getConfig();
			
			for (var key in config) {
				var value = config[key];

				eventsClean[key] && eventsClean[key].call();
				events[key + ':' + value] && events[key + ':' + value].call();

				([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
					activeTrigger.classList.remove('active')
				});

				document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
			}
		};

		applyConfig();

		for (var name in events) {
			var event = events[name];

			(function (event, name) {
				document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
					updateThemeConfig(name);
					event.call();

					e.preventDefault();
					return false;
				});
			})(event, name);
		}
	})();
</script>
{% endcapture_global %}