Javascript Files

1. Ace Files

- Compressed files are inside dist/js folder.
  Uncompressed(non-minified) files are inside assets/js folder.
- ace.js contains site's main functionality such as handling sidebar, widget boxes, etc.
- ace-elements.js contains custom plugins such as file input, scrollbars, colorpicker and wrappers for spinner, wizard, treeview and wysiwyg plugins.
  
  Please note that if you want to use one of these wrappers, you still need to include the plugin's script.
  For example:
```
 <script src="fuleux/spinner.js"></script>
 <script src="ace.elements.js"></script>
```
  You can find more info about this in each plugin's section.
- ace-extra.js which has cookie/localStorage functionality to save & retrieve user's settings.
  
  Also, sidebar collapse/expand, fixing navbar/sidebar/breadcrumbs are defined inside this file.
  
  For more info about page options and settings, please see Settings section.
  
  And for info about cookies and storage you can refer to Cookies & Storage section.
- x-editable/ace-editable.js which contains 5 additional inline editable addons: date, slider, spinner, wysiwyg and image.
  
  You can find more about about these addons here and about x-editable plugin here.
ace.js and ace-elements.js are generated using in-browser Javascript builder by merging separate script files that are inside assets/js/ace folder, which contains:
1. assets/js/ace/ace.js
2. assets/js/ace/ace.sidebar.js
3. assets/js/ace/ace.widget-box.js
4. assets/js/ace/elements.scroller.js
5. assets/js/ace/elements.fileinput.js
6. And some other files which you can see inside assets/js/ace
For more information about any of the above files you can refer to Javascript builder as it has some description about each file.

2. Other Files

All scripts are inside assets/js folder.
Compressed (minified) files are inside dist/js folder.
I have put some scripts that are similar in separate folders.
But that's optional and you can have your own structure.

For example:
assets/js/date-time
assets/js/fuelux
assets/js/markdown
assets/js/x-editable
assets/js/flot
assets/js/jqGrid
If you want to see what scripts are used in a demo page, you can view its json data file inside mustache/app/data/pages folder.
For example, according to its data file
mustache/app/data/pages/index.json
dashboard(index) page is using the following scripts:
1. jQuery UI used for sortable tasks list
2. Easy Pie Chart used for circular progress meters
3. Sparkline used for inline charts inside infoboxes
4. Flot charts used for the pie chart and sale stats chart
I have included 2 versions of jQuery UI:
1. assets/js/jquery-ui.custom.js which is a custom build which contains stripped down functionality needed by some plugins and sections.
  Included features are: dragging, resizing, jQuery UI Slider, etc.
2. assets/js/jquery-ui.full.js is a full version containing all of jQuery UI's functionality used in jQuery UI sample page.
You can build your own version depending on your needs.
A minimal custom download of jQuery Mobile is also used, so that we can have tap event on touch devices which is preferred to click.
You can build your own version depending on your needs.

3. Third party changes

I haved modified some third party scripts slightly to add some extra options.
The changes include :
1. FuelUX wizard, spinner, treeview
2. Inline editable plugin
3. Markdown editor
4. Datepicker, Daterange picker, Timepicker
5. Added function.bind polyfill to html5shiv
6. Some changes in Easy Pie Chart

4. Script order

The right order of including script files is:
- Scripts that are inside HEAD element:
  (also visible in
  mustache/app/views/layouts/partials/_shared/_template/styles.mustache)
  1. ace-extra.js if you need cookie support and sidebar collapse/expand, fixing navbar, etc.
  2. html5shiv.js & respond.js wrapped inside IE conditional comments which enable some HTML5 features on IE8 and below.
```
 <head>
  .
  .
  .

  <script src="ace-extra.min.js"></script>
  
 </head>
```
- Other scripts that are preferrably at the end of document:
  (also visible in
  mustache/app/views/layouts/partials/_shared/_template/scripts.mustache)
  1. jquery.js as well as jquery v1.x which is included for IE9 and below.
    jquery.js should be inside special IE conditional comments and it will be ignored by IE9 and below.
    jquery v1.x should be inside conditional comments so that it's included by IE9 and below only.
  2. bootstrap.js
  3. excanvas.js for IE8 if you are going to need HTML5 Canvas support. Currently plugins that need canvas support are:
    1. Flotchart
    2. Sparklines
    3. jQuery Knob
    4. Easy Pie Chart
    You should include excanvas before including above plugins.
  4. Any Plugin that you want to use for example:
    Chosen
    Fuelux Wizard
  5. Finally you should include ace-elements.js and ace.js
  6. And then inline scripts that you may want to use for the page.
```
  .
  .
  .

  
  <script src="jquery.min.js"></script>
  
  

  <script src="bootstrap.min.js"></script>

  
  

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

 </body>
```

5. Javascript Builder

There is also the in-browser Javascript builder that you can use to build a custom Javascript file, using only the parts you need.
You can find it here: path/to/ace/build/js.html
You can choose a minified(compressed) output which is powered by the popular tool UglifyJs.