A bit more styling for the sortable list of CGContentUtils

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Post Reply
Guido
Forum Members
Forum Members
Posts: 221
Joined: Sat Aug 29, 2009 3:00 pm

A bit more styling for the sortable list of CGContentUtils

Post by Guido »

I made a replacement template for the sortable list in CGContentUtils. To use it, create a folder (in your CMSMS root) called:

Code: Select all

module_custom/CGContentUtils/templates/
So actually three folders/levels.

Create a file there called sortable_list.tpl and open it. Paste the following:

Code: Select all

{* sortable list template *}
<style type="text/css">
#{$selectarea_prefix}_select {
}
#{$selectarea_prefix}_master {
}
table.select_list {
  width: 60%;
  margin: 0 auto;
  padding: 7px;
}
.sortlist {
  margin: 0 !important;
  height: auto;
  overflow-y: scroll;
}
.sortlist_cell {
  width: 45%;
}
#selected_cell ul li {
  background: rgb(200,200,200);
  font-weight: bold;
}
#source_cell ul li {
  background: rgb(230,230,230);
}
#separator_cell {
  text-align: center;
  width: 10%;
  font-weight: bold;
}
.select_item {
  cursor: move;
  box-sizing: border-box;
  padding: 0.7em;
  border-radius: 5px;
  margin: 0 0 5px 0;
  list-style-type: none;
  text-align: center;
  transition: background 300ms ease;
}
.column_title {
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 7px 7px 0 0;
  padding: 5px;
  margin: 3px;
  width: 45%;
}
.column_title:first-child {
  background: #9bffb5;
}
.column_title:nth-child(3n) {
  background: #ffa79b;
}
</style>
<__script__ type='text/javascript'>
$(document).ready(function(){
  var sortable_1 = $('#{$selectarea_prefix}_select');
  var sortable_2 = $('#{$selectarea_prefix}_master');
  var h = Math.max(sortable_1.height(),sortable_2.height());
  sortable_1.height(h); sortable_2.height(h);
  sortable_1.sortable({
    connectWith: sortable_2,
    update: function(ev,ui) {
      if( {$max_selected} > 0 && $('li',this).length > {$max_selected} ) {
        $(ui.sender).sortable('cancel');
      }
      else {
        var str = $(this).sortable('toArray').join();
        $('#{$selectarea_prefix}').val(str);
      }
    }
  })
  sortable_2.sortable({
    connectWith: sortable_1
  })
});
var allowduplicates = {$allowduplicates};
var valuefld = "{$selectarea_prefix}";
var max_selected = {$max_selected};
</__script>

<table class="select_list">
    <td class="column_title" style="text-align: center;">{$label_left}</td>
    <td></td>
    <td class="column_title" style="text-align: center;">{$label_right}</td>
  </tr>
  <tr class="select_list">
    <td valign="top" class="sortlist_cell" id="selected_cell">
      {* left column - for the selected items *}
      <ul id="{$selectarea_prefix}_select" class="sortlist" title="{$cge->Lang('sortablelist_selectlist')}">
      {if isset($selectarea_selected)}
      {foreach $selectarea_selected as $key => $val}
        <li id="{$key}" class="select_item">{$val}</li>
      {/foreach}
      {/if}
      </ul>
    </td>
    <td id="separator_cell"><&dash;></td>
    <td class="sortlist_cell" id="source_cell">
      {* right column - for the master list *}
      <ul id="{$selectarea_prefix}_master" class="sortlist" title="{$cge->Lang('sortablelist_masterlist')}">
      {foreach $selectarea_masterlist as $key => $val}
         {if !isset($selectarea_selected) || !isset($selectarea_selected[$key])}
         <li id="{$key}" class="select_item">{$val}</li>
	 {/if}
      {/foreach}
      </ul>
    </td>
  </tr>
</table>
<input type="hidden" id="{$selectarea_prefix}" name="{$selectarea_prefix}" value=""/>
Post Reply

Return to “Tips and Tricks”