v2.0.0-beta

assets/js/main.js

@@ -1,3 +1,42 @@
+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
@@ -113,6 +152,47 @@ class Colors {
   }
 }
 
+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'
@@ -252,7 +332,7 @@ let testimonios = {
 
 $(document).ready(function() {
 
-  $('.menu.sticky').sticky()
+  $('#menu.sticky').sticky()
   $('.column2 .sticky').sticky({
     context: '#column'
   })
@@ -260,6 +340,8 @@ $(document).ready(function() {
 
   $('.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()