354 lines
8.7 KiB
JavaScript
354 lines
8.7 KiB
JavaScript
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, 0, 255)'
|
|
},
|
|
petrol: {
|
|
name: 'petroleo',
|
|
rgb: 'rgb(0, 0, 150)'
|
|
},
|
|
cyan: {
|
|
name: 'celeste',
|
|
rgb: 'rgb(150, 150, 255)'
|
|
},
|
|
green: {
|
|
name: 'verde',
|
|
rgb: 'rgb(0, 255, 0)'
|
|
},
|
|
yellow: {
|
|
name: 'amarillo',
|
|
rgb: 'rgb(255, 255, 0)'
|
|
},
|
|
orange: {
|
|
name: 'naranjo',
|
|
rgb: 'rgb(255, 130, 0)'
|
|
},
|
|
red: {
|
|
name: 'rojo',
|
|
rgb: 'rgb(255, 0, 0)'
|
|
}
|
|
}
|
|
|
|
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.color = {
|
|
white: 'blanco',
|
|
black: 'negro',
|
|
blue: 'azul',
|
|
green: 'verde',
|
|
yellow: 'amarillo',
|
|
orange: 'naranjo',
|
|
red: 'rojo'
|
|
}
|
|
this.picked = 'blue'
|
|
this.elem = elem
|
|
this.input = elem.find('input[name="color"]')
|
|
this.changing = null
|
|
if (changing) {
|
|
this.changing = elem.parent().parent().find('.column2 img')
|
|
}
|
|
this.setup()
|
|
}
|
|
setup() {
|
|
this.elem.find('.circle').each((i, el) => {
|
|
$(el).click((e) => {
|
|
let color = $(el).attr('class').split(' ')[0]
|
|
this.change_color(color)
|
|
})
|
|
})
|
|
this.change_color('blue')
|
|
}
|
|
default_color_format(el) {
|
|
$(el).removeClass('selected')
|
|
}
|
|
change_color(color) {
|
|
this.picked = this.color[color]
|
|
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/' + this.picked + '.png')
|
|
}
|
|
}
|
|
}
|
|
|
|
let ventajas = {
|
|
elem: $('#ventajas'),
|
|
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)
|
|
}
|
|
}
|
|
let dimensiones = {
|
|
colors: available_colors,
|
|
picked: 'blue',
|
|
elem: $('#dimensiones'),
|
|
setup: function() {
|
|
this.elem.find('.colores .circle').each((i, el) => {
|
|
let color = $(el).attr('class').split(' ')[0]
|
|
if (color == 'petrol' || color == 'cyan') {
|
|
$(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')
|
|
})
|
|
}
|
|
}
|
|
|
|
let smtp = {
|
|
SecureToken: '4adcdc1f-6b6e-4e60-ab72-20da4c329b09',
|
|
From: 'contacto@3dstand.cl'
|
|
}
|
|
|
|
let sticky_form = {
|
|
elem: $('.sticky form'),
|
|
setup: function() {
|
|
this.elem.submit((e) => {
|
|
e.preventDefault()
|
|
this.submit()
|
|
return false
|
|
})
|
|
},
|
|
submit: function() {
|
|
console.debug('submit sticky')
|
|
}
|
|
}
|
|
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'),
|
|
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: [
|
|
"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",
|
|
"Siiii todo mi gusto.. me encantó lo completo que es. Gracias",
|
|
"Está super cool se ve de buena calidad",
|
|
"Llego el mío, y es excelente, estoy feliz con mi compra",
|
|
"Hola!!Me llegó el pedido, Muchas gracias muy bello. Me salvaste la vida",
|
|
"Perfecto el producto, funciona impecable, muchas gracias",
|
|
"Están bacanes! muchísimas gracias. Le regalé a mis viejos y lo aman",
|
|
"Hola! Quería decirte que me encantaron los soportes, Muy útiles!",
|
|
"Compré 3 y olvidé decirte que los encontré geniales! Me encantaron",
|
|
"Diseño simple y funcional, minimalista y excelente precio, despacho súper Rápido.. gracias!"
|
|
],
|
|
elem: $('#felices .testimonios'),
|
|
page: 0,
|
|
setup: function() {
|
|
this.draw()
|
|
},
|
|
draw: function() {
|
|
var n = this.page * 3
|
|
this.elem.find('.testimonio').each((i, el) => {
|
|
if (n >= this.testimonios.length) {
|
|
$(el).html('')
|
|
return
|
|
}
|
|
$(el).html(this.testimonios[n])
|
|
n += 1
|
|
})
|
|
this.draw_nav()
|
|
},
|
|
draw_nav: function() {
|
|
let N = Math.ceil(this.testimonios.length / 3)
|
|
let k = this.page
|
|
let nav = this.elem.parent().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)
|
|
}
|
|
}
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
|
|
$('#menu.sticky').sticky()
|
|
$('.column2 .sticky').sticky({
|
|
context: '#column'
|
|
})
|
|
$('#subir').sticky()
|
|
|
|
$('.shopping.cart').innerText = 0
|
|
|
|
ventajas.setup()
|
|
dimensiones.setup()
|
|
let sticky_amount = new Amount($('.sticky .input input[name="cantidad"]'))
|
|
let sticky_color = new Colors($('.sticky .colores'), true)
|
|
sticky_form.setup()
|
|
let cotiza_amount = new Amount($('#corporativos .input input[name="cantidad"]'))
|
|
let cotiza_color = new Colors($('#corporativos .colores'))
|
|
cotiza_form.setup()
|
|
conversemos_form.setup()
|
|
testimonios.setup()
|
|
})
|