stand/public/assets/scripts/main.js

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