Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
gargantext
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
humanities
gargantext
Commits
47e66a79
Commit
47e66a79
authored
Jul 26, 2016
by
Romain Loth
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[FEAT] graphExplorer sidebar hide/show button and actions
parent
8d009ae8
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
89 additions
and
53 deletions
+89
-53
custom.css
static/lib/graphExplorer/libs/css2/custom.css
+18
-14
Tinaweb.js
static/lib/graphExplorer/tinawebJS/Tinaweb.js
+55
-22
explorer.html
templates/graphExplorer/explorer.html
+16
-17
No files found.
static/lib/graphExplorer/libs/css2/custom.css
View file @
47e66a79
...
...
@@ -13,12 +13,12 @@
.loader
{
text-align
:
center
;
transform
:
translate
(
0
,
50%
)
!important
;
-ms-transform
:
translate
(
0
,
50%
)
!important
;
/*IE 9*/
-ms-transform
:
translate
(
0
,
50%
)
!important
;
/*IE 9*/
-webkit-transform
:
translate
(
0
,
50%
)
!important
;
/*Safari and Chrome */
}
.navbar
{
.navbar
{
margin-bottom
:
1px
;
}
...
...
@@ -30,10 +30,10 @@
#defaultop
li
.basicitem
{
/*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif ;*/
padding-left
:
.
4
em
;
padding-right
:
.
4
em
;
padding-left
:
.
2
em
;
padding-right
:
.
2
em
;
padding-bottom
:
0
;
font-size
:
90
%
;
font-size
:
75
%
;
}
#defaultop
>
div
{
...
...
@@ -58,7 +58,7 @@
/*searchnav should get same padding as our .navbar-nav > li > a or bootstrap's*/
#defaultop
div
#searchnav
{
padding-top
:
13px
;
padding-top
:
13px
;
padding-bottom
:
9px
;
}
...
...
@@ -174,10 +174,10 @@
/*.selection-item{
display:inline-block;
border:solid 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;'+
border-color:#BDBDBD;
border-color:#BDBDBD;
padding:0px 2px 0px 2px;
margin:1px 0px 1px 0px;
cursor: pointer;
...
...
@@ -204,8 +204,8 @@
display
:
inline-block
;
border
:
solid
1px
;
/*box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3); */
border-radius
:
6px
;
border-color
:
#BDBDBD
;
border-radius
:
6px
;
border-color
:
#BDBDBD
;
padding
:
0px
2px
0px
2px
;
margin
:
1px
0px
1px
0px
;
cursor
:
pointer
;
...
...
@@ -251,7 +251,7 @@
}
.gradient
{
background-color
:
#f0f0f8
;
background-color
:
#f0f0f8
;
background-image
:
-webkit-radial-gradient
(
#ffffff
,
#d8d8e0
);
background-image
:
-moz-radial-gradient
(
#ffffff
,
#d8d8e0
);
/*background-color: #434343;*/
/*background-image: linear-gradient(#434343, #282828);*/
...
...
@@ -338,7 +338,11 @@
}
#aUnfold
{
display
:
block
;
width
:
12px
;
height
:
12px
;
background-image
:
url("../img2/fleches-horiz.png")
;
margin
:
0
auto
;
display
:
block
;
width
:
12px
;
height
:
12px
;
background-image
:
url("../img2/fleches-horiz.png")
;
/*margin: 0 auto;*/
}
/*
#saveAs {
...
...
@@ -390,7 +394,7 @@
}
#tips
ul
{
/*list-style:none;*/
padding-left
:
10%
;
padding-left
:
10%
;
}
...
...
static/lib/graphExplorer/tinawebJS/Tinaweb.js
View file @
47e66a79
...
...
@@ -24,17 +24,25 @@
// on window resize
// @param canvasdiv: id of the div (without '#')
function
sigmaLimits
(
canvasdiv
)
{
console
.
log
(
'FUN t.TinawebJS:sigmaLimits'
)
;
function
sigmaLimits
(
canvasdiv
,
SidecolumnIsInvisible
)
{
console
.
log
(
'FUN t.TinawebJS:sigmaLimits
(div='
+
canvasdiv
+
')
'
)
;
var
canvas
=
document
.
getElementById
(
canvasdiv
)
;
var
sidecolumn
=
document
.
getElementById
(
'sidecolumn'
)
;
var
ancho_total
=
window
.
innerWidth
-
sidecolumn
.
offsetWidth
;
var
alto_total
=
window
.
innerHeight
-
sidecolumn
.
offsetTop
;
var
ancho_total
=
-
1
if
(
SidecolumnIsInvisible
)
{
ancho_total
=
window
.
innerWidth
}
else
{
// normal case
ancho_total
=
window
.
innerWidth
-
sidecolumn
.
offsetWidth
;
}
// setting new size
canvas
.
style
.
width
=
ancho_total
-
5
;
canvas
.
style
.
height
=
alto_total
-
5
;
// fyi result
var
pw
=
canvas
.
offsetWidth
;
var
ph
=
canvas
.
offsetHeight
;
...
...
@@ -549,29 +557,40 @@ TinaWebJS = function ( sigmacanvas ) {
// === un/hide leftpanel === //
$
(
"#aUnfold"
).
click
(
function
(
e
)
{
// TODO unify with/without jquery
//SHOW sidecolumn
sidebar
=
$
(
"#sidecolumn"
);
fullwidth
=
$
(
'#fixedtop'
).
width
();
fullwidth
=
window
.
innerWidth
e
.
preventDefault
();
// $("#wrapper").toggleClass("active");
if
(
parseFloat
(
sidebar
.
css
(
"right"
))
<
0
){
sidebar
.
show
()
$
(
"#aUnfold"
).
attr
(
"class"
,
"rightarrow"
);
// apply width from settings on sidecolumn
document
.
getElementById
(
'sidecolumn'
).
style
.
width
=
sidecolumnSize
;
sidebar
.
animate
({
"right"
:
sidebar
.
width
()
+
"px"
},
{
duration
:
400
,
queue
:
false
});
$
(
"#ctlzoom"
).
animate
({
"right"
:
(
sidebar
.
width
()
+
10
)
+
"px"
"right"
:
"0px"
},
{
duration
:
400
,
queue
:
false
});
// $('#sigma-example').width(fullwidth-sidebar.width());
$
(
'#sigma-example'
).
animate
({
"width"
:
fullwidth
-
sidebar
.
width
()
+
"px"
},
{
duration
:
400
,
queue
:
false
});
// $('#sigma-example').animate({
// "width": fullwidth-sidecolumnSize+"px"
// }, { duration: 400, queue: false });
setTimeout
(
function
()
{
// reposition the button inside the column
var
btn
=
document
.
getElementById
(
'unfold'
)
btn
.
style
.
position
=
'initial'
;
btn
.
style
.
top
=
undefined
;
btn
.
style
.
right
=
0
;
$
(
'#unfold'
).
insertBefore
(
'#tips'
);
sigmaLimits
(
"sigma-example"
)
partialGraph
.
resize
();
partialGraph
.
refresh
();
},
400
);
console
.
log
(
'ok'
)
}
else
{
//HIDE sidecolumn
...
...
@@ -580,18 +599,32 @@ TinaWebJS = function ( sigmacanvas ) {
"right"
:
"-"
+
sidebar
.
width
()
+
"px"
},
{
duration
:
400
,
queue
:
false
});
$
(
"#ctlzoom"
).
animate
({
"right"
:
"0px"
},
{
duration
:
400
,
queue
:
false
});
// $('#sigma-example').width(fullwidth);
// $('#sigma-example').animate({
// "width": fullwidth+"px"
// },{ duration: 400, queue: false });
// $('#sigma-example').width(fullwidth);
$
(
'#sigma-example'
).
animate
({
"width"
:
fullwidth
+
"px"
},{
duration
:
400
,
queue
:
false
});
setTimeout
(
function
()
{
partialGraph
.
resize
();
partialGraph
.
refresh
();
// position #aUnfold out of sidecolumn so it remains visible
// var graph = document.getElementById("sigma-example")
var
gtop
=
document
.
getElementById
(
"sidecolumn"
).
offsetTop
+
10
$
(
'#unfold'
).
insertAfter
(
'#sigma-example'
);
var
btn
=
document
.
getElementById
(
'unfold'
)
;
btn
.
style
.
position
=
'fixed'
;
btn
.
style
.
right
=
'20px'
;
btn
.
style
.
top
=
gtop
;
console
.
log
(
'ok'
)
// partialGraph.resize();
sigmaLimits
(
"sigma-example"
,
true
)
partialGraph
.
resize
();
partialGraph
.
refresh
();
sidebar
.
hide
()
},
400
);
}
});
...
...
templates/graphExplorer/explorer.html
View file @
47e66a79
...
...
@@ -32,12 +32,12 @@
#category0
ul
li
{
margin
:
0
12px
12px
0
;
}
#category1
ul
li
{
margin
:
0
12px
12px
0
;
}
/* will be adjusted later to match rendered height of dafixedtop from menu template */
#topspace
{
height
:
90px
;
}
</style>
<!--
<link rel="stylesheet" href="{% static "lib/graphExplorer/libs/bootswatch/css/bootswatch.css" %}">
...
...
@@ -83,7 +83,7 @@
Selector size
<br>
<div
id=
"unranged-value"
class=
"settingslider"
></div>
</a></li>
<li
class=
'basicitem'
><a>
Colors
<br>
...
...
@@ -133,20 +133,20 @@
<div
class=
"col-sm-11 col-md-10 col-lg-10"
>
<div
id=
"search_input_group"
class=
"input-group input-group-sm"
>
<span
class=
"input-group-btn"
>
<button
id=
"searchbutton"
<button
id=
"searchbutton"
title=
"Search the topic in the map"
class=
"btn btn-info"
class=
"btn btn-info"
type=
"button"
>
<span
class=
"glyphicon glyphicon-search"
>
</span>
</button>
</span>
<!-- ########## THE SEARCH BAR ########## -->
<input
id=
"searchinput"
<input
id=
"searchinput"
type=
"text"
class=
"form-control"
class=
"form-control"
placeholder=
"Search"
/>
<!-- #################################### -->
</div>
...
...
@@ -159,7 +159,7 @@
<div
class=
"col-sm-1 col-md-2 col-lg-2"
>
<input
id=
"checkboxdiv"
onclick=
"alertCheckBox(this);"
title=
"Add next search results to current selection"
class=
"btn btn-info"
class=
"btn btn-info"
type=
"checkbox"
></input>
<p
style=
"font-size:75%; line-height:90%"
>
Add
</p>
</div>
...
...
@@ -208,11 +208,7 @@
<!-- <div class="content-header">
<button id="menu-toggle">X</button>
</div> -->
<li>
<div
id=
"unfold"
>
<a
href=
"#"
id=
"aUnfold"
class=
"rightarrow"
></a>
</div>
</li>
<!--
<li>
<a href="#" id="geomapicon" onclick="$('#geomapmodal').modal('show'); callGeomap();">
...
...
@@ -221,7 +217,6 @@
</li>
-->
<li>
<a
href=
"#"
id=
"snapicon"
onclick=
"saveGraphIMG();"
>
<img
title=
"Take a photo!"
width=
"34px"
src=
"{% static "
img
/
camera
.
png
"
%}"
></img>
...
...
@@ -259,6 +254,10 @@
<!-- Sidebar -->
<div
id=
"sidecolumn"
>
<div
id=
"unfold"
>
<!-- button to be replaced by handle when sidecolumn is hidden -->
<a
href=
"#"
id=
"aUnfold"
class=
"rightarrow"
></a>
</div>
<div
id=
"tips"
></div>
<div
id=
"names"
></div>
<div
id=
"ngrams_actions"
></div>
...
...
@@ -482,8 +481,8 @@
// set exact height of topspace
var
dafixedtopHeight
=
$
(
'#dafixedtop'
).
height
()
;
$
(
'#topspace'
).
height
(
dafixedtopHeight
)
;
function
newPopup
(
url
)
{
popupWindow
=
window
.
open
(
url
,
'popUpWindow'
,
'height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=no'
)
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment