Monitor Reply

Support

Small Improvement for call_to_action block

Permalink Browser Info Environment January 30, 2014 at 7:54 AM

I was a bit tired of searching the FontAwesome-Page for the right Icon, so I created a preview area in the Block Edit Form. Maybe it's also useful for somebody else.

/packages/alpha/blocks/call_to_action/form_setup.php

<?php   
defined('C5_EXECUTE') or die(_("Access Denied.")); 
$al = Loader::helper('concrete/asset_library');
$form = Loader::helper('form');
$fh = Loader::helper('form/color');
?>
<style>
.ccm-summary-selected-item {
   width: 400px;
}
</style>
<ul class="ccm-dialog-tabs tabs" id="ccm-block-tabs">
   <li class="ccm-nav-active">
      <a href="javascript:void(0)" id="ccm-block-one"><?php   echo t('Text') ?></a>
   </li>

Viewing 15 lines of 178 lines. View entire code block.

 
<?php   
defined('C5_EXECUTE') or die(_("Access Denied.")); 
 
$al = Loader::helper('concrete/asset_library');
$form = Loader::helper('form');
$fh = Loader::helper('form/color');
 
?>
 
<style>
.ccm-summary-selected-item {
   width: 400px;
}
</style>
 
<ul class="ccm-dialog-tabs tabs" id="ccm-block-tabs">
 
   <li class="ccm-nav-active">
      <a href="javascript:void(0)" id="ccm-block-one"><?php   echo t('Text') ?></a>
   </li>
 
   <li>
      <a href="javascript:void(0)" id="ccm-block-two"><?php   echo t('Icon') ?></a>
   </li>   
 
   <li>
      <a href="javascript:void(0)" id="ccm-block-three"><?php   echo t('Button') ?></a>
   </li>
 
   <li>
      <a href="javascript:void(0)" id="ccm-block-four"><?php   echo t('Color') ?></a>
   </li>
 
</ul>
 
