Leanmodel plugin

I have recently adapted the popular leanmodal plugin (with permission). Being "intermediate" with JS (need to learn more), I was wondering if anyone would like to review my code for efficiency.

• jQuery & JS - bad practice?

• Functions - structured correctly?

• Repetition - When using logic, I repeat nearly exact code - bad? Better way to do it?

• External - $(document).ajax_load(); is external script

Functionality

#Initialize
$('a[rel*=leanModal]').leanModal({
    overlay: 0.9,
    removeModal: true,
    ajax: true
});

Process:

• Link clicked, leanModal triggered

• LeanModal checks for "type" of link (ajax / normal)

• If Ajax OR image, uses special vars

• If normal, loads overlay & modal

• Binds click event to over to close

• Binds click event to close button

• If user clicks close elements, modal removed

```
(function( $ ){

$.fn.leanModal = function(options) {

//Defaults
var defaults = {
overlay: 0.5,
closeButton: null,
delay: null,
drag: ".modal_title",
removeModal: null,
autoLoad: null,
ajax: false
};

//Definitions
var plugin = this;
var options = $.extend(defaults, options);

//Init
plugin.init = function() {

if(options.autoLoad){
$.extend(options, {modal_id: $(this)});
create();
}else{
return this.each(function() {
$(this).click(function(e) {
e.preventDefault();
var href = $(this).attr("href");
var image = CheckImg(href);

var random = Math.floor(Math.random()*90000) + 10000;
var extras = (options.ajax || image) ? {modal_id: "#modal_" + random, ajax: href.replace(/\/$/, '')} : {modal_id: href};

$.extend(options, extras);

Messy code?

Nah! It really depends on the developer. But I highly suggest you follow certain conventions for clean code, especially the parts regarding indentation, one-liners etc. There are quick tools online for cleaning up code, like JSBeautifier. There are also formatters for code, via Grunt, which formats your code on save (don't know which though, I use a pre-made script).

Never forget ;

Although JS does forgive you for missing ; at certain cases, but in practice, you should never forget them. You will have issues especially when you minify the code.

Poorly created minifiers may not insert ; and you'll end up with something like

`var foo = 'test'var bar='test'`.

Concat scripts might not merge files and separate them with ;. You'd end up with these at the joining. The compiler might think the previous is a function wrapped in a () and you're trying to execute it (via the second ()) and passing it a function... or something like that. Happens every time I forget to ;.

(function(){
...
}(jQuery))(function(){
   ...
}(jQuery))

switch(true)

This is an odd use for switch

switch (true) {
    case CheckImg(options.ajax):
        append("img", options.modal_id.substring(1), options.ajax);
        show();
        break;
    default:
        fetch(options.ajax, function(data){
            append("modal", options.modal_id.substring(1), options.ajax, data);
            show();
        }, function(data){
            Loader();
            alert("Sorry, there was an error!");
        });
        break;
}

Normally, people would do switch(variable). Though this could work, but it looks weird at first. Not good for usability. Also, one bad thing about switch is the break. Forgetting it would spell disaster. I'd rather go for if-else instead.

if(CheckImg(...)){
    append("img", options.modal_id.substring(1), options.ajax);
    show();
} else {
    fetch(options.ajax, function(data){
        append("modal", options.modal_id.substring(1), options.ajax, data);
        show();
    }, function(data){
        Loader();
        alert("Sorry, there was an error!");
    });
}

Using jQuery? Use it all the way!

I noticed this in your code:

var overlay = document.createElement("div");
    overlay.setAttribute("id", "lean_overlay");

document.body.appendChild(overlay);
overlay.onclick = function() { close(modal_id, removeModal, $(closeButton)); return false; };

I thought you used jQuery? You could have gone with something much more elegant:

$('',{
  'id' : 'lean_overlay'
}).on('click',function(){
  close(modal_id, removeModal, $(closeButton);
}).appendTo('body');

StackExchange Code Review Q#43155, answer score: 2