...
[iramuteq] / webexport / afc.html~
1 <html class="no-js" lang="en">
2 <head>
3 <meta charset="utf-8" />
4   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
5   <meta name="viewport" content="width=device-width">
6   <title>%(titre)s</title>
7 <script src="js/jquery.min.js"></script>
8 <script src="js/sigma.min.js"></script>
9 <script src="js/sigma.parseGexf.js"></script>
10 </head>
11 <body>
12 <div class="container">
13     <div class="row">
14   <h2 class="span12" id="post-title">%(titre)s</h2>
15    <div class="span12 sigma-parent" id="sigma-example-parent">
16
17     <div class="sigma-expand" id="sigma-example"></div>
18   </div>
19 </div>
20
21 <script type="text/javascript">
22 function init() {
23   // Instanciate sigma.js and customize rendering :
24   //var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({
25   var sigInst = sigma.init($('#sigma-example')[0]).drawingProperties({
26     defaultLabelColor: '#fff',
27     //defaultLabelSize: 10,
28     labelSize: 'proportional',
29     labelSizeRatio: 2,
30     defaultLabelBGColor: '#fff',
31     defaultLabelHoverColor: '#000',
32     labelThreshold: 6,
33     labelColor: 'node',
34     defaultEdgeType: 'line'
35   }).graphProperties({
36     minNodeSize: 0.3,
37     maxNodeSize: 20,
38     minEdgeSize: 0.01,
39     maxEdgeSize: 1
40   }).mouseProperties({
41     maxRatio: 32
42   });
43
44   // Parse a GEXF encoded file to fill the graph
45   // (requires "sigma.parseGexf.js" to be included)
46     sigInst.parseGexf('%(gexffile)s');
47
48 //attributs
49 (function(){
50 var popUp;
51  
52 // This function is used to generate the attributes list from the node attributes.
53 // Since the graph comes from GEXF, the attibutes look like:
54 // [
55 // { attr: 'Lorem', val: '42' },
56 // { attr: 'Ipsum', val: 'dolores' },
57 // ...
58 // { attr: 'Sit', val: 'amet' }
59 // ]
60 function attributesToString(attr) {
61     return '<ul>' +
62 attr.map(function(o){
63 return '<li>' + o.attr + ' : ' + o.val + '</li>';
64 }).join('') +
65 '</ul>';
66 }
67  
68 function showNodeInfo(event) {
69     popUp && popUp.remove();
70      
71     var node;
72     sigInst.iterNodes(function(n){
73     node = n;
74     },[event.content[0]]);
75      
76     popUp = $(
77     '<div class="node-info-popup"></div>'
78     ).append(
79     // The GEXF parser stores all the attributes in an array named
80     // 'attributes'. And since sigma.js does not recognize the key
81     // 'attributes' (unlike the keys 'label', 'color', 'size' etc),
82     // it stores it in the node 'attr' object :
83     attributesToString( node['attr']['attributes'] )
84     ).attr(
85     'id',
86     'node-info'+sigInst.getID()
87     ).css({
88     'display': 'inline-block',
89     'border-radius': 3,
90     'padding': 5,
91     'background': 'rgba(200,120,0,0.6)',
92     'color': '#000',
93     'box-shadow': '0 0 4px #666',
94     'position': 'absolute',
95     'left': node.displayX,
96     'top': node.displayY+15
97     });
98  
99     $('ul',popUp).css('margin','0 0 0 20px');
100  
101     $('#sigma-example').append(popUp);
102 }
103  
104 function hideNodeInfo(event) {
105     popUp && popUp.remove();
106     popUp = false;
107 }
108  
109 var greyColor = 'rgba(255,255,255,0.2)';
110 sigInst.bind('overnodes',function(event){
111     var node;
112     sigInst.iterNodes(function(n){
113     node = n;
114     },[event.content[0]]);
115     var nodes = [node.id]
116     sigInst.iterNodes(function(n){
117         //if(!neighbors[n.id]){
118         if(n.color != node.color && n.label != 'F1' && n.label != 'F2') {
119             if(!n.attr['grey']){
120                 n.attr['true_color'] = n.color;
121                 n.color = greyColor;
122                 n.attr['grey'] = 1;
123             }
124         }else{
125             n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
126             n.attr['grey'] = 0;
127         }
128     }).draw(2,2,2);
129 }).bind('outnodes',function(){
130
131     sigInst.iterEdges(function(e){
132         e.color = e.attr['grey'] ? e.attr['true_color'] : e.color;
133         e.attr['grey'] = 0;
134     }).iterNodes(function(n){
135         n.color = n.attr['grey'] ? n.attr['true_color'] : n.color;
136         n.attr['grey'] = 0;
137     }).draw(2,2,2);
138 });
139
140
141 sigInst.bind('overnodes',showNodeInfo).bind('outnodes',hideNodeInfo).draw();
142 })();
143 }
144   // Draw the graph :
145 //  sigInst.draw();
146 //}
147
148 if (document.addEventListener) {
149   document.addEventListener("DOMContentLoaded", init, false);
150 } else {
151   window.onload = init;
152 }
153 </script>
154 <style type="text/css">
155   /* sigma.js context : */
156   .sigma-parent {
157     position: relative;
158     border-radius: 4px;
159     -moz-border-radius: 4px;
160     -webkit-border-radius: 4px;
161     background: #222;
162     height: 800px;
163     /*width: 800px;*/
164   }
165   .sigma-expand {
166     position: absolute;
167     width: 100%%;
168     height: 100%%;
169     top: 0;
170     left: 0;
171   }
172   .buttons-container{
173     padding-bottom: 8px;
174     padding-top: 12px;
175   }
176 </style>
177
178 </body>
179 </html>