iobroker.vis
Version:
Graphical user interface for iobroker.
969 lines (908 loc) • 123 kB
JavaScript
/**
* ioBroker.vis
* https://github.com/ioBroker/ioBroker.vis
*
* Copyright (c) 2013-2018 bluefox https://github.com/GermanBluefox, hobbyquaker https://github.com/hobbyquaker
* Creative Common Attribution-NonCommercial (CC BY-NC)
*
* http://creativecommons.org/licenses/by-nc/4.0/
*
* Short content:
* Licensees may copy, distribute, display and perform the work and make derivative works based on it only if they give the author or licensor the credits in the manner specified by these.
* Licensees may copy, distribute, display, and perform the work and make derivative works based on it only for noncommercial purposes.
* (Free for non-commercial use).
*/
// visEdit - the ioBroker.vis Editor
/* jshint browser:true */
/* global document */
/* global console */
/* global session */
/* global window */
/* global location */
/* global setTimeout */
/* global clearTimeout */
/* global io */
/* global $ */
/* global vis:true */
/* global local */
/* global can */
/* global colorSelect */
/* global storage */
/* global html2canvas */
/* global translateAll */
/* global ace */
/* global _ */
/* jshint -W097 */// jshint strict:false
// Format: attr_name(start-end)[default_value]/type/onChangeFunc
// attr_name can be extended with numbers (1-2) means it will be attr_name1 and attr_name2 created
// end number can be other attribute, e.g (1-count)
// defaultValue: If defaultValue has ';' it must be replaced by §
// defaultValue: If defaultValue has '/' it must be replaced by ~
// defaultValue: If defaultValue has '"' it must be replaced by ^
// defaultValue: If defaultValue has '^' it must be replaced by ^^
// onChangeFunc has following attributes (widgetID, view, newId, attr, isCss) and must return back the array with changed attributes or null
// Type format: id - Object ID Dialog
// hid
// checkbox
// image - image
// number,min,max,step - non-float number. min,max,step are optional
// color - color picker
// views - Name of the view
// effect - jquery UI show/hide effects
// eff_opt - additional option to effect slide (up, down, left, right)
// fontname - Font name
// slider,min,max,step - Default step is ((max - min) / 100)
// select,value1,value2,... - dropdown select
// nselect,value1,value2,... - same as select, but without translation of items
// auto,value1,value2,... - autocomplete
// style,fileFilter,nameFilter,attrFilter
// custom,functionName,options,... - custom editor - functionName is starting from vis.binds.[widgetset.funct]. E.g. custom/timeAndWeather.editWeather,short
// group.name - define new or old group. All following attributes belongs to new group till new group.xyz
// group.name/byindex/icon - like group, but all following attributes will be grouped by ID. Icon is optional. Like group.windows/byindex;slide(1-4)/id;slide_type(1-4)/select,open,closed Following groups will be created Windows1(slide1,slide_type1), Windows2(slide2,slide_type2), Windows3(slide3,slide_type3), Windows4(slide4,slide_type4)
// text - dialog box with html editor
// html - dialog box with html editor
// widget - existing widget selector
// history - select history instances
'use strict';
vis = $.extend(true, vis, {
fontNames: [
'Verdana, Geneva, sans-serif',
'Georgia, "Times New Roman", Times, serif',
'"Courier New", Courier, monospace',
'Arial, Helvetica, sans-serif',
'Tahoma, Geneva, sans-serif',
'"Trebuchet MS", Arial, Helvetica, sans-serif',
'"Arial Black", Gadget, sans-serif',
'"Times New Roman", Times, serif',
'"Palatino Linotype", "Book Antiqua", Palatino, serif',
'"Lucida Sans Unicode", "Lucida Grande", sans-serif',
'"MS Serif", "New York", serif',
'"Comic Sans MS", cursive'
],
editObjectID: function (widAttr, widgetFilter, isHistory, onChange) {
var that = this;
if (typeof isHistory === 'function') {
onChange = isHistory;
isHistory = false;
}
// Edit for Object ID
var line = [
{
input: '<input type="text" id="inspect_' + widAttr + '" data-onchange="' + (onChange || '')+ '">'
}
];
if (this.objectSelector) {
line[0].button = {
icon: 'ui-icon-note',
text: false,
title: _('Select object ID'),
click: function () {
var wdata = $(this).data('wdata');
$('#dialog-select-member-' + wdata.attr).selectId('show', that.views[wdata.view].widgets[wdata.widgets[0]].data[wdata.attr], function (newId, oldId) {
if (oldId !== newId) {
$('#inspect_' + wdata.attr).val(newId).trigger('change');
if ($('#inspect_min').length) {
if (that.objects[newId] && that.objects[newId].common && that.objects[newId].common.min !== undefined) {
$('#inspect_min').val(that.objects[newId].common.min).trigger('change');
}
}
if ($('#inspect_max').length) {
if (that.objects[newId] && that.objects[newId].common && that.objects[newId].common.max !== undefined) {
$('#inspect_max').val(that.objects[newId].common.max).trigger('change');
}
}
if ($('#inspect_oid-working').length) {
if (that.objects[newId] && that.objects[newId].common && that.objects[newId].common.workingID) {
if (that.objects[newId].common.workingID.indexOf('.') !== -1) {
$('#inspect_oid-working').val(that.objects[newId].common.workingID).trigger('change');
} else {
var parts = newId.split('.');
parts.pop();
parts.push(that.objects[newId].common.workingID);
$('#inspect_oid-working').val(parts.join('.')).trigger('change');
}
}
}
/*
if (document.getElementById('inspect_hm_wid')) {
if (that.objects[newId]['Type'] !== undefined && that.objects[value]['Parent'] !== undefined &&
(that.objects[newId]['Type'] === 'STATE' ||
that.objects[newId]['Type'] === 'LEVEL')) {
var parent = that.objects[newId]['Parent'];
if (that.objects[parent]['DPs'] !== undefined &&
that.objects[parent]['DPs']['WORKING'] !== undefined) {
$('#inspect_hm_wid').val(that.objects[parent]['DPs']['WORKING']);
$('#inspect_hm_wid').trigger('change');
}
}
}
// Try to find Function of the device and fill the Filter field
var $filterkey = $('#inspect_filterkey');
if ($filterkey.length) {
if ($filterkey.val() === '') {
var oid = newId;
var func = null;
if (that.metaIndex && that.metaIndex['ENUM_FUNCTIONS']) {
while (oid && that.objects[oid]) {
for (var t = 0; t < that.metaIndex['ENUM_FUNCTIONS'].length; t++) {
var list = that.objects[that.metaIndex['ENUM_FUNCTIONS'][t]];
for (var z = 0; z < list['Channels'].length; z++) {
if (list['Channels'][z] === oid) {
func = list.Name;
break;
}
}
if (func) break;
}
if (func) break;
oid = that.objects[oid]['Parent'];
}
}
if (func) $filterkey.val(func).trigger('change');
}
}*/
}
});
}
};
line[0].onchange = function (val, oldValue) {
var wdata = $(this).data('wdata');
$('#inspect_' + wdata.attr + '_desc').html(that.getObjDesc(val));
var userOnchange = $(this).data('onchange');
if (userOnchange) {
for (var w = 0; w < wdata.widgets.length; w++) {
var widgetSet = $('#' + that.views[wdata.view].widgets[wdata.widgets[w]].tpl).attr('data-vis-set');
if (that.binds[widgetSet] && that.binds[widgetSet][userOnchange]) {
return that.binds[widgetSet][userOnchange](wdata.widgets[w], wdata.view, that.widgets[wdata.widgets[w]].data[wdata.attr], wdata.attr, false, oldValue);
}
}
}
};
line.push({input: '<div id="inspect_' + widAttr + '_desc"></div>'});
var $dialog = $('#dialog-select-member-' + widAttr);
// Init select dialog
if (!$dialog.length) {
$('body').append('<div id="dialog-select-member-' + widAttr + '" style="display: none"></div>');
$('#dialog-select-member-' + widAttr).selectId('init', {
filter: {
common: {
history: isHistory ? {
enabled: true
} : undefined
}
},
texts: {
select: _('Select'),
cancel: _('Cancel'),
all: _('All'),
id: _('ID'),
name: _('Name'),
role: _('Role'),
room: _('Room'),
value: _('Value'),
selectid: _('Select ID'),
enum: _('Members'),
from: _('from'),
lc: _('lc'),
ts: _('ts'),
ack: _('ack'),
expand: _('expand'),
collapse: _('collapse'),
refresh: _('refresh'),
edit: _('edit'),
ok: _('ok'),
wait: _('wait'),
list: _('list'),
tree: _('tree'),
copyToClipboard: _('Copy to clipboard')
},
filterPresets: {role: widgetFilter},
noMultiselect: true,
columns: ['image', 'name', 'type', 'role', 'enum', 'room', 'value'],
imgPath: '/lib/css/fancytree/',
objects: this.objects,
states: this.states,
zindex: 1001
});
} else {
$dialog.selectId('option', 'filterPresets', {role: widgetFilter});
$dialog.selectId('option', 'filter', {
common: {
history: isHistory ? {
enabled: true
} : undefined
}
});
}
}
return line;
},
editWidgetNames: function (widAttr, options) {
// options[0] all views
var widgets = [''];
if (options && options[0] === 'all') {
for (var w in this.widgets) {
widgets.push(w);
}
} else {
for (var w in this.views[this.activeView].widgets) {
widgets.push(w);
}
}
return this.editSelect(widAttr, widgets, true);
},
editSelect: function (widAttr, values, notTranslate, init, onchange) {
if (typeof notTranslate === 'function') {
onchange = init;
init = notTranslate;
notTranslate = false;
}
// Select
var line = {
input: '<select type="text" id="inspect_' + widAttr + '">'
};
if (onchange) line.onchange = onchange;
if (init) line.init = init;
if (values.length && values[0] !== undefined) {
for (var t = 0; t < values.length; t++) {
line.input += '<option value="' + values[t] + '">' + (notTranslate ? values[t] : _(values[t])) + '</option>';
}
} else {
for (var name in values) {
line.input += '<option value="' + values[name] + '">' + name + '</option>';
}
}
line.input += '</select>';
return line;
},
editStyle: function (widAttr, options) {
var that = this;
// options[0] fileFilter
// options[1] nameFilter
// options[2] attrFilter
// Effect selector
return {
input: '<input type="text" id="inspect_' + widAttr + '" class="vis-edit-textbox"/>',
init: function (_wid_attr, data) {
if (that.styleSelect) {
that.styleSelect.show({
width: '100%',
name: 'inspect_' + _wid_attr,
filterFile: options[0],
filterName: options[1],
filterAttrs: options[2],
removeName: options[3],
style: data,
parent: $(this).parent(),
onchange: function (newStyle) {
$('#inspect_' + widAttr).val(newStyle).trigger('change');
}
});
$('#inspect_' + widAttr).hide();
}
}
};
},
editFontName: function (widAttr) {
var that = this;
// Auto-complete
return {
input: '<input type="text" id="inspect_' + widAttr + '" class="vis-edit-textbox"/>',
init: function (_wid_attr, data) {
$(this).autocomplete({
minLength: 0,
source: function (request, response) {
var _data = $.grep(that.fontNames, function (value) {
return value.substring(0, request.term.length).toLowerCase() === request.term.toLowerCase();
});
response(_data);
},
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).trigger('change', ui.item.value);
}
}).focus(function () {
// Show dropdown menu
$(this).autocomplete('search', '');
}).autocomplete('instance')._renderItem = function (ul, item) {
return $('<li>')
.append('<a><span style="font-family: ' + item.label + '">' + item.label + '(En, Рус, Äü)</span></a>')
.appendTo(ul);
};
}
};
},
editHistoryInstance: function (widAttr) {
if (!this.historyInstances) {
for (var id in this.objects) {
if (this.objects[id].type === 'instance' && this.objects[id].common && this.objects[id].common.type === 'storage') {
this.historyInstances = this.historyInstances || [];
id = id.substring('system.adapter.'.length);
if (this.historyInstances.indexOf(id) === -1) this.historyInstances.push(id);
}
}
}
return this.editAutoComplete(widAttr, this.historyInstances);
},
editClass: function (widAttr) {
var that = this;
if (!this.styleClasses) {
this.styleClasses = [];
var classes = vis.styleSelect.collectClasses();
var reg = /^vis-style-/;
for (var c in classes) {
if (reg.test(c) && this.styleClasses.indexOf(c) === -1) this.styleClasses.push(c);
}
classes = null;
}
return this.editAutoComplete(widAttr, this.styleClasses);
},
editAutoComplete: function (widAttr, values) {
// Auto-complete
return {
input: '<input type="text" id="inspect_' + widAttr + '" class="vis-edit-textbox"/>',
init: function (_wid_attr, data) {
$(this).autocomplete({
minLength: 0,
source: function (request, response) {
var _data = $.grep(values, function (value) {
return value.substring(0, request.term.length).toLowerCase() === request.term.toLowerCase();
});
response(_data);
},
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).trigger('change', ui.item.value);
}
}).focus(function () {
// Show dropdown menu
$(this).autocomplete('search', '');
});
}
};
},
_editSetFontColor: function (element) {
try {
var r;
var b;
var g;
var hsp;
var $element = $('#' + element);
var a = $element.css('background-color');
if (a.match(/^rgb/)) {
a = a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
r = a[1];
g = a[2];
b = a[3];
} else {
a = '0x' + a.slice(1).replace(a.length < 5 && /./g, '$&$&');
r = a >> 16;
g = a >> 8 & 255;
b = a & 255;
}
hsp = Math.sqrt(
0.299 * (r * r) +
0.587 * (g * g) +
0.114 * (b * b)
);
if (hsp > 127.5) {
$element.css('color', '#000000');
} else {
$element.css('color', '#FFFFFF');
}
} catch (err) {
}
},
editColor: function (widAttr) {
var that = this;
var line = {
input: '<input type="text" id="inspect_' + widAttr + '"/>',
onchange: function (value) {
$(this).css('background-color', value || '');
that._editSetFontColor('inspect_' + widAttr);
}
};
if ((typeof colorSelect !== 'undefined' && $().farbtastic)) {
line.button = {
icon: 'ui-icon-note',
text: false,
title: _('Select color'),
click: function (/*event*/) {
var wdata = $(this).data('wdata');
var _settings = {
current: $('#inspect_' + wdata.attr).val(),
onselectArg: wdata,
onselect: function (img, _data) {
$('#inspect_' + wdata.attr).val(colorSelect.GetColor()).trigger('change');
}
};
colorSelect.show(_settings);
}
};
}
return line;
},
editViewName: function (widAttr) {
var views = [''];
for (var v in this.views) {
if (!this.views.hasOwnProperty(v) || v === '___settings') continue;
views.push(v);
}
return this.editAutoComplete(widAttr, views);
},
editFilterName: function (widAttr) {
var filters = this.updateFilter();
filters.unshift('');
//return this.editSelect(widAttr, filters, true);
return this.editAutoComplete(widAttr, filters);
},
editEffect: function (widAttr) {
var that = this;
return this.editSelect(widAttr, [
'',
'show',
'blind',
'bounce',
'clip',
'drop',
'explode',
'fade',
'fold',
'highlight',
'puff',
'pulsate',
'scale',
'shake',
'size',
'slide'
], null, function (_widAttr, data) {
if (_widAttr.indexOf('_effect') !== -1) {
var eff = _widAttr.replace('_effect', '_options');
var $elem = $('#inspect_' + eff);
if ($elem.length) {
if (data === 'slide') {
that.hideShowAttr(eff, true);
} else {
that.hideShowAttr(eff, false);
$elem.val('').trigger('change');
}
}
}
});
},
editNumber: function (widAttr, options, onchange) {
// options = {min: ?,max: ?,step: ?}
// Select
var line = {
input: '<input id="inspect_' + widAttr + '" style="width: calc(100% - 2px);"/>',
init: function (w, data) {
var platform = window.navigator.oscpu || window.navigator.platform;
// Do not show spin on MAc OS
if (platform.indexOf('Mac') === -1) {
options = options || {};
options.spin = function () {
var $this = $(this);
var timer = $this.data('timer');
if (timer) clearTimeout(timer);
$this.data('timer', setTimeout(function () {
$this.trigger('change');
},200));
};
$(this).spinner(options);
$(this).parent().css({width: 'calc(100% - 2px)'});
} else {
$(this).parent().css({width: 'calc(100% - 8px)'});
}
// Allow only numbers
$(this).on('keypress', function(e) {
var code = e.keyCode || e.charCode;
return (code >= 48 && code <= 57) || (code === 110);
});
}
};
if (onchange) line.onchange = onchange;
return line;
},
editButton: function (widAttr, options, onchange) {
// options = {min: ?,max: ?,step: ?}
// Select
var line = {
input: '<button id="inspect_' + widAttr + '">' + widAttr + '</button>',
init: function (w, data) {
$(this).button().click(function () {
$(this).val(true).trigger('change');
});
}
};
if (onchange) line.onchange = onchange;
return line;
},
editUrl: function (widAttr, filter) {
var line = {
input: '<input type="text" id="inspect_' + widAttr + '"/>'
};
var that = this;
if ($.fm) {
line.button = {
icon: 'ui-icon-note',
text: false,
title: _('Select image'),
click: function (/*event*/) {
var wdata = $(this).data('wdata');
var defPath = ('/' + (that.conn.namespace ? that.conn.namespace + '/' : '') + that.projectPrefix + 'img/');
var current = that.widgets[wdata.widgets[0]].data[wdata.attr];
//workaround, that some widgets calling direct the img/picure.png without /vis/
if (current && current.substring(0, 4) === 'img/') {
current = '/vis/' + current;
}
$.fm({
lang: that.language,
defaultPath: defPath,
path: current || defPath,
uploadDir: '/' + (that.conn.namespace ? that.conn.namespace + '/' : ''),
fileFilter: filter || ['gif', 'png', 'bmp', 'jpg', 'jpeg', 'tif', 'svg'],
folderFilter: false,
mode: 'open',
view: 'prev',
userArg: wdata,
conn: that.conn,
zindex: 1001
}, function (_data, userData) {
var src = _data.path + _data.file;
$('#inspect_' + wdata.attr).val(src).trigger('change');
});
}
};
}
return line;
},
editCustom: function (widAttr, options) {
if (!options) {
console.log('No path to custom function');
} else {
var funcs = options[0].split('.');
options.unshift();
if (funcs[0] === 'vis') funcs.unshift();
if (funcs[0] === 'binds') funcs.unshift();
if (funcs.length === 1) {
if (typeof this.binds[funcs[0]] === 'function') {
return this.binds[funcs[0]](widAttr, options);
} else {
console.log('No function: vis.binds.' + funcs.join('.'));
}
} else if (funcs.length === 2) {
if (this.binds[funcs[0]] && typeof this.binds[funcs[0]][funcs[1]] === 'function') {
return this.binds[funcs[0]][funcs[1]](widAttr, options);
} else {
console.log('No function: vis.binds.' + funcs.join('.'));
}
} else if (funcs.length === 3) {
if (this.binds[funcs[0]] && this.binds[funcs[0]][funcs[1]] && typeof this.binds[funcs[0]][funcs[1]][funcs[2]] === 'function') {
return this.binds[funcs[0]][funcs[1]][funcs[2]](widAttr, options);
} else {
console.log('No function: vis.binds.' + funcs.join('.'));
}
} else {
if (!funcs.length) {
console.log('Function name is too short: vis.binds');
} else {
console.log('Function name is too long: vis.binds.' + funcs.join('.'));
}
}
return {};
}
},
editSlider: function (widAttr, options) {
options.min = (!options.min) ? 0 : options.min;
options.max = (!options.max) ? 0 : options.max;
options.step = (!options.step) ? (options.max - options.min) / 100 : options.step;
return {
input: '<table width="100%"><tr><td style="width:50px"><input style="width:50px" id="inspect_' + widAttr + '"/></td><td width="100%"><div id="inspect_' + widAttr + '_slider"></div></td></tr>',
init: function (w, data) {
options.value = (data === undefined) ? options.min : data;
var input = this;
options.slide = function (event, ui) {
$(input).val(ui.value).trigger('change');
};
$('#inspect_' + widAttr + '_slider').slider(options);
},
onchange: function (value) {
$('#inspect_' + widAttr + '_slider').slider('value', (value === undefined) ? options.min : value);
}
};
},
editEnableAbsolute: function () {
var val = $('#inspect_css_position').val();
if (val === 'relative' || val === 'static' || val === 'sticky') {
// disable
$('#inspect_css_left').val('').prop('disabled', true);
$('#inspect_css_top').val('').prop('disabled', true);
$('#inspect_css_display').prop('disabled', false);
} else {
// enable
$('#inspect_css_left').prop('disabled', false);
$('#inspect_css_top').prop('disabled', false);
$('#inspect_css_display').val('').prop('disabled', true);
}
},
editCssCommon: function (viewDiv, view) {
var that = this;
var group = 'css_common';
this.groups[group] = this.groups[group] || {};
this.groups[group].css_position = this.editSelect('css_position', ['', /*'absolute', 'fixed',*/ 'relative', /*'static', */'sticky'], true, function () {
$(this).data('old-value', $(this).val());
}, function () {
var val = $('#inspect_css_position').val();
var oldVal = $(this).data('old-value');
if (val === 'relative' || val === 'static' || val === 'sticky') {
if (oldVal !== 'relative' && oldVal !== 'static' && oldVal !== 'sticky') {
$(this).data('old-value', val);
// disable
$('#inspect_css_display').prop('disabled', false);
$('#inspect_css_left').val('').prop('disabled', true).trigger('change');
$('#inspect_css_top').val('').prop('disabled', true).trigger('change');
setTimeout(function () {
for (var r = 0; r < that.activeWidgets.length; r++) {
that.reRenderWidgetEdit(viewDiv, view, that.activeWidgets[r]);
}
} , 100);
}
} else {
if (oldVal === 'relative' || oldVal === 'static' || oldVal === 'sticky') {
$(this).data('old-value', val);
// enable
$('#inspect_css_left').prop('disabled', false).val('0px').trigger('change');
$('#inspect_css_top').prop('disabled', false).val('0px').trigger('change');
$('#inspect_css_display').prop('disabled', true);
setTimeout(function () {
for (var r = 0; r < that.activeWidgets.length; r++) {
that.reRenderWidgetEdit(viewDiv, view, that.activeWidgets[r]);
}
} , 100);
}
}
});
this.groups[group].css_display = this.editSelect('css_display', ['', /*'inline', 'block', */'inline-block'/*, 'flex', 'list-item', 'run-in'*/], true, this.editEnableAbsolute);
this.groups[group].css_left = {input: '<input class="vis-edit-textbox-with-button" type="text" id="inspect_css_left"/><button class="vis-edit-percent-calc" data-attr="left"></button>', init: this.editEnableAbsolute};
this.groups[group].css_top = {input: '<input class="vis-edit-textbox-with-button" type="text" id="inspect_css_top"/><button class="vis-edit-percent-calc" data-attr="top"></button>', init: this.editEnableAbsolute};
this.groups[group].css_width = {input: '<input class="vis-edit-textbox-with-button" type="text" id="inspect_css_width"/><button class="vis-edit-percent-calc" data-attr="width"></button>'};
this.groups[group].css_height = {input: '<input class="vis-edit-textbox-with-button" type="text" id="inspect_css_height"/><button class="vis-edit-percent-calc" data-attr="height"></button>'};
this.groups[group]['css_z-index'] = this.editNumber('css_z-index');
this.groups[group]['css_overflow-x'] = this.editSelect('css_overflow-x', ['', 'visible', 'hidden', 'scroll', 'auto', 'initial', 'inherit'], true);
this.groups[group]['css_overflow-y'] = this.editSelect('css_overflow-y', ['', 'visible', 'hidden', 'scroll', 'auto', 'initial', 'inherit'], true);
this.groups[group].css_opacity = {input: '<input type="text" id="inspect_css_opacity"/>'};
this.groups[group].css_cursor = this.editAutoComplete('css_cursor', ['', 'pointer', 'auto', 'alias', 'all-scroll', 'cell', 'context-menu', 'col-resize', 'copy', 'crosshair', 'default', 'e-resize', 'ew-resize', 'grab', 'grabbing', 'help', 'move', 'n-resize', 'ne-resize', 'nesw-resize', 'ns-resize', 'nw-resize', 'nwse-resize', 'no-drop', 'none', 'not-allowed', 'progress', 'row-resize', 's-resize', 'se-resize', 'sw-resize', 'text', 'vertical-text', 'w-resize', 'wait', 'zoom-in', 'zoom-out', 'initial', 'inherit']);
this.groups[group].css_transform = {input: '<input type="text" id="inspect_css_transform"/>'};
for (var attr in this.groups[group]) {
if (!this.groups[group].hasOwnProperty(attr)) continue;
this.groups[group][attr].css = true;
this.groups[group][attr].attrName = attr;
this.groups[group][attr].attrIndex = '';
}
},
editCssFontText: function () {
var group = 'css_font_text';
this.groups[group] = this.groups[group] || {};
this.groups[group].css_color = this.editColor('css_color');
this.groups[group]['css_text-align'] = this.editSelect('css_text-align', ['', 'left', 'right', 'center' ,'justify', 'initial', 'inherit'], true);
this.groups[group]['css_text-shadow'] = {input: '<input type="text" id="inspect_css_text-shadow"/>'};
this.groups[group]['css_font-family'] = this.editFontName('css_font-family');
this.groups[group]['css_font-style'] = this.editSelect('css_font-style', ['', 'normal', 'italic', 'oblique', 'initial', 'inherit'], true);
this.groups[group]['css_font-variant'] = this.editSelect('css_font-variant', ['', 'normal', 'small-caps', 'initial', 'inherit'], true);
this.groups[group]['css_font-weight'] = this.editAutoComplete('css_font-weight', ['', 'normal', 'bold', 'bolder', 'lighter', 'initial', 'inherit']);
this.groups[group]['css_font-size'] = this.editAutoComplete('css_font-size', ['', 'medium', 'xx-small', 'x-small', 'small', 'large', 'x-large', 'xx-large', 'smaller', 'larger', 'initial', 'inherit']);
this.groups[group]['css_line-height'] = {input: '<input type="text" id="inspect_css_line-height"/>'};
this.groups[group]['css_letter-spacing'] = {input: '<input type="text" id="inspect_css_letter-spacing"/>'};
this.groups[group]['css_word-spacing'] = {input: '<input type="text" id="inspect_css_word-spacing"/>'};
for(var attr in this.groups[group]) {
this.groups[group][attr].css = true;
this.groups[group][attr].attrName = attr;
this.groups[group][attr].attrIndex = '';
}
},
editCssBackground: function () {
var group = 'css_background';
this.groups[group] = this.groups[group] || {};
this.groups[group].css_background = {input: '<input type="text" id="inspect_css_background" class="vis-edit-textbox vis-inspect-widget"/>'};
this.groups[group]['css_background-color'] = this.editColor('css_background-color');
this.groups[group]['css_background-image'] = {input: '<input type="text" id="inspect_background-image" class="vis-edit-textbox vis-inspect-widget"/>'};
this.groups[group]['css_background-repeat'] = this.editSelect('css_background-repeat', ['', 'repeat', 'repeat-x', 'repeat-y', 'no-repeat', 'initial', 'inherit'], true);
this.groups[group]['css_background-attachment'] = this.editSelect('css_background-attachment', ['', 'scroll', 'fixed', 'local', 'initial', 'inherit'], true);
this.groups[group]['css_background-position'] = {input: '<input type="text" id="inspect_background-position" class="vis-edit-textbox vis-inspect-widget"/>'};
this.groups[group]['css_background-size'] = {input: '<input type="text" id="inspect_background-size" class="vis-edit-textbox vis-inspect-widget"/>'};
this.groups[group]['css_background-clip'] = this.editSelect('css_background-clip', ['', 'border-box', 'padding-box', 'content-box', 'initial', 'inherit'], true);
this.groups[group]['css_background-origin'] = this.editSelect('css_background-origin', ['', 'padding-box', 'border-box', 'content-box', 'initial', 'inherit'], true);
for(var attr in this.groups[group]) {
this.groups[group][attr].css = true;
this.groups[group][attr].attrName = attr;
this.groups[group][attr].attrIndex = '';
}
},
editDimensionOnChangeHelper: function (elem, value) {
if (value && typeof value !== 'object') {
var e = value.substring(value.length - 2);
if (e !== 'px' && e !== 'em' && value[value.length - 1] !== '%') {
var wdata = $(elem).data('wdata');
for (var t = 0; t < wdata.widgets.length; t++) {
this.views[wdata.view].widgets[wdata.widgets[t]].style[wdata.attr.substring(4)] = value + 'px';
$('#' + wdata.widgets[t]).css(wdata.attr.substring(4), value + 'px');
}
}
}
},
editCssBorder: function () {
var group = 'css_border';
var that = this;
this.groups[group] = this.groups[group] || {};
this.groups[group]['css_border-width'] = {
input: '<input type="text" id="inspect_css_border-width"/>',
onchange: function (value) {
that.editDimensionOnChangeHelper(this, value);
}
};
this.groups[group]['css_border-style'] = this.editAutoComplete('css_border-style', ['', 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial', 'inherit']);
this.groups[group]['css_border-color'] = this.editColor('css_border-color');
this.groups[group]['css_border-radius'] = {
input: '<input type="text" id="inspect_css_border-radius"/>',
onchange: function (value) {
that.editDimensionOnChangeHelper(this, value);
}
};
for(var attr in this.groups[group]) {
if (!this.groups[group].hasOwnProperty(attr)) continue;
this.groups[group][attr].css = true;
this.groups[group][attr].attrName = attr;
this.groups[group][attr].attrIndex = '';
}
},
editCssShadowPadding: function () {
var group = 'css_shadow_padding';
this.groups[group] = this.groups[group] || {};
this.groups[group].css_padding = {input: '<input type="text" id="inspect_css_padding"/>'};
this.groups[group]['css_padding-left'] = {input: '<input type="text" id="inspect_css_padding-left"/>'};
this.groups[group]['css_padding-top'] = {input: '<input type="text" id="inspect_css_padding-top"/>'};
this.groups[group]['css_padding-right'] = {input: '<input type="text" id="inspect_css_padding-right"/>'};
this.groups[group]['css_padding-bottom'] = {input: '<input type="text" id="inspect_css_padding-bottom"/>'};
this.groups[group]['css_box-shadow'] = {input: '<input type="text" id="inspect_css_box-shadow"/>'};
this.groups[group]['css_margin-left'] = {input: '<input type="text" id="inspect_css_margin-left"/>'};
this.groups[group]['css_margin-top'] = {input: '<input type="text" id="inspect_css_margin-top"/>'};
this.groups[group]['css_margin-right'] = {input: '<input type="text" id="inspect_css_margin-right"/>'};
this.groups[group]['css_margin-bottom'] = {input: '<input type="text" id="inspect_css_margin-bottom"/>'};
for(var attr in this.groups[group]) {
this.groups[group][attr].css = true;
this.groups[group][attr].attrName = attr;
this.groups[group][attr].attrIndex = '';
}
},
editCssAnimation: function () {
var group = 'css_animation';
this.groups[group] = this.groups[group] || {};
this.groups[group]['css_animation-name'] = {input: '<input type="text" id="inspect_css_animation-name"/>'};
this.groups[group]['css_animation-duration'] = {input: '<input type="text" id="inspect_css_animation-duration"/>'};
for(var attr in this.groups[group]) {
this.groups[group][attr].css = true;
this.groups[group][attr].attrName = attr;
this.groups[group][attr].attrIndex = '';
}
},
editSignalIcons: function () {
var group = 'signals';
this.groups[group] = this.groups[group] || {};
var i = 0;
for (var i = 0; i < 3; i++) {
// oid
this.addToInspect(this.activeWidgets, {name: 'signals-oid-' + i, type: 'id'}, group);
// condition
this.addToInspect(this.activeWidgets, {name: 'signals-cond-' + i, type: 'select', options: ['==', '!=', '<=', '>=', '<', '>', 'consist', 'not consist', 'exist', 'not exist'], default: '=='}, group);
// value
this.addToInspect(this.activeWidgets, {name: 'signals-val-' + i, default: true}, group);
// icon path
this.addToInspect(this.activeWidgets, {name: 'signals-icon-' + i, type: 'image', default: '/vis/signals/lowbattery.png'}, group);
// icon size in px
this.addToInspect(this.activeWidgets, {name: 'signals-icon-size-' + i, type: 'slider', options: {min: 1, max: 120, step: 1}, default: 0}, group);
// icon style
this.addToInspect(this.activeWidgets, {name: 'signals-icon-style-' + i}, group);
// icon text
this.addToInspect(this.activeWidgets, {name: 'signals-text-' + i}, group);
// text style
this.addToInspect(this.activeWidgets, {name: 'signals-text-style-' + i}, group);
// text class
this.addToInspect(this.activeWidgets, {name: 'signals-text-class-' + i}, group);
// blink
this.addToInspect(this.activeWidgets, {name: 'signals-blink-' + i, type: 'checkbox', default: false}, group);
// icon position vertical
this.addToInspect(this.activeWidgets, {name: 'signals-horz-' + i, type: 'slider', options: {min: -20, max: 120, step: 1}, default: 0}, group);
// icon position horizontal
this.addToInspect(this.activeWidgets, {name: 'signals-vert-' + i, type: 'slider', options: {min: -20, max: 120, step: 1}, default: 0}, group);
// icon hide by edit
this.addToInspect(this.activeWidgets, {name: 'signals-hide-edit-' + i, type: 'checkbox', default: false}, group);
if (i < 2) this.addToInspect('delimiterInGroup', group);
}
},
editLastChange: function () {
var group = 'last_change';
this.groups[group] = this.groups[group] || {};
// oid
this.addToInspect(this.activeWidgets, {name: 'lc-oid', type: 'id'}, group);
// type (or timestamp)
this.addToInspect(this.activeWidgets, {name: 'lc-type', type: 'select', options: ['last-change', 'timestamp'], default: 'last-change'}, group);
// is interval
this.addToInspect(this.activeWidgets, {name: 'lc-is-interval', type: 'checkbox', default: true}, group);
// is moment.js
this.addToInspect(this.activeWidgets, {name: 'lc-is-moment', type: 'checkbox', default: false}, group);
// format
this.addToInspect(this.activeWidgets, {name: 'lc-format', type: 'auto', options: ['YYYY.MM.DD hh:mm:ss','DD.MM.YYYY hh:mm:ss','YYYY.MM.DD','DD.MM.YYYY','YYYY/MM/DD hh:mm:ss','YYYY/MM/DD','hh:mm:ss'], default: ''}, group);
// position vertical
this.addToInspect(this.activeWidgets, {name: 'lc-position-vert', type: 'select', options: ['top', 'middle', 'bottom'], default: 'top'}, group);
// position horizontal
this.addToInspect(this.activeWidgets, {name: 'lc-position-horz', type: 'select', options: ['left', /*'middle', */'right'], default: 'right'}, group);
// offset vertical
this.addToInspect(this.activeWidgets, {name: 'lc-offset-vert', type: 'slider', options: {min: -120, max: 120, step: 1}, default: 0}, group);
// offset horizontal
this.addToInspect(this.activeWidgets, {name: 'lc-offset-horz', type: 'slider', options: {min: -120, max: 120, step: 1}, default: 0}, group);
this.addToInspect('delimiterInGroup', group);
// font-size
this.addToInspect(this.activeWidgets, {name: 'lc-font-size', type: 'auto', options: ['', 'medium', 'xx-small', 'x-small', 'small', 'large', 'x-large', 'xx-large', 'smaller', 'larger', 'initial', 'inherit'], default: '12px'}, group);
// font-family
this.addToInspect(this.activeWidgets, {name: 'lc-font-family', type: 'fontname', default: ''}, group);
// font-style
this.addToInspect(this.activeWidgets, {name: 'lc-font-style', type: 'auto', options: ['', 'normal', 'italic', 'oblique', 'initial', 'inherit'], default: ''}, group);
// background-color
this.addToInspect(this.activeWidgets, {name: 'lc-bkg-color', type: 'color', default: ''}, group);
// color
this.addToInspect(this.activeWidgets, {name: 'lc-color', type: 'color', default: ''}, group);
// border-width
this.addToInspect(this.activeWidgets, {name: 'lc-border-width', default: '0'}, group);
// border-style
this.addToInspect(this.activeWidgets, {name: 'lc-border-style', type: 'auto', options: ['', 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial', 'inherit'], default: ''}, group);
// border-color
this.addToInspect(this.activeWidgets, {name: 'lc-border-color', type: 'color', default: ''}, group);
// border-radius
this.addToInspect(this.activeWidgets, {name: 'lc-border-radius', type: 'slider', options: {min: 0, max: 20, step: 1}, default: 10}, group);
// padding
this.addToInspect(this.activeWidgets, {name: 'lc-padding'}, group);
// z-index
this.addToInspect(this.activeWidgets, {name: 'lc-zindex', type: 'slider', options: {min: -10, max: 20, step: 1}, default: 0}, group);
},
editGestures: function (view) {
var group = 'gestures';
this.groups[group] = this.groups[group] || {};
var gesturesAnalog = ['swiping', 'rotating', 'pinching'];
var gestures = ['swipeRight', 'swipeLeft', 'swipeUp', 'swipeDown', 'rotateLeft', 'rotateRight', 'pinchIn', 'pinchOut'];
this.addToInspect(this.activeWidgets, {name: 'gestures-indicator', type: 'auto', options: this.getWidgetIds(view, 'tplValueGesture')}, group);
this.addToInspect(this.activeWidgets, {name: 'gestures-offsetX', default: 0, type: 'number'}, group);
this.addToInspect(this.activeWidgets, {name: 'gestures-offsetY', default: 0, type: 'number'}, group);
this.addToInspect('delimiterInGroup', group);
var j;
var gesture;
for (j = 0; j < gesturesAnalog.length; j++) {
gesture = gesturesAnalog[j];
this.addToInspect(this.activeWidgets, {name: 'gestures-' + gesture + '-oid', type: 'id'}, group);
this.addToInspect(this.activeWidgets, {name: 'gestures-' + gesture + '-value', default: ''}, group);
this.addToInspect(this.activeWidgets, {name: 'gestures-' + gesture + '-minimum', type: 'number'}, group);
this.addToInspect(this.activeWidgets, {name: 'gestures-' + gesture + '-maximum', type: 'number'}, group);
this.addToInspect(this.activeWidgets, {name: 'gestures-' + gesture + '-delta', type: 'number'}, group);
this.addToInspect('delimiterInGroup', group);
}
for (j = 0; j < gestures.length; j++) {
gesture = gest