1023 lines
25 KiB
JavaScript
1023 lines
25 KiB
JavaScript
|
|
||
|
|
/**
|
||
|
|
* 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;
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
});
|