├── js ├── img │ ├── info.jpg │ ├── danger.jpg │ ├── default.jpg │ ├── primary.jpg │ ├── success.jpg │ └── warning.jpg └── mce-button.js ├── css └── mce-button.css ├── README.md └── GWP_bs3_panel_shortcode.php /js/img/info.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bainternet/bs3_panel_shortcode/HEAD/js/img/info.jpg -------------------------------------------------------------------------------- /js/img/danger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bainternet/bs3_panel_shortcode/HEAD/js/img/danger.jpg -------------------------------------------------------------------------------- /js/img/default.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bainternet/bs3_panel_shortcode/HEAD/js/img/default.jpg -------------------------------------------------------------------------------- /js/img/primary.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bainternet/bs3_panel_shortcode/HEAD/js/img/primary.jpg -------------------------------------------------------------------------------- /js/img/success.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bainternet/bs3_panel_shortcode/HEAD/js/img/success.jpg -------------------------------------------------------------------------------- /js/img/warning.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bainternet/bs3_panel_shortcode/HEAD/js/img/warning.jpg -------------------------------------------------------------------------------- /css/mce-button.css: -------------------------------------------------------------------------------- 1 | i.mce-i-bs3_panel:before { 2 | font-family: "dashicons"; 3 | content: "\f116"; 4 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | bs3_panel_shortcode 2 | =================== 3 | 4 | A plugin to add Bootstrap 3 panel shortcode as a part to the GWP tutorial a part of the Take your shortcodes to the ultimate level tutorial http://generatewp.com/?p=11889 5 | 6 | 7 | [![Analytics](https://ga-beacon.appspot.com/UA-37587544-3/bs3_panel_shortcode/main)](https://github.com/bainternet/bs3_panel_shortcode) 8 | -------------------------------------------------------------------------------- /GWP_bs3_panel_shortcode.php: -------------------------------------------------------------------------------- 1 | shortcode_tag, array( $this, 'shortcode_handler' ) ); 27 | 28 | if ( is_admin() ){ 29 | add_action('admin_head', array( $this, 'admin_head') ); 30 | add_action( 'admin_enqueue_scripts', array($this , 'admin_enqueue_scripts' ) ); 31 | } 32 | } 33 | 34 | /** 35 | * shortcode_handler 36 | * @param array $atts shortcode attributes 37 | * @param string $content shortcode content 38 | * @return string 39 | */ 40 | function shortcode_handler($atts , $content = null){ 41 | // Attributes 42 | extract( shortcode_atts( 43 | array( 44 | 'header' => 'no', 45 | 'footer' => 'no', 46 | 'type' => 'default', 47 | ), $atts ) 48 | ); 49 | 50 | //make sure the panel type is a valid styled type if not revert to default 51 | $panel_types = array('primary','success','info','warning','danger','default'); 52 | $type = in_array($type, $panel_types)? $type: 'default'; 53 | 54 | //start panel markup 55 | $output = '
'; 56 | 57 | //check if panel has a header 58 | if ('no' != $header) 59 | $output .= '
'.$header.'
'; 60 | 61 | //add panel body content and allow shortcode in it 62 | $output .= '
'.trim(do_shortcode( $content )).'
'; 63 | 64 | //check if panel has a footer 65 | if ('no' != $footer) 66 | $output .= '
'.$footer.'
'; 67 | 68 | //add closing div tag 69 | $output .= '
'; 70 | 71 | //return shortcode output 72 | return $output; 73 | } 74 | 75 | /** 76 | * admin_head 77 | * calls your functions into the correct filters 78 | * @return void 79 | */ 80 | function admin_head() { 81 | // check user permissions 82 | if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) { 83 | return; 84 | } 85 | 86 | // check if WYSIWYG is enabled 87 | if ( 'true' == get_user_option( 'rich_editing' ) ) { 88 | add_filter( 'mce_external_plugins', array( $this ,'mce_external_plugins' ) ); 89 | add_filter( 'mce_buttons', array($this, 'mce_buttons' ) ); 90 | } 91 | } 92 | 93 | /** 94 | * mce_external_plugins 95 | * Adds our tinymce plugin 96 | * @param array $plugin_array 97 | * @return array 98 | */ 99 | function mce_external_plugins( $plugin_array ) { 100 | $plugin_array[$this->shortcode_tag] = plugins_url( 'js/mce-button.js' , __FILE__ ); 101 | return $plugin_array; 102 | } 103 | 104 | /** 105 | * mce_buttons 106 | * Adds our tinymce button 107 | * @param array $buttons 108 | * @return array 109 | */ 110 | function mce_buttons( $buttons ) { 111 | array_push( $buttons, $this->shortcode_tag ); 112 | return $buttons; 113 | } 114 | 115 | /** 116 | * admin_enqueue_scripts 117 | * Used to enqueue custom styles 118 | * @return void 119 | */ 120 | function admin_enqueue_scripts(){ 121 | wp_enqueue_style('bs3_panel_shortcode', plugins_url( 'css/mce-button.css' , __FILE__ ) ); 122 | } 123 | }//end class 124 | 125 | new GWP_bs3_panel_shortcode(); -------------------------------------------------------------------------------- /js/mce-button.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | tinymce.PluginManager.add('bs3_panel', function( editor, url ) { 3 | var sh_tag = 'bs3_panel'; 4 | 5 | //helper functions 6 | function getAttr(s, n) { 7 | n = new RegExp(n + '=\"([^\"]+)\"', 'g').exec(s); 8 | return n ? window.decodeURIComponent(n[1]) : ''; 9 | }; 10 | 11 | function html( cls, data ,con) { 12 | var placeholder = url + '/img/' + getAttr(data,'type') + '.jpg'; 13 | data = window.encodeURIComponent( data ); 14 | content = window.encodeURIComponent( con ); 15 | 16 | return ''; 17 | } 18 | 19 | function replaceShortcodes( content ) { 20 | return content.replace( /\[bs3_panel([^\]]*)\]([^\]]*)\[\/bs3_panel\]/g, function( all,attr,con) { 21 | return html( 'wp-bs3_panel', attr , con); 22 | }); 23 | } 24 | 25 | function restoreShortcodes( content ) { 26 | return content.replace( /(?:]+)?>)*(]+>)(?:<\/p>)*/g, function( match, image ) { 27 | var data = getAttr( image, 'data-sh-attr' ); 28 | var con = getAttr( image, 'data-sh-content' ); 29 | 30 | if ( data ) { 31 | return '

[' + sh_tag + data + ']' + con + '[/'+sh_tag+']

'; 32 | } 33 | return match; 34 | }); 35 | } 36 | 37 | //add popup 38 | editor.addCommand('bs3_panel_popup', function(ui, v) { 39 | //setup defaults 40 | var header = ''; 41 | if (v.header) 42 | header = v.header; 43 | var footer = ''; 44 | if (v.footer) 45 | footer = v.footer; 46 | var type = 'default'; 47 | if (v.type) 48 | type = v.type; 49 | var content = ''; 50 | if (v.content) 51 | content = v.content; 52 | 53 | editor.windowManager.open( { 54 | title: 'Bootstrap Panel Shortcode', 55 | body: [ 56 | { 57 | type: 'textbox', 58 | name: 'header', 59 | label: 'Panel Header', 60 | value: header, 61 | tooltip: 'Leave blank for none' 62 | }, 63 | { 64 | type: 'textbox', 65 | name: 'footer', 66 | label: 'Panel Footer', 67 | value: footer, 68 | tooltip: 'Leave blank for none' 69 | }, 70 | { 71 | type: 'listbox', 72 | name: 'type', 73 | label: 'Panel Type', 74 | value: type, 75 | 'values': [ 76 | {text: 'Default', value: 'default'}, 77 | {text: 'Info', value: 'info'}, 78 | {text: 'Primary', value: 'primary'}, 79 | {text: 'Success', value: 'success'}, 80 | {text: 'Warning', value: 'warning'}, 81 | {text: 'Danger', value: 'danger'} 82 | ], 83 | tooltip: 'Select the type of panel you want' 84 | }, 85 | { 86 | type: 'textbox', 87 | name: 'content', 88 | label: 'Panel Content', 89 | value: content, 90 | multiline: true, 91 | minWidth: 300, 92 | minHeight: 100 93 | } 94 | ], 95 | onsubmit: function( e ) { 96 | var shortcode_str = '[' + sh_tag + ' type="'+e.data.type+'"'; 97 | //check for header 98 | if (typeof e.data.header != 'undefined' && e.data.header.length) 99 | shortcode_str += ' header="' + e.data.header + '"'; 100 | //check for footer 101 | if (typeof e.data.footer != 'undefined' && e.data.footer.length) 102 | shortcode_str += ' footer="' + e.data.footer + '"'; 103 | 104 | //add panel content 105 | shortcode_str += ']' + e.data.content + '[/' + sh_tag + ']'; 106 | //insert shortcode to tinymce 107 | editor.insertContent( shortcode_str); 108 | } 109 | }); 110 | }); 111 | 112 | //add button 113 | editor.addButton('bs3_panel', { 114 | icon: 'bs3_panel', 115 | tooltip: 'BootStrap Panel', 116 | onclick: function() { 117 | editor.execCommand('bs3_panel_popup','',{ 118 | header : '', 119 | footer : '', 120 | type : 'default', 121 | content: '' 122 | }); 123 | } 124 | }); 125 | 126 | //replace from shortcode to an image placeholder 127 | editor.on('BeforeSetcontent', function(event){ 128 | event.content = replaceShortcodes( event.content ); 129 | }); 130 | 131 | //replace from image placeholder to shortcode 132 | editor.on('GetContent', function(event){ 133 | event.content = restoreShortcodes(event.content); 134 | }); 135 | 136 | //open popup on placeholder double click 137 | editor.on('DblClick',function(e) { 138 | var cls = e.target.className.indexOf('wp-bs3_panel'); 139 | if ( e.target.nodeName == 'IMG' && e.target.className.indexOf('wp-bs3_panel') > -1 ) { 140 | var title = e.target.attributes['data-sh-attr'].value; 141 | title = window.decodeURIComponent(title); 142 | console.log(title); 143 | var content = e.target.attributes['data-sh-content'].value; 144 | editor.execCommand('bs3_panel_popup','',{ 145 | header : getAttr(title,'header'), 146 | footer : getAttr(title,'footer'), 147 | type : getAttr(title,'type'), 148 | content: content 149 | }); 150 | } 151 | }); 152 | }); 153 | })(); --------------------------------------------------------------------------------