☰

imgCheckbox2

jQuery Plugin For Checkable Images. https://www.jqueryscript.net/other/jQuery-Plugin-For-Checkable-Images-imgCheckbox.html

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/430180/956211/imgCheckbox2.js 

  1. /*
  2.  * imgCheckbox
  3.  * description: jQuery Plugin For Checkable Images. https://www.jqueryscript.net/other/jQuery-Plugin-For-Checkable-Images-imgCheckbox.html
  4.  * Version: 0.5.4
  5.  * License: GPLv2
  6.  * Author:  James Cuénod
  7.  *
  8.  */
  9. (function($) {
  10. 	var CHK_TOGGLE = 0;
  11. 	var CHK_SELECT = 1;
  12. 	var CHK_DESELECT = 2;
  13. 	var CHECKMARK_POSITION = {
  14. 		"top-left": {
  15. 			"top": "0.5%",
  16. 			"left": "0.5%",
  17. 		},
  18. 		"top": {
  19. 			"top": "0.5%",
  20. 			"left": 0,
  21. 			"right": 0,
  22. 			"margin": "auto",
  23. 		},
  24. 		"top-right": {
  25. 			"top": "0.5%",
  26. 			"right": "0.5%",
  27. 		},
  28. 		"left": {
  29. 			"left": "0.5%",
  30. 			"bottom": 0,
  31. 			"top": 0,
  32. 			"margin": "auto",
  33. 		},
  34. 		"right": {
  35. 			"right": "0.5%",
  36. 			"bottom": 0,
  37. 			"top": 0,
  38. 			"margin": "auto",
  39. 		},
  40. 		"bottom-left": {
  41. 			"bottom": "0.5%",
  42. 			"left": "0.5%",
  43. 		},
  44. 		"bottom": {
  45. 			"bottom": "0.5%",
  46. 			"left": 0,
  47. 			"right": 0,
  48. 			"margin": "auto",
  49. 		},
  50. 		"bottom-right": {
  51. 			"bottom": "0.5%",
  52. 			"right": "0.5%",
  53. 		},
  54. 		"center": {
  55. 			"top": "0.5%",
  56. 			"bottom": "0.5%",
  57. 			"left": "0.5%",
  58. 			"right": "0.5%",
  59. 			"margin": "auto",
  60. 		},
  61. 	};
  62.  
  63. 	var imgCheckboxClass = function(element, options, id) {
  64. 		var $wrapperElement, $finalStyles = {}, grayscaleStyles = {
  65. 			"span.imgCheckbox img": {
  66. 				"transform": "scale(1)",
  67. 				"filter": "none",
  68. 				"-webkit-filter": "grayscale(0)",
  69. 			},
  70. 			"span.imgCheckbox.imgChked img": {
  71. 				// "filter": "gray", //TODO - this line probably will not work but is necessary for IE
  72. 				"filter": "grayscale(1)",
  73. 				"-webkit-filter": "grayscale(1)",
  74. 			}
  75. 		}, scaleStyles = {
  76. 			"span.imgCheckbox img": {
  77. 				"transform": "scale(1)",
  78. 			},
  79. 			"span.imgCheckbox.imgChked img": {
  80. 				"transform": "scale(0.9)",
  81. 			}
  82. 		}, scaleCheckMarkStyles = {
  83. 			"span.imgCheckbox::before": {
  84. 				"transform": "scale(0)",
  85. 			},
  86. 			"span.imgCheckbox.imgChked::before": {
  87. 				"transform": "scale(1)",
  88. 			}
  89. 		}, fadeCheckMarkStyles = {
  90. 			"span.imgCheckbox::before": {
  91. 				"opacity": "0",
  92. 			},
  93. 			"span.imgCheckbox.imgChked::before": {
  94. 				"opacity": "1",
  95. 			}
  96. 		};
  97.  
  98. 		/* *** STYLESHEET STUFF *** */
  99. 		// shove in the custom check mark
  100. 		if (options.checkMarkImage !== false)
  101. 		$.extend(true, $finalStyles, { "span.imgCheckbox::before": { "background-image": "url('" + options.checkMarkImage + "')" }});
  102. 		// give the checkmark dimensions
  103. 		var chkDimensions = options.checkMarkSize.split(" ");
  104. 		$.extend(true, $finalStyles, { "span.imgCheckbox::before": {
  105. 			"width": chkDimensions[0],
  106. 			"height": chkDimensions[chkDimensions.length - 1]
  107. 		}});
  108. 		// give the checkmark a position
  109. 		$.extend(true, $finalStyles, { "span.imgCheckbox::before": CHECKMARK_POSITION [ options.checkMarkPosition ] });
  110. 		// fixed image sizes
  111. 		if (options.fixedImageSize)
  112. 		{
  113. 			var imgDimensions = options.fixedImageSize.split(" ");
  114. 			$.extend(true, $finalStyles,{ "span.imgCheckbox img": {
  115. 				"width": imgDimensions[0],
  116. 				"height": imgDimensions[imgDimensions.length - 1]
  117. 			}});
  118. 		}
  119.  
  120. 		var conditionalExtend = [
  121. 			{
  122. 				doExtension: options.graySelected,
  123. 				style: grayscaleStyles
  124. 			},
  125. 			{
  126. 				doExtension: options.scaleSelected,
  127. 				style: scaleStyles
  128. 			},
  129. 			{
  130. 				doExtension: options.scaleCheckMark,
  131. 				style: scaleCheckMarkStyles
  132. 			},
  133. 			{
  134. 				doExtension: options.fadeCheckMark,
  135. 				style: fadeCheckMarkStyles
  136. 			}
  137. 		];
  138. 		conditionalExtend.forEach(function(extension) {
  139. 			if (extension.doExtension)
  140. 				$.extend(true, $finalStyles, extension.style);
  141. 		});
  142.  
  143. 		$finalStyles = $.extend(true, {}, defaultStyles, $finalStyles, options.styles);
  144.  
  145. 		// Now that we've built up our styles, inject them
  146. 		injectStylesheet($finalStyles, id);
  147.  
  148.  
  149. 		/* *** DOM STUFF *** */
  150. 		element.wrap("<span class='imgCheckbox" + id + "'>");
  151. 		$wrapperElement = element.parent();
  152. 		// set up select/deselect functions
  153. 		$wrapperElement.each(function() {
  154. 			var $that = $(this);
  155. 			$(this).data("imgchk.deselect", function(){
  156. 				changeSelection($that, CHK_DESELECT, options.addToForm, options.radio, options.canDeselect, $wrapperElement);
  157. 			}).data("imgchk.select", function(){
  158. 				changeSelection($that, CHK_SELECT, options.addToForm, options.radio, options.canDeselect, $wrapperElement);
  159. 			});
  160. 			$(this).children().first().data("imgchk.deselect", function(){
  161. 				changeSelection($that, CHK_DESELECT, options.addToForm, options.radio, options.canDeselect, $wrapperElement);
  162. 			}).data("imgchk.select", function(){
  163. 				changeSelection($that, CHK_SELECT, options.addToForm, options.radio, options.canDeselect, $wrapperElement);
  164. 			});
  165. 		});
  166. 		// preselect elements
  167. 		if (options.preselect === true || options.preselect.length > 0)
  168. 		{
  169. 			$wrapperElement.each(function(index) {
  170. 				if (options.preselect === true || options.preselect.indexOf(index) >= 0)
  171. 				$(this).addClass("imgChked");
  172. 			});
  173. 		}
  174.  
  175. 		// set up click handler
  176. 		$wrapperElement.click(function() {
  177. 			var el = $(this); 
  178. 			changeSelection(el, CHK_TOGGLE, options.addToForm, options.radio, options.canDeselect, $wrapperElement);
  179. 			if (options.onclick)
  180. 				options.onclick(el);
  181. 		});
  182.  
  183. 		/* *** INJECT INTO FORM *** */
  184. 		if (options.addToForm instanceof jQuery || options.addToForm === true)
  185. 		{
  186. 			if (options.addToForm === true)
  187. 			{
  188. 				options.addToForm = $(element).closest("form");
  189. 			}
  190. 			if (options.addToForm.length === 0)
  191. 			{
  192. 				if (options.debugMessages)
  193. 				console.log("imgCheckbox: no form found (looks for form by default)");
  194. 				options.addToForm = false;
  195. 			}
  196. 		}
  197. 		if (options.addToForm !== false)
  198. 		{
  199. 			$(element).each(function(index) {
  200. 				var hiddenElementId = "hEI" + id + "-" + index;
  201. 				$(this).parent().data('hiddenElementId', hiddenElementId);
  202. 				var imgName = $(this).attr("name");
  203. 				imgName = (typeof imgName != "undefined") ? imgName : $(this).attr("src").match(/\/(.*)\.[\w]+$/)[1];
  204. 				$('<input />').attr('type', 'checkbox')
  205. 					.attr('name', imgName)
  206. 					.addClass(hiddenElementId)
  207. 					.css("display", "none")
  208. 					.prop("checked", $(this).parent().hasClass("imgChked"))
  209. 					.appendTo(options.addToForm);
  210. 			});
  211. 		}
  212.  
  213. 		return this;
  214. 	};
  215.  
  216. 	/* CSS Injection */
  217. 	function injectStylesheet(stylesObject, id)
  218. 	{
  219. 		// Create a blank style
  220. 		var style = document.createElement("style");
  221. 		// WebKit hack
  222. 		style.appendChild(document.createTextNode(""));
  223. 		// Add the <style> element to the page
  224. 		document.head.appendChild(style);
  225.  
  226. 		var stylesheet = document.styleSheets[document.styleSheets.length - 1];
  227.  
  228. 		for (var selector in stylesObject) {
  229. 			if (stylesObject.hasOwnProperty(selector)) {
  230. 				compatInsertRule(stylesheet, selector, buildRules(stylesObject[selector]), id);
  231. 			}
  232. 		}
  233. 	}
  234. 	function buildRules(ruleObject)
  235. 	{
  236. 		var ruleSet = "";
  237. 		for (var property in ruleObject) {
  238. 			if (ruleObject.hasOwnProperty(property)) {
  239. 				ruleSet += property + ":" + ruleObject[property] + ";";
  240. 			}
  241. 		}
  242. 		return ruleSet;
  243. 	}
  244. 	function compatInsertRule(stylesheet, selector, cssText, id)
  245. 	{
  246. 		var modifiedSelector = selector.replace(".imgCheckbox", ".imgCheckbox" + id);
  247. 		// IE8 uses "addRule", everyone else uses "insertRule"
  248. 		if (stylesheet.insertRule) {
  249. 			stylesheet.insertRule(modifiedSelector + '{' + cssText + '}', 0);
  250. 		} else {
  251. 			stylesheet.addRule(modifiedSelector, cssText, 0);
  252. 		}
  253. 	}
  254.  
  255. 	function changeSelection($chosenElement, howToModify, addToForm, radio, canDeselect, $wrapperElement)
  256. 	{
  257. 		if (radio && howToModify !== CHK_DESELECT)
  258. 		{
  259. 			$wrapperElement.not($chosenElement).removeClass("imgChked");
  260. 			if (canDeselect)
  261. 			{
  262. 				$chosenElement.toggleClass("imgChked");
  263. 			}
  264. 			else {
  265. 				$chosenElement.addClass("imgChked");
  266. 			}
  267. 		}
  268. 		else
  269. 		{
  270. 			switch (howToModify) {
  271. 				case CHK_DESELECT:
  272. 					$chosenElement.removeClass("imgChked");
  273. 					break;
  274. 				case CHK_TOGGLE:
  275. 					$chosenElement.toggleClass("imgChked");
  276. 					break;
  277. 				case CHK_SELECT:
  278. 					$chosenElement.addClass("imgChked");
  279. 					break;
  280. 			}
  281. 		}
  282. 		if (addToForm)
  283. 			updateFormValues(radio ? $wrapperElement : $chosenElement);
  284. 	}
  285. 	function updateFormValues($element)
  286. 	{
  287. 		$element.each(function() {
  288. 			$( "." + $(this).data("hiddenElementId") ).prop("checked", $(this).hasClass("imgChked"));
  289. 		});
  290. 	}
  291.  
  292.  
  293. 	/* Init */
  294. 	$.fn.imgCheckbox = function(options) {
  295. 		if ($(this).data("imgCheckboxId"))
  296. 			//already initialised: old instance = $.fn.imgCheckbox.instances[$(this).data("imgCheckboxId") - 1];
  297. 			return this;
  298. 		else
  299. 		{
  300. 			var optionsWithDefaults = $.extend(true, {}, $.fn.imgCheckbox.defaults, options);
  301. 			var $that = new imgCheckboxClass($(this), optionsWithDefaults, $.fn.imgCheckbox.instances.length);
  302. 			$(this).data("imgCheckboxId", $.fn.imgCheckbox.instances.push($that));
  303. 			if (optionsWithDefaults.onload)
  304. 				optionsWithDefaults.onload();
  305. 			return this;
  306. 		}
  307. 	};
  308. 	$.fn.deselect = function() {
  309. 		if (this.data("imgchk.deselect"))
  310. 		{
  311. 			this.data("imgchk.deselect")();
  312. 		}
  313. 		return this;
  314. 	};
  315. 	$.fn.select = function() {
  316. 		if (this.data("imgchk.select"))
  317. 		{
  318. 			this.data("imgchk.select")();
  319. 		}
  320. 		return this;
  321. 	};
  322. 	$.fn.imgCheckbox.instances = [];
  323. 	$.fn.imgCheckbox.defaults = {
  324. 		"checkMarkImage": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMzQ2LjM4NCkiPjxwYXRoIGZpbGw9IiMxZWM4MWUiIGZpbGwtb3BhY2l0eT0iLjgiIGQ9Ik0zMiAzNDYuNGEzMiAzMiAwIDAgMC0zMiAzMiAzMiAzMiAwIDAgMCAzMiAzMiAzMiAzMiAwIDAgMCAzMi0zMiAzMiAzMiAwIDAgMC0zMi0zMnptMjEuMyAxMC4zbC0yNC41IDQxTDkuNSAzNzVsMTcuNyA5LjYgMjYtMjh6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkuNSAzNzUuMmwxOS4zIDIyLjQgMjQuNS00MS0yNiAyOC4yeiIvPjwvZz48L3N2Zz4=",
  325. 		"graySelected": true,
  326. 		"scaleSelected": true,
  327. 		"fixedImageSize": false,
  328. 		"checkMarkSize": "30px",
  329. 		"checkMarkPosition": "top-left",
  330. 		"scaleCheckMark": true,
  331. 		"fadeCheckMark": false,
  332. 		"addToForm": true,
  333. 		"preselect": [],
  334. 		"radio": false,
  335. 		"canDeselect": false,
  336. 		"onload": false,
  337. 		"onclick": false,
  338. 		"debugMessages": false,
  339. 	};
  340. 	var defaultStyles = {
  341. 		"span.imgCheckbox img": {
  342. 			"display": "block",
  343. 			"margin": "0",
  344. 			"padding": "0",
  345. 			"transition-duration": "300ms",
  346. 		},
  347. 		"span.imgCheckbox.imgChked img": {
  348. 		},
  349. 		"span.imgCheckbox": {
  350. 			"user-select": "none",
  351. 			"-webkit-user-select": "none",  /* Chrome all / Safari all */
  352. 			"-moz-user-select": "none",	 /* Firefox all */
  353. 			"-ms-user-select": "none",	  /* IE 10+ */
  354. 			"position": "relative",
  355. 			"padding": "0",
  356. 			"margin": "5px",
  357. 			"display": "inline-block",
  358. 			"border": "1px solid transparent",
  359. 			"transition-duration": "300ms",
  360. 		},
  361. 		"span.imgCheckbox.imgChked": {
  362. 			"border-color": "#ccc",
  363. 		},
  364. 		"span.imgCheckbox::before": {
  365. 			"display": "block",
  366. 			"background-size": "100% 100%",
  367. 			"content": "''",
  368. 			"color": "white",
  369. 			"font-weight": "bold",
  370. 			"border-radius": "50%",
  371. 			"position": "absolute",
  372. 			"margin": "0.5%",
  373. 			"z-index": "1",
  374. 			"text-align": "center",
  375. 			"transition-duration": "300ms",
  376. 		},
  377. 		"span.imgCheckbox.imgChked::before": {
  378. 		}
  379. 	};
  380.  
  381. })( jQuery );