emerge1.2.1.nice.js

//! v.1.2.1, http://ilyabirman.net/projects/emerge/
if (jQuery) {
  !function($) {
    $(function() {
      /**
       * @param {Element} obj
       * @return {?}
       */
      $.expr[":"].uncached = function(obj) {
        if (!$(obj).is('img[src!=""]')) {
          return false;
        }
        /** @type {Image} */
        var img = new Image;
        return img.src = obj.src, !img.complete;
      };
      /** @type {Array} */
      var elems = [];
      /** @type {number} */
      var path = 500;
      /** @type {boolean} */
      var node = false;
      /** @type {boolean} */
      var r = false;
      /** @type {Array} */
      var codeSegments = ["backgroundImage", "borderImage", "borderCornerImage", "listStyleImage", "cursor"];
      /** @type {RegExp} */
      var rquickExpr = /url\(\s*(['"]?)(.*?)\1\s*\)/g;
      /** @type {number} */
      var s = 0;
      /**
       * @param {number} name
       * @param {string} data
       * @param {number} str
       * @param {number} obj
       * @param {number} callback
       * @return {?}
       */
      var template = function(name, data, str, obj, callback) {
        /** @type {string} */
        var emergeRotate = "emergeRotate" + ++s;
        return'<div style="position: absolute; transition: opacity ' + callback + 'ms ease-out"><div style="position: absolute; left: 50%; top: 50%; margin: -' + name + 'px"><svg xmlns="http://www.w3.org/2000/svg" width="' + 2 * name + '" height="' + 2 * name + '"viewBox="0 0 24 24" style="-webkit-animation: ' + emergeRotate + " " + obj + "ms linear infinite;animation: " + emergeRotate + " " + obj + 'ms linear infinite"><path fill="' + data + '" d="M17.25 1.5c-.14-.06-.28-.11-.44-.11-.55 0-1 .45-1 1 0 .39.23.72.56.89l-.01.01c3.2 1.6 5.39 4.9 5.39 8.71 0 5.38-4.37 9.75-9.75 9.75S2.25 17.39 2.25 12c0-3.82 2.2-7.11 5.39-8.71v-.02c.33-.16.56-.49.56-.89 0-.55-.45-1-1-1-.16 0-.31.05-.44.11C2.9 3.43.25 7.4.25 12c0 6.49 5.26 11.75 11.75 11.75S23.75 18.49 23.75 12c0-4.6-2.65-8.57-6.5-10.5z"><animateTransform attributeName="transform" type="rotate" from="' + 
        360 * str + ' 12 12" to="' + 360 * !str + ' 12 12" dur="' + obj + 'ms" repeatCount="indefinite" /></path></svg></div></div>';
      };
      if (window.navigator && "preview" === window.navigator.loadPurpose) {
        return $(".emerge").css("transition", "none"), $(".emerge").css("opacity", "1"), false;
      }
      /**
       * @param {Object} event
       * @return {?}
       */
      var fn = function(event) {
        return bodyHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight), event.offset().top - document.body.scrollTop < bodyHeight;
      };
      /**
       * @param {Object} el
       * @param {boolean} dataAndEvents
       * @return {?}
       */
      var add = function(el, dataAndEvents) {
        var backoff = el.data("hold");
        var expose = el.data("expose");
        if (expose && !fn(el)) {
          return el.data("_waitingForView", true), false;
        }
        if (backoff && !el.data("_holding")) {
          return el.data("_holding", true), setTimeout(function() {
            add(el, true);
          }, backoff), false;
        }
        if (el.data("_holding") && !dataAndEvents) {
          return false;
        }
        var pull = el.data("_spinner");
        if (pull) {
          pull.css("opacity", 0);
        }
        el.css("transition", "opacity " + path + "ms ease-out");
        el.css("opacity", "1");
        var pointerPosition = el.data("style-2");
        if (pointerPosition) {
          el.attr("style", el.attr("style") + "; " + pointerPosition);
        }
        el.data("_fired", true);
        remove();
      };
      /**
       * @param {?} element
       * @return {undefined}
       */
      var remove = function(element) {
        if (element) {
          elems.push(element);
        }
        var i;
        for (i in elems) {
          var arg = elems[i];
          if (arg.data("_fired")) {
          } else {
            var table;
            /** @type {boolean} */
            var _fired = false;
            if (table = arg.data("_waitFor")) {
              for (;;) {
                if (!table.data("_fired")) {
                  if (table[0] == arg[0]) {
                    /** @type {boolean} */
                    _fired = true;
                    break;
                  }
                  if (table = table.data("_waitFor")) {
                    continue;
                  }
                }
                break;
              }
              if (arg.data("_waitFor").data("_fired") || _fired) {
                add(arg);
              }
            } else {
              add(arg);
            }
          }
        }
      };
      /**
       * @return {undefined}
       */
      var done = function() {
        var i;
        for (i in elems) {
          var arg = elems[i];
          if (arg.data("_waitingForView")) {
            if (fn(arg)) {
              arg.data("_waitingForView", false);
              add(arg);
            }
          }
        }
      };
      /**
       * @return {undefined}
       */
      var link = function() {
        if (!r) {
          $(window).on("scroll", done);
          /** @type {boolean} */
          r = true;
        }
      };
      $(".emerge").each(function() {
        var self = $(this);
        var obj = {};
        /** @type {boolean} */
        var spin = false;
        /** @type {number} */
        var tmpl = 12;
        /** @type {number} */
        var suiteView = 1333;
        /** @type {string} */
        var data = "#404040";
        /** @type {number} */
        var errStr = 0;
        /** @type {number} */
        var restoreScript = path;
        /** @type {number} */
        var className = 0;
        /** @type {number} */
        var attr = 0;
        /** @type {string} */
        var s = "";
        /** @type {string} */
        var mask = "";
        /** @type {number} */
        var orig = path;
        var mouse = {};
        self.$prev = node;
        /**
         * @return {undefined}
         */
        var next = function() {
          if (self.data("continue")) {
            self.data("_waitFor", self.$prev);
          }
          if (self.data("await")) {
            self.data("_waitFor", $("#" + self.data("await")));
          }
          remove(self);
        };
        /**
         * @return {undefined}
         */
        var hide = function() {
          attr++;
          if (attr == className) {
            setTimeout(next, self.data("slow"));
          }
        };
        if (self.data("opaque") && self.css("opacity", 1), mouse = self.data("effect") || false, orig = self.data("duration") || path, expose = self.data("expose"), link(), mouse) {
          var bars = {};
          /** @type {Array} */
          var codeSegments = ["", "-webkit-"];
          /** @type {string} */
          var transform = "transform";
          /** @type {string} */
          var transform_origin = "transform-origin";
          var msg = self.data("up") || 0;
          var channel = self.data("down") || 0;
          var num = self.data("left") || 0;
          var k = self.data("right") || 0;
          var hasMembers = self.data("angle") || "90";
          var n = self.data("scale") || -1;
          var y = self.data("origin") || "50% 50%";
          if (channel && (msg = "-" + channel, "--" == msg.substr(0, 2) && (msg = msg.substr(2))), k && (num = "-" + k, "--" == num.substr(0, 2) && (num = num.substr(2))), "relax" == mouse && (-1 == n && (n = 0.92), "50% 50%" == y && (y = "top"), bars = {
            one : "scaleY(" + n + ")",
            two : "scaleY(1)",
            orn : y,
            crv : "cubic-bezier(0, 0, 0.001, 1)"
          }), "slide" == mouse && (msg || (msg = "20px"), bars = {
            one : "translate(" + num + "," + msg + ")",
            two : "translate(0,0)",
            crv : "cubic-bezier(0, 0.9, 0.1, 1)"
          }), "zoom" == mouse && (-1 == n && (n = 0.5), bars = {
            one : "scale(" + n + ")",
            two : "scale(1)",
            orn : y,
            crv : "cubic-bezier(0, 0.75, 0.25, 1)"
          }), "screw" == mouse && (-1 == n && (n = 0.5), hasMembers || (hasMembers = 90), bars = {
            one : "scale(" + n + ") rotate(" + hasMembers + "deg)",
            two : "scale(1) rotate(0)",
            orn : y,
            crv : "cubic-bezier(0, 0.75, 0.25, 1)"
          }), bars) {
            /** @type {number} */
            var i = 0;
            for (;i < codeSegments.length;++i) {
              s += codeSegments[i] + transform + ": " + bars.one + "; " + codeSegments[i] + transform_origin + ": " + bars.orn + "; ";
              mask += codeSegments[i] + transform + ": " + bars.two + "; " + codeSegments[i] + "transition: opacity " + orig + "ms ease-out, " + codeSegments[i] + transform + " " + orig + "ms " + bars.crv + "; ";
            }
          }
          self.data("style-1", s);
          self.data("style-2", mask);
        }
        if (s || (s = self.data("style-1")), s && self.attr("style", self.attr("style") + "; " + s), self.find("*").addBack().each(function() {
          var wrapper = $(this);
          if (wrapper.is("img:uncached")) {
            if (wrapper.attr("src")) {
              /** @type {boolean} */
              obj[wrapper.attr("src")] = true;
            }
          }
          /** @type {number} */
          var i = 0;
          for (;i < codeSegments.length;++i) {
            var items;
            var location = codeSegments[i];
            var selector = wrapper.css(location);
            /** @type {number} */
            var c = -1;
            if (selector && (c = selector.indexOf("url(")) >= 0) {
              for (;null !== (items = rquickExpr.exec(selector));) {
                /** @type {boolean} */
                obj[items[2]] = true;
              }
            }
          }
        }), Object.keys(obj).length > 0 && (spin = self.data("spin"))) {
          var idfirst = self.data("spin-element");
          if (idfirst) {
            var canvas = $("#" + idfirst).clone().css({
              position : "absolute",
              display : "block"
            })
          } else {
            if (self.data("spin-size")) {
              /** @type {number} */
              tmpl = self.data("spin-size") / 2;
            }
            if (self.data("spin-color")) {
              data = self.data("spin-color");
            }
            if (self.data("spin-period")) {
              suiteView = self.data("spin-period");
            }
            if (self.data("spin-direction")) {
              /** @type {number} */
              errStr = "clockwise" == self.data("spin-direction") ? 0 : 1;
            }
            restoreScript = orig;
            canvas = $(template(tmpl, data, errStr, suiteView, restoreScript));
          }
          canvas.css({
            width : "100%",
            height : Math.min(self.height(), document.body.clientHeight - self.offset().top)
          });
          self.before(canvas);
          self.data("_spinner", canvas);
        }
        for (i in obj) {
          /** @type {Image} */
          var image = new Image;
          /** @type {string} */
          image.src = i;
          className++;
          if (image.width > 0) {
            hide();
          } else {
            $(image).on("load error", hide);
          }
        }
        className++;
        hide();
        node = self;
      });
    });
  }(jQuery);
  document.write("<style>.emerge { opacity: 0; }</style>");
}
;