rodrigobertin
5/22/2014 - 11:25 PM

Funciones javascript Globales

Funciones javascript Globales

'use strict';
var marker;
var map;

/**
 * Cookies - A small class to manipulate cookies from javascript
 * @see  www.quirksmode.org/js/cookies.html
 * @author  Anis uddin Ahmad <anisniit@gmail.com>
 */
var Cookie = {

    /**
     * Set/Overwrite a cookie value
     *
     * @param name
     * @param value
     * @param days      OPTIONAL Days till this cookie will stay valid. Default is current session
     * @param path      OPTIONAL domain root will be used by default
     */
    set: function (name, value, days, path) {
        var expires;
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toGMTString();
        } else {
            expires = "";
        }

        var dir = path || '/';
        document.cookie = name + "=" + value + expires + "; path=" + dir;
    },

    /**
     * Retrieve a cookie value
     * @param name
     * @return String|null
     */
    get: function (name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    },

    /**
     * Remove a cookie
     *
     * @param name
     */
    delete: function (name) {
        this.set(name, "", -1);
    }
};

/**
 * Funciones en AJAX
 * @type {{cargando: AJAX.cargando, subirAjax: AJAX.subirAjax, ajaxInsert: AJAX.ajaxInsert, busqueda: AJAX.busqueda, cargarPHP: AJAX.cargarPHP, aviso: AJAX.aviso}}
 */
