Code: Select all
module_custom/CGContentUtils/templates/
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"><‐></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=""/>