class AdjacencyList
{
private static $tmpData;
public static function renderUnorderedList($rgData, \Closure $callback)
{
$html = '<ul>';
foreach ($rgData as $item) {
$children = $item['children'];
$item['children'] = !empty($children);
$html .= '<li>';
ob_start();
$callback($item);
$html .= ob_get_clean();
if (!empty($children)) {
$html .= self::renderUnorderedList($children, $callback);
}
$html .= '</li>';
}
$html .= '</ul>';
return $html;
}
public static function buildTree($rgData, $start = 0, $idKey = 'id', $idParentKey = 'parent_id')
{
self::$tmpData = self::assignKeys($rgData);
$result = self::buildTreeRecursive($start, $idKey, $idParentKey);
return $result;
}
private static function buildTreeRecursive($start, $idKey, $idParentKey)
{
$rgResult = array();
foreach (self::$tmpData as $item) {
if ($item[$idParentKey] == $start) {
$item['children'] = self::buildTreeRecursive($item[$idKey], $idKey, $idParentKey);
$rgResult[] = $item;
}
}
return empty($rgResult) ? null : $rgResult;
}
private static function assignKeys($rgData, $key = 'id')
{
$tmp = array();
foreach ($rgData as $item) {
$tmp[$item[$key]] = $item;
}
return $tmp;
}
}
.col-xs-1of5, .col-sm-1of5, .col-md-1of5, .col-lg-1of5, .col-xl-1of5 {
@include make-col-ready();
width: 100%;
}
.col-xs-1of5 { @include make-col(1, 5); }
@include media-breakpoint-up(sm) { .col-sm-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(md) { .col-md-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(lg) { .col-lg-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(xl) { .col-xl-1of5 { @include make-col(1, 5); } }
<div class="col-sm-1of5">1</div>
<div class="col-sm-1of5">2</div>
<div class="col-sm-1of5">3</div>
<div class="col-sm-1of5">4</div>
<div class="col-sm-1of5">5</div>
app.innerHTML += template;
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
// использование
ready(function(){
alert("DOM fully loaded and parsed");
});
Далее если вызвать событие на этом новом классе
<main>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque fugiat
harum in modi odit quas sit temporibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate fuga
hic minima provident quisquam quod repudiandae voluptate? Consequatur in,
necessitatibus.
<section>
</main>
$myVariable: red;
.block {
background: $myVariable;
}
@import 'settings.scss';
@import 'block.scss';