<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<?php init_head(); ?>
<?php $tags = get_styling_areas('tags'); ?>
<div id="wrapper">
<div class="content">
<div class="tw-max-w-4xl tw-mx-auto">
<div class="tw-mb-2 tw-flex tw-justify-between">
<h4 class="tw-my-0 tw-font-bold tw-text-lg tw-text-neutral-700">
<?= _l('theme_style'); ?>
</h4>
<a href="<?= admin_url('theme_style/reset'); ?>"
data-toggle="tooltip"
data-title="<?= _l('theme_style_reset_info'); ?>"
class="btn btn-default">
<?= _l('reset'); ?>
</a>
</div>
<div class="horizontal-scrollable-tabs picker">
<div class="scroller arrow-left"><i class="fa fa-angle-left"></i></div>
<div class="scroller arrow-right"><i class="fa fa-angle-right"></i></div>
<div class="horizontal-tabs">
<ul class="nav nav-tabs nav-tabs-horizontal nav-tabs-segmented tw-mb-3" role="tablist"
id="theme_styling_areas">
<li role="presentation" class="active">
<a href="#tab_admin_styling" aria-controls="tab_admin_styling" role="tab" data-toggle="tab">
<?= _l('theme_style_admin'); ?>
</a>
</li>
<li role="presentation">
<a href="#tab_customers_styling" aria-controls="tab_customers_styling" role="tab"
data-toggle="tab">
<?= _l('theme_style_customers'); ?>
</a>
</li>
<li role="presentation">
<a href="#tab_buttons_styling" aria-controls="tab_buttons_styling" role="tab"
data-toggle="tab">
<?= _l('theme_style_buttons'); ?>
</a>
</li>
<li role="presentation">
<a href="#tab_modals_styling" aria-controls="tab_modals_styling" role="tab"
data-toggle="tab">
<?= _l('theme_style_modals'); ?>
</a>
</li>
<li role="presentation">
<a href="#tab_tables" aria-controls="tab_tables" role="tab" data-toggle="tab">
<?= _l('theme_style_tables'); ?>
</a>
</li>
<li role="presentation">
<a href="#tab_general_styling" aria-controls="tab_general_styling" role="tab"
data-toggle="tab">
<?= _l('theme_style_general'); ?>
</a>
</li>
<?php if (count($tags) > 0) { ?>
<li role="presentation">
<a href="#tab_styling_tags" aria-controls="tab_styling_tags" role="tab" data-toggle="tab">
<?= _l('tags'); ?>
</a>
</li>
<?php } ?>
<li role="presentation">
<a href="#tab_custom_css" aria-controls="tab_custom_css" role="tab" data-toggle="tab">
<?= _l('theme_style_custom_css'); ?>
</a>
</li>
</ul>
</div>
</div>
<div class="panel_s">
<div class="panel-body pickers">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab_admin_styling">
<div class="row">
<div class="col-md-12">
<?php
foreach (get_styling_areas('admin') as $area) { ?>
<label
class="bold mbot10 inline-block"><?= $area['name']; ?></label>
<?php render_theme_styling_picker(
$area['id'],
get_custom_style_values('admin', $area['id']),
$area['target'],
$area['css'],
$area['additional_selectors']
);
?>
<hr />
<?php } ?>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab_customers_styling">
<div class="row">
<div class="col-md-12">
<?php foreach (get_styling_areas('customers') as $area) { ?>
<label
class="bold mbot10 inline-block"><?= $area['name']; ?></label>
<?php render_theme_styling_picker(
$area['id'],
get_custom_style_values('customers', $area['id']),
$area['target'],
$area['css'],
$area['additional_selectors']
);
?>
<hr />
<?php } ?>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab_buttons_styling">
<div class="row">
<div class="col-md-12">
<?php foreach (get_styling_areas('buttons') as $area) { ?>
<label
class="bold mbot10 inline-block"><?= $area['name']; ?></label>
<?php render_theme_styling_picker(
$area['id'],
get_custom_style_values('buttons', $area['id']),
$area['target'],
$area['css'],
$area['additional_selectors']
);
?>
<?php if (isset($area['example'])) {
echo $area['example'];
} ?>
<div class="clearfix"></div>
<hr />
<?php } ?>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab_modals_styling">
<div class="row">
<div class="col-md-12">
<?php foreach (get_styling_areas('modals') as $area) { ?>
<label
class="bold mbot10 inline-block"><?= $area['name']; ?></label>
<?php render_theme_styling_picker(
$area['id'],
get_custom_style_values('modals', $area['id']),
$area['target'],
$area['css'],
$area['additional_selectors']
);
?>
<hr />
<?php } ?>
<div class="modal-content theme_style_modal_example">
<div class="modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">
<?= _l('theme_style_example_modal_heading'); ?>
</h4>
<span><?= _l('theme_style_sample_text'); ?></span>
</div>
<div class="modal-body">
<?= _l('theme_style_modal_body'); ?>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab_tables">
<div class="row">
<div class="col-md-12">
<?php foreach (get_styling_areas('tables') as $area) { ?>
<label
class="bold mbot10 inline-block"><?= $area['name']; ?></label>
<?php render_theme_styling_picker(
$area['id'],
get_custom_style_values('tables', $area['id']),
$area['target'],
$area['css'],
$area['additional_selectors']
);
?>
<?php if (isset($area['example'])) {
echo $area['example'];
} ?>
<hr />
<?php } ?>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab_general_styling">
<div class="row">
<div class="col-md-12">
<?php foreach (get_styling_areas('general') as $area) { ?>
<label
class="bold mbot10 inline-block"><?= $area['name']; ?></label>
<?php render_theme_styling_picker(
$area['id'],
get_custom_style_values('general', $area['id']),
$area['target'],
$area['css'],
$area['additional_selectors']
);
?>
<?php if (isset($area['example'])) {
echo $area['example'];
} ?>
<hr />
<?php } ?>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="tab_custom_css">
<div class="form-group">
<label class="bold" for="theme_style_custom_clients_and_admin_area">
<i class="fa-regular fa-circle-question" data-toggle="tooltip"
data-title="<?= _l('theme_style_ca_info'); ?>"></i>
<?= _l('theme_style_customers_and_admin'); ?>
</label>
<textarea name="theme_style_custom_clients_and_admin_area"
id="theme_style_custom_clients_and_admin_area" rows="15"
class="form-control"><?= clear_textarea_breaks(get_option('theme_style_custom_clients_and_admin_area')); ?></textarea>
</div>
<div class="form-group">
<label class="bold" for="theme_style_custom_admin_area">
<?= _l('theme_style_admin'); ?>
</label>
<textarea name="theme_style_custom_admin_area" id="theme_style_custom_admin_area"
rows="15"
class="form-control"><?= clear_textarea_breaks(get_option('theme_style_custom_admin_area')); ?></textarea>
</div>
<div class="form-group">
<label class="bold" for="theme_style_custom_clients_area">
<?= _l('theme_style_customers'); ?>
</label>
<textarea name="theme_style_custom_clients_area" id="theme_style_custom_clients_area"
rows="15"
class="form-control"><?= clear_textarea_breaks(get_option('theme_style_custom_clients_area')); ?></textarea>
</div>
</div>
<?php if (count($tags) > 0) { ?>
<div role="tabpanel" class="tab-pane" id="tab_styling_tags">
<div class="row">
<?php foreach ($tags as $area) { ?>
<div class="col-md-6">
<label class="bold mbot10 inline-block">
<strong><?= $area['name']; ?></strong>
</label>
<?php render_theme_styling_picker(
$area['id'],
get_custom_style_values('tags', $area['id']),
$area['target'],
$area['css'],
$area['additional_selectors']
);
if (isset($area['example'])) {
echo $area['example'];
}
?>
<hr />
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
</div>
<div class="panel-footer text-right">
<a href="#" onclick="save_theme_style(); return false;" class="btn btn-primary">
<?= _l('save'); ?>
</a>
</div>
</div>
</div>
</div>
</div>
<?php init_tail(); ?>
<script>
var pickers = $('.colorpicker-component');
$(function() {
$.each(pickers, function() {
$(this).colorpicker({
format: "hex"
});
$(this).colorpicker().on('changeColor', function(e) {
var color = e.color.toHex();
var _class = 'custom_style_' + $(this).find('input').data('id');
var val = $(this).find('input').val();
if (val == '') {
$('.' + _class).remove();
return false;
}
var append_data = '';
var additional = $(this).data('additional');
additional = additional.split('+');
if (additional.length > 0 && additional[0] != '') {
$.each(additional, function(i, add) {
add = add.split('|');
append_data += add[0] + '{' + add[1] + ':' + color + ';}';
});
}
append_data += $(this).data('target') + '{' + $(this).data('css') + ':' +
color +
';}';
if ($('head').find('.' + _class).length > 0) {
$('head').find('.' + _class).html(append_data);
} else {
$("<style />", {
class: _class,
type: 'text/css',
html: append_data
}).appendTo("head");
}
});
});
});
function save_theme_style() {
var data = [];
$.each(pickers, function() {
var color = $(this).find('input').val();
if (color != '') {
var _data = {};
_data.id = $(this).find('input').data('id');
_data.color = color;
data.push(_data);
}
});
$.post(admin_url + 'theme_style/save', {
data: JSON.stringify(data),
admin_area: $('#theme_style_custom_admin_area').val(),
clients_area: $('#theme_style_custom_clients_area').val(),
clients_and_admin: $('#theme_style_custom_clients_and_admin_area').val(),
}).done(function() {
var tab = $('#theme_styling_areas').find('li.active > a:eq(0)').attr('href');
tab = tab.substring(1, tab.length)
window.location = admin_url + 'theme_style?tab=' + tab;
});
}
</script>
</body>
</html>