<commit_before><h3 id="DataAttributes">Data Attributes</h3>
<p>At its heart this library is a fancy way of labeling elements on a html page with some attributes that make extracting them later, with some special properties, easier. You can define the following types of attributes on your elements.</p>
<ul>
	<li><strong>Controller </strong>- <code><samp><font face="Courier New">data-hr-controller=&quot;<em>controllerName</em>&quot;</font></samp></code> - This defines the primary interface between your javascript and the markup and act as more or less of an entry point for everything else. The <em>controllerName </em>value defines the name of the controller.</li>
	<li><strong>Event<strong> </strong></strong>-<strong> </strong><code><font face="Courier New">data-hr-on-<em>eventName</em>=&quot;<em>functionName</em>&quot;</font></code><em> - </em>Bind the html&nbsp;event <em>eventName </em>to the function in your controller named <em>functionName</em>. This supports all events that the browser can register with addEventListener.</li>
	<li><strong>Config</strong> - <code><font face="Courier New">data-hr-config-<em>name</em>=&quot;<em>value</em>&quot;</font></code> - Create a configuration for the controller named <em>name </em>with the value <em>value</em>. All the config values for a controller are extracted into a single object so the -name part should be unique.</li>
	<li><strong>Toggle</strong> - <code><font face="Courier New">data-hr-toggle=&quot;<em>name</em>&quot;</font></code> - Create a toggle named name. Toggles abstract the dom from your javascript for things like styles and classes. Toggles can be set to on and off in your javascript code. You can use the following attributes to in addition to a data-hr-toggle on an element to control what it looks like when the toggle is on and off.
	<ul>
		<li><strong>On Styles</strong> -<strong> </strong><code><font face="Courier New">data-hr-style-on=&quot;<em>styleList</em>&quot;</font></code> - Apply the styles in <em>styleList </em>when this toggle is on.</li>
		<li><strong>Off Styles</strong> - <code><font face="Courier New">data-hr-style-off=&quot;<em>styleList</em>&quot;</font></code> - Apply the styles in <em>styleList </em>when this toggle is off.</li>
		<li><strong>On Classes</strong> - <code><font face="Courier New">data-hr-class-on=&quot;<em>classList</em>&quot;</font></code> - Apply the classes in <em>classList </em>when this toggle is on.</li>
		<li><strong>Off Classes</strong> - <code><font face="Courier New">data-hr-class-off=&quot;<em>classList</em>&quot;</font></code> - Apply the classes in <em>classList </em>when this toggle is off.</li>
		<li><strong>Idle Classes</strong> - <code><font face="Courier New">data-hr-class-idle=&quot;<em>classList</em>&quot;</font></code> - Apply <em>classList </em>classes when the animations on this element have completed. HtmlRapier can track animation states when you toggle and will apply this class after the animations are completed.</li>
		<li><strong>You can also make your own modes for styles or classes</strong>. The mode name is derived from the last section of the name. For example you could have an element with <code>data-hr-style-disabled</code> added to -on and -off styles. This will create a third toggle mode for &quot;disabled&quot;. Note that for additional modes to be supported the Toggle defined in the typescript code be aware of the mode. You can make custom toggle classes to support this.</li>
	</ul></li>
	<li><strong>Form</strong> - <code>data-hr-form=&quot;name&quot;</code> - Create a form on the specified element named name. Forms allow you to easily read / write data from form elements in the dom. In addition to this you can set a prototype object that will be used as the prototype object for data returned from the form. This allows you to create forms with extra data not on the form easily since it can be stored in the prototype object.</li>
	<li><strong>View</strong> - <code>data-hr-view=&quot;name&quot;</code> - Create a view on the specified element named name.&nbsp;A view, if it is able, will automatically repeat collection data that it is passed, otherwise it outputs a single element. All views will escape their output for malicious html, so you don&#39;t need to scrub your data yourself. Depending on what kind of element you attach this to you will get different concrete view types, however, the interface remains the same and you could swap one for another without changing code.
	<ul>
		<li><strong>ComponentModel</strong> - This model is created when the data-hr-model attribute is added to a node that also has data-hr-component on it (or will get one from an anonymous template). It will use a template that you define to output the data you specify. If the data is a collection then you will get repeated elements. This is the most flexible kind of model. To get this kind of model add a <code><font face="Courier New">data-hr-component=&quot;name&quot;</font></code> attribute to it or define a template as its child, which will make an anonymous template, which has the same effect without you needing to come up with a name yourself.</li><commit_msg>Added more info about making forms with schemas.<commit_after><h3 id="DataAttributes">Data Attributes</h3>
