Skip to content

Commit f480454

Browse files
joedolsonjoedolson
committed
Add Able Player settings screen & settings management functions.
See #13
1 parent fb185d7 commit f480454

5 files changed

Lines changed: 1041 additions & 21 deletions

File tree

‎src/ableplayer.php‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424
// Get current version number.
2525
define( 'ABLEPLAYER_VERSION', '1.2.2' );
2626

27+
require_once plugin_dir_path( __FILE__ ) . 'inc/settings.php';
28+
require_once plugin_dir_path( __FILE__ ) . 'inc/kses.php';
29+
2730
register_activation_hook( __FILE__, 'ableplayer_activation' );
2831
/**
2932
* Configure plugin on activation.
@@ -101,29 +104,20 @@ function ableplayer_enqueue_scripts() {
101104
add_action( 'wp_enqueue_scripts', 'ableplayer_enqueue_scripts' );
102105

103106
/**
104-
* Get Able Player settings.
105-
*
106-
* @param string $setting A specific setting key. Default empty string.
107-
*
108-
* @return array|mixed The full settings array or a specific setting value.
109-
*/
110-
function ableplayer_get_settings( $setting = '' ) {
111-
$settings = get_option( 'ableplayer_settings', ableplayer_default_settings() );
112-
if ( $setting && isset( $settings[ $setting ] ) ) {
113-
return $settings[ $setting ];
114-
}
115-
116-
return $settings;
117-
}
118-
119-
/**
120-
* Get Able Player default settings.
121-
*
122-
* @return array
107+
* Enqueue admin JS and CSS.
123108
*/
124-
function ableplayer_default_settings() {
125-
return array();
109+
function ableplayer_admin_scripts() {
110+
wp_enqueue_script( 'ableplayer-js', plugins_url( '/assets/js/admin.js', __FILE__ ), array( 'jquery' ), ABLEPLAYER_VERSION, true );
111+
wp_localize_script(
112+
'ableplayer-js',
113+
'ableplayer',
114+
array(
115+
'firstItem' => 'tab_settings',
116+
)
117+
);
118+
wp_enqueue_style( 'ableplayer', plugins_url( '/assets/css/admin.css', __FILE__ ), array(), ABLEPLAYER_VERSION );
126119
}
120+
add_action( 'admin_enqueue_scripts', 'ableplayer_admin_scripts' );
127121

128122
/**
129123
* Self-documenting array of AblePlayer attributes.

‎src/assets/css/admin.css‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
.ableplayer-wide {
2+
width: 75%;
3+
}
4+
5+
.ableplayer-narrow {
6+
width: 20%;
7+
}
8+
9+
@media (max-width: 782px) {
10+
.ableplayer-narrow {
11+
width: 100%;
12+
}
13+
14+
.ableplayer-wide {
15+
width: 100%;
16+
}
17+
}
18+
19+
.ableplayer-admin .metabox-holder .ableplayer-postbox > h2,
20+
.ableplayer-admin .metabox-holder .postbox > h2 {
21+
font-size: 14px;
22+
padding: 8px 12px;
23+
margin: 0;
24+
line-height: 1.4;
25+
}
26+
27+
.ableplayer-admin .postbox {
28+
margin: 10px 10px 0 0
29+
}
30+
31+
.ableplayer-admin .jcd-narrow .postbox {
32+
margin-right: 0;
33+
min-width: auto;
34+
}
35+
36+
.ableplayer-admin .postbox .inside {
37+
overflow: visible !important;
38+
margin: 0;
39+
}
40+
41+
42+
.wp-admin.js .wptab {
43+
display: none;
44+
}
45+
46+
.wp-admin.js .wptab[aria-hidden=false] {
47+
display: block;
48+
}
49+
50+
.mc-tabs .tabs, .mc-tablinks {
51+
position: relative;
52+
border-bottom: 1px solid #c3c4c7;
53+
margin-bottom: 0;
54+
margin-top: 20px;
55+
}
56+
57+
.mc-tabs.vertical .tabs {
58+
border-bottom: none;
59+
}
60+
61+
.mc-tabs .tabs button, .mc-tablinks a {
62+
display: inline-block;
63+
padding: 6px 12px;
64+
font-size: 14px;
65+
border-radius: 4px 4px 0 0;
66+
border: 1px solid #c3c4c7;
67+
background: #f6f7f7;
68+
position: relative;
69+
border-bottom: 2px solid transparent;
70+
}
71+
72+
.mc-tabs .tabs button[aria-selected=true]:after,
73+
.mc-tablinks a[aria-current=page]:after {
74+
content: '';
75+
position: absolute;
76+
left: calc( 50% - 10px );
77+
top: calc( 100% + 1px );
78+
width: 0;
79+
height: 0;
80+
border-left: 10px solid transparent;
81+
border-right: 10px solid transparent;
82+
border-top: 10px solid #fff;
83+
clear: both;
84+
}
85+
86+
.mc-tabs .tabs button[aria-selected=true]:before,
87+
.mc-tablinks a[aria-current=page]:before {
88+
content: '';
89+
position: absolute;
90+
left: calc( 50% - 10px );
91+
top: calc( 100% + 2px );
92+
width: 0;
93+
height: 0;
94+
border-left: 10px solid transparent;
95+
border-right: 10px solid transparent;
96+
border-top: 10px solid #c3c4c7;
97+
clear: both;
98+
}
99+
100+
@media screen and ( width >= 481px ) {
101+
.mc-tabs.vertical .tabs button[aria-selected=true]:after,
102+
.mc-tabs.vertical .tabs button[aria-selected=true]:before {
103+
left: 100%;
104+
top: 50%;
105+
border-left: 10px solid #fff;
106+
border-top: 10px solid transparent;
107+
border-bottom: 10px solid transparent;
108+
margin-top: -10px;
109+
}
110+
111+
.mc-tabs.vertical .tabs button[aria-selected=true]:before {
112+
left: calc( 100% + 1px );
113+
top: 50%;
114+
border-left: 10px solid #a2a4a7;
115+
border-top: 10px solid transparent;
116+
border-bottom: 10px solid transparent;
117+
}
118+
}
119+
120+
121+
.mc-tabs .tabs button:hover,
122+
.mc-tabs .tabs button:focus,
123+
.mc-tablinks a:hover,
124+
.mc-tablinks a:focus {
125+
border-bottom: 2px solid #000;
126+
}
127+
128+
.mc-tabs .tabs button[aria-selected=true],
129+
.mc-tablinks a[aria-current=page] {
130+
background: #fff;
131+
}
132+
133+
.mc-tabs.vertical {
134+
display: grid;
135+
grid-template-columns: 12em 1fr;
136+
}
137+
138+
.mc-tabs.vertical .tabs {
139+
margin-top: 0;
140+
}
141+
142+
.mc-tabs.vertical .tabs button {
143+
display: block;
144+
border: 1px solid #c3c4c7;
145+
border-right: none;
146+
border-bottom: none;
147+
border-radius: 0;
148+
width: 100%;
149+
text-align: left;
150+
}
151+
152+
.mc-tabs.vertical .tabs button:last-of-type {
153+
border-bottom: 1px solid #c3c4c7;
154+
}
155+
156+
.mc-tabs.vertical .wptab {
157+
border-left: 1px solid #c3c4c7;
158+
padding: 10px;
159+
}
160+
161+
@media screen and ( width < 481px ) {
162+
.mc-tabs.vertical {
163+
display: flex;
164+
flex-wrap: wrap;
165+
}
166+
.mc-tabs.vertical .tabs {
167+
display: flex;
168+
flex-wrap: wrap;
169+
}
170+
.mc-tabs.vertical .tabs button {
171+
border: 1px solid #c3c4c7;
172+
}
173+
.mc-tabs.vertical .wptab {
174+
padding: 0;
175+
margin-top: 10px;
176+
}
177+
.mc-tabs.vertical .tabs button[aria-selected="true"]::before,
178+
.mc-tabs.vertical .tabs button[aria-selected="true"]::after {
179+
display: none;
180+
}
181+
.mc-tabs.vertical .tabs button[aria-selected="true"] {
182+
border-bottom: 2px solid black;
183+
}
184+
}
185+
186+
.ableplayer-admin fieldset .wptab {
187+
border: 1px solid #c3c4c7;
188+
border-top: none;
189+
padding: 1em;
190+
margin-bottom: 1em;
191+
}
192+
193+
/* some plugins change this, but I need it at WP default. */
194+
.ableplayer-admin .meta-box-sortables {
195+
min-height: 0
196+
}
197+
198+
.ableplayer-flex {
199+
display: flex;
200+
align-items: center;
201+
gap: 16px;
202+
}
203+
204+
.ableplayer-flex.ableplayer-social {
205+
justify-content: center;
206+
}
207+
208+
.ableplayer-flex.ableplayer-social {
209+
margin: 0;
210+
align-items: center;
211+
}
212+
213+
.ableplayer-flex.ableplayer-social li {
214+
margin: 0;
215+
}
216+
217+
.ableplayer-flex.ableplayer-social a {
218+
display: block;
219+
padding: 3px;
220+
border-radius: 3px;
221+
}
222+
223+
.ableplayer-flex.ableplayer-social a:hover {
224+
outline: 2px solid;
225+
}

‎src/assets/js/admin.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
jQuery(document).ready(function ($) {
2+
let firstItem = window.location.hash;
3+
const tabGroups = document.querySelectorAll( '.mc-tabs' );
4+
for ( let i = 0; i < tabGroups.length; i++ ) {
5+
const panel = $( tabGroups[i] ).find( firstItem );
6+
if ( panel.length !== 0 ) {
7+
showPanel( firstItem );
8+
} else {
9+
firstItem = $( tabGroups[i] ).find( '[role=tablist]' ).attr( 'data-default' );
10+
showPanel( '#' + firstItem );
11+
}
12+
}
13+
const tabs = document.querySelectorAll('.mc-tabs [role=tab]'); // get all role=tab elements as a variable.
14+
for ( let i = 0; i < tabs.length; i++) {
15+
tabs[i].addEventListener( 'click', showTabPanel );
16+
tabs[i].addEventListener( 'keydown', handleKeyPress );
17+
} // add click event to each tab to run the showTabPanel function.
18+
/**
19+
* Activate a panel from the click event.
20+
*
21+
* @param event Click event.
22+
*/
23+
function showTabPanel(e) {
24+
const tabContainer = $( e.currentTarget ).closest( '.tabs' );
25+
const tabs = tabContainer.find( '[role=tab]' );
26+
const container = $( e.currentTarget ).closest( '.mc-tabs' );
27+
const inside = $( e.currentTarget ).parents( '.inside' );
28+
const tabPanelToOpen = e.target.getAttribute('aria-controls');
29+
const iframes = $( 'iframe.mc-iframe' );
30+
let tabPanels = [];
31+
if ( inside.length == 0 && ! container.hasClass( 'mcs-tabs' ) ) {
32+
tabPanels = container.find( '.ui-sortable > [role=tabpanel]' );
33+
} else {
34+
tabPanels = container.find( '[role=tabpanel]' );
35+
}
36+
for ( let i = 0; i < tabs.length; i++) {
37+
tabs[i].setAttribute('aria-selected', 'false');
38+
} // reset all tabs to aria-selected=false and normal font weight
39+
e.target.setAttribute('aria-selected', 'true'); //set aria-selected=true for clicked tab
40+
for ( let i = 0; i < tabPanels.length; i++) {
41+
tabPanels[i].setAttribute( 'aria-hidden', 'true' );
42+
} // hide all tabpanels
43+
// If this is an inner tab panel, don't set the window location.
44+
if ( inside.length == 0 ) {
45+
window.location.hash = tabPanelToOpen;
46+
}
47+
document.getElementById(tabPanelToOpen).setAttribute( 'aria-hidden', 'false' ); //show tabpanel
48+
for ( let i = 0; i < iframes.length; i++ ) {
49+
let iframe = iframes[i];
50+
resizeIframe(iframe);
51+
}
52+
$( '#' + tabPanelToOpen ).attr( 'tabindex', '-1' ).trigger( 'focus' );
53+
window.scrollTo( 0,0 );
54+
}
55+
56+
/**
57+
* Activate a panel from panel ID.
58+
*
59+
* @param string hash Item ID.
60+
*/
61+
function showPanel(hash) {
62+
let id = hash.replace( '#', '' );
63+
const control = $( 'button[aria-controls=' + id + ']' );
64+
const tabContainer = $( hash ).closest( '.tabs' );
65+
const tabs = tabContainer.find( '[role=tab]' );
66+
const container = $( hash ).closest( '.mc-tabs' );
67+
const tabPanels = container.find( '[role=tabpanel]' );
68+
const currentPanel = document.getElementById(id);
69+
70+
for ( let i = 0; i < tabs.length; i++) {
71+
tabs[i].setAttribute('aria-selected', 'false');
72+
} //reset all tabs to aria-selected=false and normal font weight
73+
control.attr('aria-selected', 'true'); //set aria-selected=true for clicked tab
74+
for ( let i = 0; i < tabPanels.length; i++) {
75+
tabPanels[i].setAttribute( 'aria-hidden', 'true' );
76+
}
77+
if ( null !== currentPanel ) {
78+
currentPanel.setAttribute( 'aria-hidden', 'false' ); //show tabpanel
79+
}
80+
}
81+
82+
// Arrow key handlers.
83+
function handleKeyPress(e) {
84+
if (e.keyCode == 37) { // left arrow
85+
$( e.currentTarget ).prev().trigger('click').trigger('focus');
86+
e.preventDefault();
87+
}
88+
if (e.keyCode == 38) { // up arrow
89+
$( e.currentTarget ).prev().trigger('click').trigger('focus');
90+
e.preventDefault();
91+
}
92+
if (e.keyCode == 39) { // right arrow
93+
$( e.currentTarget ).next().trigger('click').trigger('focus');
94+
e.preventDefault();
95+
}
96+
if (e.keyCode == 40) { // down arrow.
97+
$( e.currentTarget ).next().trigger('click').trigger('focus');
98+
e.preventDefault();
99+
}
100+
};
101+
});

0 commit comments

Comments
 (0)