Skip to content

Commit 5440d57

Browse files
joedolsonjoedolson
committed
Initial add shortcode generator.
1 parent 1416965 commit 5440d57

File tree

6 files changed

+740
-51
lines changed

6 files changed

+740
-51
lines changed

‎src/ableplayer.php‎

Lines changed: 65 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
define( 'ABLEPLAYER_VERSION', '1.2.2' );
2626

2727
require_once plugin_dir_path( __FILE__ ) . 'inc/settings.php';
28+
require_once plugin_dir_path( __FILE__ ) . 'inc/generator.php';
2829
require_once plugin_dir_path( __FILE__ ) . 'inc/kses.php';
2930

3031
register_activation_hook( __FILE__, 'ableplayer_activation' );
@@ -112,14 +113,26 @@ function ableplayer_enqueue_scripts() {
112113
function ableplayer_admin_scripts() {
113114
$version = ABLEPLAYER_VERSION;
114115
$version = ( SCRIPT_DEBUG ) ? $version . '-' . wp_rand( 1000, 9999 ) : $version;
115-
wp_enqueue_script( 'ableplayer-js', plugins_url( '/assets/js/admin.js', __FILE__ ), array( 'jquery' ), $version, true );
116+
wp_enqueue_script( 'ableplayer-js', plugins_url( '/assets/js/admin.js', __FILE__ ), array( 'jquery', 'wp-a11y', 'clipboard' ), $version, true );
116117
wp_localize_script(
117118
'ableplayer-js',
118119
'ableplayer',
119120
array(
120-
'firstItem' => 'tab_settings',
121+
'posterTitle' => 'Select Poster Image',
122+
'sourceTitle' => 'Select Video',
123+
'captionsTitle' => 'Select Captions',
124+
'subtitlesTitle' => 'Select Subtitles',
125+
'descriptionTitle' => 'Select Description',
126+
'chaptersTitle' => 'Select Chapters',
127+
'buttonName' => 'Choose Media',
128+
'thumbHeight' => '100',
129+
'removed' => __( 'Selected media removed', 'ableplayer' ),
130+
'homeUrl' => home_url(),
121131
)
122132
);
133+
if ( function_exists( 'wp_enqueue_media' ) && ! did_action( 'wp_enqueue_media' ) ) {
134+
wp_enqueue_media();
135+
}
123136
wp_enqueue_style( 'ableplayer', plugins_url( '/assets/css/admin.css', __FILE__ ), array(), $version );
124137
}
125138
add_action( 'admin_enqueue_scripts', 'ableplayer_admin_scripts' );
@@ -384,6 +397,11 @@ function ableplayer_shortcode( $atts, $content = null ) {
384397
'youtube-nocookie' => '',
385398
'vimeo-id' => '',
386399
'vimeo-desc-id' => '',
400+
'media-id' => '',
401+
'captions' => '',
402+
'subtitles' => '',
403+
'descriptions' => '',
404+
'chapters' => '',
387405
'autoplay' => 'false',
388406
'preload' => 'metadata',
389407
'loop' => 'false',
@@ -404,11 +422,48 @@ function ableplayer_shortcode( $atts, $content = null ) {
404422
'ableplayer'
405423
);
406424

407-
// output.
408-
if ( ! ( $all_atts['youtube-id'] || $all_atts['vimeo-id'] ) ) {
409-
// required fields are missing.
425+
if ( ! ( $all_atts['youtube-id'] || $all_atts['vimeo-id'] || $all_atts['media-id'] ) ) {
426+
// Shortcode must have one of YouTube, Vimeo, or local video source.
410427
return false;
411428
} else {
429+
if ( $all_atts['media-id'] ) {
430+
// If Video ID is set but is not a valid URL,
431+
$media_id = ( is_numeric($all_atts['media-id'] ) ) ? wp_get_attachment_url( $all_atts['media-id'] ) : $all_atts['media-id'];
432+
if ( ! $media_id ) {
433+
return false;
434+
} else {
435+
$type = get_post_mime_type( $media_id );
436+
$source = '<source type="' . esc_attr( $type ) . '" src="' . esc_url( $media_id ) . '">';
437+
}
438+
}
439+
440+
$tracks = array();
441+
$kinds = array(
442+
'captions' => __( 'Captions', 'ableplayer' ),
443+
'subtitles' => __( 'Subtitles', 'ableplayer' ),
444+
'description' => __( 'Description', 'ableplayer' ),
445+
'chapters' => __( 'Chapters', 'ableplayer' ),
446+
);
447+
// Switch locale to BCP47 syntax.
448+
$default_lang = str_replace( '_', '-', get_locale() );
449+
if ( $all_atts['captions'] || $all_atts['subtitles'] || $all_atts['description'] || $all_atts['chapters'] ) {
450+
foreach ( $kinds as $kind => $default_label ) {
451+
$track = '';
452+
if ( ! empty( $all_atts[ $kind ] ) ) {
453+
$data = explode( '|', $all_atts[ $kind ] );
454+
if ( empty( $data[0] ) ) {
455+
continue;
456+
}
457+
// Optional lang and language.
458+
$srclang = ( isset( $data[1] ) && ! empty( $data[1] ) ) ? $data[1] : $default_lang;
459+
$srclabel = ( isset( $data[2] ) && ! empty( $data[2] ) ) ? $data[2] : $default_label;
460+
$src = ( is_numeric( $data[0] ) ) ? wp_get_attachment_url( $data[0] ) : $data[0];
461+
$track = '<track kind="' . $kind . '" srclang="' . esc_attr( $srclang ) . '" srclabel="' . esc_attr( $srclabel ) . '" src="' . esc_url( $src ) . '">';
462+
$tracks[] = $track;
463+
}
464+
}
465+
}
466+
412467
// build a video player.
413468
$o = '<video ';
414469
$o .= ' id="' . esc_attr( $all_atts['id'] ) . '"';
@@ -476,6 +531,11 @@ function ableplayer_shortcode( $atts, $content = null ) {
476531
}
477532
$o .= '>';
478533

534+
$o .= $source;
535+
536+
if ( ! empty( $tracks ) ) {
537+
$o .= implode( PHP_EOL, $tracks );
538+
}
479539
// enclosing tags.
480540
if ( ! is_null( $content ) ) {
481541
// run shortcode parser recursively.

‎src/assets/css/admin.css‎

Lines changed: 104 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,12 +164,115 @@
164164
display: block;
165165
}
166166

167+
168+
#ableplayer-generator .shortcode-preview {
169+
display: grid;
170+
grid-template-columns: 1fr auto auto;
171+
column-gap: 10px;
172+
align-items: center;
173+
}
174+
175+
@media screen and ( width <= 481px ) {
176+
#ableplayer-generator .shortcode-preview {
177+
grid-template-columns: 1fr;
178+
}
179+
}
180+
181+
input + .ableplayer-input-description {
182+
margin-top: 4px;
183+
}
184+
167185
.ableplayer-input-description {
168186
display: inline-flex;
169187
align-items: center;
170188
border-left: 4px solid #72aee6;
171-
box-shadow: 0 3px 6px #ddd;
189+
box-shadow: 1px 3px 3px #bbb;
172190
padding: 4px;
191+
position: relative;
192+
}
193+
194+
.ableplayer-copy-button {
195+
display: flex;
196+
align-items: center;
197+
column-gap: 10px;
198+
}
199+
200+
.ableplayer-notice-copied {
201+
display: none;
202+
background: #f5e6ab;
203+
color: #000;
204+
padding: 6px;
205+
border-radius: 3px;
206+
position: absolute;
207+
top: 2rem;
208+
}
209+
210+
.ableplayer-notice-copied.visible {
211+
display: block;
212+
}
213+
214+
.ableplayer-generator-inputs {
215+
display: grid;
216+
grid-template-columns: repeat( 2, 1fr );
217+
column-gap: 20px;
218+
}
219+
220+
@media screen and ( width < 1200px ) {
221+
.ableplayer-generator-inputs {
222+
grid-template-columns: 1fr;
223+
}
224+
}
225+
226+
.ableplayer-generator-inputs input[type=url],
227+
.ableplayer-generator-inputs input[type=text],
228+
.ableplayer-generator-inputs select,
229+
.ableplayer-generator-inputs textarea {
230+
width: 100%;
231+
}
232+
233+
.ableplayer-generator-inputs li label {
234+
display: inline-block;
235+
}
236+
237+
.ableplayer-tracks summary,
238+
.ableplayer-media-preview {
239+
display: flex;
240+
gap: 20px;
241+
padding: 1rem;
242+
border: 1px solid #c5d9ed;
243+
background: #f0f6fc66;
244+
margin-bottom: .5rem;
245+
}
246+
247+
.ableplayer-tracks summary {
248+
display: list-item;
249+
font-weight: 700;
250+
}
251+
252+
.ableplayer-tracks summary:hover {
253+
border-color: #0a4b78;
254+
}
255+
256+
.ableplayer-media-preview > div:has(button) {
257+
display: grid;
258+
gap: 4px;
259+
align-items: center;
260+
}
261+
262+
.ableplayer-media-preview button:nth-of-type(1) {
263+
align-self: end;
264+
}
265+
266+
.ableplayer-media-preview button:nth-of-type(2) {
267+
align-self: start;
268+
}
269+
270+
.ableplayer-media-preview .ableplayer-remove-preview {
271+
display: none;
272+
}
273+
274+
.ableplayer-media-preview.has-value .ableplayer-remove-preview {
275+
display: block;
173276
}
174277

175278
@media screen and ( width < 481px ) {

‎src/assets/js/admin.js‎

Lines changed: 93 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,4 +98,96 @@ jQuery(document).ready(function ($) {
9898
e.preventDefault();
9999
}
100100
};
101-
});
101+
102+
const clipboard = new ClipboardJS('.ableplayer-copy-to-clipboard');
103+
clipboard.on( 'success', function(e) {
104+
let parent = e.trigger.parentNode;
105+
let response = parent.querySelector( '.ableplayer-notice-copied' );
106+
let text = response.textContent;
107+
wp.a11y.speak( text );
108+
response.classList.add( 'visible' );
109+
});
110+
111+
$( '.media-sources' ).hide();
112+
let active = $( '#source_type' ).val();
113+
$( '.media-sources.' + active ).show();
114+
$( '.media-sources.' + active ).find( 'input' ).attr( 'required', 'true' );
115+
$( '#source_type' ).on( 'change', function(e) {
116+
let current = $( this ).val();
117+
$( '.media-sources' ).hide();
118+
$( '.media-sources' ).find( 'input' ).removeAttr( 'required' );
119+
$( '.media-sources.' + current ).show();
120+
$( '.media-sources.' + current ).find( 'input' ).attr( 'required', 'true' );
121+
});
122+
123+
var mediaPopup = '';
124+
125+
function clear_existing() {
126+
if (typeof mediaPopup !== 'string') {
127+
mediaPopup.detach();
128+
mediaPopup = '';
129+
}
130+
}
131+
132+
$('.ableplayer-remove-preview').on( 'click', function (e) {
133+
let controlled = $( this ).data( 'input' );
134+
const container = $( this ).parent().parent( '.ableplayer-media-preview' );
135+
$( '#' + controlled ).val( '' );
136+
$( '.preview-' + controlled + ' > *').remove();
137+
container.removeClass( 'has-value' );
138+
wp.a11y.speak( ableplayer.removed );
139+
});
140+
141+
$('.upload-ableplayer-media').on( 'click', function (e) {
142+
let input = $( this ).data( 'input' );
143+
const idField = document.querySelector( 'input[name="' + input + '"]' );
144+
const displayField = document.querySelector( '.preview-' + input );
145+
const container = $( this ).parent().parent( '.ableplayer-media-preview' );
146+
console.log( container );
147+
let library;
148+
if ( 'media-id' === input ) {
149+
library = [ 'audio', 'video' ];
150+
} else if ( 'poster' === input ) {
151+
library = ['image'];
152+
} else {
153+
library = ['text/vtt'];
154+
}
155+
clear_existing();
156+
mediaPopup = wp.media({
157+
multiple: false, // add, reset, false.
158+
title: ableplayer[ input + 'Title'],
159+
library: {
160+
type: library,
161+
},
162+
button: {
163+
text: ableplayer.buttonName,
164+
}
165+
});
166+
167+
mediaPopup.on('select', function () {
168+
let selection = mediaPopup.state().get('selection'),
169+
id = '',
170+
img = '',
171+
height = '',
172+
width = '',
173+
alt = '';
174+
if (selection) {
175+
id = selection.first().attributes.id;
176+
if ( input === 'poster' ) {
177+
height = ableplayer.thumbHeight;
178+
width = Math.round( ( ( selection.first().attributes.width ) / ( selection.first().attributes.height ) ) * height );
179+
alt = selection.first().attributes.alt;
180+
img = "<img id='event_image' src='" + selection.first().attributes.url + "' width='" + width + "' height='" + height + "' alt='" + alt + "' />";
181+
idField.value = id;
182+
displayField.innerHTML = img;
183+
} else {
184+
displayField.innerHTML = '<pre>' + selection.first().attributes.url.replace( ableplayer.homeUrl, '' ) + '</pre>';
185+
}
186+
container.addClass( 'has-value' );
187+
}
188+
});
189+
190+
mediaPopup.open();
191+
});
192+
193+
});

0 commit comments

Comments
 (0)