TheWebShop · No3x · Aug 20, 2015 · Aug 23, 2015 · Aug 23, 2015 · Aug 24, 2015
diff --git a/bootstrap-shortcodes.php b/bootstrap-shortcodes.php
@@ -41,6 +41,7 @@ public function __construct() {
         register_activation_hook( __FILE__, array( &$this, 'add_options_defaults' ) );
         add_action( 'admin_init', array( &$this, 'register_settings' ) );
         add_action( 'admin_menu', array( &$this, 'register_settings_page' ) );
+        add_action( 'wp_ajax_bss_do_shortcode', array( &$this, 'bss_do_shortcode') );
     }
 
     function init() {
@@ -63,6 +64,7 @@ function init() {
         if ( get_user_option( 'rich_editing' ) == 'true' ) {
             add_filter( 'mce_external_plugins', array( &$this, 'regplugins' ) );
             add_filter( 'mce_buttons_3', array( &$this, 'regbtns' ) );
+            add_filter( 'tiny_mce_before_init', array( &$this ,'register_tinymce_settings') );
         }
     }
 
@@ -83,6 +85,21 @@ function regplugins( $plgs) {
         return $plgs;
     }
 
+    function register_tinymce_settings( $settings ) {
+        $settings['ajaxurl'] = admin_url( 'admin-ajax.php' );
+        $settings['bss_nonce'] = wp_create_nonce( 'bss_ajax_do_shortcode' );
+        return $settings;
+    }
+
+    function bss_do_shortcode() {
+        if( false === check_ajax_referer('bss_ajax_do_shortcode', 'nonce', false) ) {
+            _e( 'Security Issue - No Preview', 'bsshortcodes');
+        } else {
+            echo do_shortcode( wp_unslash( $_POST['shortcode'] ) ) ;
+        }
+        wp_die(); // this is required to terminate immediately and return a proper response
+    }
+
     function register_settings_page() {
         add_options_page( __( 'BS Shortcodes', 'bsshortcodes' ), __( 'BS Shortcodes', 'bsshortcodes' ), 'manage_options', __FILE__, array( &$this, 'dw_render_form') );
     }
@@ -162,4 +179,4 @@ function dw_render_form() {
     }
 }
 
-$bscodes = new BootstrapShortcodes();
+$bscodes = new BootstrapShortcodes();
diff --git a/inc/bs_alert.php b/inc/bs_alert.php
@@ -1,11 +1,12 @@
 <?php
 function bs_notice( $params, $content=null ) {
     extract( shortcode_atts( array(
-        'type' => 'unknown'
+        'type' => 'unknown',
+        'dismissible' => 'true'
     ), $params ) );
     $content = preg_replace( '/<br class="nc".\/>/', '', $content );
-    $result =  '<div class="alert alert-'.$type.' alert-dismissable">';
-    $result .= '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
+    $result =  '<div class="alert alert-'.$type.($dismissible=='true'? ' alert-dismissible' : '').'">';
+    $result .= $dismissible=='true'? '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' : '';
     $result .= do_shortcode( $content );
     $result .= '</div>';
     return force_balance_tags( $result );

diff --git a/js/plugins/alerts.html b/js/plugins/alerts.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet" href="../../css/bootstrap.css" />
+    <link rel="stylesheet" href="../../css/admin.css" />
+    <script type="text/javascript" src="../jquery.js"></script>
+    <script type="text/javascript" src="../bootstrap.js"></script>
+    <script type="text/javascript">
+    $(document).ready(function() {
+        function alertType() {
+          return $('#alert-type-input').val();
+        }
+
+        function isDismissable() {
+          return $('#is-dismissable-input').is(':checked');
+        }
+
+        function alertShortcode() {
+          return '[bs_notification type="' + alertType() + '" dismissible="' + isDismissable() + '"]Your content here.[/bs_notification]';
+        }
+
+        function renderAlertPreview() {
+          jQuery.post(top.tinymce.settings.ajaxurl, {
+              'action': 'bss_do_shortcode',
+              'nonce': top.tinymce.settings.bss_nonce,
+              'shortcode': alertShortcode()
+          }, function(response) {
+              $('#alert-demo').html( response );
+          });
+        }
+
+        function insertShortcode(event) {
+          top.tinymce.activeEditor.insertContent(alertShortcode());
+          top.tinymce.activeEditor.windowManager.close();
+          event.preventDefault();
+        }
+
+        function showResetButton() {
+          $('#reset-button').show();
+        }
+
+        function resetPreview() {
+          $('#reset-button').hide();
+          renderAlertPreview();
+        }
+
+        $('#alert-type-input').on('change', renderAlertPreview);
+        $('#is-dismissable-input').on('change', renderAlertPreview);
+        $('#alert-form').on('submit', insertShortcode);
+        // I think Boostrap's custom event "closed.bs.alert" fails to bubble up
+        // so we'll just listen for the actual click on the close button
+        $('#alert-demo').on('click', '.close', showResetButton);
+        $('#reset-button').on('click', resetPreview);
+        resetPreview();
+    });
+    </script>
+</head>
+
+<body>
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-6">
+                <h4>Options</h4>
+                <form id="alert-form">
+                    <div class="form-group">
+                        <select id="alert-type-input" class="form-control">
+                            <option value="success">Success</option>
+                            <option value="warning">Warning</option>
+                            <option value="info">Info</option>
+                            <option value="danger">Danger</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <div class="checkbox">
+                            <label>
+                                <input id="is-dismissable-input" type="checkbox" checked> Dismissable?
+                            </label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <button type="submit" class="btn btn-primary btn-block">Insert Alert Shortcode</button>
+                    </div>
+                </form>
+            </div>
+            <div class="col-xs-6">
+                <h4>Preview</h4>
+                <div id="alert-demo"></div>
+                    <button id="reset-button" class="btn btn-warning">Oops, I guess I needed that</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/js/plugins/alerts.js b/js/plugins/alerts.js
@@ -1,13 +1,14 @@
-tinymce.PluginManager.add( 'bs_alerts', function( editor, url ) {
-    editor.addButton( 'bs_alerts', {
-        type: 'menubutton',
+tinymce.PluginManager.add('bs_alerts', function(editor, url) {
+    editor.addButton('bs_alerts', {
         tooltip: 'Alerts',
-            icon: 'bs-alerts',
-            menu: [
-                 { text: 'Success notification', onclick: function() { editor.insertContent('[bs_notification type="success"]<strong>Well done!</strong>You successfully read <a href="#" class="alert-link">this important alert message</a>.[/bs_notification]');} },
-                 { text: 'Info notification',    onclick: function() { editor.insertContent('[bs_notification type="info"]<strong>Heads up!</strong>This <a href="#" class="alert-link">alert needs your attention</a>, but it\'s not super important.[/bs_notification]');} },
-                 { text: 'Warning notification', onclick: function() { editor.insertContent('[bs_notification type="warning"]<strong>Warning!</strong>Best check yo self, you\'re <a href="#" class="alert-link">not looking too good</a>.[/bs_notification]');} },
-                 { text: 'Error notification',   onclick: function() { editor.insertContent('[bs_notification type="danger"]<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things</a> up and try submitting again.[/bs_notification]');} }
-            ]
+        icon: 'bs-alerts',
+        onclick: function() {
+            tinymce.activeEditor.windowManager.open({
+                title: 'Add an alert',
+                url: url + '/alerts.html',
+                width: 480,
+                height: 180
+            });
+        }
     });
 });