<commit_before><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>jQuery PickList Rich Content Example</title>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../jquery-picklist.js"></script>
	<script type="text/javascript">
		$(function()
		{
			// Example of adding rich content items during picklist creation.
			$("#rich").pickList(
			{
				richItems:
				[
					{
						value:    3,
						label:    "Basketball",
						selected: true,
						element:  $(".rich1")
					},

					{
						value:    4,
						label:    "Soccer",
						selected: true,
						element:  $("<img src='images/soccer.png'/>")
					}
				]
			});

			// Example of adding rich content items after picklist creation.
			$("#rich").pickList("insert",
			{
				value:    5,
				label:    "Football",
				selected: false,
				element:  $(".rich3")
			});
		});
	</script>

	<style type="text/css">
		.pickList_sourceListContainer, .pickList_controlsContainer, .pickList_targetListContainer { float: left; margin: 0.25em; }
		.pickList_controlsContainer { text-align: center; }
		.pickList_controlsContainer button { display: block; width: 100%; text-align: center; }
		.pickList_list { list-style-type: none; margin: 0; padding: 0; float: left; width: 150px; height: 75px; border: 1px inset; overflow-y: auto; cursor: default; }
		.pickList_selectedListItem { background-color: #A3C8F5; }
		.pickList_listLabel { font-size: 0.9em; font-weight: bold; text-align: center; }
		.pickList_clear { clear: both; }

		.pickList_listItem .image { float: left; }
		.pickList_listItem .label { float: left; padding-left: 0.25em; }
		.pickList_listItem .clear { clear: both; }
	</style>
</head>

<body>

	<div>
		<select id="rich" name="rich" multiple="multiple">
			<option value="1">Non-Rich Item 1</option>
			<option value="2">Non-Rich Item 2</option>
		</select>

		<div class="rich1">
			<div class="image"><img src="images/basketball.png" /></div>
			<div class="label">Basketball</div>
			<div class="clear"></div>
		</div>

		<div class="rich3">
			<img src="images/football.png" /> Football
		</div>
	</div>

</body></html><commit_msg>Added example of adding a regular item with the insert() function.<commit_after><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>jQuery PickList Rich Content Example</title>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../jquery-picklist.js"></script>
	<script type="text/javascript">
		$(function()
		{
			// Example of adding rich content items during picklist creation.
			$("#rich").pickList(
			{
				richItems:
				[
					{
						value:    3,
						label:    "Basketball",
						selected: true,
						element:  $(".rich1")
					},

					{
						value:    4,
						label:    "Soccer",
						selected: true,
						element:  $("<img src='images/soccer.png'/>")
					}
				]
			});

			// Example of adding rich content items after picklist creation.
			$("#rich").pickList("insert",
			{
				value:    5,
				label:    "Football",
				selected: false,
				element:  $(".rich3")
			});

			// Example of adding a regular item after picklist creation.
			// Note there is no "element" property as that's for rich content only.
			$("#rich").pickList("insert",
			{
				value: 6,
				label: "Added Afterwards",
				selected: false
			});
		});
	</script>

	<style type="text/css">
		.pickList_sourceListContainer, .pickList_controlsContainer, .pickList_targetListContainer { float: left; margin: 0.25em; }
		.pickList_controlsContainer { text-align: center; }
		.pickList_controlsContainer button { display: block; width: 100%; text-align: center; }
		.pickList_list { list-style-type: none; margin: 0; padding: 0; float: left; width: 150px; height: 75px; border: 1px inset; overflow-y: auto; cursor: default; }
		.pickList_selectedListItem { background-color: #A3C8F5; }
		.pickList_listLabel { font-size: 0.9em; font-weight: bold; text-align: center; }
		.pickList_clear { clear: both; }

		.pickList_listItem .image { float: left; }
		.pickList_listItem .label { float: left; padding-left: 0.25em; }
		.pickList_listItem .clear { clear: both; }
	</style>
</head>

<body>

	<div>
		<select id="rich" name="rich" multiple="multiple">
			<option value="1">Non-Rich Item 1</option>
			<option value="2">Non-Rich Item 2</option>
		</select>

		<div class="rich1">
			<div class="image"><img src="images/basketball.png" /></div>
			<div class="label">Basketball</div>
			<div class="clear"></div>
		</div>

		<div class="rich3">
			<img src="images/football.png" /> Football
		</div>
	</div>

</body></html>
{'fraction_non_alphanumeric': 0.17803817803817804, 'fraction_numerical': 0.018333018333018335, 'mean_word_length': 3.388059701492537, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 85, 'https://': 2, 'lorem ipsum': 0, 'www.': 4, 'xml': 4}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5066692', 'n_tokens_mistral': 2168, 'n_tokens_neox': 1797, 'n_words': 406}