by
Gwil » Thu Feb 20, 2020 12:20 am
@KK, @trendoman, heheh, OK then here goes.
edit: replaced field_relation_advanced.html with correct versionBasically I created a snippet which sets some variables for templates which require a custom listing.
I then modified the theme files in
addons/relation/theme to use these variables to create different views.
There may be a more elegant solution but this seems to be working for now
DetailsI added
'advanced-gui.list-vars.html' to my snippets folder:
- Code: Select all
<cms:hide>
gwil - set some local variables to determine if custom rows are needed
- at the moment only custom listing for image-library.php template,
otherwise use default.
add further tpl_ options for additional templates.
</cms:hide>
<cms:set tpl_default = '0' />
<cms:set tpl_gal = '1' />
<cms:set inp_gal = 'gallery_images' />
<cms:set is_gal = "f_<cms:show inp_gal />" />
<cms:set tpl_gal_name = 'image-library' />
<cms:set tpl_gal_filename = "<cms:show tpl_gal_name/>.php" />
<cms:if k_template_name = "<cms:show tpl_gal_filename />">
<cms:hide>
gwil - we have custom styling for this template so set some vars
</cms:hide>
<cms:set tpl_is = "<cms:show tpl_gal />" />
<cms:else />
<cms:set tpl_is = tpl_default />
</cms:if>
<cms:hide>
gwil - set list length to number of options unless over max_opts, then set to max_opts
</cms:hide>
<cms:set max_opts = '8' />
<cms:set opt_count = "<cms:array_count k_options />" />
<cms:if opt_count gt max_opts >
<cms:set sel_rows = max_opts />
<cms:else />
<cms:set sel_rows = opt_count />
</cms:if>
Then modified these files in
addons/relation/theme.
field_relation_advanced.html- Code: Select all
<cms:hide>
gwil - set some local variables
</cms:hide>
<cms:embed 'advanced-gui-list-vars.html' />
<cms:hide>
gwil - is it the image-gallery reverse gallery_images?
</cms:hide>
<cms:if k_field_input_name = is_gal >
<cms:set sel_name = "<cms:show is_gal />_select" />
<cms:hide>
gwil - we have custom styling for this input so set some vars
</cms:hide>
<cms:set wrp_class = "<cms:show inp_gal />" />
<cms:minify 'css'>
<style>/*CODE*/
.<cms:show inp_gal/> {
width: 100%;
max-width: 50rem;
}
.<cms:show inp_gal/> > select {
height: auto!important;
padding-right: 8px!important;
}
.<cms:show inp_gal/> > select > option {
height: 48px;
line-height: 48px;
vertical-align: middle;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 4px 4px;
padding-left: 56px!important;
}
.<cms:show inp_gal/> > select > option + option {
border-top: 1px solid #ddd;
}
.select-odd {
background-color: #eee;
}
/*CODE*/</style>
</cms:minify>
</cms:if>
<div class="select dropdown k-relation-ex<cms:if k_has_one> has-one</cms:if> <cms:show wrp_class />">
<select name="<cms:show k_field_input_id />_select" id="<cms:show k_field_input_id />_select" class="k-relation-select" size="<cms:if k_has_one>1<cms:else /><cms:show sel_rows /></cms:if>" multiple>
<cms:each k_options as='value'>
<cms:if k_field_input_name = is_gal >
<cms:set is_even = "<cms:mod k_count '2' />" />
<cms:if is_even >
<cms:set opt_class = "select-even" />
<cms:else/>
<cms:set opt_class = "select-odd" />
</cms:if>
<cms:set mimg = "<cms:get_field 'gg_image' masterpage='image-library.php' id=key />" />
<cms:set bg ="style='background-image:url(<cms:show mimg/>);'" />
</cms:if>
<option class="<cms:show opt_class />" value="<cms:show key />" <cms:show bg/>><cms:show value/></option>
</cms:each>
</select>
<div class="k-relation-buttons">
<a class="btn popup-iframe add" href="#" tabindex="1" data-mfp-src="//about:blank" data_relation_src="<cms:show k_target_link />" data_relation_field="<cms:show k_field_input_id />" onclick="this.blur();" <cms:if k_has_one && k_option_ids>style="display:none;"</cms:if>><cms:show_icon 'plus' /><span><cms:localize 'add' /></span></a>
<a class="btn remove<cms:if k_has_one='0'> disabled</cms:if>" href="#" tabindex="2" onclick="this.blur();" <cms:if k_has_one && k_option_ids=''>style="display:none;"</cms:if>><cms:localize 'remove' /></a>
</div>
<input type="hidden" class="k-relation-ids" name="<cms:show k_field_input_id />" value="<cms:show k_option_ids />" />
</div>
<cms:if k_add_js >
<cms:admin_add_js>
<cms:hide><script></cms:hide>
$(function(){
<cms:hide>
//
// GWIL - CUSTOM STYLING CHANGES START
//
//</cms:hide>
var g_is_gal = false;
<cms:if k_field_input_name = is_gal >
g_is_gal = true;
</cms:if>
<cms:hide>
//
// GWIL - CUSTOM STYLING CHANGES END
//
//</cms:hide>
var iframe_name = 'k-iframe-' + Math.floor(Math.random()*1000001);
var form = $('<form />', { id: 'k-relation-form', action: '', method: 'POST', style: 'display:none' });
var input = $('<input />', { id: '__k_relation_ids__', name: '__k_relation_ids__', type: 'hidden' });
form.append(input).appendTo($('body'));
$( ".k-relation-ex" ).each(function(index){
var field = $(this);
var list = field.find('select');
var btn_remove = field.find('.btn.remove');
var btn_add = field.find('.btn.add');
var label_add = btn_add.find('span');
var input_ids = field.find('.k-relation-ids');
var has_one = field.hasClass( 'has-one' );
if( has_one ){
list.mousedown(function(e){
e.preventDefault();
});
}
else{
list.change(function(){
if( $(this).find('option:selected').length ){
btn_remove.removeClass("disabled");
}
else{
btn_remove.addClass("disabled");
}
});
}
list.bind( '_refresh', function(){
var str_ids = '';
var sep = '';
$(this).find('option').each(function(i, selected) {
str_ids += sep + $(this).val();
sep = ',';
});
input_ids.val( str_ids );
if( has_one ){
if(str_ids.length){
btn_remove.css('display', 'inline-block');
btn_add.css('display', 'none');
}
else{
btn_add.css('display', 'inline-block');
btn_remove.css('display', 'none');
}
}
});
btn_remove.click(function(){
if( has_one ){
list.empty();
}
else{
list.find('option:selected').each(function(i, selected) {
$(this).remove();
});
}
list.trigger('change');
//
// GWIL - RESIZE LIST UPTO MAX OPTS
list[0].size = list[0].length > "<cms:show max_opts />" ? "<cms:show max_opts />" : list[0].length;
list.trigger('_refresh');
return false;
});
// modal callbacks
var modal_before_open = function() {
window.KRelation = {
callBack: function( content, exit_code ){
if( exit_code=='exit_save' ){
var arr = jQuery.parseJSON(content);
if(arr.length){
if( has_one && arr.length>1 ) arr.splice(1);
<cms:hide>
//
// GWIL - CUSTOM STYLING CHANGES START
//
//</cms:hide>
<cms:hide>
//
// GWIL - CUSTOM STYLING CHANGES END
//
//</cms:hide>
var html = '';
$.each(arr, function( key, val ){
<cms:hide>
//
// GWIL - CUSTOM STYLING CHANGES START
//
//</cms:hide>
if (g_is_gal) {
var bg = 'style="background-image:url('+ val.thumb +')"';
html += '<option value="' + val.id + '" ' + bg + '>' + val.title + '</option>';
} else {
html += '<option value="' + val.id + '">' + val.title + '</option>';
}
<cms:hide>
//
// GWIL - CUSTOM STYLING CHANGES END
//
//</cms:hide>
});
if( has_one ) list.empty();
list.append(html);
//
// GWIL - RESIZE LIST UPTO MAX OPTS
list[0].size = list[0].length > "<cms:show max_opts />" ? "<cms:show max_opts />" : list[0].length;
list.trigger('_refresh');
}
}
// close modal
modal_after_close();
}
};
// prep form
form.attr( "action", btn_add.attr('data_relation_src') );
form.attr( "target", iframe_name );
input.val( input_ids.val() );
};
var modal_open = function() {
form.submit();
};
var modal_after_close = function() {
window.KRelation = null;
$.magnificPopup.close();
};
COUCH.bindPopupIframe( btn_add, modal_before_open, modal_after_close, "mosaic-iframe", true, iframe_name, modal_open );
});
});
<cms:hide></script></cms:hide>
</cms:admin_add_js>
</cms:if>
content_list_relation_inner.html:- Code: Select all
<cms:hide>
gwil - set some local variables to determine if custom list is needed
</cms:hide>
<cms:embed 'advanced-gui-list-vars.html' />
<cms:hide>
gwil - is it custom
</cms:hide>
<cms:if tpl_is = tpl_gal >
<cms:set tbl_class = "<cms:show tpl_gal_name />" />
<cms:minify 'css'>
<style>/*CODE*/
.col-thumb { display: table-cell!important; min-width: 50px; width: 10%; }
.col-thumb > img { max-width: 80px; }
.table > tbody > tr > td {
vertical-align: middle;
}
/*CODE*/</style>
</cms:minify>
</cms:if>
<table class="table table-primary table-relation-list <cms:show tbl_class />">
<cms:hide>
gwil - template has custom listing
</cms:hide>
<cms:if tpl_is = tpl_gal>
<thead>
<tr>
<th class="col-checkbox">
<label class="ctrl checkbox" >
<input class="checkbox-all" type="checkbox" name="check-all" onclick="$$('.page-selector').set('checked', this.checked);">
<span class="ctrl-option tt" title="Select/Deselect All"/>
</label>
</th>
<!-- EDIT -->
<th class="col-thumb">Thumb</th>
<th class="col-title">Title</th>
<th class="col-folder col-sort">Folder</th>
<th class="col-date col-sort">Date</th>
<!-- END EDIT -->
</tr>
</thead>
<cms:hide>
gwil - use default template listing
</cms:hide>
<cms:else />
<thead>
<tr>
<cms:render 'list_header' />
</tr>
</thead>
</cms:if>
<tbody id="listing">
<cms:pages
masterpage = k_template_name
id = k_selected_pageids
folder = k_selected_foldername
orderby = k_selected_orderby
order = k_selected_order
custom_field = k_selected_custom_field
paginate = '1'
limit = k_selected_limit
show_unpublished = '0'
show_future_entries = '1'
page_name = "<cms:if k_selected_exclude>NOT <cms:show k_selected_exclude /></cms:if>"
start_on = k_selected_start_on
stop_before = k_selected_stop_before
base_link = k_route_link
token = k_cur_token
>
<cms:if k_paginated_bottom >
<cms:set my_paginator="<cms:render 'paginator' />" 'parent' />
</cms:if>
<cms:if "<cms:arr_val_exists k_page_id in=k_relation_selected_ids />" >
<cms:set row_is_selected='1' />
<cms:else />
<cms:set row_is_selected='0' />
</cms:if>
<tr<cms:if row_is_selected > class="selected"</cms:if>>
<cms:hide>
gwil - template has custom listing
</cms:hide>
<cms:if tpl_is = tpl_gal>
<td class="col-checkbox <cms:show row_class />">
<label class="ctrl checkbox" >
<input <cms:if row_is_selected>checked</cms:if> id="page-selector-<cms:show k_page_id />" type="checkbox" value="<cms:show k_page_id />" class="page-selector checkbox-item" name="page-id[]">
<span class="ctrl-option"/>
</label>
</td>
<td class="col-thumb <cms:show row_class />" ><img src="<cms:show gg_thumb />"/></td>
<td class="col-title <cms:show row_class />" ><strong><cms:show k_page_title /></strong></td>
<td class="col-folder <cms:show row_class />" ><cms:show k_page_foldertitle /></td>
<td class="col-date <cms:show row_class />" ><cms:if k_page_date=='0000-00-00 00:00:00' >Unpublished<cms:else /><cms:date k_page_date format='M jS Y' /></cms:if></td>
<cms:hide>
gwil - use default template listing
</cms:hide>
<cms:else />
<cms:render 'list_row' />
</cms:if>
</tr>
</cms:pages>
</tbody>
</table>
And
content_list_relation_exit.html:- Code: Select all
<cms:hide>
gwil - set some local variables to determine if custom list is needed
</cms:hide>
<cms:embed 'advanced-gui-list-vars.html' />
<div id='json_content' style="display:none;">
<cms:if k_relation_exit_action='exit_save'>
[
<cms:if k_relation_selected_ids_string>
<cms:pages id=k_relation_selected_ids_string show_future_entries='1' skip_custom_fields='0'>
{
<cms:hide>
gwil - add any additional fields for return
</cms:hide>
<cms:if tpl_is = tpl_gal>"thumb":"<cms:show gg_thumb />",</cms:if>
"id":"<cms:show k_page_id />",
"title":<cms:escape_json><cms:php>echo(str_replace('"', '"', strip_tags('<cms:show k_page_title />')));</cms:php></cms:escape_json>
}
<cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
</cms:pages>
</cms:if>
]
</cms:if>
</div>
<cms:admin_add_js>
$(function(){
if( window.parent && window.parent.KRelation && window.parent.KRelation.callBack ){
var content = $('#json_content');
window.parent.KRelation.callBack(content.text(), '<cms:show k_relation_exit_action />');
}
});
</cms:admin_add_js>
And that does it.
I've only just got this working so will hopefully be streamlining it a bit.
I've also attached the above files.
cheers,
gwil