# FuelUX

### Spinbox

- To use FuelUX spinner you should include `assets/js/fuelux/fuelux.spinner.js`
- For more info and options about it please see its page:
  http://getfuelux.com/javascript.html#spinbox
- For ease of use, I have made a wrapper for the plugin with some extra options:

      $('#my-spinner').ace_spinner({
                  min: 0,
                  max: 100,
                 step: 1,

              icon_up: 'fa-plus',
            icon_down: 'fa-minus',
         btn_up_class: 'btn-success',
       btn_down_class: 'btn-danger',

             on_sides: true
      });

- Extra options are :
  1. `icon_up` the icon to be used for "up" button
  2. `icon_down` the icon to be used for "down" button
  3. `btn_up_class` the button class for "up" button
  4. `btn_down_class` the button class for "down" button
  5. `on_sides` up and down buttons will be on different sides of input
  6. `touch_spinner` bigger buttons will be used
- You can also use the following functions to modify spinner element:

      $('#my-spinner').ace_spinner('disable');
      $('#my-spinner').ace_spinner('enable');
      $('#my-spinner').ace_spinner('value', 3);

- If you want to use spinbox's functions directly you need to target the `.ace-spinner` wrapper element:

      $('#my-spinner').closest('.ace-spinner').spinbox('disable');

  Same is true for events.
- Latest version of FuelUX renames spinner to spinbox and events are namespaced:

      $('#my-spinner').closest('.ace-spinner').on('changed.fu.spinbox', function () {
        //do something
      })

- You can add `.input-sm` to text input element for a smaller and `.input-lg` for a larger spinner:

- Please note that if you want more advanced functionality, you can use jQuery UI's spinner

### Wizard

- To use FuelUX wizard you should include `assets/js/fuelux/fuelux.wizard.js`
- For more info and options about the plugin see its page:
  http://getfuelux.com/javascript.html#wizard
- For ease of use, I have made a wrapper for the plugin
- Latest version of FuelUX adds several changes to its wizard plugin:
  - Rename `ul.wizard-steps` to `ul.steps`
  - `ul.steps` and `div.step-content` are wrapped inside a parent for example `div#my-wizard` and ace_wizard or FuelUX's wizard function is applied to div#my-wizard
    Note that #my-wizard id is arbitrary and can be anything
  - Each `ul.steps > li` and `.step-pane` should have a `data-step` attribute which specifies step number
  - change event is now actionclicked.fu.wizard and return false doesn't prevent step change.
    You should use `e.preventDefault()` now
  - Instead of $('#my-wizard').data('wizard') you should now use $('#my-wizard').data('fu.wizard')
- The format of your wizard HTML should be something like this:

                1
                Step1

                2
                Step2

  It's a `ul.steps` wrapped inside an element which also contains our step panes.
  Steps panes container is a `.step-content` which contains several `.step-pane` elements each with a `data-step` attribute.
- A `.wizard-actions` element containing `.btn-prev` and `.btn-next` buttons should be a sibling are wizard:

  `.btn-next` should have a `data-last` attribute which is "finish" button's text at final step.
  There is also a `buttons` attribute when using ace_wizard function which allows specifying a custom set of action buttons elsewhere.
- Use the following code to initiate the wizard:

      $('#my-wizard')
      .ace_wizard({
        //step: 2 //optional argument. wizard will jump to step "2" at first
        //buttons: '.my-action-buttons' //which is possibly located somewhere else and is not a sibling of wizard
      })
      .on('actionclicked.fu.wizard' , function(e, info) {
         //info.step
         //info.direction

         //use e.preventDefault to cancel
      })
      .on('changed.fu.wizard', function() {
         //after step has changed
      })
      .on('finished.fu.wizard', function(e) {
         //do something when finish button is clicked
      }).on('stepclick.fu.wizard', function(e) {
         //e.preventDefault();//this will prevent clicking and selecting steps
      });

- There are several functions available for wizard element which you can use like the following example:

       var wizard = $('#my-wizard').data('fu.wizard');

       //move to step 3
       wizard.currentStep = 3;
       wizard.setState();

       //determine selected step
       wizard.selectedItem().step

### Treeview

- To use FuelUX tree you should include `assets/js/fuelux/fuelux.treeview.js`
- For more info and options about the plugin please see plugin's page:
  http://getfuelux.com/javascript.html#tree
- For ease of use, I have made a wrapper for the plugin and added a few extra options
- Extra options are:
  1. `open-icon` The icon for an open tree node
  2. `close-icon` The icon for a closed tree node
  3. `selectable` Whether items are selectable or not
  4. `selected-icon` Icon for a selected tree node
  5. `unselected-icon` Icon for a non-selected tree node
- A basic tree is initiated like this:

      $('#tree1').ace_tree({
             dataSource : treeDataSource ,
            multiSelect : true,
            loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',

            'open-icon' : 'ace-icon tree-minus',
           'close-icon' : 'ace-icon tree-plus',
           'selectable' : true,
        'selected-icon' : 'ace-icon fa fa-check',
      'unselected-icon' : 'ace-icon fa fa-times'
      });

- Two additional icon classes are defined for tree: `.tree-minus` and `.tree-plus`
- Latest version of FuelUX adds several changes to its tree plugin:
  - Tree should be a `ul` element
  - `name` is now deprecated and `text` should be used.
  - Events are namespaced:

        $('#tree1').on('opened.fu.tree', function () {
          //do something
        })

  - dataSource is now a bit different:

        $('#tree1').ace_tree({
          dataSource : treeDataSource
          // ... other options
        });

        var treeDataSource = function(options , callback) {
         //options has extra info such as "type" "text" "additionalParameteres", etc
         //which you can use to specify requested set of data
         var myData = [ ... ];//set of data
         callback({ data: myData });
        }

    Please see treeview example page for more info

### Data Source

- In the demo example, dataSource is static inside page's inline script:
  `mustache/app/views/assets/scripts/treeview.js`
- An example of a data source dynamically loading data from server is included in `examples/treeview.html`
- You can use `additionalParameters` parameter to include optional data, for example setting `item-selected:true` will mark the item as selected upon insertion into tree.
  Other extra info you can save inside `additionalParameters` is `id`, `title`, etc ...
- Basically you should define a create dataSource function which is called by the plugin when a subtree is requested:

      var mySource = function(options , callback) {
        //retrieve data according to "options" parameters
        //and when data is loaded, call "callback"
      }
      $('#treeview').ace_tree({
       dataSource: mySource
       //other options
      });

- To get the list of user selected items and posting it to server, you can do the following:

      var items = $('#treeview').tree('selectedItems');
      //for example convert "items" to a custom string
      for(var i in items) if (items.hasOwnProperty(i)) {
         var item = items[i];
         output += item.additionalParameters['id'] + ":"+ item.text+"\n";
      }
      //send output to server

### Note

- I have disabled/removed `folderSelect` option of FuelUX tree because it has a problem with Ace's styling of treeview element.
  It allows selecting a folder however does not result in its children being selected automatically.
  So it seems unnecessary and you can change it into an "item" to make it selectable if there are no children.
  If it has children you can select the children instead and in your code you will be able to determine the parent of those selected children.