Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Shortcode generator for tinymce (first draft)

  • Loading branch information...
commit 6b9418ad8a0c0e05d664e8c4a32f1e3929899cd5 1 parent 54b16d7
@nosecreek nosecreek authored
Showing with 211 additions and 0 deletions.
  1. +171 −0 mce-button.js
  2. +40 −0 video-js.php
  3. BIN  video-js.png
View
171 mce-button.js
@@ -0,0 +1,171 @@
+(function() {
+ tinymce.create('tinymce.plugins.VideoJS', {
+ init: function(ed, url) {
+ ed.addButton('videojs', {
+ title: 'Insert HTML5 Video',
+ image: url+'/video-js.png',
+ onclick: function() {
+ var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
+ W = W - 80;
+ H = H - 124;
+ tb_show('Insert VideoJS HTML5 Video', '#TB_inline?inlineId=videoJSpopup&width=' + W + '&height=' + H);
+ jQuery("#TB_window").animate({
+ height: H + 40 + 'px'
+ });
+ return false;
+ }
+ });
+ },
+ createControl: function(n, cm) {
+ return null;
+ },
+ getInfo: function() {
+ return {
+ longname: 'VideoJS for WordPress',
+ author: 'Dustin Lammiman',
+ authorurl: 'http://www.nosecreekweb.ca/',
+ infourl: 'http://blog.nosecreekweb.ca/',
+ version: '1.0'
+ };
+ }
+ });
+ tinymce.PluginManager.add('videojs', tinymce.plugins.VideoJS);
+
+ jQuery(function() {
+ //get the checkbox defaults
+ var autoplay_default = jQuery('#videojs-autoplay-default').val();
+ if ( autoplay_default == 'on' )
+ autoplay_checked = ' checked';
+ else
+ autoplay_checked = '';
+
+ var preload_default = jQuery('#videojs-preload-default').val();
+ if ( preload_default == 'on' )
+ preload_checked = ' checked';
+ else
+ preload_checked = '';
+
+
+ var form = jQuery('<div id="videoJSpopup">\
+ <table id="videoJStable" class="form-table">\
+ <tr>\
+ <th><label for="videojs-mp4">MP4 Source</label></th>\
+ <td><input type="text" name="videojs-mp4" id="videojs-mp4"><br>\
+ <small>The location of the h.264/MP4 source for the video.</small></td>\
+ </tr>\
+ <tr>\
+ <th><label for="videojs-webm">WebM Source</label></th>\
+ <td><input type="text" name="videojs-webm" id="videojs-webm"><br>\
+ <small>The location of the VP8/WebM source for the video.</small></td>\
+ </tr>\
+ <tr>\
+ <th><label for="videojs-ogg">OGG Source</label></th>\
+ <td><input type="text" name="videojs-ogg" id="videojs-ogg"><br>\
+ <small>The location of the Theora/Ogg source for the video.</small></td>\
+ </tr>\
+ <tr>\
+ <th><label for="videojs-poster">Poster Image</label></th>\
+ <td><input type="text" name="videojs-poster" id="videojs-poster"><br>\
+ <small>The location of the poster frame for the video.</small></td>\
+ </tr>\
+ <tr>\
+ <th><label for="videojs-width">Width</label></th>\
+ <td><input type="text" name="videojs-width" id="videojs-width"><br>\
+ <small>The width of the video.</small></td>\
+ </tr>\
+ <tr>\
+ <th><label for="videojs-height">Height</label></th>\
+ <td><input type="text" name="videojs-height" id="videojs-height"><br>\
+ <small>The height of the video.</small></td>\
+ </tr>\
+ <tr>\
+ <th><label for="videojs-preload">Preload</label></th>\
+ <td><input id="videojs-preload" name="videojs-preload" type="checkbox"'+preload_checked+' /></td>\
+ </tr>\
+ <tr>\
+ <th><label for="videojs-autoplay">Autoplay</label></th>\
+ <td><input id="videojs-autoplay" name="videojs-autoplay" type="checkbox"'+autoplay_checked+' /></td>\
+ </tr>\
+ <tr>\
+ <th><label for="videojs-loop">Loop</label></th>\
+ <td><input id="videojs-loop" name="videojs-loop" type="checkbox" /></td>\
+ </tr>\
+ <tr>\
+ <th><label for="videojs-controls">Show Player Controls</label></th>\
+ <td><input id="videojs-controls" name="videojs-controls" type="checkbox" checked /></td>\
+ </tr>\
+ <tr>\
+ <th><label for="videojs-id">ID</label></th>\
+ <td><input type="text" name="videojs-id" id="videojs-id"><br>\
+ <small>Add a custom ID to your video player.</small></td>\
+ </tr>\
+ <tr>\
+ <th><label for="videojs-class">Class</label></th>\
+ <td><input type="text" name="videojs-class" id="videojs-class"><br>\
+ <small>Add a custom class to your player. Use full for floating the video player using \'alignleft\' or \'alignright\'.</small></td>\
+ </tr>\
+ </table>\
+ <p class="submit">\
+ <input type="button" id="videojs-submit" class="button-primary" value="Insert Video" name="submit" />\
+ </p>\
+ </div>');
+ var table = form.find('table');
+ form.appendTo('body').hide();
+
+
+ form.find('#videojs-submit').click(function(){
+
+ var shortcode = '[video';
+
+ //text options
+ var options = {
+ 'mp4' : '',
+ 'webm' : '',
+ 'ogg' : '',
+ 'poster' : '',
+ 'width' : '',
+ 'height' : '',
+ 'id' : '',
+ 'class' : ''
+ };
+
+ for(var index in options) {
+ var value = table.find('#videojs-' + index).val();
+
+ // attaches the attribute to the shortcode only if it's different from the default value
+ if ( value !== options[index] )
+ shortcode += ' ' + index + '="' + value + '"';
+ }
+
+ //checkbox options
+ options = {
+ 'autoplay' : autoplay_default,
+ 'preload' : preload_default,
+ 'loop' : '',
+ 'controls' : 'on'
+ };
+
+ for(var index in options) {
+ var value = table.find('#videojs-' + index).is(':checked');
+
+ if ( value == true )
+ checked = 'on';
+ else
+ checked = '';
+
+ // attaches the attribute to the shortcode only if it's different from the default value
+ if ( checked !== options[index] )
+ shortcode += ' ' + index + '="' + value + '"';
+ }
+
+ //close the shortcode
+ shortcode += ']';
+
+ // inserts the shortcode into the active editor
+ tinyMCE.activeEditor.execCommand('mceInsertContent', 0, shortcode);
+
+ // closes Thickbox
+ tb_remove();
+ });
+ });
+})();
View
40 video-js.php
@@ -179,4 +179,44 @@ function track_shortcode($atts, $content=null){
}
add_shortcode('track', 'track_shortcode');
+
+/* TinyMCE Shortcode Generator *//*
+function video_js_button($context) {
+
+ //path to my icon
+ $img = plugin_dir_url( __FILE__ ) . 'video-js.png';
+
+ //our popup's title
+ $title = 'Add HTML5 Video';
+
+ //append the icon
+ $context .= "<a href='" . plugin_dir_url( __FILE__ ) . "generator.php?KeepThis=true&TB_iframe=true&width=300&height=200' class='thickbox' title='{$title}'>
+ <img src='{$img}' /></a>";
+
+ return $context;
+}
+add_action('media_buttons_context', 'video_js_button');*/
+
+function video_js_button() {
+ if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
+ return;
+ if ( get_user_option('rich_editing') == 'true' ) {
+ add_filter('mce_external_plugins', 'video_js_mce_plugin');
+ add_filter('mce_buttons', 'register_video_js_button');
+ }
+}
+add_action('init', 'video_js_button');
+
+function register_video_js_button($buttons) {
+ array_push($buttons, "|", "videojs");
+ $options = get_option('videojs_options');
+ echo('<div style="display:none"><input type="hidden" id="videojs-autoplay-default" value="' . $options['videojs_autoplay'] . '"><input type="hidden" id="videojs-preload-default" value="' . $options['videojs_preload'] . '"></div>');
+ return $buttons;
+}
+
+function video_js_mce_plugin($plugin_array) {
+ $plugin_array['videojs'] = plugins_url( 'mce-button.js' , __FILE__ );
+ return $plugin_array;
+}
+
?>
View
BIN  video-js.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.