custom animator

You can pass an IWedgeAnimator to control the in/out animations. Comes
with two default animations!

3 files changed, 138 insertions, 72 deletions

diff --git a/Wedge.js b/Wedge.js
index 358c545..7b6d520 100644
--- a/Wedge.js
+++ b/Wedge.js
@@ -1,38 +1,77 @@
 /// <reference path="jquery.d.ts" />
+
+var SimpleFadeAnimation = (function () {
+    function SimpleFadeAnimation() {
+    }
+    SimpleFadeAnimation.prototype.animateIn = function (overlayId, contentId) {
+        $('#' + overlayId).fadeIn('slow');
+        $('#' + contentId).fadeIn('slow');
+    };
+
+    SimpleFadeAnimation.prototype.animateOut = function (overlayId, contentId, completed) {
+        $('#' + overlayId).fadeOut('slow');
+        $('#' + contentId).fadeOut('show');
+    };
+    return SimpleFadeAnimation;
+})();
+
+//Requires jQuery.GSAP for scale animations
+var ScaleInAnimation = (function () {
+    function ScaleInAnimation() {
+    }
+    ScaleInAnimation.prototype.animateIn = function (overlayId, contentId) {
+        $('#' + overlayId).fadeIn('slow');
+        var content = '#' + contentId;
+        $(content).css('transform', 'matrix(0.2, 0, 0, 0.2, 0, 0)');
+        $(content).animate({
+            scaleX: 1,
+            scaleY: 1,
+            "opacity": 1
+        });
+    };
+    ScaleInAnimation.prototype.animateOut = function (overlayId, contentId, completed) {
+        $('#' + overlayId).fadeOut('slow', completed);
+        $('#' + contentId).animate({
+            scaleX: 0.2,
+            scaleY: 0.2,
+            "opacity": 0
+        });
+    };
+    return ScaleInAnimation;
+})();
+
 /*
 * Displays the Wedge Lightbox.
 * link: A link to the youtube video or picture.
 * title: Text displayed below the content
 * type: The type of link provided - youtube or pic
 */
