jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

added popup to configurator to explain the behaviour

kamadaKawai
Alex de Mulder 9 years ago
parent
0c59f88092
commit
22bc5e0380
6 changed files with 612 additions and 348 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +302
    -263
      dist/vis.css
  2. +128
    -29
      dist/vis.js
  3. +1
    -1
      dist/vis.min.css
  4. +2
    -2
      gulpfile.js
  5. +110
    -23
      lib/shared/Configurator.js
  6. +69
    -30
      lib/shared/configuration.css

+ 302
- 263
dist/vis.css View File

@ -20,6 +20,289 @@
width: auto;
}
div.vis-configuration {
position:relative;
display:block;
float:left;
font-size:12px;
}
div.vis-configuration-wrapper {
display:block;
width:700px;
}
div.vis-configuration.vis-config-option-container{
display:block;
width:495px;
background-color: #ffffff;
border:2px solid #f7f8fa;
border-radius:4px;
margin-top:20px;
left:10px;
padding-left:5px;
}
div.vis-configuration.vis-config-button{
display:block;
width:495px;
height:25px;
vertical-align: middle;
line-height:25px;
background-color: #f7f8fa;
border:2px solid #ceced0;
border-radius:4px;
margin-top:20px;
left:10px;
padding-left:5px;
cursor: pointer;
margin-bottom:30px;
}
div.vis-configuration.vis-config-button.hover{
background-color: #4588e6;
border:2px solid #214373;
color:#ffffff;
}
div.vis-configuration.vis-config-item{
display:block;
float:left;
width:495px;
height:25px;
vertical-align: middle;
line-height:25px;
}
div.vis-configuration.vis-config-item.vis-config-s2{
left:10px;
background-color: #f7f8fa;
padding-left:5px;
border-radius:3px;
}
div.vis-configuration.vis-config-item.vis-config-s3{
left:20px;
background-color: #e4e9f0;
padding-left:5px;
border-radius:3px;
}
div.vis-configuration.vis-config-item.vis-config-s4{
left:30px;
background-color: #cfd8e6;
padding-left:5px;
border-radius:3px;
}
div.vis-configuration.vis-config-header{
font-size:18px;
font-weight: bold;
}
div.vis-configuration.vis-config-label{
width:120px;
height:25px;
line-height: 25px;
}
div.vis-configuration.vis-config-label.vis-config-s3{
width:110px;
}
div.vis-configuration.vis-config-label.vis-config-s4{
width:100px;
}
div.vis-configuration.vis-config-colorBlock{
top:1px;
width:30px;
height:19px;
border:1px solid #444444;
border-radius:2px;
padding:0px;
margin:0px;
cursor:pointer;
}
input.vis-configuration.vis-config-checkbox {
left:-5px;
}
input.vis-configuration.vis-config-rangeinput{
position:relative;
top:-5px;
width:60px;
height:13px;
padding:1px;
margin:0;
pointer-events:none;
}
input.vis-configuration.vis-config-range{
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 0px solid white;
background-color:rgba(0,0,0,0);
/*required for proper track sizing in FF*/
width: 300px;
height:20px;
}
input.vis-configuration.vis-config-range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #dedede; /* Old browsers */
background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* IE10+ */
background: linear-gradient(to bottom, #dedede 0%,#c8c8c8 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
border: 1px solid #999999;
box-shadow: #aaaaaa 0px 0px 3px 0px;
border-radius: 3px;
}
input.vis-configuration.vis-config-range::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #14334b;
height: 17px;
width: 17px;
border-radius: 50%;
background: #3876c2; /* Old browsers */
background: -moz-linear-gradient(top, #3876c2 0%, #385380 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3876c2), color-stop(100%,#385380)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3876c2 0%,#385380 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3876c2 0%,#385380 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3876c2 0%,#385380 100%); /* IE10+ */
background: linear-gradient(to bottom, #3876c2 0%,#385380 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380',GradientType=0 ); /* IE6-9 */
box-shadow: #111927 0px 0px 1px 0px;
margin-top: -7px;
}
input.vis-configuration.vis-config-range:focus {
outline: none;
}
input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track {
background: #9d9d9d; /* Old browsers */
background: -moz-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d9d9d), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* IE10+ */
background: linear-gradient(to bottom, #9d9d9d 0%,#c8c8c8 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
}
input.vis-configuration.vis-config-range::-moz-range-track {
width: 300px;
height: 10px;
background: #dedede; /* Old browsers */
background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* IE10+ */
background: linear-gradient(to bottom, #dedede 0%,#c8c8c8 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
border: 1px solid #999999;
box-shadow: #aaaaaa 0px 0px 3px 0px;
border-radius: 3px;
}
input.vis-configuration.vis-config-range::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #385380;
}
/*hide the outline behind the border*/
input.vis-configuration.vis-config-range:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input.vis-configuration.vis-config-range::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input.vis-configuration.vis-config-range::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input.vis-configuration.vis-config-range::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input.vis-configuration.vis-config-range::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #385380;
}
input.vis-configuration.vis-config-range:focus::-ms-fill-lower {
background: #888;
}
input.vis-configuration.vis-config-range:focus::-ms-fill-upper {
background: #ccc;
}
.vis-configuration-popup {
position: absolute;
background: rgba(57, 76, 89, 0.85);
border: 2px solid #f2faff;
line-height:30px;
height:30px;
width:150px;
text-align:center;
color: #ffffff;
font-size:14px;
border-radius:4px;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.vis-configuration-popup:after, .vis-configuration-popup:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.vis-configuration-popup:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: rgba(57, 76, 89, 0.85);
border-width: 8px;
margin-top: -8px;
}
.vis-configuration-popup:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #f2faff;
border-width: 12px;
margin-top: -12px;
}
.vis-timeline {
position: relative;
@ -754,6 +1037,25 @@ div.network-navigation_wrapper {
height: 100%;
}
*/
div.vis-network-tooltip {
position: absolute;
visibility: hidden;
padding: 5px;
white-space: nowrap;
font-family: verdana;
font-size:14px;
font-color:#000000;
background-color: #f5f4ed;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #808074;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
pointer-events: none;
}
div.vis-network div.vis-navigation div.vis-button {
width:34px;
height:34px;
@ -815,269 +1117,6 @@ div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
bottom:50px;
right:15px;
}
div.vis-network-tooltip {
position: absolute;
visibility: hidden;
padding: 5px;
white-space: nowrap;
font-family: verdana;
font-size:14px;
font-color:#000000;
background-color: #f5f4ed;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #808074;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
pointer-events: none;
}
div.vis-network-configuration {
position:relative;
display:block;
float:left;
font-size:12px;
}
div.vis-network-configuration-wrapper {
display:block;
width:700px;
}
div.vis-network-configuration.vis-option-container{
display:block;
width:495px;
background-color: #ffffff;
border:2px solid #f7f8fa;
border-radius:4px;
margin-top:20px;
left:10px;
padding-left:5px;
}
div.vis-network-configuration.button{
display:block;
width:495px;
height:25px;
vertical-align: middle;
line-height:25px;
background-color: #f7f8fa;
border:2px solid #ceced0;
border-radius:4px;
margin-top:20px;
left:10px;
padding-left:5px;
cursor: pointer;
margin-bottom:30px;
}
div.vis-network-configuration.button.hover{
background-color: #4588e6;
border:2px solid #214373;
color:#ffffff;
}
div.vis-network-configuration.item{
display:block;
float:left;
width:495px;
height:25px;
vertical-align: middle;
line-height:25px;
}
div.vis-network-configuration.item.s2{
left:10px;
background-color: #f7f8fa;
padding-left:5px;
border-radius:3px;
}
div.vis-network-configuration.item.s3{
left:20px;
background-color: #e4e9f0;
padding-left:5px;
border-radius:3px;
}
div.vis-network-configuration.item.s4{
left:30px;
background-color: #cfd8e6;
padding-left:5px;
border-radius:3px;
}
div.vis-network-configuration.header{
font-size:18px;
font-weight: bold;
}
div.vis-network-configuration.label{
width:120px;
height:25px;
line-height: 25px;
}
div.vis-network-configuration.label.s3{
width:110px;
}
div.vis-network-configuration.label.s4{
width:100px;
}
div.vis-network-configuration.colorBlock{
top:1px;
width:30px;
height:19px;
border:1px solid #444444;
border-radius:2px;
padding:0px;
margin:0px;
cursor:pointer;
}
input.vis-network-configuration.checkbox {
left:-5px;
}
input.vis-network-configuration.rangeinput{
position:relative;
top:-5px;
width:60px;
height:13px;
padding:1px;
margin:0;
pointer-events:none;
}
input.vis-network-configuration.range{
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 0px solid white;
background-color:rgba(0,0,0,0);
/*required for proper track sizing in FF*/
width: 300px;
height:20px;
}
input.vis-network-configuration.range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #dedede; /* Old browsers */
background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* IE10+ */
background: linear-gradient(to bottom, #dedede 0%,#c8c8c8 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
border: 1px solid #999999;
box-shadow: #aaaaaa 0px 0px 3px 0px;
border-radius: 3px;
}
input.vis-network-configuration.range::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #14334b;
height: 17px;
width: 17px;
border-radius: 50%;
background: #3876c2; /* Old browsers */
background: -moz-linear-gradient(top, #3876c2 0%, #385380 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3876c2), color-stop(100%,#385380)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3876c2 0%,#385380 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3876c2 0%,#385380 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3876c2 0%,#385380 100%); /* IE10+ */
background: linear-gradient(to bottom, #3876c2 0%,#385380 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380',GradientType=0 ); /* IE6-9 */
box-shadow: #111927 0px 0px 1px 0px;
margin-top: -7px;
}
input.vis-network-configuration.range:focus {
outline: none;
}
input.vis-network-configuration.range:focus::-webkit-slider-runnable-track {
background: #9d9d9d; /* Old browsers */
background: -moz-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d9d9d), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* IE10+ */
background: linear-gradient(to bottom, #9d9d9d 0%,#c8c8c8 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
}
input.vis-network-configuration.range::-moz-range-track {
width: 300px;
height: 10px;
background: #dedede; /* Old browsers */
background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* IE10+ */
background: linear-gradient(to bottom, #dedede 0%,#c8c8c8 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
border: 1px solid #999999;
box-shadow: #aaaaaa 0px 0px 3px 0px;
border-radius: 3px;
}
input.vis-network-configuration.range::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #385380;
}
/*hide the outline behind the border*/
input.vis-network-configuration.range:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input.vis-network-configuration.range::-ms-track {
width: 300px;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input.vis-network-configuration.range::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input.vis-network-configuration.range::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input.vis-network-configuration.range::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #385380;
}
input.vis-network-configuration.range:focus::-ms-fill-lower {
background: #888;
}
input.vis-network-configuration.range:focus::-ms-fill-upper {
background: #ccc;
}
div.vis-color-picker {
position:absolute;

+ 128
- 29
dist/vis.js View File

@ -21419,6 +21419,8 @@ return /******/ (function(modules) { // webpackBootstrap
this.allowCreation = false;
this.options = {};
this.initialized = false;
this.popupCounter = 0;
this.defaultOptions = {
enabled: false,
filter: true,
@ -21430,6 +21432,9 @@ return /******/ (function(modules) { // webpackBootstrap
this.configureOptions = configureOptions;
this.moduleOptions = {};
this.domElements = [];
this.popupDiv = {};
this.popupLimit = 5;
this.popupHistory = {};
this.colorPicker = new _ColorPicker2['default'](pixelRatio);
this.wrapper = undefined;
}
@ -21445,6 +21450,10 @@ return /******/ (function(modules) { // webpackBootstrap
key: 'setOptions',
value: function setOptions(options) {
if (options !== undefined) {
// reset the popup history because the indices may have been changed.
this.popupHistory = {};
this._removePopup();
var enabled = true;
if (typeof options === 'string') {
this.options.filter = options;
@ -21537,20 +21546,20 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.options.showButton === true) {
(function () {
var generateButton = document.createElement('div');
generateButton.className = 'vis-network-configuration button';
generateButton.className = 'vis-configuration vis-config-button';
generateButton.innerHTML = 'generate options';
generateButton.onclick = function () {
_this._printOptions();
};
generateButton.onmouseover = function () {
generateButton.className = 'vis-network-configuration button hover';
generateButton.className = 'vis-configuration vis-config-button hover';
};
generateButton.onmouseout = function () {
generateButton.className = 'vis-network-configuration button';
generateButton.className = 'vis-configuration vis-config-button';
};
_this.optionsContainer = document.createElement('div');
_this.optionsContainer.className = 'vis-network-configuration vis-option-container';
_this.optionsContainer.className = 'vis-configuration vis-config-option-container';
_this.domElements.push(_this.optionsContainer);
_this.domElements.push(generateButton);
@ -21569,11 +21578,13 @@ return /******/ (function(modules) { // webpackBootstrap
key: '_push',
value: function _push() {
this.wrapper = document.createElement('div');
this.wrapper.className = 'vis-network-configuration-wrapper';
this.wrapper.className = 'vis-configuration-wrapper';
this.container.appendChild(this.wrapper);
for (var i = 0; i < this.domElements.length; i++) {
this.wrapper.appendChild(this.domElements[i]);
}
this._showPopupIfNeeded();
}
/**
@ -21592,6 +21603,8 @@ return /******/ (function(modules) { // webpackBootstrap
this.wrapper = undefined;
}
this.domElements = [];
this._removePopup();
}
/**
@ -21630,9 +21643,9 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.allowCreation === true) {
var _len, domElements, _key;
(function () {
var _ret2 = (function () {
var item = document.createElement('div');
item.className = 'vis-network-configuration item s' + path.length;
item.className = 'vis-configuration vis-config-item vis-config-s' + path.length;
for (_len = _arguments.length, domElements = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
domElements[_key - 1] = _arguments[_key];
@ -21642,8 +21655,14 @@ return /******/ (function(modules) { // webpackBootstrap
item.appendChild(element);
});
_this2.domElements.push(item);
return {
v: _this2.domElements.length
};
})();
if (typeof _ret2 === 'object') return _ret2.v;
}
return 0;
}
/**
@ -21655,7 +21674,7 @@ return /******/ (function(modules) { // webpackBootstrap
key: '_makeHeader',
value: function _makeHeader(name) {
var div = document.createElement('div');
div.className = 'vis-network-configuration header';
div.className = 'vis-configuration vis-config-header';
div.innerHTML = name;
this._makeItem([], div);
}
@ -21674,7 +21693,7 @@ return /******/ (function(modules) { // webpackBootstrap
var objectLabel = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
var div = document.createElement('div');
div.className = 'vis-network-configuration label s' + path.length;
div.className = 'vis-configuration vis-config-label vis-config-s' + path.length;
if (objectLabel === true) {
div.innerHTML = '<i><b>' + name + ':</b></i>';
} else {
@ -21694,7 +21713,7 @@ return /******/ (function(modules) { // webpackBootstrap
key: '_makeDropdown',
value: function _makeDropdown(arr, value, path) {
var select = document.createElement('select');
select.className = 'vis-network-configuration select';
select.className = 'vis-configuration vis-config-select';
var selectedValue = 0;
if (value !== undefined) {
if (arr.indexOf(value) !== -1) {
@ -21736,7 +21755,7 @@ return /******/ (function(modules) { // webpackBootstrap
var max = arr[2];
var step = arr[3];
var range = document.createElement('input');
range.className = 'vis-network-configuration range';
range.className = 'vis-configuration vis-config-range';
try {
range.type = 'range'; // not supported on IE9
range.min = min;
@ -21744,14 +21763,25 @@ return /******/ (function(modules) { // webpackBootstrap
} catch (err) {}
range.step = step;
// set up the popup settings in case they are needed.
var popupString = '';
var popupValue = 0;
if (value !== undefined) {
if (value < 0 && value * 2 < min) {
range.min = value * 2;
} else if (value * 0.1 < min) {
range.min = value / 10;
}
if (value * 2 > max && max !== 1) {
range.max = value * 2;
var factor = 1.20;
if (value < 0 && value * factor < min) {
range.min = Math.ceil(value * factor);
popupValue = range.min;
popupString = 'range increased';
} else if (value / factor < min) {
range.min = Math.ceil(value / factor);
popupValue = range.min;
popupString = 'range increased';
}
if (value * factor > max && max !== 1) {
range.max = Math.ceil(value * factor);
popupValue = range.max;
popupString = 'range increased';
}
range.value = value;
} else {
@ -21759,7 +21789,7 @@ return /******/ (function(modules) { // webpackBootstrap
}
var input = document.createElement('input');
input.className = 'vis-network-configuration rangeinput';
input.className = 'vis-configuration vis-config-rangeinput';
input.value = range.value;
var me = this;
@ -21771,7 +21801,76 @@ return /******/ (function(modules) { // webpackBootstrap
};
var label = this._makeLabel(path[path.length - 1], path);
this._makeItem(path, label, range, input);
var itemIndex = this._makeItem(path, label, range, input);
// if a popup is needed AND it has not been shown for this value, show it.
if (popupString !== '' && this.popupHistory[itemIndex] !== popupValue) {
this.popupHistory[itemIndex] = popupValue;
this._setupPopup(popupString, itemIndex);
}
}
/**
* prepare the popup
* @param string
* @param index
* @private
*/
}, {
key: '_setupPopup',
value: function _setupPopup(string, index) {
var _this3 = this;
if (this.initialized === true && this.allowCreation === true && this.popupCounter < 4000) {
var div = document.createElement("div");
div.id = "vis-configuration-popup";
div.className = "vis-configuration-popup";
div.innerHTML = string;
div.onclick = function () {
_this3._removePopup();
};
this.popupCounter += 1;
this.popupDiv = { html: div, index: index };
}
}
/**
* remove the popup from the dom
* @private
*/
}, {
key: '_removePopup',
value: function _removePopup() {
if (this.popupDiv.html !== undefined) {
this.popupDiv.html.parentNode.removeChild(this.popupDiv.html);
clearTimeout(this.popupDiv.hideTimeout);
clearTimeout(this.popupDiv.deleteTimeout);
this.popupDiv = {};
}
}
/**
* Show the popup if it is needed.
* @private
*/
}, {
key: '_showPopupIfNeeded',
value: function _showPopupIfNeeded() {
var _this4 = this;
if (this.popupDiv.html !== undefined) {
var correspondingElement = this.domElements[this.popupDiv.index];
var rect = correspondingElement.getBoundingClientRect();
this.popupDiv.html.style.left = rect.left + "px";
this.popupDiv.html.style.top = rect.top - 30 + "px"; // 30 is the height;
document.body.appendChild(this.popupDiv.html);
this.popupDiv.hideTimeout = setTimeout(function () {
_this4.popupDiv.html.style.opacity = 0;
}, 1500);
this.popupDiv.deleteTimeout = setTimeout(function () {
_this4._removePopup();
}, 1800);
}
}
/**
@ -21786,7 +21885,7 @@ return /******/ (function(modules) { // webpackBootstrap
value: function _makeCheckbox(defaultValue, value, path) {
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.className = 'vis-network-configuration checkbox';
checkbox.className = 'vis-configuration vis-config-checkbox';
checkbox.checked = defaultValue;
if (value !== undefined) {
checkbox.checked = value;
@ -21822,7 +21921,7 @@ return /******/ (function(modules) { // webpackBootstrap
value: function _makeTextInput(defaultValue, value, path) {
var checkbox = document.createElement('input');
checkbox.type = 'text';
checkbox.className = 'vis-network-configuration text';
checkbox.className = 'vis-configuration vis-config-text';
checkbox.value = value;
if (value !== defaultValue) {
this.changedOptions.push({ path: path, value: value });
@ -21847,22 +21946,22 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_makeColorField',
value: function _makeColorField(arr, value, path) {
var _this3 = this;
var _this5 = this;
var defaultColor = arr[1];
var div = document.createElement('div');
value = value === undefined ? defaultColor : value;
if (value !== 'none') {
div.className = 'vis-network-configuration colorBlock';
div.className = 'vis-configuration vis-config-colorBlock';
div.style.backgroundColor = value;
} else {
div.className = 'vis-network-configuration colorBlock none';
div.className = 'vis-configuration vis-config-colorBlock none';
}
value = value === undefined ? defaultColor : value;
div.onclick = function () {
_this3._showColorPicker(value, div, path);
_this5._showColorPicker(value, div, path);
};
var label = this._makeLabel(path[path.length - 1], path);
@ -21880,7 +21979,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_showColorPicker',
value: function _showColorPicker(value, div, path) {
var _this4 = this;
var _this6 = this;
var rect = div.getBoundingClientRect();
var bodyRect = document.body.getBoundingClientRect();
@ -21891,7 +21990,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.colorPicker.setCallback(function (color) {
var colorString = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';
div.style.backgroundColor = colorString;
_this4._update(colorString, path);
_this6._update(colorString, path);
});
}
@ -22017,7 +22116,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.parent.body && this.parent.body.emitter && this.parent.body.emitter.emit) {
this.parent.body.emitter.emit("configChange", options);
}
this.initialized = true;
this.parent.setOptions(options);
}
}, {

+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


+ 2
- 2
gulpfile.js View File

@ -100,6 +100,7 @@ gulp.task('bundle-css', ['clean'], function () {
var files = [
'./lib/shared/activator.css',
'./lib/shared/bootstrap.css',
'./lib/shared/configuration.css',
'./lib/timeline/component/css/timeline.css',
'./lib/timeline/component/css/panel.css',
@ -115,9 +116,8 @@ gulp.task('bundle-css', ['clean'], function () {
'./lib/timeline/component/css/pathStyles.css',
'./lib/network/css/network-manipulation.css',
'./lib/network/css/network-navigation.css',
'./lib/network/css/network-tooltip.css',
'./lib/network/css/network-configuration.css',
'./lib/network/css/network-navigation.css',
'./lib/network/css/network-colorpicker.css'
];

+ 110
- 23
lib/shared/Configurator.js View File

@ -24,6 +24,8 @@ class Configurator {
this.allowCreation = false;
this.options = {};
this.initialized = false;
this.popupCounter = 0;
this.defaultOptions = {
enabled: false,
filter: true,
@ -35,6 +37,9 @@ class Configurator {
this.configureOptions = configureOptions;
this.moduleOptions = {};
this.domElements = [];
this.popupDiv = {};
this.popupLimit = 5;
this.popupHistory = {};
this.colorPicker = new ColorPicker(pixelRatio);
this.wrapper = undefined;
}
@ -48,6 +53,10 @@ class Configurator {
*/
setOptions(options) {
if (options !== undefined) {
// reset the popup history because the indices may have been changed.
this.popupHistory = {};
this._removePopup();
let enabled = true;
if (typeof options === 'string') {
this.options.filter = options;
@ -140,14 +149,14 @@ class Configurator {
if (this.options.showButton === true) {
let generateButton = document.createElement('div');
generateButton.className = 'vis-network-configuration button';
generateButton.className = 'vis-configuration vis-config-button';
generateButton.innerHTML = 'generate options';
generateButton.onclick = () => {this._printOptions();};
generateButton.onmouseover = () => {generateButton.className = 'vis-network-configuration button hover';};
generateButton.onmouseout = () => {generateButton.className = 'vis-network-configuration button';};
generateButton.onmouseover = () => {generateButton.className = 'vis-configuration vis-config-button hover';};
generateButton.onmouseout = () => {generateButton.className = 'vis-configuration vis-config-button';};
this.optionsContainer = document.createElement('div');
this.optionsContainer.className = 'vis-network-configuration vis-option-container';
this.optionsContainer.className = 'vis-configuration vis-config-option-container';
this.domElements.push(this.optionsContainer);
this.domElements.push(generateButton);
@ -164,11 +173,13 @@ class Configurator {
*/
_push() {
this.wrapper = document.createElement('div');
this.wrapper.className = 'vis-network-configuration-wrapper';
this.wrapper.className = 'vis-configuration-wrapper';
this.container.appendChild(this.wrapper);
for (var i = 0; i < this.domElements.length; i++) {
this.wrapper.appendChild(this.domElements[i]);
}
this._showPopupIfNeeded()
}
@ -186,6 +197,8 @@ class Configurator {
this.wrapper = undefined;
}
this.domElements = [];
this._removePopup();
}
@ -219,12 +232,14 @@ class Configurator {
_makeItem(path, ...domElements) {
if (this.allowCreation === true) {
let item = document.createElement('div');
item.className = 'vis-network-configuration item s' + path.length;
item.className = 'vis-configuration vis-config-item vis-config-s' + path.length;
domElements.forEach((element) => {
item.appendChild(element);
});
this.domElements.push(item);
return this.domElements.length;
}
return 0;
}
@ -235,7 +250,7 @@ class Configurator {
*/
_makeHeader(name) {
let div = document.createElement('div');
div.className = 'vis-network-configuration header';
div.className = 'vis-configuration vis-config-header';
div.innerHTML = name;
this._makeItem([],div);
}
@ -251,7 +266,7 @@ class Configurator {
*/
_makeLabel(name, path, objectLabel = false) {
let div = document.createElement('div');
div.className = 'vis-network-configuration label s' + path.length;
div.className = 'vis-configuration vis-config-label vis-config-s' + path.length;
if (objectLabel === true) {
div.innerHTML = '<i><b>' + name + ':</b></i>';
}
@ -271,7 +286,7 @@ class Configurator {
*/
_makeDropdown(arr, value, path) {
let select = document.createElement('select');
select.className = 'vis-network-configuration select';
select.className = 'vis-configuration vis-config-select';
let selectedValue = 0;
if (value !== undefined) {
if (arr.indexOf(value) !== -1) {
@ -310,7 +325,7 @@ class Configurator {
let max = arr[2];
let step = arr[3];
let range = document.createElement('input');
range.className = 'vis-network-configuration range';
range.className = 'vis-configuration vis-config-range';
try {
range.type = 'range'; // not supported on IE9
range.min = min;
@ -319,15 +334,26 @@ class Configurator {
catch (err) {}
range.step = step;
// set up the popup settings in case they are needed.
let popupString = '';
let popupValue = 0;
if (value !== undefined) {
if (value < 0 && value * 2 < min) {
range.min = value*2;
let factor = 1.20;
if (value < 0 && value * factor < min) {
range.min = Math.ceil(value * factor);
popupValue = range.min;
popupString = 'range increased';
}
else if (value * 0.1 < min) {
range.min = value / 10;
else if (value / factor < min) {
range.min = Math.ceil(value / factor);
popupValue = range.min;
popupString = 'range increased';
}
if (value * 2 > max && max !== 1) {
range.max = value * 2;
if (value * factor > max && max !== 1) {
range.max = Math.ceil(value * factor);
popupValue = range.max;
popupString = 'range increased';
}
range.value = value;
}
@ -336,7 +362,7 @@ class Configurator {
}
let input = document.createElement('input');
input.className = 'vis-network-configuration rangeinput';
input.className = 'vis-configuration vis-config-rangeinput';
input.value = range.value;
var me = this;
@ -344,10 +370,70 @@ class Configurator {
range.oninput = function () {input.value = this.value; };
let label = this._makeLabel(path[path.length-1], path);
this._makeItem(path, label, range, input);
let itemIndex = this._makeItem(path, label, range, input);
// if a popup is needed AND it has not been shown for this value, show it.
if (popupString !== '' && this.popupHistory[itemIndex] !== popupValue) {
this.popupHistory[itemIndex] = popupValue;
this._setupPopup(popupString, itemIndex);
}
}
/**
* prepare the popup
* @param string
* @param index
* @private
*/
_setupPopup(string, index) {
if (this.initialized === true && this.allowCreation === true && this.popupCounter < 4000) {
let div = document.createElement("div");
div.id = "vis-configuration-popup";
div.className = "vis-configuration-popup";
div.innerHTML = string;
div.onclick = () => {this._removePopup()};
this.popupCounter += 1;
this.popupDiv = {html:div, index:index};
}
}
/**
* remove the popup from the dom
* @private
*/
_removePopup() {
if (this.popupDiv.html !== undefined) {
this.popupDiv.html.parentNode.removeChild(this.popupDiv.html);
clearTimeout(this.popupDiv.hideTimeout);
clearTimeout(this.popupDiv.deleteTimeout);
this.popupDiv = {};
}
}
/**
* Show the popup if it is needed.
* @private
*/
_showPopupIfNeeded() {
if (this.popupDiv.html !== undefined) {
let correspondingElement = this.domElements[this.popupDiv.index];
let rect = correspondingElement.getBoundingClientRect();
this.popupDiv.html.style.left = rect.left + "px";
this.popupDiv.html.style.top = rect.top - 30 + "px"; // 30 is the height;
document.body.appendChild(this.popupDiv.html)
this.popupDiv.hideTimeout = setTimeout(() => {
this.popupDiv.html.style.opacity = 0;
},1500);
this.popupDiv.deleteTimeout = setTimeout(() => {
this._removePopup();
},1800)
}
}
/**
* make a checkbox for boolean options.
* @param defaultValue
@ -358,7 +444,7 @@ class Configurator {
_makeCheckbox(defaultValue, value, path) {
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.className = 'vis-network-configuration checkbox';
checkbox.className = 'vis-configuration vis-config-checkbox';
checkbox.checked = defaultValue;
if (value !== undefined) {
checkbox.checked = value;
@ -391,7 +477,7 @@ class Configurator {
_makeTextInput(defaultValue, value, path) {
var checkbox = document.createElement('input');
checkbox.type = 'text';
checkbox.className = 'vis-network-configuration text';
checkbox.className = 'vis-configuration vis-config-text';
checkbox.value = value;
if (value !== defaultValue) {
this.changedOptions.push({path:path, value:value});
@ -418,11 +504,11 @@ class Configurator {
value = value === undefined ? defaultColor : value;
if (value !== 'none') {
div.className = 'vis-network-configuration colorBlock';
div.className = 'vis-configuration vis-config-colorBlock';
div.style.backgroundColor = value;
}
else {
div.className = 'vis-network-configuration colorBlock none';
div.className = 'vis-configuration vis-config-colorBlock none';
}
value = value === undefined ? defaultColor : value;
@ -576,7 +662,7 @@ class Configurator {
if (this.parent.body && this.parent.body.emitter && this.parent.body.emitter.emit) {
this.parent.body.emitter.emit("configChange", options);
}
this.initialized = true;
this.parent.setOptions(options);
}
@ -601,6 +687,7 @@ class Configurator {
}
}
return optionsObj;
}
_printOptions() {

lib/network/css/network-configuration.css → lib/shared/configuration.css View File

@ -1,17 +1,17 @@
div.vis-network-configuration {
div.vis-configuration {
position:relative;
display:block;
float:left;
font-size:12px;
}
div.vis-network-configuration-wrapper {
div.vis-configuration-wrapper {
display:block;
width:700px;
}
div.vis-network-configuration.vis-option-container{
div.vis-configuration.vis-config-option-container{
display:block;
width:495px;
background-color: #ffffff;
@ -22,7 +22,7 @@ div.vis-network-configuration.vis-option-container{
padding-left:5px;
}
div.vis-network-configuration.button{
div.vis-configuration.vis-config-button{
display:block;
width:495px;
height:25px;
@ -38,13 +38,13 @@ div.vis-network-configuration.button{
margin-bottom:30px;
}
div.vis-network-configuration.button.hover{
div.vis-configuration.vis-config-button.hover{
background-color: #4588e6;
border:2px solid #214373;
color:#ffffff;
}
div.vis-network-configuration.item{
div.vis-configuration.vis-config-item{
display:block;
float:left;
width:495px;
@ -54,44 +54,44 @@ div.vis-network-configuration.item{
}
div.vis-network-configuration.item.s2{
div.vis-configuration.vis-config-item.vis-config-s2{
left:10px;
background-color: #f7f8fa;
padding-left:5px;
border-radius:3px;
}
div.vis-network-configuration.item.s3{
div.vis-configuration.vis-config-item.vis-config-s3{
left:20px;
background-color: #e4e9f0;
padding-left:5px;
border-radius:3px;
}
div.vis-network-configuration.item.s4{
div.vis-configuration.vis-config-item.vis-config-s4{
left:30px;
background-color: #cfd8e6;
padding-left:5px;
border-radius:3px;
}
div.vis-network-configuration.header{
div.vis-configuration.vis-config-header{
font-size:18px;
font-weight: bold;
}
div.vis-network-configuration.label{
div.vis-configuration.vis-config-label{
width:120px;
height:25px;
line-height: 25px;
}
div.vis-network-configuration.label.s3{
div.vis-configuration.vis-config-label.vis-config-s3{
width:110px;
}
div.vis-network-configuration.label.s4{
div.vis-configuration.vis-config-label.vis-config-s4{
width:100px;
}
div.vis-network-configuration.colorBlock{
div.vis-configuration.vis-config-colorBlock{
top:1px;
width:30px;
height:19px;
@ -102,12 +102,12 @@ div.vis-network-configuration.colorBlock{
cursor:pointer;
}
input.vis-network-configuration.checkbox {
input.vis-configuration.vis-config-checkbox {
left:-5px;
}
input.vis-network-configuration.rangeinput{
input.vis-configuration.vis-config-rangeinput{
position:relative;
top:-5px;
width:60px;
@ -117,7 +117,7 @@ input.vis-network-configuration.rangeinput{
pointer-events:none;
}
input.vis-network-configuration.range{
input.vis-configuration.vis-config-range{
/*removes default webkit styles*/
-webkit-appearance: none;
@ -129,7 +129,7 @@ input.vis-network-configuration.range{
width: 300px;
height:20px;
}
input.vis-network-configuration.range::-webkit-slider-runnable-track {
input.vis-configuration.vis-config-range::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #dedede; /* Old browsers */
@ -145,7 +145,7 @@ input.vis-network-configuration.range::-webkit-slider-runnable-track {
box-shadow: #aaaaaa 0px 0px 3px 0px;
border-radius: 3px;
}
input.vis-network-configuration.range::-webkit-slider-thumb {
input.vis-configuration.vis-config-range::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #14334b;
height: 17px;
@ -162,10 +162,10 @@ input.vis-network-configuration.range::-webkit-slider-thumb {
box-shadow: #111927 0px 0px 1px 0px;
margin-top: -7px;
}
input.vis-network-configuration.range:focus {
input.vis-configuration.vis-config-range:focus {
outline: none;
}
input.vis-network-configuration.range:focus::-webkit-slider-runnable-track {
input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track {
background: #9d9d9d; /* Old browsers */
background: -moz-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d9d9d), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
@ -176,7 +176,7 @@ input.vis-network-configuration.range:focus::-webkit-slider-runnable-track {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
}
input.vis-network-configuration.range::-moz-range-track {
input.vis-configuration.vis-config-range::-moz-range-track {
width: 300px;
height: 10px;
background: #dedede; /* Old browsers */
@ -192,7 +192,7 @@ input.vis-network-configuration.range::-moz-range-track {
box-shadow: #aaaaaa 0px 0px 3px 0px;
border-radius: 3px;
}
input.vis-network-configuration.range::-moz-range-thumb {
input.vis-configuration.vis-config-range::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
@ -202,12 +202,12 @@ input.vis-network-configuration.range::-moz-range-thumb {
}
/*hide the outline behind the border*/
input.vis-network-configuration.range:-moz-focusring{
input.vis-configuration.vis-config-range:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input.vis-network-configuration.range::-ms-track {
input.vis-configuration.vis-config-range::-ms-track {
width: 300px;
height: 5px;
@ -221,24 +221,63 @@ input.vis-network-configuration.range::-ms-track {
/*remove default tick marks*/
color: transparent;
}
input.vis-network-configuration.range::-ms-fill-lower {
input.vis-configuration.vis-config-range::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input.vis-network-configuration.range::-ms-fill-upper {
input.vis-configuration.vis-config-range::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
input.vis-network-configuration.range::-ms-thumb {
input.vis-configuration.vis-config-range::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #385380;
}
input.vis-network-configuration.range:focus::-ms-fill-lower {
input.vis-configuration.vis-config-range:focus::-ms-fill-lower {
background: #888;
}
input.vis-network-configuration.range:focus::-ms-fill-upper {
input.vis-configuration.vis-config-range:focus::-ms-fill-upper {
background: #ccc;
}
.vis-configuration-popup {
position: absolute;
background: rgba(57, 76, 89, 0.85);
border: 2px solid #f2faff;
line-height:30px;
height:30px;
width:150px;
text-align:center;
color: #ffffff;
font-size:14px;
border-radius:4px;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.vis-configuration-popup:after, .vis-configuration-popup:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.vis-configuration-popup:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: rgba(57, 76, 89, 0.85);
border-width: 8px;
margin-top: -8px;
}
.vis-configuration-popup:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #f2faff;
border-width: 12px;
margin-top: -12px;
}

Write Preview
Loading…
Cancel
Save