<p>At its heart this library is a fancy way of labeling elements on a html page with some attributes that make extracting them later, with some special properties, easier. You can define the following types of attributes on your elements.</p>
<ul>
	<li><strong>Controller </strong>- <code><samp><font face="Courier New">data-hr-controller=&quot;<em>controllerName</em>&quot;</font></samp></code> - This defines the primary interface between your javascript and the markup and act as more or less of an entry point for everything else. The <em>controllerName </em>value defines the name of the controller.</li>
	<li><strong>Event<strong> </strong></strong>-<strong> </strong><code><font face="Courier New">data-hr-on-<em>eventName</em>=&quot;<em>functionName</em>&quot;</font></code><em> - </em>Bind the html&nbsp;event <em>eventName </em>to the function in your controller named <em>functionName</em>. This supports all events that the browser can register with addEventListener.</li>
	<li><strong>Config</strong> - <code><font face="Courier New">data-hr-config-<em>name</em>=&quot;<em>value</em>&quot;</font></code> - Create a configuration for the controller named <em>name </em>with the value <em>value</em>. All the config values for a controller are extracted into a single object so the -name part should be unique.</li>
	<li><strong>Toggle</strong> - <code><font face="Courier New">data-hr-toggle=&quot;<em>name</em>&quot;</font></code> - Create a toggle named name. Toggles abstract the dom from your javascript for things like styles and classes. Toggles can be set to on and off in your javascript code. You can use the following attributes to in addition to a data-hr-toggle on an element to control what it looks like when the toggle is on and off.
	<ul>
		<li><strong>On Styles</strong> -<strong> </strong><code><font face="Courier New">data-hr-style-on=&quot;<em>styleList</em>&quot;</font></code> - Apply the styles in <em>styleList </em>when this toggle is on.</li>
		<li><strong>Off Styles</strong> - <code><font face="Courier New">data-hr-style-off=&quot;<em>styleList</em>&quot;</font></code> - Apply the styles in <em>styleList </em>when this toggle is off.</li>
		<li><strong>On Classes</strong> - <code><font face="Courier New">data-hr-class-on=&quot;<em>classList</em>&quot;</font></code> - Apply the classes in <em>classList </em>when this toggle is on.</li>
		<li><strong>Off Classes</strong> - <code><font face="Courier New">data-hr-class-off=&quot;<em>classList</em>&quot;</font></code> - Apply the classes in <em>classList </em>when this toggle is off.</li>
		<li><strong>Idle Classes</strong> - <code><font face="Courier New">data-hr-class-idle=&quot;<em>classList</em>&quot;</font></code> - Apply <em>classList </em>classes when the animations on this element have completed. HtmlRapier can track animation states when you toggle and will apply this class after the animations are completed.</li>
		<li><strong>You can also make your own modes for styles or classes</strong>. The mode name is derived from the last section of the name. For example you could have an element with <code>data-hr-style-disabled</code> added to -on and -off styles. This will create a third toggle mode for &quot;disabled&quot;. Note that for additional modes to be supported the Toggle defined in the typescript code be aware of the mode. You can make custom toggle classes to support this.</li>
	</ul></li>
	<li><strong>Form</strong> - <code>data-hr-form=&quot;name&quot;</code> - Create a form on the specified element named name. Forms allow you to easily read / write data from form elements in the dom. In addition to this you can set a prototype object that will be used as the prototype object for data returned from the form. This allows you to create forms with extra data not on the form easily since it can be stored in the prototype object. You can also set a schema for the form. Currently this is loosly based on JsonSchema4, but there are extensions to the data to help fully describe the forms. You can let the schema build the form or you can provide the elements yourself and fill in dynamic things like combo boxes, or you can define some elements and have others created automaticly from the schema.
	<ul>
		<li>If you are defining a form element yourself you can create a toggle named <em>itemName</em>Error (where&nbsp;itemName is the name set on the form attribute)&nbsp;to be able to toggle things with an error. You can also define a view <em>itemName</em>ErrorMessage that has an argument of {{this}} somewhere in it. The error messages are passed directly so you want to use {{this}}. All of these elements should be inside an element that has a <code>data-hr-form-start</code> attribute on it. You can also dictate where the auto generated elements should insert by specifying a <code>data-hr-form-end</code> attribute, otherwise they will insert at the end of what is on the form already.</li>
	</ul></li>
	<li><strong>View</strong> - <code>data-hr-view=&quot;name&quot;</code> - Create a view on the specified element named name.&nbsp;A view, if it is able, will automatically repeat collection data that it is passed, otherwise it outputs a single element. All views will escape their output for malicious html, so you don&#39;t need to scrub your data yourself. Depending on what kind of element you attach this to you will get different concrete view types, however, the interface remains the same and you could swap one for another without changing code.
	<ul>
		<li><strong>ComponentModel</strong> - This model is created when the data-hr-model attribute is added to a node that also has data-hr-component on it (or will get one from an anonymous template). It will use a template that you define to output the data you specify. If the data is a collection then you will get repeated elements. This is the most flexible kind of model. To get this kind of model add a <code><font face="Courier New">data-hr-component=&quot;name&quot;</font></code> attribute to it or define a template as its child, which will make an anonymous template, which has the same effect without you needing to come up with a name yourself.</li>
{'fraction_non_alphanumeric': 0.11284114765570329, 'fraction_numerical': 0.0007872638208537439, 'mean_word_length': 4.908527131782946, 'pattern_counts': {'":': 0, '<': 329, '<?xml version=': 0, '>': 329, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, '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': '1042188', 'n_tokens_mistral': 3138, 'n_tokens_neox': 3033, 'n_words': 1460}