• Meta

  Added about 1 year ago

• Categories

  • Background
  • Slider
  • Form
  • Ajax

• Links of interest

  1. Original Source
  2. At Twitter: @pixelworkers
  3. Timers jQuery Plugin

var UP3 = {};

(function(context) {
  $(document).ready(function() {

    context.signup.init();

    // Home page
    if ($(".index-page").size() > 0) {
      context.slide.listen();
    }
    if ($(".feature-art").is(":visible") == true && $(".interregnum").size() == 0) {
      context.showcase.init();
    } else if ($(".product-page").size() > 0) {
      context.product.init();
    }
  });

  context.settings = {
    frame: ($.browser.webkit) ? 'body' : 'html'
  };

  context.slide = {
    listen: function() {
      var self = this;

      $("#pre-order-link").click(function(event) {
        event.preventDefault();
        self.slide_page();
      });
    },
    slide_page: function() {
      var offset = $("#featured").offset();
      $(context.settings.frame).animate({
        scrollTop: offset.top
      }, 1000);
    }
  };



  context.showcase = {
    state: {
      slide: {
        current: 0,
        previous: 0
      },
      order: []
    },
    init: function() {
      this.prepareShowcase();
    },
    prepareShowcase: function() {
      this.buildNav();
      this.loadImages();
      this.initSlideshow();
    },
    buildNav: function() {
      var self = this;

      var $list = $("<ul>");

      var index = 0;

      // Build Nav
      $.each(showcase, function(key, item) {
        var navclass = (index == 0) ? " class='active'" : "";

        var $li = $("<li" + navclass + ">");

        var $a = $("<a href='" + item.product.url + "' data-feature-id='" + item.feature.name + "'>" + item.feature.title + "</a>");

        $a.click(function(event) {
          event.preventDefault();
          self._pauseSlideshow();
          self.swapFeature($(this), item.feature.name);
        });

        $li.append($a);
        $list.append($li);

        index++;
      });

      $list.appendTo(".showcase-nav");
    },
    loadImages: function() {

      var self = this;

      // Load Images
      index = 0;

      $.each(showcase, function(key, item) {

        if (index != 0) {
          self.createBackgroundImage(item);
          self.createSlide(item);
        }

        index++;
      });
    },
    swapFeature: function($el, name) {
      var self = this;

      self.state.slide.previous = self.state.slide.current;
      var index = $.inArray(name, self.state.order);
      self.state.slide.current = index;

      self._swapBackgroundImage(name);
      self._swapSlide(name);
      self._swapTheme("theme-" + name);
      self._updateNav($el);
    },
    _swapBackgroundImage: function(id) { /* Swap Background Image */
      var $img = $("#" + id);
      $img.detach().css({
        "opacity": "0"
      });
      $img.appendTo(".feature-art");
      $(document).oneTime(25, function() {
        $img.css("opacity", "1");
      });
    },
    _swapSlide: function(id) {
      var self = this;

      // self.pauseSlideshow();


      /* Swap Slide */
      $(".active-slide").removeClass("active-slide");
      var $slide = $("#" + id + "-slide");
      $slide.detach().appendTo(".slides");

      $(document).oneTime(750, function() {
        $slide.addClass("active-slide");
      });
    },
    _swapTheme: function(theme_class) { /* Swap Theme */
      $("#site-header").removeClass().addClass(theme_class);
    },
    _updateNav: function($el) { /* Update active nav element */
      $(".showcase-nav .active").removeClass("active");
      $el.parent().addClass("active");
    },
    createBackgroundImage: function(item) {
      // Background image
      $("<img src='" + item.feature.src + "' alt='" + item.feature.title + "' width='1200' height='650'' id='" + item.feature.name + "'/>").css({
        "top": "0",
        "position": "absolute",
        "height": "100%",
        "width": "100%"
      }).addClass("showcase-image").prependTo(".feature-art");
    },
    createSlide: function(item) {
      // Slide
      var $slide = $("<li class='slide " + item.feature.name + "-slide' id='" + item.feature.name + "-slide'>").css("display", "block");
      var $a = $("<a href='" + item.product.url + "'>");

      var $feature_image_container = $("<div class='feature-image'></div>");

      if (item.product.image) {
        var $feature_image = "<img src='" + item.product.image.src + "' alt='" + item.product.title + "' height='' width='' />";
        $feature_image_container.append($feature_image);
      }

      var $headlines = $("<div class='feature-hgroup'><h1 class='feature-headline'>" + item.feature.slide.headline + "</h1><h2 class='feature-deck'>" + item.feature.slide.subheadline + "</h2></div>");

      $a.append($feature_image_container).append($headlines);
      $slide.append($a);

      $slide.prependTo(".slides");
    },
    initSlideshow: function() {
      var self = this;

      $.each(showcase, function(key, item) {
        self.state.order.push(key);
      });

      self._runSlideshow();

    },
    _nextSlide: function() {
      var self = this;

      var current = self.state.slide.current;

      var last = self.state.order.length - 1;
      var next = (current == last) ? 0 : current + 1;

      var $el = $(".showcase-nav li:eq(" + next + ") a");

      self.swapFeature($el, self.state.order[next]);
    },
    _runSlideshow: function() {
      var self = this;

      $(document).everyTime("7s", "slideshow", function() {
        self._nextSlide();
      });
    },
    _pauseSlideshow: function() {
      var self = this;

      $(document).stopTime("slideshow");
      $(document).stopTime("resume");

      $(document).oneTime("23s", "resume", function() {
        self._runSlideshow();
      })
    }
  };

  context.product = {
    variant: "",
    addToCartButton: "",
    init: function() {
      var self = this;
      self.swapImages();
      self.listenForSize();
      self.disableAddToCart();
      self.toggleDetail();
      self.notifyMe();
    },
    toggleDetail: function() {
      $(".show-detail").click(function(event) {
        event.preventDefault();

        $(".detail-view").fadeIn(function() {
          var offset = $(window).scrollTop();
          $(".detail-view img").animate({
            "margin-top": offset
          });

          var page_height = $(document).height();
          var img_height = $(".detail-view img").outerHeight();
          var new_height = (page_height > img_height) ? page_height : img_height;
          $(".detail-view").height(new_height);

          $('body').click(function(event) {
            event.preventDefault();
            //				if ($(event.target).closest('.navigation, .nav-actions').length == 0) {
            $(".detail-view").fadeOut(function() {
              $('body').unbind('click');
            });
            //				};
          });
        });
      });
    },
    swapImages: function() {
      $(".image-swap a").click(function(event) {
        event.preventDefault();
        if ($(this).hasClass("active") == false) {
          // Swap image
          var new_image_index = $(this).index();
          var current_image_index = $(".image-swap .active").index();

          $new_image = $(".product-images img:eq(" + new_image_index + ")");
          $old_image = $(".product-images img:eq(" + current_image_index + ")");

          if (new_image_index == 0) {
            $old_image.fadeOut(function() {
              // If we're switching back to the shirt front, hide the shirt back to avoid problems with Svpply
              $(this).css("display", "none")
            });
            $new_image.fadeTo(400, 1);
          } else {
            $old_image.fadeTo(400, 0);
            $new_image.fadeIn();
          }

          // Update image nav
          $(".active").removeClass("active");
          $(this).addClass("active");
          $(".product-images").toggleClass("alt");
        }
      });
    },
    listenForSize: function() {
      var self = this;

      $(".sizes li a").click(function(event) {
        event.preventDefault();

        // Enable Add to Cart
        if (self.addToCartButton == "disabled") {
          self.enableAddToCart();
        }

        $(".add-to-cart").removeClass("inactive");

        $(".selected").removeClass("selected");
        $(this).parent().addClass("selected");

        self.variant = $(this).attr("data-variant-id");

      });
    },
    disableAddToCart: function() {
      this.addToCartButton = "disabled";

      $add = $(".add-to-cart").click(function(event) {
        event.preventDefault();
      });
    },
    enableAddToCart: function() {
      var self = this;

      $add = $(".add-to-cart");

      $add.click(function(event) {
        event.preventDefault();
        self.addToCart();
      });
    },
    addToCart: function() {
      var self = this;

      function highlight_cart() {
        var $button = $(".cart-button");

        $button.addClass("flux full-cart");

        $(document).oneTime(500, function() {
          $button.removeClass("flux");
        });
      }

      function badge_button() {
        var $add_button = $(".add-to-cart");
        $add_button.addClass("success");
        $(document).oneTime("1s", "success", function() {
          $(".add-to-cart").removeClass("success");
        });
      }

      Shopify.addItem(self.variant, 1, function() {
        Shopify.getCart(function(cart) {
          $(".cart-count").html(cart.item_count);
          badge_button();
          highlight_cart();
        });
      });
    },
    notifyMe: function() {
      $("#in-stock-notify-me").click(function(event) {
        event.preventDefault();

        var data = {};
        data.email = $("#in-stock-email-address").val();
        data.variant_id = $("#in-stock-variant").val();

        if (data.email != "") {
          $.ajax({
            url: "http://www.fullstopinteractive.com/shipify_rewrite/jsonp/subscribe",
            data: data,
            dataType: 'script',
            complete: function() {
              $("#in-stock-notification-form").html("<p>Boom. We got it. You'll be the first to know when more shirts are on the shelf.</p>")
            }
          });
        } else {
          alert("We need your email address to alert you. Try adding your email address.")
        }
      });
    }
  };

  context.signup = {
    config: {},
    init: function() {
      var self = this;
      var $input = $("#mce-EMAIL");
      this.config.val = $input.val();

      $input.focus(function() {
        if ($input.val() == self.config.val) {
          $input.val("");
        }
      });

      $input.blur(function() {
        if ($input.val() == "") {
          $input.val(self.config.val);
        }
      });

    }
  };

})(UP3);

