stand/assets/js/main.js

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.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('.column2 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/' + this.picked + '.png')
    }
  }
}

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]
      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_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,
  setup: function() {
    if (this.amount != 3) {
      this.elem.find('.testimonios').removeClass('three')
      this.elem.find('.testimonios').addClass(this.word_amount[this.amount])
    }
    this.draw()
  },
  amount: 3,
  word_amount: {
    1: 'one',
    3: 'three'
  },
  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 = Math.ceil(this.testimonios.length / this.amount)
    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)
    }
  }
}

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

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