CR Lightbox

lightbox.js

charlierose.Helpers.lightbox = function() {

  if ($("#charlierose_lb").length != 0) {
    return false;
  }

  var lightbox_html = '<div id="mask"></div><div id="lightbox" style="display:none;"><iframe src="{{url}}" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-popups"></iframe></div>';
  var active_class = "lightbox-active";
  var lightbox_active = false;

  // if on a larger breakpoint show lightbox, else, go to the url
  function show_lightbox(url) {
    if (charlierose.media_query_in_use != "medium" && charlierose.media_query_in_use != "small") {
      var this_lightbox_html = lightbox_html.replace("{{url}}",url);
      $("#charlierose").insertAdjacentHTML('beforeend',this_lightbox_html);
      $("html").addClass(active_class);
      lightbox_active = true;
      $("#mask").on("click",function(event){
        document.trigger("close_lightbox");
      });
    } else {
      window.location = url;
    }
  }

  function close_lightbox() {
    $("#mask").parentNode.removeChild($("#mask"));
    $("#lightbox").parentNode.removeChild($("#lightbox"));
    $("html").removeClass(active_class);
    lightbox_active = false;
  }

  // listen for opens
  document.on("open_lightbox",function(event){
    show_lightbox(event.data.url);
  });

  // listen for closes
  document.on("close_lightbox",function(event){
    close_lightbox();
  });

  // listen for lightbox_load, position/resize as needed and listen for escape presses inside the iframe
  document.on("lightbox_load",function(event){
    var $lightbox = $("#lightbox");
    var $iframe = $("#lightbox iframe");
    var iframe_content_h = (event.data.height > 686) ? event.data.height : 686;
    var iframe_margin_top = Math.round(iframe_content_h/-2);
    var window_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    //
    $lightbox.css("height",iframe_content_h+"px");
    $lightbox.css("margin-top",(iframe_content_h >= window_h - 100) ? "100px" : iframe_margin_top+"px");
    $lightbox.css("top",(iframe_content_h >= window_h - 100) ? "0%" : "50%");
    $lightbox.style.display = '';
    $iframe.contentWindow.scrollTo(0,0);
    window.scrollTo(0,0);
    $iframe.contentWindow.on("keyup",function(event) {
      if (lightbox_active && event.keyCode == 27) {
        document.trigger("close_lightbox");
      }
    });
  });

  // if the window resizes over a breakpoint, check if we should still show the lightbox
  document.on("media_query_updated",function(){
    if (charlierose.media_query_in_use == "medium" || charlierose.media_query_in_use == "small") {
      // too small to display lightbox, switch to fallback url
      // gets the url from the lightbox itself
      if ($("#lightbox").length != 0) {
        window.location = $("iframe",$("#lightbox")).contentWindow.charlierose.Helpers.return_fallback_url() || "/";
      }
    }
  });

  // close on escape press
  document.on("keyup",function(event) {
    if (lightbox_active && event.keyCode == 27) {
      document.trigger("close_lightbox");
    }
  });
};

lightbox.scss

#mask {
  position: fixed;
  z-index: 11;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: .8;
  display: none;

  .lightbox-active & {
    display: block;

    @include breakpoint(medium) {
      display: none;
    }
  }
}

#lightbox {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  width: 800px;
  height: 686px; // was 500px
  margin: -343px 0 0 -400px; // was -250px 0 0 -400px
  background: $white asset-url('ajax-loader-bl.gif') no-repeat 50%;
  background-size: 24px;
  display: none;

  .lightbox-active & {
    display: block;

    @include breakpoint(medium) {
      display: none;
    }
  }

  iframe {
    width: 100%;
    height: 100%;
  }
}

lightbox_contents.scss

#charlierose_lb {
  background: #fff;
  padding: 44px 35px 35px;
  min-height: 500px;

  .icon-close {
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: .2;

    &:hover {
      opacity: 1;
    }
  }
}

lightbox_load.js

// this behavior triggers from inside the lightbox iframe, to tell the parent window the lightbox iframe has loaded
charlierose.Behaviors.lightbox_load = function(container) {
  parent.document.trigger("lightbox_load", {
    height: document.body.clientHeight || 500
  });
};

triggers.js

document.trigger("open_lightbox",{ url: container.attr("data-url") });

document.trigger("close_lightbox");

// or from inside the iframe that loads in the lightbox
parent.document.trigger("close_lightbox");