• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post subject: A bit more styling for the sortable list of CGContentUtils
PostPosted: Thu Feb 11, 2016 6:43 pm 
Offline
Forum Members
Forum Members

Joined: Sat Aug 29, 2009 3:00 pm
Posts: 221
I made a replacement template for the sortable list in CGContentUtils. To use it, create a folder (in your CMSMS root) called:
Code:
module_custom/CGContentUtils/templates/

So actually three folders/levels.

Create a file there called sortable_list.tpl and open it. Paste the following:
Code:
{* 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">&lt;&dash;&gt;</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=""/>


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
A2 Hosting