Added button for TinyMCE shortcodes with popup window

library/editor-shortcodes/shortcodes-settings.php

@@ -9,6 +9,7 @@
  */
 
 require( 'grid/shortcode-grid.php' );
+require( 'shortcodes-tinymce.php' );
 
 /**
  *  Normalize Unnamed Attributes

library/editor-shortcodes/shortcodes-tinymce.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * Register FoundationPress Shortcodes Button
+ * Adds FoundationPress button to TinyMCE Editor
+ *
+ * @package WordPress
+ * @subpackage FoundationPress
+ */
+
+// Register FoundationPress Shortcodes Button
+function register_button( $buttons ) {
+   array_push( $buttons, '|', 'foundationpress_shortcodes' );
+   return $buttons;
+}
+
+// Add plugin to TinyMCE external plugins
+function add_plugin( $plugin_array ) {
+   $plugin_array['foundationpress_shortcodes'] = get_template_directory_uri() . '/library/editor-shortcodes/tinymce.js';
+   return $plugin_array;
+}
+
+function foundationpress_shortcodes_css() {
+    wp_enqueue_style('foundationpress_shortcodes_styles', get_template_directory_uri() . '/library/editor-shortcodes/style.css');
+}
+
+add_action('admin_enqueue_scripts', 'foundationpress_shortcodes_css');
+
+// Show button for qualified users
+function foundationpress_shortcodes_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', 'add_plugin' );
+      add_filter( 'mce_buttons', 'register_button' );
+   }
+}
+
+add_action('init', 'foundationpress_shortcodes_button');

library/editor-shortcodes/style.css

@@ -0,0 +1,3 @@
+i.foundationpress-shortcodes-icon {
+    background-image: url('favicon.ico');
+}

library/editor-shortcodes/tinymce.js

@@ -0,0 +1,123 @@
+(function() {
+
+   // Set to the number of columns in your layout
+   var numCols = 12;
+
+   // Create empty array for column values
+   var colValues = [];
+
+   // Populate column values array
+   for (var i = 0; i <= numCols; i++) {
+      colValues.push({text: i.toString(), value: i.toString()})
+   }
+
+   // TinyMCE functionality
+   tinymce.PluginManager.add('foundationpress_shortcodes', function(editor, url) {
+      editor.addButton('foundationpress_shortcodes', {
+         title: 'FoundationPress',
+         type: 'menubutton',
+         icon: 'icon foundationpress-shortcodes-icon',
+         menu: [
+            {
+               text: 'Grid',
+               value: '[fdn-row][/fdn-row]',
+               menu: [
+                  {
+                     text: 'Row',
+                     value: '[fdn-row][/fdn-row]',
+                     onclick: function(e) {
+                        e.stopPropagation();
+                        editor.insertContent(this.value());
+                     }
+                  },
+                  {
+                     text: 'Column',
+                     value: '[fdn-col][/fdn-col]',
+                     onclick: function(e) {
+                        e.stopPropagation();
+                        editor.windowManager.open( {
+                           title: 'Insert Columns',
+                           body: [
+                             {
+                                 type: 'listbox',
+                                 name: 'smlCol',
+                                 label: 'Small Columns',
+                                 values: colValues
+                              },
+                              {
+                                 type: 'listbox',
+                                 name: 'medCol',
+                                 label: 'Medium Columns',
+                                 values: colValues
+                              },
+                              {
+                                 type: 'listbox',
+                                 name: 'lrgCol',
+                                 label: 'Large Columns',
+                                 values: colValues
+                              },
+                              {
+                                 type: 'checkbox',
+                                 name: 'smlCtr',
+                                 label: 'Center Small',
+                                 value: false
+                              },
+                              {
+                                 type: 'checkbox',
+                                 name: 'medCtr',
+                                 label: 'Center Medium',
+                                 value: false
+                              },
+                              {
+                                 type: 'checkbox',
+                                 name: 'lrgCtr',
+                                 label: 'Center Large',
+                                 value: false
+                              }
+                           ],
+                           onsubmit: function(e) {
+                              // Build the column shortcode string
+                              var colString = '[fdn-col';
+
+                              // Small columns
+                              if (e.data.smlCol !== '0') {
+                                 colString += ' sml="' + e.data.smlCol + '"';
+                              }
+
+                              if (e.data.smlCtr === true) {
+                                 colString += ' sml-ctr';
+                              }
+
+                              // Medium columns
+                              if (e.data.medCol !== '0') {
+                                 colString += ' med="' + e.data.medCol + '"';
+                              }
+
+                              if (e.data.medCtr === true) {
+                                 colString += ' med-ctr';
+                              }
+
+                              // Large columns
+                              if (e.data.lrgCol !== '0') {
+                                 colString += ' lrg="' + e.data.lrgCol + '"';
+                              }
+
+                              if (e.data.lrgCtr === true) {
+                                 colString += ' lrg-ctr';
+                              }
+
+                              // Close column shortcode
+                              colString += '][/fdn-col]';
+
+                              // Print shortcode string to the editor
+                              editor.insertContent(colString);
+                           }
+                        });
+                     }
+                  }
+               ] // Grid Submenu 
+            }
+         ] // Main Menu
+      });
+   });
+})();