boutique_line shortcode

gistfile1.txt

<?php

/**
 * Class dtbaker_Shortcode_Line
 * handles the creation of [boutique_line] shortcode
 * adds a button in MCE editor allowing easy creation of shortcode
 * creates a wordpress view representing this shortcode in the editor
 * edit/delete button on wp view as well makes for easy shortcode managements.
 * Author: dtbaker@gmail.com
 * Copyright 2014
 */

class dtbaker_Shortcode_Line {
    private static $instance = null;
    public static function get_instance() {
        if ( ! self::$instance )
            self::$instance = new self;
        return self::$instance;
    }

	public function init(){
		add_action( 'admin_init', array( $this, 'init_plugin' ), 20 );
        add_shortcode('boutique_line', array($this,'dtbaker_shortcode_line'));
	}
    public function init_plugin() {
        add_action( 'print_media_templates', array( $this, 'print_media_templates' ) );
        add_action( 'admin_print_footer_scripts', array( $this, 'admin_print_footer_scripts' ), 100 );
	    add_action( 'wp_ajax_dtbaker_mce_line_button', array( $this, 'wp_ajax_dtbaker_mce_line_button' ) );
	    if ( current_user_can('edit_posts') || current_user_can('edit_pages') ){
		    add_filter("mce_external_plugins", array($this, 'mce_plugin'));
		    add_filter("mce_buttons", array($this, 'mce_button'));
	    }
    }
	// front end shortcode displaying:
	public function dtbaker_shortcode_line($atts=array(), $innercontent='', $code='') {
	    extract(shortcode_atts(array(
	        'type' => 'heart',
	    ), $atts));
		if($type == 'rectangle'){
			return '<div class="boutique_line_'.$type.'"><div>'.$innercontent.'</div></div>';
		}else{
			return '<div class="boutique_line_'.$type.'">'.$innercontent.'</div>';
		}
	}

	public function wp_ajax_dtbaker_mce_line_button(){
		header("Content-type: text/javascript");
		?>
		( function() {
		    tinymce.PluginManager.add( 'dtbaker_mce_line', function( editor, url ) {
		        editor.addButton( 'dtbaker_mce_line_button', {
		            text: 'Line',
		            icon: false,
		            onclick: function() {
		                wp.mce.boutique_line.popupwindow(editor);
		            }
		        } );
		    } );
		} )();
		<?php
		die();
	}
	public function mce_plugin($plugin_array){
		$plugin_array['dtbaker_mce_line'] = admin_url('admin-ajax.php?action=dtbaker_mce_line_button');
		return $plugin_array;
	}
	public function mce_button($buttons){
        array_push($buttons, 'dtbaker_mce_line_button');
		return $buttons;
	}
    /**
     * Outputs the view template with the custom setting.
     */
    public function print_media_templates() {
        if ( ! isset( get_current_screen()->id ) || get_current_screen()->base != 'post' )
            return;
        ?>
        <script type="text/html" id="tmpl-editor-line-heart">
	        <# if ( data.type == "rectangle" ) { #>
				<div class="boutique_line_{{ data.type }}"><div>{{ data.innercontent }}</div></div>
			<# }else{ #>
				<div class="boutique_line_{{ data.type }}">{{ data.innercontent }}</div>
			<# } #>
		</script>
        <?php
    }
    public function admin_print_footer_scripts() {
        if ( ! isset( get_current_screen()->id ) || get_current_screen()->base != 'post' )
            return;
        ?>
	    <script type="text/javascript">
		    (function($){
			    var media = wp.media, shortcode_string = 'boutique_line';
			    wp.mce = wp.mce || {};
			    wp.mce.boutique_line = {
					View: {
						template: media.template( 'editor-line-heart' ),
						postID: $('#post_ID').val(),
						initialize: function( options ) {
							this.shortcode = options.shortcode;
						},
						getHtml: function() {
							var options = this.shortcode.attrs.named;
							options['innercontent'] = this.shortcode.content;
							return this.template(options);
						}
					},
				    edit: function( node ) {
					    var data = window.decodeURIComponent( $( node ).attr('data-wpview-text') );
					    var shortcode_data = wp.shortcode.next(shortcode_string, data);
					    var values = shortcode_data.shortcode.attrs.named;
						values['innercontent'] = shortcode_data.shortcode.content;
					    wp.mce.boutique_line.popupwindow(tinyMCE.activeEditor, values);
					},
				    // this is called from our tinymce plugin, also can call from our "edit" function above
				    // wp.mce.boutique_line.popupwindow(tinyMCE.activeEditor, "bird");
				    popupwindow: function(editor, values, onsubmit_callback){
					    if(!values)values={};
					    if(typeof onsubmit_callback != 'function'){
						    onsubmit_callback = function( e ) {
		                        // Insert content when the window form is submitted (this also replaces during edit, handy!)
							    var s = '[' + shortcode_string;
							    for(var i in e.data){
								    if(e.data.hasOwnProperty(i) && i != 'innercontent'){
									    s += ' ' + i + '="' + e.data[i] + '"';
								    }
							    }
							    s += ']';
							    if(typeof e.data.innercontent != 'undefined'){
								    s += e.data.innercontent;
								    s += '[/' + shortcode_string + ']';
							    }
		                        editor.insertContent( s );
		                    };
					    }
		                editor.windowManager.open( {
		                    title: 'Line',
		                    body: [{
		                        type: 'listbox',
		                        name: 'type',
		                        label: 'Line Type',
			                    value: values['type'],
								values: [
							        {text: 'Heart', value: 'heart'},
							        {text: 'Bird', value: 'bird'},
							        {text: 'Little Circle', value: 'circle'},
							        {text: 'Bordered Rectangle', value: 'rectangle'}
							    ]
		                    },{
		                        type: 'textbox',
		                        name: 'innercontent',
		                        label: 'Circle/Rectangle Text',
			                    value: values['innercontent']
		                    }],
		                    onsubmit: onsubmit_callback
		                } );
				    }
				};
			    wp.mce.views.register( 'boutique_line', wp.mce.boutique_line );
			}(jQuery));
	    </script>

        <?php
    }
}

dtbaker_Shortcode_Line::get_instance()->init();