# Inline Editable Addons

### Overview

- Based on Inline editable plugin, five additional editables have been defined which you can use by including the following scripts:

       <script src="dist/js/x-editable/bootstrap-editable.min.js" />
       <script src="dist/js/x-editable/ace-editable.min.js" />

### Image editable

- Image editable is based on custom file input
- You should do some extra work for uploading the image.
  A working example is available at `examples/profile-update.html`.
  The backend (server side) code is written in PHP at `examples/file-upload.php`.
- Inside `image` parapmeter which takes custom file input options, there is also `on_error` and `on_success` callbacks that are called when an invalid file is selected or if files are successfully selected.
- An example of image editable's usage:

      //first let's add a fake appendChild for Image element for browsers that have a problem with this
      //because it seems that editable plugin calls appendChild, and it causes errors on IE at unpredicted points
      try {
         document.createElement('IMG').appendChild(document.createElement('B'));
      } catch(e) {
         Image.prototype.appendChild = function(el){}
      }

      $('#avatar').editable({
        type: 'image',
        name: 'avatar',
        value: null,
        image: {
          name: 'avatar',//name should be here as well

          //custom file input options
          btn_choose: 'Change Avatar',
          droppable: true,
          maxSize: 110000,//~100kb

          //inline editable callback option
          on_error : function(error_type) {
      	  //invalid file selected, for example display an error message
            if(error_type == 1) {
              //file format error
            } else if(error_type == 2) {
              //file size rror
            }
            else {
              //other error
            }
          },
          on_success : function() {
            //valid file selected, for example remove error messages
          }
        },
        url: function(params) {
          //actual file upload happens here
          //see "examples/profile-avatar-update.js"
        }
      });

- If you want the editable image displayed in edit mode at first, you can use something like this:

      $('#avatar').editable('show').on('hidden', function(e, reason) {
        if(reason == 'onblur') {
           $('#avatar').editable('show');
           return;
        }
        $('#avatar').off('hidden');
      })

### Slider

- For this addon jQuery UI is required and should be included first

-     $('#element').editable({
         type : 'slider',
         name : 'element-name',

         //jQuery UI slider options
         slider : {
             min: 1,
             max: 50,

      	 //and slider's width (default is 200)
      	 width: 100

      	 //,nativeUI: true //this will use browser's built-in range control if available
         },

         success: function(response, newValue) {
            alert(parseInt(newValue));
         }
      });

- Using `nativeUI` option will switch to browser's built-in range control if available

### Spinner

- For this addon, FuelUX spinner is required and should be included first

-     $('#element').editable({
         type: 'spinner',
         name: 'element-name',

         //spinner options
         spinner : {
            min: 16,
            max: 99,
           step: 1

      	 //,nativeUI: true //this will use browser's built-in number input if available
         }
      });

- Using `nativeUI` option will switch to browser's built-in number input if available

### Wysiwyg

- For this addon Wysiwyg plugin is required and should be included first

-     $('#element').editable({
         mode: 'inline',
         type: 'wysiwyg',
         name: 'element-name',

        //wysiwyg plugin options, such as buttons, etc
        wysiwyg : {

          //optional max-width
          //css : {'max-width':'300px'}
        },
        success: function(response, newValue) {
        }
      });

### Date

- Latest version of inline editable plugin does not support date picker
- I added a custom one which requires date picker and it should be included first.
  The type name is `adate`

-     $('#element').editable({
        type: 'adate',

        //datepicker plugin options
        date: {
              format: 'dd/mm/yyyy',
          viewformat: 'dd/mm/yyyy',
           weekStart: 1

           //,nativeUI: true //this will use browser's built-in date picker if available
        }
      })

- Using `nativeUI` option will switch to browser's built-in date picker if available