157 lines
4.6 KiB
JavaScript
157 lines
4.6 KiB
JavaScript
/**
|
|
List of checkboxes.
|
|
Internally value stored as javascript array of values.
|
|
|
|
@class checklist
|
|
@extends list
|
|
@final
|
|
@example
|
|
<a href="#" id="options" data-type="checklist" data-pk="1" data-url="/post" data-title="Select options"></a>
|
|
<script>
|
|
$(function(){
|
|
$('#options').editable({
|
|
value: [2, 3],
|
|
source: [
|
|
{value: 1, text: 'option1'},
|
|
{value: 2, text: 'option2'},
|
|
{value: 3, text: 'option3'}
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
**/
|
|
(function ($) {
|
|
"use strict";
|
|
|
|
var Checklist = function (options) {
|
|
this.init('checklist', options, Checklist.defaults);
|
|
};
|
|
|
|
$.fn.editableutils.inherit(Checklist, $.fn.editabletypes.list);
|
|
|
|
$.extend(Checklist.prototype, {
|
|
renderList: function() {
|
|
var $label, $div;
|
|
|
|
this.$tpl.empty();
|
|
|
|
if(!Array.isArray(this.sourceData)) {
|
|
return;
|
|
}
|
|
|
|
for(var i=0; i<this.sourceData.length; i++) {
|
|
$label = $('<label>').append($('<input>', {
|
|
type: 'checkbox',
|
|
value: this.sourceData[i].value
|
|
}))
|
|
.append($('<span>').text(' '+this.sourceData[i].text));
|
|
|
|
$('<div>').append($label).appendTo(this.$tpl);
|
|
}
|
|
|
|
this.$input = this.$tpl.find('input[type="checkbox"]');
|
|
this.setClass();
|
|
},
|
|
|
|
value2str: function(value) {
|
|
return Array.isArray(value) ? value.sort().join(this.options.separator.trim()) : '';
|
|
},
|
|
|
|
//parse separated string
|
|
str2value: function(str) {
|
|
var reg, value = null;
|
|
if(typeof str === 'string' && str.length) {
|
|
reg = new RegExp('\\s*'+this.options.separator.trim()+'\\s*');
|
|
value = str.split(reg);
|
|
} else if(Array.isArray(str)) {
|
|
value = str;
|
|
} else {
|
|
value = [str];
|
|
}
|
|
return value;
|
|
},
|
|
|
|
//set checked on required checkboxes
|
|
value2input: function(value) {
|
|
this.$input.prop('checked', false);
|
|
if(Array.isArray(value) && value.length) {
|
|
this.$input.each(function(i, el) {
|
|
var $el = $(el);
|
|
// cannot use $.inArray as it performs strict comparison
|
|
$.each(value, function(j, val){
|
|
/*jslint eqeq: true*/
|
|
if($el.val() == val) {
|
|
/*jslint eqeq: false*/
|
|
$el.prop('checked', true);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
},
|
|
|
|
input2value: function() {
|
|
var checked = [];
|
|
this.$input.filter(':checked').each(function(i, el) {
|
|
checked.push($(el).val());
|
|
});
|
|
return checked;
|
|
},
|
|
|
|
//collect text of checked boxes
|
|
value2htmlFinal: function(value, element) {
|
|
var html = [],
|
|
checked = $.fn.editableutils.itemsByValue(value, this.sourceData),
|
|
escape = this.options.escape;
|
|
|
|
if(checked.length) {
|
|
$.each(checked, function(i, v) {
|
|
var text = escape ? $.fn.editableutils.escape(v.text) : v.text;
|
|
html.push(text);
|
|
});
|
|
$(element).html(html.join('<br>'));
|
|
} else {
|
|
$(element).empty();
|
|
}
|
|
},
|
|
|
|
activate: function() {
|
|
this.$input.first().focus();
|
|
},
|
|
|
|
autosubmit: function() {
|
|
this.$input.on('keydown', function(e){
|
|
if (e.which === 13) {
|
|
$(this).closest('form').submit();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
Checklist.defaults = $.extend({}, $.fn.editabletypes.list.defaults, {
|
|
/**
|
|
@property tpl
|
|
@default <div></div>
|
|
**/
|
|
tpl:'<div class="editable-checklist"></div>',
|
|
|
|
/**
|
|
@property inputclass
|
|
@type string
|
|
@default null
|
|
**/
|
|
inputclass: null,
|
|
|
|
/**
|
|
Separator of values when reading from `data-value` attribute
|
|
|
|
@property separator
|
|
@type string
|
|
@default ','
|
|
**/
|
|
separator: ','
|
|
});
|
|
|
|
$.fn.editabletypes.checklist = Checklist;
|
|
|
|
}(window.jQuery));
|