Permalink
Browse files

Shortcode generator for tinymce (first draft)

  • Loading branch information...
1 parent 54b16d7 commit 6b9418ad8a0c0e05d664e8c4a32f1e3929899cd5 @nosecreek nosecreek committed Jan 23, 2013
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
@@ -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
@@ -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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6b9418a

Please sign in to comment.