iobroker.vis
Version:
Graphical user interface for iobroker.
411 lines (367 loc) • 18 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 extensions
/* jshint browser:true */
/* global _ */
/* global $ */
/* global jQuery */
/* global console */
/* global systemDictionary */
/* global vis:true */
/* jshint -W097 */// jshint strict:false
'use strict';
// Add words for bars
$.extend(systemDictionary, {
"Select" : {"en" : "Select", "de": "Auswählen", "ru": "Выбрать"},
"Cancel" : {"en" : "Cancel", "de": "Abbrechen", "ru": "Отмена"},
"None" : {"en": "None", "de": "Vorgegeben", "ru": "---"},
"Default" : {"en": "Default", "de": "Vorgegeben", "ru": "По умолчанию"},
"Name" : {"en" : "Name", "de": "Name", "ru": "Имя"},
"Location" : {"en" : "Location", "de": "Raum", "ru": "Комната"},
"Interface" : {"en" : "Interface", "de": "Schnittstelle", "ru": "Интерфейс"},
"Type" : {"en" : "Type", "de": "Typ", "ru": "Тип"},
"Address" : {"en" : "Address", "de": "Adresse", "ru": "Адрес"},
"Function" : {"en" : "Function", "de": "Gewerk", "ru": "Функционал"},
"Disable device filter:" : {
"en": "Disable device filter:",
"de": "Schalte Gerätefilter aus:",
"ru": "Убрать фильтр по устройствам:"
},
"Rooms" : {"en" : "Rooms", "de": "Räume", "ru": "Комнаты"},
"Functions" : {"en" : "Functions", "de": "Gewerke", "ru": "Функции"},
"Selected image: " : {"en" : "Selected file: ","de": "Ausgewählte Datei: ","ru": "Выбраный файл: "},
"Programs" : {"en" : "Programs", "de": "Programme", "ru": "Программы"},
"Variables" : {"en" : "Variables", "de": "Variablen", "ru": "Переменные"},
"Devices" : {"en" : "Devices", "de": "Geräte", "ru": "Устройства"}
});
vis.styleSelect = {
// local variables
_internalList: null,
// Functions
collectClasses: function () {
var result = [];
var sSheetList = document.styleSheets;
for (var sSheet = 0; sSheet < sSheetList.length; sSheet++) {
if (!document.styleSheets[sSheet]) continue;
try {
var ruleList = document.styleSheets[sSheet].cssRules;
if (ruleList) {
for (var rule = 0; rule < ruleList.length; rule ++) {
if (!ruleList[rule].selectorText) continue;
var _styles = ruleList[rule].selectorText.split(',');
for (var s = 0; s < _styles.length; s++) {
var substyles = _styles[s].trim().split(' ');
var _style = substyles[substyles.length - 1].replace('::before', '').replace('::after', '').replace(':before', '').replace(':after', '');
if (!_style || _style[0] !== '.' || _style.indexOf(':') !== -1) continue;
var name = _style;
name = name.replace(',', '');
name = name.replace(/^\./, '');
var val = name;
name = name.replace(/^hq-background-/, '');
name = name.replace(/^hq-/, '');
name = name.replace(/^ui-/, '');
name = name.replace(/[-_]/g, ' ');
if (name.length > 0) {
name = name[0].toUpperCase() + name.substring(1);
var fff = document.styleSheets[sSheet].href;
if (fff && fff.indexOf('/') !== -1) {
fff = fff.substring(fff.lastIndexOf('/') + 1);
}
if (!result[val]) {
if (substyles.length > 1) {
result[val] = {name: name, file: fff, attrs: ruleList[rule].style, parentClass: substyles[0].replace('.', '')};
} else {
result[val] = {name: name, file: fff, attrs: ruleList[rule].style};
}
}
}
}
}
}
} catch (e) {
console.error(e);
}
}
return result;
},
show: function (options) {
// Fill the list of styles
if (!this._internalList) this._internalList = vis.styleSelect.collectClasses();
options.filterName = options.filterName || '';
options.filterAttrs = options.filterAttrs || '';
options.filterFile = options.filterFile || '';
var styles = {};
if (options.styles) {
styles = $.extend(styles, options.styles);
} else {
// IF filter defined
if (options.filterFile || options.filterName) {
var filters = (options.filterName) ? options.filterName.split(' ') : null;
var attrs = (options.filterAttrs) ? options.filterAttrs.split(' ') : null;
var files = (options.filterFile) ? options.filterFile.split(' ') : [''];
for (var style in this._internalList) {
if (!this._internalList.hasOwnProperty(style)) continue;
for (var f = 0; f < files.length; f++) {
if (!options.filterFile ||
(this._internalList[style].file && this._internalList[style].file.indexOf(files[f]) !== -1)) {
var isFound = !filters;
if (!isFound) {
for (var k = 0; k < filters.length; k++) {
if (style.indexOf(filters[k]) !== -1) {
isFound = true;
break;
}
}
}
if (isFound) {
isFound = !attrs;
if (!isFound) {
for (var u = 0; u < attrs.length; u++) {
var t = this._internalList[style].attrs[attrs[u]];
if (t || t === 0) {
isFound = true;
break;
}
}
}
}
if (isFound) {
var n = this._internalList[style].name;
if (options.removeName) {
n = n.replace(options.removeName, '');
n = n[0].toUpperCase() + n.substring(1).toLowerCase();
}
styles[style] = {
name: n,
file: this._internalList[style].file,
parentClass: this._internalList[style].parentClass
};
}
}
}
}
} else {
styles = $.extend(styles, this._internalList);
}
}
var text = '';
//noinspection JSJQueryEfficiency
if (!$('#' + options.name + '_styles').length) {
text = '<select id="' + options.name + '_styles"><option value="">' + _('nothing') + '</option>';
for (var style_ in styles) {
if (styles.hasOwnProperty(style_)) {
text += '<option ' + ((options.style === style_) ? 'selected' : '') + ' value="' + style_ + '" data-parent-style="' + styles[style_].parentClass + '">' + styles[style_].name + '</option>\n';
}
}
text += '</select>';
}
if (!$.fn.iconselectmenu) {
$.widget('custom.iconselectmenu', $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $('<li>', {text: item.label});
var styles = ul.data('styles');
if (item.disabled) {
li.addClass('ui-state-disabled');
}
$('<span>', {
style: 'padding: 0px; margin; 0px; z-index: auto; display: inline-block; margin-right: 10px; position: relative; width: 50px; height: 20px;',
'class': 'ui-corner-all ' + item.value
}).prependTo(li);
li.css('font-size', '16px');
if (styles[item.value] && styles[item.value].parentClass) li.addClass(styles[item.value].parentClass);
return li.appendTo( ul );
}
});
}
$('#' + options.name).hide().after(text);
var $styles = $('#' + options.name + '_styles');
$styles.iconselectmenu({
width: '100%',
style: 'dropdown',
change: function (event, ui) {
if (options.onchange) options.onchange(ui.item.value);
var $text = $('#' + options.name + '_styles-button').find('.ui-selectmenu-text');
$('<span>', {
style: 'padding: 0px; margin; 0px; z-index: auto; display: inline-block; margin-right: 10px; position: relative; width: 50px; height: 20px;',
'class': 'ui-corner-all vis-current-style ' + ui.item.value
}).prependTo($text);
$text.css('font-size', '16px');
if (styles[ui.item.value] && styles[ui.item.value].parentClass) {
$text.parent().addClass(styles[ui.item.value].parentClass);
}
}
}).iconselectmenu('menuWidget').data('styles', styles).addClass('selectmenu-overflow');
$('#' + options.name + '_styles-menu').addClass('custom-vis-menu');
var $curStyle = $('#' + options.name + '_styles-button .vis-current-style');
if ($curStyle.length) {
$curStyle.remove();
$styles.val(options.style)
.iconselectmenu('refresh');
}
var $text = $('#' + options.name + '_styles-button').find('.ui-selectmenu-text');
$('<span>', {
style: 'padding: 0px; margin; 0px; z-index: auto; display: inline-block; margin-right: 10px; position: relative; width: 50px; height: 20px;',
'class': 'ui-corner-all vis-current-style ' + options.style
}).prependTo($text);
$text.css('font-size', '16px');
if (styles[options.style] && styles[options.style].parentClass) {
$text.parent().addClass(styles[options.style].parentClass);
}
}
};
// Color selection Dialog
var colorSelect = {
// possible settings
settings: {
onselect: null,
onselectArg: null,
result: '',
current: null, // current value
parent: $('body'),
elemName: 'idialog_',
zindex: 5050
},
_selectText: '',
_cancelText: '',
_titleText: '',
show: function (options) {
if (!this._selectText) {
this._selectText = _('Select');
this._cancelText = _('Cancel');
this._titleText = _('Select color');
}
if (!options.elemName) {
options.elemName = 'idialog_';
}
if (!options.parent) {
options.parent = $('body');
}
if (document.getElementById(options.elemName) !== undefined) {
$('#' + options.elemName).remove();
}
options.parent.append('<div class="dialog" id="colorSelect" title="' + this._titleText + '" style="text-align: center;"><div style="display: inline-block;" id="colorpicker"></div><input type="text" id="colortext"/></div>');
var htmlElem = document.getElementById("colorSelect");
htmlElem.settings = {};
htmlElem.settings = $.extend(htmlElem.settings, this.settings);
htmlElem.settings = $.extend(htmlElem.settings, options);
$(htmlElem).css({'z-index': htmlElem.settings.zindex});
// Define dialog buttons
var dialog_buttons = {};
dialog_buttons[this._selectText] = function () {
$(this).dialog('close');
if (this.settings.onselect)
this.settings.onselect ($('#colortext').val(), this.settings.onselectArg);
$(this).remove();
};
dialog_buttons[this._cancelText] = function () {
$(this).dialog('close');
$(this).remove();
};
$('#colorSelect').dialog({
resizable: false,
height: 385,
width: 340,
modal: true,
buttons: dialog_buttons
});
$('div[aria-describedby="colorSelect"]').css({'z-index': htmlElem.settings.zindex});
if (htmlElem.settings.current || htmlElem.settings.current === 0) {
$('#colortext').val(htmlElem.settings.current);
} else {
$('#colortext').val('#FFFFFF');
}
if ($().farbtastic) {
$('#colorpicker').farbtastic('#colortext');
}
},
GetColor: function () {
return $('#colortext').val();
}
};
// Create multiselect if no default widget loaded
if (!$().multiselect) {
(function ($, undefined) {
$.widget('dash.multiselect', {
// default options
options: {
multiple: true
},
// the constructor
_create: function () {
if (!this.options.multiple) {
return;
}
var elem = this.element.hide();
var div = '<table class="ui-widget-content">';
div += '</table>';
this.table = $(div);
this.table.insertAfter(elem);
this._build();
},
_build: function () {
this.table.empty();
var div = "";
this.element.find("option").each(function () {
div += '<tr class="ui-widget-content"><td><input type="checkbox" ' + ($(this).is(':selected') ? 'checked' : '') + ' data-value="' + $(this).attr('value') + '">' + $(this).html() + '</td>';
console.log($(this).attr('value'));
});
this.table.html(div);
var that = this;
this.table.find('input').each(function () {
this._parent = that;
$(this).on('click', function () {
var val = $(this).attr('data-value');
var checked = $(this).is(':checked');
// change state on the original option tags
this._parent.element.find('option').each(function () {
if(this.value === val) {
$(this).prop('selected', checked);
}
});
this._parent.element.trigger('change');
});
});
},
_init: function () {
if (!this.options.multiple) {
return;
}
this._build();
},
refresh: function () {
if (!this.options.multiple) {
return;
}
this._build();
},
// events bound via _on are removed automatically
// revert other modifications here
_destroy: function () {
if (!this.options.multiple) {
return;
}
this.table.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
},
_update: function () {
if (!this.options.multiple) {
return;
}
this.refresh(false);
}
});
})(jQuery);
}