-function initWedge(link, title, type, doAutoPosition, opacity, allowExit) {
-    /*
-    * Shows the overlay
-    */
+function initWedge(link, title, type, animator, doAutoPosition, opacity, allowExit, overlayId, contentId) {
+    if (typeof animator === "undefined") { animator = new SimpleFadeAnimation; }
     if (typeof doAutoPosition === "undefined") { doAutoPosition = true; }
     if (typeof opacity === "undefined") { opacity = 0.9; }
     if (typeof allowExit === "undefined") { allowExit = true; }
-    $("body").append('<div id="lightOverlay" style="overflow:hidden;top:0px;left:0px;position:fixed;z-index:2147483630;opacity:' + opacity.toString() + ';background-color:#000000;display:none;" />');
-    $("#lightOverlay").css("height", window.innerHeight);
-    $("#lightOverlay").css("width", window.innerWidth);
-    $("#lightOverlay").fadeIn("slow");
+    if (typeof overlayId === "undefined") { overlayId = 'wedge-overlay'; }
+    if (typeof contentId === "undefined") { contentId = 'wedge-content'; }
+    /*
+    * Shows the overlay
+    */
+    var overlay = '#' + overlayId;
+    var content = '#' + contentId;
+
+    $('body').append('<div id="' + overlayId + '" style="overflow:hidden;top:0px;left:0px;position:fixed;z-index:2147483630;opacity:' + opacity.toString() + ';background-color:#000000;display:none;" />');
+    $(overlay).css('height', window.innerHeight);
+    $(overlay).css('width', window.innerWidth);
 
     if (allowExit) {
-        $("#lightOverlay").click("slow", function () {
-            var goodMarginLeft = $("#lightContent").css("margin-left");
-            var toGoLeft = (parseInt(goodMarginLeft.replace('px', '')) - 50);
-            $("#lightContent").animate({
-                opacity: 0,
-                marginLeft: toGoLeft
-            }, function () {
-                if (type == "div") {
-                    $("#" + link).appendTo($("body"));
-                    $("#" + link).hide();
+        $(overlay).click(function () {
+            animator.animateOut(overlayId, contentId, function () {
+                if (type == 'div') {
+                    $('#' + link).appendTo($('body'));
+                    $('#' + link).hide();
                 }
-                $("#lightContent").remove();
-                $("#lightOverlay").fadeOut(function () {
-                    $("#lightOverlay").remove();
-                });
+                $(content).stop().remove();
+                $(overlay).stop().remove();
             });
         });
     }
@@ -40,26 +79,23 @@ function initWedge(link, title, type, doAutoPosition, opacity, allowExit) {
     /*
     * Shows the content
     */
-    $("body").append('<div id="lightContent" style="text-align:center;z-index:2147483641;opacity:0;position:fixed;">');
+    $('body').append('<div id="' + contentId + '" style="text-align:center;z-index:2147483641;opacity:0;position:fixed;">');
     switch (type) {
-        case "youtube":
-            $("#lightContent").append('<iframe id="youtubeFrame" width="853" height="480" src="' + link.replace("/watch?v=", "/embed/").replace(/&.*/, "") + '" frameborder="0" allowfullscreen></iframe><h3 style="color:#A0A0A0;">' + title + '</h3>');
+        case 'youtube':
+            $(content).append('<iframe id="youtubeFrame" width="853" height="480" src="' + link.replace('/watch?v=', '/embed/').replace(/&.*/, '') + '" frameborder="0" allowfullscreen></iframe><h3 style="color:#A0A0A0;">' + title + '</h3>');
             break;
-        case "pic":
-            $("#lightContent").append('<img src="' + link + '" style="max-height:' + (window.innerHeight - 100) + 'px;max-width:' + (window.innerWidth - 100) + 'px;"/><h3 style="color:#A0A0A0;">' + title + '</h3>');
+        case 'pic':
+            $(content).append('<img src="' + link + '" style="max-height:' + (window.innerHeight - 100) + 'px;max-width:' + (window.innerWidth - 100) + 'px;"/><h3 style="color:#A0A0A0;">' + title + '</h3>');
             break;
-        case "div":
-            $("#" + link).show();
-            $("#lightContent").append($("#" + link));
+        case 'div':
+            $('#' + link).show();
+            $(content).append($("#" + link));
     }
     if (doAutoPosition) {
-        $("#lightContent").css({ top: '50%', left: '50%', margin: '-' + ($('#lightContent').height() / 2) + 'px 0 0 -' + ($('#lightContent').width() / 2) + 'px' }); //courtesy of http://archive.plugins.jquery.com/project/autocenter
+        $(content).css({ top: '50%', left: '50%', margin: '-' + ($(content).height() / 2) + 'px 0 0 -' + ($(content).width() / 2) + 'px' }); //courtesy of http://archive.plugins.jquery.com/project/autocenter
     }
-    var goodMarginLeft = $("#lightContent").css("margin-left");
-    $("#lightContent").css("margin-left", (parseInt(goodMarginLeft.replace('px', '')) - 50) + "px");
-    $("#lightContent").animate({
-        "opacity": 1,
-        marginLeft: goodMarginLeft
-    }, "slow");
+    var goodMarginLeft = $(content).css('margin-left');
+    $(content).css('margin-left', goodMarginLeft);
+    animator.animateIn(overlayId, contentId);
 }
 //# sourceMappingURL=Wedge.js.map
diff --git a/Wedge.js.map b/Wedge.js.map
index c07fa38..6f6b455 100644
--- a/Wedge.js.map
+++ b/Wedge.js.map
@@ -1 +1 @@
-{"version":3,"file":"Wedge.js","sourceRoot":"","sources":["Wedge.ts"],"names":["initWedge"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"Wedge.js","sourceRoot":"","sources":["Wedge.ts"],"names":["SimpleFadeAnimation","SimpleFadeAnimation.constructor","SimpleFadeAnimation.animateIn","SimpleFadeAnimation.animateOut","ScaleInAnimation","ScaleInAnimation.constructor","ScaleInAnimation.animateIn","ScaleInAnimation.animateOut","initWedge"],"mappings":"AAAA,oCAAoC;;AAOpC;IAAAA;IAUAC,CAACA;AAAAD,IATGA,0CAAAA,UAAUA,SAASA,EAAEA,SAASA;QAC1BE,CAACA,CAACA,GAAGA,GAAGA,SAASA,CAACA,CAACA,MAAMA,CAACA,MAAMA,CAACA;QACjCA,CAACA,CAACA,GAAGA,GAAGA,SAASA,CAACA,CAACA,MAAMA,CAACA,MAAMA,CAACA;IACrCA,CAACA;;IAEDF,2CAAAA,UAAWA,SAASA,EAAEA,SAASA,EAAEA,SAASA;QACtCG,CAACA,CAACA,GAAGA,GAAGA,SAASA,CAACA,CAACA,OAAOA,CAACA,MAAMA,CAACA;QAClCA,CAACA,CAACA,GAAGA,GAAGA,SAASA,CAACA,CAACA,OAAOA,CAACA,MAAMA,CAACA;IACtCA,CAACA;IACLH,2BAACA;AAADA,CAACA,IAAA;;AAED,2CAA2C;AAC3C;IAAAI;IAmBAC,CAACA;AAAAD,IAlBGA,uCAAAA,UAAUA,SAASA,EAAEA,SAASA;QAC1BE,CAACA,CAACA,GAAGA,GAAGA,SAASA,CAACA,CAACA,MAAMA,CAACA,MAAMA,CAACA;QACjCA,IAAIA,OAAOA,GAAGA,GAAGA,GAAGA,SAASA;QAC7BA,CAACA,CAACA,OAAOA,CAACA,CAACA,GAAGA,CAACA,WAAWA,EAAEA,8BAA8BA,CAACA;QAC3DA,CAACA,CAACA,OAAOA,CAACA,CAACA,OAAOA,CAACA;YACfA,MAAMA,EAAEA,CAACA;YACTA,MAAMA,EAAEA,CAACA;YACTA,SAASA,EAAEA,CAACA;SACfA,CAACA;IACNA,CAACA;IACDF,wCAAAA,UAAWA,SAASA,EAAEA,SAASA,EAAEA,SAASA;QACtCG,CAACA,CAACA,GAAGA,GAAGA,SAASA,CAACA,CAACA,OAAOA,CAACA,MAAMA,EAAEA,SAASA,CAACA;QAC7CA,CAACA,CAACA,GAAGA,GAAGA,SAASA,CAACA,CAACA,OAAOA,CAACA;YACvBA,MAAMA,EAAEA,GAAGA;YACXA,MAAMA,EAAEA,GAAGA;YACXA,SAASA,EAAEA,CAACA;SACfA,CAACA;IACNA,CAACA;IACLH,wBAACA;AAADA,CAACA,IAAA;;AAQD;;;;;EADG;AACH,SAAS,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAkD,EAAE,cAAqB,EAAE,OAAa,EAAE,SAAgB,EAAE,SAA2B,EAAE,SAA2B;IAApKI,uCAAAA,QAAQA,GAAmBA,IAAIA,mBAAmBA;AAAAA,IAAEA,6CAAAA,cAAcA,GAAGA,IAAIA;AAAAA,IAAEA,sCAAAA,OAAOA,GAAGA,GAAGA;AAAAA,IAAEA,wCAAAA,SAASA,GAAGA,IAAIA;AAAAA,IAAEA,wCAAAA,SAASA,GAAGA,eAAeA;AAAAA,IAAEA,wCAAAA,SAASA,GAAGA,eAAeA;AAAAA,IACtMA;;MAEGA;IACHA,IAAIA,OAAOA,GAAGA,GAAGA,GAAGA,SAASA;IAC7BA,IAAIA,OAAOA,GAAGA,GAAGA,GAAGA,SAASA;;IAE7BA,CAACA,CAACA,MAAMA,CAACA,CAACA,MAAMA,CAACA,WAAWA,GAAGA,SAASA,GAAGA,sFAAsFA,GAAGA,OAAOA,CAACA,QAAQA,CAACA,CAACA,GAAGA,6CAA6CA,CAACA;IACvMA,CAACA,CAACA,OAAOA,CAACA,CAACA,GAAGA,CAACA,QAAQA,EAAEA,MAAMA,CAACA,WAAWA,CAACA;IAC5CA,CAACA,CAACA,OAAOA,CAACA,CAACA,GAAGA,CAACA,OAAOA,EAAEA,MAAMA,CAACA,UAAUA,CAACA;;IAE1CA,IAAIA,SAASA,CAAEA;QACXA,CAACA,CAACA,OAAOA,CAACA,CAACA,KAAKA,CAACA;YACbA,QAAQA,CAACA,UAAUA,CAACA,SAASA,EAAEA,SAASA,EAAEA;gBACtCA,IAAIA,IAAIA,IAAIA,KAAKA,CAAEA;oBACfA,CAACA,CAACA,GAAGA,GAAGA,IAAIA,CAACA,CAACA,QAAQA,CAACA,CAACA,CAACA,MAAMA,CAACA,CAACA;oBACjCA,CAACA,CAACA,GAAGA,GAAGA,IAAIA,CAACA,CAACA,IAAIA,CAACA,CAACA;iBACvBA;gBACDA,CAACA,CAACA,OAAOA,CAACA,CAACA,IAAIA,CAACA,CAACA,CAACA,MAAMA,CAACA,CAACA;gBAC1BA,CAACA,CAACA,OAAOA,CAACA,CAACA,IAAIA,CAACA,CAACA,CAACA,MAAMA,CAACA,CAACA;YAC9BA,CAACA,CAACA;QACNA,CAACA,CAACA;KACLA;;IACDA;;MAEGA;IACHA,CAACA,CAACA,MAAMA,CAACA,CAACA,MAAMA,CAACA,WAAWA,GAAGA,SAASA,GAAGA,2EAA2EA,CAACA;IACvHA,QAAQA,IAAIA,CAACA;QACTA,KAAKA,SAASA;YACVA,CAACA,CAACA,OAAOA,CAACA,CAACA,MAAMA,CAACA,0DAA0DA,GAAGA,IAAIA,CAACA,OAAOA,CAACA,WAAWA,EAAEA,SAASA,CAACA,CAACA,OAAOA,CAACA,KAAKA,EAAEA,EAAEA,CAACA,GAAGA,wEAAwEA,GAAGA,KAAKA,GAAGA,OAAOA,CAACA;YACpOA,KAAMA;AAAAA,QACVA,KAAKA,KAAKA;YACNA,CAACA,CAACA,OAAOA,CAACA,CAACA,MAAMA,CAACA,YAAYA,GAAGA,IAAIA,GAAGA,sBAAsBA,GAAGA,CAACA,MAAMA,CAACA,WAAWA,GAAGA,GAAGA,CAACA,GAAGA,eAAeA,GAAGA,CAACA,MAAMA,CAACA,UAAUA,GAAGA,GAAGA,CAACA,GAAGA,mCAAmCA,GAAGA,KAAKA,GAAGA,OAAOA,CAACA;YAClMA,KAAMA;AAAAA,QACVA,KAAKA,KAAKA;YACNA,CAACA,CAACA,GAAGA,GAAGA,IAAIA,CAACA,CAACA,IAAIA,CAACA,CAACA;YACpBA,CAACA,CAACA,OAAOA,CAACA,CAACA,MAAMA,CAACA,CAACA,CAACA,GAAGA,GAAGA,IAAIA,CAACA,CAACA;AAACA,KACxCA;IACDA,IAAIA,cAAcA,CAAEA;QAChBA,CAACA,CAACA,OAAOA,CAACA,CAACA,GAAGA,CAACA,EAAEA,GAAGA,EAAEA,KAAKA,EAAEA,IAAIA,EAAEA,KAAKA,EAAEA,MAAMA,EAAEA,GAAGA,GAAGA,CAACA,CAACA,CAACA,OAAOA,CAACA,CAACA,MAAMA,CAACA,CAACA,GAAGA,CAACA,CAACA,GAAGA,UAAUA,GAAGA,CAACA,CAACA,CAACA,OAAOA,CAACA,CAACA,KAAKA,CAACA,CAACA,GAAGA,CAACA,CAACA,GAAGA,IAAIA,EAAEA,CAACA,EAAEA,kEAAkEA;KAC1MA;IACDA,IAAIA,cAAcA,GAAGA,CAACA,CAACA,OAAOA,CAACA,CAACA,GAAGA,CAACA,aAAaA,CAACA;IAClDA,CAACA,CAACA,OAAOA,CAACA,CAACA,GAAGA,CAACA,aAAaA,EAAEA,cAAcA,CAACA;IAC7CA,QAAQA,CAACA,SAASA,CAACA,SAASA,EAAEA,SAASA,CAACA;AAC5CA,CAACA"}
\ No newline at end of file
diff --git a/Wedge.ts b/Wedge.ts
index 1f1dfc9..f7bef3a 100644
--- a/Wedge.ts
+++ b/Wedge.ts
@@ -1,62 +1,92 @@
 /// <reference path="jquery.d.ts" />
 
+interface IWedgeAnimator {
+    animateIn(overlayId, contentId): void;
+    animateOut(overlayId, contentId, completed): void;
+}
+
+class SimpleFadeAnimation implements IWedgeAnimator {
+    animateIn(overlayId, contentId): void {
+        $('#' + overlayId).fadeIn('slow');
+        $('#' + contentId).fadeIn('slow');
+    }
+
+    animateOut(overlayId, contentId, completed): void {
+        $('#' + overlayId).fadeOut('slow');
+        $('#' + contentId).fadeOut('show');
+    }
+}
+
+//Requires jQuery.GSAP for scale animations
+class ScaleInAnimation implements IWedgeAnimator {
+    animateIn(overlayId, contentId) {
+        $('#' + overlayId).fadeIn('slow');
+        var content = '#' + contentId;
+        $(content).css('transform', 'matrix(0.2, 0, 0, 0.2, 0, 0)');
+        $(content).animate({
+            scaleX: 1,
+            scaleY: 1,
+            "opacity": 1
+        });
+    }
+    animateOut(overlayId, contentId, completed) {
+        $('#' + overlayId).fadeOut('slow', completed);
+        $('#' + contentId).animate({
+            scaleX: 0.2,
+            scaleY: 0.2,
+            "opacity": 0
+        });
+    }
+}
+
 /*
  * Displays the Wedge Lightbox.
  * link: A link to the youtube video or picture.
  * title: Text displayed below the content
  * type: The type of link provided - youtube or pic
  */
-function initWedge(link, title, type, doAutoPosition = true, opacity = 0.9, allowExit = true) {
+function initWedge(link, title, type, animator: IWedgeAnimator = new SimpleFadeAnimation, doAutoPosition = true, opacity = 0.9, allowExit = true, overlayId = 'wedge-overlay', contentId = 'wedge-content') {
     /*
      * Shows the overlay
      */
+    var overlay = '#' + overlayId;
+    var content = '#' + contentId;
 
-    $("body").append('<div id="lightOverlay" style="overflow:hidden;top:0px;left:0px;position:fixed;z-index:2147483630;opacity:' + opacity.toString() + ';background-color:#000000;display:none;" />');
-    $("#lightOverlay").css("height", window.innerHeight);
-    $("#lightOverlay").css("width", window.innerWidth);
-    $("#lightOverlay").fadeIn("slow");
+    $('body').append('<div id="' + overlayId + '" style="overflow:hidden;top:0px;left:0px;position:fixed;z-index:2147483630;opacity:' + opacity.toString() + ';background-color:#000000;display:none;" />');
+    $(overlay).css('height', window.innerHeight);
+    $(overlay).css('width', window.innerWidth);
 
     if (allowExit) {
-        $("#lightOverlay").click("slow", () => {
-            var goodMarginLeft = $("#lightContent").css("margin-left");
-            var toGoLeft = (parseInt(goodMarginLeft.replace('px', '')) - 50);
-            $("#lightContent").animate({
-                opacity: 0,
-                marginLeft: toGoLeft
-            }, function () {
-                if (type == "div") {
-                    $("#" + link).appendTo($("body"));
-                    $("#" + link).hide();
+        $(overlay).click(() => {
+            animator.animateOut(overlayId, contentId, () => {
+                if (type == 'div') {
+                    $('#' + link).appendTo($('body'));
+                    $('#' + link).hide();
                 }
-                $("#lightContent").remove();
-                $("#lightOverlay").fadeOut(function () {
-                    $("#lightOverlay").remove();
-                });
+                $(content).stop().remove();
+                $(overlay).stop().remove();
             });
         });
     }
     /*
      * Shows the content
      */
-    $("body").append('<div id="lightContent" style="text-align:center;z-index:2147483641;opacity:0;position:fixed;">');
+    $('body').append('<div id="' + contentId + '" style="text-align:center;z-index:2147483641;opacity:0;position:fixed;">');
     switch (type) {
-        case "youtube":
-            $("#lightContent").append('<iframe id="youtubeFrame" width="853" height="480" src="' + link.replace("/watch?v=", "/embed/").replace(/&.*/, "") + '" frameborder="0" allowfullscreen></iframe><h3 style="color:#A0A0A0;">' + title + '</h3>');
+        case 'youtube':
+            $(content).append('<iframe id="youtubeFrame" width="853" height="480" src="' + link.replace('/watch?v=', '/embed/').replace(/&.*/, '') + '" frameborder="0" allowfullscreen></iframe><h3 style="color:#A0A0A0;">' + title + '</h3>');
             break;
-        case "pic":
-            $("#lightContent").append('<img src="' + link + '" style="max-height:' + (window.innerHeight - 100) + 'px;max-width:' + (window.innerWidth - 100) + 'px;"/><h3 style="color:#A0A0A0;">' + title + '</h3>')
+        case 'pic':
+            $(content).append('<img src="' + link + '" style="max-height:' + (window.innerHeight - 100) + 'px;max-width:' + (window.innerWidth - 100) + 'px;"/><h3 style="color:#A0A0A0;">' + title + '</h3>');
             break;
-        case "div":
-            $("#" + link).show();
-            $("#lightContent").append($("#" + link));
+        case 'div':
+            $('#' + link).show();
+            $(content).append($("#" + link));
     }
     if (doAutoPosition) {
-        $("#lightContent").css({ top: '50%', left: '50%', margin: '-' + ($('#lightContent').height() / 2) + 'px 0 0 -' + ($('#lightContent').width() / 2) + 'px' }); //courtesy of http://archive.plugins.jquery.com/project/autocenter
+        $(content).css({ top: '50%', left: '50%', margin: '-' + ($(content).height() / 2) + 'px 0 0 -' + ($(content).width() / 2) + 'px' }); //courtesy of http://archive.plugins.jquery.com/project/autocenter
     }
-    var goodMarginLeft = $("#lightContent").css("margin-left");
-    $("#lightContent").css("margin-left", (parseInt(goodMarginLeft.replace('px', '')) - 50) + "px");
-    $("#lightContent").animate({
-        "opacity": 1,
-        marginLeft: goodMarginLeft
-    }, "slow");
+    var goodMarginLeft = $(content).css('margin-left');
+    $(content).css('margin-left', goodMarginLeft);
+    animator.animateIn(overlayId, contentId);
 }
\ No newline at end of file