Skip to content

Commit 9cf1ba3

Browse files
PolyPluginsPolyPlugins
authored
Merge pull request #4 from PolyPlugins/releases/3.0.0
3.0.0
2 parents c6aab7e + 93d7ef5 commit 9cf1ba3

File tree

10 files changed

+1442
-353
lines changed

10 files changed

+1442
-353
lines changed

‎src/Settings.php‎

Lines changed: 221 additions & 282 deletions
Large diffs are not rendered by default.

‎src/css/bootstrap-wrapper.min.css‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/colors.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* You can overwrite this via $this->config. Put a stylesheet somewhere in your plugin folder and link to it via the css key.
33
* Example: $this->config = array('css' => '/css/settings.css');
4-
* This will also allow you to extend the settings class with custom css if you want to change more than colors. This way you aren't overwritting the settings class for all plugins using it.
4+
* This will also allow you to extend the settings class with custom css if you want to change more than colors.
55
*/
66
:root {
77
--settings-primary: #46BEA4;

‎src/js/bootstrap.min.js‎

Lines changed: 3 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/templates/default/index.php‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<?php
2+
/**
3+
* Default settings template
4+
*/
5+
6+
if (!defined('ABSPATH')) exit;
7+
?>
8+
9+
<div class="bootstrap-wrapper">
10+
<!-- Display a loader as a placeholder until page is loaded -->
11+
<div class="load-settings d-flex justify-content-center m-3">
12+
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
13+
<span class="sr-only">Loading...</span>
14+
</div>
15+
</div>
16+
17+
<!-- Settings are hidden until page loaded to prevent layout shifting -->
18+
<div class="row settings-container align-items-start" style="display: none;">
19+
20+
<!-- Navigation -->
21+
<div class="col-lg-2 col-md-12 tabs">
22+
<nav class="nav flex-column">
23+
<img src="<?php echo isset($this->config['logo']) ? esc_url(plugins_url($this->config['logo'], $this->plugin)) : esc_url(plugins_url('/img/logo.png', $this->admin_panel)); ?>" class="nav-logo" />
24+
</nav>
25+
26+
<nav class="nav flex-column">
27+
<?php foreach ($sections as $section) : ?>
28+
<?php
29+
$icon = isset($get_fields[$section]['icon']) ? $get_fields[$section]['icon'] : '';
30+
$label = isset($get_fields[$section]['label']) ? $get_fields[$section]['label'] : ucfirst(str_replace('-', ' ', $section));
31+
$has_icons = false;
32+
?>
33+
<a class="nav-link<?php echo ($sections[0] == $section) ? ' active' : ''; ?>"
34+
href="#<?php echo esc_attr($section); ?>"
35+
selected-section="<?php echo esc_attr($section); ?>">
36+
<?php if ($icon) : ?>
37+
<?php $has_icons = true; ?>
38+
<i class="bi bi-<?php echo esc_attr($icon); ?>"></i>
39+
<?php endif; ?>
40+
<?php echo esc_html($label); ?>
41+
</a>
42+
43+
<?php if (!empty($get_fields[$section]['subsections'])) : ?>
44+
<?php foreach ($get_fields[$section]['subsections'] as $sub_id => $subsection) : ?>
45+
<?php
46+
$sub_icon = isset($subsection['icon']) ? $subsection['icon'] : '';
47+
$sub_label = isset($subsection['label']) ? $subsection['label'] : ucfirst(str_replace('-', ' ', $sub_id));
48+
?>
49+
<a class="nav-link subsection-link ms-3"
50+
href="#<?php echo esc_attr($section . '-' . $sub_id); ?>"
51+
selected-section="<?php echo esc_attr($section . '-' . $sub_id); ?>">
52+
<?php if ($sub_icon) : ?>
53+
<i class="bi bi-<?php echo esc_attr($sub_icon); ?>"></i>
54+
<?php endif; ?>
55+
<?php echo esc_html($sub_label); ?>
56+
</a>
57+
<?php endforeach; ?>
58+
<?php endif; ?>
59+
<?php endforeach; ?>
60+
61+
<?php if (isset($this->config['support'])) : ?>
62+
<a class="nav-link" href="<?php echo esc_url($this->config['support']); ?>" target="_blank">
63+
<?php if ($has_icons) : ?>
64+
<i class="bi bi-chat-left-dots"></i>
65+
<?php endif; ?>
66+
Support
67+
</a>
68+
<?php endif; ?>
69+
</nav>
70+
</div>
71+
72+
<!-- Fields -->
73+
<div class="<?php echo isset($this->config['sidebar']) ? 'col-lg-8 col-md-10' : 'col-lg-10 col-md-12'; ?> g-0">
74+
<?php foreach($get_fields as $section => $section_data) : ?>
75+
<?php $fields = isset($section_data['fields']) ? $section_data['fields'] : array(); ?>
76+
77+
<!-- Parent Section -->
78+
<div class="options"<?php echo ($sections[0] != $section) ? ' style="display: none;"' : ''; ?> section="<?php echo esc_attr($section) ?>">
79+
<!-- Notes -->
80+
<?php if (isset($section_data['note']['message']) && $section_data['note']['message']) : ?>
81+
<div class="note<?php echo isset($section_data['note']['class']) && $section_data['note']['class'] ? " " . esc_html($section_data['note']['class']) : " warning"; ?>">
82+
<?php echo " " . esc_html($section_data['note']['message']); ?>
83+
</div>
84+
<?php endif; ?>
85+
<div class="options-padding">
86+
<h2>
87+
<?php if (!empty($section_data['icon'])) : ?>
88+
<i class="<?php echo esc_attr($section_data['icon']); ?>"></i>
89+
<?php endif; ?>
90+
<?php echo esc_html(ucfirst($section)) . ' Settings'; ?>
91+
</h2>
92+
<div class="fields">
93+
<?php foreach($fields as $field) : ?>
94+
<?php $field['section'] = $section; ?>
95+
<?php $this->add_field($field); ?>
96+
<?php endforeach; ?>
97+
</div>
98+
</div>
99+
</div>
100+
101+
<!-- Subsections as independent tabs -->
102+
<?php if (!empty($section_data['subsections'])) : ?>
103+
<?php foreach($section_data['subsections'] as $sub_id => $subsection) : ?>
104+
<?php $sub_fields = isset($subsection['fields']) ? $subsection['fields'] : array(); ?>
105+
<div class="options" style="display:none;" section="<?php echo esc_attr($section . '-' . $sub_id); ?>">
106+
<!-- Notes -->
107+
<?php if (isset($section_data['note']['message']) && $section_data['note']['message']) : ?>
108+
<div class="note<?php echo isset($section_data['note']['class']) && $section_data['note']['class'] ? " " . esc_html($section_data['note']['class']) : " warning"; ?>">
109+
<?php echo " " . esc_html($section_data['note']['message']); ?>
110+
</div>
111+
<?php endif; ?>
112+
<div class="options-padding">
113+
<h2>
114+
<?php if (!empty($subsection['icon'])) : ?>
115+
<i class="<?php echo esc_attr($subsection['icon']); ?>"></i>
116+
<?php endif; ?>
117+
<?php echo esc_html($subsection['label'] ?? ucfirst($sub_id)) . ' Settings'; ?>
118+
</h2>
119+
<div class="fields">
120+
<?php foreach($sub_fields as $field) : ?>
121+
<?php $field['section'] = $section . '-' . $sub_id; ?>
122+
<?php $this->add_field($field); ?>
123+
<?php endforeach; ?>
124+
</div>
125+
</div>
126+
</div>
127+
<?php endforeach; ?>
128+
<?php endif; ?>
129+
<?php endforeach; ?>
130+
131+
<div class="row align-items-center">
132+
<div class="col-6">
133+
<?php submit_button(); ?>
134+
</div>
135+
<div class="col-6 text-end">
136+
<div class="credit">Built with <a href="https://github.com/PolyPlugins/Settings-Class-for-Wordpress">Settings Class for WordPress</a><span>
137+
</div>
138+
</div>
139+
</div>
140+
</div>
141+
<div class="col-lg-2 col-md-2 helper-sidebar" style="display: none;">
142+
<h2>Help<span class="helper-close"><a href="javascript:void(0)"><i class="bi bi-x-circle-fill"></i></a></span></h2>
143+
<div class="helper-text"></div>
144+
</div>
145+
<?php if (isset($this->config['sidebar'])) : ?>
146+
<?php
147+
$heading = isset($this->config['sidebar']['heading']) ? sanitize_text_field($this->config['sidebar']['heading']) : '';
148+
$body = isset($this->config['sidebar']['body']) ? sanitize_text_field($this->config['sidebar']['body']) : '';
149+
$button_label = isset($this->config['sidebar']['button_label']) ? sanitize_text_field($this->config['sidebar']['button_label']) : '';
150+
$button_url = isset($this->config['sidebar']['button_url']) ? sanitize_url($this->config['sidebar']['button_url']) : '';
151+
?>
152+
<div class="col-lg-2 col-md-2 sidebar">
153+
<div class="sidebar-content">
154+
<?php if ($heading) : ?>
155+
<h2 class="sidebar-heading"><?php echo esc_html($heading); ?></h2>
156+
<?php endif; ?>
157+
158+
<?php if ($body) : ?>
159+
<p class="sidebar-body"><?php echo esc_html($body); ?></p>
160+
<?php endif; ?>
161+
162+
<?php if ($button_label && $button_url) : ?>
163+
<p class="sidebar-button"><a href="<?php echo esc_url($button_url); ?>" class="button button-primary" target="_blank"><?php echo esc_html($button_label); ?></a></p>
164+
<?php endif; ?>
165+
</div>
166+
</div>
167+
<?php endif; ?>
168+
</div>

‎src/js/settings.js‎ renamed to ‎src/templates/default/settings.js‎

Lines changed: 43 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -49,65 +49,42 @@ jQuery(document).ready(function ($) {
4949
if ($hash) {
5050
let $selected_section = $hash;
5151

52-
// Add active class and add handling for before and after active element
53-
$(".nav-link[selected-section=" + $selected_section + "]").prevAll().removeClass('active');
54-
$(".nav-link[selected-section=" + $selected_section + "]").prevAll().addClass('previous');
55-
$(".nav-link[selected-section=" + $selected_section + "]").removeClass('previous');
56-
$(".nav-link[selected-section=" + $selected_section + "]").addClass('active');
57-
$(".nav-link[selected-section=" + $selected_section + "]").nextAll().removeClass('active');
58-
$(".nav-link[selected-section=" + $selected_section + "]").nextAll().removeClass('previous');
52+
$(".nav-link").removeClass("active previous");
53+
$(".nav-link[selected-section=" + $selected_section + "]")
54+
.addClass("active")
55+
.prevAll().addClass("previous");
5956

60-
// Update Title Bar
6157
$(".row.top-bar").text(slug_to_title($selected_section));
6258

63-
// Handles displaying clicked tab while hiding others
6459
$(".options").each(function() {
65-
let $section_element = $(this);
66-
let $section = $(this).attr('section');
67-
68-
if ($section != $selected_section) {
69-
$section_element.hide();
70-
} else {
71-
$section_element.show();
72-
}
60+
let $section = $(this).attr("section");
61+
$(this).toggle($section === $selected_section);
7362
});
7463
}
7564
}
7665

7766
// Process switching tabs
7867
function switchTabHandling() {
7968
$(".nav-link").on("click", function(e) {
80-
let $selected_section_element = $(this);
81-
let $selected_section = $selected_section_element.attr('selected-section');
69+
let $selected_section = $(this).attr('selected-section');
8270

83-
// Add active class and add handling for before and after active element
84-
$(".nav-link[selected-section=" + $selected_section + "]").prevAll().removeClass('active');
85-
$(".nav-link[selected-section=" + $selected_section + "]").prevAll().addClass('previous');
86-
$(".nav-link[selected-section=" + $selected_section + "]").removeClass('previous');
87-
$(".nav-link[selected-section=" + $selected_section + "]").addClass('active');
88-
$(".nav-link[selected-section=" + $selected_section + "]").nextAll().removeClass('active');
89-
$(".nav-link[selected-section=" + $selected_section + "]").nextAll().removeClass('previous');
71+
// Reset active/previous classes
72+
$(".nav-link").removeClass("active previous");
73+
$(this).addClass("active");
74+
$(this).prevAll().addClass("previous");
9075

9176
// Update Title Bar
9277
$(".row.top-bar").text(slug_to_title($selected_section));
9378

94-
// Handles displaying clicked tab while hiding others
9579
$(".options").each(function() {
96-
let $section_element = $(this);
97-
let $section = $(this).attr('section');
98-
99-
if ($section != $selected_section) {
100-
$section_element.hide();
101-
} else {
102-
$section_element.show();
103-
}
80+
let $section = $(this).attr("section");
81+
$(this).toggle($section === $selected_section);
10482
});
10583

10684
// Close helpers
10785
toggled = false;
108-
109-
$(this).parent().parent().parent().find(".col-lg-8").toggleClass("col-lg-10").toggleClass("col-lg-8");
110-
$(this).parent().parent().parent().find(".col-md-10").toggleClass("col-md-12").toggleClass("col-md-10");
86+
$(this).closest(".bootstrap-wrapper").find(".col-lg-8").toggleClass("col-lg-10 col-lg-8");
87+
$(this).closest(".bootstrap-wrapper").find(".col-md-10").toggleClass("col-md-12 col-md-10");
11188
$(".helper-sidebar").hide();
11289

11390
inputGroupEqualWidth($selected_section);
@@ -117,26 +94,41 @@ jQuery(document).ready(function ($) {
11794
// Helper Sidebar
11895
function helperHandling() {
11996
$(".helper-icon").click(function() {
120-
var helper = $(this).parents('.input-group').find('.helper-placeholder').text();
97+
var helper = $(this).parents('.field-container').find('.helper-placeholder').text();
12198

12299
if (!toggled) {
100+
let $sidebar = $(".sidebar");
101+
123102
toggled = true;
124103

125-
$(".bootstrap-wrapper").find(".col-lg-10").toggleClass("col-lg-10").toggleClass("col-lg-8");
126-
$(".bootstrap-wrapper").find(".col-md-12").toggleClass("col-md-12").toggleClass("col-md-10");
127-
$(".helper-sidebar").toggle();
104+
if ($sidebar.length > 0) {
105+
$(".helper-sidebar").toggle();
106+
$(".sidebar").toggle();
107+
} else {
108+
$(".bootstrap-wrapper").find(".col-lg-10").toggleClass("col-lg-10").toggleClass("col-lg-8");
109+
$(".bootstrap-wrapper").find(".col-md-12").toggleClass("col-md-12").toggleClass("col-md-10");
110+
$(".helper-sidebar").toggle();
111+
}
128112
}
113+
129114
$(".helper-text").text(helper);
130115

131116
$('html,body').animate({ scrollTop: 0 }, 'fast');
132117
});
133118

134119
$(".helper-close").click(function() {
120+
let $sidebar = $(".sidebar");
121+
135122
toggled = false;
136123

137-
$(".bootstrap-wrapper").find(".col-lg-8").toggleClass("col-lg-10").toggleClass("col-lg-8");
138-
$(".bootstrap-wrapper").find(".col-md-10").toggleClass("col-md-12").toggleClass("col-md-10");
139-
$(".helper-sidebar").toggle();
124+
if ($sidebar.length > 0) {
125+
$(".helper-sidebar").toggle();
126+
$(".sidebar").toggle();
127+
} else {
128+
$(".bootstrap-wrapper").find(".col-lg-8").toggleClass("col-lg-10").toggleClass("col-lg-8");
129+
$(".bootstrap-wrapper").find(".col-md-10").toggleClass("col-md-12").toggleClass("col-md-10");
130+
$(".helper-sidebar").toggle();
131+
}
140132
});
141133
}
142134

@@ -197,10 +189,10 @@ jQuery(document).ready(function ($) {
197189
return;
198190
}
199191

200-
$('.input-group' + '.' + dropdown_value).each(function() {
192+
$('.field-container' + '.' + dropdown_value).each(function() {
201193
$(this).show();
202194

203-
if($(this)[0] === $('.input-group' + '.' + dropdown_value).last()[0]) {
195+
if($(this)[0] === $('.field-container' + '.' + dropdown_value).last()[0]) {
204196
$(this).css("margin-bottom", 0)
205197
}
206198
});
@@ -215,10 +207,10 @@ jQuery(document).ready(function ($) {
215207
$(this).hide();
216208
});
217209

218-
$('.input-group' + '.' + dropdown_value).each(function() {
210+
$('.field-container' + '.' + dropdown_value).each(function() {
219211
$(this).show();
220212

221-
if($(this)[0] === $('.input-group' + '.' + dropdown_value).last()[0]) {
213+
if($(this)[0] === $('.field-container' + '.' + dropdown_value).last()[0]) {
222214
$(this).css("margin-bottom", 0)
223215
}
224216
});
@@ -233,8 +225,8 @@ jQuery(document).ready(function ($) {
233225
let $active_tab = $(".nav-link.active").attr('selected-section');
234226

235227
let $selected_section_inputs = selected_section
236-
? $("[section='" + selected_section + "']").find('.input-group-text:visible')
237-
: $("[section='" + $active_tab + "']").find('.input-group-text:visible');
228+
? $("[section='" + selected_section + "']").find('.field-container-text:visible')
229+
: $("[section='" + $active_tab + "']").find('.field-container-text:visible');
238230

239231
$selected_section_inputs.css("width", "auto");
240232

0 commit comments

Comments
 (0)