133 lines
5.7 KiB
JavaScript
133 lines
5.7 KiB
JavaScript
/// <reference path="/umbraco_client/Application/NamespaceManager.js" />
|
|
/// <reference path="/umbraco_client/ui/jquery.js" />
|
|
|
|
Umbraco.Sys.registerNamespace("Umbraco.Controls");
|
|
|
|
(function($) {
|
|
//jQuery plugin for Umbraco image viewer control
|
|
$.fn.UmbracoImageViewer = function(opts) {
|
|
//all options must be specified
|
|
var conf = $.extend({
|
|
style: false,
|
|
linkTarget: "_blank",
|
|
umbPath: ""
|
|
}, opts);
|
|
return this.each(function() {
|
|
new Umbraco.Controls.ImageViewer().init($(this), conf);
|
|
});
|
|
}
|
|
$.fn.UmbracoImageViewerAPI = function() {
|
|
/// <summary>exposes the Umbraco Image Viewer api for the selected object</summary>
|
|
//if there's more than item in the selector, throw exception
|
|
if ($(this).length != 1) {
|
|
throw "UmbracoImageViewerAPI selector requires that there be exactly one control selected";
|
|
};
|
|
return Umbraco.Controls.ImageViewer.inst[$(this).attr("id")] || null;
|
|
};
|
|
Umbraco.Controls.ImageViewer = function() {
|
|
return {
|
|
_cntr: ++Umbraco.Controls.ImageViewer.cntr,
|
|
_containerId: null,
|
|
_context: null,
|
|
_serviceUrl: "",
|
|
_umbPath: "",
|
|
_style: false,
|
|
_linkTarget: "",
|
|
|
|
init: function(jItem, opts) {
|
|
//this is stored so that we search the current document/iframe for this object
|
|
//when calling _getContainer. Before this was not required but for some reason inside the
|
|
//TinyMCE popup, when doing an ajax call, the context is lost to the jquery item!
|
|
this._context = jItem.get(0).ownerDocument;
|
|
|
|
//store a reference to this api by the id and the counter
|
|
Umbraco.Controls.ImageViewer.inst[this._cntr] = this;
|
|
if (!jItem.attr("id")) jItem.attr("id", "UmbImageViewer_" + this._cntr);
|
|
Umbraco.Controls.ImageViewer.inst[jItem.attr("id")] = Umbraco.Controls.ImageViewer.inst[this._cntr];
|
|
|
|
this._containerId = jItem.attr("id");
|
|
|
|
this._umbPath = opts.umbPath;
|
|
this._serviceUrl = this._umbPath + "/controls/Images/ImageViewerUpdater.asmx";
|
|
this._style = opts.style;
|
|
this._linkTarget = opts.linkTarget;
|
|
|
|
},
|
|
|
|
updateImage: function(mediaId, callback) {
|
|
/// <summary>Updates the image to show the mediaId parameter using AJAX</summary>
|
|
|
|
this._showThrobber();
|
|
|
|
var _this = this;
|
|
$.ajax({
|
|
type: "POST",
|
|
url: _this._serviceUrl + "/UpdateImage",
|
|
data: '{ "mediaId": ' + parseInt(mediaId) + ', "style": "' + _this._style + '", "linkTarget": "' + _this._linkTarget + '"}',
|
|
contentType: "application/json; charset=utf-8",
|
|
dataType: "json",
|
|
success: function(msg) {
|
|
var rHtml = $("<div>").append(msg.d.html); //get the full html response wrapped in temp div
|
|
_this._updateImageFromAjax(rHtml);
|
|
if (typeof callback == "function") {
|
|
//build the parameters to pass back to the callback method
|
|
var params = {
|
|
hasImage: _this._getContainer().find("img.noimage").length == 0,
|
|
mediaId: msg.d.mediaId,
|
|
width: msg.d.width,
|
|
height: msg.d.height,
|
|
url: msg.d.url,
|
|
alt: msg.d.alt
|
|
};
|
|
//call the callback method
|
|
callback.call(_this, params);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
showImage: function(path) {
|
|
/// <summary>This will force the image to show the path passed in </summary>
|
|
if (this._style != "ThumbnailPreview") {
|
|
this._getContainer().find("img").attr("src", path);
|
|
}
|
|
else {
|
|
c = this._getContainer().find(".bgImage");
|
|
c.css("background-image", "url('" + path + "')");
|
|
}
|
|
},
|
|
|
|
_getContainer: function() {
|
|
return $("#" + this._containerId, this._context);
|
|
},
|
|
|
|
_updateImageFromAjax: function(rHtml) {
|
|
this._getContainer().html(rHtml.find(".imageViewer").html()); //replace the html with the inner html of the image viewer response
|
|
},
|
|
|
|
_showThrobber: function() {
|
|
var c = null;
|
|
if (this._style != "ThumbnailPreview") {
|
|
c = this._getContainer().find("img");
|
|
c.attr("src", this._umbPath + "/images/throbber.gif");
|
|
c.css("margin-top", ((c.height() - 15) / 2) + "px");
|
|
c.css("margin-left", ((c.width() - 15) / 2) + "px");
|
|
}
|
|
else {
|
|
c = this._getContainer().find(".bgImage");
|
|
c.css("background-image", "");
|
|
c.html("<img id='throbber'/>");
|
|
var img = c.find("img");
|
|
img.attr("src", this._umbPath + "/images/throbber.gif");
|
|
img.css("margin-top", "45px");
|
|
img.css("margin-left", "45px");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// instance manager
|
|
Umbraco.Controls.ImageViewer.cntr = 0;
|
|
Umbraco.Controls.ImageViewer.inst = {};
|
|
|
|
})(jQuery); |