WORK IN PROGRESS, GET THE STABLE SOURCE FROM THE DOWNLOADS TAB

Examine & ClientDependency update.
Modal windows now render full screen and stack.

[TFS Changeset #64559]
This commit is contained in:
Shandem
2010-03-08 14:52:29 +00:00
parent cfb17900d9
commit 03f02a44bc
6 changed files with 115 additions and 44 deletions

View File

@@ -21,7 +21,7 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
LaunchPicker: function() {
var _this = this;
UmbClientMgr.openModalWindow(this._itemPickerUrl, this._label, this._showHeader, this._width, this._height, 30, 0, ['#cancelbutton'], function(e) { _this.SaveSelection(e); });
UmbClientMgr.openModalWindow(this._itemPickerUrl, this._label, this._showHeader, this._width, this._height, 60, 0, ['#cancelbutton'], function(e) { _this.SaveSelection(e); });
},
SaveSelection: function(e) {

View File

@@ -1,4 +1,4 @@
<clientDependency isDebugMode="false" version="9">
<clientDependency isDebugMode="false" version="10">
<fileRegistration defaultProvider="PageHeaderProvider" fileDependencyExtensions="js,css" enableCompositeFiles="true">
<providers>
<add name="PageHeaderProvider" type="ClientDependency.Core.FileRegistration.Providers.PageHeaderProvider, ClientDependency.Core" />

View File

@@ -18,7 +18,7 @@ Umbraco.Sys.registerNamespace("Umbraco.Application");
_mainTree: null,
_appActions: null,
_rootPath: "/umbraco", //this is the default
_modal: null,
_modal: new Array(), //track all modal window objects (they get stacked)
setUmbracoPath: function(strPath) {
/// <summary>
@@ -107,31 +107,49 @@ Umbraco.Sys.registerNamespace("Umbraco.Application");
}
},
openModalWindow: function(url, name, showHeader, width, height, top, leftOffset, closeTriggers, onCloseCallback) {
if (this._modal == null) {
this._modal = new Umbraco.Controls.ModalWindow();
//need to create the modal on the top window if the top window has a client manager, if not, create it on the current window
//if this is the top window, or if the top window doesn't have a client manager, create the modal in this manager
if (window == this.mainWindow() || !this.mainWindow().UmbClientMgr) {
var m = new Umbraco.Controls.ModalWindow();
this._modal.push(m);
m.open(url, name, showHeader, width, height, top, leftOffset, closeTriggers, onCloseCallback);
}
else {
//if the main window has a client manager, then call the main window's open modal method whilst keeping the context of it's manager.
if (this.mainWindow().UmbClientMgr) {
this.mainWindow().UmbClientMgr.openModalWindow.apply(this.mainWindow().UmbClientMgr,
[url, name, showHeader, width, height, top, leftOffset, closeTriggers, onCloseCallback]);
}
else {
return; //exit recurse.
}
}
this._modal.open(url, name, showHeader, width, height, top, leftOffset, closeTriggers, onCloseCallback);
},
closeModalWindow: function(rVal) {
/// <summary>
/// will close the latest open modal window, otherwise
/// if the modal object is null and the mainWindow is not null, this generally means this is
/// being called inside a modal window, so we'll check to see if we can get the parent modal
/// object and close it instead.
/// will close the latest open modal window.
/// if an rVal is passed in, then this will be sent to the onCloseCallback method if it was specified.
/// </summary>
if (this._modal != null) {
this._modal.close(rVal);
if (this._modal != null && this._modal.length > 0) {
this._modal.pop().close(rVal);
}
else {
//this will recursively try to close a modal window until window.parent or
//window.parent.UmbClientMgr doesn't exist.
//this will recursively try to close a modal window until the parent window has a modal object or the window is the top and has the modal object
var mgr = null;
if (window.parent == null || window.parent == window) {
return; //don't recurse, exit
//we are at the root window, check if we can close the modal window from here
if (window.UmbClientMgr != null && window.UmbClientMgr._modal != null && window.UmbClientMgr._modal.length > 0) {
mgr = window.UmbClientMgr;
}
else {
return; //exit recursion.
}
}
else if (typeof window.parent.UmbClientMgr != "undefined") {
window.parent.UmbClientMgr.closeModalWindow(rVal);
mgr = window.parent.UmbClientMgr;
}
mgr.closeModalWindow.call(mgr, rVal);
}
},
_debug: function(strMsg) {

View File

@@ -14,44 +14,58 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
};
$.fn.ModalWindowShow = function(name, showHeader, width, height, top, leftOffset, closeTriggers, onCloseCallback) {
/// <summary>Shows a modal window based on existing content in the DOM</summary>
return $(this).each(function() {
//check if the modal exists already
if ($(this).closest(".umbModalBox").length) {
if ($(this).closest(".umbModalBox").length > 0) {
var api = $(this).closest(".umbModalBox").ModalWindowAPI();
api._obj.jqmShow(); //since it exist, just re-show it
}
else {
var modal = Umbraco.Controls.ModalWindow();
modal.show(this, name, showHeader, width, height, top, leftOffset, closeTriggers, onCloseCallback);
}
}
});
};
Umbraco.Controls.ModalWindow = function() {
/// <summary>Modal window class, when open is called, it will create a temporary html element to attach the window to</summary>
return {
/// <summary>
/// Modal window class, when open is called, it will create a temporary html element to attach the window to.
/// The modal will attempt to be created in the top most frame if all of the libraries are found there, if not,
/// it uses the current frame's document/jquery objects.
/// </summary>
var m = {
_wId: Umbraco.Utils.generateRandom().toString().replace(".", ""), //the modal window ID that will be assigned
_obj: null, //the jquery element for the modal window
_rVal: null, //a return value specified when closing that gets passed to the onCloseCallback method
_cntr: ++Umbraco.Controls.ModalWindow.cntr, //counts instances
//get a reference to the topmost jquery object if there is a modal framework there, otherwise use current
_$: (window.top.jQuery && window.top.jQuery.jqm) ? window.top.jQuery : $,
//get a reference to the topmost document if we're selecting the topmost jquery, otherwise use the current
_document: (window.top.jQuery && window.top.jQuery.jqm) ? window.top.document : document,
show: function(selector, name, showHeader, width, height, top, leftOffset, closeTriggers, onCloseCallback) {
/// <summary>Shows a modal window based on existing content in the DOM</summary>
//check if the modal elems exist
if (!this._modalElemsExist()) {
this._createModalElems(false, selector);
}
var _this = this;
this._open(name, showHeader,
width, height, top, leftOffset,
closeTriggers, onCloseCallback,
function(h) {
//insert the content
var umbModal = $(h.w);
var umbModalContent = $(".umbModalBoxContent", umbModal);
umbModalContent.append($(selector));
$(selector).show();
var umbModal = _this._$(h.w);
var umbModalContent = _this._$(".umbModalBoxContent", umbModal);
umbModalContent.append(_this._$(selector));
_this._$(selector).show();
});
},
open: function(url, name, showHeader, width, height, top, leftOffset, closeTriggers, onCloseCallback) {
/// <summary>Shows a modal window with content specified in the url in an iframe</summary>
//check if the modal elems exist
if (!this._modalElemsExist()) {
this._createModalElems(true);
@@ -62,8 +76,8 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
closeTriggers, onCloseCallback,
function(h) {
//get the iframe, and set the url
var umbModal = $(h.w);
var umbModalContent = $("iframe", umbModal);
var umbModal = _this._$(h.w);
var umbModalContent = _this._$("iframe", umbModal);
umbModalContent.html('').attr('src', _this._getUniqueUrl(url));
umbModalContent.width(width);
umbModalContent.height(showHeader ? height - 30 : height);
@@ -91,7 +105,7 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
this._obj.jqm({
onShow: function(h) {
var umbModal = $(h.w);
var umbModal = _this._$(h.w);
//remove the header if it shouldn't be shown
if (!showHeader) {
@@ -107,15 +121,18 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
if (height > 0) {
umbModal.height(height);
}
//if the width is set, then set it in the center
if (width > 0) {
umbModal.width(width);
umbModal.css("left", (($(document).width() - width) / 2) + "px");
umbModal.css("left", ((_this._$(_this._document).width() - width) / 2) + "px");
}
//if the top is set
if (top > 0) {
umbModal.css("top", top + "px");
}
//if the leftOffset is set
if (leftOffset > 0) {
var newLeft = parseInt(umbModal.css("left").replace("px", "")) + leftOffset;
@@ -128,21 +145,39 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
onCreate.call(_this, h)
}
$(document).keyup(function(event) {
_this._$(_this._document).keyup(function(event) {
if (event.keyCode == 27 && umbModal.css("display") == "block") {
_this.close();
}
});
if (closeTriggers) {
for (var x in closeTriggers) {
_this._obj.jqmAddClose(closeTriggers[x]);
//Ok, this is a bit weird, but it makes sense. Since the selector passed in might be a selector
//that exists in the root jquery obj, the current jquery object, or an item in the iframe if there is one
//we'll try to find them all.
var trigger = closeTriggers[x];
//first check if the object passed in is already a jquery object
if (!trigger.jquery) {
trigger = _this._$(closeTriggers[x]); //find object in the doc that owns the modal container
if (trigger.length == 0) {
trigger = $(closeTriggers[x]); //find object in the doc that owns the curr jquery object
}
if (trigger.length == 0) {
try {
trigger = h.w.find("iframe").contents().find(closeTriggers[x]);
}
catch (err) {} //IE throws an exception when navigating iframes, but it stil works...
}
}
_this._obj.jqmAddClose(trigger);
}
}
},
onHide: function(h) {
var umbModal = $(h.w);
var umbModalContent = $(".umbModalBoxContent", umbModal);
var umbModal = _this._$(h.w);
var umbModalContent = _this._$(".umbModalBoxContent", umbModal);
var iframe = umbModalContent.find("iframe");
if (typeof onCloseCallback == "function") {
//call the callback if specified, pass the jquery content object as a param and the output value array
@@ -156,8 +191,9 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
if (iframe.length > 0) {
umbModalContent.hide();
umbModalContent.html('').attr('src', '');
_this.close();
_this._obj.remove();
}
_this._close();
}
});
@@ -167,35 +203,42 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
return this._obj;
},
close: function(rVal) {
/// <summary>Closes the modal window, Removes the object from the DOM</summary>
/// <summary>Closes the modal window</summary>
/// <param name="rVal">if specified, will add this parameter to the onCloseCallback method's outVal parameter so it may be used in the closing callback method
this._rVal = rVal;
top.focus();
this._obj.jqmHide();
this._obj.remove();
return false;
this._obj.jqmHide(); //do the hiding, this will call the onHide handler
},
_close: function() {
/// <summary>Finalizes the objects counter and instance manager</summary>
//remove the instance from the instance manager
Umbraco.Controls.ModalWindow.inst[this._cntr] = null;
Umbraco.Controls.ModalWindow.inst[this._wId] = null;
Umbraco.Controls.ModalWindow.cntr--; //reduce the counter
},
_createModalElems: function(withIFrame, selector) {
/// <summary>This will create the html elements required for the modal overlay if they do not already exist in the DOM</summary>
var overlayHtml = this._getOverlayHtml(withIFrame);
//create the modal dialog in the root if no selector, otherwise create at parent
//of selector
if (!selector) {
this._obj = $(overlayHtml).appendTo("body");
this._obj = this._$(overlayHtml).appendTo(this._$("body"));
}
else {
this._obj = $(overlayHtml).appendTo($(selector).parent());
this._obj = this._$(overlayHtml).appendTo(this._$(selector).parent());
}
//update the z-index so it stacks
this._obj.css("z-index", 10000 + (this._cntr * 10));
var _this = this;
if ($.fn.draggable) {
if (this._$.fn.draggable) {
this._obj.draggable({
cursor: 'move',
distance: 5,
iframeFix: withIFrame,
helper: function(event) {
var o = $(this).clone();
var o = _this._$(this).clone();
o.children().remove();
o.css("border-width", "1px");
return o;
@@ -224,7 +267,7 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
return overlayHtml;
},
_modalElemsExist: function() {
return ($("#" + this._wId + "_modal").length > 0);
return (this._$("#" + this._wId + "_modal").length > 0);
},
_getUniqueUrl: function(url) {
var r = Umbraco.Utils.generateRandom();
@@ -234,8 +277,18 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
return url += "?rndo=" + r;
}
};
//store a reference to this api by the id and the counter
Umbraco.Controls.ModalWindow.inst[m._cntr] = m;
Umbraco.Controls.ModalWindow.inst[m._wId] = Umbraco.Controls.ModalWindow.inst[m._cntr];
return m;
};
// instance manager
Umbraco.Controls.ModalWindow.cntr = 0;
Umbraco.Controls.ModalWindow.inst = {};
})(jQuery);