327 lines
9.6 KiB
JavaScript
327 lines
9.6 KiB
JavaScript
|
(function($,Site) {
|
||
|
|
|
||
|
|
var isExpandingAll = 0;
|
||
|
|
|
||
|
|
var loadPending = 0;
|
||
|
|
|
||
|
|
// Test for SVG support from
|
||
|
|
// http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
|
||
|
|
// If we expand SVG usage on the site this function should get
|
||
|
|
// pulled out of this file.
|
||
|
|
function supportsSVG() {
|
||
|
|
return !!document.createElementNS
|
||
|
|
&& !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect
|
||
|
|
// FF 3.6.8 supports SVG but not inline
|
||
|
|
&& !isOldFirefox();
|
||
|
|
}
|
||
|
|
|
||
|
|
function isOldFirefox () {
|
||
|
|
// check for 3.6.8 or older (hardware limitations cap some users here)
|
||
|
|
return !!(jQuery.browser.mozilla && jQuery.browser.version < '1.9.3')
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( supportsSVG() ) {
|
||
|
|
var collapse_img = "/collapse.svg";
|
||
|
|
var expand_img = "/expand.svg";
|
||
|
|
var collapseall_img = "/collapseAll.svg";
|
||
|
|
var expandall_img = "/expandAll.svg";
|
||
|
|
var ajaxloader_img = "/ajax-loader.gif";
|
||
|
|
var collapseend_img = "/collapse-end.svg";
|
||
|
|
} else {
|
||
|
|
var collapse_img = "/collapse.gif";
|
||
|
|
var expand_img = "/expand.gif";
|
||
|
|
var collapseall_img = "/collapseAll.gif";
|
||
|
|
var expandall_img = "/expandAll.gif";
|
||
|
|
var ajaxloader_img = "/ajax-loader.gif";
|
||
|
|
var collapseend_img = "/collapse-end.gif";
|
||
|
|
}
|
||
|
|
|
||
|
|
var img_inline_style = "border: 0; max-width: 100%; width: 1.0em; padding: 0.2em; box-sizing: content-box; vertical-align: text-bottom;";
|
||
|
|
|
||
|
|
$.widget("dw.cuttag", {
|
||
|
|
options: {
|
||
|
|
journal: undefined,
|
||
|
|
ditemid: undefined,
|
||
|
|
cutid: undefined
|
||
|
|
},
|
||
|
|
config: {
|
||
|
|
text: {
|
||
|
|
collapse: 'Collapse',
|
||
|
|
expand: 'Expand',
|
||
|
|
loading: 'Expanding'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_create: function() {
|
||
|
|
var self = this;
|
||
|
|
var spanid = self.element.attr("id");
|
||
|
|
|
||
|
|
self.options.journal = spanid.replace( /^span-cuttag_(.*)_[0-9]+_[0-9]+/, "$1");
|
||
|
|
self.options.ditemid = spanid.replace( /^.*_([0-9]+)_[0-9]+/, "$1");
|
||
|
|
self.options.cutid = spanid.replace( /^.*_([0-9]+)/, "$1");
|
||
|
|
|
||
|
|
var identifier = self.options.journal + '_' + self.options.ditemid + '_' + self.options.cutid;
|
||
|
|
|
||
|
|
self.identifier = identifier;
|
||
|
|
self.ajaxUrl = "/__rpc_cuttag?journal=" + self.options.journal + "&ditemid=" + self.options.ditemid + "&cutid=" + self.options.cutid;
|
||
|
|
|
||
|
|
var a = $("<a>",{
|
||
|
|
href: "#",
|
||
|
|
id: "cuttag_" + identifier,
|
||
|
|
"class": "cuttag-action cuttag-action-before"
|
||
|
|
});
|
||
|
|
var img = $("<img>",{
|
||
|
|
style: img_inline_style,
|
||
|
|
"aria-controls": 'div-cuttag_' + identifier
|
||
|
|
});
|
||
|
|
a.append(img);
|
||
|
|
|
||
|
|
var theDiv = $("#div-cuttag_" + identifier);
|
||
|
|
|
||
|
|
self.tag = {
|
||
|
|
"a": a,
|
||
|
|
"img": img,
|
||
|
|
"div": theDiv
|
||
|
|
};
|
||
|
|
|
||
|
|
self._setArrow(collapse_img, self.config.text.expand);
|
||
|
|
|
||
|
|
self.element.append(a);
|
||
|
|
|
||
|
|
a.click(function(e) {
|
||
|
|
isExpandingAll = 0;
|
||
|
|
e.stopPropagation();
|
||
|
|
e.preventDefault();
|
||
|
|
self.toggle();
|
||
|
|
});
|
||
|
|
|
||
|
|
self.element.css("display","inline");
|
||
|
|
|
||
|
|
if ( isExpandingAll )
|
||
|
|
this.open();
|
||
|
|
},
|
||
|
|
isOpen: function() {
|
||
|
|
return this.tag.div.hasClass("cuttag-open") ? 1 : 0;
|
||
|
|
},
|
||
|
|
toggle: function() {
|
||
|
|
if ( this.isOpen() )
|
||
|
|
this.close();
|
||
|
|
else
|
||
|
|
this.open();
|
||
|
|
},
|
||
|
|
open: function() {
|
||
|
|
var self = this;
|
||
|
|
if ( self.isOpen() )
|
||
|
|
return;
|
||
|
|
|
||
|
|
loadPending++;
|
||
|
|
self._setArrow(ajaxloader_img, self.config.text.loading);
|
||
|
|
$.ajax({
|
||
|
|
"method": "GET",
|
||
|
|
"url": self.ajaxUrl,
|
||
|
|
success: function(data) {
|
||
|
|
self.replaceCutTag(data);
|
||
|
|
},
|
||
|
|
error: function(jqXHR, error) {
|
||
|
|
self.handleError(error);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
close: function() {
|
||
|
|
if ( ! this.isOpen() )
|
||
|
|
return;
|
||
|
|
this.tag.div.removeClass("cuttag-open");
|
||
|
|
this._setArrow(collapse_img, this.config.text.expand);
|
||
|
|
|
||
|
|
this.tag.div.empty();
|
||
|
|
this.tag.div.css("display","none");
|
||
|
|
|
||
|
|
$.dw.cuttag_controls.updateAll();
|
||
|
|
},
|
||
|
|
_setArrow: function(path,str) {
|
||
|
|
var i = this.tag.img;
|
||
|
|
i.attr("src",Site.imgprefix + path);
|
||
|
|
i.attr("alt",str);
|
||
|
|
i.attr("title",str);
|
||
|
|
i.attr("style",img_inline_style);
|
||
|
|
},
|
||
|
|
handleError: function(error) {
|
||
|
|
this._setArrow(collapse_img, this.config.text.expand);
|
||
|
|
alert(error);
|
||
|
|
},
|
||
|
|
replaceCutTag: function(resObj) {
|
||
|
|
var self = this;
|
||
|
|
if ( resObj.error ) {
|
||
|
|
self._setArrow(collapse_img, self.config.text.expand);
|
||
|
|
} else {
|
||
|
|
var replaceDiv = self.tag.div;
|
||
|
|
replaceDiv.html(resObj.text)
|
||
|
|
.css("display","block").addClass("cuttag-open");
|
||
|
|
|
||
|
|
var closeEnd = $("<span>");
|
||
|
|
var a = $("<a>",{
|
||
|
|
href: "#cuttag_" + self.identifier,
|
||
|
|
"class": "cuttag-action cuttag-action-after"
|
||
|
|
});
|
||
|
|
var img = $("<img>",{
|
||
|
|
style: img_inline_style,
|
||
|
|
src: Site.imgprefix + collapseend_img,
|
||
|
|
"aria-controls": 'div-cuttag_' + self.identifier,
|
||
|
|
alt: self.config.text.collapse,
|
||
|
|
title: self.config.text.collapse
|
||
|
|
});
|
||
|
|
a.append(img);
|
||
|
|
closeEnd.append(a);
|
||
|
|
replaceDiv.append(closeEnd);
|
||
|
|
|
||
|
|
a.click(function(e) {
|
||
|
|
e.stopPropagation();
|
||
|
|
e.preventDefault();
|
||
|
|
$("html,body").animate({scrollTop: self.element.offset().top - 10});
|
||
|
|
self.toggle();
|
||
|
|
});
|
||
|
|
|
||
|
|
self._setArrow(expand_img, self.config.text.collapse);
|
||
|
|
|
||
|
|
replaceDiv.trigger( "updatedcontent.entry" );
|
||
|
|
$.dw.cuttag.initLinks(replaceDiv);
|
||
|
|
|
||
|
|
loadPending--;
|
||
|
|
|
||
|
|
if ( loadPending == 0 ) {
|
||
|
|
isExpandingAll = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
$.dw.cuttag_controls.updateAll();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$.widget("dw.cuttag_controls", {
|
||
|
|
config: {
|
||
|
|
text: {
|
||
|
|
collapse: 'Collapse All Cut Tags',
|
||
|
|
expand: 'Expand All Cut Tags',
|
||
|
|
expanding: 'Expanding All Cut Tags'
|
||
|
|
},
|
||
|
|
image_style: {
|
||
|
|
enabled: "border: 0;",
|
||
|
|
disabled: "border: 0; opacity: 0.4; filter: alpha(opacity=40); zoom: 1;"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_create: function() {
|
||
|
|
var self = this;
|
||
|
|
var cuttags = $("span.cuttag[id]");
|
||
|
|
|
||
|
|
if ( cuttags.size() == 0 ) return;
|
||
|
|
|
||
|
|
self.update();
|
||
|
|
},
|
||
|
|
update: function() {
|
||
|
|
var self = this;
|
||
|
|
self.element.empty();
|
||
|
|
|
||
|
|
var cuttags = $("span.cuttag[id]");
|
||
|
|
|
||
|
|
var aria_open = "";
|
||
|
|
var aria_closed = "";
|
||
|
|
|
||
|
|
cuttags.each(function (_,element) {
|
||
|
|
var el = $(element).data("dw-cuttag");
|
||
|
|
if ( el.isOpen() ) {
|
||
|
|
aria_open += " div-cuttag_" + el.identifier;
|
||
|
|
} else {
|
||
|
|
aria_closed += " div-cuttag_" + el.identifier;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var el_exp = $("<img>", {
|
||
|
|
alt: self.config.text.expand,
|
||
|
|
title: self.config.text.expand,
|
||
|
|
src: Site.imgprefix + collapseall_img,
|
||
|
|
style: aria_closed ? self.config.image_style.enabled : self.config.image_style.disabled
|
||
|
|
});
|
||
|
|
|
||
|
|
if ( isExpandingAll ) {
|
||
|
|
el_exp.attr("src",Site.imgprefix + ajaxloader_img);
|
||
|
|
el_exp.attr("style",self.config.image_style.enabled);
|
||
|
|
el_exp.attr("title",self.config.text.expanding);
|
||
|
|
el_exp.attr("alt",self.config.text.expanding);
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( aria_closed ) {
|
||
|
|
var a_exp = $("<a>",{
|
||
|
|
'aria-controls': aria_closed
|
||
|
|
});
|
||
|
|
a_exp.append(el_exp);
|
||
|
|
el_exp = a_exp;
|
||
|
|
|
||
|
|
a_exp.click(function() {
|
||
|
|
isExpandingAll = 1;
|
||
|
|
var cuttags = $("span.cuttag[id]");
|
||
|
|
cuttags.each(function (_,element) {
|
||
|
|
$(element).data("dw-cuttag").open();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
self.element.append(el_exp);
|
||
|
|
|
||
|
|
var el_col = $("<img>", {
|
||
|
|
alt: self.config.text.collapse,
|
||
|
|
title: self.config.text.collapse,
|
||
|
|
src: Site.imgprefix + expandall_img,
|
||
|
|
style: aria_open ? self.config.image_style.enabled : self.config.image_style.disabled
|
||
|
|
});
|
||
|
|
if ( aria_open ) {
|
||
|
|
var a_col = $("<a>",{
|
||
|
|
'aria-controls': aria_open
|
||
|
|
});
|
||
|
|
a_col.append(el_col);
|
||
|
|
el_col = a_col;
|
||
|
|
a_col.click(function() {
|
||
|
|
isExpandingAll = 0;
|
||
|
|
to_do = 1;
|
||
|
|
cuttags.each(function (_,element) {
|
||
|
|
var widget = $(element).data("dw-cuttag");
|
||
|
|
if ( widget )
|
||
|
|
widget.close();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
self.element.append(el_col);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$.extend( $.dw.cuttag_controls, {
|
||
|
|
initControls: function() {
|
||
|
|
var controls = $(".cutTagControls");
|
||
|
|
|
||
|
|
controls.each(function (_,element) {
|
||
|
|
$(element).cuttag_controls();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
updateAll: function() {
|
||
|
|
var controls = $(".cutTagControls");
|
||
|
|
|
||
|
|
controls.each(function (_,element) {
|
||
|
|
$(element).data("dw-cuttag_controls").update();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$.extend( $.dw.cuttag, {
|
||
|
|
initLinks: function(context) {
|
||
|
|
var cuttags = $("span.cuttag[id]",context);
|
||
|
|
|
||
|
|
cuttags.each(function (_,element) {
|
||
|
|
$(element).cuttag();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
})(jQuery,Site);
|
||
|
|
|
||
|
|
jQuery(document).ready(function($) {
|
||
|
|
$.dw.cuttag.initLinks(document);
|
||
|
|
$.dw.cuttag_controls.initControls();
|
||
|
|
});
|