<div id="tabs">
 
   <div id="ccm-block-one-tab">
 
      <div class="ccm-block-field-group ">
 
         <div class="clearfix">
            <label style="text-align:left;">   
            <?php  echo t('Title');?>      
            </label>
            <div class="input">
               <?php  echo $form->text('callToActionTitle', $callToActionTitle, array('style'=>'width:334px;'));?>
               <?php  echo $form->select('callToActionTitleSize', array('h1'=>t('H1'), 'h2'=>t('H2'), 'h3'=>t('H3'), 'h4'=>t('H4'), 'h5'=>t('H5'), 'h6'=>t('H6')), $callToActionTitleSize, array('style'=>'width:60px;'));?>
               <span class="help-block"><?php  echo t('Enter a title');?></span>
            </div>
         </div>
 
         <div class="clearfix">
            <label style="text-align:left;">   
            <?php  echo t('Main Content');?>      
            </label>
            <div class="input">
               <?php  echo $form->textarea('callToActionContent', $callToActionContent, array('style'=>'width:400px;min-height:200px;'));?>
               <span class="help-block"><?php  echo t('Enter the Main Content');?></span>
            </div>
         </div>
 
      </div><!-- END .ccm-block-field-group -->
 
   </div>
 
   <div id="ccm-block-two-tab" style="display: none">
 
      <div class="ccm-block-field-group ">
 
         <div class="clearfix">
            <label style="text-align:left;">   
            <?php  echo t('Fonticon');?>      
            </label>
            <div class="input">
               <?php  echo $form->select('callToActionFonticon', $fontAwesome, $callToActionFonticon, array('style'=>'width:390px;'));?>
               <div style="margin: 10px;" id="fonticonprev"></div>
               <span class="help-block"><?php  echo t('Optionally add a Fonticon');?></span>
            </div>
         </div>
 
         <div class="clearfix">
            <label style="text-align:left;">   
            <?php  echo t('Fonticon Size');?>      
            </label>
            <div class="input">
               <?php  echo $form->select('callToActionFonticonSize', array(''=>t('Extra Small'), 'fa-lg'=>t('Small'), 'fa-2x'=>t('Medium'), 'fa-3x'=>t('Large'), 'fa-4x'=>t('XL'), 'fa-5x'=>t('XXL')), $callToActionFonticonSize, array('style'=>'width:390px;'));?>
               <span class="help-block"><?php  echo t('Select a Fonticon Size');?></span>
            </div>
         </div>
 
      </div><!-- END .ccm-block-field-group -->
 
   </div>   
 
   <div id="ccm-block-three-tab" style="display: none">
 
      <div class="ccm-block-field-group">
 
         <div class="clearfix">
               <div class="input">
                  <?php  echo $form->checkbox('enableButton', 1, $enableButton);?> <?php  echo t('Enable Button');?>
               </div>
         </div><!-- END .clearfix -->
 
         <div class="clearfix">
            <label style="text-align:left;">   
            <?php  echo t('Button text');?>      
            </label>
            <div class="input">
               <?php  echo $form->text('callToActionLinkText', $callToActionLinkText, array('style'=>'width:390px;'));?>
               <span class="help-block"><?php  echo t('Enter the Button Text');?></span>
            </div>
         </div>
 
         <div class="clearfix">
            <label style="text-align:left;" for="linkType">   
            <?php  echo t('Button Links to');?>      
            </label>
            <div class="input">   
               <select name="linkType" id="linkType" style="width:400px;">
                  <option value="0" <?php  echo (empty($externalLink) && empty($internalLinkCID) ? 'selected="selected"' : '')?>><?php  echo t('Nothing')?></option>
                  <option value="1" <?php  echo (empty($externalLink) && !empty($internalLinkCID) ? 'selected="selected"' : '')?>><?php  echo t('Another Page')?></option>
                  <option value="2" <?php  echo (!empty($externalLink) ? 'selected="selected"' : '')?>><?php  echo t('External URL')?></option>
               </select>
            </div>
         </div>
 
      <div id="linkTypePage" style="display: none;" class="clearfix">
         <label style="text-align:left;" for="internalLinkCID">   
         <?php  echo t('Choose Page');?>      
         </label>         
         <div class="input">
            <?php  echo  Loader::helper('form/page_selector')->selectPage('internalLinkCID', $internalLinkCID); ?>
         </div>
      </div>
 
      <div id="linkTypeExternal" style="display: none;" class="clearfix">
         <label style="text-align:left;" for="externalLink">   
         <?php  echo t('URL');?>      
         </label>
         <div class="input">
         <?php  echo  $form->text('externalLink', $externalLink, array('style' => 'width: 390px')); ?>
         </div>
      </div>
 
      </div><!-- END .ccm-block-field-group -->
 
   </div>
 
   <div id="ccm-block-four-tab" style="display: none">   
 
      <div class="ccm-block-field-group clearfix">
 
         <div class="clearfix">
            <label style="text-align:left;">   
            <?php  echo t('Title Color');?>      
            </label>
            <div class="input">
               <?php  echo $fh->output('callToActionTitleColor', '', $callToActionTitleColor, array('style'=>'width:390px;'));?>
               <span class="help-block"><?php  echo t('Choose a Title Color');?></span>
            </div>
         </div>
 
         <div class="clearfix">
            <label style="text-align:left;">   
            <?php  echo t('Icon Color');?>      
            </label>
            <div class="input">
               <?php  echo $fh->output('callToActionFonticonColor', '', $callToActionFonticonColor, array('style'=>'width:390px;'));?>
               <span class="help-block"><?php  echo t('Choose an Icon Color');?></span>
            </div>
         </div>         
 
         <div class="clearfix">
            <label style="text-align:left;">   
            <?php  echo t('Content Color');?>      
            </label>
            <div class="input">
               <?php  echo $fh->output('callToActionContentColor', '', $callToActionContentColor, array('style'=>'width:390px;'));?>
               <span class="help-block"><?php  echo t('Choose a Content Color');?></span>
            </div>
         </div>         
 
         <div class="clearfix">
            <label style="text-align:left;">   
            <?php  echo t('Background Color');?>      
            </label>
            <div class="input">
               <?php  echo $fh->output('callToActionBackgroundColor', '', $callToActionBackgroundColor, array('style'=>'width:390px;'));?>
               <span class="help-block"><?php  echo t('Choose a Background Color');?></span>
            </div>
         </div>
 
         <div class="clearfix">
            <label style="text-align:left;">   
            <?php  echo t('Button Color');?>      
            </label>
            <div class="input">
               <?php  echo $form->select('callToActionButtonColor', array('button primary small'=>t('Primary'), 'button secondary small'=>t('Secondary')), $callToActionButtonColor, array('style'=>'width:390px;'));?>
               <span class="help-block"><?php  echo t('Choose a Button Color');?></span>
            </div>
         </div>         
 
      </div><!-- END .ccm-block-field-group -->
   </div>
</div>
<script type="text/javascript">
$( "#callToActionFonticon option:selected" ).each(function() {
   $('#fonticonprev').html('<i style="color: #000;" class="fa-5x ff-center fa '+$(this).val()+'"></i>')
});
$('#callToActionFonticon').change(function(){
   $( "#callToActionFonticon option:selected" ).each(function() {
      $('#fonticonprev').html('<i style="color: #000;" class="fa-5x ff-center fa '+$(this).val()+'"></i>')
    });
});
</script>

Type:	Discussion
Status:	New

formigo replied on Jan 31, 2014 at 7:58 am Permalink Reply

Hi Stephan,

Good job! Nice one for posting this I am sure it will come in very useful for other users.

We will see if it can be integrated in to the package so thanks for taking the time to figure this out.

Cheers
Andy
The Formigo Guys

Alpha

Support

Small Improvement for call_to_action block

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post