una/samples/interface.php

<?php
/**
 * Copyright (c) BoonEx Pty Limited - http://www.boonex.com/
 * CC-BY License - http://creativecommons.org/licenses/by/3.0/
 *
 * @defgroup    DolphinCore Samples
 * @{
 */

/** 
 * @page samples
 * @section interface Interface
 */

/**
 * Interface elements
 */ 

$aPathInfo = pathinfo(__FILE__);
require_once ($aPathInfo['dirname'] . '/../inc/header.inc.php');
require_once(BX_DIRECTORY_PATH_INC . "params.inc.php");
require_once(BX_DIRECTORY_PATH_INC . "design.inc.php");

bx_import('BxDolLanguages');
bx_import('BxTemplFunctions');

$GLOBALS['SAMPLE_TEXT'] = "Lorem ipsum dolor sit amet, vitae tractatos philosophia ius ei, per id causae integre voluptatibus. An iusto rationibus concludaturque vix, ei dicat admodum minimum vix. Vim ne eruditi scripserit. Nonumy dolorem ex eum, te quo aliquid mnesarchum, ea mel dico populo. Accumsan platonem salutandi te mei, nostro epicurei per ea. Sed ut nonumy sapientem, stet postea periculis eu nec, et purto erat facilisis sed.
";

$GLOBALS['SAMPLE_TITLE'] = "Lorem ipsum dolor sit amet";

$oTemplate = BxDolTemplate::getInstance();
$oTemplate->setPageNameIndex (BX_PAGE_DEFAULT);
$oTemplate->setPageHeader ("Interface elements");
$oTemplate->setPageContent ('page_main_code', PageCompMainCode());
$oTemplate->addCss(BX_DOL_URL_PLUGINS.'jush/jush.css');
$oTemplate->addJs(BX_DOL_URL_PLUGINS.'jush/jush.js');
$oTemplate->addJs(BX_DOL_URL_ROOT.'samples/jquery.smint.js');
$oTemplate->getPageCode();

/**
 * page code function
 */
