iobroker.vis
Version:
Graphical user interface for iobroker.
1,152 lines (1,057 loc) • 300 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 vis Editor
/* jshint browser:true */
/* global document */
/* global console */
/* global session */
/* global window */
/* global location */
/* global setTimeout */
/* global clearTimeout */
/* global systemLang:true */
/* 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
'use strict';
vis = $.extend(true, vis, {
$copyWidgetSelectView: null,
undoHistoryMaxLength: 50,
$selectView: null,
$selectActiveWidgets: null,
activeWidgets: [],
oldActiveWidgets: [],
isStealCss: false,
gridWidth: undefined,
clipboard: null,
undoHistory: [],
selectable: true,
groupsState: {'fixed': true, 'common': true},
// Array with all objects (Descriptions of objects)
objects: {},
config: {},
objectSelector: false, // if object select ID activated
alignIndex: 0,
alignType: '',
widgetAccordeon: false,
saveRemoteActive: 0,
editIcons: {
filter: 'vis-preview-filter',
ctrl: 'vis-preview-control',
control: 'vis-preview-control',
navigation: 'vis-preview-navigation',
nav: 'vis-preview-navigation',
timestamp: 'vis-preview-timestamp',
dialog: 'vis-preview-dialog',
static: 'vis-preview-static',
val: 'vis-preview-val',
value: 'vis-preview-val',
container: 'vis-preview-container',
rgb: 'vis-preview-rgb',
stateful: 'vis-preview-stateful',
table: 'vis-preview-table',
tools: 'vis-preview-tools',
bar: 'vis-preview-bar',
temperature: 'vis-preview-temperature',
window: 'vis-preview-window',
shutter: 'vis-preview-shutter',
door: 'vis-preview-door',
lamp: 'vis-preview-lamp',
checkbox: 'vis-preview-checkbox', // boolean value with control
dimmer: 'vis-preview-dimmer',
state: 'vis-preview-state', // boolean value
lock: 'vis-preview-lock'
},
removeUnusedFields: function () {
var regExp = /^gestures-/;
for (var view in this.views) {
if (!this.views.hasOwnProperty(view) || view === '___settings') continue;
for (var id in this.views[view].widgets) {
if (!this.views[view].widgets.hasOwnProperty(id)) continue;
// Check all attributes
var data = this.views[view].widgets[id].data;
for (var attr in data) {
if (!data.hasOwnProperty(attr)) continue;
if ((data[attr] === '' || data[attr] === null) && regExp.test(attr)) {
delete data[attr];
}
}
}
}
},
saveRemote: function (mode, callback) {
// remove all unused fields
this.removeUnusedFields();
if (typeof mode === 'function') {
callback = mode;
mode = null;
}
if (typeof app !== 'undefined') {
console.warn('Do not allow save of views from Cordova!');
if (typeof callback === 'function') callback();
return;
}
var that = this;
if (this.permissionDenied) {
if (this.showHint) this.showHint(_('Cannot save file "%s": ', that.projectPrefix + 'vis-views.json') + _('permissionError'),
5000, 'ui-state-error');
if (typeof callback === 'function') callback();
return;
}
if (this.saveRemoteActive % 10) {
this.saveRemoteActive--;
setTimeout(function () {
that.saveRemote(mode, callback);
}, 1000);
} else {
if (!this.saveRemoteActive) this.saveRemoteActive = 30;
if (this.saveRemoteActive === 10) {
console.log('possible no connection');
this.saveRemoteActive = 0;
return;
}
// Sync widget before it will be saved
if (this.activeWidgets) {
for (var t = 0; t < this.activeWidgets.length; t++) {
if (this.activeWidgets[t].indexOf('_') !== -1 && this.syncWidgets) {
this.syncWidgets(this.activeWidgets);
break;
}
}
}
// sort view names
var keys = [];
var k;
for (k in this.views) {
if (!this.views.hasOwnProperty(k)) continue;
if (k === '___settings') continue;
keys.push(k);
}
// case insensitive sorting
keys.sort(function (a, b) {
return a.toLowerCase().localeCompare(b.toLowerCase());
});
var views = {};
views.___settings = this.views.___settings;
for (k = 0; k < keys.length; k++) {
views[keys[k]] = this.views[keys[k]];
}
this.views = views;
// replace all bounded variables with initial values
var viewsToSave = JSON.parse(JSON.stringify(this.views));
for (var b in this.bindings) {
if (!this.bindings.hasOwnProperty(b)) continue;
for (var h = 0; h < this.bindings[b].length; h++) {
try {
if (this.bindings[b][h].systemOid && this.bindings[b][h].systemOid.match(/^dev\d+$/)) {
// if widget still exists
if (viewsToSave[this.bindings[b][h].view].widgets[this.bindings[b][h].widget]) {
viewsToSave[this.bindings[b][h].view].widgets[this.bindings[b][h].widget][this.bindings[b][h].type][this.bindings[b][h].attr] = this.bindings[b][h].format;
}
}
} catch (e) {
console.warn('error by saving of binding: ' + this.bindings[b][h].view)
}
}
}
viewsToSave = JSON.stringify(viewsToSave, null, 2);
if (this.lastSave === viewsToSave) {
if (typeof callback === 'function') callback(null);
return;
}
this.conn.writeFile(this.projectPrefix + 'vis-views.json', viewsToSave, mode, function (err) {
if (err) {
if (err === 'permissionError') {
that.permissionDenied = true;
}
that.showMessage(_('Cannot save file "%s": ', that.projectPrefix + 'vis-views.json') + _(err), _('Error'), 'alert', 430);
} else {
that.lastSave = viewsToSave;
}
that.saveRemoteActive = 0;
if (typeof callback === 'function') callback(err);
// If not yet checked => check if project css file exists
if (!that.cssChecked) {
that.conn.readFile(that.projectPrefix + 'vis-user.css', function (_err, data) {
that.cssChecked = true;
// Create vis-user.css file if not exist
if (err !== 'permissionError' && (_err || data === null || data === undefined)) {
// Create empty css file
that.conn.writeFile(that.projectPrefix + 'vis-user.css', '', function (___err) {
if (___err) {
that.showMessage(_('Cannot create file %s: ', 'vis-user.css') + _(___err), _('Error'), 'alert');
}
});
}
});
}
});
}
},
editShowHideViewBackground: function (view, isInit) {
if (!this.views[view].settings) {
this.views[view].settings = {};
}
if (this.groupsState['view-css-background']) {
var $back = $('#inspect_view_css_background');
if ($('#inspect_view_css_only_background').prop('checked')) {
this.views[view].settings.useBackground = true;
var that = this;
$back.parent().parent().show();
$('.vis-inspect-view-css').each(function () {
var attr = $(this).attr('id').slice(17);
if (attr.match(/^background-/)) {
$(this).parent().parent().hide();
if (that.views[view].settings.style) {
delete that.views[view].settings.style[attr];
}
}
});
if (!isInit) {
$back.val($('#visview_' + view).css('background'));
}
} else {
this.views[view].settings.useBackground = false;
$back.parent().parent().hide();
var $view;
if (!isInit) {
$view = $('#visview_' + view);
}
$('.vis-inspect-view-css').each(function () {
var attr = $(this).attr('id').slice(17);
if (attr.match(/^background-/)) {
$(this).parent().parent().show();
if (!isInit) {
$(this).val($view.css(attr));
}
}
});
if (this.views[view].settings.style) {
delete this.views[view].settings.style.background;
}
}
}
},
editInit: function () {
var that = this;
// Create debug variables
this.states.attr({'dev1.val': 0});
this.states.attr({'dev2.val': 0});
this.states.attr({'dev3.val': 0});
this.states.attr({'dev4.val': 0});
this.states.attr({'dev6.val': 'string'});
this.editLoadConfig();
// create settings view if not exists
if (this.views && !this.views.___settings) {
this.views.___settings = {
reloadOnSleep: 30, // seconds
reconnectInterval: 10000, // milliseconds
darkReloadScreen: false,
destroyViewsAfter: 30 // seconds
};
}
this.$selectView = $('#select_view');
this.$copyWidgetSelectView = $('#rib_wid_copy_view');
this.$selectActiveWidgets = $('#select_active_widget');
this.editInitDialogs();
this.editInitMenu();
this.editInitCSSEditor();
this.editInitScriptEditor();
var $panAttr = $('#pan_attr');
$panAttr.tabs({
//activate: function(event, ui) {
// // Find out index
// //var i = 0;
// //$(this).find('a').each(function () {
// // if ($(this).attr('href') === ui.newPanel.selector) {
// // return false;
// // }
// // i++;
// //});
// //that.editSaveConfig('tabs/pan_attr', i);
//}
}).resizable({
handles: 'w',
maxWidth: 670,
minWidth: 100,
resize: function () {
$(this).css('left', 'auto');
}
});
var $panAddWidget = $('#pan_add_wid');
$panAddWidget.resizable({
handles: 'e',
maxWidth: 570,
minWidth: 190,
resize: function () {
$('#filter_set').clearSearch('update');
}
});
if (this.config['size/pan_add_wid']) $panAddWidget.width(this.config['size/pan_add_wid']);
if (this.config['size/pan_attr']) $panAttr.width(this.config['size/pan_attr']);
$(window).resize(layout);
function layout() {
$('#panel_body').height(parseInt($(window).height() - $('#menu_body').height() - 3));
var panWidth = $('#pan_add_wid').width();
$('#vis_wrap').width(parseInt($(window).width() - panWidth - $panAttr.width() - 1));
that.editSaveConfig('size/pan_add_wid', panWidth);
that.editSaveConfig('size/pan_attr', $panAttr.width());
if (that.css_editor) that.css_editor.resize();
}
layout();
$('#vis-version').html(this.version);
if (typeof visConfig !== 'undefined' && visConfig.license === false) {
$('#vis-version').addClass('vis-license-error').attr('title', _('License error! Please check logs for details.'));
}
$('#button_undo').button({
icons: {primary: 'ui-icon ui-icon-arrowreturnthick-1-w'},
text: false
})
.css({height: 28})
.click(function () {
that.undo();
})
.addClass('ui-state-disabled').attr('title', _('Undo'))
.hover(
function () {
$(this).addClass('ui-state-hover');
},
function () {
$(this).removeClass('ui-state-hover');
});
$('.widget-helper').remove();
$('input.vis-editor').button();
$('button.vis-editor').button();
$('select.vis-editor').each(function () {
$(this).multiselect({
multiple: false,
classes: $(this).attr('id'),
header: false,
selectedList: 1,
minWidth: $(this).attr('data-multiselect-width'),
height: $(this).attr('data-multiselect-height'),
checkAllText: _('Check all'),
uncheckAllText: _('Uncheck all'),
noneSelectedText: _('Select options')
});
});
$('select.vis-editor-large').each(function () {
$(this).multiselect({
multiple: false,
header: false,
//noneSelectedText: false,
selectedList: 1,
minWidth: 250,
height: 410,
checkAllText: _('Check all'),
uncheckAllText: _('Uncheck all'),
noneSelectedText: _('Select options')
});
});
$('select.vis-editor-xlarge').each(function () {
$(this).multiselect({
multiple: false,
header: false,
// noneSelectedText: false,
selectedList: 1,
minWidth: 420,
height: 340,
checkAllText: _('Check all'),
uncheckAllText: _('Uncheck all'),
noneSelectedText: _('Select options')
});
});
this.$selectActiveWidgets.multiselect({
classes: this.$selectActiveWidgets.attr('id'),
header: true,
selectedList: 2,
minWidth: this.$selectActiveWidgets.attr('data-multiselect-width'),
height: this.$selectActiveWidgets.attr('data-multiselect-height'),
checkAllText: _('Check all'),
uncheckAllText: _('Uncheck all'),
noneSelectedText: _('none selected')
}).change(function () {
var widgets = [];
$(this).multiselect('getChecked').each(function () {
widgets.push(this.value);
});
for (var i = that.activeWidgets.length - 1; i >= 0; i--) {
var pos = widgets.indexOf(that.activeWidgets[i]);
if (pos === -1) that.activeWidgets.splice(i, 1);
}
for (var j = 0; j < widgets.length; j++) {
if (that.activeWidgets.indexOf(widgets[j]) === -1) {
that.activeWidgets.push(widgets[j]);
that.actionHighlightWidget(widgets[j]);
}
}
that.inspectWidgets(that.activeViewDiv, that.activeView);
});
// Button Click Handler
$('#export_view').click(function () {
that.exportView(that.activeViewDiv, that.activeView, false);
});
$('#export_widgets').click(function () {
that.exportWidgets();
});
$('#import_widgets').click(function () {
that.importWidgets();
});
if (this.conn.getType() === 'local') {
// @SJ cannot select menu and dialogs if it is enabled
//$('#wid_all_lock_function').trigger('click');
$('#ribbon_tab_datei').show();
}
$('#start_import_view').button();
$('#start_import_widgets').button();
$('#name_import_view').keyup(function (e) {
if (e.which === 13 && $(this).val()) {
$('#start_import_view').trigger('click');
}
$(this).trigger('change');
}).change(function () {
if ($(this).val()) {
$('#start_import_view').button('enable');
} else {
$('#start_import_view').button('disable');
}
});
$('#import_view').click(function () {
$('#textarea_import_view').val('');
if ($('#name_import_view').val()) {
$('#start_import_view').button('enable');
} else {
$('#start_import_view').button('disable');
}
$('#dialog_import_view').dialog({
autoOpen: true,
width: 800,
height: 600,
modal: true,
open: function (event, ui) {
$(event.target).parent().find('.ui-dialog-titlebar-close .ui-button-text').html('');
$('[aria-describedby="dialog_import_view"]').css('z-index', 1002);
$('.ui-widget-overlay').css('z-index', 1001);
$('#start_import_view').unbind('click').click(function () {
that.importView();
$('#dialog_import_view').dialog('close');
});
$('#name_import_view').show();
}
});
});
$('#create_instance').button({icons: {primary: 'ui-icon-plus'}}).click(this.generateInstance);
$('#vis_access_mode').change(function () {
that.conn.chmodProject(that.projectPrefix, $(this).prop('checked') ? 0x644 : 0x600, function (err, files) {
if (err) {
that.showError(err);
var $mode = $('#vis_access_mode');
$mode.prop('checked', !$mode.prop('checked')).prop('disabled');
}
});
});
this.initStealHandlers();
$('#inspect_view_css_only_background').change(function () {
that.editShowHideViewBackground(that.activeView);
that.save();
});
$('.vis-inspect-view-css').change(function () {
var $this = $(this);
var attr = $this.attr('id').slice(17);
var val = $this.val();
var $view = $('#visview_' + that.activeViewDiv);
$view.css(attr, val);
if (!that.views[that.activeView].settings.style) {
that.views[that.activeView].settings.style = {};
}
that.views[that.activeView].settings.style[attr] = val;
that.save();
}).keyup(function () {
$(this).trigger('change');
}).each(function () {
var options = $(this).data('options');
if (options) {
var values = options.split(';');
$(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', '');
});
}
});
$('.vis-inspect-view').change(function () {
var $this = $(this);
var attr = $this.attr('id').slice(13);
that.views[that.activeView].settings[attr] = $this.val();
that.save();
}).keyup(function () {
$(this).trigger('change');
});
$('#screen_size').selectmenu({
change: function () {
var val = $(this).val();
if (!val) {
$('#screen_size_x').prop('disabled', true).val('').trigger('change');
$('#screen_size_y').prop('disabled', true).val('').trigger('change');
$('.vis-screen-default').prop('disabled', true).prop('checked', false);
$('.rib_tool_resolution_toggle').button('disable');
} else if (val === 'user') {
$('#screen_size_x').prop('disabled', false);
$('#screen_size_y').prop('disabled', false);
$('.vis-screen-default').prop('disabled', false);
$('.rib_tool_resolution_toggle').button('enable');
$('#rib_tools_resolution_fix').toggle();
$('#rib_tools_resolution_manuel').toggle();
} else {
var size = val.split('x');
$('.rib_tool_resolution_toggle').button('enable');
$('.vis-screen-default').prop('disabled', false);
$('#screen_size_x').val(size[0]).trigger('change').prop('disabled', true);
$('#screen_size_y').val(size[1]).trigger('change').prop('disabled', true);
}
},
width: '100%'
});
$('#screen_size-menu').css({'max-height': '400px'});
$('#screen_size_x').change(function () {
var x = $('#screen_size_x').val();
var y = $('#screen_size_y').val();
var $sizeX = $('#size_x');
if (x <= 0) {
$sizeX.hide();
} else {
$sizeX.css('left', (parseInt(x, 10) + 1) + 'px').show();
$('#size_y').css('width', (parseInt(x, 10) + 3) + 'px');
if (y > 0) {
$sizeX.css('height', (parseInt(y, 10) + 3) + 'px');
}
}
if (that.views[that.activeView].settings.sizex != x) {
that.views[that.activeView].settings.sizex = x;
that.setViewSize(that.activeView);
that.save();
}
}).keyup(function () {
$(this).trigger('change');
}).keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode === 65 && ( e.ctrlKey === true || e.metaKey === true ) ) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
$('.vis-screen-default').change(function () {
if (that.views[that.activeView].settings.useAsDefault != $(this).prop('checked')) {
that.views[that.activeView].settings.useAsDefault = $(this).prop('checked');
$('.vis-screen-default').prop('checked', $(this).prop('checked'));
that.save();
}
});
$('.vis-screen-render-always').change(function () {
if (that.views[that.activeView].settings.alwaysRender != $(this).prop('checked')) {
that.views[that.activeView].settings.alwaysRender = $(this).prop('checked');
$('.vis-screen-render-always').prop('checked', $(this).prop('checked'));
that.save();
}
});
$('#screen_size_y').change(function () {
var x = $('#screen_size_x').val();
var y = $('#screen_size_y').val();
var $sizeY = $('#size_y');
if (y > 0) {
$sizeY.css('top', (parseInt(y, 10) + 1) + 'px').show();
$('#size_x').css('height', (parseInt(y, 10) + 3) + 'px');
if (x > 0) {
$sizeY.css('width', (parseInt(x, 10) + 3) + 'px');
}
} else {
$sizeY.hide();
}
if (that.views[that.activeView].settings.sizey != y) {
that.views[that.activeView].settings.sizey = y;
that.setViewSize(that.activeView);
that.save();
}
}).keyup(function () {
$(this).trigger('change');
}).keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
$('#grid_size').change(function () {
var gridSize = $(this).val();
if (that.views[that.activeView].settings.gridSize != gridSize) {
var aw = JSON.stringify(that.activeWidgets);
that.views[that.activeView].settings.gridSize = gridSize;
that.save(that.activeViewDiv, that.activeView);
that.inspectWidgets(that.activeViewDiv, that.activeView, []);
that.editSetGrid(that.activeViewDiv, that.activeView);
setTimeout(function () {
that.inspectWidgets(that.activeViewDiv, that.activeView, JSON.parse(aw));
}, 200);
}
}).keyup(function () {
$(this).trigger('change');
});
$('#snap_type').selectmenu({
change: function () {
var aw = JSON.stringify(that.activeWidgets);
that.views[that.activeView].settings.snapType = parseInt($(this).val(), 10);
var $gridSize = $('#grid_size');
$gridSize.prop('disabled', that.views[that.activeView].settings.snapType !== 2);
if (that.views[that.activeView].settings.snapType === 2 && !$gridSize.val()) $gridSize.val(10).trigger('change');
that.editSetGrid(that.activeViewDiv, that.activeView);
that.save(that.activeViewDiv, that.activeView);
that.inspectWidgets(that.activeViewDiv, that.activeView, []);
setTimeout(function () {
that.inspectWidgets(that.activeViewDiv, that.activeView, JSON.parse(aw));
}, 200);
},
width: '100%'
});
$('#dev_show_html').button({}).click(function () {
var text = '';
for (var i = 0; i < that.activeWidgets.length; i++) {
var widID = $('#' + that.activeWidgets[i]).attr('id');
var xid = (new Date()).valueOf().toString(32);
var $target = $('#' + widID);
var $clone = $target.clone();
$clone.wrap('<div>');
var html = $clone.parent().html();
html = html
.replace(/id="[-_\w\d]+"/, '')
.replace(/data-[\w+]="[-_\w\d]+"/, '')
.replace('vis-widget ', 'vis-widget_prev ')
.replace('vis-widget-body', 'vis-widget-prev-body')
.replace('vis-widget-lock', ' ')
.replace('ui-selectee', ' ')
.replace('ui-draggable-handle', ' ')
.replace('ui-draggable', ' ')
.replace('ui-resizable', ' ')
.replace('<div class="editmode-helper"></div>', '')
//.replace(/(id=")[A-Za-z0-9\[\]._]+"/g, '')
.replace(/w([0-9]){5}/g, xid)
.replace(/(?:\r\n|\r|\n)/g, '')
.replace(/\t/g, ' ')
.replace(/[ ]{2,}/g, ' ');
html = html
.replace('<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>', '')
.replace('<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>', '')
.replace('<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>', '')
.replace('<div></div>', '');
html = '<div id="prev_' + that.views[that.activeView].widgets[widID].tpl + '" style="position: relative; text-align: initial; padding: 4px ">' + html.toString() + '</div>';
text += html;
}
$('body').append('<div id="dec_html_code"><textarea style="width: 100%; height: 100%">data-vis-prev=\'' + text + '\'</textarea></div>');
$('#dec_html_code').dialog({
width: 800,
height: 600,
open: function (event) {
$(event.target).parent().find('.ui-dialog-titlebar-close .ui-button-text').html('');
$(this).parent().css({'z-index': 1001});
},
close: function () {
$('#dec_html_code').remove();
}
});
});
$('#btn_accordeon').
button({icons: {primary: 'ui-icon-grip-dotted-horizontal', secondary: null}, text: false}).
css({width: 18, height: 18}).
click(function () {
that.widgetAccordeon = !that.widgetAccordeon;
that.editUpdateAccordeon();
});
if (this.config.widgetAccordeon) {
this.widgetAccordeon = true;
this.editUpdateAccordeon();
}
// Bug in firefox or firefox is too slow or too fast
/*setTimeout(function() {
if (document.getElementById('select_active_widget')._isOpen === undefined) {
$('#select_active_widget').html('<option value="none">' + _('none selected') + '</option>');
if (this.activeView && this.views && this.views[this.activeView] && this.views[this.activeView].widgets) {
for (var widget in this.views[this.activeView].widgets) {
var obj = $('#' + this.views[this.activeView].widgets[widget].tpl);
$('#select_active_widget').append('<option value="' + widget + '">' + this.getWidgetName(this.activeView, widget) + </option>");
}
}
$('#select_active_widget').multiselect('refresh');
}
}, 10000);*/
// Instances (Actually not used)
/*if (typeof storage !== 'undefined' && local === false) {
// Show what's new
if (storage.get('lastVersion') !== this.version) {
// Read
storage.set('lastVersion', this.version);
// Read io-addon.json
$.ajax({
url: 'io-addon.json',
cache: false,
success: function (data) {
try {
var ioaddon = data;
if (ioaddon.whatsNew) {
for (var i = 0; i < ioaddon.whatsNew.length; i++) {
var text = ioaddon.whatsNew[i];
if (typeof text !== 'string') {
text = ioaddon.whatsNew[i][that.language] || ioaddon.whatsNew[i]['en'];
}
// Remove modifier information like (Bluefox) or (Hobbyquaker)
if (text[0] === '(') {
var j = text.indexOf(')');
if (j !== -1) {
text = text.substring(j + 1);
}
}
that.showHint('<b>' + _('New:') + '</b>' + text, 30000, 'info');
}
}
} catch (e) {
that.conn.logError('Cannot parse io-addon.json ' + e);
}
}
});
}
}*/
if (this.config.groupsState) this.groupsState = this.config.groupsState;
},
editSetGrid: function (viewDiv, view) {
var grid = parseInt(this.views[view].settings.gridSize, 10);
var $container = $('#vis_container');
if (this.views[view].settings.snapType === 2 && grid > 2) {
var $grid = $container.find('.vis-grid');
if (!$grid.length) {
$container.prepend('<div class="vis-grid"></div>');
$grid = $container.find('.vis-grid');
}
var img;
if (grid <= 6) {
img = 'bg-dots-5.svg';
} else if (grid <= 12) {
img = 'bg-dots-10.svg';
} else if (grid <= 17) {
img = 'bg-dots-15.svg';
} else if (grid <= 25) {
img = 'bg-dots-20.svg';
} else if (grid <= 35) {
img = 'bg-dots-30.svg';
} else if (grid <= 45) {
img = 'bg-dots-40.svg';
} else {
img = 'bg-dots-50.svg';
}
$grid
.addClass('vis-grid')
.css({
'background-size': this.views[view].settings.gridSize + 'px ' + this.views[view].settings.gridSize + 'px',
'background-image': 'url(img/' + img + ')'
});
} else {
$container.find('.vis-grid').remove();
}
},
editShowLeadingLines: function (view, isHide) {
view = view || this.activeView;
if (!this.views[view]) view = this.getViewOfWidget(this.activeWidgets[0]);
var $container = $('#vis_container');
$container.find('.vis-leading-line').remove();
if (isHide) return;
var viewOffset = this.editGetViewOffset(view);
// there are following lines
// horz-top
// horz-bottom
// horz-middle
// vert-left
// vert-right
// vert-center
var line = 0;
var l;
for (var i = 0; i < this.activeWidgets.length; i++) {
var $awid = $('#' + this.activeWidgets[i]);
var aData = $awid.offset();
aData.top -= viewOffset.top;
aData.left -= viewOffset.left;
aData.top = parseInt(aData.top, 10);
aData.bottom = aData.top + parseInt($awid.height(), 10);
aData.middle = (aData.bottom + aData.top) / 2;
aData.left = parseInt(aData.left, 10);
aData.right = aData.left + parseInt($awid.width(), 10);
aData.center = (aData.left + aData.right) / 2;
var lines = {
horz: [],
vert: []
};
var isLeft = false;
var isRight = false;
var isTop = false;
var isBottom = false;
for (var wid in this.views[view].widgets) {
if (this.activeWidgets.indexOf(wid) === -1 && !this.views[view].widgets[wid].grouped) {
var $wid = $('#' + wid);
if (!$wid.length) continue;
var data = $wid.offset();
if (!data) continue;
data.top -= viewOffset.top;
data.left -= viewOffset.left;
isLeft = false;
isRight = false;
isTop = false;
isBottom = false;
data.top = parseInt(data.top, 10);
data.bottom = data.top + parseInt($wid.height(), 10);
data.middle = (data.bottom + data.top) / 2;
data.left = parseInt(data.left, 10);
data.right = data.left + parseInt($wid.width(), 10);
data.center = (data.left + data.right) / 2;
if (aData.left === data.left) {
if (lines.horz.indexOf(aData.left) === -1) lines.horz.push(aData.left);
isLeft = true;
}
if (aData.left === data.right) {
if (lines.horz.indexOf(aData.left) === -1) lines.horz.push(aData.left);
isLeft = true;
}
if (aData.left === data.center) {
if (lines.horz.indexOf(aData.left) === -1) lines.horz.push(aData.left);
isLeft = true;
}
if (aData.right === data.left) {
if (lines.horz.indexOf(aData.right) === -1) lines.horz.push(aData.right);
isRight = true;
}
if (aData.right === data.right) {
if (lines.horz.indexOf(aData.right) === -1) lines.horz.push(aData.right);
isRight = true;
}
if (aData.right === data.center) {
if (lines.horz.indexOf(aData.right) === -1) lines.horz.push(aData.right);
isRight = true;
}
if (!isRight || !isLeft) {
if (aData.center === data.left) {
if (lines.horz.indexOf(aData.center) === -1) lines.horz.push(aData.center);
}
if (aData.center === data.right) {
if (lines.horz.indexOf(aData.center) === -1) lines.horz.push(aData.center);
}
if (aData.center === data.center) {
if (lines.horz.indexOf(aData.center) === -1) lines.horz.push(aData.center);
}
}
if (aData.top === data.top) {
if (lines.vert.indexOf(aData.top) === -1) lines.vert.push(aData.top);
isTop = true;
}
if (aData.top === data.bottom) {
if (lines.vert.indexOf(aData.top) === -1) lines.vert.push(aData.top);
isTop = true;
}
if (aData.top === data.middle) {
if (lines.vert.indexOf(aData.top) === -1) lines.vert.push(aData.top);
isTop = true;
}
if (aData.bottom === data.top) {
if (lines.vert.indexOf(aData.bottom) === -1) lines.vert.push(aData.bottom);
isBottom = true;
}
if (aData.bottom === data.bottom) {
if (lines.vert.indexOf(aData.bottom) === -1) lines.vert.push(aData.bottom);
isBottom = true;
}
if (aData.bottom === data.middle) {
if (lines.vert.indexOf(aData.bottom) === -1) lines.vert.push(aData.bottom);
isBottom = true;
}
if (!isTop || !isBottom) {
if (aData.middle === data.top) {
if (lines.vert.indexOf(aData.middle) === -1) lines.vert.push(aData.middle);
}
if (aData.middle === data.bottom) {
if (lines.vert.indexOf(aData.middle) === -1) lines.vert.push(aData.middle);
}
if (aData.middle === data.middle) {
if (lines.vert.indexOf(aData.middle) === -1) lines.vert.push(aData.middle);
}
}
}
}
for (l = 0; l < lines.horz.length; l++) {
$container.append('<div class="vis-leading-line" style="top: 0; bottom: -' + viewOffset.top + 'px; left: ' + lines.horz[l] + 'px; width: 1px"></div>');
}
for (l = 0; l < lines.vert.length; l++) {
$container.append('<div class="vis-leading-line" style="left: 0; right: -' + viewOffset.left + 'px; top: ' + lines.vert[l] + 'px; height: 1px"></div>');
}
}
},
editUpdateAccordeon: function () {
var that = this;
if (that.widgetAccordeon) {
$('#btn_accordeon').addClass('ui-state-error');
var opened = '';
$('.group-control').each(function () {
var group = $(this).attr('data-group');
if (that.groupsState[group]) {
if (!opened) {
opened = group;
} else {
that.groupsState[group] = false;
$(this).button('option', {
icons: {primary: that.groupsState[group] ? 'ui-icon-triangle-1-n' : 'ui-icon-triangle-1-s'}
});
if (that.groupsState[group]) {
$('.group-' + group).show();
} else {
$('.group-' + group).hide();
}
}
}
that.editSaveConfig('groupsState', that.groupsState);
});
} else {
$('#btn_accordeon').removeClass('ui-state-error');
}
that.editSaveConfig('widgetAccordeon', that.widgetAccordeon);
},
editInitDialogs: function () {
var $pbody = $('#panel_body');
if (typeof fillAbout !== 'undefined') {
$('#dialog_about')
.html(fillAbout())
.dialog({
autoOpen: false,
width: 600,
height: 550,
open: function (event /* , ui*/) {
$(event.target).parent().find('.ui-dialog-titlebar-close .ui-button-text').html('');
$('[aria-describedby="dialog_about"]').css('z-index', 1002);
$('.ui-widget-overlay').css('z-index', 1001);
},
position: {
my: 'center',
at: 'center',
of: $pbody
}
});
}
$('#dialog_shortcuts').dialog({
autoOpen: false,
width: 600,
height: 500,
open: function (event /* , ui*/) {
$(event.target).parent().find('.ui-dialog-titlebar-close .ui-button-text').html('');
$('[aria-describedby="dialog_shortcuts"]').css('z-index', 1002);
$('.ui-widget-overlay').css('z-index', 1001);
},
position: {my: 'center', at: 'center', of: $pbody}
});
},
editFileHandler: function(event) {
event.preventDefault();
var file = event.dataTransfer ? event.dataTransfer.files[0] : event.target.files[0];
var $dz = $('.vis-drop-zone').show();
if (!file || !file.name || !file.name.match(/\.zip$/)) {
$('.vis-drop-text').html(_('Invalid file extenstion!'));
$dz.addClass('vis-dropzone-error').animate({opacity: 0}, 1000, function () {
$dz.hide().removeClass('vis-dropzone-error').css({opacity: 1});
$('.vis-drop-text').html(_('Drop the files here'));
});
return false;
}
if (file.size > 50000000) {
$('.vis-drop-text').html(_('File is too big!'));
$dz.addClass('vis-dropzone-error').animate({opacity: 0}, 1000, function () {
$dz.hide().removeClass('vis-dropzone-error').css({opacity: 1});
$('.vis-drop-text').html(_('Drop the files here'));
});
return false;
}
$dz.hide();
var that = this;
var reader = new FileReader();
reader.onload = function (evt) {
var $name = $('.vis-file-name');
var $project = $('#name_import_project');
$name.html('<img src="img/zip.png" /><br><span style="color: black; font-weight: bold">[' + that.editGetReadableSize(file.size) + ']</span><br><span style="color: black; font-weight: bold">' + file.name + '</span>');
// string has form data:;base64,TEXT==
$name.data('file', evt.target.result.split(',')[1]);
$('.vis-import-text-drop-plus').hide();
// try to extract project name from 2016-05-09-project.zip
var m = file.name.match(/^\d{4}-\d{2}-\d{2}-([\w\d_-]+)\.zip$/);
if (m && !$project.val()) $project.val(m[1]);
$('#start_import_project').prop('disabled', !$name.data('file') || !$project.val());
};
reader.readAsDataURL(file);
},
editFillProjects: function () {
var that = this;
// fill projects
this.conn.readProjects(function (err, projects) {
var text = '';
if (projects.length) {
for (var d = 0; d < projects.length; d++) {
text += '<li class="ui-state-default project-select ' + (projects[d].name + '/' === that.projectPrefix ? 'ui-state-active' : '') +
' menu-item" data-project="' + projects[d].name + '"><a>' + projects[d].name + (projects[d].readOnly ? ' (' + _('readOnly') + ')' : '') + '</a></li>\n';
if (projects[d].name + '/' === that.projectPrefix) {
$('#vis_access_mode').prop('checked', projects[d].mode & 0x60);
}
}
$('#menu_projects').html(text);
$('.project-select').unbind('click').click(function () {
window.location.href = 'edit.html?' + $(this).attr('data-project');
});
} else {
$('#li_menu_projects').hide();
}