137 lines
4.6 KiB
JavaScript
137 lines
4.6 KiB
JavaScript
jQuery.noConflict();
|
|
(function(win, $){
|
|
$.widget( "custom.SPPropertie", {
|
|
options: {
|
|
//solo per valori di default
|
|
},
|
|
_create: function(){
|
|
this.options = {
|
|
'id': this.element.prop('id'),
|
|
'label': $(this.element).attr('ps-label'),
|
|
'type': $(this.element).attr('ps-type'),
|
|
'buttons': $(this.element).attr('ps-button') ? JSON.parse( $(this.element).attr('ps-button')) : null,
|
|
'value': $(this.element).attr('ps-value') ? JSON.parse( $(this.element).attr('ps-value')) : null,
|
|
'help': $(this.element).attr('ps-help') ? $(this.element).attr('ps-help') : null,
|
|
'tooltip': $(this.element).attr('ps-tooltip') ? $(this.element).attr('ps-tooltip') : null
|
|
}
|
|
var table = $( '<table>' ),
|
|
tr = $( '<tr>' );
|
|
/* Creazione label */
|
|
$( '<label>', {
|
|
'class': "properties_label",
|
|
'html': '<a href="javascript:'+( this.options.help ? this.options.help /* +'(\''+this.options.id+'\')' */ : 'void(0)')+';" >'+this.options.label+' <i '+(this.options.tooltip?' class="pstooltip-info"':'')+'></i></a>'
|
|
}).appendTo($( '<td '+(this.options.buttons && this.options.buttons.length ? 'colspan="'+(this.options.buttons.length+1)+'"' : '' )+'>' ).appendTo($( '<tr>' ).appendTo(table)));
|
|
/* Creazione input */
|
|
this.Input;
|
|
this.Buttons=[];
|
|
|
|
switch( this.options.type ){
|
|
case 'text':
|
|
case 'number':
|
|
this.Input = $( '<input>', {
|
|
'class': "property_item",
|
|
'id': this.options.id+"_input",
|
|
type: this.options.type
|
|
}).on('blur', this._valueChange.bind(this))
|
|
break;
|
|
case 'checkbox':
|
|
this.Input =$( '<input>', {
|
|
'class': "property_item",
|
|
type: this.options.type
|
|
}).on( 'change', this._valueChange.bind(this))
|
|
break;
|
|
case 'select':
|
|
this.Input = $( '<select>', {
|
|
'class': "property_item properties_select"
|
|
}).on( 'change', this._valueChange.bind(this))
|
|
if( this.options.value ){
|
|
[].forEach.call( this.options.value, function( o ){
|
|
$( '<option>', {
|
|
value: o.value,
|
|
text: o.name
|
|
}).appendTo(this.Input);
|
|
}.bind(this));
|
|
}
|
|
break;
|
|
case 'textarea':
|
|
this.Input = $( '<textarea>', {
|
|
'class': "property_item",
|
|
}).on('blur', this._valueChange.bind(this))
|
|
break;
|
|
}
|
|
this.Input.appendTo( $('<td>').appendTo(tr));
|
|
|
|
// debugger
|
|
// var propLabel = document.getElementById("bg_color");
|
|
|
|
|
|
|
|
/* Creazione eventuali bottoni */
|
|
if( this.options.buttons && this.options.buttons.length){
|
|
[].forEach.call( this.options.buttons, function ( it, idx ){
|
|
var button = $( '<div>', {
|
|
'class': "input_inline_btn "+ it.type
|
|
}),
|
|
_this = this;
|
|
if( it.action )
|
|
button.on( 'click', function( /*event*/ ) {
|
|
if( !$(this).attr('disabled') )
|
|
win[it.action].call(this, this, $($(this).parents('tr')[0]).find('.property_item')[0], _this.element[0])
|
|
});
|
|
button.appendTo( $('<td>').appendTo(tr));
|
|
this.Buttons[idx] = button;
|
|
}.bind(this));
|
|
}
|
|
tr.appendTo(table)
|
|
table.appendTo(this.element)
|
|
new PSTooltip(this.element[0].querySelector('.properties_label i'), {'text' : this.options.tooltip, 'html': false});
|
|
},
|
|
|
|
_setOption: function ( key, value ){
|
|
if ( /value/.test(key) ) {
|
|
return alert('use value(value)');
|
|
}
|
|
this._super( key, value );
|
|
},
|
|
|
|
value: function( value ) {
|
|
if( typeof(value) == 'undefined' ){
|
|
value = this.Input.val();
|
|
if (typeof value == 'string') {
|
|
value = Strtran(value, ' ', '\r');
|
|
value = Strtran(value, ' ', '\n');
|
|
}
|
|
return value;
|
|
}else{
|
|
if( this.options.type == 'checkbox' ){
|
|
this.Input.prop('checked',value);
|
|
}
|
|
if (typeof value == 'string') {
|
|
value = Strtran(value, '\r', ' ');
|
|
value = Strtran(value, '\n', ' ');
|
|
}
|
|
this.Input.val(value);
|
|
this.element.attr('value',value);
|
|
// this.element.trigger( 'valueChange', [value] );
|
|
}
|
|
},
|
|
|
|
_valueChange: function( /*event*/ ){
|
|
var value = this.value();
|
|
this.element.attr('value',value);
|
|
if( this.options.type == 'checkbox' ){
|
|
value = this.Input.prop('checked');
|
|
}
|
|
this.element.trigger( 'valueChange', [value] );
|
|
},
|
|
|
|
getButton: function( idx ){
|
|
return this.Buttons[idx];
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
}) ( window, jQuery );
|