<section>
	<h1 class="blue"><i class="ace-icon fa fa-file-o grey"></i> Javascript Files</h1>
	<hr />

	<div class="help-content">
		<h3 class="info-title smaller" data-id="#files/javascript.ace">1. Ace Files</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				<ul class="info-list list-unstyled">
					<li>
						Compressed files are inside	<code>dist/js</code> folder.
						<br />
						Uncompressed(non-minified) files are inside <code>assets/js</code> folder.
					</li>
				
					<li>
						<b>ace.js</b> contains site's main functionality such as handling sidebar, widget boxes, etc.
					</li>
					
					<li>
						<p>
						<b>ace-elements.js</b> contains custom plugins such as
						<i>file input</i>, <i>scrollbars</i>, <i>colorpicker</i>
						and	wrappers for <i>spinner</i>, <i>wizard</i>, <i>treeview</i> and <i>wysiwyg</i> plugins.
						</p>
						<p>
						Please note that if you want to use one of these wrappers,  you still need to include the plugin's script.
						<br />
						For example:
<pre data-language="html">
 &lt;script src="fuleux/spinner.js"&gt;&lt;/script&gt;
 &lt;script src="ace.elements.js"&gt;&lt;/script&gt;
</pre>
						You can find more info about this in each plugin's section.
					</li>
					
					<li>
						<p>
						<b>ace-extra.js</b>
						which has cookie/localStorage functionality to save & retrieve user's settings.
						</p>
						<p>
						Also, sidebar collapse/expand, fixing navbar/sidebar/breadcrumbs are defined inside this file.
						</p>
						<p>						
						For more info about page options and settings, please see <a class="help-more" href="#settings">Settings</a> section.
						</p>
						<p>
						And for info about cookies and storage you can refer to <a class="help-more" href="#settings.storage">Cookies & Storage</a> section.
						</p>
					</li>
					
					<li>
						<p>
						<b>x-editable/ace-editable.js</b> which contains 5 additional inline editable addons:
						<i>date</i>, <i>slider</i>, <i>spinner</i>, <i>wysiwyg</i> and <i>image</i>.
						</p>
						<p>
						You can find more about about these addons <a class="help-more" href="#custom/inline-editable">here</a>
						and about <b>x-editable</b> plugin <a class="help-more" href="#plugins/misc.inline-editable">here</a>.
						</p>
					</li>
					
				</ul>
				
				<div class="hr hr-10"></div>
				<p>
					<b>ace.js</b> and <b>ace-elements.js</b>
					are generated using in-browser Javascript builder by merging separate script files that are inside
					<code>assets/js/ace</code> folder, which contains:
					<ol>
						<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>ace.js</code></li>
						<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>ace.sidebar.js</code></li>
						<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>ace.widget-box.js</code></li>
						<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>elements.scroller.js</code></li>
						<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>elements.fileinput.js</code></li>
						<li>And some other files which you can see inside <code>assets/js/ace</code></li>
					</ol>
				</p>
				<p>				
					For more information about any of the above files you can refer to <a href="../build/js.html">Javascript builder</a> as it has some description about each file.
				</p>
			</li>

		 </ul>
		</div>
		
		
		
		<h3 class="info-title smaller" data-id="#files/javascript.third">2. Other Files</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				All scripts are inside <code>assets/js</code> folder.
				<br />
				Compressed (minified) files are inside	<code>dist/js</code> folder.				
			</li>
			<li>
				<p>
				I have put some scripts that are similar in separate folders.
				<br />
				But that's optional and you can have your own structure.
				</p>
				<p>
				For example:
				<br />
				<code>assets/js/date-time</code>
				<br />
				<code>assets/js/fuelux</code>
				<br />
				<code>assets/js/markdown</code>
				<br />
				<code>assets/js/x-editable</code>
				<br />
				<code>assets/js/flot</code>
				<br />
				<code>assets/js/jqGrid</code>
				</p>
			</li>

			<li>
				If  you want to see what scripts are used in a demo page, you can view its json data file inside
				<code>mustache/app/data/pages</code> folder.
				<br />
				For example, according to its data file
				<br />
				<code data-open-file="json" class="open-file">mustache/app/data/pages/index.json</code>
				<br />
				dashboard(index) page is using the following scripts:
				<div class="space-4"></div>
				<ol>
					<li><b>jQuery UI</b> used for sortable tasks list</li>
					<li><b>Easy Pie Chart</b> used for circular progress meters</li>
					<li><b>Sparkline</b> used for inline charts inside infoboxes</li>
					<li><b>Flot charts</b> used for the pie chart and sale stats chart</li>
				</ol>
			</li>

			<li>
				I have included 2 versions of jQuery UI:
				<ol>
					<li>
						<code>assets/js/jquery-ui.custom.js</code>
						which is a custom build which contains stripped down functionality needed by some plugins and sections.
						<br />
						Included features are: dragging, resizing, jQuery UI Slider, etc.
					</li>
					<li>
						<code>assets/js/jquery-ui.full.js</code>
						is a full version containing all of jQuery UI's functionality used in jQuery UI sample page.
					</li>					
				</ol>
				You can build your own version depending on your needs.
			</li>
			
			<li>
				A minimal custom download of <b>jQuery Mobile</b> is also used,
				so that we can have <i>tap</i> event
				on touch devices which is preferred to <i>click</i>.
				<br />
				You can build your own version depending on your needs.
			</li>
		 </ul>
		</div>



		
		
		<h3 class="info-title smaller" data-id="#files/javascript.changes">3. Third party changes</h3>
		<div class="info-title info-section">
		 <ul class="info-list list-unstyled">
			<li>
				I haved modified some third party scripts slightly to add some extra options.
			</li>
			<li>
				The changes include :
				<ol>
					<li>
						FuelUX wizard, spinner, treeview
					</li>
					<li>
						Inline editable plugin
					</li>
					<li>
						Markdown editor
					</li>
					<li>
						Datepicker, Daterange picker, Timepicker
					</li>
					<li>
						Added <code>function.bind</code> polyfill to html5shiv
					</li>
					<li>
						Some changes in Easy Pie Chart
					</li>
				</ol>
			</li>
		 </ul>
		</div>
		
		
		<h3 class="info-title smaller" data-id="#files/javascript.order">4. Script order</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				The right order of including script files is:
				<ul>
					<li>
					Scripts that are inside <code>HEAD</code> element:
					<br />
					(also visible in <br />
					<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/_template/</span>styles.mustache</code>)
					
					<ol>
						<li>
							<b>ace-extra.js</b> if  you need cookie support and sidebar collapse/expand, fixing navbar, etc.
						</li>
						<li>
							<b>html5shiv.js</b> & <b>respond.js</b>
							wrapped inside IE conditional comments which enable some HTML5 features on IE8 and below.
						</li>
					</ol>
					
