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 initProducts(category) {
    http(BASE_URL + 'products/category/' + category).then(function (products) {
        products.forEach(function (product) {
            productsListed_.push(product);
        })
    }, logError)
}

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

var productsListed_ = [];
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 view = rivets.bind(app, {
    sections: sections,
    selectedSection: selectedSection_,
    productCategories: productCategories_,
    productsListed: productsListed_,
    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));
        initProducts(category._id)
    },
    getData: {
        productos: getCategories,
        empresa: function(){}
    }
});

function chooseSection(section) {
    var navbarList = window.document.querySelectorAll('ul.navbar-list > li > a');
    navbarList.forEach(function (el) {
        var isSelected = el.text === section;
        el.className = isSelected ? 'selected' : '';
        selectedSection_[el.text] = isSelected;
    })
}
var elements = [];

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