diff --git a/dist/vis.css b/dist/vis.css
index 2163d017..90511f71 100644
--- a/dist/vis.css
+++ b/dist/vis.css
@@ -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;
diff --git a/dist/vis.js b/dist/vis.js
index 0ae82114..2ae5ee95 100644
--- a/dist/vis.js
+++ b/dist/vis.js
@@ -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 = '' + name + ':';
} 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);
}
}, {
diff --git a/dist/vis.min.css b/dist/vis.min.css
index c5d254a6..b61d9a40 100644
--- a/dist/vis.min.css
+++ b/dist/vis.min.css
@@ -1 +1 @@
-.vis-panel,.vis-timeline{margin:0;padding:0;box-sizing:border-box}.vis-background,.vis-labelset,.vis-timeline{overflow:hidden}.vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}.vis-timeline{position:relative;border:1px solid #bfbfbf}.vis-panel{position:absolute}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right,.vis-panel.vis-top{border:1px #bfbfbf}.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-top{border-left-style:solid;border-right-style:solid}.vis-panel>.vis-content{position:relative}.vis-panel .vis-shadow{position:absolute;width:100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis-itemset,.vis-labelset,.vis-labelset .vis-label{box-sizing:border-box;position:relative}.vis-panel .vis-shadow.vis-top{top:-1px;left:0}.vis-panel .vis-shadow.vis-bottom{bottom:-1px;left:0}.vis-labelset .vis-label{left:0;top:0;width:100%;color:#4d4d4d;border-bottom:1px solid #bfbfbf}.vis-labelset .vis-label.draggable{cursor:pointer}.vis-labelset .vis-label:last-child{border-bottom:none}.vis-labelset .vis-label .vis-inner{display:inline-block;padding:5px}.vis-labelset .vis-label .vis-inner.vis-hidden{padding:0}.vis-itemset{padding:0;margin:0}.vis-itemset .vis-background,.vis-itemset .vis-foreground{position:absolute;width:100%;height:100%;overflow:visible}.vis-axis{position:absolute;width:100%;height:0;left:0;z-index:1}.vis-foreground .vis-group{position:relative;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis-foreground .vis-group:last-child{border-bottom:none}.vis-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-item{position:absolute;color:#1A1A1A;border-color:#97B0F8;border-width:1px;background-color:#D5DDF6;display:inline-block}.vis-item.vis-point.vis-selected,.vis-item.vis-selected{background-color:#FFF785}.vis-item.vis-selected{border-color:#FFC200;z-index:2}.vis-editable.vis-selected{cursor:move}.vis-item.vis-box{text-align:center;border-style:solid;border-radius:2px}.vis-item.vis-point{background:0 0}.vis-item.vis-dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis-item.vis-range{border-style:solid;border-radius:2px;box-sizing:border-box}.vis-item.vis-background{border:none;background-color:rgba(213,221,246,.4);box-sizing:border-box;padding:0;margin:0}.vis-item .vis-item-overflow{position:relative;width:100%;height:100%;padding:0;margin:0;overflow:hidden}.vis-item.vis-range .vis-item-content{position:relative;display:inline-block}.vis-item.vis-background .vis-item-content{position:absolute;display:inline-block}.vis-item.vis-line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis-item .vis-item-content{white-space:nowrap;box-sizing:border-box;padding:5px}.vis-item .vis-delete{background:url(img/timeline/delete.png) center no-repeat;position:absolute;width:24px;height:24px;top:-4px;right:-24px;cursor:pointer}.vis-item.vis-range .vis-drag-left{position:absolute;width:24px;max-width:20%;min-width:2px;height:100%;top:0;left:-4px;cursor:w-resize}.vis-item.vis-range .vis-drag-right{position:absolute;width:24px;max-width:20%;min-width:2px;height:100%;top:0;right:-4px;cursor:e-resize}.vis-time-axis{position:relative;overflow:hidden}.vis-time-axis.vis-foreground{top:0;left:0;width:100%}.vis-time-axis.vis-background{position:absolute;top:0;left:0;width:100%;height:100%}.vis-time-axis .vis-text{position:absolute;color:#4d4d4d;padding:3px;overflow:hidden;box-sizing:border-box;white-space:nowrap}.vis-time-axis .vis-text.vis-measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis-time-axis .vis-grid.vis-vertical{position:absolute;border-left:1px solid}.vis-time-axis .vis-grid.vis-minor{border-color:#e5e5e5}.vis-time-axis .vis-grid.vis-major{border-color:#bfbfbf}.vis-current-time{background-color:#FF7F6E;width:2px;z-index:1}.vis-custom-time{background-color:#6E94FF;width:2px;cursor:move;z-index:1}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal{position:absolute;width:100%;height:0;border-bottom:1px solid}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor{border-color:#e5e5e5}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major{border-color:#bfbfbf}.vis-data-axis .vis-y-axis.vis-major{width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-major.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-minor{position:absolute;width:100%;color:#bebebe;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-minor.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis-data-axis .vis-y-axis.vis-title.vis-measure{padding:0;margin:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title.vis-left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis-data-axis .vis-y-axis.vis-title.vis-right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis-legend{background-color:rgba(247,252,255,.65);padding:5px;border:1px solid #b3b3b3;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis-legend-text{white-space:nowrap;display:inline-block}.vis-graph-group0{fill:#4f81bd;fill-opacity:0;stroke-width:2px;stroke:#4f81bd}.vis-graph-group1{fill:#f79646;fill-opacity:0;stroke-width:2px;stroke:#f79646}.vis-graph-group2{fill:#8c51cf;fill-opacity:0;stroke-width:2px;stroke:#8c51cf}.vis-graph-group3{fill:#75c841;fill-opacity:0;stroke-width:2px;stroke:#75c841}.vis-graph-group4{fill:#ff0100;fill-opacity:0;stroke-width:2px;stroke:#ff0100}.vis-graph-group5{fill:#37d8e6;fill-opacity:0;stroke-width:2px;stroke:#37d8e6}.vis-graph-group6{fill:#042662;fill-opacity:0;stroke-width:2px;stroke:#042662}.vis-graph-group7{fill:#00ff26;fill-opacity:0;stroke-width:2px;stroke:#00ff26}.vis-graph-group8{fill:#f0f;fill-opacity:0;stroke-width:2px;stroke:#f0f}.vis-graph-group9{fill:#8f3938;fill-opacity:0;stroke-width:2px;stroke:#8f3938}.vis-timeline .vis-fill{fill-opacity:.1;stroke:none}.vis-timeline .vis-bar{fill-opacity:.5;stroke-width:1px}.vis-timeline .vis-point{stroke-width:2px;fill-opacity:1}.vis-timeline .vis-legend-background{stroke-width:1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis-timeline .vis-outline{stroke-width:1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis-timeline .vis-icon-fill{fill-opacity:.3;stroke:none}div.vis-network div.vis-manipulation{border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0 );position:absolute;left:0;top:0;width:100%;height:30px}div.vis-network div.vis-edit-mode{position:absolute;left:0;top:15px;height:30px}div.vis-network div.vis-close{position:absolute;right:0;top:0;width:30px;height:30px;background-position:20px 3px;background-repeat:no-repeat;background-image:url(img/network/cross.png);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-close:hover{opacity:.6}div.vis-network div.vis-edit-mode div.vis-button,div.vis-network div.vis-manipulation div.vis-button{position:relative;top:-7px;font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;background-position:0 0;height:24px;margin:0 0 0 10px;vertical-align:middle;cursor:pointer;padding:0 8px;user-select:none}div.vis-network div.vis-edit-mode div.vis-button,div.vis-network div.vis-manipulation div.vis-button,div.vis-network div.vis-navigation div.vis-button{display:inline-block;background-repeat:no-repeat;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}div.vis-network div.vis-manipulation div.vis-button:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}div.vis-network div.vis-manipulation div.vis-button:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}div.vis-network div.vis-manipulation div.vis-button.vis-back{background-image:url(img/network/backIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-none:hover{box-shadow:1px 1px 8px transparent;cursor:default}div.vis-network div.vis-manipulation div.vis-button.vis-none:active{box-shadow:1px 1px 8px transparent}div.vis-network div.vis-manipulation div.vis-button.vis-none{padding:0}div.vis-network div.vis-manipulation div.notification{margin:2px;font-weight:700}div.vis-network div.vis-manipulation div.vis-button.vis-add{background-image:url(img/network/addNodeIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit,div.vis-network div.vis-manipulation div.vis-button.vis-edit{background-image:url(img/network/editIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode{background-color:#fcfcfc;border:1px solid #ccc}div.vis-network div.vis-manipulation div.vis-button.vis-connect{background-image:url(img/network/connectIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-delete{background-image:url(img/network/deleteIcon.png)}div.vis-network div.vis-edit-mode div.vis-label,div.vis-network div.vis-manipulation div.vis-label{margin:0 0 0 23px;line-height:25px}div.vis-network div.vis-manipulation div.vis-separator-line{display:inline-block;width:1px;height:20px;background-color:#bdbdbd;margin:5px 7px 0 15px}div.vis-network div.vis-navigation div.vis-button{width:34px;height:34px;-moz-border-radius:17px;border-radius:17px;position:absolute;background-position:2px 2px;cursor:pointer;user-select:none}div.vis-network div.vis-navigation div.vis-button:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.vis-network div.vis-navigation div.vis-button:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.vis-network div.vis-navigation div.vis-button.vis-up{background-image:url(img/network/upArrow.png);bottom:50px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-down{background-image:url(img/network/downArrow.png);bottom:10px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-left{background-image:url(img/network/leftArrow.png);bottom:10px;left:15px}div.vis-network div.vis-navigation div.vis-button.vis-right{background-image:url(img/network/rightArrow.png);bottom:10px;left:95px}div.vis-network div.vis-navigation div.vis-button.vis-zoomIn{background-image:url(img/network/plus.png);bottom:10px;right:15px}div.vis-network div.vis-navigation div.vis-button.vis-zoomOut{background-image:url(img/network/minus.png);bottom:10px;right:55px}div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends{background-image:url(img/network/zoomExtends.png);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:#000;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,.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:#fff;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:#fff}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:700}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 #444;border-radius:2px;padding:0;margin:0;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{-webkit-appearance:none;border:0 solid #fff;background-color:transparent;width:300px;height:20px}input.vis-network-configuration.range::-webkit-slider-runnable-track{width:300px;height:5px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0 );border:1px solid #999;box-shadow:#aaa 0 0 3px 0;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;background:-moz-linear-gradient(top,#3876c2 0,#385380 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3876c2),color-stop(100%,#385380));background:-webkit-linear-gradient(top,#3876c2 0,#385380 100%);background:-o-linear-gradient(top,#3876c2 0,#385380 100%);background:-ms-linear-gradient(top,#3876c2 0,#385380 100%);background:linear-gradient(to bottom,#3876c2 0,#385380 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380', GradientType=0 );box-shadow:#111927 0 0 1px 0;margin-top:-7px}input.vis-network-configuration.range:focus{outline:0}input.vis-network-configuration.range:focus::-webkit-slider-runnable-track{background:#9d9d9d;background:-moz-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#9d9d9d),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-o-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:linear-gradient(to bottom,#9d9d9d 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8', GradientType=0 )}input.vis-network-configuration.range::-moz-range-track{width:300px;height:10px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0 );border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-network-configuration.range::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-network-configuration.range:-moz-focusring{outline:#fff solid 1px;outline-offset:-1px}input.vis-network-configuration.range::-ms-track{width:300px;height:5px;background:0 0;border-color:transparent;border-width:6px 0;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;margin-top:-140px;margin-left:30px;width:293px;height:425px;padding:10px;border-radius:15px;background-color:#fff;display:none;box-shadow:rgba(0,0,0,.5) 0 0 10px 0}div.vis-color-picker div.vis-arrow{position:absolute;top:147px;left:5px}div.vis-color-picker div.vis-arrow:after,div.vis-color-picker div.vis-arrow:before{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}div.vis-color-picker div.vis-arrow:after{border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:30px;margin-top:-30px}div.vis-color-picker div.vis-color{position:absolute;width:289px;height:289px;cursor:pointer}div.vis-color-picker div.vis-brightness{position:absolute;top:313px}div.vis-color-picker div.vis-opacity{position:absolute;top:350px}div.vis-color-picker div.vis-selector{position:absolute;top:137px;left:137px;width:15px;height:15px;border-radius:15px;border:1px solid #fff;background:#4c4c4c;background:-moz-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4c4c4c),color-stop(12%,#595959),color-stop(25%,#666),color-stop(39%,#474747),color-stop(50%,#2c2c2c),color-stop(51%,#000),color-stop(60%,#111),color-stop(76%,#2b2b2b),color-stop(91%,#1c1c1c),color-stop(100%,#131313));background:-webkit-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-o-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-ms-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:linear-gradient(to bottom,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 )}div.vis-color-picker div.vis-initial-color,div.vis-color-picker div.vis-new-color{position:absolute;vertical-align:middle;width:140px;height:20px;top:380px;font-size:10px;color:rgba(0,0,0,.4);line-height:20px}div.vis-color-picker div.vis-new-color{border:1px solid rgba(0,0,0,.1);border-radius:5px;left:159px;text-align:right;padding-right:2px}div.vis-color-picker div.vis-initial-color{border:1px solid rgba(0,0,0,.1);border-radius:5px;left:10px;text-align:left;padding-left:2px}div.vis-color-picker div.vis-label{position:absolute;width:300px;left:10px}div.vis-color-picker div.vis-label.vis-brightness{top:300px}div.vis-color-picker div.vis-label.vis-opacity{top:338px}div.vis-color-picker div.vis-button{position:absolute;width:68px;height:25px;border-radius:10px;vertical-align:middle;text-align:center;line-height:25px;top:410px;border:2px solid #d9d9d9;background-color:#f7f7f7;cursor:pointer}div.vis-color-picker div.vis-button.vis-cancel{left:5px}div.vis-color-picker div.vis-button.vis-load{left:82px}div.vis-color-picker div.vis-button.vis-apply{left:159px}div.vis-color-picker div.vis-button.vis-save{left:236px}div.vis-color-picker input.vis-range{width:290px;height:20px}
\ No newline at end of file
+.vis-background,.vis-labelset,.vis-timeline{overflow:hidden}.vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;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:#fff;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:#fff}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:700}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 #444;border-radius:2px;padding:0;margin:0;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}.vis-panel,.vis-timeline{padding:0;box-sizing:border-box}input.vis-configuration.vis-config-range{-webkit-appearance:none;border:0 solid #fff;background-color:transparent;width:300px;height:20px}input.vis-configuration.vis-config-range::-webkit-slider-runnable-track{width:300px;height:5px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0 );border:1px solid #999;box-shadow:#aaa 0 0 3px 0;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;background:-moz-linear-gradient(top,#3876c2 0,#385380 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3876c2),color-stop(100%,#385380));background:-webkit-linear-gradient(top,#3876c2 0,#385380 100%);background:-o-linear-gradient(top,#3876c2 0,#385380 100%);background:-ms-linear-gradient(top,#3876c2 0,#385380 100%);background:linear-gradient(to bottom,#3876c2 0,#385380 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380', GradientType=0 );box-shadow:#111927 0 0 1px 0;margin-top:-7px}input.vis-configuration.vis-config-range:focus{outline:0}input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track{background:#9d9d9d;background:-moz-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#9d9d9d),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-o-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#9d9d9d 0,#c8c8c8 99%);background:linear-gradient(to bottom,#9d9d9d 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8', GradientType=0 )}input.vis-configuration.vis-config-range::-moz-range-track{width:300px;height:10px;background:#dedede;background:-moz-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#dedede),color-stop(99%,#c8c8c8));background:-webkit-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-o-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:-ms-linear-gradient(top,#dedede 0,#c8c8c8 99%);background:linear-gradient(to bottom,#dedede 0,#c8c8c8 99%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8', GradientType=0 );border:1px solid #999;box-shadow:#aaa 0 0 3px 0;border-radius:3px}input.vis-configuration.vis-config-range::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#385380}input.vis-configuration.vis-config-range:-moz-focusring{outline:#fff solid 1px;outline-offset:-1px}input.vis-configuration.vis-config-range::-ms-track{width:300px;height:5px;background:0 0;border-color:transparent;border-width:6px 0;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,.85);border:2px solid #f2faff;line-height:30px;height:30px;width:150px;text-align:center;color:#fff;font-size:14px;border-radius:4px;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;transition:opacity .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,.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;border:1px solid #bfbfbf;margin:0}.vis-panel{position:absolute;margin:0}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right,.vis-panel.vis-top{border:1px #bfbfbf}.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis-panel.vis-bottom,.vis-panel.vis-center,.vis-panel.vis-top{border-left-style:solid;border-right-style:solid}.vis-panel>.vis-content{position:relative}.vis-panel .vis-shadow{position:absolute;width:100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis-itemset,.vis-labelset,.vis-labelset .vis-label{box-sizing:border-box;position:relative}.vis-panel .vis-shadow.vis-top{top:-1px;left:0}.vis-panel .vis-shadow.vis-bottom{bottom:-1px;left:0}.vis-labelset .vis-label{left:0;top:0;width:100%;color:#4d4d4d;border-bottom:1px solid #bfbfbf}.vis-labelset .vis-label.draggable{cursor:pointer}.vis-labelset .vis-label:last-child{border-bottom:none}.vis-labelset .vis-label .vis-inner{display:inline-block;padding:5px}.vis-labelset .vis-label .vis-inner.vis-hidden{padding:0}.vis-itemset{padding:0;margin:0}.vis-itemset .vis-background,.vis-itemset .vis-foreground{position:absolute;width:100%;height:100%;overflow:visible}.vis-axis{position:absolute;width:100%;height:0;left:0;z-index:1}.vis-foreground .vis-group{position:relative;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis-foreground .vis-group:last-child{border-bottom:none}.vis-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-item{position:absolute;color:#1A1A1A;border-color:#97B0F8;border-width:1px;background-color:#D5DDF6;display:inline-block}.vis-item.vis-point.vis-selected,.vis-item.vis-selected{background-color:#FFF785}.vis-item.vis-selected{border-color:#FFC200;z-index:2}.vis-editable.vis-selected{cursor:move}.vis-item.vis-box{text-align:center;border-style:solid;border-radius:2px}.vis-item.vis-point{background:0 0}.vis-item.vis-dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis-item.vis-range{border-style:solid;border-radius:2px;box-sizing:border-box}.vis-item.vis-background{border:none;background-color:rgba(213,221,246,.4);box-sizing:border-box;padding:0;margin:0}.vis-item .vis-item-overflow{position:relative;width:100%;height:100%;padding:0;margin:0;overflow:hidden}.vis-item.vis-range .vis-item-content{position:relative;display:inline-block}.vis-item.vis-background .vis-item-content{position:absolute;display:inline-block}.vis-item.vis-line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis-item .vis-item-content{white-space:nowrap;box-sizing:border-box;padding:5px}.vis-item .vis-delete{background:url(img/timeline/delete.png) center no-repeat;position:absolute;width:24px;height:24px;top:-4px;right:-24px;cursor:pointer}.vis-item.vis-range .vis-drag-left{position:absolute;width:24px;max-width:20%;min-width:2px;height:100%;top:0;left:-4px;cursor:w-resize}.vis-item.vis-range .vis-drag-right{position:absolute;width:24px;max-width:20%;min-width:2px;height:100%;top:0;right:-4px;cursor:e-resize}.vis-time-axis{position:relative;overflow:hidden}.vis-time-axis.vis-foreground{top:0;left:0;width:100%}.vis-time-axis.vis-background{position:absolute;top:0;left:0;width:100%;height:100%}.vis-time-axis .vis-text{position:absolute;color:#4d4d4d;padding:3px;overflow:hidden;box-sizing:border-box;white-space:nowrap}.vis-time-axis .vis-text.vis-measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis-time-axis .vis-grid.vis-vertical{position:absolute;border-left:1px solid}.vis-time-axis .vis-grid.vis-minor{border-color:#e5e5e5}.vis-time-axis .vis-grid.vis-major{border-color:#bfbfbf}.vis-current-time{background-color:#FF7F6E;width:2px;z-index:1}.vis-custom-time{background-color:#6E94FF;width:2px;cursor:move;z-index:1}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal{position:absolute;width:100%;height:0;border-bottom:1px solid}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor{border-color:#e5e5e5}.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major{border-color:#bfbfbf}.vis-data-axis .vis-y-axis.vis-major{width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-major.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-minor{position:absolute;width:100%;color:#bebebe;white-space:nowrap}.vis-data-axis .vis-y-axis.vis-minor.vis-measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis-data-axis .vis-y-axis.vis-title.vis-measure{padding:0;margin:0;visibility:hidden;width:auto}.vis-data-axis .vis-y-axis.vis-title.vis-left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis-data-axis .vis-y-axis.vis-title.vis-right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis-legend{background-color:rgba(247,252,255,.65);padding:5px;border:1px solid #b3b3b3;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis-legend-text{white-space:nowrap;display:inline-block}.vis-graph-group0{fill:#4f81bd;fill-opacity:0;stroke-width:2px;stroke:#4f81bd}.vis-graph-group1{fill:#f79646;fill-opacity:0;stroke-width:2px;stroke:#f79646}.vis-graph-group2{fill:#8c51cf;fill-opacity:0;stroke-width:2px;stroke:#8c51cf}.vis-graph-group3{fill:#75c841;fill-opacity:0;stroke-width:2px;stroke:#75c841}.vis-graph-group4{fill:#ff0100;fill-opacity:0;stroke-width:2px;stroke:#ff0100}.vis-graph-group5{fill:#37d8e6;fill-opacity:0;stroke-width:2px;stroke:#37d8e6}.vis-graph-group6{fill:#042662;fill-opacity:0;stroke-width:2px;stroke:#042662}.vis-graph-group7{fill:#00ff26;fill-opacity:0;stroke-width:2px;stroke:#00ff26}.vis-graph-group8{fill:#f0f;fill-opacity:0;stroke-width:2px;stroke:#f0f}.vis-graph-group9{fill:#8f3938;fill-opacity:0;stroke-width:2px;stroke:#8f3938}.vis-timeline .vis-fill{fill-opacity:.1;stroke:none}.vis-timeline .vis-bar{fill-opacity:.5;stroke-width:1px}.vis-timeline .vis-point{stroke-width:2px;fill-opacity:1}.vis-timeline .vis-legend-background{stroke-width:1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis-timeline .vis-outline{stroke-width:1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis-timeline .vis-icon-fill{fill-opacity:.3;stroke:none}div.vis-network div.vis-manipulation{border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0 );position:absolute;left:0;top:0;width:100%;height:30px}div.vis-network div.vis-edit-mode{position:absolute;left:0;top:15px;height:30px}div.vis-network div.vis-close{position:absolute;right:0;top:0;width:30px;height:30px;background-position:20px 3px;background-repeat:no-repeat;background-image:url(img/network/cross.png);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.vis-network div.vis-close:hover{opacity:.6}div.vis-network div.vis-edit-mode div.vis-button,div.vis-network div.vis-manipulation div.vis-button{position:relative;top:-7px;font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;background-position:0 0;height:24px;margin:0 0 0 10px;vertical-align:middle;cursor:pointer;padding:0 8px;user-select:none}div.vis-network div.vis-edit-mode div.vis-button,div.vis-network div.vis-manipulation div.vis-button,div.vis-network div.vis-navigation div.vis-button{display:inline-block;background-repeat:no-repeat;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}div.vis-network div.vis-manipulation div.vis-button:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}div.vis-network div.vis-manipulation div.vis-button:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}div.vis-network div.vis-manipulation div.vis-button.vis-back{background-image:url(img/network/backIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-none:hover{box-shadow:1px 1px 8px transparent;cursor:default}div.vis-network div.vis-manipulation div.vis-button.vis-none:active{box-shadow:1px 1px 8px transparent}div.vis-network div.vis-manipulation div.vis-button.vis-none{padding:0}div.vis-network div.vis-manipulation div.notification{margin:2px;font-weight:700}div.vis-network div.vis-manipulation div.vis-button.vis-add{background-image:url(img/network/addNodeIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit,div.vis-network div.vis-manipulation div.vis-button.vis-edit{background-image:url(img/network/editIcon.png)}div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode{background-color:#fcfcfc;border:1px solid #ccc}div.vis-network div.vis-manipulation div.vis-button.vis-connect{background-image:url(img/network/connectIcon.png)}div.vis-network div.vis-manipulation div.vis-button.vis-delete{background-image:url(img/network/deleteIcon.png)}div.vis-network div.vis-edit-mode div.vis-label,div.vis-network div.vis-manipulation div.vis-label{margin:0 0 0 23px;line-height:25px}div.vis-network div.vis-manipulation div.vis-separator-line{display:inline-block;width:1px;height:20px;background-color:#bdbdbd;margin:5px 7px 0 15px}div.vis-network-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;font-family:verdana;font-size:14px;font-color:#000;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,.2);pointer-events:none}div.vis-network div.vis-navigation div.vis-button{width:34px;height:34px;-moz-border-radius:17px;border-radius:17px;position:absolute;background-position:2px 2px;cursor:pointer;user-select:none}div.vis-network div.vis-navigation div.vis-button:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.vis-network div.vis-navigation div.vis-button:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.vis-network div.vis-navigation div.vis-button.vis-up{background-image:url(img/network/upArrow.png);bottom:50px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-down{background-image:url(img/network/downArrow.png);bottom:10px;left:55px}div.vis-network div.vis-navigation div.vis-button.vis-left{background-image:url(img/network/leftArrow.png);bottom:10px;left:15px}div.vis-network div.vis-navigation div.vis-button.vis-right{background-image:url(img/network/rightArrow.png);bottom:10px;left:95px}div.vis-network div.vis-navigation div.vis-button.vis-zoomIn{background-image:url(img/network/plus.png);bottom:10px;right:15px}div.vis-network div.vis-navigation div.vis-button.vis-zoomOut{background-image:url(img/network/minus.png);bottom:10px;right:55px}div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends{background-image:url(img/network/zoomExtends.png);bottom:50px;right:15px}div.vis-color-picker{position:absolute;margin-top:-140px;margin-left:30px;width:293px;height:425px;padding:10px;border-radius:15px;background-color:#fff;display:none;box-shadow:rgba(0,0,0,.5) 0 0 10px 0}div.vis-color-picker div.vis-arrow{position:absolute;top:147px;left:5px}div.vis-color-picker div.vis-arrow:after,div.vis-color-picker div.vis-arrow:before{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}div.vis-color-picker div.vis-arrow:after{border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:30px;margin-top:-30px}div.vis-color-picker div.vis-color{position:absolute;width:289px;height:289px;cursor:pointer}div.vis-color-picker div.vis-brightness{position:absolute;top:313px}div.vis-color-picker div.vis-opacity{position:absolute;top:350px}div.vis-color-picker div.vis-selector{position:absolute;top:137px;left:137px;width:15px;height:15px;border-radius:15px;border:1px solid #fff;background:#4c4c4c;background:-moz-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4c4c4c),color-stop(12%,#595959),color-stop(25%,#666),color-stop(39%,#474747),color-stop(50%,#2c2c2c),color-stop(51%,#000),color-stop(60%,#111),color-stop(76%,#2b2b2b),color-stop(91%,#1c1c1c),color-stop(100%,#131313));background:-webkit-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-o-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:-ms-linear-gradient(top,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);background:linear-gradient(to bottom,#4c4c4c 0,#595959 12%,#666 25%,#474747 39%,#2c2c2c 50%,#000 51%,#111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 )}div.vis-color-picker div.vis-initial-color,div.vis-color-picker div.vis-new-color{position:absolute;vertical-align:middle;width:140px;height:20px;top:380px;font-size:10px;color:rgba(0,0,0,.4);line-height:20px}div.vis-color-picker div.vis-new-color{border:1px solid rgba(0,0,0,.1);border-radius:5px;left:159px;text-align:right;padding-right:2px}div.vis-color-picker div.vis-initial-color{border:1px solid rgba(0,0,0,.1);border-radius:5px;left:10px;text-align:left;padding-left:2px}div.vis-color-picker div.vis-label{position:absolute;width:300px;left:10px}div.vis-color-picker div.vis-label.vis-brightness{top:300px}div.vis-color-picker div.vis-label.vis-opacity{top:338px}div.vis-color-picker div.vis-button{position:absolute;width:68px;height:25px;border-radius:10px;vertical-align:middle;text-align:center;line-height:25px;top:410px;border:2px solid #d9d9d9;background-color:#f7f7f7;cursor:pointer}div.vis-color-picker div.vis-button.vis-cancel{left:5px}div.vis-color-picker div.vis-button.vis-load{left:82px}div.vis-color-picker div.vis-button.vis-apply{left:159px}div.vis-color-picker div.vis-button.vis-save{left:236px}div.vis-color-picker input.vis-range{width:290px;height:20px}
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 636061b9..360b3bd3 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -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'
];
diff --git a/lib/shared/Configurator.js b/lib/shared/Configurator.js
index e1d7f2bb..48e996cf 100644
--- a/lib/shared/Configurator.js
+++ b/lib/shared/Configurator.js
@@ -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 = '' + name + ':';
}
@@ -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() {
diff --git a/lib/network/css/network-configuration.css b/lib/shared/configuration.css
similarity index 70%
rename from lib/network/css/network-configuration.css
rename to lib/shared/configuration.css
index 4d7daeca..d8becc87 100644
--- a/lib/network/css/network-configuration.css
+++ b/lib/shared/configuration.css
@@ -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;
}
\ No newline at end of file