mirror of
https://github.com/OrchardCMS/Orchard.git
synced 2025-10-15 19:54:57 +08:00
259 lines
9.1 KiB
JavaScript
259 lines
9.1 KiB
JavaScript
(function ($) {
|
|
var currentAspect = {},
|
|
selectedItem,
|
|
suppressResize;
|
|
|
|
$.extend({
|
|
mediaPicker: {
|
|
init: function (data) {
|
|
// called by the opener to initiate dialog with existing image data.
|
|
// todo: data.img may contain existing image data, populate the fields
|
|
var img = data.img;
|
|
if (img) {
|
|
for (var name in img) {
|
|
$("#img-" + name).val(img[name]);
|
|
}
|
|
suppressResize = true;
|
|
$("#img-src").trigger("change");
|
|
}
|
|
},
|
|
uploadMedia: uploadMedia,
|
|
scalePreview: scalePreview
|
|
}
|
|
});
|
|
|
|
$("#img-cancel, #lib-cancel").live("click", function () { window.close(); });
|
|
// when url changes, set the preview and loader src
|
|
$("#img-src").live("change", function () {
|
|
selectImage(getIdPrefix(this), this.value);
|
|
});
|
|
$(".media-item").live("click", function () {
|
|
if (selectedItem) {
|
|
selectedItem.removeClass("selected");
|
|
}
|
|
selectedItem = $(this);
|
|
selectedItem.addClass("selected");
|
|
selectImage("#lib-", selectedItem.attr("data-imgsrc"));
|
|
});
|
|
// maintain aspect ratio when width or height is changed
|
|
$("#img-width, #lib-width").live("change", fixAspectHeight);
|
|
$("#img-height, #lib-height").live("change", fixAspectWidth);
|
|
|
|
$("#img-insert, #lib-insert").live("click", function () {
|
|
if ($(this).hasClass("disabled")) return;
|
|
publishInsertEvent(this);
|
|
});
|
|
|
|
$(function () {
|
|
$("#tabs").tabs({ selected: parseInt(location.hash.replace("#", "")) || 0 });
|
|
|
|
// populate width and height when image loads
|
|
// note: load event does not bubble so cannot be used with .live
|
|
$("#img-loader, #lib-loader").bind("load", syncImage);
|
|
|
|
// edit mode has slightly different wording
|
|
// elements advertise this with data-edittext attributes,
|
|
// the edit text is the element's new val() unless -content is specified.
|
|
if (query("editmode") === "true") {
|
|
$("[data-edittext]").each(function () {
|
|
var self = $(this),
|
|
isContent = self.attr("data-edittext-content") === "true",
|
|
editText = self.attr("data-edittext");
|
|
if (isContent) {
|
|
self.text(editText);
|
|
}
|
|
else {
|
|
self.attr("value", editText);
|
|
}
|
|
});
|
|
}
|
|
|
|
var data = window.mediaPickerData;
|
|
if (data) {
|
|
window.mediaPickerData = null;
|
|
$.mediaPicker.init(data);
|
|
}
|
|
});
|
|
|
|
function selectImage(prefix, src) {
|
|
$(prefix + "preview").width("").height("").attr("src", src);
|
|
$(prefix + "loader").attr("src", src);
|
|
$(prefix + "src").val(src);
|
|
|
|
var disabled = src ? "" : "disabled";
|
|
$(prefix + "insert").attr("disabled", disabled).toggleClass("disabled", !!disabled);
|
|
}
|
|
|
|
function getIdPrefix(e) {
|
|
return "#" + e.id.substr(0, 4);
|
|
}
|
|
function publishInsertEvent(button) {
|
|
var prefix = getIdPrefix(button),
|
|
editorId = query("editorId"),
|
|
source = query("source"),
|
|
img = {
|
|
src: $(prefix + "src").val(),
|
|
alt: $(prefix + "alt").val(),
|
|
"class": $(prefix + "class").val(),
|
|
style: $(prefix + "style").val(),
|
|
align: $(prefix + "align").val(),
|
|
width: $(prefix + "width").val(),
|
|
height: $(prefix + "height").val()
|
|
};
|
|
img.html = getImageHtml(img);
|
|
window.opener.OpenAjax.hub.publish("orchard.admin.pickimage-picked." + source, {
|
|
editorId: editorId,
|
|
img: img
|
|
});
|
|
window.close();
|
|
}
|
|
|
|
function parseUnits(value) {
|
|
if (/\s*[0-9]+\s*(px)?\s*/i.test(value)) {
|
|
return parseInt(value);
|
|
}
|
|
return NaN;
|
|
}
|
|
|
|
function fixAspectWidth() {
|
|
var prefix = getIdPrefix(this);
|
|
if (!$(prefix + "lock:checked").val()) return;
|
|
var height = parseUnits(this.value);
|
|
if (!isNaN(height)) {
|
|
$(prefix + "width").val(Math.round(height * currentAspect[prefix]));
|
|
}
|
|
}
|
|
|
|
function fixAspectHeight() {
|
|
var prefix = getIdPrefix(this);
|
|
if (!$(prefix + "lock:checked").val()) return;
|
|
var width = parseUnits(this.value);
|
|
if (!isNaN(width)) {
|
|
$(prefix + "height").val(Math.round(width / currentAspect[prefix]));
|
|
}
|
|
}
|
|
|
|
function scalePreview(img) {
|
|
// ensures the loaded image preview fits within the preview area
|
|
// by scaling it down if not.
|
|
var self = $(img),
|
|
width = self.width(),
|
|
height = self.height(),
|
|
aspect = width / height,
|
|
maxWidth = self.parent().width(),
|
|
maxHeight = self.parent().height();
|
|
if (width > maxWidth) {
|
|
width = maxWidth;
|
|
height = Math.round(width / aspect);
|
|
}
|
|
if (height > maxHeight) {
|
|
height = maxHeight;
|
|
width = Math.round(width * aspect);
|
|
}
|
|
self.width(width).height(height);
|
|
}
|
|
|
|
function syncImage() {
|
|
// when the image loader loads, we use it to calculate the current image
|
|
// aspect ratio, and update the width and height fields.
|
|
var prefix = getIdPrefix(this),
|
|
self = $(this),
|
|
width = self.width(),
|
|
height = self.height();
|
|
currentAspect[prefix] = width / height;
|
|
// because we just loaded an edited image, leave the width/height
|
|
// at their configured values, not the natural size.
|
|
if (!suppressResize) {
|
|
$(prefix + "width").val(width);
|
|
$(prefix + "height").val(height);
|
|
}
|
|
suppressResize = false;
|
|
}
|
|
|
|
function getAttr(name, value) {
|
|
// get an attribute value, escaping any necessary characters to html entities.
|
|
// not an exhastive list, but should cover all the necessary characters for this UI (e.g. you can't really put in newlines).
|
|
if (!value && name !== "alt") return "";
|
|
return ' ' + name + '="' + value.replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">") + '"';
|
|
}
|
|
|
|
function getImageHtml(data) {
|
|
return html = '<img src="' + encodeURI(data.src) + '"' + getAttr("alt", data.alt || "")
|
|
+ getAttr("class", data["class"])
|
|
+ getAttr("style", data.style)
|
|
+ getAttr("align", data.align)
|
|
+ getAttr("width", data.width)
|
|
+ getAttr("height", data.height)
|
|
+ "/>";
|
|
}
|
|
|
|
function uploadMedia(form) {
|
|
var name = "addmedia__" + (new Date()).getTime();
|
|
$("<iframe/>", {
|
|
name: name,
|
|
src: "about:blank",
|
|
css: { display: "none" },
|
|
load: iframeLoadHandler
|
|
}).appendTo(document.body);
|
|
form.target = name;
|
|
}
|
|
|
|
// get a querystring value
|
|
function query(name) {
|
|
name = name.toLowerCase();
|
|
var search = location.search;
|
|
var parts = search.replace("?", "").split("&");
|
|
for (var i = 0, l = parts.length; i < l; i++) {
|
|
var part = parts[i];
|
|
var eqIndex = part.indexOf("=");
|
|
if (eqIndex !== -1 && part.substr(0, eqIndex).toLowerCase() === name) {
|
|
return part.substr(eqIndex + 1);
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function iframeLoadHandler() {
|
|
try {
|
|
var self = $(this),
|
|
frame = window.frames[this.name];
|
|
if (!frame.document || frame.document.URL == "about:blank") {
|
|
return true;
|
|
}
|
|
var result = frame.result;
|
|
if (result && result.url) {
|
|
// successfully uploaded image, response by setting the url
|
|
// to the new image. The change event will respond just as if
|
|
// the user typed the url.
|
|
$("#img-src").val(result.url).trigger("change");
|
|
}
|
|
else if (result && result.error) {
|
|
alert(result.error);
|
|
}
|
|
else {
|
|
var somethingPotentiallyHorrible = "";
|
|
try {
|
|
somethingPotentiallyHorrible = $("body", frame.document).html();
|
|
}
|
|
catch (ex) { // some browsers flip out trying to access anything in the iframe when there's an error.
|
|
}
|
|
if (somethingPotentiallyHorrible) {
|
|
alert(somethingPotentiallyHorrible);
|
|
}
|
|
}
|
|
|
|
//cleanup
|
|
window.setTimeout(function () {
|
|
self.remove();
|
|
}, 123);
|
|
|
|
}
|
|
catch (ex) {
|
|
alert(ex.message);
|
|
}
|
|
}
|
|
|
|
})(jQuery);
|
|
|
|
|