Files
stand/assets/js/main.js
2021-01-31 17:38:55 -03:00

705 lines
20 KiB
JavaScript

const valor = 6990
let available_colors = {
white: {
name: 'blanco',
rgb: 'rgb(255, 255, 255)'
},
black: {
name: 'negro',
rgb: 'rgb(0, 0, 0)'
},
blue: {
name: 'azul',
rgb: 'rgb(0, 110, 230)'
},
petrol: {
name: 'azul_petroleo',
rgb: 'rgb(0, 80, 120)'
},
cyan: {
name: 'celeste',
rgb: 'rgb(80, 200, 255)'
},
green: {
name: 'verde',
rgb: 'rgb(10, 200, 100)'
},
yellow: {
name: 'amarillo',
rgb: 'rgb(255, 240, 70)'
},
orange: {
name: 'naranjo',
rgb: 'rgb(255, 130, 70)'
},
red: {
name: 'rojo',
rgb: 'rgb(255, 20, 50)'
}
}
class Amount {
constructor(elem) {
this.elem = elem
this.minus = elem.parent().find('.minus')
this.plus = elem.parent().find('.plus')
this.n = 0
this.setup()
this.max = 999
}
setup() {
this.elem.val(0)
this.plus.click((e) => {
this.increment()
this.print()
})
this.minus.click((e) => {
this.decrement()
this.print()
})
this.elem.change((e) => {
this.n = parseInt(this.elem.val())
this.print()
})
this.print()
}
enable_button(name) {
this[name].removeClass('disabled')
if (name == 'plus') {
this[name].html('<i class="plus icon"></i>')
}
if (name == 'minus') {
this[name].html('<i class="minus icon"></i>')
}
}
disable_button(name) {
this[name].addClass('disabled')
this[name].html('')
}
check_limits() {
this.enable_button('plus')
this.enable_button('minus')
if (this.n > this.max) {
this.n = this.max
}
if (this.n == this.max) {
this.disable_button('plus')
}
if (this.n < 0) {
this.n = 0
}
if (this.n == 0) {
this.disable_button('minus')
}
}
increment() {
this.n += 1
}
decrement() {
this.n -= 1
}
get value() {
return this.n
}
print() {
this.check_limits()
this.elem.val(this.n)
}
}
class Colors {
constructor(elem, changing = false) {
this.colors = available_colors
this.picked = 'blue'
this.elem = elem
this.input = elem.find('input[name="color"]')
this.changing = null
if (changing) {
this.changing = elem.parent().parent().find('.column img')
}
this.setup()
}
setup() {
this.elem.find('.circle').each((i, el) => {
let color = $(el).attr('class').split(' ')[0]
let cssColor = $(el).css('background-color')
if (cssColor != this.colors[color]['rgb']) {
$(el).css('background-color', this.colors[color]['rgb'])
}
$(el).click((e) => {
this.change_color(color)
})
})
this.change_color('blue')
}
default_color_format(el) {
$(el).removeClass('selected')
}
change_color(color) {
this.picked = this.colors[color]['name']
this.input.val(this.picked)
this.elem.find('.circle').each((i, el) => {
this.default_color_format(el)
})
this.elem.find('.' + color + '.circle').addClass('selected')
if (this.changing != null) {
this.changing.attr('src', './assets/images/fotos/' + this.picked + '/thumb.jpg')
}
}
}
let ventajas = {
elem: $('#ventajas'),
fotos: 6,
setup: function() {
let h = this.elem.css('height')
let w = this.elem.css('width')
this.elem.find('.diagonal').css('borderBottomWidth', h)
this.elem.find('.diagonal').css('borderRightWidth', w)
this.elem.find('.nav.left').click((e) => {
this.prev()
})
this.elem.find('.nav.right').click((e) => {
this.next()
})
this.elem.find('.gallery').swipe({
swipeLeft: (e, dir, d, t, n, data) => {
this.next()
},
swipeRight: (e, dir, d, t, n, data) => {
this.prev()
}
})
},
current: 1,
next: function() {
var n = this.current + 1
if (n > this.fotos) {
n = 1
}
this.elem.find('.gallery .image img').attr('src', './assets/images/galeria/foto' + n + '.jpg')
this.current = n
},
prev: function() {
var n = this.current - 1
if (n < 1) {
n = this.fotos
}
this.elem.find('.gallery .image img').attr('src', './assets/images/galeria/foto' + n + '.jpg')
this.current = n
}
}
let dimensiones = {
colors: available_colors,
elem: $('#dimensiones'),
setup: function() {
this.elem.find('.colores .circle').each((i, el) => {
let color = $(el).attr('class').split(' ')[0]
let cssColor = $(el).css('background-color')
if (cssColor != this.colors[color]['rgb']) {
$(el).css('background-color', this.colors[color]['rgb'])
}
$(el).click((e) => {
this.change_color(color)
})
})
},
change_color: function(color) {
this.picked = this.colors[color]['name']
this.elem.find('.colores .circle').each((i, el) => {
$(el).removeClass('selected')
})
this.elem.find('.colores .' + color + '.circle').addClass('selected')
this.change_images(this.colors[color]['name'])
},
change_images: function(color) {
this.elem.find('.fotos img').each((i, el) => {
let pos = $(el).attr('class')
$(el).attr('src', './assets/images/fotos/' + color + '/' + pos + '.jpg')
})
}
}
const smtp = {
SecureToken: '4adcdc1f-6b6e-4e60-ab72-20da4c329b09',
From: 'contacto@3dstand.cl'
}
let sticky_form = {
elem: $('.sticky form'),
color: null,
amount: null,
setup: function() {
this.amount = new Amount($('.sticky .input input[name="cantidad"]'))
this.color = new Colors($('.sticky .colores'), true)
this.elem.submit((e) => {
e.preventDefault()
this.submit()
return false
})
},
submit: function() {
carro.add(this.elem.find('[name="cantidad"]').val(), this.elem.find('[name="color"]').val())
this.color.change_color('blue')
this.amount.n = 0
this.amount.print()
this.elem.trigger('reset')
}
}
let cotiza_form = {
elem: $('#corporativos form'),
setup: function() {
this.elem.submit((e) => {
e.preventDefault()
this.submit()
return false
})
this.file = this.elem.find('input[type="file"]')
this.elem.find('.file').click((e) => {
this.file.trigger('click')
})
},
submit: function() {
let email = this.elem.find('[name="email"]').val()
let data = new FormData(this.elem[0])
let body = [
'Nombre: ' + this.elem.find('[name="nombre"]').val(),
'E-mail: ' + email,
'Teléfono: ' + this.elem.find('[name="telefono"]').val(),
'',
'Color: ' + this.elem.find('[name="color"]').val(),
'Cantidad: ' + this.elem.find('[name="cantidad"]').val(),
this.elem.find('[name="mensaje"]').val()
]
let content = {
SecureToken: smtp.SecureToken,
To: email,
From: smtp.From,
Subject: 'Cotizacion - ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
Body: body.join('<br />'),
Attachments: [
{
name: "Logo",
data: data.get('archivo')
}
]
}
Email.send(content)
}
}
let conversemos_form = {
elem: $('#contacto_form'),
setup: function() {
this.elem.submit((e) => {
e.preventDefault()
this.submit()
return false
})
},
submit: function() {
let email = this.elem.find('[name="email"]').val()
let body = [
'Nombre: ' + this.elem.find('[name="nombre"]').val(),
'E-mail: ' + email,
'',
this.elem.find('[name="mensaje"]').val()
]
let content = {
SecureToken: smtp.SecureToken,
From: smtp.From,
To: email,
Subject: 'Contacto ' + (new Date()).toLocaleString('es-CL', {timezone: "UTC-3"}),
Body: body.join('<br />')
}
Email.send(content)
}
}
let testimonios = {
testimonios: [
{
"autor": "John Master",
"contenido": "Este soporte que compré en @Stand-cl me cambió la vida, me sirve para el teléfono y el ipad, y ya no tengo que andar acomodando los aparatos en cualquier parte para las videollamadas"
},
{
"autor": "John Master",
"contenido": "Siiii todo mi gusto.. me encantó lo completo que es. Gracias"
},
{
"autor": "John Master",
"contenido": "Está super cool se ve de buena calidad"
},
{
"autor": "John Master",
"contenido": "Llego el mío, y es excelente, estoy feliz con mi compra"
},
{
"autor": "John Master",
"contenido": "Hola!!Me llegó el pedido, Muchas gracias muy bello. Me salvaste la vida"
},
{
"autor": "John Master",
"contenido": "Perfecto el producto, funciona impecable, muchas gracias"
},
{
"autor": "John Master",
"contenido": "Están bacanes! muchísimas gracias. Le regalé a mis viejos y lo aman"
},
{
"autor": "John Master",
"contenido": "Hola! Quería decirte que me encantaron los soportes, Muy útiles!"
},
{
"autor": "John Master",
"contenido": "Compré 3 y olvidé decirte que los encontré geniales! Me encantaron"
},
{
"autor": "John Master",
"contenido": "Diseño simple y funcional, minimalista y excelente precio, despacho súper Rápido.. gracias!"
}
],
elem: $('#testimonios'),
page: 0,
maxPages: 1,
amount: 3,
word_amount: {
1: 'one',
3: 'three'
},
setup: function() {
this.maxPages = Math.ceil(this.testimonios.length / this.amount)
this.elem.find('.testimonios').swipe({
swipeRight: (e, dir, d, t, n, data) => {
this.page --
if (this.page < 0) {
this.page = this.maxPages - 1
}
this.draw()
},
swipeLeft: (e, dir, d, t, n, data) => {
this.page ++
if (this.page >= this.maxPages) {
this.page = 0
}
this.draw()
}
})
if (this.amount != 3) {
this.elem.find('.testimonios').removeClass('three')
this.elem.find('.testimonios').addClass(this.word_amount[this.amount])
}
this.draw()
},
draw: function() {
var n = this.page * this.amount
let p = this.elem.find('.testimonios')
p.html('')
for (var i = 0; i < this.amount; i ++) {
if (n >= this.testimonios.length) {
break
}
p.append(
$('<div></div>').attr('class', 'ui centered fluid card').append(
$('<div></div>').attr('class', 'center aligned content').append(
$('<div></div>').attr('class', 'header').html(this.testimonios[n]['autor'].toUpperCase())
).append(
$('<div></div>').attr('class', 'description').html(this.testimonios[n]['contenido'])
)
).append(
$('<div></div>').attr('class', 'center aligned content').append(
$('<div></div>').attr('class', 'ui mini black rating disabled').attr('data-rating', '5').attr('data-max-rating', '5')
)
)
)
n ++
}
this.elem.find('.ui.rating').rating()
this.draw_nav()
},
draw_nav: function() {
let N = this.maxPages
let k = this.page
let nav = this.elem.find('.nav')
let tests = this
nav.html('')
for (var i = 0; i < N; i ++) {
var circle = $('<i></i>').attr('class', 'small circle outline icon').css('cursor', 'pointer').attr('data-page', i)
if (i == k) {
circle.removeClass('outline')
}
circle.click(function(e) {
tests.page = parseInt($(this).attr('data-page'))
tests.draw()
})
nav.append(circle)
}
}
}
let sticky_button = {
elem: $('#columna_sticky #side_button'),
setup: function() {
$('#modal_sticky').modal()
this.elem.click((e) => {
$('#modal_sticky').modal('show')
})
this.elem.sticky({
context: '#column'
})
}
}
let modal_sticky_form = {
elem: $('#modal_sticky form'),
color: null,
amount: null,
setup: function() {
this.amount = new Amount($('#modal_sticky form .input input[name="cantidad"]'))
this.color = new Colors($('#modal_sticky form .colores'), true)
this.elem.submit((e) => {
e.preventDefault()
this.submit()
this.elem.parent('#modal_sticky').modal('hide')
return false
})
},
submit: function() {
carro.add(this.elem.find('[name="cantidad"]').val(), this.elem.find('[name="color"]').val())
this.color.change_color('blue')
this.amount.n = 0
this.amount.print()
this.elem.trigger('reset')
}
}
let sticky = {
elem: $('#columna_sticky'),
setup: function() {
var h = 0
$('section.columna').each((i, el) => {
h += $(el).outerHeight(true)
})
this.elem.height(h)
this.elem.find('#column').height(h)
sticky_form.setup()
this.elem.find('.sticky .precio').html('$ ' + format(valor))
if ($('#columna_sticky .sticky').css('display') != 'none') {
$('#columna_sticky .sticky').sticky({
context: '#column'
})
} else {
sticky_button.setup()
modal_sticky_form.setup()
}
}
}
let image = {
elem: $('.agrandable'),
modal: $('#images.modal'),
setup: function() {
this.modal.modal()
this.modal.find('.close.icon').click((e) => {
this.modal.modal('hide')
this.modal.find('.image').html('')
})
let p = this
this.elem.click(function(e) {
let img = $(this).find('img').attr('src')
p.modal.find('.image').html('')
p.modal.find('.image').append(
$('<img />').attr('src', img)
)
p.modal.find('.image img').css('width', '100%')
p.modal.modal('show')
})
}
}
function format(value) {
return (''+value).split('').reverse().join('').match(/.{1,3}/g).join('.').split('').reverse().join('')
}
class Producto {
constructor(id, cantidad, color) {
this.id = id
this.cantidad = cantidad
this.color = color
}
colorName() {
return this.color.toLowerCase().split(' ').map(function(str) {
return str.replace(str[0], str[0].toUpperCase())
}).join(' ')
}
precio(formateado = false) {
let precio = this.cantidad * valor
if (!formateado) {
return precio
}
return format(precio)
}
increase() {
this.cantidad ++
carro.cantidad ++
this.updateCantidad()
}
decrease() {
this.cantidad --
carro.cantidad --
this.updateCantidad()
if (this.cantidad <= 0) {
carro.remove(this.id)
}
}
updateCantidad() {
$('tr[data-id="' + this.id + '"]').find('input[name="cantidad' + this.id + '"]').val(this.cantidad)
carro.update()
carro.draw()
}
draw() {
let row = $('<tr></tr>').attr('data-id', this.id).append(
$('<td></td>').append(
$('<div></div>').attr('class', 'ui tiny image').append(
$('<img />').attr('src', './assets/images/fotos/' + this.color + '/thumb.jpg')
)
)
).append(
$('<td></td>').html('Stand ' + this.colorName())
).append(
$('<td></td>').attr('class', 'input cantidad').append(
$('<button></button>').attr('class', 'minus').attr('type', 'button').append(
$('<i></i>').attr('class', 'minus icon')
)
).append(
$('<input />').attr('type', 'text').attr('name', 'cantidad' + this.id).attr('value', this.cantidad)
).append(
$('<button></button>').attr('class', 'plus').attr('type', 'button').append(
$('<i></i>').attr('class', 'plus icon')
)
)
).append(
$('<td></td>').attr('class', 'precio').html('$ ' + this.precio(true))
).append(
$('<td></td>').append(
$('<i></i>').attr('class', 'trash icon')
)
)
row.find('button.minus').click((e) => {
this.decrease()
})
row.find('button.plus').click((e) => {
this.increase()
})
row.find('.trash.icon').click((e) => {
carro.remove(this.id)
})
return row
}
}
let carro = {
elem: $('#carro'),
boton: $('nav#menu .shopping.cart'),
cantidad: 0,
compras: [],
setup: function() {
this.boton.click((e) => {
this.draw()
})
this.elem.find('.close.icon').click((e) => {
this.elem.modal('hide')
})
this.elem.find('form').submit((e) => {
e.preventDefault()
this.submit()
return false
})
this.update()
},
update: function() {
this.boton.find('.cantidad').html(this.cantidad)
},
add: function(amount, color) {
amount = parseInt(amount)
if (amount <= 0) {
return
}
this.cantidad += amount
this.update()
let idx = this.compras.map(x => {return x.color}).indexOf(color)
if (idx > -1) {
this.compras[idx].cantidad += amount
return
}
let f = Date.now()
this.compras.push(new Producto(f, amount, color))
},
remove: function(id) {
if (this.compras.length == 0) {
this.cantidad = 0
this.update()
return
}
id = parseInt(id)
let idx = this.compras.map(x => {return x.id}).indexOf(id)
let n = this.compras[idx].cantidad
this.compras.splice(idx, 1)
this.cantidad -= n
this.update()
this.draw()
},
total: function(formateado = false) {
let total = this.cantidad * valor
if (!formateado) {
return total
}
return format(total)
},
draw: function() {
let t = this.elem.find('.productos table tbody')
t.html('')
$.each(this.compras, (i, el) => {
t.append(el.draw())
})
t.parent().find('.total .valor').html(this.total(true))
this.elem.modal('show')
},
submit: function() {
console.debug('Comprar')
}
}
$(document).ready(function() {
$('#subir').sticky()
carro.setup()
sticky.setup()
ventajas.setup()
dimensiones.setup()
let cotiza_amount = new Amount($('#corporativos .input input[name="cantidad"]'))
let cotiza_color = new Colors($('#corporativos .colores'))
cotiza_form.setup()
conversemos_form.setup()
image.setup()
window.mobileCheck = function() {
let check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
return check;
};
if (window.mobileCheck()) {
testimonios.amount = 1
}
testimonios.setup()
})