# 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
      })

- 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