Skip to content

Commit c328bbb

Browse files
nawrothnawroth
committed
Neod3 styling and console fix for IE.
* Use the correct text colors from Neod3. * Use the node bg color as bg behind the text. * Use black text in Neod3 for IE. * Load Neod3 styling dynamically, and a different one for IE. * Include the Neod3 styling in downloaded SVGs.
1 parent 10e8c63 commit c328bbb

File tree

6 files changed

+81
-35
lines changed

6 files changed

+81
-35
lines changed

‎css/neod3-ie.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
path.link{fill:none;stroke:#7f8c8d;stroke-width:2px}
2+
text{font-family:sans-serif;pointer-events:none}
3+
marker{fill:#d8dadc}
4+
text .faded{fill:#333}
5+
.node .outline{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:all .15s;-moz-transition:all .15s;-o-transition:all .15s;-ms-transition:all .15s;transition:all .15s;-webkit-transition-timing-function:cubic-bezier(.694,.0482,.335,1);-moz-transition-timing-function:cubic-bezier(.694,.0482,.335,1);-o-transition-timing-function:cubic-bezier(.694,.0482,.335,1);-ms-transition-timing-function:cubic-bezier(.694,.0482,.335,1);transition-timing-function:cubic-bezier(.694,.0482,.335,1)}
6+
.node:hover .outline{-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-o-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4)}
7+
.relationship:hover{stroke:#3498db}
8+
.outline,.overlay{cursor:pointer}

‎css/neod3.css

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,20 @@
1717
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
1818
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
1919
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js"></script>
20+
<script type="text/javascript">
21+
if (window.navigator.userAgent.indexOf('MSIE ') > 0 || window.navigator.userAgent.indexOf('Trident') > 0) {
22+
window.isInternetExplorer = true;
23+
$(document).ready(function () {
24+
$('#content').addClass('internet-explorer');
25+
});
26+
}
27+
</script>
2028

2129
<!--MathJAX-->
2230
<script type="text/x-mathjax-config;executed=true">
2331
MathJax.Hub.Config({
2432
tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
2533
});
26-
2734
</script>
2835
<script type="text/javascript"
2936
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
@@ -45,7 +52,6 @@
4552
<script src="js/cypher.datatable.js"></script>
4653

4754
<!-- neod3 -->
48-
<link href="css/neod3.css" rel="stylesheet">
4955
<script src="js/neod3.js"></script>
5056
<script src="js/neod3-visualization.js"></script>
5157
<!--script src="js/visualization.js"></script-->
@@ -60,12 +66,11 @@
6066
<!--versal widget-->
6167
<!--script src="js/versal_color_manager.js"></script-->
6268
<!--script src="js/versal_visualization.js"></script-->
63-
6469

6570

6671
<!-- Syntax Highlighter -->
6772
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/codemirror.min.css">
68-
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/theme/neo.css" />
73+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/theme/neo.css"/>
6974
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/codemirror.min.js"></script>
7075
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/runmode/runmode.js"></script>
7176
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/javascript/javascript.js"></script>
@@ -154,7 +159,7 @@
154159
<div>
155160
<a href="https://github.com/neo4j-contrib/graphgist/wiki" title="Neo4j GraphGist Collection"
156161
target="_blank"><span
157-
class="badge badge-info"><i class="icon-beaker"></i> Examples!</span></a>
162+
class="badge badge-info"><i class="icon-beaker"></i> Examples!</span></a>
158163
</div>
159164
<div id="social-container">
160165
<div class="g-plusone" data-size="small"><i class="fa fa-google-plus"></i></div>
@@ -171,11 +176,5 @@
171176
<div id="fb-root"></div>
172177
<script type="text/javascript" src="js/social.js"></script>
173178
<script type="text/javascript" src="js/ga.js"></script>
174-
<script type="text/javascript">
175-
/*@cc_on @*/
176-
/*@
177-
$( '#content' ).addClass( 'internet-explorer' );
178-
@*/
179-
</script>
180179
</body>
181180
</html>

‎js/graphgist.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,15 @@ function GraphGist($) {
4444
'2.0.1': 'http://neo4j-console-20.herokuapp.com/',
4545
'2.0.2': 'http://neo4j-console-20.herokuapp.com/',
4646
'2.0.3': 'http://neo4j-console-20.herokuapp.com/',
47+
'2.0.4': 'http://neo4j-console-20.herokuapp.com/',
4748
'2.1.0': 'http://neo4j-console-21.herokuapp.com/',
4849
'2.1.1': 'http://neo4j-console-21.herokuapp.com/',
50+
'2.1.2': 'http://neo4j-console-21.herokuapp.com/',
51+
'2.1.3': 'http://neo4j-console-21.herokuapp.com/',
4952
'2.1': 'http://neo4j-console-21.herokuapp.com/',
5053
'local': 'http://localhost:8080/',
5154
'1.9': 'http://neo4j-console-19.herokuapp.com/'
52-
}
55+
};
5356

5457
var neod3Renderer = new Neod3Renderer();
5558

‎js/neod3-visualization.js

Lines changed: 45 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ function Neod3Renderer() {
99
text-color-internal: #000000;\
1010
text-color-external: #000000;\
1111
caption: '{name}';\
12-
font-size: 10px;\
12+
font-size: 12px;\
1313
}\
1414
relationship {\
1515
color: #4356C0;\
@@ -30,8 +30,18 @@ function Neod3Renderer() {
3030
});
3131
var downloadSvgLink = $downloadSvgLink[0];
3232
var blobSupport = 'Blob' in window;
33-
var URLSupport = 'URL' in window && 'createObjectURL' in window.URL
33+
var URLSupport = 'URL' in window && 'createObjectURL' in window.URL;
3434
var msBlobSupport = typeof window.navigator.msSaveOrOpenBlob !== 'undefined';
35+
var svgStyling = '<style>\ntext{font-family:sans-serif}\n</style>';
36+
var stylingUrl = window.location.hostname === 'www.neo4j.org' ? 'http://gist.neo4j.org/css/neod3' : 'css/neod3';
37+
if (window.isInternetExplorer) {
38+
stylingUrl += '-ie.css';
39+
} else {
40+
stylingUrl += '.css';
41+
}
42+
43+
var existingStyles = {};
44+
var currentColor = 1;
3545

3646
function dummyFunc() {
3747
}
@@ -59,14 +69,14 @@ function Neod3Renderer() {
5969
for (var i = 0; i < nodes.length; i++) {
6070
var props= nodes[i].properties = extract_props(nodes[i]);
6171
var keys = Object.keys(props);
62-
if (label(nodes[i]) != "" && keys.length > 0) {
72+
if (label(nodes[i]) !== "" && keys.length > 0) {
6373
var selected_keys = prio_props.filter(function (k) {
64-
return keys.indexOf(k) != -1
74+
return keys.indexOf(k) !== -1
6575
});
6676
selected_keys = selected_keys.concat(keys).concat(['id']);
6777
var selector = "node." + label(nodes[i]);
6878
var selectedKey = selected_keys[0];
69-
if (typeof(props[selectedKey]) == "string" && props[selectedKey].length > 30) {
79+
if (typeof(props[selectedKey]) === "string" && props[selectedKey].length > 30) {
7080
props[selectedKey] = props[selectedKey].substring(0,30)+" ...";
7181
}
7282
style[selector] = style[selector] || selectedKey;
@@ -75,20 +85,29 @@ function Neod3Renderer() {
7585
return style;
7686
}
7787

78-
function style_sheet(style, styleContents) {
79-
var styleSheet = "";
80-
var c = 1;
88+
function style_sheet(styles, styleContents) {
89+
var styleItems = [];
8190
var colors = neo.style.defaults.colors;
82-
for (var k in style) {
83-
var color = colors[c];
84-
c = (c + 1) % colors.length
85-
styleSheet += "\n" +k + " {caption: '{" + style[k] + "}'; color: " + color.color +
86-
"; border-color: " + color['border-color'] +
87-
"; text-color-internal: #000000" + // + color['text-color-internal'] +
88-
"; text-color-external: #000000" + // + color['text-color-internal'] +
89-
"; }\n";
91+
for (var selector in styles) {
92+
var styleItem;
93+
if (selector in existingStyles) {
94+
styleItem = existingStyles[selector];
95+
} else {
96+
var color = colors[currentColor];
97+
currentColor = (currentColor + 1) % colors.length;
98+
var textColor = window.isInternetExplorer ? '#000000' : color['text-color-internal'];
99+
styleItem = selector +
100+
" {caption: '{" + styles[selector] +
101+
"}'; color: " + color.color +
102+
"; border-color: " + color['border-color'] +
103+
"; text-color-internal: " + textColor +
104+
"; text-color-external: " + textColor +
105+
"; }";
106+
existingStyles[selector] = styleItem;
107+
}
108+
styleItems.push(styleItem);
90109
}
91-
return styleContents + styleSheet;
110+
return styleContents + styleItems.join("\n");
92111
}
93112

94113
function applyZoom() {
@@ -132,8 +151,8 @@ function Neod3Renderer() {
132151
links[i].target = links[i].end;
133152
links[i].properties = props(links[i]);
134153
}
135-
var nodeStyle = node_styles(nodes);
136-
var styleSheet = style_sheet(nodeStyle, styleContents)
154+
var nodeStyles = node_styles(nodes);
155+
var styleSheet = style_sheet(nodeStyles, styleContents);
137156

138157
var graphModel = neo.graphModel()
139158
.nodes(nodes)
@@ -216,9 +235,15 @@ function Neod3Renderer() {
216235
}
217236
}
218237
var svg = serializer(element);
219-
svg = svg.replace('<svg ', '<svg height="' + $container.height() + '" width="' + $container.width() + '" style="font-family: sans-serif;" ');
238+
svg = svg.replace('<svg ', '<svg height="' + $container.height() + '" width="' + $container.width() + '" ')
239+
.replace(/<g/, '\n' + svgStyling + '\n<g');
220240
return svg;
221241
}
222242

243+
$.get(stylingUrl, function (data) {
244+
svgStyling = '<style>\n' + data + '\n</style>';
245+
$(svgStyling).appendTo('head');
246+
});
247+
223248
return {'render': render};
224249
}

‎js/neod3.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1470,10 +1470,9 @@ neo.utils.measureText = (function() {
14701470
});
14711471
text.enter().append('text').attr({
14721472
'text-anchor': 'middle',
1473-
// 'font-weight': 'bold',
1473+
'font-weight': 'bold',
14741474
'stroke': '#FFFFFF',
1475-
'stroke-width' : '0.2',
1476-
'font-weight': '400'
1475+
'stroke-width' : '0'
14771476
});
14781477
text.text(function(line) {
14791478
return line.text;

0 commit comments

Comments
 (0)