Modal

Added optional "data" attribute to the Button shortcode to accomidate modals
jacobdubail · Sep 19, 2013 · d197946 · d197946
1 parent 4a84d6e
commit d197946
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -33,6 +33,7 @@ The plugin doesn't support all Bootstrap elements yet, but most of them.
 * [Media Objects](#media-objects)
 * [Jumbotron](#jumbotron)
 * [Thumbnails](#thumbnails)
+* [Modals](#modals)
 * [Responsive utilities](#responsive-utilities)
 
 ## Usage
@@ -77,6 +78,9 @@ type | The type of the button | optional | default, primary, success, info, warn
 size | The size of the button | optional | xs, sm, lg | none
 xclass | Any extra classes you want to add | optional | any text | none
 link | The url you want the button to link to | optional | any valid link | none
+data | Data attribute and value pairs with a comma between the values, pairs separated by spaces see example below | optional | any text | none
+
+	[button type="success" size="lg" link="#" data="dismiss,modal toggle,tooltip"] … [/button]
 
 [Bootstrap button documentation](http://getbootstrap.com/css/#buttons)
 
@@ -280,3 +284,20 @@ visible | Sizes at which this element is visible (separated by spaces) | optiona
 hidden | Sizes at which this element is hidden (separated by spaces) | optional | xs, sm, md, lg  | false
 
 [Bootstrap emphasis classes documentation](http://getbootstrap.com/css/#type-emphasis)
+
+### Modals
+    [modal text="This is my modal" title="Modal Title Goes Here" xclass="btn btn-primary btn-large"]
+        …
+        [modal-footer]
+            [button type="primary" link="#" data="dismiss,modal"]Dismiss[/button]
+        [/modal-footer]
+    [/modal]
+
+Parameter | Description | Required | Values | Default
+--- | --- | --- | --- | ---
+text | Text of the modal trigger link | required | any text  | none
+title | Title of the modal popup | required | any text | none
+xclass | Any extra classes you want to add | optional | any text | none
+
+[Bootstrap modal documentation](http://getbootstrap.com/javascript/#modals)
+
diff --git a/bootstrap-shortcodes.php b/bootstrap-shortcodes.php
@@ -80,6 +80,9 @@ function add_shortcodes() {
     add_shortcode('emphasis', array( $this, 'bs_emphasis' ));
     add_shortcode('thumbnail', array( $this, 'bs_thumbnail' ));
     add_shortcode('responsive', array( $this, 'bs_responsive' ));
+    add_shortcode('modal', array( $this, 'bs_modal' ));
+    add_shortcode('modal-footer', array( $this, 'bs_modal_footer' ));
+
 
   }
 
@@ -98,14 +101,23 @@ function bs_button($atts, $content = null) {
         "type" => false,
         "size" => false,
         "link" => '',
-        "xclass" => false
+        "xclass" => false,
+        "data" => false
      ), $atts));
-
+      if($data) { 
+          $data = explode(' ',$data);
+          foreach($data as $d):
+            $d = explode(',',$d);    
+                $data_props .= 'data-'.$d[0]. '="'.$d[1].'" ';
+          endforeach;
+      }
      $return  =  '<a href="' . $link . '" class="btn';
      $return .= ($type) ? ' btn-' . $type : ' btn-default';
      $return .= ($size) ? ' btn-' . $size : '';
      $return .= ($xclass) ? ' ' . $xclass : '';
-     $return .= '">' . do_shortcode( $content ) . '</a>';
+     $return .= '"';
+     $return .= ($data_props) ? ' ' . $data_props : '';
+     $return .= '>' . do_shortcode( $content ) . '</a>';
 
      return $return;
   }
@@ -767,6 +779,52 @@ function bs_responsive( $atts, $content = null ) {
 
   }
 
+  /*--------------------------------------------------------------------------------------
+    *
+    * bs_modal
+    *
+    * @author M. W. Delaney
+    * @since 1.0
+    *
+    *-------------------------------------------------------------------------------------*/
+  function bs_modal( $atts, $content = null ) {
+    extract(shortcode_atts(array(
+      "text" => '',
+      "title" => '',
+      "xclass" => ''
+    ), $atts));
+    $sani_title = 'modal'. sanitize_title( $title );
+    $return .='<a data-toggle="modal" href="#'. $sani_title .'" class="'. $xclass .'">'. $text .'</a>';
+    $return .='<div class="modal fade" id="'. $sani_title .'" tabindex="-1" role="dialog" aria-hidden="true">';
+    $return .='<div class="modal-dialog">';
+    $return .='<div class="modal-content">';
+    $return .='<div class="modal-header">';
+    $return .='<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
+    $return .='<h4 class="modal-title">'. $title .'</h4>';
+    $return .='</div>';
+    $return .='<div class="modal-body">';
+    $return .= do_shortcode($content);
+    $return .='</div>';
+    $return .='</div><!-- /.modal-content -->';
+    $return .='</div><!-- /.modal-dialog -->';
+    $return .='</div><!-- /.modal -->';  
+    return $return;
+
+  }
+
+  /*--------------------------------------------------------------------------------------
+    *
+    * bs_modal_footer
+    *
+    * @author M. W. Delaney
+    * @since 1.0
+    *
+    *-------------------------------------------------------------------------------------*/
+  function bs_modal_footer( $atts, $content = null ) {
+    return '<div class="modal-footer">' . do_shortcode( $content ) . '</div>';
+
+  }
+
 }
 
 new BoostrapShortcodes();