var UP3 = {};

(function(context) {
	$(document).ready(function() {
				
		context.signup.init();
		
		// Home page
		if ($(".index-page").size() > 0) {
			context.slide.listen();
		}
		if ($(".feature-art").is(":visible") == true && $(".interregnum").size() == 0) {
			context.showcase.init();
		}
		else if ($(".product-page").size() > 0) {
			context.product.init();
		}
	});
	
	context.settings = {
		frame: ($.browser.webkit) ? 'body' : 'html'
	};
	
	context.slide = {
		listen: function() {
			var self = this;
			
			$("#pre-order-link").click(function(event) {				
				event.preventDefault();				
				self.slide_page();
			});
		},
		slide_page: function() {
			var offset = $("#featured").offset();
			$(context.settings.frame).animate({scrollTop: offset.top}, 1000);
		}
	};
	
		
	
	context.showcase = {
		state: {
			slide: {
				current: 0,
				previous: 0
			},
			order: []
		},
		init: function() {
			this.prepareShowcase();
		},
		prepareShowcase: function() {
			this.buildNav();
			this.loadImages();
			this.initSlideshow();
		},
		buildNav: function() {
			var self = this;
			
			var $list = $("<ul>");
			
			var index = 0;
			
			// Build Nav
			$.each(showcase, function(key, item) {
				var navclass = (index == 0) ? " class='active'" : "";
				
				var $li = $("<li" + navclass + ">");
				
				var $a = $("<a href='" + item.product.url + "' data-feature-id='" + item.feature.name + "'>" + item.feature.title + "</a>");
				
				$a.click(function(event) {
					event.preventDefault();		
					self._pauseSlideshow();	
					self.swapFeature($(this), item.feature.name);					
				});
				
				$li.append($a);
				$list.append($li);
				
				index++;
			});
			
			$list.appendTo(".showcase-nav");			
		},
		loadImages: function() {
			
			var self = this;
			
			// Load Images
			index = 0;
			
			$.each(showcase, function(key, item) {
				
				if (index != 0) {						
					self.createBackgroundImage(item);
					self.createSlide(item);									
				}
				
				index++;
			});		
		},
		swapFeature: function($el, name) {
			var self = this;
			
				self.state.slide.previous = self.state.slide.current;
			var index = $.inArray(name, self.state.order);			
				self.state.slide.current = index;				
			
			self._swapBackgroundImage(name);
			self._swapSlide(name);
			self._swapTheme("theme-" + name);
			self._updateNav($el);							
		},
		_swapBackgroundImage: function(id) {
			/* Swap Background Image */
			var $img = $("#" + id);
			$img.detach().css({
				"opacity" : "0"
			});
			$img.appendTo(".feature-art");
			$(document).oneTime(25, function() {
				$img.css("opacity", "1");				
			});
		},
		_swapSlide: function(id) {			
			var self = this;
			
			// self.pauseSlideshow();
			
				
			/* Swap Slide */
			$(".active-slide").removeClass("active-slide");
			var $slide = $("#" + id + "-slide");
			$slide.detach().appendTo(".slides");
			
			$(document).oneTime(750, function() {
				$slide.addClass("active-slide");
			});
		},
		_swapTheme: function(theme_class) {
			/* Swap Theme */
			$("#site-header").removeClass().addClass(theme_class);
		},
		_updateNav: function($el) {
			/* Update active nav element */
			$(".showcase-nav .active").removeClass("active");
			$el.parent().addClass("active");			
		},
		createBackgroundImage: function(item) {
			// Background image
			$("<img src='" + item.feature.src + "' alt='" + item.feature.title + "' width='1200' height='650'' id='" +  item.feature.name + "'/>").css({
				"top" : "0",
				"position" : "absolute",
				"height" : "100%",
				"width" : "100%"
			}).addClass("showcase-image").prependTo(".feature-art");						
		},
		createSlide: function(item) {
			// Slide
			var $slide = $("<li class='slide " + item.feature.name + "-slide' id='" + item.feature.name + "-slide'>").css("display", "block");
			var $a = $("<a href='" + item.product.url + "'>");
			
			var $feature_image_container = $("<div class='feature-image'></div>");
			
			if (item.product.image) {
				var $feature_image = "<img src='" + item.product.image.src + "' alt='" + item.product.title + "' height='' width='' />";
				$feature_image_container.append($feature_image);
			}				
			
			var $headlines = $("<div class='feature-hgroup'><h1 class='feature-headline'>" + item.feature.slide.headline + "</h1><h2 class='feature-deck'>" + item.feature.slide.subheadline + "</h2></div>");
		
			$a.append($feature_image_container).append($headlines);
			$slide.append($a);
		
			$slide.prependTo(".slides");			
		},
		initSlideshow: function() {
			var self = this;
			
			$.each(showcase, function(key, item) {
				self.state.order.push(key);
			});
			
			self._runSlideshow();
			
		},
		_nextSlide: function() {
			var self = this;
			
			var current = self.state.slide.current;
			
			var last = self.state.order.length - 1;
			var next = (current == last) ? 0 : current + 1;
			
			var $el = $(".showcase-nav li:eq(" + next + ") a");
				
				self.swapFeature($el, self.state.order[next]);			
		},
		_runSlideshow: function() {
			var self = this;
			
			$(document).everyTime("7s","slideshow", function() {				
				self._nextSlide();
			});			
		},
		_pauseSlideshow: function() {
			var self = this;
			
			$(document).stopTime("slideshow");
			$(document).stopTime("resume");
			
			$(document).oneTime("23s", "resume", function() {
				self._runSlideshow();
			})
		}
	};
		
	context.product = {
		variant: "",
		addToCartButton: "",
		init: function() {
			var self = this;
			self.swapImages();
			self.listenForSize();
			self.disableAddToCart();
			self.toggleDetail();
			self.notifyMe();
		},
		toggleDetail: function() {
			$(".show-detail").click(function(event) {
				event.preventDefault();
				
				$(".detail-view").fadeIn(function() {
					var offset = $(window).scrollTop();
					$(".detail-view img").animate({
						"margin-top": offset
					});
					
					var page_height = $(document).height();
					var img_height = $(".detail-view img").outerHeight();					
					var new_height = (page_height > img_height) ? page_height : img_height;
					$(".detail-view").height(new_height);
										
					$('body').click(function(event) {
							event.preventDefault();
		//				if ($(event.target).closest('.navigation, .nav-actions').length == 0) {
							$(".detail-view").fadeOut(function() {
								$('body').unbind('click');
							});
		//				};
					});					
				});
			});			
		},
		swapImages: function() {			
			$(".image-swap a").click(function(event) {
				event.preventDefault();
				if ($(this).hasClass("active") == false) {
					// Swap image
					var new_image_index = $(this).index();
					var current_image_index = $(".image-swap .active").index();
					
					$new_image = $(".product-images img:eq(" + new_image_index + ")");
					$old_image = $(".product-images img:eq(" + current_image_index + ")");
										
					if (new_image_index == 0) {
						$old_image.fadeOut(function() {
							// If we're switching back to the shirt front, hide the shirt back to avoid problems with Svpply
							$(this).css("display", "none")
						});
						$new_image.fadeTo(400, 1);						
					}
					else {
						$old_image.fadeTo(400, 0);
						$new_image.fadeIn();
					}
															
					// Update image nav
					$(".active").removeClass("active");
					$(this).addClass("active");
					$(".product-images").toggleClass("alt");
				}
			});
		},
		listenForSize: function() {
			var self = this;

			$(".sizes li a").click(function(event) {
				event.preventDefault();
				
				// Enable Add to Cart
				if (self.addToCartButton == "disabled") {
					self.enableAddToCart();
				}
				
				$(".add-to-cart").removeClass("inactive");
				
				$(".selected").removeClass("selected");
				$(this).parent().addClass("selected");
				
				self.variant = $(this).attr("data-variant-id");
				
			});			
		},
		disableAddToCart: function() {
			this.addToCartButton = "disabled";
			
			$add = $(".add-to-cart").click(function(event) {
				event.preventDefault();
			});
		},
		enableAddToCart: function() {
			var self = this;
			
			$add = $(".add-to-cart");
			
			$add.click(function(event) {				
				event.preventDefault();
				self.addToCart();				
			});					
		},
		addToCart: function() {		
			var self = this;
				
			function highlight_cart() {
				var $button = $(".cart-button");

				$button.addClass("flux full-cart");

				$(document).oneTime(500, function() {
					$button.removeClass("flux");
				});
			}
			
			function badge_button() {
				var $add_button = $(".add-to-cart");
				$add_button.addClass("success");
				$(document).oneTime("1s", "success", function() {
					$(".add-to-cart").removeClass("success");
				});
			}

			Shopify.addItem(self.variant, 1, function() {
				Shopify.getCart(function(cart) {
					$(".cart-count").html(cart.item_count);
					badge_button();
					highlight_cart();
				});
			});
		},
		notifyMe: function() {
			$("#in-stock-notify-me").click(function(event) {
				event.preventDefault();
				
				var data = {};
				data.email = $("#in-stock-email-address").val();
				data.variant_id = $("#in-stock-variant").val();
			
				if (data.email != "") {
					$.ajax({
						url: "http://www.fullstopinteractive.com/shipify_rewrite/jsonp/subscribe",
						data: data,
						dataType: 'script',
						complete: function(){
							$("#in-stock-notification-form").html("<p>Boom. We got it. You'll be the first to know when more shirts are on the shelf.</p>")
						}
					});					
				}
				else {
					alert("We need your email address to alert you. Try adding your email address.")
				}
			});
		}
	};
	
	context.signup = {
		config: {
		},
		init: function() {
			var self = this;
			var $input = $("#mce-EMAIL");
			this.config.val = $input.val();
			
			$input.focus(function() {
				if ($input.val() == self.config.val) {
					$input.val("");
				}
			});
			
			$input.blur(function() {
				if ($input.val() == "") {
					$input.val(self.config.val);
				}
			});
			
		}
	};
	
})(UP3);