# PLUGIN PREVIEW BY TEXTPATTERN.INFO
if (@txpinterface == 'admin') {
register_callback( 'tom_image_grid_markup', 'image_ui', 'extend_controls');
register_callback( 'tom_image_grid_css', "image");
register_callback( 'tom_image_grid_js', "image");
}
function tom_image_grid_markup()
{
$out = <<<HTML
<form id="tom_ig_options">
<label><input type="radio" name="tom_ig_option" id="tom_ig_option--grid" /><span class="tom_ig_icon-grid">Grid</span></label>
<label><input type="radio" name="tom_ig_option" id="tom_ig_option--line" /><span class="tom_ig_icon-line">Line</span></label>
</form>
HTML;
echo $out;
}
function tom_image_grid_css()
{
$sortby = gTxt('sort_by');
$out = <<<CSS
<style type="text/css">
/*
** CSS for tom_image_grid plugin
** By Sacripant — Thomas Jund
** http://sacripant.fr
*/
.tom_ig .txp-list * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tom_ig .txp-listtables {
display: block;
}
.tom_ig#page-image .txp-list thead th {
/*display: none;*/
display: inline-block;
position: relative;
width: auto;
}
.tom_ig#page-image .txp-list thead th.images_detail {
display: none !important;
}
.tom_ig#page-image .txp-list thead th.txp-list-col-multi-edit {
margin-right: 1em;
}
.tom_ig#page-image .txp-list thead th.txp-list-col-multi-edit:after {
content: attr(title);
padding-left: .33em;
}
.tom_ig#page-image .txp-list thead th.txp-list-col-id {
margin-left: 3.6em;
}
.tom_ig#page-image .txp-list thead th.txp-list-col-id:before {
content: "Sort by";
display: block;
padding: inherit;
padding-left: 0;
padding-right: .33em;
position: absolute;
width: 3.6em;
right: 100%;
top: 0;
text-align: right;
font-weight: normal;
}
.tom_ig#page-image .txp-list tbody tr {
display: inline-block;
/*vertical-align: mid;*/
width: 15em;
margin: .66em 1em 0 0
}
.tom_ig#page-image .txp-list tbody td,
.tom_ig#page-image .txp-list tbody th {
display: block;
padding: 0.16em 0.33em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.tom_ig#page-image .txp-list td.txp-list-col-multi-edit {
float: right;
width: auto;
}
.tom_ig#page-image .txp-list td.txp-list-col-multi-edit input {
margin-bottom: 0;
}
.tom_ig#page-image .txp-list td.txp-list-col-thumbnail {
height: 12em;
}
.tom_ig#page-image .txp-list td.txp-list-col-thumbnail img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
/* No thumbnail display */
.tom_ig#page-image .txp-list td.txp-list-col-thumbnail:not(.has-thumbnail) {
display: block;
background-color: #eee;
text-align: center;
height: 100%;
width: 100%;
border-width: 5.25em 5.5em;
border-style: solid;
border-top-color: #eee;
border-bottom-color: #eee;
border-left-color: #ddd;
border-right-color: #ddd;
}
@media only screen and (max-width: 480px) {
.tom_ig#page-image .txp-list tbody tr {
width: 140px;
margin: .66em .33em 0 0;
}
.tom_ig#page-image .txp-list td.thumbnail {
height: 112px;
}
.tom_ig .tom_ig--noThumb {
border-width: 45px 40px;
}
}
/*buttons
----------*/
#tom_ig_options input {
display: none;
}
#tom_ig_options label {
padding: .16em;
display: inline-block;
border: 1px solid transparent;
width: 20px;
height: 20px;
overflow: hidden;
}
#tom_ig_options label.selected {
border-color: #aaa;
}
.tom_ig_icon-grid:before {
content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIKCSBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgMjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0iZ3JpZCI+Cgk8Zz4KCQk8cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iNS42MDEiIGhlaWdodD0iNS42Ii8+CgkJPHJlY3QgeD0iMyIgeT0iMTEuMzk5IiB3aWR0aD0iNS42MDEiIGhlaWdodD0iNS42MDEiLz4KCQk8cmVjdCB4PSIxMS4zOTkiIHk9IjExLjM5OSIgd2lkdGg9IjUuNjAxIiBoZWlnaHQ9IjUuNjAxIi8+CgkJPHJlY3QgeD0iMTEuMzk5IiB5PSIzIiB3aWR0aD0iNS42MDEiIGhlaWdodD0iNS42Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==");
}
.tom_ig_icon-line:before {
content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIKCSBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgMjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8ZyBpZD0ibGluZSI+Cgk8cGF0aCBkPSJNMy44MTEsMTQuMTA3djIuODg5SDAuODQ0di0yLjg4OUgzLjgxMXogTTAuODQ0LDguNTU1djIuODg2aDIuOTY3VjguNTU1SDAuODQ0eiBNMTkuMTU1LDExLjQ0MVY4LjU1NUg2LjE2OXYyLjg4NkgxOS4xNTV6CgkJIE0xOS4xNTUsMTYuOTk2di0yLjg4OUg2LjE2OXYyLjg4OUgxOS4xNTV6IE0wLjg0NCwzdjIuODg5aDIuOTY3VjNIMC44NDR6IE0xOS4xNTUsNS44ODlWM0g2LjE2OXYyLjg4OUgxOS4xNTV6Ii8+CjwvZz4KPC9zdmc+Cg==");
}
</style>
CSS;
echo $out;
}
function tom_image_grid_js()
{
$out = <<<JS
<script type="text/javascript">
/*
** JS for tom_image_grid plugin
** By Sacripant — Thomas Jund
** http://sacripant.fr
*/
$(function() {
var imageDisplayOption = $("#tom_ig_options")
, radios = $('input', imageDisplayOption)
, listtables = $('.txp-listtables')
/*, imagesTr = $('tr', listtables)*/
, cookie = 'tom_image_grid'
, cookieValue = getCookie(cookie)
;
// Add radios in tab
imageDisplayOption.prependTo(listtables);
// Change Layout when radio checked
radios.change(function(event)
{
if ( this.id === "tom_ig_option--grid")
{
$('body').addClass('tom_ig');
setCookie(cookie, 'tom_ig_option--grid');
}
else
{
$('body').removeClass('tom_ig');
setCookie(cookie, 'tom_ig_option--line')
}
radios.parent().removeClass('selected');
$(this).parent().addClass('selected');
});
// Check & create cookie
if ( cookieValue )
{
var targetRadio = document.getElementById(cookieValue);
}
else
{
var targetRadio = document.getElementById('tom_ig_option--line');
setCookie(cookie, 'tom_ig_option--line')
};
$(targetRadio).prop('checked', true).trigger("change");
});
</script>
JS;
echo $out;
}