var AJAX = {
    /**
     * Cargando
     * @returns {string}
     */
    cargando: function () {
        return '<div align="center" style="text-align:center;width:100%">' +
            '<i class="fa fa-spin fa-refresh"></i>' +
            '</div>';
    },

    /**
     * Subir imagen mediante ajax
     * @param form
     * @param urlArchivoSubida
     * @param imagen
     * @param destino
     */
    subirAjax: function (form, urlArchivoSubida, imagen, destino) {
        var formulario = $('#' + form);

        if (imagen == void 0) {
            imagen = true;
        }
        if (destino == void 0) {
            destino = null;
        }

        var dataUp = $('#data-up');

        if (dataUp.length === 0) {
            formulario.after('<div id="data-up"></div>');
        } else {
            dataUp.remove();
            formulario.after('<div id="data-up"></div>');
        }

        var a = new FormData(formulario[0]);
        $.ajax({
            url: urlArchivoSubida,
            type: "POST",
            data: a,
            cache: !1,
            contentType: !1,
            processData: !1,
            beforeSend: function () {
                $("#" + form).after('' +
                    '<div id="load" align="center">' +
                    '<img src="http://loadinggif.com/generated-image?imageId=1&bgColor=%23ffffff&fgColor=%23000008&transparentBg=1&download=0&random=0.041722657857462764" alt="">' +
                    '</div>');
            },
            success: function (data) {
                console.log(data);

                $('#resultado').html(data);
                $('#load').remove(); //borrar el cargando

                if (imagen) {
                    if (destino != null) {
                        console.log('Mostrar en destino');

                        setTimeout(function () {
                            $(destino).html('<img src="' + $.trim(data) + '" alt="" class="img-responsive img-circle">')
                        }, 300);

                    } else {
                        console.log('No Mostrar en destino');

                        setTimeout(function () {
                            formulario.after('' +
                                '<div id="data-up" style="text-align: center">' +
                                '<img style="width:50%;margin:5px" src="' + $.trim(data) + '" alt="subida">' +
                                '</div>');
                        }, 200);

                    }
                }
            },
            error: function () {
                alert('Error al subir imagen');
            }
        });

        return true;
    },

    /**
     * funcion para insercion en la base de datos
     * @param archivo
     * @param tipoInsert
     * @param form
     * @param tablaRecargar
     * @param dondeRecargar
     * @param notificar
     * @param blockPage
     * @param idBoton
     */
    ajaxInsert: function (archivo, tipoInsert, form, tablaRecargar, dondeRecargar, notificar, blockPage, idBoton) {
        var datosEnviados = {};
        var body = $('body');
        var x;

        if (blockPage === void 0) {
            blockPage = true;
        }

        if (idBoton === void 0) {
            idBoton = this.id;
            console.log('Boton-->' + idBoton);
        }
        var BotonSender = $('#' + idBoton);
        var actualHtml = BotonSender.html();

        //poner la notificacion por default
        if (typeof(notificar) === 'undefined') {
            notificar = true
        }

        //si esta nulo paso el primer form
        if (form == '' || !form || form == undefined || form == null) {
            //tomar los datos
            var f = $('form');
            x = f.first().serializeArray();
        } else {
            //los dato del form
            x = $('#' + form).serializeArray();
        }

        //Crear los datos
        var names = {};
        var obj = {};
        $.each(x, function (i, field) {

            var n = field.name;
            var v = field.value;

            if (n.includes('[]')) {
                names.n = !names.n ? 1 : names.n + 1;
                var indx = names.n - 1;
                n = n.replace('[]', '[' + indx + ']');
            }

            obj[n] = obj[n] === undefined ? v : $.isArray(obj[n]) ? obj[n].concat(v) : [obj[n], v];
            //datosEnviados[field.name] = field.value;
            datosEnviados = obj;
        });

        console.log(datosEnviados);

        //pongo el resul abajo del form
        body.after('<div id="resul_envio"></div>');

        //si la pagina se tiene que bloquear
        if (blockPage) {
            body.after('<div id="block"></div>');
            var block = $('#block');

            //aplicar css a la pagina
            block.css({
                'position': 'fixed',
                'height': '100%',
                'width': '100%',
                'color': 'white',
                'display': 'block',
                'background-color': 'rgba(0,0,0,0.5)',
                'top': '0',
                'left': '0',
                'z-index': '800'
            });
        }

        //lo guardo en un variable
        var resultado = $('#resul_envio');

        /**
         * aplicar css al resultado
         */
        if (notificar == true) {
            //estilo
            resultado.css({
                'font-size': '16px',
                'padding': '20px',
                'border': '1px solid grey',
                'color': '#FFF',
                'background-color': '#9bca3e',
                'border-radius': '0',
                'text-transform': 'uppercase',
                'margin': '0 auto',
                'position': 'fixed',
                'bottom': '0',
                'left': '0',
                'min-width': '100%',
                'z-index': '1999',
                //'box-shadow':'1px 1px 1px grey',
                //'transform':'translate(-50%,-50%)',
                //'-webkit-transform':'translate(-50%,-50%)',
                //'-moz-transform':'translate(-50%,-50%)',
                //'-ms-transform':'translate(-50%,-50%)',
                //'-o-transform':'translate(-50%,-50%)',
                'text-align': 'center'
            });
        } else {
            resultado.css('display', 'none');
        }


        /**
         * El archivo que se encarga de realizar las acciones en el server
         * @type {string}
         */
        var archivoF = archivo + '.php?tipo=' + tipoInsert;
        /**
         * Envio la consulta al server
         */
        $.ajax({
            beforeSend: function () {
                resultado.html(AJAX.cargando());
                BotonSender.html('<i class="fa fa-reload fa-spin"></i>').attr('disabled', true);
            },
            url: archivoF,
            type: 'POST',
            data: datosEnviados

        }).done(function (response) {

            BotonSender.html(actualHtml).attr('disabled', false);

            console.log((response).trim());
            resultado.html((response).trim());

            window.sessionStorage.lastData = response;

            //sacar el aviso
            setTimeout(function () {
                resultado.remove();
                if (blockPage) {
                    block.remove();
                }
            }, 1500);

            //si se necesita recargar los datos en la pantalla
            if (tablaRecargar != '' || dondeRecargar != '') {
                $(dondeRecargar).before('<div id="resultado"></div>');
                //recargar los datos
                AJAX.cargarPHP(tablaRecargar, dondeRecargar)
            }

        }).fail(function (data) {
            resultado.html('Error de conexion. Vuelva a intentar<br>' + data.responseText);
        });
    },

    /**
     * Busqueda
     * @param archivo
     * @param form
     */
    busqueda: function (archivo, form) {
        $('#resul,#resultados,#cerrar').remove();

        //poner el resultado del ajax
        $('#' + form).after('<div id="resultados" >' +
            '<div id="resul"></div>' +
            '<a href="#!" id="cerrar" onclick="cerrate(\'#resultados,#resul,#cerrar\')" class="btn btn-block waves-block blue"><i class="fa fa-close" ></i> Cerrar</a>' +
            '</div>');
        //donde se muestran los resultados
        var resultado = $('#resul');

        //los dato del form
        var datosEnviados = $('#' + form).serializeArray();
        //el archivo que se encarga
        var archivoF = archivo + '.php';

        $.ajax({
            beforeSend: function () {
                resultado.html(AJAX.cargando());
            },

            url: archivoF,
            type: 'POST',
            data: datosEnviados

        }).done(function (response) {
            console.log(response);
            resultado.html(response);

        }).fail(function (response) {
            resultado.text('Error de Ajax');
        });
    },

    /**
     * funcion para carga de php
     * @param archivo
     * @param donde
     */
    cargarPHP: function (archivo, donde) {
        $(donde).before('<div id="resultadoLoad"></div>');
        var load = $("#resultadoLoad");

        //Load CSS
        load.css({
            'padding': '20px',
            'color': '#501919',
            'background': 'transparent',
            'border-radius': '2px',
            'margin': '0 auto',
            'position': 'fixed',
            'top': '50%',
            'left': '50%',
            'min-width': '35%',
            'z-index': '1999',
            //'box-shadow': '0 0 2px 1px grey',
            'transform': 'translate(-50%,-50%)',
            '-webkit-transform': 'translate(-50%,-50%)',
            '-moz-transform': 'translate(-50%,-50%)',
            '-ms-transform': 'translate(-50%,-50%)',
            '-o-transform': 'translate(-50%,-50%)',
            'text-align': 'center'
        });


        $.ajax({
            type: "GET",
            url: archivo,
            data: '',
            dataType: "html",
            beforeSend: function () {
                //imagen de carga
                load.html(AJAX.cargando());
            },
            error: function () {
                console.log("error peticion ajax");
            },
            success: function (data) {
                $(donde).html(data);
                load.remove();

            }
        });
    },

    /**
     * Aviso
     * @param mensaje
     * @param center
     */
    aviso: function (mensaje, center) {
        if (center === void 0) {
            center = false;
        }

        var ventana = '<div class="ventana-pop calm">' + mensaje + '</div>';
        var time = 2500;

        if (center === true) {
            ventana = '<div class="ventana-pop-center calm">' + mensaje + '</div>';
            time = 3000;
        }

        $('body').append(ventana);
        setTimeout(function () {
            $('.ventana-pop').remove();
            $('.ventana-pop-center').remove();
        }, time);
    }
};

