expired links

gistfile1.js

(function () {
  var env, test, $;


  /*
   * Set up environment
   */
  (env = {
    init: function () {
      $ = env.getJquery();
    },

    getJquery: function () {
      return window.jQuery || window.optimizely.$;
    },

    trackEvent: function(name){
      if(!window._qtd) {
        setTimeout(trackEvent, 200, name);
        return; 
      }
      window._qtd.push({
        data: {
          _c_evt_cl_txt: name
        }
      });
      window.optimizely.push(['trackEvent', name]);
    },

    /*
     * Helper functions
     */
    _each: function (collection, callback) {
      for (el in collection) {
        if (collection.hasOwnProperty(el)) {
          callback(collection[el]);
        } 
      }
    },

    _html: function (arr) {
      return $(arr.join(""));      
    },

    _urlMatch: function (regex, callback) {
      if (regex.test(window.location.href)) {
        return callback();
      }
    },

  }).init();

  
  /*
   * Test code
   */
  (test = {

    options: {
      fireSelector: "#section-expired", // When we hit this selector, fire show!
      codeSelector: "#section-vouchers article:first",
      eventNameSpace: "slider",
      widgetWidth: 500,
      hideDistanceFromExpired: 1000
    },

    /* Properties */
    widget: null,
    scrolledToCodeAndOpened: false,


    /* Methods */
    init: function () {
      test.observeScrollToExpired();
    },

    ns: function (eventType, namespace) {
      namespace = namespace || test.options.eventNameSpace;
      return eventType + "." + namespace;
    },

    observeScroll: function (targetScrollTop, callback, namespace) {
      var $window; 
      $window = $(window);

      $window.bind( test.ns("scroll", namespace), function (e) {
        if (callback($window.scrollTop(), targetScrollTop) === false) {
          $window.unbind( test.ns("scroll", namespace) );
        }
      });
    },

    // Observe scroll until we reach expired section
    observeScrollToExpired: function () {
      var targetScrollTop;

      targetScrollTop = $(test.options.fireSelector).offset().top; 
      targetScrollTop -= $window.height() / 2;

      test.observeScroll(targetScrollTop, function (curr, target) {
        if (curr >= target) {
          test.triggerShow();
          return false;
        }
      }, "scrolltoexpired");
    },

    observeScrollToTop: function () {
      var targetScrollTop = $(test.options.fireSelector).offset().top
        - test.options.hideDistanceFromExpired;   

      test.observeScroll(targetScrollTop, function (curr, target) {
        if (curr <= target) {
          test.closeWidget();
          test.observeScrollToExpired();
          return false;
        }
      }, "scrolltotop");
    },

    triggerShow: function () {
      test.buildWidget();
      test.addCodeToWidget();
      test.prepareWidgetForSlide();
      test.slideIn();
      test.observeScrollToTop();
    },

    buildWidget: function () {
      var widget = test.widget = env._html([
        "<div class='widget-holder'>",
          "<div class='widget'>",
            "<h2>Hey, you've reached the expired codes</h2>",
            "<div class='contents'>",
              "<p>Why not check out the <strong>latest</strong> free discount offer:</p>",
              "<div class='codeHolder'></div>",
            "</div>",

            "<div class='close-button'>x</div>",
          "</div>",
        "</div>"
      ]);
      
      widget.css({
        left: "50%",
        top: $(window).height() / 2,
        position: "fixed"
      });

      widget.find(".widget").css({
        position: "relative",
        width: test.options.widgetWidth,
        marginLeft: -test.options.widgetWidth / 2,
        padding: "5px",
        background: "#0098C3",
        color: "#333",
        border: "1px solid #CCC",
        borderRadius: "5px",
        boxShadow: "0px 1px 14px 2px #ccc, inset 0px 0px 1px 1px #fff"
      });

      widget.find("h2").css({
        color: "#FFF",
        fontSize: "20px",
        padding: "2px 5px",
        fontWeight: "bold"
      });

      widget.find(".contents").css({
        background: "#fff",
        border: "inherit",
        padding: "10px",
      });

      widget.find("p").css({
        fontSize: "14px"
      });

      widget.find(".close-button").css({
        width: "22px",
        height: "22px",
        position: "absolute",
        top: "8px",
        right: "0px",
        cursor: "pointer"
      }).mousedown(function () {
        test.closeWidget();
      });

      widget.find("strong").css("font-weight", "bold");

      widget.appendTo("body");
    },

    addCodeToWidget: function () {
      var code = $(test.options.codeSelector);
      code = code.clone();
      code.find("aside, .code-meta").remove();
      test.widget.find(".codeHolder")
        .css("margin-top", "20px")
        .append(code);

      // Change link action
      test.widget.find("a.code-cta-vc").click(function (e) {
        e.preventDefault();
        test.scrollToCodeAndOpen();
      })
    },

    prepareWidgetForSlide: function () {
      test.widget.css({
        left: "105%" // > 100 for good luck.
      });
    },

    slideIn: function () {
      test.widget.animate({
        left: "50%" 
      }); 
    },

    closeWidget: function () {
      test.widget.fadeOut();
    },

    scrollToCodeAndOpen: function (callback) {
      if (!test.scrolledToCodeAndOpened) {
        test.scrolledToCodeAndOpened = true;

        var code, reveal, ran;
        ran = false;
        code = $(test.options.codeSelector);

        test.closeWidget();

        $("html, body").animate({
          scrollTop: code.offset().top
        }, function () {
          if (!ran) {
            ran = true;
            code.find("a.code-ctabutton").trigger("click");
            window.focus();
          }
        });
      }
    }

  }).init();

})();