/tags/3.6.5/wp-shopping-cart/js/thickbox.js

https://github.com/evadne/wp-e-commerce · JavaScript · 407 lines · 311 code · 49 blank · 47 comment · 88 complexity · 83cb16ea315e952c604c8115e51f9e9a MD5 · raw file

  1. /*
  2. * Thickbox 2.1 - jQuery plugin for displaying content in a box above the page
  3. *
  4. * Copyright (c) 2006, 2007 Cody Lindley (http://www.codylindley.com)
  5. *
  6. * Licensed under the MIT License:
  7. * http://www.opensource.org/licenses/mit-license.php
  8. */
  9. // on page load call TB_init
  10. jQuery(document).ready(TB_init);
  11. // add thickbox to href elements that have a class of .thickbox
  12. function TB_init(){
  13. jQuery("a.thickbox").click(function(event){
  14. // stop default behaviour
  15. event.preventDefault();
  16. // remove click border
  17. this.blur();
  18. // get caption: either title or name attribute
  19. var caption = this.title || this.name || "";
  20. // get rel attribute for image groups
  21. var group = this.rel || false;
  22. // display the box for the elements href
  23. TB_show(caption, this.href, group);
  24. });
  25. }
  26. // called when the user clicks on a thickbox link
  27. function TB_show(caption, url, rel) {
  28. // create iframe, overlay and box if non-existent
  29. if ( !jQuery("#TB_HideSelect").length ) {
  30. jQuery("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
  31. jQuery("#TB_overlay").click(TB_remove);
  32. }
  33. // TODO replace or check if event is already assigned
  34. jQuery(window).scroll(TB_position);
  35. // TODO replace
  36. TB_overlaySize();
  37. // TODO create loader only once, hide and show on demand
  38. jQuery("body").append("<div id='TB_load'><img src='"+fileThickboxLoadingImage+"' /></div>");
  39. TB_load_position();
  40. // check if a query string is involved
  41. var baseURL = url.match(/(.+)?/)[1] || url;
  42. // regex to check if a href refers to an image
  43. var imageURL = /\.(jpe?g|png|gif|bmp)/gi;
  44. // check for images
  45. if ( baseURL.match(imageURL) ) {
  46. var dummy = { caption: "", url: "", html: "" };
  47. var prev = dummy,
  48. next = dummy,
  49. imageCount = "";
  50. // if an image group is given
  51. if ( rel ) {
  52. function getInfo(image, id, label) {
  53. return {
  54. caption: image.title,
  55. url: image.href,
  56. html: "<span id='TB_" + id + "'>&nbsp;&nbsp;<a href='#'>" + label + "</a></span>"
  57. }
  58. }
  59. // find the anchors that point to the group
  60. var imageGroup = jQuery("a[@rel="+rel+"]").get();
  61. var foundSelf = false;
  62. var imageTitle = 'Gallery'; //default to something sane
  63. // loop through the anchors, looking for ourself, saving information about previous and next image
  64. for (var i = 0; i < imageGroup.length; i++) {
  65. var image = imageGroup[i];
  66. var urlTypeTemp = image.href.match(imageURL);
  67. // look for ourself
  68. if ( image.href == url ) {
  69. foundSelf = true;
  70. imageCount = "Image " + (i + 1) + " of "+ (imageGroup.length);
  71. if(image.rel != null)
  72. {
  73. imageTitle = image.rel.replace(/_/, " ");
  74. }
  75. } else {
  76. // when we found ourself, the current is the next image
  77. if ( foundSelf ) {
  78. next = getInfo(image, "next", "Next &gt;");
  79. // stop searching
  80. break;
  81. } else {
  82. // didn't find ourself yet, so this may be the one before ourself
  83. prev = getInfo(image, "prev", "&lt; Prev");
  84. }
  85. }
  86. }
  87. }
  88. imgPreloader = new Image();
  89. imgPreloader.onload = function() {
  90. imgPreloader.onload = null;
  91. // Resizing large images
  92. var pagesize = TB_getPageSize();
  93. var x = pagesize[0] - 150;
  94. var y = pagesize[1] - 150;
  95. var imageWidth = imgPreloader.width;
  96. var imageHeight = imgPreloader.height;
  97. if (imageWidth > x) {
  98. imageHeight = imageHeight * (x / imageWidth);
  99. imageWidth = x;
  100. if (imageHeight > y) {
  101. imageWidth = imageWidth * (y / imageHeight);
  102. imageHeight = y;
  103. }
  104. } else if (imageHeight > y) {
  105. imageWidth = imageWidth * (y / imageHeight);
  106. imageHeight = y;
  107. if (imageWidth > x) {
  108. imageHeight = imageHeight * (x / imageWidth);
  109. imageWidth = x;
  110. }
  111. }
  112. // End Resizing
  113. // TODO don't use globals
  114. if(imageGroup.length > 1)
  115. {
  116. TB_WIDTH = imageWidth + 30 + 76 + 18;
  117. TB_HEIGHT = imageHeight + 60;
  118. // Browser detection is bad and all, but hey, its better than things not working
  119. if(jQuery.browser.msie)
  120. {
  121. TB_HEIGHT += 30;
  122. if(navigator.appVersion.match(/MSIE\s6\.0/) == "MSIE 6.0")
  123. {
  124. TB_WIDTH += 20;
  125. }
  126. }
  127. // make additional image links and containing div
  128. thumbPreloader = Array();
  129. additional_links = "<div id='TB_additional_images'>";
  130. var thumb_x = 76;
  131. var thumb_y = imageHeight;
  132. for (var i = 0; i < imageGroup.length; i++) {
  133. var image = imageGroup[i];
  134. // look for ourself
  135. var image_selected = "";
  136. if ( image.href == url ) {
  137. image_selected = "class='TB_Selected'";
  138. }
  139. thumbPreloader[i] = new Image();
  140. thumbPreloader[i].onload = function() {
  141. //thumbPreloader[i].onload = null;
  142. }
  143. thumbPreloader[i].src = image.href;
  144. var thumbImgWidth = thumbPreloader[i].width;
  145. var thumbImgHeight = thumbPreloader[i].height;
  146. if (thumbImgWidth > thumb_x) {
  147. thumbImgHeight = thumbImgHeight * (thumb_x / thumbImgWidth);
  148. thumbImgWidth = thumb_x;
  149. if (thumbImgHeight > thumb_y) {
  150. thumbImgWidth = thumbImgWidth * (thumb_y / thumbImgHeight);
  151. thumbImgHeight = thumb_y;
  152. }
  153. }
  154. additional_links += "<a href='#' "+image_selected+" id='TB_ThumbnailLink_"+i+"' ><img class='TB_Thumbnail_Image' src='"+image.href+"' width='"+thumbImgWidth+"' height='"+thumbImgHeight+"' alt=''/></a>";
  155. }
  156. additional_links += "</div>";
  157. jQuery("#TB_window").append("<div id='TB_Header'><div id='TB_TopCloseAjaxWindow'><a href='#' id='TB_TopCloseWindowButton' title='Close'>close</a></div>"+imageTitle+"</div>");
  158. jQuery("#TB_window").append(additional_links);
  159. jQuery("#TB_TopCloseWindowButton").click(TB_remove);
  160. }
  161. else
  162. {
  163. TB_WIDTH = imageWidth + 30;
  164. TB_HEIGHT = imageHeight + 60;
  165. }
  166. // TODO empty window content instead
  167. jQuery("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + imageCount + prev.html + next.html + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div>");
  168. jQuery("#TB_closeWindowButton").click(TB_remove);
  169. function buildClickHandler(image) {
  170. return function() {
  171. jQuery("#TB_window").remove();
  172. jQuery("body").append("<div id='TB_window'></div>");
  173. TB_show(image.caption, image.url, rel);
  174. return false;
  175. };
  176. }
  177. if(imageGroup.length > 1)
  178. {
  179. goImage = Array();
  180. for (var i = 0; i < imageGroup.length; i++) {
  181. goImage[i] = buildClickHandler(getInfo(imageGroup[i], "image_"+i+"", ""));
  182. jQuery("#TB_ThumbnailLink_"+i+"").click(goImage[i]);
  183. }
  184. }
  185. var goPrev = buildClickHandler(prev);
  186. var goNext = buildClickHandler(next);
  187. if ( prev.html ) {
  188. jQuery("#TB_prev").click(goPrev);
  189. }
  190. if ( next.html ) {
  191. jQuery("#TB_next").click(goNext);
  192. }
  193. // TODO use jQuery, maybe with event fix plugin, or just get the necessary parts of it
  194. document.onkeydown = function(e) {
  195. if (e == null) { // ie
  196. keycode = event.keyCode;
  197. } else { // mozilla
  198. keycode = e.which;
  199. }
  200. switch(keycode) {
  201. case 27:
  202. TB_remove();
  203. break;
  204. case 190:
  205. if( next.html ) {
  206. document.onkeydown = null;
  207. goNext();
  208. }
  209. break;
  210. case 188:
  211. if( prev.html ) {
  212. document.onkeydown = null;
  213. goPrev();
  214. }
  215. break;
  216. }
  217. }
  218. // TODO don't remove loader etc., just hide and show later
  219. TB_position();
  220. jQuery("#TB_load").remove();
  221. jQuery("#TB_ImageOff").click(TB_remove);
  222. // for safari using css instead of show
  223. // TODO is that necessary? can't test safari
  224. jQuery("#TB_window").css({display:"block"});
  225. }
  226. imgPreloader.src = url;
  227. } else { //code to show html pages
  228. //alert(url);
  229. var queryString = url.match(/\?(.+)/)[1];
  230. var params = TB_parseQuery( queryString );
  231. TB_WIDTH = (params['width']*1) + 30;
  232. TB_HEIGHT = (params['height']*1) + 40;
  233. var ajaxContentW = TB_WIDTH - 30,
  234. ajaxContentH = TB_HEIGHT - 45;
  235. if(url.indexOf('TB_iframe') != -1){
  236. urlNoQuery = url.split('TB_');
  237. jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' onload='TB_showIframe()'> </iframe>");
  238. } else {
  239. jQuery("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a></div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");
  240. }
  241. jQuery("#TB_closeWindowButton").click(TB_remove);
  242. if(url.indexOf('TB_inline') != -1){
  243. jQuery("#TB_ajaxContent").html(jQuery('#' + params['inlineId']).html());
  244. TB_position();
  245. jQuery("#TB_load").remove();
  246. jQuery("#TB_window").css({display:"block"});
  247. }else if(url.indexOf('TB_iframe') != -1){
  248. TB_position();
  249. if(frames['TB_iframeContent'] == undefined){//be nice to safari
  250. jQuery("#TB_load").remove();
  251. jQuery("#TB_window").css({display:"block"});
  252. jQuery(document).keyup( function(e){ var key = e.keyCode; if(key == 27){TB_remove()} });
  253. }
  254. }else{
  255. jQuery("#TB_ajaxContent").load(url, function(){
  256. TB_position();
  257. jQuery("#TB_load").remove();
  258. jQuery("#TB_window").css({display:"block"});
  259. });
  260. }
  261. }
  262. jQuery(window).resize(TB_position);
  263. document.onkeyup = function(e){
  264. if (e == null) { // ie
  265. keycode = event.keyCode;
  266. } else { // mozilla
  267. keycode = e.which;
  268. }
  269. if(keycode == 27){ // close
  270. TB_remove();
  271. }
  272. }
  273. }
  274. //helper functions below
  275. function TB_showIframe(){
  276. jQuery("#TB_load").remove();
  277. jQuery("#TB_window").css({display:"block"});
  278. }
  279. function TB_remove() {
  280. jQuery("#TB_imageOff").unbind("click");
  281. jQuery("#TB_overlay").unbind("click");
  282. jQuery("#TB_closeWindowButton").unbind("click");
  283. jQuery("#TB_TopCloseWindowButton").unbind("click");
  284. jQuery("#TB_window").fadeOut("fast",function(){jQuery('#TB_window,#TB_overlay,#TB_HideSelect').remove();});
  285. jQuery("#TB_load").remove();
  286. return false;
  287. }
  288. function TB_position() {
  289. var pagesize = TB_getPageSize();
  290. var arrayPageScroll = TB_getPageScrollTop();
  291. var style = {width: TB_WIDTH, left: (arrayPageScroll[0] + (pagesize[0] - TB_WIDTH)/2), top: (arrayPageScroll[1] + (pagesize[1]-TB_HEIGHT)/2)};
  292. jQuery("#TB_window").css(style);
  293. }
  294. function TB_overlaySize(){
  295. if (window.innerHeight && window.scrollMaxY || window.innerWidth && window.scrollMaxX) {
  296. yScroll = window.innerHeight + window.scrollMaxY;
  297. xScroll = window.innerWidth + window.scrollMaxX;
  298. var deff = document.documentElement;
  299. var wff = (deff&&deff.clientWidth) || document.body.clientWidth || window.innerWidth || self.innerWidth;
  300. var hff = (deff&&deff.clientHeight) || document.body.clientHeight || window.innerHeight || self.innerHeight;
  301. xScroll -= (window.innerWidth - wff);
  302. yScroll -= (window.innerHeight - hff);
  303. } else if (document.body.scrollHeight > document.body.offsetHeight || document.body.scrollWidth > document.body.offsetWidth){ // all but Explorer Mac
  304. yScroll = document.body.scrollHeight;
  305. xScroll = document.body.scrollWidth;
  306. } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
  307. yScroll = document.body.offsetHeight;
  308. xScroll = document.body.offsetWidth;
  309. }
  310. jQuery("#TB_overlay").css({"height": yScroll, "width": xScroll});
  311. jQuery("#TB_HideSelect").css({"height": yScroll,"width": xScroll});
  312. }
  313. function TB_load_position() {
  314. var pagesize = TB_getPageSize();
  315. var arrayPageScroll = TB_getPageScrollTop();
  316. jQuery("#TB_load")
  317. .css({left: (arrayPageScroll[0] + (pagesize[0] - 100)/2), top: (arrayPageScroll[1] + ((pagesize[1]-100)/2)) })
  318. .css({display:"block"});
  319. }
  320. function TB_parseQuery ( query ) {
  321. // return empty object
  322. if( !query )
  323. return {};
  324. var params = {};
  325. // parse query
  326. var pairs = query.split(/[;&]/);
  327. for ( var i = 0; i < pairs.length; i++ ) {
  328. var pair = pairs[i].split('=');
  329. if ( !pair || pair.length != 2 )
  330. continue;
  331. // unescape both key and value, replace "+" with spaces in value
  332. params[unescape(pair[0])] = unescape(pair[1]).replace(/\+/g, ' ');
  333. }
  334. return params;
  335. }
  336. function TB_getPageScrollTop(){
  337. var yScrolltop;
  338. var xScrollleft;
  339. if (self.pageYOffset || self.pageXOffset) {
  340. yScrolltop = self.pageYOffset;
  341. xScrollleft = self.pageXOffset;
  342. } else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){ // Explorer 6 Strict
  343. yScrolltop = document.documentElement.scrollTop;
  344. xScrollleft = document.documentElement.scrollLeft;
  345. } else if (document.body) {// all other Explorers
  346. yScrolltop = document.body.scrollTop;
  347. xScrollleft = document.body.scrollLeft;
  348. }
  349. arrayPageScroll = new Array(xScrollleft,yScrolltop)
  350. return arrayPageScroll;
  351. }
  352. function TB_getPageSize(){
  353. var de = document.documentElement;
  354. var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
  355. var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight
  356. arrayPageSize = new Array(w,h)
  357. return arrayPageSize;
  358. }