/**
 * Tomar URL completa
 * @returns {{}}
 */
var URL = {
    getVarsUrl: function () {
        var url = location.search.replace("?", "");
        var arrUrl = url.split("&");
        var urlObj = {};
        for (var i = 0; i < arrUrl.length; i++) {
            var x = arrUrl[i].split("=");
            urlObj[x[0]] = x[1];
        }
        return urlObj;
    }
};

/**
 * Filtro de tabla
 * @type {{FiltroTabla: Filter.FiltroTabla}}
 */
var Filter = {
    /**
     * Filtrar en tabla
     * @param valor
     * @constructor
     */
    FiltroTabla: function (valor) {
        var table = $('table');
        var value = valor;
        table.find('tr').each(function (index, row) {
            var allCells = $(row).find('td');
            if (allCells.length > 0) {
                var found = false;
                allCells.each(function (index, td) {
                    var regExp = new RegExp(value, 'i');
                    if (regExp.test($(td).text())) {
                        found = true;
                        return false;
                    }
                });
                if (found === true) $(row).show();
                else $(row).hide();
            }
        });
    }
};

/**
 * Enviar notificaciones HTML5
 * @type {{Soporte: boolean, Permisos: Function, Enviar: Function}}
 */
var NOTIFY = {
    Soporte: false,
    /**
     * Pedir permisos
     * @constructor
     */
    Permisos: function () {
        if (window.Notification) {
            //ver si tiene soporte el navegador
            NOTIFY.Soporte = true;
            //pedir permiso
            if (Notification.permission !== "granted") {
                Notification.requestPermission();
            }
        } else {
            NOTIFY.Soporte = false;
        }
    },
    /**
     * Enviar notificacion al sistema
     * @param titulo
     * @param body
     * @constructor
     */
    Enviar: function (titulo, body) {

        var icono = './img/icon.png';

        if (NOTIFY.Soporte === true) {
            var title = titulo;
            var extra = {
                icon: icono,
                body: body
            };

            var noti = new Notification(title, extra);
            noti.onclick = {
                // Al hacer click
            };
            noti.onclose = {
                // Al cerrar
            };

            //cerrar
            setTimeout(function () {
                noti.close();
            }, 10000);
        }
    }
};

/**
 * Visor de fotos en pantalla
 * @type {{open: Function, close: Function}}
 */