function PageCompMainCode() 
{
    ob_start();
?>
    <script>
        function samples_interface_toggle_code(e) {
            var ePre = $(e).parent().find('pre');
            if (!ePre.hasClass('syntax-highlighed')) {
                var s = ePre.html().replace(/\s+$/gm, '');
                ePre.html(jush.highlight('htm', s).replace(/\t/g, '&nbsp; &nbsp; ').replace(/(^|\n| ) /g, '$1&nbsp;'));
                ePre.addClass('syntax-highlighed');
            }
            ePre.toggle();
        }
    </script>
    <style>
        pre {
            display:none;
            border:1px solid #060;
            padding:5px;
            font-size:14px;
            max-height:200px;
            overflow:auto;
        }
        section hr:first-child {
            display:none;
        }
        section > div {
            box-sizing:border-box;
            -moz-box-sizing:border-box; /* Firefox */
            display:inline-block;
            width:50%;
            vertical-align:top;
        }
        section > div > h3 {
            margin:0;
        }
        .sample-box {
            float:left;;
            width:64px;
            height:64px;
            border:1px solid #966;
            background-color:#c99
        }
        .sample-box-empty {
            height:64px;
        }
    </style>
<?php
    $s = ob_get_clean();

    $sMenu = '<ul class="samples-interface-menu">';
    $aSections = array (
        'Buttons' => array ('title' => 'Buttons', 'desc' => '
            Using buttons with images is strictly discouraged - use font icons istead.'
        ),
        'PaddingsMargins' => array ('title' => 'Paddings & margins', 'desc' => '
            3 sizes are available: default, -sec, -thd. <br />
            Possible combination: -left, -right, -top, -bottom, -leftright, -rightbottomleft, -topbottom. <br />
            -auto is special suffix to be added for -left and -top margin combinations, if it is first then margin is 0. <br />
            -thd is special size to be used as padding and margin together to get proper spacing from borders and between items when several tiles are displayed.'
        ),
        'BordersCornersShadow' => array ('title' => 'Borders, corners and shadow', 'desc' => '
            Possible combination of borders only: -left, -right, -top, -bottom, -rightbottomleft. <br />
            -auto is special suffix to be added for -top border, if element is first then there is no border.'
        ),
        'ThumbsIconsUnits' => array ('title' => 'Thumbs, icons & units', 'desc' => '
            Additianl classes are available: bx-def-thumb-size-max-height, bx-def-thumb-size-min-height, bx-def-icon-size-max-height, bx-def-icon-size-min-height'
        ),
        'Colors' => array ('title' => 'Colors', 'desc' => '
            <a href="samples/palette.php">Additional pallette</a> is also available.'
        ),
        'Fonts' => array ('title' => 'Fonts', 'desc' => ''
        ),
        'Form' => array ('title' => 'Form', 'desc' => '
            <a href="samples/forms.php">Form sample is here</a>'
        ),
        'Grid' => array ('title' => 'Grid', 'desc' => '
            <a href="samples/grid.php">Grid sample is here</a>'
        ),
        'DesignBoxes' => array ('title' => 'Design Boxes', 'desc' => '
            <a href="samples/designbox.php">Design boxes samples are here</a>'
        ),
    );    
    foreach ($aSections as $sName => $a) {
        $sMenu  .= '<li><a href="samples/interface.php#' . $sName . '">' . $a['title'] . '</a></li>';
        $s .= '<div id="' . $sName. '" class="bx-anchor bx-def-margin-top-auto">';
        $s .= '<hr class="bx-def-hr" />';
        $s .= '<hr class="bx-def-hr" />';
        $s .= '<h1 class="bx-def-margin-sec-topbottom bx-def-padding-sec-topbottom">' . $a['title'] . '</h1>';
        if ($a['desc'])
            $s .= '<p>' . $a['desc'] . '</p>';
        $sFunc = 'Samples_' . $sName;
        if (function_exists($sFunc))
            $s .= $sFunc();
        $s .= '</div>';
    }
    $sMenu .= '</ul>';

    return DesignBoxContent("Interface elements", $sMenu . $s, BX_DB_NO_CAPTION);
}


function Samples_Buttons() 
{    
    $aBlocks = array ();
 
    ob_start();
    ?>
<button class="bx-btn bx-def-margin-right">Button</button>
<button class="bx-btn bx-btn-primary bx-def-margin-right">Primary button</button>
<button class="bx-btn bx-btn-img bx-def-margin-right"><img src="template/images/icons/clock.png" /></button>
<button class="bx-btn bx-btn-img bx-def-margin-right"><img src="template/images/icons/clock.png"><u>Button</u></button>
    <?php
    $aBlocks['.bx-btn'] = ob_get_clean();
    
    ob_start();
    ?>
<button class="bx-btn bx-btn-small bx-def-margin-right">Button</button>
<button class="bx-btn bx-btn-small bx-btn-img bx-def-margin-right"><img src="template/images/icons/clock.png" /></button>
<button class="bx-btn bx-btn-small bx-btn-img bx-def-margin-right"><img src="template/images/icons/clock.png" /><u>Button</u></button>
    <?php
    $aBlocks['.bx-btn .bx-btn-small'] = ob_get_clean();

    ob_start();
    ?>
<button class="bx-btn bx-def-margin-right"><i class="sys-icon fire-extinguisher"></i></button>
<button class="bx-btn bx-def-margin-right"><i class="sys-icon fire-extinguisher sys-icon-bigger"></i></button>
<button class="bx-btn bx-def-margin-right"><i class="sys-icon fire-extinguisher sys-icon-bigger col-red1"></i></button>
<button class="bx-btn bx-def-margin-right"><i class="sys-icon fire-extinguisher"></i><u>Button</u></button>
    <?php
    $aBlocks['.bx-btn with icon'] = ob_get_clean();

    ob_start();
    ?>
<button class="bx-btn bx-btn-small bx-def-margin-right"><i class="sys-icon fire-extinguisher"></i></button>
<button class="bx-btn bx-btn-small bx-def-margin-right"><i class="sys-icon fire-extinguisher"></i><u>Button</u></button>
    <?php
    $aBlocks['.bx-btn .bx-btn-small with icon'] = ob_get_clean();

    ob_start();
    ?>
<div class="bx-btn-group">
    <button class="bx-btn bx-def-margin-right">Button</button>
    <button class="bx-btn bx-def-margin-right">Shmatton</button>
    <button class="bx-btn bx-def-margin-right">Tratton</button>
</div>
    <?php
    $aBlocks['.bx-btn-group'] = ob_get_clean();

    return FormatBlocks($aBlocks);
}

