Browse Source

very advanced table collapse technology introduced.

flowchartTest
Alex de Mulder 9 years ago
parent
commit
0a53a4e175
8 changed files with 208 additions and 48 deletions
  1. +80
    -2
      docs/css/newdocs.css
  2. BIN
      docs/img/crossword.png
  3. BIN
      docs/img/crosswordStrong.png
  4. BIN
      docs/img/external-link-icons/external-link-icon-white.png
  5. BIN
      docs/img/external-link-icons/external-link-icon.png
  6. +40
    -0
      docs/img/external-link-icons/license.txt
  7. +57
    -0
      docs/js/toggleTable.js
  8. +31
    -46
      docs/network/physics.html

+ 80
- 2
docs/css/newdocs.css View File

@ -7,7 +7,7 @@ body {
/*font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;*/
height:100%;
font-size:16px;
background: url('../../images/crosswordStrong.png') /* Background pattern from subtlepatterns.com */
background: url('../img/crosswordStrong.png') /* Background pattern from subtlepatterns.com */
}
img.icon {
@ -79,7 +79,85 @@ td.properties {
width:150px;
}
p {
max-width:1000px;
}
pre.code {
padding:2px 4px;
font-size:90%;
color:#c7254e;
background-color:#f9f2f4;
border-radius:4px;
border:0px;
}
td.type {
width:150px;
}
tr.hidden {
max-height:0;
/*max-height: 0;*/
overflow: hidden;
}
tr.visible {
/* Set our transitions up. */
-webkit-animation:
fadeIn 250ms ease-in;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
span.caret {
opacity: 0.5;
}
span.right-caret {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid #000000;
display: inline-block;
height: 0;
opacity: 0.5;
vertical-align: top;
width: 0;
margin-left:5px;
margin-top:6px;
}
tr.toggle {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
tr.toggle.collapsible {
background-color: #f7f7f7;
border-left: 3px solid #89b3ff;
}
td.indent {
padding-left:25px !important;
}
td.name {
width:270px;
}

BIN
docs/img/crossword.png View File

Before After
Width: 400  |  Height: 400  |  Size: 43 KiB

BIN
docs/img/crosswordStrong.png View File

Before After
Width: 400  |  Height: 400  |  Size: 123 KiB

BIN
docs/img/external-link-icons/external-link-icon-white.png View File

Before After
Width: 9  |  Height: 9  |  Size: 194 B

BIN
docs/img/external-link-icons/external-link-icon.png View File

Before After
Width: 9  |  Height: 9  |  Size: 205 B

+ 40
- 0
docs/img/external-link-icons/license.txt View File

@ -0,0 +1,40 @@
/**************************************\
Shapes4FREE License
http://www.shapes4free.com/ - visit us to get free photoshop shapes, read our easy-to-understand shapes tutorials and tips, and view beautiful examples of using shapes in all kinds of design
More about the license: http://www.shapes4free.com/license/
\**************************************/
This resource was created by Oksana Khristenko
This resource has been downloaded from Shapes4FREE.com and is free for personal or commercial projects. You may use it for web and print design.
No attribution or backlinks are required, but we would certainly appreciate it if you bookmarked www.shapes4free.com and shared the link to it with your friends:
www.shapes4free.com - free photoshop shapes
You may not resell or distribute this resource. Uploading it to another website
or offering them for download on another website is not allowed. If you would like to feature this resource on
your website or share them with friends, do not link directly to the resource files,
please link to the appropriate page on Shapes4FREE.com where it is possible to download the freebie.
/**************************************\
Shapes4FREE Ëèöåíçèÿ
http://www.shapes4free.com/ - áåñïëàòíûå ôèãóðû äëÿ Ôîòîøîïà, óðîêè è ïîäñêàçêè, à òàêæå êðàñèâûå ïðèìåðû èñïîëüçîâàíèÿ ôèãóð âî âñåõ âèäàõ äèçàéíà
Ëèöåíçèÿ: http://www.shapes4free.com/license-ru/
\**************************************/
Àâòîð: Îêñàíà Õðèñòåíêî
Âñå áåñïëàòíûå ðåñóðñû êîòîðûå ìîæíî ñêà÷àòü íà Shapes4FREE.com, âêëþ÷àÿ ïðîèçâîëüíûå ôèãóðû äëÿ Ôîòîøîïà
(photoshop custom shapes) áåñïëàòíû äëÿ èñïîëüçîâàíèÿ â ëè÷íûõ è êîììåð÷åñêèõ ïðîåêòàõ. Ðàçðåøåíî èñïîëüçîâàòü
áåñïëàòíûå ðåñóðñû Shapes4FREE â âåá äèçàéíå è ïå÷àòíûõ ìàòåðèàëàõ.
Ññûëêà íà ñàéò Shapes4FREE.com íå òðåáóåòñÿ íî ïðèâåòñòâóåòñÿ. Ìû áóäåì ðàäû åñëè âû ðàññêàæåòå î íàñ äðóçüÿì:
www.shapes4free.com - áåñïëàòíûå ôèãóðû äëÿ Ôîòîøîïà
Çàïðåùåíî ïðîäàâàòü èëè ðàñïðîñòðàíÿòü áåñïëàòíûå ðåñóðñû ñîçäàííûå Shapes4FREE.
Çàïðåùåíî çàãðóæàòü èõ íà äðóãèå ñàéòû è ïîçâîëÿòü ïîëüçîâàòåëÿì èõ ñêà÷èâàòü. Åñëè âû õîòèòå ðàññêàçàòü î íàøåì
áåñïëàòíîì ðåñóðñå íà ñàéòå èëè ïîäåëèòüñÿ ñ äðóçüÿìè, íå ñîçäàâàéòå ïðÿìûõ ññûëîê íà ôàéë, ñîçäàéòå ññûëêó íà
ñîîòâåòñòâóþùóþ ñòðàíèöó ñàéòà Shapes4FREE.com ãäå ìîæíî áóäåò ñêà÷àòü ýòîò ðåñóðñ.

+ 57
- 0
docs/js/toggleTable.js View File

@ -0,0 +1,57 @@
/**
* Created by Alex on 4/21/2015.
*/
/**
* it works like this:
*
* the toggle row has the onclick with the table id, the parent name and this. The function will look through all trs with matching parent and check the class
* if hidden, it shows them, else it hides them.
*
* The caret is also flipped and the toggle class is changed.
*
*
<tr class='toggle collapsible' onclick="toggleTable('physicsTable','barnesHut', this);"><td><span parent="barnesHut" class="right-caret"></span> barnesHut</td></tr>
<tr parent="barnesHut" class="hidden"><td>barnesHut.gravitationalConstant</td></tr>
<tr parent="barnesHut" class="hidden"><td>barnesHut.centralGravity</td></tr>
<tr parent="barnesHut" class="hidden"><td>barnesHut.springLength</td></tr>
<tr parent="barnesHut" class="hidden"><td>barnesHut.springConstant</td></tr>
<tr parent="barnesHut" class="hidden"><td>barnesHut.damping</td></tr>
*
*
* @param tableId
* @param parent
* @param clickedRow
*/
function toggleTable(tableId, parent, clickedRow) {
var table = document.getElementById(tableId);
var wasOpen = false;
for (var i = 0, row; row = table.rows[i]; i++) {
if (row.getAttribute('parent') === parent) {
if (row.className === 'hidden') {
row.className = 'visible';
}
else {
row.className = 'hidden';
wasOpen = true;
}
}
}
var spans;
if (wasOpen === true) {
spans = document.getElementsByClassName('caret');
clickedRow.className = 'toggle collapsible';
}
else {
spans = document.getElementsByClassName('right-caret')
clickedRow.className = 'toggle';
}
for (var i = 0; i < spans.length; i++) {
if (spans[i].getAttribute('parent') === parent) {
spans[i].className = wasOpen === true ? 'right-caret' : 'caret';
}
}
}

+ 31
- 46
docs/network/physics.html View File

@ -29,24 +29,9 @@
td.properties {
width:350px;
}
pre.code {
padding:2px 4px;
font-size:90%;
color:#c7254e;
background-color:#f9f2f4;
border-radius:4px;
border:0px;
}
td.type {
width:150px;
}
tr.hidden {
display:none;
}
</style>
<script type="text/javascript" src="../js/toggleTable.js"></script>
</head>
<!-- NAVBAR
================================================== -->
@ -68,7 +53,7 @@
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="../index.html#modules">Modules</a></li>
<li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="../images/external-link-icons/external-link-icon-white.png"></a></li>
<li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="../img/external-link-icons/external-link-icon-white.png"></a></li>
<li><a href="../blog.html">Blog</a></li>
<li><a href="../index.html#download_install">Download</a></li>
<li><a href="../showcase/index.html">Showcase</a></li>
@ -90,38 +75,38 @@
<h3>Options</h3>
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
<table class="moduleTable">
<tr class="header"><td>name</td><td class="type">type</td><td>default</td><td>description</td></tr>
<tr onclick=""><td><span parent="barnesHut" class="caret"></span> barnesHut</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.</td></tr>
<tr parent="barnesHut" class="hidden"><td>barnesHut.gravitationalConstant</td> <td class="mid">Number</td> <td class="mid"><code>-2000</code></td> <td>Gravity attracts. We like repulsion. So the value is negative. If you want the repulsion to be stronger, decrease the value (so -10000, -50000).</td></tr>
<tr parent="barnesHut" class="hidden"><td>barnesHut.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.3</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<tr parent="barnesHut" class="hidden"><td>barnesHut.springLength</td> <td class="mid">Number</td> <td class="mid"><code>95</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr parent="barnesHut" class="hidden"><td>barnesHut.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.04</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr parent="barnesHut" class="hidden"><td>barnesHut.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr><td>repulsion</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>The repulsion model assumes nodes have a simplified repulsion field around them. It's force linearly decreases from 1 (at 0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).</td></tr>
<tr><td>repulsion.nodeDistance</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>This is the range of influence for the repulsion.</td></tr>
<tr><td>repulsion.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.2</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<tr><td>repulsion.springLength</td> <td class="mid">Number</td> <td class="mid"><code>200</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr><td>repulsion.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.05</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr><td>repulsion.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr><td>hierarchicalRepulsion</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>This model is based on the repulsion solver but the levels are taken into account and the forces are normalized.</td></tr>
<tr><td>hierarchicalRepulsion.nodeDistance</td> <td class="mid">Number</td> <td class="mid"><code>120</code></td> <td>This is the range of influence for the repulsion.</td></tr>
<tr><td>hierarchicalRepulsion.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.0'</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<tr><td>hierarchicalRepulsion.springLength</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr><td>hierarchicalRepulsion.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.01</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr><td>hierarchicalRepulsion.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<table class="moduleTable" id="physicsTable">
<tr class="header"><td class="name">name</td><td class="type">type</td><td>default</td><td>description</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('physicsTable','barnesHut', this);"><td><span parent="barnesHut" class="right-caret"></span> barnesHut</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.gravitationalConstant</td> <td class="mid">Number</td> <td class="mid"><code>-2000</code></td> <td>Gravity attracts. We like repulsion. So the value is negative. If you want the repulsion to be stronger, decrease the value (so -10000, -50000).</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.3</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.springLength</td> <td class="mid">Number</td> <td class="mid"><code>95</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.04</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('physicsTable','repulsion');"><td><span parent="repulsion" class="right-caret"></span> repulsion</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>The repulsion model assumes nodes have a simplified repulsion field around them. It's force linearly decreases from 1 (at 0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.nodeDistance</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>This is the range of influence for the repulsion.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.2</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.springLength</td> <td class="mid">Number</td> <td class="mid"><code>200</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.05</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr parent="repulsion" class="hidden"><td class="indent">repulsion.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('physicsTable','hierarchicalRepulsion');"><td><span parent="hierarchicalRepulsion" class="right-caret"></span> hierarchicalRepulsion</td> <td class="mid">Object</td> <td class="mid"><code>Object</code></td> <td>This model is based on the repulsion solver but the levels are taken into account and the forces are normalized.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.nodeDistance</td> <td class="mid">Number</td> <td class="mid"><code>120</code></td> <td>This is the range of influence for the repulsion.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.centralGravity</td> <td class="mid">Number</td> <td class="mid"><code>0.0'</code></td> <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.springLength</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.springConstant</td> <td class="mid">Number</td> <td class="mid"><code>0.01</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
<tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.damping</td> <td class="mid">Number</td> <td class="mid"><code>0.09</code></td> <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
<tr><td>maxVelocity</td> <td class="mid">Number</td> <td class="mid"><code>50</code></td> <td>The physics module limits the maximum velocity of the nodes to increase the time to stabilization. This is the maximium value.</td></tr>
<tr><td>minVelocity</td> <td class="mid">Number</td> <td class="mid"><code>0.1</code></td> <td>Once the minimum velocity is reached for all nodes, we assume the network has been stabilized and the simulation stops.</td></tr>
<tr><td>solver</td> <td class="mid">String</td> <td class="mid"><code>'barnesHut'</code></td><td>You can select your own solver. Possible options: <code>'barnesHut','repulsion','hierarchicalRepulsion'</code>. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here.</td></tr>
<tr><td>stabilization</td> <td class="mid">Object | Boolean</td><td class="mid"><code>Object</code></td> <td>When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.</td></tr>
<tr><td>stabilization.enabled</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>Toggle the stabilization. This is an optional property. If undefined, it is automatically set to true when any of the properties of this object are defined.</td></tr>
<tr><td>stabilization.iterations</td> <td class="mid">Number</td> <td class="mid"><code>1000</code></td> <td>The physics module tries to stabilize the network on load up til a maximum number of iterations defined here. If the network stabilized with less, you are finished before the maximum number.</td></tr>
<tr><td>stabilization.updateInterval</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
<tr><td>stabilization.onlyDynamicEdges</td> <td class="mid">Boolean</td> <td class="mid"><code>false</code></td> <td>If you have predefined the position of all nodes and only want to stabilize the dynamic smooth edges, set this to true. It freezes all nodes except the invisible dynamic smooth curve support nodes. If you want the visible nodes to move and stabilize, do not use this.</td></tr>
<tr><td>stabilization.zoomExtent</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>Toggle whether or not you want the view to zoom to fit all nodes when the stabilization is finished.</td></tr>
<tr class='toggle collapsible' onclick="toggleTable('physicsTable','stabilization');"><td><span parent="stabilization" class="right-caret"></span> stabilization</td> <td class="mid">Object | Boolean</td><td class="mid"><code>Object</code></td> <td>When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.enabled</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>Toggle the stabilization. This is an optional property. If undefined, it is automatically set to true when any of the properties of this object are defined.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.iterations</td> <td class="mid">Number</td> <td class="mid"><code>1000</code></td> <td>The physics module tries to stabilize the network on load up til a maximum number of iterations defined here. If the network stabilized with less, you are finished before the maximum number.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.updateInterval</td> <td class="mid">Number</td> <td class="mid"><code>100</code></td> <td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.onlyDynamicEdges</td> <td class="mid">Boolean</td> <td class="mid"><code>false</code></td> <td>If you have predefined the position of all nodes and only want to stabilize the dynamic smooth edges, set this to true. It freezes all nodes except the invisible dynamic smooth curve support nodes. If you want the visible nodes to move and stabilize, do not use this.</td></tr>
<tr parent="stabilization" class="hidden"><td class="indent">stabilization.zoomExtent</td> <td class="mid">Boolean</td> <td class="mid"><code>true</code></td> <td>Toggle whether or not you want the view to zoom to fit all nodes when the stabilization is finished.</td></tr>
<tr><td>timestep</td> <td class="mid">Number</td> <td class="mid"><code>0.5</code></td> <td>The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.</td></tr>
</table>

Loading…
Cancel
Save