<?php

# 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;
}