function Samples_PaddingsMargins() 
{    
    $aBlocks = array ();
     
    ob_start();
    ?>
<div class="bx-def-border bx-def-padding">
    <?=$GLOBALS['SAMPLE_TEXT']; ?>
</div>
    <?php
    $aBlocks['.bx-def-padding'] = ob_get_clean();
    
    ob_start();
    ?>
<div class="bx-def-border bx-def-padding-left bx-def-padding-right">
    <?=$GLOBALS['SAMPLE_TEXT']; ?>
</div>
    <?php
    $aBlocks['.bx-def-padding-left .bx-def-padding-right'] = ob_get_clean();

    ob_start();
    ?>
<div class="bx-def-border bx-def-padding-sec">
    <?=$GLOBALS['SAMPLE_TEXT']; ?>
</div>
    <?php
    $aBlocks['.bx-def-padding-sec'] = ob_get_clean();

    ob_start();
    ?>
<div class="bx-clearfix">
    <div class="sample-box bx-def-margin-left"></div>
    <div class="sample-box bx-def-margin-left"></div>
</div>
    <?php
    $aBlocks['.bx-def-margin-left'] = ob_get_clean();

    ob_start();
    ?>
<div class="bx-clearfix">
    <div class="sample-box bx-def-margin-left-auto"></div>
    <div class="sample-box bx-def-margin-left-auto"></div>
</div>
    <?php
    $aBlocks['.bx-def-margin-left-auto'] = ob_get_clean();

    ob_start();
    ?>
<div class="bx-def-border bx-clearfix">
    <div class="sample-box bx-def-margin-sec"></div>
    <div class="sample-box bx-def-margin-sec"></div>
    <div class="sample-box bx-def-margin-sec"></div>
</div>
    <?php
    $aBlocks['.bx-def-margin-sec'] = ob_get_clean();

    ob_start();
    ?>
<div class="bx-def-border bx-clearfix bx-def-padding-thd">
    <div class="sample-box bx-def-margin-thd"></div>
    <div class="sample-box bx-def-margin-thd"></div>
    <div class="sample-box bx-def-margin-thd"></div>
</div>
    <?php
    $aBlocks['.bx-def-padding-thd and .bx-def-margin-thd'] = ob_get_clean();

    return FormatBlocks($aBlocks);
}

function Samples_Colors() 
{    
    $aBlocks = array ();
     
    $aClasses = array ('bx-def-color-bg-page', 'bx-def-color-bg-block', 'bx-def-color-bg-box', 'bx-def-color-bg-sec', 'bx-def-color-bg-active', 'bx-def-color-bg-hl', 'bx-def-color-bg-hl-hover', 'bx-def-noise', 'bx-def-noise bx-def-color-bg-active');
    foreach ($aClasses as $sClass) {
        ob_start();
        ?>
<div class="bx-def-border sample-box-empty <?=$sClass; ?>">
</div>
        <?php
        $aBlocks['.' . implode(" .", explode(' ', $sClass))] = ob_get_clean();
    }

    return FormatBlocks($aBlocks);
}

