yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor fixes with tree pickers and support for Canvas.

Browse Source 
Removal of AjaxControlToolkit from Canvas and custom non-used extenders.
Refactored Canvas with new modal window lib, better jQuery and browser support.
Minor CSS fixees.

[TFS Changeset #64405]
This commit is contained in:
Shandem
2010-03-03 15:19:51 +00:00
parent f0228555f8
commit a72d80e646
22 changed files with 513 additions and 1162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
umbraco/presentation/umbraco_client/Tree/UmbracoTree.js
View File

@@ -64,7 +64,7 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
$.fn.UmbracoTreeAPI = function() {
/// <summary>exposes the Umbraco Tree api for the selected object</summary>
if ($(this).length != 1) {
throw "UmbracoTreeAPI selector requires that there be exactly one control selected";
throw "UmbracoTreeAPI selector requires that there be exactly one control selected, this selector returns " + $(this).length;
};
// check if there's an api stored for the id of the object specified, if there's not
// check if the first child is a div and if that has the api specified

150
umbraco/presentation/umbraco_client/modal/modal.js
View File

@@ -13,13 +13,64 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
return $(this).data("ModalWindowAPI") == null ? null : $(this).data("ModalWindowAPI");
};
$.fn.ModalWindowShow = function(name, showHeader, width, height, top, leftOffset, closeTriggers, onCloseCallback) {
return $(this).each(function() {
//check if the modal exists already
if ($(this).closest(".umbModalBox").length) {
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 {
_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
show: function(selector, name, showHeader, width, height, top, leftOffset, closeTriggers, onCloseCallback) {
//check if the modal elems exist
if (!this._modalElemsExist()) {
this._createModalElems(false, selector);
}
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();
});
},
open: function(url, name, showHeader, width, height, top, leftOffset, closeTriggers, onCloseCallback) {
//check if the modal elems exist
if (!this._modalElemsExist()) {
this._createModalElems(true);
}
var _this = this;
this._open(name, showHeader,
width, height, top, leftOffset,
closeTriggers, onCloseCallback,
function(h) {
//get the iframe, and set the url
var umbModal = $(h.w);
var umbModalContent = $("iframe", umbModal);
umbModalContent.html('').attr('src', _this._getUniqueUrl(url));
umbModalContent.width(width);
umbModalContent.height(showHeader ? height - 30 : height);
umbModalContent.show();
});
},
_open: function(name, showHeader, width, height, top, leftOffset, closeTriggers, onCloseCallback, onCreate) {
/// <summary>Opens a modal window</summary>
/// <param name="top">Optional</param>
/// <param name="leftOffset">Optional</param>
@@ -35,21 +86,12 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
/// outVal = the value passed to the close window method that was used to close the window (if it was specified)
/// <returns>The generated jquery object bound to the modal window</returns>
//check if the modal elems exist
if (!this._modalElemsExist()) {
this._createModalElems();
}
var _this = this;
this._obj.jqm({
onShow: function(h) {
var umbModal = $(h.w);
var umbModalContent = $("iframe", umbModal);
umbModalContent.width(width);
umbModalContent.height(showHeader ? height - 30 : height);
//remove the header if it shouldn't be shown
if (!showHeader) {
@@ -80,10 +122,11 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
umbModal.css("left", newLeft);
}
umbModalContent.html('').attr('src', _this._getUniqueUrl(url));
umbModal.show();
umbModalContent.show();
if (typeof onCreate == "function") {
onCreate.call(_this, h)
}
$(document).keyup(function(event) {
if (event.keyCode == 27 && umbModal.css("display") == "block") {
@@ -99,17 +142,22 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
},
onHide: function(h) {
var umbModal = $(h.w);
var umbModalContent = $("iframe", umbModal);
var umbModalContent = $(".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
var e = { modalContent: umbModalContent, outVal: _this._rVal };
//pass the iframe if there is one
var e = { modalContent: iframe.length > 0 ? iframe : umbModalContent, outVal: _this._rVal };
onCloseCallback.call(_this, e);
}
h.w.hide();
h.o.remove();
umbModalContent.hide();
umbModalContent.html('').attr('src', '');
_this.close();
//remove any iframes that might be in there
if (iframe.length > 0) {
umbModalContent.hide();
umbModalContent.html('').attr('src', '');
_this.close();
}
}
});
@@ -127,35 +175,53 @@ Umbraco.Sys.registerNamespace("Umbraco.Controls");
this._obj.remove();
return false;
},
_createModalElems: function() {
_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 = "<div id=\"" + this._wId + "_modal\" class=\"umbModalBox\">" +
"<div class=\"umbModalBoxHeader\"></div><a href=\"#\" class=\"umbracModalBoxClose jqmClose\">&times;</a>" +
"<div class=\"umbModalBoxContent\"><iframe frameborder=\"0\" class=\"umbModalBoxIframe\" src=\"\"></iframe></div>" +
"</div>";
this._obj = $(overlayHtml).appendTo("body");
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");
}
else {
this._obj = $(overlayHtml).appendTo($(selector).parent());
}
var _this = this;
if ($.fn.draggable) this._obj.draggable({
cursor: 'move',
distance: 5,
iframeFix: true,
helper: function(event) {
var o = $(this).clone();
o.children().remove();
o.css("border-width", "1px");
return o;
},
start: function(event, ui) {
ui.helper.css("z-index", 20000);
},
stop: function(event, ui) {
_this._obj.css("top", ui.absolutePosition.top);
_this._obj.css("left", ui.absolutePosition.left);
}
});
if ($.fn.draggable) {
this._obj.draggable({
cursor: 'move',
distance: 5,
iframeFix: withIFrame,
helper: function(event) {
var o = $(this).clone();
o.children().remove();
o.css("border-width", "1px");
return o;
},
start: function(event, ui) {
ui.helper.css("z-index", 20000);
},
stop: function(event, ui) {
_this._obj.css("top", ui.absolutePosition.top);
_this._obj.css("left", ui.absolutePosition.left);
}
});
}
else {
this._obj.find(".umbModalBoxHeader").css("cursor", "default"); //remove the move cursor if we can't move
}
},
_getOverlayHtml: function(withIFrame) {
var overlayHtml = "<div id=\"" + this._wId + "_modal\" class=\"umbModalBox\">" +
"<div class=\"umbModalBoxHeader\"></div><a href=\"#\" class=\"umbracModalBoxClose jqmClose\">&times;</a>" +
"<div class=\"umbModalBoxContent\">";
if (withIFrame) {
overlayHtml += "<iframe frameborder=\"0\" class=\"umbModalBoxIframe\" src=\"\"></iframe>";
}
overlayHtml += "</div></div>";
return overlayHtml;
},
_modalElemsExist: function() {
return ($("#" + this._wId + "_modal").length > 0);

47
umbraco/presentation/umbraco_client/modal/style.css
View File

@@ -1,7 +1,7 @@
/* TODO: Change these to classes to support many modal boxes */
#umbModalBox,
.umbModalBox {
div#umbModalBox,
div.umbModalBox {
position: absolute;
top: 0;
border: 5px #a3a3a3 solid;
@@ -9,36 +9,37 @@
text-align: left;
z-index: 10000;
display: none;
background: #fff;
background: #fff ! important;
font: bold 100% "Lucida Grande", Arial, sans-serif;
}
#umbModalBox.loaded,
.umbModalBox.loaded
{
div#umbModalBox.loaded,
div.umbModalBox.loaded
{
background-image: none;
}
.jqmOverlay {background: url(modalBackground.gif)}
#umbModalBoxHeader,
.umbModalBoxHeader {
div#umbModalBoxHeader,
div.umbModalBoxHeader {
margin: 0;
text-shadow: #FFF 0 1px 0;
text-shadow: #FFF 0 1px 0;
padding: .5em 2em .5em .75em;
margin: 0;
text-align: left;
}
#umbModalBoxContent,
.umbModalBoxContent {
div#umbModalBoxContent,
div.umbModalBoxContent {
padding: 0px;
overflow: hidden;
height: 100%;
/*height: 100%;*/
background: #fff ! important;
}
#umbracModalBoxClose,
.umbracModalBoxClose {
a#umbracModalBoxClose,
a.umbracModalBoxClose {
display: block;
position: absolute;
right: 5px; top: 2px;
@@ -48,19 +49,19 @@
font-size: 13px;
}
#umbModalBoxContent,
.umbModalBoxContent {border-top: 1px solid #F9F9F9; }
div#umbModalBoxContent,
div.umbModalBoxContent {border-top: 1px solid #F9F9F9; }
#umbModalBoxHeader,
.umbModalBoxHeader {
background: url(modalGradiant.gif) repeat-x bottom #fff;
div#umbModalBoxHeader,
div.umbModalBoxHeader {
background: url(modalGradiant.gif) repeat-x bottom #fff ! important;
border-bottom: 1px solid #CCC;
color: #378080;
cursor:move;
}
#umbracModalBoxClose,
.umbracModalBoxClose { color: #777 }
div#umbracModalBoxClose,
div.umbracModalBoxClose { color: #777 }
#umbracModalBoxClose:hover,
.umbracModalBoxClose:hover { color: #000 }
div#umbracModalBoxClose:hover,
div.umbracModalBoxClose:hover { color: #000 }