lib/assets/javascripts/cartodb/old_common/forms/widgets.js
/**
* Color form view
*
* - It is used in 'Marker fill', 'Polygon fill',...
*
*/
cdb.forms.Color = cdb.core.View.extend({
className: 'form-view form_color',
events: {
'click .image-picker' : '_openImagePicker',
'click .color-picker' : '_openColorPicker'
},
initialize: function() {
this.template = cdb.templates.getTemplate('old_common/views/color_form');
this.property = this.options.property;
this.model.bind('change', this.render, this);
this.image_property = this.options.extra ? this.options.extra.image_property: null;
this.image_kind = this.options.extra ? this.options.extra.image_kind: null;
this.image_kind = this.image_kind || 'marker';
},
render: function() {
this.$el.html(
this.template({
image_kind: this.image_kind,
image_property: this.image_property,
image_value: this.model.get(this.image_property),
color: this.model.get(this.property)
})
);
if (this.image_property)
this._createTooltips();
return this;
},
_createTooltips: function() {
this.addView(new cdb.common.TipsyTooltip({
el: this.$(".image-picker"),
delayIn: 100
}));
},
_createPicker: function() {
var tick, vertical_position, horizontal_position;
if (this.options.extra) {
if (this.options.extra.tick) {
tick = this.options.extra.tick;
}
if (this.options.extra.picker_vertical_position) {
vertical_position = this.options.extra.picker_vertical_position;
}
if (this.options.extra.picker_horizontal_position) {
horizontal_position = this.options.extra.picker_horizontal_position;
}
}
this.color_picker = new cdb.admin.ColorPicker({
target: this.$el,
colors: this.options.colors,
extra_colors: this.options.extra_colors,
tick: tick,
vertical_position: vertical_position,
horizontal_position: horizontal_position
}).bind("colorChosen", function(color, close) {
if (this.image_property == this.property) {
this.model.set(this.property, color);
} else {
this.model.unset(this.image_property, { silent: true });
this.model.set(this.property, color);
}
if (close) this._destroyPicker();
}, this);
this._bindColorPicker();
this.addView(this.color_picker);
},
_destroyPicker: function() {
if (this.color_picker) {
this._unbindColorPicker();
this.removeView(this.color_picker);
this.color_picker.hide();
delete this.color_picker;
}
},
_bindColorPicker: function() {
cdb.god.bind("closeDialogs", this._destroyPicker, this);
cdb.god.bind("closeDialogs:color", this._destroyPicker, this);
},
_unbindColorPicker: function() {
cdb.god.unbind("closeDialogs", this._destroyPicker, this);
cdb.god.unbind("closeDialogs:color", this._destroyPicker, this);
},
setExtraColors: function(colors) {
if (this.color_picker)
this.color_picker.setColors('extra_colors', colors);
},
setColors: function(colors) {
if (this.color_picker)
this.color_picker.setColors('colors', colors);
},
_openImagePicker: function(e) {
this.killEvent(e);
if (!this.image_property) return this;
cdb.god.trigger("closeDialogs:color");
this.user = new cdb.admin.User(window.user_data);
var dialog = new cdb.editor.ImagePickerView({
user: this.user,
kind: this.image_kind
});
dialog.appendToBody();
dialog.bind('fileChosen', this._onImageFileChosen, this);
},
_onImageFileChosen: function(url) {
if (this.image_property) {
if (this.image_property !== this.property) {
this.model.unset(this.property, { silent: true });
}
this.model.set(this.image_property, 'url(' + url + ')');
}
},
_openColorPicker: function(e) {
this.killEvent(e);
if (this.color_picker) this._destroyPicker();
cdb.god.trigger("closeDialogs:color");
if (!this.color_picker) {
this._createPicker();
$('body').append(this.color_picker.render().el);
this.color_picker.init(this.model.get(this.property));
}
}
});
/**
* Color widget with color picker showing
* all colors applied in the style.
*/
cdb.forms.ColorWizard = cdb.forms.Color.extend({
_createPicker: function() {
// Get wizard applied colors
if (this.model.layer && this.model.layer.get('tile_style')) {
var style = this.model.layer.get("tile_style");
var cartoParser = new cdb.admin.CartoParser(style);
this.options.extra_colors = cartoParser.colorsUsed({ mode: "hex" });
}
cdb.forms.Color.prototype._createPicker.call(this);
},
});
/**
* dummy view for hidden fields
*/
cdb.forms.Hidden = cdb.core.View.extend({
className: 'form-view form_hidden',
initialize: function() {
this.add_related_model(this.model);
}
});
cdb.forms.SimpleNumber = cdb.core.View.extend({
className: 'form-view form_spinner',
defaults: {
max: 999999999999,
min: -999999999999,
inc: 1,
width: 25,
pattern: /^-?[0-9]+\.?[0-9]*$/,
debounce_time: 200,
disable_triggering: false
},
events: {
'click .plus': '_plus',
'click .minus': '_minus',
'keypress input.value': '_checkInputPress',
'keydown input.value': '_checkInputPress',
'keyup input.value': '_checkInputUp',
'change .value': '_checkValueChange',
'click': '_showSlider'
},
initialize: function() {
_.bindAll(this, '_fireChange', '_checkNumber');
this.property = this.options.property;
this.model.bind('change', this.render, this);
// Check pattern, if it is empty or not valid,
// delete the option before extending defaults
if (!this.options.pattern ||
typeof this.options.pattern !== "object" ||
(typeof this.options.pattern === "object" && !this.options.pattern.test)
)
{
delete this.options.pattern;
}
_.defaults(this.options, this.defaults);
// Create slider
if(!this.options.noSlider) {
this._initSlider();
}
if(this.options.debounce_time > 0) {
this._fireChange = _.debounce(this._fireChange, this.options.debounce_time);
}
},
render: function(prop) {
var value = this.options.initValue || this.model.get(this.property);
if (prop && _.isNumber(prop)) {
value = prop;
}
this.$el.html('<input class="value" ' + (this.options.disabled ? 'readonly' : '') + ' value="" style="width:' + (this.options.width) + 'px!important"/><a href="#" class="plus">+</a><a href="#" class="minus">-</a>');
this.$('.value').val(value);
if (this.options.classes) this.$el.addClass(this.options.classes);
if (this.options.disabled) {
this.undelegateEvents();
this.$el
.addClass('disabled')
.find('a').bind('click', this.killEvent);
}
return this;
},
_fireChange: function() {
this.model.change();
},
_changeValue: function(a) {
this.model.set(a, { silent: true });
this._fireChange();
},
inc: function(c) {
var a = {};
var v = a[this.property] = parseFloat(this.model.get(this.property)) + c;
v = a[this.property] = Math.min(this.options.max, v.toFixed? v.toFixed(1): 1*v);
a[this.property] = Math.max(this.options.min, v);
this._changeValue(a);
// don't wait to be notified by model, render as fast as the user changes the value
this.render(a[this.property]);
},
_plus: function(e) {
e && e.preventDefault();
this.trigger("saved", this);
this.inc(this.options.inc);
return false;
},
_minus: function(e) {
e && e.preventDefault();
this.trigger("saved", this);
this.inc(-this.options.inc);
return false;
},
_initSlider: function() {
var self = this;
this.spinner_slider = new cdb.admin.SpinnerSlider({
target: this.$el,
template_base: 'old_common/views/spinner_slider'
}).bind("valueSet", function(value) {
// Set new model
var a = {};
a[self.property] = value;
self.model.set(a);
}).bind("valueChanged", function(value) {
// Set new value
self.$el.find(".value").val(value);
});
this.addView(this.spinner_slider);
},
_checkNumber: function(number) {
return this.options.pattern.test(number);
},
_checkInputPress: function(ev) {
var newChar = String.fromCharCode(ev.charCode);
if(newChar == '-' || newChar == '.' || 1*newChar !== NaN) {
return true;
} else {
ev.preventDefault();
ev.stopPropagation();
return false;
}
},
_checkInputUp: function(ev) {
this.value? null : this.value = this.model.get(this.property);
var number = $(ev.target).val();
if (ev.keyCode == 40) {
ev.preventDefault();
ev.stopPropagation();
this.inc(-this.options.inc);
this._saveValue(ev);
this.$el.find("input").focus();
return false;
}
if (ev.keyCode == 38) {
ev.preventDefault();
ev.stopPropagation();
this.inc(this.options.inc);
this._saveValue(ev);
this.$el.find("input").focus();
return false;
}
// If it is an ENTER -> saves!
if (ev.keyCode === 13) {
this._saveValue(ev, true);
return false;
}
// If not, check the key
if (!this._checkNumber(number) && number != '-' && number != '') {
this.$el.find("input.value").val(this.value);
// ev.stopPropagation();
// ev.preventDefault();
} else {
if(number != '-' && number != '') {
this.value = $(ev.target).val();
}
}
return true;
},
_checkValueChange: function(ev) {
var number = $(ev.target).val();
number = (number == '' || number == '-')? 0 : 1*number
if (!this._checkNumber(number)) {
this.$el.find("input.value").val(this.value);
} else {
this._saveValue(ev, true);
this.value = $(ev.target).val();
}
return true;
},
_saveValue: function(ev, close) {
var a = {};
var val = this.$el.find("input.value").val()
var baseNumber = (this.options.min < 0 && this.options.max > 0)?
0:
this.options.min;
var number = (val == '' || val == '-') ? baseNumber : 1*val;
if (number < this.options.min) number = this.options.min;
if (number > this.options.max) number = this.options.max;
this.$el.find("input.value").val(number);
a[this.property] = number;
this.model.set(a);
this.trigger("saved", this);
if (close && !this.options.disable_triggering) {
cdb.god.trigger("closeDialogs");
}
},
_showSlider: function(ev) {
ev.preventDefault();
ev.stopPropagation();
this.$el.find("input").focus();
}
});
cdb.forms.SimpleNumberWithLabel = cdb.forms.SimpleNumber.extend({
className: 'form-view form_spinner with-label',
render: function(prop) {
var value = this.options.initValue || this.model.get(this.property);
if (prop && _.isNumber(prop)) {
value = prop;
}
this.$el.html(
this.getTemplate('old_common/forms/widget_simple_number_with_label')({
label: this.options.label,
isDisabled: this.options.disabled,
width: this.options.width
})
);
this.$('.value').val(value);
if (this.options.classes) this.$el.addClass(this.options.classes);
if (this.options.disabled) {
this.undelegateEvents();
this.$el
.addClass('disabled')
.find('a').bind('click', this.killEvent);
}
return this;
}
});
cdb.forms.Spinner = cdb.core.View.extend({
className: 'form-view form_spinner',
defaults: {
max: 999999999999,
min: -999999999999,
inc: 1,
width: 25,
pattern: /^-?[0-9]+\.?[0-9]*$/,
debounce_time: 200
},
events: {
'click .plus': '_plus',
'click .minus': '_minus',
'keypress input.value': '_checkInputPress',
'keydown input.value': '_checkInputPress',
'keyup input.value': '_checkInputUp',
'change .value': '_checkValueChange',
'click': '_showSlider'
},
initialize: function() {
_.bindAll(this, '_fireChange', '_checkNumber');
this.property = this.options.property;
this.model.bind('change', this.render, this);
// Check pattern, if it is empty or not valid,
// delete the option before extending defaults
if (!this.options.pattern ||
typeof this.options.pattern !== "object" ||
(typeof this.options.pattern === "object" && !this.options.pattern.test)
)
{
delete this.options.pattern;
}
_.defaults(this.options, this.defaults);
// Create slider
if(!this.options.noSlider) {
this._initSlider();
}
if(this.options.debounce_time > 0) {
this._fireChange = _.debounce(this._fireChange, this.options.debounce_time);
}
},
render: function(prop) {
var value = this.options.initValue || this.model.get(this.property);
if (prop && _.isNumber(prop)) {
value = prop;
}
this.$el.html('<input class="value" ' + (this.options.disabled ? 'readonly' : '') + ' value="" style="width:' + (this.options.width) + 'px!important"/><a href="#" class="plus">+</a><a href="#" class="minus">-</a>');
this.$('.value').val(value);
if (this.options.disabled) {
this.undelegateEvents();
this.$el
.addClass('disabled')
.find('a').bind('click', this.killEvent);
}
return this;
},
_fireChange: function() {
this.model.change();
},
_changeValue: function(a) {
this.model.set(a, { silent: true });
this._fireChange();
},
inc: function(c) {
var a = {};
var v = a[this.property] = this.model.get(this.property) + c;
v = a[this.property] = Math.min(this.options.max, v.toFixed? v.toFixed(1): 1*v);
a[this.property] = Math.max(this.options.min, v);
this._changeValue(a);
// don't wait to be notified by model, render as fast as the user changes the value
this.render(a[this.property]);
},
_plus: function(e) {
e && e.preventDefault();
this.inc(this.options.inc);
return false;
},
_minus: function(e) {
e && e.preventDefault();
this.inc(-this.options.inc);
return false;
},
_initSlider: function() {
var self = this;
this.spinner_slider = new cdb.admin.SpinnerSlider({
target: this.$el,
template_base: 'old_common/views/spinner_slider'
}).bind("valueSet", function(value) {
// Set new model
var a = {};
a[self.property] = value;
self.model.set(a);
}).bind("valueChanged", function(value) {
// Set new value
self.$el.find(".value").val(value);
});
this.addView(this.spinner_slider);
},
_checkNumber: function(number) {
return this.options.pattern.test(number);
},
_checkInputPress: function(ev) {
var newChar = String.fromCharCode(ev.charCode);
if(newChar == '-' || newChar == '.' || 1*newChar !== NaN) {
return true;
} else {
ev.preventDefault();
ev.stopPropagation();
return false;
}
},
_checkInputUp: function(ev) {
this.value? null : this.value = this.model.get(this.property);
var number = $(ev.target).val();
// If it is an ENTER -> saves!
if (ev.keyCode === 13) {
this._saveValue(ev);
return false;
}
// If not, check the key
if (!this._checkNumber(number) && number != '-' && number != '') {
this.$el.find("input.value").val(this.value);
// ev.stopPropagation();
// ev.preventDefault();
} else {
if(number != '-' && number != '') {
this.value = $(ev.target).val();
}
}
return true;
},
_checkValueChange: function(ev) {
var number = $(ev.target).val();
number = (number == '' || number == '-')? 0 : 1*number
if (!this._checkNumber(number)) {
this.$el.find("input.value").val(this.value);
} else {
this._saveValue(ev);
this.value = $(ev.target).val();
}
return true;
},
_saveValue: function(ev) {
var a = {};
var val = this.$el.find("input.value").val()
var baseNumber = (this.options.min < 0 && this.options.max > 0)?
0:
this.options.min;
var number = (val == '' || val == '-') ? baseNumber : 1*val;
this.$el.find("input.value").val(number);
a[this.property] = number;
this.model.set(a);
cdb.god.trigger("closeDialogs");
},
_showSlider: function(ev) {
if(!this.options.noSlider) {
ev.stopPropagation();
cdb.god.unbind("closeDialogs", this.spinner_slider.hide, this.spinner_slider);
cdb.god.trigger("closeDialogs");
if (!this.spinner_slider.el.parentElement) {
$('body').append(this.spinner_slider.render().el);
this.spinner_slider.init(this.options.max, this.options.min, this.options.inc, this.$el.find("input.value").val());
cdb.god.bind("closeDialogs", this.spinner_slider.hide, this.spinner_slider);
cdb.god.bind("closeDialogs:color", this.spinner_slider.hide, this.spinner_slider);
}
this.$el.find("input.value").focus();
}
}
});
cdb.forms.Opacity = cdb.forms.Spinner.extend({
initialize: function() {
_.defaults(this.options, {
max: 1, min: 0, inc: 0.1
});
// Added correct class to the spinner
this.$el.addClass("opacity");
cdb.forms.Spinner.prototype.initialize.call(this);
}
});
cdb.forms.SimpleOpacity = cdb.forms.SimpleNumber.extend({
initialize: function() {
_.defaults(this.options, {
max: 1, min: 0, inc: 0.1
});
// Added correct class to the spinner
this.$el.addClass("opacity");
cdb.forms.Spinner.prototype.initialize.call(this);
}
});
// same as Opacity but manages the case when the cartocss
// contains a polygon-pattern
cdb.forms.OpacityPolygon = cdb.forms.Spinner.extend({
initialize: function() {
_.defaults(this.options, {
max: 1, min: 0, inc: 0.1
});
// Added correct class to the spinner
this.$el.addClass("opacity");
this.model.bind('change', function() {
this.switchProperty();
}, this);
cdb.forms.Spinner.prototype.initialize.call(this);
//this.switchProperty();
},
switchProperty: function() {
if(this.model.get('polygon-pattern-file')) {
if(!this.originalProperty) {
this.originalProperty = this.property;
this.property = 'polygon-pattern-opacity';
var val = this.model.get(this.property);
this.model.set(this.property, val === undefined ? this.model.get(this.originalProperty): val);
this.model.unset(this.originalProperty);
}
} else {
if(this.property === 'polygon-pattern-opacity') {
this.property = this.originalProperty;
this.originalProperty = null;
this.model.set(this.property, this.model.get('polygon-pattern-opacity'));
this.model.unset('polygon-pattern-opacity');
}
}
}
});
cdb.forms.Width = cdb.forms.Spinner.extend({
initialize: function() {
_.defaults(this.options, {
max: 40, min: 0, inc: 0.5
});
cdb.forms.Spinner.prototype.initialize.call(this);
}
});
cdb.forms.Combo = cdb.core.View.extend({
className: 'form-view form_combo',
options: {
minimumResultsForSearch: 20,
placeholder: '',
formatResult: false,
formatSelection: false,
matcher: false,
dropdownCssClass: ''
},
events: {
'change select': '_changeSelection'
},
initialize: function() {
_.bindAll(this, "_onUpdate", "_changeSelection");
this.data = this.options.extra;
if (this.model) {
this.add_related_model(this.model);
this.model.bind("change:" + this.options.property, this._onUpdate, this);
}
},
deselect: function() {
this.$el.find("select").val("").change();
},
updateData: function(data) {
this.data = data;
this._onUpdate();
},
_onUpdate: function() {
this.render();
},
_getOptions: function() {
var options = _.map(this.data, function(option) {
if (_.isArray(option)) {
return '<option value="' + option[1] + '">' + option[0] + '</option>';
} else {
return '<option>' + option + '</option>';
}
}).join("");
if (this.options.placeholder) options = "<option></option>" + options;
return options;
},
_setValue: function(value) {
this.$select.val(value);
},
render: function() {
var self = this;
// Options
this.$select = $('<select>' + this._getOptions() + '</select>');
// Method
var method = this.model && this.model.get("method") && this.model.get("method").replace(/ /g,"_").toLowerCase();
// Attributes
this.$select.attr({
style: (this.options.width ? "width:" + this.options.width : '')
});
this.$select.addClass(this.options.property + (method ? ' ' + method : ''));
// Disabled?
if (this.options.disabled) this.$select.attr("disabled", '');
// Sets the value
this._setValue(this.model && this.model.get(this.options.property) || this.options.property);
// Append
this.$el.html(this.$select);
// Apply select2, but before destroy the bindings
if (!this.options || !this.options.plainSelect) {
var $select = this.$("select");
$select.select2("destroy");
var combo_options = {
minimumResultsForSearch: this.options.minimumResultsForSearch,
placeholder: this.options.placeholder,
dropdownCssClass: this.options.dropdownCssClass
};
if (this.options.formatResult)
combo_options.formatResult = this._formatResult;
if (this.options.formatSelection)
combo_options.formatSelection = this._formatSelection;
if (this.options.matcher)
combo_options.matcher = this._matcher;
$select.select2(combo_options);
}
return this;
},
_changeSelection: function(e) {
var a = {};
var val = this.$('select').val();
a[this.options.property] = val;
if (this.model) {
if (val) this.model.set(a);
else this.model.set(a, { silent: true });
}
// Send trigger
if (val) this.trigger('change', a[this.options.property]);
},
_formatResult: function(data) {
return data.id || data.text;
},
_matcher: function(term, text, option) {
return text.toUpperCase().indexOf(term.toUpperCase())>=0;
},
clean: function() {
this.$select.select2("destroy");
cdb.core.View.prototype.clean.call(this);
}
});
cdb.forms.Switch = cdb.core.View.extend({
events: {
'click': '_onClick'
},
tagName: 'a',
className: 'form-view form_switch',
initialize: function() {
this.property = this.options.property;
this.model.bind('change:' + this.property, this._change, this);
},
_onClick: function(e) {
e.preventDefault();
if (!this.$el.hasClass("inactive")) {
var a = {};
var value = !this.model.get(this.property);
a[this.property] = value;
this.model.set(a);
this.trigger("switched", this.property, value);
}
return false;
},
_change: function() {
if(this.model.get(this.property)) {
this.$el.removeClass('disabled').addClass('enabled');
} else {
this.$el.removeClass('enabled').addClass('disabled');
}
},
render: function() {
this.$el.append("<span class='handle'></span>");
this._change();
return this;
}
});
cdb.forms.TextAlign = cdb.core.View.extend({
className: 'form-view form_align',
defaults: {
debounce_time: 200
},
events: {
'click .align': '_align'
},
initialize: function() {
_.bindAll(this, '_fireChange');
this.property = this.options.property;
this.template = cdb.templates.getTemplate('old_common/views/text_align');
this.model.bind('change', this.render, this);
// Check pattern, if it is empty or not valid,
// delete the option before extending defaults
if (!this.options.pattern ||
typeof this.options.pattern !== "object" ||
(typeof this.options.pattern === "object" && !this.options.pattern.test)
)
{
delete this.options.pattern;
}
_.defaults(this.options, this.defaults);
if(this.options.debounce_time > 0) {
this._fireChange = _.debounce(this._fireChange, this.options.debounce_time);
}
},
_fireChange: function() {
this.model.change();
},
_align: function(e) {
e && e.preventDefault();
var align = $(e.target).attr("data-align");
var a = {};
a[this.property] = align;
this.model.set(a, { silent: true });
this._fireChange();
},
render: function(prop) {
var value = this.options.initValue || this.model.get(this.property);
var alignments = this.options.alignments || {};
var left = alignments.left === undefined ? true : alignments.left;
var right = alignments.right === undefined ? true : alignments.right;
var center = alignments.center === undefined ? true : alignments.center;
this.$el.html(this.template({ left: left, right: right, center: center }));
this.$el.find("a[data-align='"+ value +"']").addClass("selected");
if (this.options.disabled) {
this.undelegateEvents();
this.$el
.addClass('disabled')
.find('a').bind('click', this.killEvent);
}
return this;
},
});