web: updated documentation
* maven project setup * reset layout option * use 0 indexer threads for auto-detection * multi process setting * bookmarking * depth graph * updated menu and shortcuts * updated images
This commit is contained in:
Eberhard Graether
Regular → Executable
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 28 KiB |
+237
-34
@@ -38,20 +38,18 @@
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#nav {
|
||||
position:fixed;
|
||||
.backlink {
|
||||
position: fixed;
|
||||
width: 20%;
|
||||
margin-left: 2%;
|
||||
}
|
||||
|
||||
.tocify {
|
||||
position:static;
|
||||
width: 100%;
|
||||
margin-left: 0px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#nav {
|
||||
.tocify {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -64,19 +62,11 @@
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="col-xs-12 col-sm-3">
|
||||
<div id="nav">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<p><span class="glyphicon glyphicon-arrow-left"></span> <a href="http://www.sourcetrail.com/">back to sourcetrail.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="height:10px;"></div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div id="toc"></div><!-- Our table of contents will be here !-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="height:40px;"></div>
|
||||
<div class="row">
|
||||
<p class="backlink"><span class="glyphicon glyphicon-arrow-left"></span> <a href="http://www.sourcetrail.com/">sourcetrail.com</a></p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="toc"></div><!-- Our table of contents will be here !-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-9 col-md-6">
|
||||
@@ -86,7 +76,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="text-align:center; margin-top: 10px;">
|
||||
<p>Documentation for version 0.11</p>
|
||||
<p>Documentation for version 0.12</p>
|
||||
</div>
|
||||
|
||||
<div class="row" style="height:20px;"></div>
|
||||
@@ -229,11 +219,23 @@
|
||||
<div class="row" style="height:10px;"></div>
|
||||
|
||||
<h4>Project setup for Java</h4>
|
||||
Java projects can currently only be created as Empty Projects. Please follow the descriptions at <a href="#CreateAnEmptyJavaProject">Create an Empty Java Project</a>.
|
||||
|
||||
<strong>Are you using Maven?</strong>
|
||||
|
||||
<p>If you are using Maven you can continue at <a href="#CreateAProjectFromMavenConfiguration">Project creation from Maven</a> to automatically setup your project using your Maven configuration.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-sm-offset-2">
|
||||
<img src="img/project_setup_wizard_start_java.png" style="width:100%;">
|
||||
<img src="img/project_setup_wizard_start_java_maven.png" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<strong>Create empty</strong>
|
||||
If you do not have your project configured using Maven then please continue at <a href="#CreateAnEmptyJavaProject">Create an Empty Java Project</a> and come back here as soon as the project is created.
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-sm-offset-2">
|
||||
<img src="img/project_setup_wizard_start_java_empty.png" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -421,7 +423,7 @@
|
||||
<div class="panel-body">
|
||||
<p>Sourcetrail does two things with the data collected during indexing:</p>
|
||||
<ol>
|
||||
<li>The data is stored in the <code>.sourcetraildb</code> file in the same directory as the <code>.sourcetrailproject</code> file. This database file is used by Sourcetrail to serve its purpose of letting you navigate your source code. And it allows Sourcetrail to reopen the project without reindexing the source code every time.</li>
|
||||
<li>The data is stored in the <code>.srctrldb</code> file in the same directory as the <code>.srctrlprj</code> file. This database file is used by Sourcetrail to serve its purpose of letting you navigate your source code. And it allows Sourcetrail to reopen the project without reindexing the source code every time.</li>
|
||||
<li>If logging is enabled, some of the data gets logged into a log file saved in <a href="#Datafolder">data</a>/logs. These logs can be useful to us for fixing bugs. We might ask for log information on bug reports, but you should only provide it, if your source code is not confidental.</li>
|
||||
</ol>
|
||||
</div>
|
||||
@@ -646,7 +648,11 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Indexer threads</th>
|
||||
<td>Define how many parallel threads are used during indexing.</td>
|
||||
<td>Define how many parallel threads are used during indexing. Setting this value to 0 will cause Sourcetrail to detect the number of available CPU cores and use as many threads for indexing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Multi process C/C++ indexing</th>
|
||||
<td>Enable C/C++ indexer threads to run in a different process. This prevents the application from crashing due to unforseen exceptions while indexing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Sourcetrail Port</th>
|
||||
@@ -664,6 +670,10 @@
|
||||
<th scope="row">JVM Maximum Memory</th>
|
||||
<td>Specify the maximum amount of memory that should be allocated by the indexer's JVM. A value of <code>-1</code> ignores this setting.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Maven Path</th>
|
||||
<td>Only required for indexing projects using Maven. Provide the location of your installed Maven executable. You can also use the auto detection.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Global Include Paths</th>
|
||||
<td>Set header search paths that are used for <strong>all</strong> of your projects (e.g. std headers). An option for automatic detection of these paths is available for Clang, GCC and the Visual Studio compiler. For instructions on how to add paths manually see <a href="#PathListBox">Path List Box</a>. For instructions on how to find the system header paths see <a href="#FindingSystemHeaderLocations">Finding System Header Locations</a>.</td>
|
||||
@@ -708,7 +718,7 @@
|
||||
<tr> <th>Setting</th> <th>Description</th> </tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr> <th scope="row">Sourcetrail Project Name</th> <td>The name of the project. This will also be the name of the <code>.sourcetrailproject</code> file generated by Sourcetrail.</td> </tr>
|
||||
<tr> <th scope="row">Sourcetrail Project Name</th> <td>The name of the project. This will also be the name of the <code>.srctrlprj</code> file generated by Sourcetrail.</td> </tr>
|
||||
<tr> <th scope="row">Sourcetrail Project Location</th> <td>Choose the location of the project file from the dialog.</td> </tr>
|
||||
<tr> <th scope="row">Standard</th> <td>Select the language standard that should be used for indexing your project. Usually the most recent language standard is preselected here. (See <a href="#SupportedLanguages">Language Support</a>)</td> </tr>
|
||||
</tbody>
|
||||
@@ -852,7 +862,7 @@
|
||||
<tr> <th>Setting</th> <th>Description</th> </tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr> <th scope="row">Sourcetrail Project Name</th> <td>The name of the project. This will also be the name of the <code>.sourcetrailproject</code> file generated by Sourcetrail.</td> </tr>
|
||||
<tr> <th scope="row">Sourcetrail Project Name</th> <td>The name of the project. This will also be the name of the <code>.srctrlprj</code> file generated by Sourcetrail.</td> </tr>
|
||||
<tr> <th scope="row">Sourcetrail Project Location</th> <td>Choose the location of the project file from the dialog.</td> </tr>
|
||||
<tr> <th scope="row">Compilation Database</th> <td>Select the compilation database <code>.json</code> for the project. Sourcetrail will index the project based on the compile commands in this file. If the compilation database changes you can <a href="#Refresh">Refresh</a> Sourcetrail to the new files.</td> </tr>
|
||||
</tbody>
|
||||
@@ -879,12 +889,12 @@
|
||||
<tr> <th>Setting</th> <th>Description</th> </tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr> <th scope="row">Source Files</th> <td>Clicking <strong>show source files</strong> will show you a list of all source files in the compilation database.</td> </tr>
|
||||
<tr> <th scope="row">Indexed Header Paths</th> <td>Specify one or multiple locations that contain the header files to the source files defined in the compilation database. (For instructions on how to add paths see <a href="#PathListBox">Path List Box</a>.)</td> </tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong>Interactions:</strong>
|
||||
<ul>
|
||||
<li>Clicking <var>show source files</var> will show you a list of all source files in the compilation database.</li>
|
||||
<li>Clicking <var>Select From Include Paths</var> will display a dialog showing a list of all the Include Paths used within the Compilation Database. You can select paths and all headers that are included within these paths will also get indexed.</li>
|
||||
<li>Clicking <var>Cancel</var> or pressing <var>ESC</var> will close the window and abort the setup process.</li>
|
||||
<li>Clicking <var>Next</var> will take you to the next step of the setup process.</li>
|
||||
@@ -930,7 +940,7 @@
|
||||
<tr> <th>Setting</th> <th>Description</th> </tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr> <th scope="row">Sourcetrail Project Name</th> <td>The name of the project. This will also be the name of the <code>.sourcetrailproject</code> file generated by Sourcetrail.</td> </tr>
|
||||
<tr> <th scope="row">Sourcetrail Project Name</th> <td>The name of the project. This will also be the name of the <code>.srctrlprj</code> file generated by Sourcetrail.</td> </tr>
|
||||
<tr> <th scope="row">Sourcetrail Project Location</th> <td>Choose the location of the project file from the dialog.</td> </tr>
|
||||
<tr> <th scope="row">Standard</th> <td>Select the language standard that should be used for indexing your project. We currently only support Java 8</td> </tr>
|
||||
</tbody>
|
||||
@@ -993,6 +1003,91 @@
|
||||
|
||||
<div class="row" style="height:20px;"></div>
|
||||
|
||||
<h4 id="CreateAProjectFromMavenConfiguration">Create a Java Project from your Maven Configuration</h4>
|
||||
<p>If you are using a Maven configuration to manage and build your project use this approach to create a Sourcetrail project.</p>
|
||||
|
||||
<strong>Maven Project Meta Data</strong>
|
||||
<p>In the first step you need to enter meta information about the project.</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-sm-offset-2">
|
||||
<img src="img/project_setup_wizard_empty_meta_java.png" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr> <th>Setting</th> <th>Description</th> </tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr> <th scope="row">Sourcetrail Project Name</th> <td>The name of the project. This will also be the name of the <code>.srctrlprj</code> file generated by Sourcetrail.</td> </tr>
|
||||
<tr> <th scope="row">Sourcetrail Project Location</th> <td>Choose the location of the project file from the dialog.</td> </tr>
|
||||
<tr> <th scope="row">Standard</th> <td>Select the language standard that should be used for indexing your project. We currently only support Java 8</td> </tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong>Interactions:</strong>
|
||||
<ul>
|
||||
<li>Clicking <var>Cancel</var> or pressing <var>ESC</var> will close the window and abort the setup process.</li>
|
||||
<li>Clicking <var>Next</var> will take you to the next step of the setup process.</li>
|
||||
<li>Clicking <var>Previous</var> will take you to the previous step of the setup process. All the information you entered will be saved.</li>
|
||||
</ul>
|
||||
|
||||
<div class="row" style="height:20px;"></div>
|
||||
|
||||
<strong>Maven Project Indexed Paths</strong>
|
||||
<p>In the first step you need to enter meta information about the project.</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-10 col-sm-offset-1">
|
||||
<img src="img/project_setup_wizard_java_maven.png" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr> <th>Setting</th> <th>Description</th> </tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr> <th scope="row">Maven Project File</th> <td> The path to the <code>pom</code> file in the root folder of your Maven project. </tr>
|
||||
<tr> <th scope="row">Should Index Tests</th> <td> This checkbox indicates whether or not Sourcetrail indexes the test code that is part of your Maven project. </tr>
|
||||
<tr> <th scope="row">Intermediate Dependencies Directory</th> <td>Directory where Sourcetrail stores all of the project's <code>.jar</code> dependencies.</td> </tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong>Interactions:</strong>
|
||||
<ul>
|
||||
<li>Clicking <var>show source files</var> will show you a list of all source files that have been detected in the Maven project. If <var>Should Index Tests</var> is checked this list also includes the test source files. </li>
|
||||
<li>Clicking <var>Cancel</var> or pressing <var>ESC</var> will close the window and abort the setup process.</li>
|
||||
<li>Clicking <var>Next</var> will take you to the next step of the setup process.</li>
|
||||
<li>Clicking <var>Previous</var> will take you to the previous step of the setup process.</li>
|
||||
</ul>
|
||||
|
||||
<div class="row" style="height:20px;"></div>
|
||||
|
||||
<strong>Advanced Settings</strong>
|
||||
<p>In this dialog you can enter additional settings. You can define source file extentions and you can exclude certain paths or files from indexing.</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-10 col-sm-offset-1">
|
||||
<img src="img/project_setup_wizard_advanced_java.png" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr> <th>Setting</th> <th>Description</th> </tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr> <th scope="row">Source File Extensions</th> <td>Define extensions for source files including the dot e.g. <code>.cpp</code> or <code>.java</code></td> </tr>
|
||||
<tr> <th scope="row">Exclude Paths</th> <td>Exclude Paths define the files and directories that will be left out from indexing. (For instructions on how to add paths see <a href="#PathListBox">Path List Box</a>.)</td> </tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong>Interactions:</strong>
|
||||
<ul>
|
||||
<li>Clicking <var>Cancel</var> or pressing <var>ESC</var> will close the window and abort the setup process.</li>
|
||||
<li>Clicking <var>Next</var> will take you to the next step of the setup process.</li>
|
||||
<li>Clicking <var>Previous</var> will take you to the previous step of the setup process. All the information you entered will be saved.</li>
|
||||
</ul>
|
||||
|
||||
<div class="callout callout-info">
|
||||
<p>After this step the <a href="#NewProjectSummary">New Project Summary</a> will appear as last step in the project creation proccess.</p>
|
||||
</div>
|
||||
|
||||
<div class="row" style="height:20px;"></div>
|
||||
|
||||
<h3>New Project Summary</h3>
|
||||
<p>This window appears at the end of the <a href = "ProjectSetupWizard">Project Setup Wizard</a> to summarize all the information entered before. It is the same as the <a href="#EditProjectWindow">Edit Project Window</a>.</p>
|
||||
|
||||
@@ -1272,7 +1367,31 @@
|
||||
<strong>Reset font size</strong>
|
||||
<ul>
|
||||
<li>Shortcut: <a href="#Shortcuts">Reset font size</a></li>
|
||||
<li>Decrease the font size to the original size.</li>
|
||||
<li>Resets the font size to the original size.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Reset window layout</strong>
|
||||
<ul>
|
||||
<li>Resets all the dock widgets to their original layout.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Bookmarks</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Bookmark Active Symbol</strong>
|
||||
<ul>
|
||||
<li>Shortcut: <a href="#Shortcuts">Bookmark Active Symbol</a></li>
|
||||
<li>Opens the <a href="#BookmarkCreator">Bookmark Creator</a> dialog create a new bookmark.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bookmark Manager</strong>
|
||||
<ul>
|
||||
<li>Shortcut: <a href="#Shortcuts">Bookmark Manager</a></li>
|
||||
<li>Opens the <a href="#BookmarkManager">Bookmark Manager</a> dialog for viewing all bookmarks.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -1438,15 +1557,27 @@
|
||||
<td><kbd>Cmd + 0</kbd></td>
|
||||
<td><kbd>Ctrl + 0</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Bookmark Active Symbol</th>
|
||||
<td><kbd>Ctrl + D</kbd></td>
|
||||
<td><kbd>Cmd + D</kbd></td>
|
||||
<td><kbd>Ctrl + D</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Bookmark Manager</th>
|
||||
<td><kbd>Ctrl + B</kbd></td>
|
||||
<td><kbd>Cmd + B</kbd></td>
|
||||
<td><kbd>Ctrl + B</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="row" style="height:40px;"></div>
|
||||
|
||||
<h2>Graph View</h2>
|
||||
<p>The graph view visualizes the currently selected symbol and all its relationships to other symbols as an interactive graph visualization.</p>
|
||||
<p>The graph view visualizes the currently selected symbol and all its relationships to other symbols as an interactive graph visualization. You can also display whole call graphs, inheritance chains or include trees by using the toolbar in the top left. Read more about at <a href="#Depth Graph">Depth Graph</a>.</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-sm-offset-2">
|
||||
<div class="col-sm-10 col-sm-offset-1">
|
||||
<img src="img/graph_view.png" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
@@ -1460,7 +1591,7 @@
|
||||
<strong>Zooming:</strong>
|
||||
<ul>
|
||||
<li>Press the <kbd>+</kbd> and <kbd>-</kbd> buttons in the lower left corner.</li>
|
||||
<li>Hold <kbd>Shift</kbd> and scroll with mouse wheel or mouse pad.</li>
|
||||
<li>Hold <kbd>Ctrl/Cmd</kbd> and scroll with mouse wheel or mouse pad.</li>
|
||||
<li>Press <kbd>Shift + W</kbd> or <kbd>Shift + S</kbd>.</li>
|
||||
<li>Press <kbd>0</kbd> to reset zoom.</li>
|
||||
</ul>
|
||||
@@ -1518,6 +1649,22 @@
|
||||
<li>Hover an edge to see a tooltip that displays the edge’s type.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Depth Graph</h3>
|
||||
<p>Using the toolbar in the top left you can display whole call graphs, inheritance chains or include trees for the currently active symbol if the right symbol type is currently active.</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<img src="img/call_graph.png" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<strong>Interactions:</strong>
|
||||
<ul>
|
||||
<li>Click the arrow button to expand/collapse the <var>Depth Graph</var> controls.</li>
|
||||
<li>Click the <var>Depth Graph</var> buttons to show a graph or depending/dependent nodes.</li>
|
||||
<li>Change the slider position to change the maximum depth of the graph. Moving it to the top will use infinite depth.</li>
|
||||
<li>Click on a node to activate it.</li>
|
||||
<li>Click on an edge to show it's source location in the <a href="#CodeView">Code View</a>.</li>
|
||||
</ul>
|
||||
|
||||
<div class="row" style="height:40px;"></div>
|
||||
|
||||
<h2>Code View</h2>
|
||||
@@ -1605,7 +1752,7 @@
|
||||
<h3>Back & Forward</h3>
|
||||
<p>The left <var>Backward</var> button lets you undo your last navigation actions (see <a href="#Back">Back</a>) and the right <var>Forward</var> button lets you redo your undone navigation actions again (see <a href="#Forward">Forward</a>). Both buttons are only enabled when the respective actions are available at the moment.</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-2 col-xs-offset-5">
|
||||
<div class="col-xs-3 col-xs-offset-4">
|
||||
<img src="img/undo_redo_buttons.png" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
@@ -1694,6 +1841,62 @@
|
||||
<li>Start a query with <code>??</code> to do a case-sensitive full text search.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Bookmarking Buttons</h3>
|
||||
<p>The <var>Bookmark Active Symbol</var> button on the left opens the <a href="#BookmarkCreator">Bookmark Creator</a> to create a new bookmark. The <var>Bookmark Manager</var> button on the right is used to display the <a href="#BookmarkManager">Bookmark Manager</a> for activating and editing your bookmarks.</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-3 col-xs-offset-4">
|
||||
<img src="img/bookmark_buttons.png" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<strong>Interactions:</strong>
|
||||
<ul>
|
||||
<li>Hover the buttons to see a tool tip.</li>
|
||||
<li>Press the buttons to execute the respective action.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Bookmark Creator</h3>
|
||||
<p>Use the <var>Bookmark Creator</var> to create or edit bookmarks.</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-8 col-xs-offset-2">
|
||||
<img src="img/bookmark_creator.png" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr> <th>Setting</th> <th>Description</th> </tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr> <th scope="row">Name</th> <td>The name of the bookmark. Initially the name of the node or edge is used.</td> </tr>
|
||||
<tr> <th scope="row">Comment</th> <td>Add an optional comment to the bookmark.</td> </tr>
|
||||
<tr> <th scope="row">Category</th> <td>Add the bookmark to a certain category. Bookmarks with the same category are grouped together in the <a href="#BookmarkManager">Bookmark Manager</a>.</td> </tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong>Interactions:</strong>
|
||||
<ul>
|
||||
<li>Press <var>Cancel</var> to close without changes.</li>
|
||||
<li>Press <var>Create/Save</var> to save the bookmark or apply the changes.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Bookmark Manager</h3>
|
||||
<p>Use the <var>Bookmark Manager</var> to view and activate your bookmarks. Bookmarks are displayed as lines below their respective category. If a bookmark does not have a category it will be placed within the <var>default</var> category. The buttons for removing/editing categories or bookmarks are only visible when hovering the respective line. Bookmark information is stored within a separate <code>.srctrlbm</code> file next to your <code>.srctrlprj</code> project file.</p>
|
||||
<div class="row">
|
||||
<div class="col-xs-10 col-xs-offset-1">
|
||||
<img src="img/bookmark_manager.png" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
<strong>Interactions:</strong>
|
||||
<ul>
|
||||
<li>Activate bookmarks by clicking on the name.</li>
|
||||
<li>Open/Collapse the bookmark comment by clicking within the bookmark line.</li>
|
||||
<li>Click the <var>Edit</var> button to change the contents of the bookmark.</li>
|
||||
<li>Click the <var>Delete</var> button at a bookmark to remove the bookmark.</li>
|
||||
<li>Open/Collapse categories by clicking in their line.</li>
|
||||
<li>Click the <var>Delete</var> button at a category to remove the category and all bookmarks within.</li>
|
||||
<li>Change the <var>Show</var> filter to switch between display of nodes and/or edges.</li>
|
||||
<li>Change the <var>Sorting</var> to change the order of bookmarks within their categories.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="row" style="height:40px;"></div>
|
||||
|
||||
<h2>Status View</h2>
|
||||
@@ -2135,7 +2338,7 @@
|
||||
|
||||
<script src="js/jquery-1.12.0.min.js"></script>
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
<script src="js/jquery.tocify.js"></script>
|
||||
<script src="js/jquery.tocify.min.js"></script>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
@@ -1,988 +0,0 @@
|
||||
/* jquery Tocify - v1.9.0 - 2013-10-01
|
||||
* http://www.gregfranko.com/jquery.tocify.js/
|
||||
* Copyright (c) 2013 Greg Franko; Licensed MIT */
|
||||
|
||||
// Immediately-Invoked Function Expression (IIFE) [Ben Alman Blog Post](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) that calls another IIFE that contains all of the plugin logic. I used this pattern so that anyone viewing this code would not have to scroll to the bottom of the page to view the local parameters that were passed to the main IIFE.
|
||||
(function(tocify) {
|
||||
|
||||
// ECMAScript 5 Strict Mode: [John Resig Blog Post](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/)
|
||||
"use strict";
|
||||
|
||||
// Calls the second IIFE and locally passes in the global jQuery, window, and document objects
|
||||
tocify(window.jQuery, window, document);
|
||||
|
||||
}
|
||||
|
||||
// Locally passes in `jQuery`, the `window` object, the `document` object, and an `undefined` variable. The `jQuery`, `window` and `document` objects are passed in locally, to improve performance, since javascript first searches for a variable match within the local variables set before searching the global variables set. All of the global variables are also passed in locally to be minifier friendly. `undefined` can be passed in locally, because it is not a reserved word in JavaScript.
|
||||
(function($, window, document, undefined) {
|
||||
|
||||
// ECMAScript 5 Strict Mode: [John Resig Blog Post](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/)
|
||||
"use strict";
|
||||
|
||||
var tocClassName = "tocify",
|
||||
tocClass = "." + tocClassName,
|
||||
tocFocusClassName = "tocify-focus",
|
||||
tocHoverClassName = "tocify-hover",
|
||||
hideTocClassName = "tocify-hide",
|
||||
hideTocClass = "." + hideTocClassName,
|
||||
headerClassName = "tocify-header",
|
||||
headerClass = "." + headerClassName,
|
||||
subheaderClassName = "tocify-subheader",
|
||||
subheaderClass = "." + subheaderClassName,
|
||||
itemClassName = "tocify-item",
|
||||
itemClass = "." + itemClassName,
|
||||
extendPageClassName = "tocify-extend-page",
|
||||
extendPageClass = "." + extendPageClassName;
|
||||
|
||||
// Calling the jQueryUI Widget Factory Method
|
||||
$.widget("toc.tocify", {
|
||||
|
||||
//Plugin version
|
||||
version: "1.9.0",
|
||||
|
||||
// These options will be used as defaults
|
||||
options: {
|
||||
|
||||
// **context**: Accepts String: Any jQuery selector
|
||||
// The container element that holds all of the elements used to generate the table of contents
|
||||
context: "body",
|
||||
|
||||
// **ignoreSelector**: Accepts String: Any jQuery selector
|
||||
// A selector to any element that would be matched by selectors that you wish to be ignored
|
||||
ignoreSelector: null,
|
||||
|
||||
// **selectors**: Accepts an Array of Strings: Any jQuery selectors
|
||||
// The element's used to generate the table of contents. The order is very important since it will determine the table of content's nesting structure
|
||||
selectors: "h1, h2, h3",
|
||||
|
||||
// **showAndHide**: Accepts a boolean: true or false
|
||||
// Used to determine if elements should be shown and hidden
|
||||
showAndHide: true,
|
||||
|
||||
// **showEffect**: Accepts String: "none", "fadeIn", "show", or "slideDown"
|
||||
// Used to display any of the table of contents nested items
|
||||
showEffect: "slideDown",
|
||||
|
||||
// **showEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
|
||||
// The time duration of the show animation
|
||||
showEffectSpeed: "medium",
|
||||
|
||||
// **hideEffect**: Accepts String: "none", "fadeOut", "hide", or "slideUp"
|
||||
// Used to hide any of the table of contents nested items
|
||||
hideEffect: "slideUp",
|
||||
|
||||
// **hideEffectSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
|
||||
// The time duration of the hide animation
|
||||
hideEffectSpeed: "medium",
|
||||
|
||||
// **smoothScroll**: Accepts a boolean: true or false
|
||||
// Determines if a jQuery animation should be used to scroll to specific table of contents items on the page
|
||||
smoothScroll: true,
|
||||
|
||||
// **smoothScrollSpeed**: Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
|
||||
// The time duration of the smoothScroll animation
|
||||
smoothScrollSpeed: "medium",
|
||||
|
||||
// **scrollTo**: Accepts Number (pixels)
|
||||
// The amount of space between the top of page and the selected table of contents item after the page has been scrolled
|
||||
scrollTo: 0,
|
||||
|
||||
// **showAndHideOnScroll**: Accepts a boolean: true or false
|
||||
// Determines if table of contents nested items should be shown and hidden while scrolling
|
||||
showAndHideOnScroll: true,
|
||||
|
||||
// **highlightOnScroll**: Accepts a boolean: true or false
|
||||
// Determines if table of contents nested items should be highlighted (set to a different color) while scrolling
|
||||
highlightOnScroll: true,
|
||||
|
||||
// **highlightOffset**: Accepts a number
|
||||
// The offset distance in pixels to trigger the next active table of contents item
|
||||
highlightOffset: 40,
|
||||
|
||||
// **theme**: Accepts a string: "bootstrap", "jqueryui", or "none"
|
||||
// Determines if Twitter Bootstrap, jQueryUI, or Tocify classes should be added to the table of contents
|
||||
theme: "bootstrap",
|
||||
|
||||
// **extendPage**: Accepts a boolean: true or false
|
||||
// If a user scrolls to the bottom of the page and the page is not tall enough to scroll to the last table of contents item, then the page height is increased
|
||||
extendPage: true,
|
||||
|
||||
// **extendPageOffset**: Accepts a number: pixels
|
||||
// How close to the bottom of the page a user must scroll before the page is extended
|
||||
extendPageOffset: 100,
|
||||
|
||||
// **history**: Accepts a boolean: true or false
|
||||
// Adds a hash to the page url to maintain history
|
||||
history: true,
|
||||
|
||||
// **scrollHistory**: Accepts a boolean: true or false
|
||||
// Adds a hash to the page url, to maintain history, when scrolling to a TOC item
|
||||
scrollHistory: false,
|
||||
|
||||
// **hashGenerator**: How the hash value (the anchor segment of the URL, following the
|
||||
// # character) will be generated.
|
||||
//
|
||||
// "compact" (default) - #CompressesEverythingTogether
|
||||
// "pretty" - #looks-like-a-nice-url-and-is-easily-readable
|
||||
// function(text, element){} - Your own hash generation function that accepts the text as an
|
||||
// argument, and returns the hash value.
|
||||
hashGenerator: "compact",
|
||||
|
||||
// **highlightDefault**: Accepts a boolean: true or false
|
||||
// Set's the first TOC item as active if no other TOC item is active.
|
||||
highlightDefault: true
|
||||
|
||||
},
|
||||
|
||||
// _Create
|
||||
// -------
|
||||
// Constructs the plugin. Only called once.
|
||||
_create: function() {
|
||||
|
||||
var self = this;
|
||||
|
||||
self.extendPageScroll = true;
|
||||
|
||||
// Internal array that keeps track of all TOC items (Helps to recognize if there are duplicate TOC item strings)
|
||||
self.items = [];
|
||||
|
||||
// Generates the HTML for the dynamic table of contents
|
||||
self._generateToc();
|
||||
|
||||
// Adds CSS classes to the newly generated table of contents HTML
|
||||
self._addCSSClasses();
|
||||
|
||||
self.webkit = (function() {
|
||||
|
||||
for(var prop in window) {
|
||||
|
||||
if(prop) {
|
||||
|
||||
if(prop.toLowerCase().indexOf("webkit") !== -1) {
|
||||
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
}());
|
||||
|
||||
// Adds jQuery event handlers to the newly generated table of contents
|
||||
self._setEventHandlers();
|
||||
|
||||
// Binding to the Window load event to make sure the correct scrollTop is calculated
|
||||
$(window).load(function() {
|
||||
|
||||
// Sets the active TOC item
|
||||
self._setActiveElement(true);
|
||||
|
||||
// Once all animations on the page are complete, this callback function will be called
|
||||
$("html, body").promise().done(function() {
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
self.extendPageScroll = false;
|
||||
|
||||
},0);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// _generateToc
|
||||
// ------------
|
||||
// Generates the HTML for the dynamic table of contents
|
||||
_generateToc: function() {
|
||||
|
||||
// _Local variables_
|
||||
|
||||
// Stores the plugin context in the self variable
|
||||
var self = this,
|
||||
|
||||
// All of the HTML tags found within the context provided (i.e. body) that match the top level jQuery selector above
|
||||
firstElem,
|
||||
|
||||
// Instantiated variable that will store the top level newly created unordered list DOM element
|
||||
ul,
|
||||
ignoreSelector = self.options.ignoreSelector;
|
||||
|
||||
// If the selectors option has a comma within the string
|
||||
if(this.options.selectors.indexOf(",") !== -1) {
|
||||
|
||||
// Grabs the first selector from the string
|
||||
firstElem = $(this.options.context).find(this.options.selectors.replace(/ /g,"").substr(0, this.options.selectors.indexOf(",")));
|
||||
|
||||
}
|
||||
|
||||
// If the selectors option does not have a comman within the string
|
||||
else {
|
||||
|
||||
// Grabs the first selector from the string and makes sure there are no spaces
|
||||
firstElem = $(this.options.context).find(this.options.selectors.replace(/ /g,""));
|
||||
|
||||
}
|
||||
|
||||
if(!firstElem.length) {
|
||||
|
||||
self.element.addClass(hideTocClassName);
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
self.element.addClass(tocClassName);
|
||||
|
||||
// Loops through each top level selector
|
||||
firstElem.each(function(index) {
|
||||
|
||||
//If the element matches the ignoreSelector then we skip it
|
||||
if($(this).is(ignoreSelector)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Creates an unordered list HTML element and adds a dynamic ID and standard class name
|
||||
ul = $("<ul/>", {
|
||||
"id": headerClassName + index,
|
||||
"class": headerClassName
|
||||
}).
|
||||
|
||||
// Appends a top level list item HTML element to the previously created HTML header
|
||||
append(self._nestElements($(this), index));
|
||||
|
||||
// Add the created unordered list element to the HTML element calling the plugin
|
||||
self.element.append(ul);
|
||||
|
||||
// Finds all of the HTML tags between the header and subheader elements
|
||||
$(this).nextUntil(this.nodeName.toLowerCase()).each(function() {
|
||||
|
||||
// If there are no nested subheader elemements
|
||||
if($(this).find(self.options.selectors).length === 0) {
|
||||
|
||||
// Loops through all of the subheader elements
|
||||
$(this).filter(self.options.selectors).each(function() {
|
||||
|
||||
//If the element matches the ignoreSelector then we skip it
|
||||
if($(this).is(ignoreSelector)) {
|
||||
return;
|
||||
}
|
||||
|
||||
self._appendSubheaders.call(this, self, ul);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// If there are nested subheader elements
|
||||
else {
|
||||
|
||||
// Loops through all of the subheader elements
|
||||
$(this).find(self.options.selectors).each(function() {
|
||||
|
||||
//If the element matches the ignoreSelector then we skip it
|
||||
if($(this).is(ignoreSelector)) {
|
||||
return;
|
||||
}
|
||||
|
||||
self._appendSubheaders.call(this, self, ul);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
_setActiveElement: function(pageload) {
|
||||
|
||||
var self = this,
|
||||
|
||||
hash = window.location.hash.substring(1),
|
||||
|
||||
elem = self.element.find('li[data-unique="' + hash + '"]');
|
||||
|
||||
if(hash.length) {
|
||||
|
||||
// Removes highlighting from all of the list item's
|
||||
self.element.find("." + self.focusClass).removeClass(self.focusClass);
|
||||
|
||||
// Highlights the current list item that was clicked
|
||||
elem.addClass(self.focusClass);
|
||||
|
||||
// If the showAndHide option is true
|
||||
if(self.options.showAndHide) {
|
||||
|
||||
// Triggers the click event on the currently focused TOC item
|
||||
elem.click();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
else {
|
||||
|
||||
// Removes highlighting from all of the list item's
|
||||
self.element.find("." + self.focusClass).removeClass(self.focusClass);
|
||||
|
||||
if(!hash.length && pageload && self.options.highlightDefault) {
|
||||
|
||||
// Highlights the first TOC item if no other items are highlighted
|
||||
self.element.find(itemClass).first().addClass(self.focusClass);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return self;
|
||||
|
||||
},
|
||||
|
||||
// _nestElements
|
||||
// -------------
|
||||
// Helps create the table of contents list by appending nested list items
|
||||
_nestElements: function(self, index) {
|
||||
|
||||
var arr, item, hashValue;
|
||||
|
||||
arr = $.grep(this.items, function (item) {
|
||||
|
||||
return item === self.text();
|
||||
|
||||
});
|
||||
|
||||
// If there is already a duplicate TOC item
|
||||
if(arr.length) {
|
||||
|
||||
// Adds the current TOC item text and index (for slight randomization) to the internal array
|
||||
this.items.push(self.text() + index);
|
||||
|
||||
}
|
||||
|
||||
// If there not a duplicate TOC item
|
||||
else {
|
||||
|
||||
// Adds the current TOC item text to the internal array
|
||||
this.items.push(self.text());
|
||||
|
||||
}
|
||||
|
||||
hashValue = this._generateHashValue(arr, self, index);
|
||||
|
||||
// Appends a list item HTML element to the last unordered list HTML element found within the HTML element calling the plugin
|
||||
item = $("<li/>", {
|
||||
|
||||
// Sets a common class name to the list item
|
||||
"class": itemClassName,
|
||||
|
||||
"data-unique": hashValue
|
||||
|
||||
}).append($("<a/>", {
|
||||
|
||||
"text": self.text()
|
||||
|
||||
}));
|
||||
|
||||
// Adds an HTML anchor tag before the currently traversed HTML element
|
||||
self.before($("<div/>", {
|
||||
|
||||
// Sets a name attribute on the anchor tag to the text of the currently traversed HTML element (also making sure that all whitespace is replaced with an underscore)
|
||||
"id": hashValue,
|
||||
"name": hashValue,
|
||||
|
||||
"data-unique": hashValue
|
||||
|
||||
}));
|
||||
|
||||
return item;
|
||||
|
||||
},
|
||||
|
||||
// _generateHashValue
|
||||
// ------------------
|
||||
// Generates the hash value that will be used to refer to each item.
|
||||
_generateHashValue: function(arr, self, index) {
|
||||
|
||||
var hashValue = "",
|
||||
hashGeneratorOption = this.options.hashGenerator;
|
||||
|
||||
if (hashGeneratorOption === "pretty") {
|
||||
|
||||
// prettify the text
|
||||
hashValue = self.text().toLowerCase().replace(/\s/g, "-");
|
||||
|
||||
// fix double hyphens
|
||||
while (hashValue.indexOf("--") > -1) {
|
||||
hashValue = hashValue.replace(/--/g, "-");
|
||||
}
|
||||
|
||||
// fix colon-space instances
|
||||
while (hashValue.indexOf(":-") > -1) {
|
||||
hashValue = hashValue.replace(/:-/g, "-");
|
||||
}
|
||||
|
||||
} else if (typeof hashGeneratorOption === "function") {
|
||||
|
||||
// call the function
|
||||
hashValue = hashGeneratorOption(self.text(), self);
|
||||
|
||||
} else {
|
||||
|
||||
// compact - the default
|
||||
hashValue = self.text().replace(/\s/g, "");
|
||||
|
||||
}
|
||||
|
||||
// add the index if we need to
|
||||
if (arr.length) { hashValue += ""+index; }
|
||||
|
||||
// return the value
|
||||
return hashValue;
|
||||
|
||||
},
|
||||
|
||||
// _appendElements
|
||||
// ---------------
|
||||
// Helps create the table of contents list by appending subheader elements
|
||||
|
||||
_appendSubheaders: function(self, ul) {
|
||||
|
||||
// The current element index
|
||||
var index = $(this).index(self.options.selectors),
|
||||
|
||||
// Finds the previous header DOM element
|
||||
previousHeader = $(self.options.selectors).eq(index - 1),
|
||||
|
||||
currentTagName = +$(this).prop("tagName").charAt(1),
|
||||
|
||||
previousTagName = +previousHeader.prop("tagName").charAt(1),
|
||||
|
||||
lastSubheader;
|
||||
|
||||
// If the current header DOM element is smaller than the previous header DOM element or the first subheader
|
||||
if(currentTagName < previousTagName) {
|
||||
|
||||
// Selects the last unordered list HTML found within the HTML element calling the plugin
|
||||
self.element.find(subheaderClass + "[data-tag=" + currentTagName + "]").last().append(self._nestElements($(this), index));
|
||||
|
||||
}
|
||||
|
||||
// If the current header DOM element is the same type of header(eg. h4) as the previous header DOM element
|
||||
else if(currentTagName === previousTagName) {
|
||||
|
||||
ul.find(itemClass).last().after(self._nestElements($(this), index));
|
||||
|
||||
}
|
||||
|
||||
else {
|
||||
|
||||
// Selects the last unordered list HTML found within the HTML element calling the plugin
|
||||
ul.find(itemClass).last().
|
||||
|
||||
// Appends an unorderedList HTML element to the dynamic `unorderedList` variable and sets a common class name
|
||||
after($("<ul/>", {
|
||||
|
||||
"class": subheaderClassName,
|
||||
|
||||
"data-tag": currentTagName
|
||||
|
||||
})).next(subheaderClass).
|
||||
|
||||
// Appends a list item HTML element to the last unordered list HTML element found within the HTML element calling the plugin
|
||||
append(self._nestElements($(this), index));
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// _setEventHandlers
|
||||
// ----------------
|
||||
// Adds jQuery event handlers to the newly generated table of contents
|
||||
_setEventHandlers: function() {
|
||||
|
||||
// _Local variables_
|
||||
|
||||
// Stores the plugin context in the self variable
|
||||
var self = this,
|
||||
|
||||
// Instantiates a new variable that will be used to hold a specific element's context
|
||||
$self,
|
||||
|
||||
// Instantiates a new variable that will be used to determine the smoothScroll animation time duration
|
||||
duration;
|
||||
|
||||
// Event delegation that looks for any clicks on list item elements inside of the HTML element calling the plugin
|
||||
this.element.on("click.tocify", "li", function(event) {
|
||||
|
||||
if(self.options.history) {
|
||||
|
||||
window.location.hash = $(this).attr("data-unique");
|
||||
|
||||
}
|
||||
|
||||
// Removes highlighting from all of the list item's
|
||||
self.element.find("." + self.focusClass).removeClass(self.focusClass);
|
||||
|
||||
// Highlights the current list item that was clicked
|
||||
$(this).addClass(self.focusClass);
|
||||
|
||||
// If the showAndHide option is true
|
||||
if(self.options.showAndHide) {
|
||||
|
||||
var elem = $('li[data-unique="' + $(this).attr("data-unique") + '"]');
|
||||
|
||||
self._triggerShow(elem);
|
||||
|
||||
}
|
||||
|
||||
self._scrollTo($(this));
|
||||
|
||||
});
|
||||
|
||||
// Mouseenter and Mouseleave event handlers for the list item's within the HTML element calling the plugin
|
||||
this.element.find("li").on({
|
||||
|
||||
// Mouseenter event handler
|
||||
"mouseenter.tocify": function() {
|
||||
|
||||
// Adds a hover CSS class to the current list item
|
||||
$(this).addClass(self.hoverClass);
|
||||
|
||||
// Makes sure the cursor is set to the pointer icon
|
||||
$(this).css("cursor", "pointer");
|
||||
|
||||
},
|
||||
|
||||
// Mouseleave event handler
|
||||
"mouseleave.tocify": function() {
|
||||
|
||||
if(self.options.theme !== "bootstrap") {
|
||||
|
||||
// Removes the hover CSS class from the current list item
|
||||
$(this).removeClass(self.hoverClass);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// only attach handler if needed (expensive in IE)
|
||||
if (self.options.extendPage || self.options.highlightOnScroll || self.options.scrollHistory || self.options.showAndHideOnScroll)
|
||||
{
|
||||
// Window scroll event handler
|
||||
$(window).on("scroll.tocify", function() {
|
||||
|
||||
// Once all animations on the page are complete, this callback function will be called
|
||||
$("html, body").promise().done(function() {
|
||||
|
||||
// Local variables
|
||||
|
||||
// Stores how far the user has scrolled
|
||||
var winScrollTop = $(window).scrollTop(),
|
||||
|
||||
// Stores the height of the window
|
||||
winHeight = $(window).height(),
|
||||
|
||||
// Stores the height of the document
|
||||
docHeight = $(document).height(),
|
||||
|
||||
scrollHeight = $("body")[0].scrollHeight,
|
||||
|
||||
// Instantiates a variable that will be used to hold a selected HTML element
|
||||
elem,
|
||||
|
||||
lastElem,
|
||||
|
||||
lastElemOffset,
|
||||
|
||||
currentElem;
|
||||
|
||||
if(self.options.extendPage) {
|
||||
|
||||
// If the user has scrolled to the bottom of the page and the last toc item is not focused
|
||||
if((self.webkit && winScrollTop >= scrollHeight - winHeight - self.options.extendPageOffset) || (!self.webkit && winHeight + winScrollTop > docHeight - self.options.extendPageOffset)) {
|
||||
|
||||
if(!$(extendPageClass).length) {
|
||||
|
||||
lastElem = $('div[data-unique="' + $(itemClass).last().attr("data-unique") + '"]');
|
||||
|
||||
if(!lastElem.length) return;
|
||||
|
||||
// Gets the top offset of the page header that is linked to the last toc item
|
||||
lastElemOffset = lastElem.offset().top;
|
||||
|
||||
// Appends a div to the bottom of the page and sets the height to the difference of the window scrollTop and the last element's position top offset
|
||||
$(self.options.context).append($("<div />", {
|
||||
|
||||
"class": extendPageClassName,
|
||||
|
||||
"height": Math.abs(lastElemOffset - winScrollTop) + "px",
|
||||
|
||||
"data-unique": extendPageClassName
|
||||
|
||||
}));
|
||||
|
||||
if(self.extendPageScroll) {
|
||||
|
||||
currentElem = self.element.find('li.active');
|
||||
|
||||
self._scrollTo($('div[data-unique="' + currentElem.attr("data-unique") + '"]'));
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// The zero timeout ensures the following code is run after the scroll events
|
||||
setTimeout(function() {
|
||||
|
||||
// _Local variables_
|
||||
|
||||
// Stores the distance to the closest anchor
|
||||
var closestAnchorDistance = null,
|
||||
|
||||
// Stores the index of the closest anchor
|
||||
closestAnchorIdx = null,
|
||||
|
||||
// Keeps a reference to all anchors
|
||||
anchors = $(self.options.context).find("div[data-unique]"),
|
||||
|
||||
anchorText;
|
||||
|
||||
// Determines the index of the closest anchor
|
||||
anchors.each(function(idx) {
|
||||
var distance = Math.abs(($(this).next().length ? $(this).next() : $(this)).offset().top - winScrollTop - self.options.highlightOffset);
|
||||
if (closestAnchorDistance == null || distance < closestAnchorDistance) {
|
||||
closestAnchorDistance = distance;
|
||||
closestAnchorIdx = idx;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
anchorText = $(anchors[closestAnchorIdx]).attr("data-unique");
|
||||
|
||||
// Stores the list item HTML element that corresponds to the currently traversed anchor tag
|
||||
elem = $('li[data-unique="' + anchorText + '"]');
|
||||
|
||||
// If the `highlightOnScroll` option is true and a next element is found
|
||||
if(self.options.highlightOnScroll && elem.length) {
|
||||
|
||||
// Removes highlighting from all of the list item's
|
||||
self.element.find("." + self.focusClass).removeClass(self.focusClass);
|
||||
|
||||
// Highlights the corresponding list item
|
||||
elem.addClass(self.focusClass);
|
||||
|
||||
}
|
||||
|
||||
if(self.options.scrollHistory) {
|
||||
|
||||
if(window.location.hash !== "#" + anchorText) {
|
||||
|
||||
window.location.replace("#" + anchorText);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// If the `showAndHideOnScroll` option is true
|
||||
if(self.options.showAndHideOnScroll && self.options.showAndHide) {
|
||||
|
||||
self._triggerShow(elem, true);
|
||||
|
||||
}
|
||||
|
||||
}, 0);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Show
|
||||
// ----
|
||||
// Opens the current sub-header
|
||||
show: function(elem, scroll) {
|
||||
|
||||
// Stores the plugin context in the `self` variable
|
||||
var self = this,
|
||||
element = elem;
|
||||
|
||||
// If the sub-header is not already visible
|
||||
if (!elem.is(":visible")) {
|
||||
|
||||
// If the current element does not have any nested subheaders, is not a header, and its parent is not visible
|
||||
if(!elem.find(subheaderClass).length && !elem.parent().is(headerClass) && !elem.parent().is(":visible")) {
|
||||
|
||||
// Sets the current element to all of the subheaders within the current header
|
||||
elem = elem.parents(subheaderClass).add(elem);
|
||||
|
||||
}
|
||||
|
||||
// If the current element does not have any nested subheaders and is not a header
|
||||
else if(!elem.children(subheaderClass).length && !elem.parent().is(headerClass)) {
|
||||
|
||||
// Sets the current element to the closest subheader
|
||||
elem = elem.closest(subheaderClass);
|
||||
|
||||
}
|
||||
|
||||
//Determines what jQuery effect to use
|
||||
switch (self.options.showEffect) {
|
||||
|
||||
//Uses `no effect`
|
||||
case "none":
|
||||
|
||||
elem.show();
|
||||
|
||||
break;
|
||||
|
||||
//Uses the jQuery `show` special effect
|
||||
case "show":
|
||||
|
||||
elem.show(self.options.showEffectSpeed);
|
||||
|
||||
break;
|
||||
|
||||
//Uses the jQuery `slideDown` special effect
|
||||
case "slideDown":
|
||||
|
||||
elem.slideDown(self.options.showEffectSpeed);
|
||||
|
||||
break;
|
||||
|
||||
//Uses the jQuery `fadeIn` special effect
|
||||
case "fadeIn":
|
||||
|
||||
elem.fadeIn(self.options.showEffectSpeed);
|
||||
|
||||
break;
|
||||
|
||||
//If none of the above options were passed, then a `jQueryUI show effect` is expected
|
||||
default:
|
||||
|
||||
elem.show();
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// If the current subheader parent element is a header
|
||||
if(elem.parent().is(headerClass)) {
|
||||
|
||||
// Hides all non-active sub-headers
|
||||
self.hide($(subheaderClass).not(elem));
|
||||
|
||||
}
|
||||
|
||||
// If the current subheader parent element is not a header
|
||||
else {
|
||||
|
||||
// Hides all non-active sub-headers
|
||||
self.hide($(subheaderClass).not(elem.closest(headerClass).find(subheaderClass).not(elem.siblings())));
|
||||
|
||||
}
|
||||
|
||||
// Maintains chainablity
|
||||
return self;
|
||||
|
||||
},
|
||||
|
||||
// Hide
|
||||
// ----
|
||||
// Closes the current sub-header
|
||||
hide: function(elem) {
|
||||
|
||||
// Stores the plugin context in the `self` variable
|
||||
var self = this;
|
||||
|
||||
//Determines what jQuery effect to use
|
||||
switch (self.options.hideEffect) {
|
||||
|
||||
// Uses `no effect`
|
||||
case "none":
|
||||
|
||||
elem.hide();
|
||||
|
||||
break;
|
||||
|
||||
// Uses the jQuery `hide` special effect
|
||||
case "hide":
|
||||
|
||||
elem.hide(self.options.hideEffectSpeed);
|
||||
|
||||
break;
|
||||
|
||||
// Uses the jQuery `slideUp` special effect
|
||||
case "slideUp":
|
||||
|
||||
elem.slideUp(self.options.hideEffectSpeed);
|
||||
|
||||
break;
|
||||
|
||||
// Uses the jQuery `fadeOut` special effect
|
||||
case "fadeOut":
|
||||
|
||||
elem.fadeOut(self.options.hideEffectSpeed);
|
||||
|
||||
break;
|
||||
|
||||
// If none of the above options were passed, then a `jqueryUI hide effect` is expected
|
||||
default:
|
||||
|
||||
elem.hide();
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
// Maintains chainablity
|
||||
return self;
|
||||
},
|
||||
|
||||
// _triggerShow
|
||||
// ------------
|
||||
// Determines what elements get shown on scroll and click
|
||||
_triggerShow: function(elem, scroll) {
|
||||
|
||||
var self = this;
|
||||
|
||||
// If the current element's parent is a header element or the next element is a nested subheader element
|
||||
if(elem.parent().is(headerClass) || elem.next().is(subheaderClass)) {
|
||||
|
||||
// Shows the next sub-header element
|
||||
self.show(elem.next(subheaderClass), scroll);
|
||||
|
||||
}
|
||||
|
||||
// If the current element's parent is a subheader element
|
||||
else if(elem.parent().is(subheaderClass)) {
|
||||
|
||||
// Shows the parent sub-header element
|
||||
self.show(elem.parent(), scroll);
|
||||
|
||||
}
|
||||
|
||||
// Maintains chainability
|
||||
return self;
|
||||
|
||||
},
|
||||
|
||||
// _addCSSClasses
|
||||
// --------------
|
||||
// Adds CSS classes to the newly generated table of contents HTML
|
||||
_addCSSClasses: function() {
|
||||
|
||||
// If the user wants a jqueryUI theme
|
||||
if(this.options.theme === "jqueryui") {
|
||||
|
||||
this.focusClass = "ui-state-default";
|
||||
|
||||
this.hoverClass = "ui-state-hover";
|
||||
|
||||
//Adds the default styling to the dropdown list
|
||||
this.element.addClass("ui-widget").find(".toc-title").addClass("ui-widget-header").end().find("li").addClass("ui-widget-content");
|
||||
|
||||
}
|
||||
|
||||
// If the user wants a twitterBootstrap theme
|
||||
else if(this.options.theme === "bootstrap") {
|
||||
|
||||
this.element.find(headerClass + "," + subheaderClass).addClass("nav nav-list");
|
||||
|
||||
this.focusClass = "active";
|
||||
|
||||
}
|
||||
|
||||
// If a user does not want a prebuilt theme
|
||||
else {
|
||||
|
||||
// Adds more neutral classes (instead of jqueryui)
|
||||
|
||||
this.focusClass = tocFocusClassName;
|
||||
|
||||
this.hoverClass = tocHoverClassName;
|
||||
|
||||
}
|
||||
|
||||
//Maintains chainability
|
||||
return this;
|
||||
|
||||
},
|
||||
|
||||
// setOption
|
||||
// ---------
|
||||
// Sets a single Tocify option after the plugin is invoked
|
||||
setOption: function() {
|
||||
|
||||
// Calls the jQueryUI Widget Factory setOption method
|
||||
$.Widget.prototype._setOption.apply(this, arguments);
|
||||
|
||||
},
|
||||
|
||||
// setOptions
|
||||
// ----------
|
||||
// Sets a single or multiple Tocify options after the plugin is invoked
|
||||
setOptions: function() {
|
||||
|
||||
// Calls the jQueryUI Widget Factory setOptions method
|
||||
$.Widget.prototype._setOptions.apply(this, arguments);
|
||||
|
||||
},
|
||||
|
||||
// _scrollTo
|
||||
// ---------
|
||||
// Scrolls to a specific element
|
||||
_scrollTo: function(elem) {
|
||||
|
||||
var self = this,
|
||||
duration = self.options.smoothScroll || 0,
|
||||
scrollTo = self.options.scrollTo,
|
||||
currentDiv = $('div[data-unique="' + elem.attr("data-unique") + '"]');
|
||||
|
||||
if(!currentDiv.length) {
|
||||
|
||||
return self;
|
||||
|
||||
}
|
||||
|
||||
// Once all animations on the page are complete, this callback function will be called
|
||||
$("html, body").promise().done(function() {
|
||||
|
||||
// Animates the html and body element scrolltops
|
||||
$("html, body").animate({
|
||||
|
||||
// Sets the jQuery `scrollTop` to the top offset of the HTML div tag that matches the current list item's `data-unique` tag
|
||||
"scrollTop": currentDiv.offset().top - ($.isFunction(scrollTo) ? scrollTo.call() : scrollTo) + "px"
|
||||
|
||||
}, {
|
||||
|
||||
// Sets the smoothScroll animation time duration to the smoothScrollSpeed option
|
||||
"duration": duration
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Maintains chainability
|
||||
return self;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})); //end of plugin
|
||||
+4
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user