function Samples_BordersCornersShadow() 
{    
    $aBlocks = array ();
     
    $aClasses = array ('bx-def-border', 'bx-def-border-left bx-def-border-bottom', 'bx-def-border bx-def-round-corners', 'bx-def-round-corners-with-border', 'bx-def-shadow');
    foreach ($aClasses as $sClass) {
        ob_start();
        ?>
<div class="sample-box-empty <?=$sClass; ?>">
</div>
        <?php
        $aBlocks['.' . implode(" .", explode(' ', $sClass))] = ob_get_clean();
    }

    return FormatBlocks($aBlocks);
}

function Samples_ThumbsIconsUnits() 
{    
    $aBlocks = array ();
     
    $aClasses = array ('bx-def-thumb bx-def-thumb-size', 'bx-def-icon bx-def-icon-size');
    foreach ($aClasses as $sClass) {
        ob_start();
        ?>
<img class="<?=$sClass; ?>" src="http://farm8.staticflickr.com/7413/10593220664_99831fab5a_q.jpg" />
        <?php
        $aBlocks['.' . implode(" .", explode(' ', $sClass))] = ob_get_clean();
    }

    ob_start();
    ?>
<div class="bx-def-unit">
    <a href="javascript:void(0);"><img class="bx-def-thumb bx-def-thumb-size" src="http://farm8.staticflickr.com/7413/10593220664_99831fab5a_q.jpg" /></a>
    <div class="bx-def-unit-info bx-def-thumb-size-max-height bx-def-padding-left">
        <span class="bx-def-font-large">Some info here</span><br />
        <span class="bx-def-font-grayed">additional info</span>
    </div>
</div>
    <?php
    $aBlocks['.bx-def-unit .bx-def-thumb'] = ob_get_clean();

    ob_start();
    ?>
<div class="bx-def-unit">
    <a href="javascript:void(0);"><img class="bx-def-icon bx-def-icon-size" src="http://farm8.staticflickr.com/7413/10593220664_99831fab5a_q.jpg" /></a>
    <div class="bx-def-unit-info bx-def-icon-size-max-height bx-def-padding-sec-left">
        Some info here
    </div>
</div>
    <?php
    $aBlocks['.bx-def-unit .bx-def-icon'] = ob_get_clean();

    return FormatBlocks($aBlocks);
}

function Samples_Fonts() 
{    
    $aBlocks = array ();
     
    $aClasses = array ('' => 'SAMPLE_TEXT', 'bx-def-font-grayed' => 'SAMPLE_TEXT', 'bx-def-font-small' => 'SAMPLE_TEXT', 'bx-def-font-middle' => 'SAMPLE_TEXT', 'bx-def-font-large' => 'SAMPLE_TEXT', 'bx-def-font-h1' => 'SAMPLE_TITLE', 'bx-def-font-h2' => 'SAMPLE_TITLE', 'bx-def-font-h3' => 'SAMPLE_TITLE');
    foreach ($aClasses as $sClass => $sSampleText) {
        ob_start();
        ?>
<div class="<?=$sClass; ?>">
<?=$GLOBALS[$sSampleText]; ?>
</div>
        <?php
        $aBlocks['.' . implode(" .", explode(' ', $sClass))] = ob_get_clean();
    }

    return FormatBlocks($aBlocks);
}

function FormatBlocks ($aBlocks) {
    $s = '<section class="bx-def-padding-top">';
    foreach ($aBlocks as $sCaption => $sBlock) {
        $s .= '<hr class="bx-def-hr bx-def-margin-topbottom" />';
        $s .= '<div>' . $sBlock . '</div>';
        $s .= '<div class="bx-def-padding-left"><h3>' . $sCaption . '</h3><a href="javascript:void(0);" onclick="samples_interface_toggle_code(this)">Toggle code</a><br /><pre>' . $sBlock . '</pre></div>';
    }
    $s .= '</section>';
    return $s;
}


/** @} */