<pre data-language="html">
 &lt;head&gt;
  .
  .
  .

  &lt;script src="ace-extra.min.js"&gt;&lt;/script&gt;
  &lt;!--[if lte IE 8]&gt;
   &lt;script src="html5shiv.min.js"&gt;&lt;/script&gt;
   &lt;script src="respond.min.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
 &lt;/head&gt;
</pre>

				</li>
				<li>
					Other scripts that are preferrably at the end of document:
					<br />
					(also visible in <br />
					<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/_template/</span>scripts.mustache</code>)
					
					<ol class="spaced2">
						<li>
							<b>jquery.js</b> as well as <b>jquery v1.x</b> which is included for IE9 and below.
							<br />
							<b>jquery.js</b> should be inside special IE conditional comments and it will be ignored by IE9 and below.
							<br />
							<b>jquery v1.x</b> should be inside conditional comments so that it's included by IE9 and below only.
						</li>
						
						<li>
							<b>bootstrap.js</b>
						</li>
						
						<li>
							<b>excanvas.js</b> for IE8 if you are going to need HTML5 Canvas support.
							Currently plugins that need canvas support are:
							<ol>
								<li>Flotchart</li>
								<li>Sparklines</li>
								<li>jQuery Knob</li>
								<li>Easy Pie Chart</li>
							</ol>							
							<br />
							You should include excanvas before including above plugins.
						</li>
						
						<li>
							Any Plugin that you want to use for example:
							<br />
							<b>Chosen</b>
							<br />
							<b>Fuelux Wizard</b>
						</li>

						<li>
							Finally you should include <b>ace-elements.js</b> and <b>ace.js</b>
						</li>
						
						<li>
							And then inline scripts that you may want to use for the page.
						</li>
					</ol>
					<div class="hr hr-8"></div>
<pre data-language="html">
  .
  .
  .

  &lt;!--[if !IE]&gt; --&gt;
  &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- &lt;![endif]--&gt;
  &lt;!--[if lte IE 9]&gt;
   &lt;script src="jquery1x.min.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;

  &lt;script src="bootstrap.min.js"&gt;&lt;/script&gt;

  &lt;!-- ie8 canvas if required for plugins such as charts, etc --&gt;
  &lt;!--[if lte IE 8]&gt;
   &lt;script src="excanvas.min.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;

  &lt;script src="plugin1.min.js"&gt;&lt;/script&gt;
  &lt;script src="plugin2.min.js"&gt;&lt;/script&gt;
  &lt;script src="plugin3.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="ace-elements.min.js"&gt;&lt;/script&gt;
  &lt;script src="ace.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
     //If page has any inline scripts, it goes here
     jQuery(function($) {
       alert('hello!');
     });
  &lt;/script&gt;

 &lt;/body&gt;
</pre>

				 </li>
					
				</ul>
			</li>
		 </ul>
		</div>
		
		
		<h3 class="info-title smaller" data-id="#files/javascript.build">5. Javascript Builder</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				There is also the in-browser Javascript builder that you can use to build a custom Javascript file,
				using only the parts you need.
				<br />
				You can find it here: <a href="../build/js.html">path/to/ace/build/js.html</a>
				<div class="space-6"></div>
				You can choose a minified(compressed) output which is powered by the popular tool
				<a href="#plugins/tools.uglifyjs" class="help-more">UglifyJs</a>.
			</li>
		 </ul>
		</div>
	</div>
</section>