Skip to content

Instantly share code, notes, and snippets.

@cbonnissent
Created March 7, 2014 14:23
Show Gist options
  • Save cbonnissent/9412348 to your computer and use it in GitHub Desktop.
Save cbonnissent/9412348 to your computer and use it in GitHub Desktop.
(function ($, _, Backbone) {
var template = _.template(
'<div class="modal-dialog modal-lg">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
' <% if (allowCancel) { %> ' +
' <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
' <% } %>' +
' <h3 class="js-modal-title css-modal-title"><% if (title) { %><%=title%><% } %></h3>' +
'</div>' +
'<div class="modal-body" style="max-height : none; overflow-y : hidden;">'+
'<iframe style="border : none; width : 100%;"src="<%=src%>">'+
'</div></div></div>'),
Modal = Backbone.View.extend({
tagName : "div",
className : "bootstrap-iframe-modal modal fade bs-modal-lg",
initialize : function (options) {
this.options = _.extend({
title : null,
allowCancel : true,
escapeOnClick : false,
animate : true,
template : template,
closeTarget : "Images/1x1.gif"
}, options);
},
render : function () {
var controlHide = _.bind(this.controlHide, this),
iframeReload = _.bind(this.iframeReload, this),
_resize = _.bind(this._resize, this);
this.$el.html(this.options.template(this.options));
if (this.options.animate) {
this.$el.addClass("fade");
}
this.isRendered = true;
this.$el.on("hide.bs.modal", controlHide);
this.$iframe = this.$el.find("iframe");
this.$iframe.on("load", iframeReload);
$(window).on("resize", _resize);
},
open : function () {
var $el = this.$el;
if (!this.isRendered) {
this.render();
}
$el.modal(_.extend({
keyboard : this.options.allowCancel,
backdrop : this.options.escapeOnClick ? true : 'static'
}, this.options.modalOptions));
this._resize();
this.trigger("open");
},
close : function () {
this.trigger("hide");
},
iframeReload : function () {
var title, doc = this.$iframe[0].contentDocument || this.$iframe[0].contentWindow.document;
if (doc && doc.location && doc.location.href &&
doc.location.href.toLowerCase().indexOf(this.options.closeTarget.toLowerCase()) > -1) {
this.canBeRemoved = true;
this.$el.modal("hide");
$(".modal-backdrop").remove();
this.trigger("close");
} else {
title = this.options.title;
if (!title) {
title = (doc && doc.title) ? doc.title : "";
}
this.$el.find(".js-modal-title").text(title);
this._resize();
}
},
controlHide : function (event) {
var currentModal = this;
if (this.canBeRemoved) {
_.defer(function () {
currentModal.remove();
}, 10);
return true;
}
event.preventDefault();
this.$iframe.attr("src", this.options.closeTarget);
return false;
},
_resize : function () {
var $window = $(window),
$width = $window.width() * 0.8,
$height = $window.height() * 0.8;
this.$iframe.height($height - this.$iframe.position().top - 65);
}
});
Backbone.BootstrapIframeModal = Modal;
})(jQuery, _, Backbone);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment