203 lines
9.2 KiB
Plaintext
203 lines
9.2 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="insertImage.aspx.cs" Inherits="umbraco.presentation.plugins.tinymce3.insertImage" %>
|
|
<%@ Register TagPrefix="ui" Namespace="umbraco.uicontrols" Assembly="controls" %>
|
|
<%@ Register TagPrefix="umb" Namespace="ClientDependency.Core.Controls" Assembly="ClientDependency.Core" %>
|
|
<%@ Register TagPrefix="umb2" TagName="Tree" Src="../../controls/Tree/TreeControl.ascx" %>
|
|
<%@ Register TagPrefix="umb3" TagName="Image" Src="../../controls/Images/ImageViewer.ascx" %>
|
|
<%@ Register TagName="MediaUpload" TagPrefix="umb4" Src="../../controls/Images/UploadMediaImage.ascx" %>
|
|
<%@ Register TagPrefix="umbClient" Namespace="Umbraco.Web.UI.Bundles" Assembly="umbraco" %>
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head runat="server">
|
|
<title>{#advimage_dlg.dialog_title}</title>
|
|
|
|
<base target="_self" />
|
|
|
|
<ui:UmbracoClientDependencyLoader runat="server" id="ClientLoader" />
|
|
|
|
<umbClient:JsApplicationLib runat="server" />
|
|
<umbClient:JsJQueryCore runat="server" />
|
|
<umbClient:JsUmbracoApplicationCore runat="server" />
|
|
|
|
<umb:JsInclude ID="JsInclude9" runat="server" FilePath="Application/jQuery/jquery.noconflict-invoke.js" PathNameAlias="UmbracoClient" Priority="1" />
|
|
<umb:JsInclude ID="JsInclude8" runat="server" FilePath="ui/default.js" PathNameAlias="UmbracoClient" Priority="4" />
|
|
<umb:JsInclude ID="JsInclude4" runat="server" FilePath="tinymce3/tiny_mce_popup.js" PathNameAlias="UmbracoClient" Priority="100" />
|
|
<umb:JsInclude ID="JsInclude5" runat="server" FilePath="tinymce3/utils/mctabs.js" PathNameAlias="UmbracoClient" Priority="101" />
|
|
<umb:JsInclude ID="JsInclude6" runat="server" FilePath="tinymce3/utils/form_utils.js" PathNameAlias="UmbracoClient" Priority="102" />
|
|
<umb:JsInclude ID="JsInclude7" runat="server" FilePath="tinymce3/utils/validate.js" PathNameAlias="UmbracoClient" Priority="103" />
|
|
|
|
<umb:JsInclude ID="JsInclude2" runat="server" FilePath="tinymce3/utils/editable_selects.js" PathNameAlias="UmbracoClient" Priority="110" />
|
|
<umb:JsInclude ID="JsInclude1" runat="server" FilePath="tinymce3/plugins/umbracoimg/js/image.js" PathNameAlias="UmbracoClient" Priority="111" />
|
|
|
|
|
|
|
|
<style type="text/css">
|
|
.imageViewer .bgImage {position: absolute; top: 3px; right: 3px; }
|
|
</style>
|
|
|
|
</head>
|
|
<body id="advimage" style="display: none">
|
|
|
|
<script type="text/javascript" language="javascript">
|
|
function dialogHandler(id) {
|
|
if (id != -1) {
|
|
jQuery("#<%=ImageViewer.ClientID%>").UmbracoImageViewerAPI().updateImage(id, function(p) {
|
|
//when the image is loaded, this callback method fires
|
|
if (p.hasImage) {
|
|
updateImageSource(p.url, p.alt, p.width, p.height);
|
|
return;
|
|
}
|
|
else {
|
|
alert("An error occured: Image selected could not be found");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function uploadHandler(e) {
|
|
dialogHandler(e.id);
|
|
//get the tree object for the chooser and refresh
|
|
var tree = jQuery("#<%=DialogTree.ClientID%>").UmbracoTreeAPI();
|
|
tree.refreshTree();
|
|
}
|
|
|
|
function updateImageSource(src, alt, width, height) {
|
|
// maybe we'll need to remove the umbraco path from the src
|
|
var umbracoPath = tinyMCE.activeEditor.getParam('umbraco_path');
|
|
if (src.substring(0, umbracoPath.length) == umbracoPath) {
|
|
// if the path contains a reference to the umbraco path, it also contains a reference to go up one level (../)
|
|
src = src.substring(umbracoPath.length + 3, src.length);
|
|
}
|
|
|
|
var formObj = document.forms[0];
|
|
formObj.src.value = src;
|
|
|
|
formObj.alt.value = alt;
|
|
|
|
var imageWidth = width;
|
|
var imageHeight = height;
|
|
var orgHeight = height;
|
|
var orgWidth = width;
|
|
var maxWidth = parseInt(tinyMCE.activeEditor.getParam('umbraco_maximumDefaultImageWidth'));
|
|
|
|
if (imageWidth != '' && imageWidth > maxWidth) {
|
|
if (imageWidth > imageHeight)
|
|
orgRatio = parseFloat(imageHeight / imageWidth).toFixed(2)
|
|
else
|
|
orgRatio = parseFloat(imageWidth / imageHeight).toFixed(2)
|
|
imageHeight = Math.round(maxWidth * parseFloat(imageHeight / imageWidth).toFixed(2));
|
|
imageWidth = maxWidth;
|
|
}
|
|
|
|
if (imageWidth > 0)
|
|
formObj.width.value = imageWidth;
|
|
|
|
if (orgWidth > 0)
|
|
formObj.orgWidth.value = orgWidth;
|
|
|
|
if (imageHeight > 0)
|
|
formObj.height.value = imageHeight;
|
|
|
|
if (orgHeight > 0)
|
|
formObj.orgHeight.value = orgHeight;
|
|
}
|
|
|
|
|
|
function changeDimensions(mode) {
|
|
var f = document.forms[0], tp, t = this;
|
|
|
|
var bTop = f.orgHeight;
|
|
var bBot = f.orgWidth;
|
|
var rTop = f.height;
|
|
var rBot = f.width;
|
|
|
|
if (mode == "width") {
|
|
rTop.value = ((bTop.value * rBot.value) / bBot.value).toFixed(0);
|
|
rBot.value = Number(rBot.value).toFixed(0);
|
|
} else if (mode == "height") {
|
|
rBot.value = ((bBot.value * rTop.value) / bTop.value).toFixed(0);
|
|
rTop.value = Number(rTop.value).toFixed(0);
|
|
}
|
|
}
|
|
|
|
var functionsFrame = this;
|
|
var tabFrame = this;
|
|
var isDialog = true;
|
|
var submitOnEnter = true;
|
|
var preloadImg = true;
|
|
|
|
jQuery(document).ready(function() {
|
|
//show the image if one is selected
|
|
setTimeout(function() {
|
|
if (document.forms[0].src.value != "") {
|
|
//get the thumb of the image
|
|
var src = document.forms[0].src.value;
|
|
var ext = src.split('.').pop();
|
|
var thumb = src.replace("." + ext, "_thumb.jpg");
|
|
if (src != "") jQuery("#<%=ImageViewer.ClientID%>").UmbracoImageViewerAPI().showImage(thumb);
|
|
}
|
|
}, 500);
|
|
});
|
|
|
|
jQuery(window).load(function() {
|
|
//for some very silly reason, we need to manually initialize the tree on window load as firefox and chrome won't load
|
|
//the tree properly when in the TinyMCE window. This is why we need to specify ManualInitialization="true" on the tree
|
|
//control.
|
|
var tree = jQuery("#<%=DialogTree.ClientID%>").UmbracoTreeAPI();
|
|
tree.rebuildTree("media");
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<form id="Form1" runat="server">
|
|
|
|
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
|
|
|
|
<input type="hidden" name="orgWidth" id="orgWidth" /><input type="hidden" name="orgHeight" id="orgHeight" />
|
|
|
|
<ui:Pane ID="pane_src" runat="server">
|
|
<umb3:Image runat="server" ID="ImageViewer" ViewerStyle="ThumbnailPreview" />
|
|
<ui:PropertyPanel id="pp_src" runat="server" Text="Url">
|
|
<input type="text" id="src" style="width: 300px"/>
|
|
</ui:PropertyPanel>
|
|
<ui:PropertyPanel id="pp_title" runat="server" Text="Title">
|
|
<input type="text" id="alt" style="width: 300px"/>
|
|
</ui:PropertyPanel>
|
|
<ui:PropertyPanel id="pp_dimensions" runat="server" Text="Dimensions">
|
|
<asp:Literal ID="lt_widthLabel" runat="server" />: <input name="width" type="text" id="width" value="" size="5" maxlength="5" class="size" onchange="changeDimensions('width');" />
|
|
<asp:Literal ID="lt_heightLabel" runat="server" />: <input name="height" type="text" id="height" value="" size="5" maxlength="5" class="size" onchange="changeDimensions('height');" />
|
|
|
|
</ui:PropertyPanel>
|
|
</ui:Pane>
|
|
|
|
<br />
|
|
|
|
<ui:TabView AutoResize="false" Width="555px" Height="305px" runat="server" ID="tv_options" />
|
|
<ui:Pane ID="pane_select" runat="server">
|
|
|
|
<div style="padding: 5px; background: #fff; height: 250px;">
|
|
|
|
<%--Manual initialization is set to true because the tree doesn't load properly in some browsers in this TinyMCE window--%>
|
|
<umb2:Tree runat="server" ID="DialogTree" ManualInitialization="true"
|
|
App="media" TreeType="media" IsDialog="true"
|
|
ShowContextMenu="false"
|
|
DialogMode="id" FunctionToCall="dialogHandler" />
|
|
|
|
</div>
|
|
</ui:Pane>
|
|
<asp:Panel ID="pane_upload" runat="server">
|
|
<umb4:MediaUpload runat="server" ID="MediaUploader" OnClientUpload="uploadHandler" />
|
|
</asp:Panel>
|
|
<br />
|
|
|
|
<p>
|
|
<input id="SubmitInsertImage" type="submit" value="{#insert}" style="width: 60px;" onclick="ImageDialog.insert();return false;" /> <em>or</em> <a href="#" onclick="tinyMCEPopup.close();">{#cancel}</a>
|
|
</p>
|
|
|
|
</form>
|
|
|
|
</body>
|
|
</html>
|