I was experimenting a while back with shortcodes in tandem with Bootstrap's modal windows. I wanted as foolproof a method of allowing a client to inject modal windows in any location within a richtext editable area (provided that the template has jquery and bootstrap.js included and cms:do_shortcodes and showing of buffer contents as explained below). I came up with the following which I haven't yet implemented for a client - just on my own demo/playground site. KK and cheesypoof gave me help with the shortcode - see http://www.couchcms.com/forum/viewtopic.php?f=4&t=8216&p=15352&hilit=shortcode#p15352

I would be interested to have any feedback or ideas on how this could be improved on. It could be easily adapted for functions other than modal windows.

My thoughts were that the elements a client needed to input to create a modal window were too many and complicated and therefore error prone for the usual shortcode method of [modal 'input 1' 'input 2'], especially if the input could include headings and paragraphs. So I created a clonable template - modal.php - for the modal window content and parameters (e.g. width of modal window required by the client) :
Code: Select all
<?php require_once( 'admin/cms.php' ); ?>
<cms:template title='Modal Content' clonable='1' executable='0' order='800'>
<cms:editable name='advice_1' type='message'><strong style="color: #b00;" order='10' >HELP &raquo;&raquo; </strong><strong>Create a Modal Window</strong> <strong style="color: #b00;">&nbsp;&nbsp;1.</strong> enter a Title (above);<strong style="color: #b00;">&nbsp;&nbsp;2.</strong> enter launch text;<strong style="color: #b00;">&nbsp;&nbsp;3.</strong> enter a heading;<strong style="color: #b00;">&nbsp;&nbsp;4.</strong> enter content;<strong style="color: #b00;">&nbsp;&nbsp;5.</strong> click SAVE;<strong style="color: #b00;">&nbsp;&nbsp;6.</strong> return to Modal Windows listing and copy &amp; paste the shortcode into your page;</cms:editable> 
<cms:editable name='modal_launch_text' label='Text used for launching Modal Window'  type='text' order='20' />
<cms:editable type='radio' name="modal_button" label="Launch from a button?" opt_values='No | Yes' opt_selected = 'No' order='30' />
<cms:editable name='modal_heading' label='Modal Window heading'  type='text' order='40'  />
<cms:editable name='modal_content' label='Modal Window content'  type='richtext' order='50'  />
<cms:editable type='radio' name="modal_size" label="Width of Modal Window" opt_values='narrow | standard | wide' opt_selected = 'standard' order='60' />
</cms:template>
<?php COUCH::invoke(); ?>


The template modal.php looks like this - easy for the client to key in modal window heading, content etc:
modal-template.jpg
modal-template.jpg (82.23 KiB) Viewed 2424 times


Create modal window content, click SAVE and this is what the Admin Panel listing of modal.php looks like ...
modal-custom-admin-panel.jpg
modal-custom-admin-panel.jpg (32.84 KiB) Viewed 2424 times

I used the custom admin panel facility described by KK here http://www.couchcms.com/docs/concepts/d ... forms.html to show the shortcode for the modal window the client has just created in the admin panel listing. This shortcode is copied and pasted into a wysiwyg. Modal name is simply k_page_name of the cloned page the client has just created for the modal window.

And here is the shortcode which allows for multiple modal windows on the same page, triggered from either a button or text link.

Code: Select all
$FUNCS->register_shortcode( 'modal', 'modal_handler' );
function modal_handler( $params, $content=null ){
    global $FUNCS, $CTX;
    extract( $FUNCS->get_named_vars(array(
        'name' => '#'
    ), $params) );
   
    $html =<<<EOS
    <cms:pages masterpage='modal.php' page_name='$name' limit='1'>
       <cms:if modal_button eq 'Yes' >   
           <button class="btn btn-modal" data-toggle="modal" data-target="#<cms:show k_page_name />">
              <cms:show modal_launch_text />
            </button>              
      <cms:else />
         <a class="launch-modal" data-toggle="modal" data-target="#<cms:show k_page_name />">
              <cms:show modal_launch_text />
            </a>   
      
      </cms:if>
      <cms:set show_buffer='0' 'global' />
      <cms:capture into='my_buffer'>
      <cms:show my_buffer />      
         <div class="modal fade" id="<cms:show k_page_name />" tabindex="-1" role="dialog" aria-labelledby="<cms:show k_page_name />Label" aria-hidden="true">
           <div class="modal-dialog<cms:if modal_size eq 'wide' > modal-lg</cms:if><cms:if modal_size eq 'narrow' > modal-sm</cms:if>">
             <div class="modal-content">
               <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                 <h4 class="modal-title" id="<cms:show k_page_name />Label"><cms:show modal_heading /></h4>
               </div>
               <div class="modal-body">
                <cms:show modal_content />
               </div>
               <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               </div>
             </div>
           </div>
         </div> 
         <cms:set show_buffer='1' 'global' />
      </cms:capture>
     </cms:pages>
EOS;

    return $FUNCS->embed( $html, $is_code=1 );
}   


As can be seen in the Bootstrap docs section on modal windows http://getbootstrap.com/javascript/#modals the button or text triggering the modal window is separate from the modal window content. This is where the use of the buffer came in to play (again with help from KK and cheesypoof). In kfunctions.php above the button or text to trigger the modal is within the first IF statement within the cms:pages tag. Then the modal content for each modal window is captured in the buffer and then shown as one block of HTML code in the appropriate front end template as follows:
Code: Select all
<cms:if show_buffer ><cms:show my_buffer /></cms:if>