Get children categories

/**
 * Get children category
 *
 * @return {array} List of category objects
 *
 * $category->term_id
 * $category->name
 * $category->slug
 * $category->term_group
 * $category->term_taxonomy_id
 * $category->taxonomy
 * $category->description
 * $category->parent
 * $category->count
 * $category->cat_ID
 * $category->category_count
 * $category->category_description
 * $category->cat_name
 * $category->category_nicename
 * $category->category_parent
*/
function appcropolis_get_category_children ($cat_slug='templates', $params=null) {
	$cat_parent = get_category_by_slug($cat_slug);
	if(!isset($cat_slug) || $cat_parent === false) {
		return false;
	}
	
	$defaults = array(
		'type'           => 'post',
		'child_of'       => $cat_parent->cat_ID,
		'parent'         => '',
		'orderby'        => 'name',
		'order'			 => 'ASC',
		'hide_empty'     => 1,
		'hierarchical'   => 1,
		'exclude'        => '',
		'include'        => '',
		'number'         => '',
		'taxonomy'       => 'category',
		'pad_counts'     => false 
	); 

	if(isset($params) && is_array($params)) {
		$args = array_replace($defaults, $params);
	} else {
		$args = $defaults;
	}

	$categories = get_categories( $args );

	return $categories;
}

 

Simple Accordion Code

No complicated code. Just a tiny script:

HTML:

<div class="category">
    <ul id="accordion" class="accordion m-0">
        <li>
            <div class="link">License type<i class="fa fa-angle-down"></i></div>
            <ul class="submenu pl-3">
                <div class="form-group  mb-0 pt-2 m-0 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Basic single documents</label>
                </div>
                <div class="form-group  mb-0 pb-2 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck2">
                    <label class="form-check-label" for="exampleCheck2">Customizable documents</label>
                </div>
            </ul>
        </li>
        <li>
            <div class="link">Document type<i class="fa fa-angle-down"></i></div>
            <ul class="submenu pl-3">
                <div class="form-group mb-0 m-0 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck4">
                    <label class="form-check-label" for="exampleCheck4">Agreements</label>
                </div>
                <div class="form-group mb-0 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck5">
                    <label class="form-check-label" for="exampleCheck5">Forms</label>
                </div>
                <div class="form-group mb-0 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck6">
                    <label class="form-check-label" for="exampleCheck6">Exhibits</label>
                </div>
            </ul>
        </li>
        <li>
            <div class="link">Other <i class="fa fa-angle-right"></i></div>
        </li>
    </ul>
</div>

Javascript:

$(function () {
    //filter bar js
    var Accordion = function (el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;

        // Variables privadas
        var links = this.el.find('.link');
        // Evento
        links.on('click', {
            el: this.el,
            multiple: this.multiple
        }, this.dropdown)
    }

    Accordion.prototype.dropdown = function (e) {
        var $el = e.data.el;
        $this = $(this),
            $next = $this.next();

        $next.slideToggle();
        $this.parent().toggleClass('open');

        if (!e.data.multiple) {
            $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
        };
    }

    $('.accordion').each(function(i, item) {
        var accordion = new Accordion($(item), false);
    });

});

Add Window OnLoad Event (plain Javascript)

If you run into a situation where you need to add a window.onload event, and you cannot rely on a library to do the work (no jQuery), you can use old school, plain javascript, here is what you can do:

function plainJSWindowOnload() {
    console.log('Yay!');
}


     'attachEvent' in window && window.attachEvent('onload', plainJSWindowOnload, false);
'addEventListener' in window && window.addEventListener('load', plainJSWindowOnload, false);

Load Vue Components at Runtime (on-demand)

Can Vue components be loaded at runtime, after I initialize my application? Well, the answer is yes, but it is not the most common scenario.

Consider a scenario in which you have a large application and user may not need to access all its functionality every single time. For instance, you do not expect your users to unsubscribe from your web application every single time (one unsubscribe and they are gone for ever). So, it makes sense for any feature that is not used on a regular basis, to be load on demand.

Here is the logic:

  1. Load your application the same you typically do
  2. Load the deferred component (e.g. jQuery.load(selector, callback)
  3. Create an instance of your component
  4. Mount it
  5. Attach it to your app

Component code

<template id="aha">
	<div class="aha position-absolute">
		<h1>Hello, %{name}</h1>
	</div>
</template>


<script type="text/javascript">
	var aha = Vue.component('aha', {
		delimiters: ['%{', '}'],
		data: function () {
			return {
				name: 'Raul'
			}
		},

		template: document.querySelector('#aha')
	});
</script>

<style type="text/css">
	.aha {
		color: red;
		font: 40px;
	}
</style>

Loader code

$('#container').load('/path/to/component', function() {
	var instance = new aha();
		instance.$mount();
	app.$el.appendChild(instance.$el);
        // OR
        // app.$refs.container.appendChild(instance.$el);
	
});