var LoadImage = {
    /**
     * Abrir la imagen
     * @param imagen
     */
    open: function (imagen) {
        //crear el visor
        var body=$('body');
        var loader=$('#loadImage');
        var closer=$('#cerrarImage');
        
        body.append('<div id="loadImage" ><img src="' + imagen + '" alt="imagen"></div>');
        body.append('<div id="cerrarFondo" onclick="LoadImage.close()"></div>');
        body.append('<div id="cerrarImage"><button class="btn btn-flat white-text" onclick="LoadImage.close()">CERRAR [X]</button></div>');
        
        //aplicar CSS
        loader.css({
            'position': 'fixed',
            'left': '50%',
            'top': '50%',
            'transform': 'translate(-50%, -50%)',
            'z-index': '999',
            'padding': '.3em',
            'max-height': '700px',
            'box-shadow': '0 0 2px 1px grey',
            'background': 'white'
        });
        loader.find('img').css({
            'max-height': '600px',
            'max-width': '100%'
        });
        $('#cerrarFondo').css({
            'position': 'fixed',
            'width': '100%',
            'height': '100%',
            'z-index': '998',
            'top': '0',
            'left': '0',
            'background': 'rgba(0, 0, 0, .8)'
        });
        closer.css({
            'position': 'fixed',
            'top': '2%',
            'z-index': '998',
            'right': '2%'
        });
        closer.find('a').css({
            'color': 'white'
        });

    },

    /**
     * Cerrar el visor
     */
    close: function () {
        $('#loadImage,#cerrarFondo,#cerrarImage').remove();
    }
};

/**
 * Class para los manejos de los mapas
 * @type {{Init: MAPA.Init, BuscarDireccion: MAPA.BuscarDireccion, BuscarEnMapa: MAPA.BuscarEnMapa, VerClientesMapa: MAPA.VerClientesMapa}}
 */
var MAPA = {
    /**
     * Iniciar un mapa
     * @param mapaDiv
     * @param latitud
     * @param longitud
     * @returns {*}
     * @constructor
     */
    Init: function (mapaDiv, latitud, longitud) {
        // set up the map
        if (mapaDiv === void 0) {
            mapaDiv = 'mapa';
        }
        if (latitud === void 0) {
            latitud = -38.72126349422913;
        }
        if (longitud === void 0) {
            longitud = -62.25637244999996;
        }
        var mapaUrlOnline = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var map = new L.Map(mapaDiv, {zoomControl: false});

        //atributos del mapa
        var osm = new L.TileLayer(
            mapaUrlOnline,
            {
                minZoom: 3,
                //maxZoom: 21,
                attribution: '',
                reuseTiles: true,
                errorTileUrl: 'error',
                continuousWorld: false,
                detectRetina: false,
                unloadInvisibleTiles: false
            }
        );

        // setear las cordenadas en tandil
        map.setView(new L.LatLng(latitud, longitud), 14);
        map.addLayer(osm);

        //zoom a la izquierda
        //new L.Control.Zoom({position: 'topright'}).addTo(map);
        return map;
    },

    /**
     * Buscar una direccion
     * @param mapaDiv
     * @param latitud
     * @param longitud
     * @constructor
     */
    BuscarDireccion: function (mapaDiv, latitud, longitud) {
        if (mapaDiv === void 0) {
            mapaDiv = 'mapa';
        }

        console.log('Datos mapa');
        var direccion = $('#direccion').val() + ', ' + $('#ciudad').val();
        var url = 'http://nominatim.openstreetmap.org/search?q=' + direccion + '&format=json&addressdetails=1';
        L.Icon.Default.imagePath = './img';

        $.getJSON(url, function (data) {
            var e = eval(data);
            console.log(e);
            var lat = e[0].lat;
            var lon = e[0].lon;
            if (lat !== '' && lon !== '') {
                $('#latitud').val(e[0].lat);
                $('#longitud').val(e[0].lon);

                if (marker !== undefined) {
                    map.removeLayer(marker);
                }
                setTimeout(function () {
                    map.setView(new L.LatLng(lat, lon), 18);
                    marker = L.marker([lat, lon]).addTo(map);
                }, 1000);
            } else {
                alert('Direccion no encontrada');
            }

        });

    },

    /**
     * Marcar en el mapa
     * @param lat
     * @param lon
     * @param contenido
     * @constructor
     */
    MarcarEnMapa: function (lat, lon, contenido) {
        L.Icon.Default.imagePath = './img';
        map.setView(new L.LatLng(lat, lon), 18);
        if (marker !== undefined) {
            map.removeLayer(marker);
        }
        marker = L.marker([lat, lon]).addTo(map);
        marker.bindPopup(contenido).openPopup();
    },
    /**
     * Ver clientes en el mapa
     * @constructor
     */
    VerClientesMapa: function () {
        if (marker != undefined) {
            map.removeLayer(marker);
        }

        $.ajax({
            method: 'get',
            url: './DATA/data.php?t=allClientes',
            data: {},
            beforeSend: function () {
            },
            success: function (data) {
                var e = eval(data);
                for (var i = 0; i < e.length; i++) {
                    L.Icon.Default.imagePath = './img';
                    console.log(data);
                    map.setZoom(12);
                    marker = L.marker([e[i].latitud, e[i].longitud]).addTo(map);
                    var contenido = e[i].nombre + ' ' + e[i].apellido + '<br>' + e[i].direccion;
                    marker.bindPopup(contenido);
                }

            },
            error: function () {

            }
        });
    }
};

