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