410 lines
16 KiB
JavaScript
410 lines
16 KiB
JavaScript
/**
|
|
* yunkong2.vis
|
|
* https://github.com/yunkong2/yunkong2.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 yunkong2.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", "cn": "选定"},
|
|
"Cancel" : {"en" : "Cancel", "cn": "取消"},
|
|
"None" : {"en": "None", "cn": "None"},
|
|
"Default" : {"en": "Default", "cn": "缺省"},
|
|
"Name" : {"en" : "Name", "cn": "名称"},
|
|
"Location" : {"en" : "Location", "cn": "位置"},
|
|
"Interface" : {"en" : "Interface", "cn": "界面"},
|
|
"Type" : {"en" : "Type", "cn": "类型"},
|
|
"Address" : {"en" : "Address", "cn": "地址"},
|
|
"Function" : {"en" : "Function", "cn": "功能"},
|
|
"Disable device filter:" : {
|
|
"en": "Disable device filter:"
|
|
},
|
|
"Rooms" : {"en" : "Rooms", "cn": "场景"},
|
|
"Functions" : {"en" : "Functions", "cn": "功能"},
|
|
"Selected image: " : {"en" : "Selected file: ","cn": "图像: "},
|
|
"Programs" : {"en" : "Programs", "cn": "程序"},
|
|
"Variables" : {"en" : "Variables", "cn": "参数"},
|
|
"Devices" : {"en" : "Devices", "cn": "设备"}
|
|
});
|
|
|
|
|
|
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);
|
|
} |