Raul Sanchez – Serial Architect

Simple Accordion Code

No complicated code. Just a tiny script:

HTML:

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

<li>

<div class="link">License type<i class="fa fa-angle-down"></i></div>

<label class="form-check-label" for="exampleCheck1">Basic single documents</label>

</div>

<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>

<label class="form-check-label" for="exampleCheck4">Agreements</label>

</div>

<label class="form-check-label" for="exampleCheck5">Forms</label>

</div>

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

});

$(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 &amp;&amp; window.attachEvent('onload', plainJSWindowOnload, false);
'addEventListener' in window &amp;&amp; window.addEventListener('load', plainJSWindowOnload, false);

function plainJSWindowOnload() {

console.log('Yay!');

}

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

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

Download Remote Files Using Node

Here is a simple code snippet to help you use node to download a remote file URL to your computer

const http = require('http');
const fs = require('fs');
const url = 'https://path/to/remote/data.js';
const path = 'data.js';


/**
 *
 * @param {string} url The URL location of the file you wish to download
 * @param {string} destination The path to which you wish to write the content of the remote file.
 * @param {function} success A success callback
 * @param {function} error An error callback
 */
const download = (url, destination, success, error) => {
	var file = fs.createWriteStream(destination);
	var request = http.get(url, function (response) {
		response.pipe(file);
		file.on('finish', function () {
			file.close(function () {
				typeof success == 'function' &amp;&amp; success.apply(null, [destination]);
			}); 
		});
	}).on('error', function (err) { 
		fs.unlink(destination); // Delete file is error
		typeof error == 'function' &amp;&amp; error.apply(null, [err.message]);
	});
};


download(url, path, function (location) {
	console.log(location);
}, function (err) {
	console.log(err);
});

const http = require('http');

const fs = require('fs');

const url = 'https://path/to/remote/data.js';

const path = 'data.js';

/**

* @param {string} url The URL location of the file you wish to download

* @param {string} destination The path to which you wish to write the content of the remote file.

* @param {function} success A success callback

* @param {function} error An error callback

const download = (url, destination, success, error) => {

var file = fs.createWriteStream(destination);

var request = http.get(url, function (response) {

response.pipe(file);

file.on('finish', function () {

file.close(function () {

typeof success == 'function' && success.apply(null, [destination]);

});

}).on('error', function (err) {

fs.unlink(destination); // Delete file is error

typeof error == 'function' && error.apply(null, [err.message]);

});

};

download(url, path, function (location) {

console.log(location);

}, function (err) {

console.log(err);

});

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:

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

Component code

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


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

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

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

<h1>Hello, %{name}</h1>

</div>

</template>

var aha = Vue.component('aha', {

delimiters: ['%{', '}'],

data: function () {

return {

name: 'Raul'

}

template: document.querySelector('#aha')

});

</script>

.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);
	
});

$('#container').load('/path/to/component', function() {

var instance = new aha();

instance.$mount();

app.$el.appendChild(instance.$el);

// OR

// app.$refs.container.appendChild(instance.$el);

});