especificos-web-V2/client/js/app.js

var BASE_URL = 'http://192.168.1.127/api/';

function http(url, params) {
    return new Promise(function(resolve, reject) {
        httpRequest = new XMLHttpRequest();

        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState == XMLHttpRequest.DONE) {
                if (httpRequest.status == 200) {
                    resolve(JSON.parse(httpRequest.responseText));
                } else {
                    reject("pls fix later");
                }
            }
        };

        httpRequest.open('GET', url, true);
        httpRequest.setRequestHeader('lang', 'ES')
        var x = params ? params : null;
        httpRequest.send(null);
    });
}

http('http://192.168.1.127/api/products/listcategories').then(function(data) {

}, function(err) {
    console.log("err", err);
});

function logError(err) {
    console.log('Error: ', err);
}
var sections = [
    'empresa',
    'productos'
];

function getProducts(category) {
    if (R.isNil(data.allProducts[category]) || R.isEmpty(data.allProducts[category])) {
        http(BASE_URL + 'products/category/' + category).then(function(xs) {
            data.allProducts[category] = xs;
            data.products = xs;
        }, logError)
    } else {
        data.products = data.allProducts[category];
    }
}

var selectedSection_ = {
    empresa: true,
    productos: false,
    productoDescripcion: false
};

var selectedCategory_ = 'proteccion intensiva';

rivets.configure({
    executeFunctions: true
})

function getCategories() {
    if (productCategories_.length === 0) {
        http(BASE_URL + 'products/listcategories').then(function(data) {
            data.forEach(function(category) {
                productCategories_.push(category)
            })
        }, logError)
    }
}

var productCategories_ = [];

var app = document.getElementById('app');

rivets.binders['src-strict'] = function(el, value) {
    var img = new Image()
    img.onload = function() {
        $(el).attr('src', value)
    }
    img.src = value
}

var data = {
    allProducts: {},
    products: [],
    selectedCategory: ''
}

var view = rivets.bind(app, {
    sections: sections,
    selectedSection: selectedSection_,
    productCategories: productCategories_,
    data: data,
    selectedCategory: selectedCategory_,
    selectSection: function(event, scope) {
        var newValue = event.target.text;
        window.history.pushState({}, newValue, '#' + newValue)
        chooseSection(newValue);
        event.target.className = 'selected';
        scope.getData[newValue]();
    },
    selectCategory: function(event, scope) {
        var category = productCategories_.find(R.propEq('name', event.target.text));
        var categoryList = getElement('ul#product-category-nav > li > a')
        data.selectedCategory = category;
        getProducts(category._id);
        addSelectedClass(categoryList, category.name);
    },
    getData: {
        productos: getCategories,
        empresa: function() {}
    }
});

function getElement(selector) {
    return window.document.querySelectorAll(selector);
}

function chooseSection(section) {
    var navbarList = getElement('ul.navbar-list > li > a');
    addSelectedClass(navbarList, section, selectedSection_)
}
var elements = [];

function addSelectedClass(elemList, x, opt) {
    console.log('elemList: ', elemList);
    elemList.forEach(function(el) {
        var isSelected = el.text === x;
        el.className = isSelected ? 'selected' : '';
        if (opt) {
            opt[el.text] = isSelected;
        }
    })
}

window.onscroll = function() {
    elements = elements.reduce(function(acc, e) {
        if (isInViewport(e)) {
            e.className = 'discover-li'
            return acc;
        } else {
            acc.push(e);
            return acc;
        }
    }, [])
    if (elements.length === 0) {
        window.onscroll = function() {};
    }
};

function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    var html = document.documentElement;
    return (rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || html.clientHeight) &&
        rect.right <= (window.innerWidth || html.clientWidth))
}

window.onload = function() {
    chooseSection(window.location.hash.substr(1));
}