CMS Made Simple Forums

Posted: **Thu Feb 11, 2016 6:43 pm**

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=""/>

CMS Made Simple Forums

A bit more styling for the sortable list of CGContentUtils

A bit more styling for the sortable list of CGContentUtils