From 76d819cb7215108b970c907f34682025b8dea5cd Mon Sep 17 00:00:00 2001 From: Dwan Date: Tue, 17 Feb 2015 14:58:05 +0700 Subject: [PATCH 1/2] [ALL] Add target functionality - Change ajax call from $.ajax to load - Add "target" parameter to load target DOM from external url - Add target example --- example/external-target.html | 19 +++++++ example/index.html | 12 ++++ tshirt-popup.js | 103 +++++++++++++++++++---------------- 3 files changed, 86 insertions(+), 48 deletions(-) create mode 100644 example/external-target.html diff --git a/example/external-target.html b/example/external-target.html new file mode 100644 index 0000000..f69c4ea --- /dev/null +++ b/example/external-target.html @@ -0,0 +1,19 @@ + + + + + + + + T-Shirt Pop Up Target Example + + + +
+

T-Shirt Pop Up Target Example

+

These are examples for using tshirt popup. This one is external with targeted id page embeded directly into popup DOM.

+
+

This will be shown in normal page

+ + + diff --git a/example/index.html b/example/index.html index bb9b181..5417591 100644 --- a/example/index.html +++ b/example/index.html @@ -61,6 +61,14 @@

Basic usages

 $("a").popup();
+ +
  • +

    Basic popup with target element on the external url. +

    + 
    +$("a").popup({
+	target: "#target"
+});

  • Popup with width and height. By default, the popup will use the content width and height, you can either specific the width or height in the CSS or set the paramater like this: @@ -99,6 +107,10 @@

    Basic usages

    $("a.basicExample").popup({ iconPrefix: "fa" }); + $("a.basicExampleTarget").popup({ + iconPrefix: "fa", + target: "#target" + }); $("a.widthHeightExample").popup({ width: 400, height: 100, diff --git a/tshirt-popup.js b/tshirt-popup.js index b09b9a6..3105c7c 100644 --- a/tshirt-popup.js +++ b/tshirt-popup.js @@ -6,6 +6,7 @@ var defaults = { url: "", id: "popupOverflow", + target: "", type: "inline", className: "popupContent", animation: "bounceIn", @@ -32,51 +33,56 @@ url = settings.url; } + // If target is defined + if (settings.target !== "") { + url = url + " " + settings.target; + } + elem.click(function (e) { // Type of the popup is inline if (settings.type === "inline") { - $.ajax({ - url: url, - beforeSend: function () { - // Append all the necessary divs - if ($("#popupOverflow").length === 0) { - $("body").append(""); - } - - // Add loading content - $("#" + settings.id + " > div > div").html("

    "); - - // Set Height and Width - if (settings.width != "auto") { - $("#" + settings.id + " > div > div > div > div").width (settings.width); - } - if (settings.height != "auto") { - $("#" + settings.id + " > div > div > div > div").height (settings.height); - } - - // Draw close button - if (settings.closeButton) { - $("#" + settings.id + " > div > div > div").append(""); - } else { - $("#" + settings.id + " .close").remove(); - } + // Append all the necessary divs + if ($("#popupOverflow").length === 0) { + $("body").append(""); + } + + // Add loading content + $("#" + settings.id + " > div > div").html("

    "); + + // Set Height and Width + if (settings.width != "auto") { + $("#" + settings.id + " > div > div > div > div").width (settings.width); + } + if (settings.height != "auto") { + $("#" + settings.id + " > div > div > div > div").height (settings.height); + } + + // Draw close button + if (settings.closeButton) { + $("#" + settings.id + " > div > div > div").append(""); + } else { + $("#" + settings.id + " .close").remove(); + } - // Display popup and prevent touch scroll event - $("#" + settings.id).fadeIn(100).on('touchmove', function(e) { - if (settings.disableTouchScroll) { - e.preventDefault(); - } - }); + // Display popup and prevent touch scroll event + $("#" + settings.id).fadeIn(100).on('touchmove', function(e) { + if (settings.disableTouchScroll) { + e.preventDefault(); + } + }); - // Assign close action to close button - if (settings.closeButton) { - $("#" + settings.id + " .close").click(function (e) { - popup.close(); - e.preventDefault(); - }); - } - }, - error: function () { + // Assign close action to close button + if (settings.closeButton) { + $("#" + settings.id + " .close").click(function (e) { + popup.close(); + e.preventDefault(); + }); + } + + // Ajax call + $("#" + settings.id + " > div > div > div > div").load( url, function( response, status, xhr ) { + // Ir url is not found or connection is broken + if ( status === "error" ) { if ($("#popupOverflow .close").length === 0) { $("#" + settings.id + " > div > div > div").append(""); $("#" + settings.id + " .close").click(function (e) { @@ -87,15 +93,16 @@ $("#" + settings.id + " > div > div > div").addClass("animated " + settings.animation) $("#" + settings.id + " > div > div > div > div").html("


    Error while loading your content
    Please close this popup and try again

    "); - } - }).done(function (element, status) { - if (!settings.closeButton) { - $("#" + settings.id + " .close").remove(); - } - // Add animation - $("#" + settings.id + " > div > div > div").addClass("animated " + settings.animation) - $("#" + settings.id + " > div > div > div > div").html($(element)); + // Everything is fine so we can load it + } else { + if (!settings.closeButton) { + $("#" + settings.id + " .close").remove(); + } + + // Add animation + $("#" + settings.id + " > div > div > div").addClass("animated " + settings.animation); + } }); } From 266370240b97c0e7b8e1c3d7e7f21d109fcc1a99 Mon Sep 17 00:00:00 2001 From: Dwan Date: Tue, 17 Feb 2015 15:51:10 +0700 Subject: [PATCH 2/2] [ALL] Add youtube detection popup --- example/index.html | 21 ++++++++- tshirt-popup.css | 2 + tshirt-popup.js | 109 ++++++++++++++++++++++++++------------------- 3 files changed, 84 insertions(+), 48 deletions(-) diff --git a/example/index.html b/example/index.html index 5417591..36fd189 100644 --- a/example/index.html +++ b/example/index.html @@ -63,11 +63,19 @@

    Basic usages

    $("a").popup();
  • -

    Basic popup with target element on the external url. +

    Basic popup with target element on the external url. Sometimes you have very long external html and you want to load spesific DOM element. 

     $("a").popup({
 	target: "#target"
+});
    +
    • +
  • +

    Basic popup with iframe content external url. +

    + 
    +$("a").popup({
+	type: "iframe"
 });
  • @@ -96,6 +104,10 @@

    Basic usages

  • Loading something that unvailable or url from different domain will produce a broken link window.

    • +
  • +

    We love youtube. So we made our popup youtube aware. +

    +

    • You can view the source code for more information about popup features.

    @@ -111,6 +123,10 @@

    Basic usages

    iconPrefix: "fa", target: "#target" }); + $("a.basicIframe").popup({ + iconPrefix: "fa", + type: "iframe" + }); $("a.widthHeightExample").popup({ width: 400, height: 100, @@ -124,6 +140,9 @@

    Basic usages

    iconPrefix: "fa", className: "customClass" }); + $("a.basicYoutube").popup({ + iconPrefix: "fa" + }); }); diff --git a/tshirt-popup.css b/tshirt-popup.css index 30f58b1..5eb5e8d 100644 --- a/tshirt-popup.css +++ b/tshirt-popup.css @@ -15,6 +15,8 @@ html, body { width:100%; height:100% } -o-border-radius:4px; border-radius:4px; } +#popupContent .content.youtube { padding:0; background:#000 } + #popupContent a.close { position:absolute; top:-10px; left:initial; right:6px; background:#fff; color:#000; display:block; padding:0; margin:0; height:24px; width:24px; line-height:24px; text-align:center; -webkit-border-radius:100%; diff --git a/tshirt-popup.js b/tshirt-popup.js index 3105c7c..01db85b 100644 --- a/tshirt-popup.js +++ b/tshirt-popup.js @@ -21,64 +21,71 @@ this.close = function () { $("#" + settings.id).fadeOut(128); - $("#" + settings.id + " > div > div > div").removeClass("animated " + settings.animation); + $("#" + settings.id + " > div > div > div").removeClass("animated " + settings.animation).html(""); }; return this.each(function () { var elem = $(this), - url = elem.attr("href"); + url = elem.attr("href"), + youtube_id = ""; // If url is predefine if (settings.url !== "") { url = settings.url; } + // See if it's a youtube link + youtube_id = url.match(/(\?v=|\/\d\/|\/embed\/|\/v\/|\.be\/)([a-zA-Z0-9\-\_]+)/); + if (youtube_id !== null) { + settings.type = "iframe"; + } + // If target is defined if (settings.target !== "") { url = url + " " + settings.target; } elem.click(function (e) { - // Type of the popup is inline - if (settings.type === "inline") { - // Append all the necessary divs - if ($("#popupOverflow").length === 0) { - $("body").append(""); - } - - // Add loading content - $("#" + settings.id + " > div > div").html("

    "); - - // Set Height and Width - if (settings.width != "auto") { - $("#" + settings.id + " > div > div > div > div").width (settings.width); - } - if (settings.height != "auto") { - $("#" + settings.id + " > div > div > div > div").height (settings.height); - } - - // Draw close button - if (settings.closeButton) { - $("#" + settings.id + " > div > div > div").append(""); - } else { - $("#" + settings.id + " .close").remove(); + // Append all the necessary divs + if ($("#popupOverflow").length === 0) { + $("body").append(""); + } + + // Add loading content + $("#" + settings.id + " > div > div").html("

    "); + + // Set Height and Width + if (settings.width != "auto") { + $("#" + settings.id + " > div > div > div > div").width (settings.width); + } + if (settings.height != "auto") { + $("#" + settings.id + " > div > div > div > div").height (settings.height); + } + + // Draw close button + if (settings.closeButton) { + $("#" + settings.id + " > div > div > div").append(""); + } else { + $("#" + settings.id + " .close").remove(); + } + + // Display popup and prevent touch scroll event + $("#" + settings.id).fadeIn(100).on('touchmove', function(e) { + if (settings.disableTouchScroll) { + e.preventDefault(); } + }); - // Display popup and prevent touch scroll event - $("#" + settings.id).fadeIn(100).on('touchmove', function(e) { - if (settings.disableTouchScroll) { - e.preventDefault(); - } + // Assign close action to close button + if (settings.closeButton) { + $("#" + settings.id + " .close").click(function (e) { + popup.close(); + e.preventDefault(); }); + } - // Assign close action to close button - if (settings.closeButton) { - $("#" + settings.id + " .close").click(function (e) { - popup.close(); - e.preventDefault(); - }); - } - + // Type of the popup is inline + if (settings.type === "inline") { // Ajax call $("#" + settings.id + " > div > div > div > div").load( url, function( response, status, xhr ) { // Ir url is not found or connection is broken @@ -93,19 +100,27 @@ $("#" + settings.id + " > div > div > div").addClass("animated " + settings.animation) $("#" + settings.id + " > div > div > div > div").html("


    Error while loading your content
    Please close this popup and try again

    "); - - // Everything is fine so we can load it - } else { - if (!settings.closeButton) { - $("#" + settings.id + " .close").remove(); - } - - // Add animation - $("#" + settings.id + " > div > div > div").addClass("animated " + settings.animation); } }); + + + // Type of the popup is iframe + } else if (settings.type === "iframe") { + if (youtube_id !== null) { + $("#" + settings.id + " > div > div > div > div").addClass("youtube").html (''); + } else { + $("#" + settings.id + " > div > div > div > div").html ("