/**
 * Crear selects
 * @type {{GetData: SELECT.GetData, CreateSelect: SELECT.CreateSelect}}
 */
var SELECT = {
    GetData: function (url) {
        return $.getJSON(url);
    },
    CreateSelect: function (urlData, nameSelect, divContainer) {
        var divSelect = $(divContainer);

        $.getJSON(urlData, function (data) {
            var e = eval(data);
            var render = '';
            render += '<select name="' + nameSelect + '" id="' + nameSelect + '" >';
        });
    }
};

/**
 * Funciones para google maps
 * @type {{init: GoogleMaps.init, loadMarkersFromJSON: GoogleMaps.loadMarkersFromJSON, clean: GoogleMaps.clean, centrar: GoogleMaps.centrar}}
 */
var GoogleMaps = {
    /**
     * Iniciar google map
     * @param latitud
     * @param longitud
     * @param zoom
     * @returns {google.maps.Map|*}
     */
    init: function (latitud, longitud, zoom) {
        if (latitud === void 0) {
            latitud = -38.72126349422913;
        }
        if (longitud === void 0) {
            longitud = -62.25637244999996;
        }
        if (zoom === void 0) {
            zoom = 13;
        }

        var myLatLng = {lat: latitud, lng: longitud};

        var mapDiv = document.getElementById('map');

        map = new google.maps.Map(mapDiv, {
            zoom: zoom,
            center: myLatLng
        });
        return map;
    },

    /**
     * Cargar reclamos
     * @param url
     */
    loadMarkersFromJSON: function (url) {
        GoogleMaps.clean(markers);

        var dataGet;
        var content;
        var marker;

        $.getJSON(url, function (data) {
            dataGet = eval((data));

            console.log('Reclamos para mapa');
            console.log(data);

            for (var i = 0; i < dataGet.length; i++) {
                if (dataGet[i].latitud != '' && dataGet[i].longitud != '') {

                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(dataGet[i].latitud, dataGet[i].longitud),
                        map: map,
                        title: dataGet[i].detalle
                    });

                    markers.push(marker);

                    //contenido de la ventana
                    content = '<div class="data"><b>' + dataGet[i].solicitud + '</b>' +
                        '<br>' + dataGet[i].estado + '' +
                        //'<br>' +dataGet[i].area_del_reclamo+'' +
                        ' - ' + dataGet[i].fecha_ingreso + '' +
                        '<br>' + dataGet[i].comentarios + '' +
                        '<a href="#/tab/detail/' + dataGet[i].id + '" class="button button-block positive button-small">Detalle</a>' +
                        '</div>';

                    var infowindow = new google.maps.InfoWindow({
                        content: content
                    });

                    google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
                        return function () {
                            infowindow.setContent(content);
                            infowindow.open(map, marker);
                        };
                    })(marker, content, infowindow));
                }
            }
        });
    },

    /**
     * Limpiar
     */
    clean: function () {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
        }
    },

    /**
     * Centrar mapa
     */
    centrar: function () {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };

            map.setCenter(pos);
            var image = 'img/location.png';
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(pos.lat, pos.lng),
                map: map,
                title: 'Ubicacion',
                icon: image
            });
        });
    }
};

/**
 * Bulma CSS acciones
 * @type {{menuShow: Bulma.menuShow}}
 */
var Bulma = {
    menuShow: function () {
        var menu = $('.nav-menu');
        if (menu.css('display') == 'none') {
            menu.css('display', 'block');
        } else {
            menu.css('display', 'none');
        }
    },

    modal: function () {

    }
};

/**
 * Menu Responsive
 * @type {{mostrar: MenuResp.mostrar}}
 */
var MenuResp = {
    /**
     * Mostrar el menu
     */
    mostrar: function () {
        document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
    },
    /**
     * Menu Justificado
     */
    menuJustified: function () {
        var menu = $('#menu');
        var ancho = menu.width();
        var cantidad = menu.find('li').length - 1;

        menu.find('a').css({
            'width': (ancho / cantidad) + 'px',
            //'border':'1px solid red'
            'text-align': 'center'
        });
    }
};