mirror of
https://github.com/aharabada/glitchy-engine-beef.git
synced 2026-09-05 13:01:52 +00:00
Bootstrap test
This commit is contained in:
Simon Lübeß
+5
@@ -0,0 +1,5 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
|
||||
</project>
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/pages.iml" filepath="$PROJECT_DIR$/.idea/pages.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
Generated
+6
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$/../../.." vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"name": "Open EntityHierarchy.html",
|
||||
"file": "d:\\Development\\Projects\\Beef\\GlitchyEngine\\GlitchyEditor\\assets\\pages\\EntityHierarchy.html",
|
||||
// Configure location of browser:
|
||||
"runtimeExecutable": "C:\\Users\\Simon\\AppData\\Local\\Chromium\\Application\\chrome.exe",
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
// Mainly for static files
|
||||
"liveServer.settings.useWebExt": true,
|
||||
|
||||
// This means that you change your real URL (current PHP url)
|
||||
// to another URL (which Live Sever starts).
|
||||
"liveServer.settings.proxy": {
|
||||
"enable": true, // i. enabled
|
||||
"baseUri": "/", // ii. workspace
|
||||
"proxyUri": "http://localhost:80/workspace" // iii. actual address
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Entity Hierarchy</title>
|
||||
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
|
||||
<script src='bootstrap/js/bootstrap.bundle.min.js'></script>
|
||||
<link rel="stylesheet" href="bootstrap-treeview/dist/bootstrap-treeview.min.css">
|
||||
<script src="jquery/jquery.min.js"></script>
|
||||
<script src="bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<ul class="navbar-nav me-auto mb-0 mb-lg-0">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-toggle="tooltip" title="Create a new Entity.">Create</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#" data-toggle="tooltip" title="Create a new Entity.">Empty Entity</a></li>
|
||||
<li><a class="dropdown-item" href="#" data-toggle="tooltip" title="Create a new Entity that is a child of the selected entity.">Create Child</a></li>
|
||||
<li><a class="dropdown-item" href="#" data-toggle="tooltip" title="Create a new Entity that will be the parent of all selected entities.">Create Parent</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a id="btn_delete_entity" class="nav-link disabled" href="#">Delete</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<ul id="entityList">
|
||||
</ul>
|
||||
|
||||
<div id="tree"></div>
|
||||
|
||||
<script>
|
||||
function getTree() {
|
||||
// Some logic to retrieve, or generate tree structure
|
||||
var tree = [
|
||||
{
|
||||
text: "Parent 1",
|
||||
nodes: [
|
||||
{
|
||||
text: "Child 1",
|
||||
nodes: [
|
||||
{
|
||||
text: "Grandchild 1"
|
||||
},
|
||||
{
|
||||
text: "Grandchild 2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Child 2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Parent 2"
|
||||
},
|
||||
{
|
||||
text: "Parent 3"
|
||||
},
|
||||
{
|
||||
text: "Parent 4"
|
||||
},
|
||||
{
|
||||
text: "Parent 5"
|
||||
}
|
||||
];
|
||||
|
||||
return tree;
|
||||
}
|
||||
|
||||
$('#tree').treeview({data: getTree()});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"directory": "public/bower_components"
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
|
||||
# Custom for Visual Studio
|
||||
*.cs diff=csharp
|
||||
*.sln merge=union
|
||||
*.csproj merge=union
|
||||
*.vbproj merge=union
|
||||
*.fsproj merge=union
|
||||
*.dbproj merge=union
|
||||
|
||||
# Standard to msysgit
|
||||
*.doc diff=astextplain
|
||||
*.DOC diff=astextplain
|
||||
*.docx diff=astextplain
|
||||
*.DOCX diff=astextplain
|
||||
*.dot diff=astextplain
|
||||
*.DOT diff=astextplain
|
||||
*.pdf diff=astextplain
|
||||
*.PDF diff=astextplain
|
||||
*.rtf diff=astextplain
|
||||
*.RTF diff=astextplain
|
||||
@@ -0,0 +1,2 @@
|
||||
node_modules/
|
||||
public/bower_components/
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
// Details: https://github.com/victorporof/Sublime-JSHint#using-your-own-jshintrc-options
|
||||
// Example: https://github.com/jshint/jshint/blob/master/examples/.jshintrc
|
||||
// Documentation: http://www.jshint.com/docs/
|
||||
"browser": true,
|
||||
"esnext": true,
|
||||
"globals": { $: false, jQuery: false, "console": false},
|
||||
"globalstrict": true,
|
||||
"quotmark": "single",
|
||||
"smarttabs": true,
|
||||
"trailing": true,
|
||||
"undef": true,
|
||||
"unused": true
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
language: node_js
|
||||
|
||||
node_js:
|
||||
- "0.11"
|
||||
- "0.10"
|
||||
|
||||
before_script:
|
||||
- npm install -g grunt-cli
|
||||
- npm install
|
||||
- bower install
|
||||
|
||||
script: grunt test --verbose --force
|
||||
@@ -0,0 +1,91 @@
|
||||
# Change Log
|
||||
All notable changes to this project will be documented in this file.
|
||||
This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
|
||||
## v1.2.0 - 9th May, 2015
|
||||
|
||||
### New Features
|
||||
|
||||
- Disable nodes, allow a tree node to disabled (not selectable, expandable or checkable)
|
||||
|
||||
- Added node state property `disabled` to set a node initial state
|
||||
|
||||
- Methods `disableAll`, `disableNode`, `enableAll`, `enableNode` and `toggleNodeDisabled` added to control state programmatically
|
||||
|
||||
- Events `nodeDisabled` and `nodeEnabled`
|
||||
|
||||
- Checkable nodes, allows a tree node to be checked or unchecked.
|
||||
|
||||
- Added node state property `checked` to set a node initial state
|
||||
|
||||
- Pass option `{showCheckbox: true}` to initialize tree view with checkboxes
|
||||
|
||||
- Use options `checkedIcon` and `uncheckedIcon` to configure checkbox icons
|
||||
|
||||
- Methods `checkAll`, `checkNode`, `uncheckAll`, `uncheckNode` and `toggleNodeChecked` to control state programmatically
|
||||
|
||||
- Events `nodeChecked` and `nodeUnchecked`
|
||||
|
||||
- New option + node property `selectedIcon` to support displaying different icons when a node is selected.
|
||||
|
||||
- New search option `{ revealResults : true | false }` which when set to true will automatically expand the tree view to reveal matching nodes
|
||||
|
||||
- New method `revealNode` which expands the tree view to reveal a given node
|
||||
|
||||
- New methods to retrieve nodes by state : `getSelected`, `getUnselected`, `getExpanded`, `getCollapsed`, `getChecked`, `getUnchecked`, `getDisabled` and `getEnabled`
|
||||
|
||||
|
||||
### Changes
|
||||
- Removed nodeIcon by default, by popular demand. Use `{nodeIcon: 'glyphicon glyphicon-stop'}` in initial options to add a node icon.
|
||||
|
||||
- Search behaviour, by default search will the expand tree view and reveal results. Alternatively pass `{revealResults:false}`
|
||||
|
||||
- Method collapseNode accepts new option `{ ignoreChildren: true | false }`. The default is false, passing true will leave child nodes uncollapsed
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
- Remove unnecessary render in clearSearch when called from search
|
||||
|
||||
- Child nodes should collapse by default on collapseNode
|
||||
|
||||
- Incorrect expand collapse icon displayed when nodes array is empty
|
||||
|
||||
|
||||
|
||||
|
||||
## v1.1.0 - 29th March, 2015
|
||||
|
||||
### New Features
|
||||
|
||||
- Added node state properties `expanded` and `selected` so a node's intial state can be set
|
||||
|
||||
- New get methods `getNode`, `getParent` and `getSiblings` for retrieving nodes and their immediate relations
|
||||
|
||||
- New select methods `selectNode`, `unselectNode` and `toggleNodeSelected`
|
||||
|
||||
- Adding `nodeUnselected` event
|
||||
|
||||
- New global option `multiSelect` which allows multiple nodes to hold the selected state, default is false
|
||||
|
||||
- New expand collapse methods `expandAll`, `collapseAll`, `expandNode`, `collapseNode` and `toggleNodeExpanded`
|
||||
|
||||
- Adding events `nodeExpanded` and `nodeCollapsed`
|
||||
|
||||
- New methods `search` and `clearSearch` which allow you to query the tree view for nodes based on a `text` value
|
||||
|
||||
- Adding events `searchComplete` and `searchCleared`
|
||||
|
||||
- New global options `highlightSearchResults`, `searchResultColor` and `searchResultBackColor` for configuring how search results are displayed
|
||||
|
||||
|
||||
|
||||
|
||||
## v1.0.2 - 6th February, 2015
|
||||
|
||||
### Changes
|
||||
- jQuery dependency version updated in Bower
|
||||
|
||||
### Bug Fixes
|
||||
- Events not unbound when re-initialised
|
||||
|
||||
- CSS selectors too general, affecting other page elements
|
||||
@@ -0,0 +1,62 @@
|
||||
module.exports = function(grunt) {
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'), // the package file to use
|
||||
|
||||
uglify: {
|
||||
files: {
|
||||
expand: true,
|
||||
flatten: true,
|
||||
src: 'src/js/*.js',
|
||||
dest: 'dist',
|
||||
ext: '.min.js'
|
||||
}
|
||||
},
|
||||
|
||||
cssmin: {
|
||||
minify: {
|
||||
expand: true,
|
||||
cwd: 'src/css',
|
||||
src: ['*.css', '!*.min.css'],
|
||||
dest: 'dist',
|
||||
ext: '.min.css'
|
||||
}
|
||||
},
|
||||
|
||||
qunit: {
|
||||
all: ['tests/*.html']
|
||||
},
|
||||
|
||||
watch: {
|
||||
files: ['tests/*.js', 'tests/*.html', 'src/**'],
|
||||
tasks: ['default']
|
||||
},
|
||||
|
||||
copy: {
|
||||
main: {
|
||||
files: [
|
||||
// copy dist to tests
|
||||
// { expand: true, cwd: 'dist', src: '*', dest: 'tests/lib/' },
|
||||
{ expand: true, cwd: 'src/css', src: '*', dest: 'tests/lib/' },
|
||||
{ expand: true, cwd: 'src/js', src: '*', dest: 'tests/lib/' },
|
||||
// copy latest libs to tests
|
||||
{ expand: true, cwd: 'public/bower_components/jquery', src: 'jquery.js', dest: 'tests/lib/' },
|
||||
{ expand: true, cwd: 'public/bower_components/bootstrap-datepicker/js', src: 'bootstrap-datepicker.js', dest: 'tests/lib/' },
|
||||
// copy src to example
|
||||
{ expand: true, cwd: 'src/css', src: '*', dest: 'public/css/' },
|
||||
{ expand: true, cwd: 'src/js', src: '*', dest: 'public/js/' }
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// load up your plugins
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-cssmin');
|
||||
grunt.loadNpmTasks('grunt-contrib-qunit');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
||||
|
||||
// register one or more task lists (you should ALWAYS have a "default" task list)
|
||||
grunt.registerTask('default', ['uglify','cssmin', 'copy', 'qunit', 'watch']);
|
||||
grunt.registerTask('test', 'qunit');
|
||||
};
|
||||
@@ -0,0 +1,202 @@
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "{}"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright {yyyy} {name of copyright owner}
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
@@ -0,0 +1,763 @@
|
||||
# Bootstrap Tree View
|
||||
|
||||
---
|
||||
|
||||
|
||||
[](https://www.npmjs.com/package/bootstrap-treeview)
|
||||
[](https://travis-ci.org/jonmiles/bootstrap-treeview)
|
||||
|
||||
A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while leveraging the best that Twitter Bootstrap has to offer.
|
||||
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
Where provided these are the actual versions bootstrap-treeview has been tested against.
|
||||
|
||||
- [Bootstrap v3.3.4 (>= 3.0.0)](http://getbootstrap.com/)
|
||||
- [jQuery v2.1.3 (>= 1.9.0)](http://jquery.com/)
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Install
|
||||
|
||||
You can install using bower (recommended):
|
||||
|
||||
```javascript
|
||||
$ bower install bootstrap-treeview
|
||||
```
|
||||
|
||||
or using npm:
|
||||
|
||||
```javascript
|
||||
$ npm install bootstrap-treeview
|
||||
```
|
||||
|
||||
or [download](https://github.com/jonmiles/bootstrap-treeview/releases/tag/v1.2.0) manually.
|
||||
|
||||
|
||||
|
||||
### Usage
|
||||
|
||||
Add the following resources for the bootstrap-treeview to function correctly.
|
||||
|
||||
```html
|
||||
<!-- Required Stylesheets -->
|
||||
<link href="bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- Required Javascript -->
|
||||
<script src="jquery.js"></script>
|
||||
<script src="bootstrap-treeview.js"></script>
|
||||
```
|
||||
|
||||
The component will bind to any existing DOM element.
|
||||
|
||||
```html
|
||||
<div id="tree"></div>
|
||||
```
|
||||
|
||||
Basic usage may look something like this.
|
||||
|
||||
```javascript
|
||||
function getTree() {
|
||||
// Some logic to retrieve, or generate tree structure
|
||||
return data;
|
||||
}
|
||||
|
||||
$('#tree').treeview({data: getTree()});
|
||||
```
|
||||
|
||||
|
||||
## Data Structure
|
||||
|
||||
In order to define the hierarchical structure needed for the tree it's necessary to provide a nested array of JavaScript objects.
|
||||
|
||||
Example
|
||||
|
||||
```javascript
|
||||
var tree = [
|
||||
{
|
||||
text: "Parent 1",
|
||||
nodes: [
|
||||
{
|
||||
text: "Child 1",
|
||||
nodes: [
|
||||
{
|
||||
text: "Grandchild 1"
|
||||
},
|
||||
{
|
||||
text: "Grandchild 2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Child 2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Parent 2"
|
||||
},
|
||||
{
|
||||
text: "Parent 3"
|
||||
},
|
||||
{
|
||||
text: "Parent 4"
|
||||
},
|
||||
{
|
||||
text: "Parent 5"
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
At the lowest level a tree node is a represented as a simple JavaScript object. This one required property `text` will build you a tree.
|
||||
|
||||
```javascript
|
||||
{
|
||||
text: "Node 1"
|
||||
}
|
||||
```
|
||||
|
||||
If you want to do more, here's the full node specification
|
||||
|
||||
```javascript
|
||||
{
|
||||
text: "Node 1",
|
||||
icon: "glyphicon glyphicon-stop",
|
||||
selectedIcon: "glyphicon glyphicon-stop",
|
||||
color: "#000000",
|
||||
backColor: "#FFFFFF",
|
||||
href: "#node-1",
|
||||
selectable: true,
|
||||
state: {
|
||||
checked: true,
|
||||
disabled: true,
|
||||
expanded: true,
|
||||
selected: true
|
||||
},
|
||||
tags: ['available'],
|
||||
nodes: [
|
||||
{},
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Node Properties
|
||||
|
||||
The following properties are defined to allow node level overrides, such as node specific icons, colours and tags.
|
||||
|
||||
#### text
|
||||
`String` `Mandatory`
|
||||
|
||||
The text value displayed for a given tree node, typically to the right of the nodes icon.
|
||||
|
||||
#### icon
|
||||
`String` `Optional`
|
||||
|
||||
The icon displayed on a given node, typically to the left of the text.
|
||||
|
||||
For simplicity we directly leverage [Bootstraps Glyphicons support](http://getbootstrap.com/components/#glyphicons) and as such you should provide both the base class and individual icon class separated by a space.
|
||||
|
||||
By providing the base class you retain full control over the icons used. If you want to use your own then just add your class to this icon field.
|
||||
|
||||
#### selectedIcon
|
||||
`String` `Optional`
|
||||
|
||||
The icon displayed on a given node when selected, typically to the left of the text.
|
||||
|
||||
#### color
|
||||
`String` `Optional`
|
||||
|
||||
The foreground color used on a given node, overrides global color option.
|
||||
|
||||
#### backColor
|
||||
`String` `Optional`
|
||||
|
||||
The background color used on a given node, overrides global color option.
|
||||
|
||||
#### href
|
||||
`String` `Optional`
|
||||
|
||||
Used in conjunction with global enableLinks option to specify anchor tag URL on a given node.
|
||||
|
||||
#### selectable
|
||||
`Boolean` `Default: true`
|
||||
|
||||
Whether or not a node is selectable in the tree. False indicates the node should act as an expansion heading and will not fire selection events.
|
||||
|
||||
#### state
|
||||
`Object` `Optional`
|
||||
Describes a node's initial state.
|
||||
|
||||
#### state.checked
|
||||
`Boolean` `Default: false`
|
||||
|
||||
Whether or not a node is checked, represented by a checkbox style glyphicon.
|
||||
|
||||
#### state.disabled
|
||||
`Boolean` `Default: false`
|
||||
|
||||
Whether or not a node is disabled (not selectable, expandable or checkable).
|
||||
|
||||
#### state.expanded
|
||||
`Boolean` `Default: false`
|
||||
|
||||
Whether or not a node is expanded i.e. open. Takes precedence over global option levels.
|
||||
|
||||
#### state.selected
|
||||
`Boolean` `Default: false`
|
||||
|
||||
Whether or not a node is selected.
|
||||
|
||||
#### tags
|
||||
`Array of Strings` `Optional`
|
||||
|
||||
Used in conjunction with global showTags option to add additional information to the right of each node; using [Bootstrap Badges](http://getbootstrap.com/components/#badges)
|
||||
|
||||
### Extendible
|
||||
|
||||
You can extend the node object by adding any number of additional key value pairs that you require for your application. Remember this is the object which will be passed around during selection events.
|
||||
|
||||
|
||||
|
||||
## Options
|
||||
|
||||
Options allow you to customise the treeview's default appearance and behaviour. They are passed to the plugin on initialization, as an object.
|
||||
|
||||
```javascript
|
||||
// Example: initializing the treeview
|
||||
// expanded to 5 levels
|
||||
// with a background color of green
|
||||
$('#tree').treeview({
|
||||
data: data, // data is not optional
|
||||
levels: 5,
|
||||
backColor: 'green'
|
||||
});
|
||||
```
|
||||
You can pass a new options object to the treeview at any time but this will have the effect of re-initializing the treeview.
|
||||
|
||||
### List of Options
|
||||
|
||||
The following is a list of all available options.
|
||||
|
||||
#### data
|
||||
Array of Objects. No default, expects data
|
||||
|
||||
This is the core data to be displayed by the tree view.
|
||||
|
||||
#### backColor
|
||||
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: inherits from Bootstrap.css.
|
||||
|
||||
Sets the default background color used by all nodes, except when overridden on a per node basis in data.
|
||||
|
||||
#### borderColor
|
||||
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: inherits from Bootstrap.css.
|
||||
|
||||
Sets the border color for the component; set showBorder to false if you don't want a visible border.
|
||||
|
||||
#### checkedIcon
|
||||
String, class names(s). Default: "glyphicon glyphicon-check" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
|
||||
|
||||
Sets the icon to be as a checked checkbox, used in conjunction with showCheckbox.
|
||||
|
||||
#### collapseIcon
|
||||
String, class name(s). Default: "glyphicon glyphicon-minus" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
|
||||
|
||||
Sets the icon to be used on a collapsible tree node.
|
||||
|
||||
#### color
|
||||
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: inherits from Bootstrap.css.
|
||||
|
||||
Sets the default foreground color used by all nodes, except when overridden on a per node basis in data.
|
||||
|
||||
#### emptyIcon
|
||||
String, class name(s). Default: "glyphicon" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
|
||||
|
||||
Sets the icon to be used on a tree node with no child nodes.
|
||||
|
||||
#### enableLinks
|
||||
Boolean. Default: false
|
||||
|
||||
Whether or not to present node text as a hyperlink. The href value of which must be provided in the data structure on a per node basis.
|
||||
|
||||
#### expandIcon
|
||||
String, class name(s). Default: "glyphicon glyphicon-plus" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
|
||||
|
||||
Sets the icon to be used on an expandable tree node.
|
||||
|
||||
#### highlightSearchResults
|
||||
Boolean. Default: true
|
||||
|
||||
Whether or not to highlight search results.
|
||||
|
||||
#### highlightSelected
|
||||
Boolean. Default: true
|
||||
|
||||
Whether or not to highlight the selected node.
|
||||
|
||||
#### levels
|
||||
Integer. Default: 2
|
||||
|
||||
Sets the number of hierarchical levels deep the tree will be expanded to by default.
|
||||
|
||||
#### multiSelect
|
||||
Boolean. Default: false
|
||||
|
||||
Whether or not multiple nodes can be selected at the same time.
|
||||
|
||||
#### nodeIcon
|
||||
String, class name(s). Default: "glyphicon glyphicon-stop" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
|
||||
|
||||
Sets the default icon to be used on all nodes, except when overridden on a per node basis in data.
|
||||
|
||||
#### onhoverColor
|
||||
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: '#F5F5F5'.
|
||||
|
||||
Sets the default background color activated when the users cursor hovers over a node.
|
||||
|
||||
#### selectedIcon
|
||||
String, class name(s). Default: "glyphicon glyphicon-stop" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
|
||||
|
||||
Sets the default icon to be used on all selected nodes, except when overridden on a per node basis in data.
|
||||
|
||||
#### searchResultBackColor
|
||||
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: undefined, inherits.
|
||||
|
||||
Sets the background color of the selected node.
|
||||
|
||||
#### searchResultColor
|
||||
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: '#D9534F'.
|
||||
|
||||
Sets the foreground color of the selected node.
|
||||
|
||||
#### selectedBackColor
|
||||
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: '#428bca'.
|
||||
|
||||
Sets the background color of the selected node.
|
||||
|
||||
#### selectedColor
|
||||
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: '#FFFFFF'.
|
||||
|
||||
Sets the foreground color of the selected node.
|
||||
|
||||
#### showBorder
|
||||
Boolean. Default: true
|
||||
|
||||
Whether or not to display a border around nodes.
|
||||
|
||||
#### showCheckbox
|
||||
Boolean. Default: false
|
||||
|
||||
Whether or not to display checkboxes on nodes.
|
||||
|
||||
#### showIcon
|
||||
Boolean. Default: true
|
||||
|
||||
Whether or not to display a nodes icon.
|
||||
|
||||
#### showTags
|
||||
Boolean. Default: false
|
||||
|
||||
Whether or not to display tags to the right of each node. The values of which must be provided in the data structure on a per node basis.
|
||||
|
||||
#### uncheckedIcon
|
||||
String, class names(s). Default: "glyphicon glyphicon-unchecked" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
|
||||
|
||||
Sets the icon to be as an unchecked checkbox, used in conjunction with showCheckbox.
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
Methods provide a way of interacting with the plugin programmatically. For example, expanding a node is possible via the expandNode method.
|
||||
|
||||
You can invoke methods in one of two ways, using either:
|
||||
|
||||
#### 1. The plugin's wrapper
|
||||
|
||||
The plugin's wrapper works as a proxy for accessing the underlying methods.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('methodName', args)
|
||||
```
|
||||
> Limitation, multiple arguments must be passed as an array of arguments.
|
||||
|
||||
#### 2. The treeview directly
|
||||
|
||||
You can get an instance of the treeview using one of the two following methods.
|
||||
|
||||
```javascript
|
||||
// This special method returns an instance of the treeview.
|
||||
$('#tree').treeview(true)
|
||||
.methodName(args);
|
||||
|
||||
// The instance is also saved in the DOM elements data,
|
||||
// and accessible using the plugin's id 'treeview'.
|
||||
$('#tree').data('treeview')
|
||||
.methodName(args);
|
||||
```
|
||||
> A better approach, if you plan a lot of interaction.
|
||||
|
||||
### List of Methods
|
||||
|
||||
The following is a list of all available methods.
|
||||
|
||||
#### checkAll(options)
|
||||
|
||||
Checks all tree nodes
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('checkAll', { silent: true });
|
||||
```
|
||||
|
||||
Triggers `nodeChecked` event; pass silent to suppress events.
|
||||
|
||||
#### checkNode(node | nodeId, options)
|
||||
|
||||
Checks a given tree node, accepts node or nodeId.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);
|
||||
```
|
||||
|
||||
Triggers `nodeChecked` event; pass silent to suppress events.
|
||||
|
||||
#### clearSearch()
|
||||
|
||||
Clear the tree view of any previous search results e.g. remove their highlighted state.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('clearSearch');
|
||||
```
|
||||
|
||||
Triggers `searchCleared` event
|
||||
|
||||
#### collapseAll(options)
|
||||
|
||||
Collapse all tree nodes, collapsing the entire tree.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('collapseAll', { silent: true });
|
||||
```
|
||||
|
||||
Triggers `nodeCollapsed` event; pass silent to suppress events.
|
||||
|
||||
#### collapseNode(node | nodeId, options)
|
||||
|
||||
Collapse a given tree node and it's child nodes. If you don't want to collapse the child nodes, pass option `{ ignoreChildren: true }`.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('collapseNode', [ nodeId, { silent: true, ignoreChildren: false } ]);
|
||||
```
|
||||
|
||||
Triggers `nodeCollapsed` event; pass silent to suppress events.
|
||||
|
||||
#### disableAll(options)
|
||||
|
||||
Disable all tree nodes
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('disableAll', { silent: true });
|
||||
```
|
||||
|
||||
Triggers `nodeDisabled` event; pass silent to suppress events.
|
||||
|
||||
#### disableNode(node | nodeId, options)
|
||||
|
||||
Disable a given tree node, accepts node or nodeId.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('disableNode', [ nodeId, { silent: true } ]);
|
||||
```
|
||||
|
||||
Triggers `nodeDisabled` event; pass silent to suppress events.
|
||||
|
||||
#### enableAll(options)
|
||||
|
||||
Enable all tree nodes
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('enableAll', { silent: true });
|
||||
```
|
||||
|
||||
Triggers `nodeEnabled` event; pass silent to suppress events.
|
||||
|
||||
#### enableNode(node | nodeId, options)
|
||||
|
||||
Enable a given tree node, accepts node or nodeId.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('enableNode', [ nodeId, { silent: true } ]);
|
||||
```
|
||||
|
||||
Triggers `nodeEnabled` event; pass silent to suppress events.
|
||||
|
||||
#### expandAll(options)
|
||||
|
||||
Expand all tree nodes. Optionally can be expanded to any given number of levels.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('expandAll', { levels: 2, silent: true });
|
||||
```
|
||||
|
||||
Triggers `nodeExpanded` event; pass silent to suppress events.
|
||||
|
||||
#### expandNode(node | nodeId, options)
|
||||
|
||||
Expand a given tree node, accepts node or nodeId. Optionally can be expanded to any given number of levels.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('expandNode', [ nodeId, { levels: 2, silent: true } ]);
|
||||
```
|
||||
|
||||
Triggers `nodeExpanded` event; pass silent to suppress events.
|
||||
|
||||
#### getCollapsed()
|
||||
|
||||
Returns an array of collapsed nodes e.g. state.expanded = false.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('getCollapsed', nodeId);
|
||||
```
|
||||
|
||||
#### getDisabled()
|
||||
|
||||
Returns an array of disabled nodes e.g. state.disabled = true.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('getDisabled', nodeId);
|
||||
```
|
||||
|
||||
#### getEnabled()
|
||||
|
||||
Returns an array of enabled nodes e.g. state.disabled = false.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('getEnabled', nodeId);
|
||||
```
|
||||
|
||||
#### getExpanded()
|
||||
|
||||
Returns an array of expanded nodes e.g. state.expanded = true.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('getExpanded', nodeId);
|
||||
```
|
||||
|
||||
#### getNode(nodeId)
|
||||
|
||||
Returns a single node object that matches the given node id.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('getNode', nodeId);
|
||||
```
|
||||
|
||||
#### getParent(node | nodeId)
|
||||
|
||||
Returns the parent node of a given node, if valid otherwise returns undefined.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('getParent', node);
|
||||
```
|
||||
|
||||
#### getSelected()
|
||||
|
||||
Returns an array of selected nodes e.g. state.selected = true.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('getSelected', nodeId);
|
||||
```
|
||||
|
||||
#### getSiblings(node | nodeId)
|
||||
|
||||
Returns an array of sibling nodes for a given node, if valid otherwise returns undefined.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('getSiblings', node);
|
||||
```
|
||||
|
||||
#### getUnselected()
|
||||
|
||||
Returns an array of unselected nodes e.g. state.selected = false.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('getUnselected', nodeId);
|
||||
```
|
||||
|
||||
#### remove()
|
||||
|
||||
Removes the tree view component. Removing attached events, internal attached objects, and added HTML elements.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('remove');
|
||||
```
|
||||
|
||||
#### revealNode(node | nodeId, options)
|
||||
|
||||
Reveals a given tree node, expanding the tree from node to root.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('revealNode', [ nodeId, { silent: true } ]);
|
||||
```
|
||||
|
||||
Triggers `nodeExpanded` event; pass silent to suppress events.
|
||||
|
||||
#### search(pattern, options)
|
||||
|
||||
Searches the tree view for nodes that match a given string, highlighting them in the tree.
|
||||
|
||||
Returns an array of matching nodes.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('search', [ 'Parent', {
|
||||
ignoreCase: true, // case insensitive
|
||||
exactMatch: false, // like or equals
|
||||
revealResults: true, // reveal matching nodes
|
||||
}]);
|
||||
```
|
||||
|
||||
Triggers `searchComplete` event
|
||||
|
||||
#### selectNode(node | nodeId, options)
|
||||
|
||||
Selects a given tree node, accepts node or nodeId.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);
|
||||
```
|
||||
|
||||
Triggers `nodeSelected` event; pass silent to suppress events.
|
||||
|
||||
#### toggleNodeChecked(node | nodeId, options)
|
||||
|
||||
Toggles a nodes checked state; checking if unchecked, unchecking if checked.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('toggleNodeChecked', [ nodeId, { silent: true } ]);
|
||||
```
|
||||
|
||||
Triggers either `nodeChecked` or `nodeUnchecked` event; pass silent to suppress events.
|
||||
|
||||
#### toggleNodeDisabled(node | nodeId, options)
|
||||
|
||||
Toggles a nodes disabled state; disabling if enabled, enabling if disabled.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('toggleNodeDisabled', [ nodeId, { silent: true } ]);
|
||||
```
|
||||
|
||||
Triggers either `nodeDisabled` or `nodeEnabled` event; pass silent to suppress events.
|
||||
|
||||
#### toggleNodeExpanded(node | nodeId, options)
|
||||
|
||||
Toggles a nodes expanded state; collapsing if expanded, expanding if collapsed.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('toggleNodeExpanded', [ nodeId, { silent: true } ]);
|
||||
```
|
||||
|
||||
Triggers either `nodeExpanded` or `nodeCollapsed` event; pass silent to suppress events.
|
||||
|
||||
#### toggleNodeSelected(node | nodeId, options)
|
||||
|
||||
Toggles a node selected state; selecting if unselected, unselecting if selected.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('toggleNodeSelected', [ nodeId, { silent: true } ]);
|
||||
```
|
||||
|
||||
Triggers either `nodeSelected` or `nodeUnselected` event; pass silent to suppress events.
|
||||
|
||||
#### uncheckAll(options)
|
||||
|
||||
Uncheck all tree nodes.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('uncheckAll', { silent: true });
|
||||
```
|
||||
|
||||
Triggers `nodeUnchecked` event; pass silent to suppress events.
|
||||
|
||||
#### uncheckNode(node | nodeId, options)
|
||||
|
||||
Uncheck a given tree node, accepts node or nodeId.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);
|
||||
```
|
||||
|
||||
Triggers `nodeUnchecked` event; pass silent to suppress events.
|
||||
|
||||
#### unselectNode(node | nodeId, options)
|
||||
|
||||
Unselects a given tree node, accepts node or nodeId.
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview('unselectNode', [ nodeId, { silent: true } ]);
|
||||
```
|
||||
|
||||
Triggers `nodeUnselected` event; pass silent to suppress events.
|
||||
|
||||
## Events
|
||||
|
||||
Events are provided so that your application can respond to changes in the treeview's state. For example, if you want to update a display when a node is selected use the `nodeSelected` event.
|
||||
|
||||
You can bind to any event defined below by either using an options callback handler, or the standard jQuery .on method.
|
||||
|
||||
Example using options callback handler:
|
||||
|
||||
```javascript
|
||||
$('#tree').treeview({
|
||||
// The naming convention for callback's is to prepend with `on`
|
||||
// and capitalize the first letter of the event name
|
||||
// e.g. nodeSelected -> onNodeSelected
|
||||
onNodeSelected: function(event, data) {
|
||||
// Your logic goes here
|
||||
});
|
||||
```
|
||||
|
||||
and using jQuery .on method
|
||||
|
||||
```javascript
|
||||
$('#tree').on('nodeSelected', function(event, data) {
|
||||
// Your logic goes here
|
||||
});
|
||||
```
|
||||
|
||||
### List of Events
|
||||
|
||||
`nodeChecked (event, node)` - A node is checked.
|
||||
|
||||
`nodeCollapsed (event, node)` - A node is collapsed.
|
||||
|
||||
`nodeDisabled (event, node)` - A node is disabled.
|
||||
|
||||
`nodeEnabled (event, node)` - A node is enabled.
|
||||
|
||||
`nodeExpanded (event, node)` - A node is expanded.
|
||||
|
||||
`nodeSelected (event, node)` - A node is selected.
|
||||
|
||||
`nodeUnchecked (event, node)` - A node is unchecked.
|
||||
|
||||
`nodeUnselected (event, node)` - A node is unselected.
|
||||
|
||||
`searchComplete (event, results)` - After a search completes
|
||||
|
||||
`searchCleared (event, results)` - After search results are cleared
|
||||
|
||||
|
||||
|
||||
## Copyright and Licensing
|
||||
Copyright 2013 Jonathan Miles
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at <http://www.apache.org/licenses/LICENSE-2.0>
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
@@ -0,0 +1,29 @@
|
||||
|
||||
/**
|
||||
* Module dependencies.
|
||||
*/
|
||||
|
||||
var express = require('express');
|
||||
var http = require('http');
|
||||
var path = require('path');
|
||||
|
||||
var app = express();
|
||||
|
||||
// all environments
|
||||
app.set('port', process.env.PORT || 3000);
|
||||
app.use(express.favicon());
|
||||
app.use(express.logger('dev'));
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded());
|
||||
app.use(express.methodOverride());
|
||||
app.use(express.static(path.join(__dirname, '/public')));
|
||||
app.use(express.static(path.join(__dirname, '/tests')));
|
||||
|
||||
// development only
|
||||
if ('development' == app.get('env')) {
|
||||
app.use(express.errorHandler());
|
||||
}
|
||||
|
||||
http.createServer(app).listen(app.get('port'), function(){
|
||||
console.log('Express server listening on port ' + app.get('port'));
|
||||
});
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "bootstrap-treeview",
|
||||
"description": "Tree View for Twitter Bootstrap",
|
||||
"version": "1.2.0",
|
||||
"homepage": "https://github.com/jonmiles/bootstrap-treeview",
|
||||
"main": [
|
||||
"dist/bootstrap-treeview.min.js",
|
||||
"dist/bootstrap-treeview.min.css"
|
||||
],
|
||||
"keywords": [
|
||||
"twitter",
|
||||
"bootstrap",
|
||||
"tree",
|
||||
"treeview",
|
||||
"tree-view",
|
||||
"navigation",
|
||||
"javascript",
|
||||
"jquery",
|
||||
"jquery-plugin"
|
||||
],
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">= 1.9.0",
|
||||
"bootstrap": ">= 3.0.0"
|
||||
},
|
||||
"devDependencies": {}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
.treeview .list-group-item{cursor:pointer}.treeview span.indent{margin-left:10px;margin-right:10px}.treeview span.icon{width:12px;margin-right:5px}.treeview .node-disabled{color:silver;cursor:not-allowed}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,59 @@
|
||||
{
|
||||
"name": "bootstrap-treeview",
|
||||
"description": "Tree View for Twitter Bootstrap",
|
||||
"version": "1.2.0",
|
||||
"homepage": "https://github.com/jonmiles/bootstrap-treeview",
|
||||
"author": {
|
||||
"name": "Jonathan Miles"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/jonmiles/bootstrap-treeview.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/jonmiles/bootstrap-treeview/issues"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "Apache",
|
||||
"url": "https://github.com/jonmiles/bootstrap-treeview/blob/master/LICENSE"
|
||||
}
|
||||
],
|
||||
"main": [
|
||||
"dist/bootstrap-treeview.min.js",
|
||||
"dist/bootstrap-treeview.min.css"
|
||||
],
|
||||
"scripts": {
|
||||
"install": "bower install",
|
||||
"start": "node app",
|
||||
"test": "grunt test"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "3.4.x",
|
||||
"ejs": "2.2.x",
|
||||
"phantomjs": "1.9.x"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bower": "1.3.x",
|
||||
"grunt": "0.4.x",
|
||||
"grunt-contrib-uglify": "0.7.x",
|
||||
"grunt-contrib-cssmin": "0.12.x",
|
||||
"grunt-contrib-qunit": "0.5.x",
|
||||
"grunt-contrib-watch": "0.6.x",
|
||||
"grunt-contrib-copy": "0.7.x"
|
||||
},
|
||||
"keywords": [
|
||||
"twitter",
|
||||
"bootstrap",
|
||||
"tree",
|
||||
"treeview",
|
||||
"tree-view",
|
||||
"navigation",
|
||||
"javascript",
|
||||
"jquery",
|
||||
"jquery-plugin"
|
||||
]
|
||||
}
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
/* =========================================================
|
||||
* bootstrap-treeview.css v1.2.0
|
||||
* =========================================================
|
||||
* Copyright 2013 Jonathan Miles
|
||||
* Project URL : http://www.jondmiles.com/bootstrap-treeview
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ========================================================= */
|
||||
|
||||
.treeview .list-group-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.treeview span.indent {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.treeview span.icon {
|
||||
width: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.treeview .node-disabled {
|
||||
color: silver;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap Tree View</title>
|
||||
<link href="./bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="./css/bootstrap-treeview.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Bootstrap Tree View - DOM Tree</h1>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<label for="treeview"></label>
|
||||
<div id="treeview"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="./js/bootstrap-treeview.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
function buildDomTree() {
|
||||
|
||||
var data = [];
|
||||
|
||||
function walk(nodes, data) {
|
||||
if (!nodes) { return; }
|
||||
$.each(nodes, function (id, node) {
|
||||
var obj = {
|
||||
id: id,
|
||||
text: node.nodeName + " - " + (node.innerText ? node.innerText : ''),
|
||||
tags: [node.childElementCount > 0 ? node.childElementCount + ' child elements' : '']
|
||||
};
|
||||
if (node.childElementCount > 0) {
|
||||
obj.nodes = [];
|
||||
walk(node.children, obj.nodes);
|
||||
}
|
||||
data.push(obj);
|
||||
});
|
||||
}
|
||||
|
||||
walk($('html')[0].children, data);
|
||||
return data;
|
||||
}
|
||||
|
||||
$(function() {
|
||||
|
||||
var options = {
|
||||
bootstrap2: false,
|
||||
showTags: true,
|
||||
levels: 5,
|
||||
data: buildDomTree()
|
||||
};
|
||||
|
||||
$('#treeview').treeview(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
@@ -0,0 +1,763 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap Tree View</title>
|
||||
<link href="./bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
|
||||
<!-- <link href="./css/bootstrap-treeview.css" rel="stylesheet"> -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Bootstrap Tree View</h1>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h2>Default</h2>
|
||||
<div id="treeview1" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Collapsed</h2>
|
||||
<div id="treeview2" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Expanded</h2>
|
||||
<div id="treeview3" class=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h2>Blue Theme</h2>
|
||||
<div id="treeview4" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Custom Icons</h2>
|
||||
<div id="treeview5" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Tags as Badges</h2>
|
||||
<div id="treeview6" class=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h2>No Border</h2>
|
||||
<div id="treeview7" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Colourful</h2>
|
||||
<div id="treeview8" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Node Overrides</h2>
|
||||
<div id="treeview9" class=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h2>Link enabled, or</h2>
|
||||
<div id="treeview10" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<hr>
|
||||
<h2>Searchable Tree</h2>
|
||||
<div class="col-sm-4">
|
||||
<h2>Input</h2>
|
||||
<!-- <form> -->
|
||||
<div class="form-group">
|
||||
<label for="input-search" class="sr-only">Search Tree:</label>
|
||||
<input type="input" class="form-control" id="input-search" placeholder="Type to search..." value="">
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" id="chk-ignore-case" value="false">
|
||||
Ignore Case
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" id="chk-exact-match" value="false">
|
||||
Exact Match
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" id="chk-reveal-results" value="false">
|
||||
Reveal Results
|
||||
</label>
|
||||
</div>
|
||||
<button type="button" class="btn btn-success" id="btn-search">Search</button>
|
||||
<button type="button" class="btn btn-default" id="btn-clear-search">Clear</button>
|
||||
<!-- </form> -->
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Tree</h2>
|
||||
<div id="treeview-searchable" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Results</h2>
|
||||
<div id="search-output"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<hr>
|
||||
<h2>Selectable Tree</h2>
|
||||
<div class="col-sm-4">
|
||||
<h2>Input</h2>
|
||||
<div class="form-group">
|
||||
<label for="input-select-node" class="sr-only">Search Tree:</label>
|
||||
<input type="input" class="form-control" id="input-select-node" placeholder="Identify node..." value="Parent 1">
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" id="chk-select-multi" value="false">
|
||||
Multi Select
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" id="chk-select-silent" value="false">
|
||||
Silent (No events)
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-success select-node" id="btn-select-node">Select Node</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-danger select-node" id="btn-unselect-node">Unselect Node</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-primary select-node" id="btn-toggle-selected">Toggle Node</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Tree</h2>
|
||||
<div id="treeview-selectable" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Events</h2>
|
||||
<div id="selectable-output"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<hr>
|
||||
<h2>Expandible Tree</h2>
|
||||
<div class="col-sm-4">
|
||||
<h2>Input</h2>
|
||||
<div class="form-group">
|
||||
<label for="input-expand-node" class="sr-only">Search Tree:</label>
|
||||
<input type="input" class="form-control" id="input-expand-node" placeholder="Identify node..." value="Parent 1">
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" id="chk-expand-silent" value="false">
|
||||
Silent (No events)
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-6">
|
||||
<button type="button" class="btn btn-success expand-node" id="btn-expand-node">Expand Node</button>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control" id="select-expand-node-levels">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-danger expand-node" id="btn-collapse-node">Collapse Node</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-primary expand-node" id="btn-toggle-expanded">Toggle Node</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-6">
|
||||
<button type="button" class="btn btn-success" id="btn-expand-all">Expand All</button>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control" id="select-expand-all-levels">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger" id="btn-collapse-all">Collapse All</button>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Tree</h2>
|
||||
<div id="treeview-expandible" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Events</h2>
|
||||
<div id="expandible-output"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<hr>
|
||||
<h2>Checkable Tree</h2>
|
||||
<div class="col-sm-4">
|
||||
<h2>Input</h2>
|
||||
<div class="form-group">
|
||||
<label for="input-check-node" class="sr-only">Search Tree:</label>
|
||||
<input type="input" class="form-control" id="input-check-node" placeholder="Identify node..." value="Parent 1">
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" id="chk-check-silent" value="false">
|
||||
Silent (No events)
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-6">
|
||||
<button type="button" class="btn btn-success check-node" id="btn-check-node">Check Node</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-danger check-node" id="btn-uncheck-node">Uncheck Node</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-primary check-node" id="btn-toggle-checked">Toggle Node</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-6">
|
||||
<button type="button" class="btn btn-success" id="btn-check-all">Check All</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger" id="btn-uncheck-all">Uncheck All</button>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Tree</h2>
|
||||
<div id="treeview-checkable" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Events</h2>
|
||||
<div id="checkable-output"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<hr>
|
||||
<h2>Disabled Tree</h2>
|
||||
<div class="col-sm-4">
|
||||
<h2>Input</h2>
|
||||
<div class="form-group">
|
||||
<label for="input-disable-node" class="sr-only">Search Tree:</label>
|
||||
<input type="input" class="form-control" id="input-disable-node" placeholder="Identify node..." value="Parent 1">
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" id="chk-disable-silent" value="false">
|
||||
Silent (No events)
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-6">
|
||||
<button type="button" class="btn btn-success disable-node" id="btn-disable-node">Disable Node</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-danger disable-node" id="btn-enable-node">Enable Node</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="button" class="btn btn-primary disable-node" id="btn-toggle-disabled">Toggle Node</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-6">
|
||||
<button type="button" class="btn btn-success" id="btn-disable-all">Disable All</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger" id="btn-enable-all">Enable All</button>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Tree</h2>
|
||||
<div id="treeview-disabled" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2>Events</h2>
|
||||
<div id="disabled-output"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<hr>
|
||||
<h2>Data</h2>
|
||||
<div class="col-sm-4">
|
||||
<h2>JSON Data</h2>
|
||||
<div id="treeview12" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2></h2>
|
||||
<div id="treeview13" class=""></div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h2></h2>
|
||||
<div id="treeview14"></div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
<script src="./bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="./js/bootstrap-treeview.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
|
||||
var defaultData = [
|
||||
{
|
||||
text: 'Parent 1',
|
||||
href: '#parent1',
|
||||
tags: ['4'],
|
||||
nodes: [
|
||||
{
|
||||
text: 'Child 1',
|
||||
href: '#child1',
|
||||
tags: ['2'],
|
||||
nodes: [
|
||||
{
|
||||
text: 'Grandchild 1',
|
||||
href: '#grandchild1',
|
||||
tags: ['0']
|
||||
},
|
||||
{
|
||||
text: 'Grandchild 2',
|
||||
href: '#grandchild2',
|
||||
tags: ['0']
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Child 2',
|
||||
href: '#child2',
|
||||
tags: ['0']
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Parent 2',
|
||||
href: '#parent2',
|
||||
tags: ['0']
|
||||
},
|
||||
{
|
||||
text: 'Parent 3',
|
||||
href: '#parent3',
|
||||
tags: ['0']
|
||||
},
|
||||
{
|
||||
text: 'Parent 4',
|
||||
href: '#parent4',
|
||||
tags: ['0']
|
||||
},
|
||||
{
|
||||
text: 'Parent 5',
|
||||
href: '#parent5' ,
|
||||
tags: ['0']
|
||||
}
|
||||
];
|
||||
|
||||
var alternateData = [
|
||||
{
|
||||
text: 'Parent 1',
|
||||
tags: ['2'],
|
||||
nodes: [
|
||||
{
|
||||
text: 'Child 1',
|
||||
tags: ['3'],
|
||||
nodes: [
|
||||
{
|
||||
text: 'Grandchild 1',
|
||||
tags: ['6']
|
||||
},
|
||||
{
|
||||
text: 'Grandchild 2',
|
||||
tags: ['3']
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Child 2',
|
||||
tags: ['3']
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Parent 2',
|
||||
tags: ['7']
|
||||
},
|
||||
{
|
||||
text: 'Parent 3',
|
||||
icon: 'glyphicon glyphicon-earphone',
|
||||
href: '#demo',
|
||||
tags: ['11']
|
||||
},
|
||||
{
|
||||
text: 'Parent 4',
|
||||
icon: 'glyphicon glyphicon-cloud-download',
|
||||
href: '/demo.html',
|
||||
tags: ['19'],
|
||||
selected: true
|
||||
},
|
||||
{
|
||||
text: 'Parent 5',
|
||||
icon: 'glyphicon glyphicon-certificate',
|
||||
color: 'pink',
|
||||
backColor: 'red',
|
||||
href: 'http://www.tesco.com',
|
||||
tags: ['available','0']
|
||||
}
|
||||
];
|
||||
|
||||
var json = '[' +
|
||||
'{' +
|
||||
'"text": "Parent 1",' +
|
||||
'"nodes": [' +
|
||||
'{' +
|
||||
'"text": "Child 1",' +
|
||||
'"nodes": [' +
|
||||
'{' +
|
||||
'"text": "Grandchild 1"' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Grandchild 2"' +
|
||||
'}' +
|
||||
']' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Child 2"' +
|
||||
'}' +
|
||||
']' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Parent 2"' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Parent 3"' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Parent 4"' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Parent 5"' +
|
||||
'}' +
|
||||
']';
|
||||
|
||||
|
||||
$('#treeview1').treeview({
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview2').treeview({
|
||||
levels: 1,
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview3').treeview({
|
||||
levels: 99,
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview4').treeview({
|
||||
|
||||
color: "#428bca",
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview5').treeview({
|
||||
color: "#428bca",
|
||||
expandIcon: 'glyphicon glyphicon-chevron-right',
|
||||
collapseIcon: 'glyphicon glyphicon-chevron-down',
|
||||
nodeIcon: 'glyphicon glyphicon-bookmark',
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview6').treeview({
|
||||
color: "#428bca",
|
||||
expandIcon: "glyphicon glyphicon-stop",
|
||||
collapseIcon: "glyphicon glyphicon-unchecked",
|
||||
nodeIcon: "glyphicon glyphicon-user",
|
||||
showTags: true,
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview7').treeview({
|
||||
color: "#428bca",
|
||||
showBorder: false,
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview8').treeview({
|
||||
expandIcon: "glyphicon glyphicon-stop",
|
||||
collapseIcon: "glyphicon glyphicon-unchecked",
|
||||
nodeIcon: "glyphicon glyphicon-user",
|
||||
color: "yellow",
|
||||
backColor: "purple",
|
||||
onhoverColor: "orange",
|
||||
borderColor: "red",
|
||||
showBorder: false,
|
||||
showTags: true,
|
||||
highlightSelected: true,
|
||||
selectedColor: "yellow",
|
||||
selectedBackColor: "darkorange",
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview9').treeview({
|
||||
expandIcon: "glyphicon glyphicon-stop",
|
||||
collapseIcon: "glyphicon glyphicon-unchecked",
|
||||
nodeIcon: "glyphicon glyphicon-user",
|
||||
color: "yellow",
|
||||
backColor: "purple",
|
||||
onhoverColor: "orange",
|
||||
borderColor: "red",
|
||||
showBorder: false,
|
||||
showTags: true,
|
||||
highlightSelected: true,
|
||||
selectedColor: "yellow",
|
||||
selectedBackColor: "darkorange",
|
||||
data: alternateData
|
||||
});
|
||||
|
||||
$('#treeview10').treeview({
|
||||
color: "#428bca",
|
||||
enableLinks: true,
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
|
||||
|
||||
var $searchableTree = $('#treeview-searchable').treeview({
|
||||
data: defaultData,
|
||||
});
|
||||
|
||||
var search = function(e) {
|
||||
var pattern = $('#input-search').val();
|
||||
var options = {
|
||||
ignoreCase: $('#chk-ignore-case').is(':checked'),
|
||||
exactMatch: $('#chk-exact-match').is(':checked'),
|
||||
revealResults: $('#chk-reveal-results').is(':checked')
|
||||
};
|
||||
var results = $searchableTree.treeview('search', [ pattern, options ]);
|
||||
|
||||
var output = '<p>' + results.length + ' matches found</p>';
|
||||
$.each(results, function (index, result) {
|
||||
output += '<p>- ' + result.text + '</p>';
|
||||
});
|
||||
$('#search-output').html(output);
|
||||
}
|
||||
|
||||
$('#btn-search').on('click', search);
|
||||
$('#input-search').on('keyup', search);
|
||||
|
||||
$('#btn-clear-search').on('click', function (e) {
|
||||
$searchableTree.treeview('clearSearch');
|
||||
$('#input-search').val('');
|
||||
$('#search-output').html('');
|
||||
});
|
||||
|
||||
|
||||
var initSelectableTree = function() {
|
||||
return $('#treeview-selectable').treeview({
|
||||
data: defaultData,
|
||||
multiSelect: $('#chk-select-multi').is(':checked'),
|
||||
onNodeSelected: function(event, node) {
|
||||
$('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
|
||||
},
|
||||
onNodeUnselected: function (event, node) {
|
||||
$('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>');
|
||||
}
|
||||
});
|
||||
};
|
||||
var $selectableTree = initSelectableTree();
|
||||
|
||||
var findSelectableNodes = function() {
|
||||
return $selectableTree.treeview('search', [ $('#input-select-node').val(), { ignoreCase: false, exactMatch: false } ]);
|
||||
};
|
||||
var selectableNodes = findSelectableNodes();
|
||||
|
||||
$('#chk-select-multi:checkbox').on('change', function () {
|
||||
console.log('multi-select change');
|
||||
$selectableTree = initSelectableTree();
|
||||
selectableNodes = findSelectableNodes();
|
||||
});
|
||||
|
||||
// Select/unselect/toggle nodes
|
||||
$('#input-select-node').on('keyup', function (e) {
|
||||
selectableNodes = findSelectableNodes();
|
||||
$('.select-node').prop('disabled', !(selectableNodes.length >= 1));
|
||||
});
|
||||
|
||||
$('#btn-select-node.select-node').on('click', function (e) {
|
||||
$selectableTree.treeview('selectNode', [ selectableNodes, { silent: $('#chk-select-silent').is(':checked') }]);
|
||||
});
|
||||
|
||||
$('#btn-unselect-node.select-node').on('click', function (e) {
|
||||
$selectableTree.treeview('unselectNode', [ selectableNodes, { silent: $('#chk-select-silent').is(':checked') }]);
|
||||
});
|
||||
|
||||
$('#btn-toggle-selected.select-node').on('click', function (e) {
|
||||
$selectableTree.treeview('toggleNodeSelected', [ selectableNodes, { silent: $('#chk-select-silent').is(':checked') }]);
|
||||
});
|
||||
|
||||
|
||||
|
||||
var $expandibleTree = $('#treeview-expandible').treeview({
|
||||
data: defaultData,
|
||||
onNodeCollapsed: function(event, node) {
|
||||
$('#expandible-output').prepend('<p>' + node.text + ' was collapsed</p>');
|
||||
},
|
||||
onNodeExpanded: function (event, node) {
|
||||
$('#expandible-output').prepend('<p>' + node.text + ' was expanded</p>');
|
||||
}
|
||||
});
|
||||
|
||||
var findExpandibleNodess = function() {
|
||||
return $expandibleTree.treeview('search', [ $('#input-expand-node').val(), { ignoreCase: false, exactMatch: false } ]);
|
||||
};
|
||||
var expandibleNodes = findExpandibleNodess();
|
||||
|
||||
// Expand/collapse/toggle nodes
|
||||
$('#input-expand-node').on('keyup', function (e) {
|
||||
expandibleNodes = findExpandibleNodess();
|
||||
$('.expand-node').prop('disabled', !(expandibleNodes.length >= 1));
|
||||
});
|
||||
|
||||
$('#btn-expand-node.expand-node').on('click', function (e) {
|
||||
var levels = $('#select-expand-node-levels').val();
|
||||
$expandibleTree.treeview('expandNode', [ expandibleNodes, { levels: levels, silent: $('#chk-expand-silent').is(':checked') }]);
|
||||
});
|
||||
|
||||
$('#btn-collapse-node.expand-node').on('click', function (e) {
|
||||
$expandibleTree.treeview('collapseNode', [ expandibleNodes, { silent: $('#chk-expand-silent').is(':checked') }]);
|
||||
});
|
||||
|
||||
$('#btn-toggle-expanded.expand-node').on('click', function (e) {
|
||||
$expandibleTree.treeview('toggleNodeExpanded', [ expandibleNodes, { silent: $('#chk-expand-silent').is(':checked') }]);
|
||||
});
|
||||
|
||||
// Expand/collapse all
|
||||
$('#btn-expand-all').on('click', function (e) {
|
||||
var levels = $('#select-expand-all-levels').val();
|
||||
$expandibleTree.treeview('expandAll', { levels: levels, silent: $('#chk-expand-silent').is(':checked') });
|
||||
});
|
||||
|
||||
$('#btn-collapse-all').on('click', function (e) {
|
||||
$expandibleTree.treeview('collapseAll', { silent: $('#chk-expand-silent').is(':checked') });
|
||||
});
|
||||
|
||||
|
||||
|
||||
var $checkableTree = $('#treeview-checkable').treeview({
|
||||
data: defaultData,
|
||||
showIcon: false,
|
||||
showCheckbox: true,
|
||||
onNodeChecked: function(event, node) {
|
||||
$('#checkable-output').prepend('<p>' + node.text + ' was checked</p>');
|
||||
},
|
||||
onNodeUnchecked: function (event, node) {
|
||||
$('#checkable-output').prepend('<p>' + node.text + ' was unchecked</p>');
|
||||
}
|
||||
});
|
||||
|
||||
var findCheckableNodess = function() {
|
||||
return $checkableTree.treeview('search', [ $('#input-check-node').val(), { ignoreCase: false, exactMatch: false } ]);
|
||||
};
|
||||
var checkableNodes = findCheckableNodess();
|
||||
|
||||
// Check/uncheck/toggle nodes
|
||||
$('#input-check-node').on('keyup', function (e) {
|
||||
checkableNodes = findCheckableNodess();
|
||||
$('.check-node').prop('disabled', !(checkableNodes.length >= 1));
|
||||
});
|
||||
|
||||
$('#btn-check-node.check-node').on('click', function (e) {
|
||||
$checkableTree.treeview('checkNode', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
|
||||
});
|
||||
|
||||
$('#btn-uncheck-node.check-node').on('click', function (e) {
|
||||
$checkableTree.treeview('uncheckNode', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
|
||||
});
|
||||
|
||||
$('#btn-toggle-checked.check-node').on('click', function (e) {
|
||||
$checkableTree.treeview('toggleNodeChecked', [ checkableNodes, { silent: $('#chk-check-silent').is(':checked') }]);
|
||||
});
|
||||
|
||||
// Check/uncheck all
|
||||
$('#btn-check-all').on('click', function (e) {
|
||||
$checkableTree.treeview('checkAll', { silent: $('#chk-check-silent').is(':checked') });
|
||||
});
|
||||
|
||||
$('#btn-uncheck-all').on('click', function (e) {
|
||||
$checkableTree.treeview('uncheckAll', { silent: $('#chk-check-silent').is(':checked') });
|
||||
});
|
||||
|
||||
|
||||
|
||||
var $disabledTree = $('#treeview-disabled').treeview({
|
||||
data: defaultData,
|
||||
onNodeDisabled: function(event, node) {
|
||||
$('#disabled-output').prepend('<p>' + node.text + ' was disabled</p>');
|
||||
},
|
||||
onNodeEnabled: function (event, node) {
|
||||
$('#disabled-output').prepend('<p>' + node.text + ' was enabled</p>');
|
||||
},
|
||||
onNodeCollapsed: function(event, node) {
|
||||
$('#disabled-output').prepend('<p>' + node.text + ' was collapsed</p>');
|
||||
},
|
||||
onNodeUnchecked: function (event, node) {
|
||||
$('#disabled-output').prepend('<p>' + node.text + ' was unchecked</p>');
|
||||
},
|
||||
onNodeUnselected: function (event, node) {
|
||||
$('#disabled-output').prepend('<p>' + node.text + ' was unselected</p>');
|
||||
}
|
||||
});
|
||||
|
||||
var findDisabledNodes = function() {
|
||||
return $disabledTree.treeview('search', [ $('#input-disable-node').val(), { ignoreCase: false, exactMatch: false } ]);
|
||||
};
|
||||
var disabledNodes = findDisabledNodes();
|
||||
|
||||
// Expand/collapse/toggle nodes
|
||||
$('#input-disable-node').on('keyup', function (e) {
|
||||
disabledNodes = findDisabledNodes();
|
||||
$('.disable-node').prop('disabled', !(disabledNodes.length >= 1));
|
||||
});
|
||||
|
||||
$('#btn-disable-node.disable-node').on('click', function (e) {
|
||||
$disabledTree.treeview('disableNode', [ disabledNodes, { silent: $('#chk-disable-silent').is(':checked') }]);
|
||||
});
|
||||
|
||||
$('#btn-enable-node.disable-node').on('click', function (e) {
|
||||
$disabledTree.treeview('enableNode', [ disabledNodes, { silent: $('#chk-disable-silent').is(':checked') }]);
|
||||
});
|
||||
|
||||
$('#btn-toggle-disabled.disable-node').on('click', function (e) {
|
||||
$disabledTree.treeview('toggleNodeDisabled', [ disabledNodes, { silent: $('#chk-disable-silent').is(':checked') }]);
|
||||
});
|
||||
|
||||
// Expand/collapse all
|
||||
$('#btn-disable-all').on('click', function (e) {
|
||||
$disabledTree.treeview('disableAll', { silent: $('#chk-disable-silent').is(':checked') });
|
||||
});
|
||||
|
||||
$('#btn-enable-all').on('click', function (e) {
|
||||
$disabledTree.treeview('enableAll', { silent: $('#chk-disable-silent').is(':checked') });
|
||||
});
|
||||
|
||||
|
||||
|
||||
var $tree = $('#treeview12').treeview({
|
||||
data: json
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+1249
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@@ -0,0 +1,37 @@
|
||||
/* =========================================================
|
||||
* bootstrap-treeview.css v1.2.0
|
||||
* =========================================================
|
||||
* Copyright 2013 Jonathan Miles
|
||||
* Project URL : http://www.jondmiles.com/bootstrap-treeview
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ========================================================= */
|
||||
|
||||
.treeview .list-group-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.treeview span.indent {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.treeview span.icon {
|
||||
width: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.treeview .node-disabled {
|
||||
color: silver;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
# Testing
|
||||
|
||||
Tests are run using [QUnit](https://qunitjs.com/) and [PhantomJS](http://phantomjs.org/)
|
||||
|
||||
To run the tests yourself.
|
||||
|
||||
```javascript
|
||||
$ npm install
|
||||
$ npm test
|
||||
```
|
||||
|
||||
To view the test report.
|
||||
|
||||
```javascript
|
||||
$ npm install
|
||||
$ npm start
|
||||
```
|
||||
|
||||
Then open a browser and navigate to [http://localhost:3000/tests.html](http://localhost:3000/tests.html)
|
||||
File diff suppressed because one or more lines are too long
+37
@@ -0,0 +1,37 @@
|
||||
/* =========================================================
|
||||
* bootstrap-treeview.css v1.2.0
|
||||
* =========================================================
|
||||
* Copyright 2013 Jonathan Miles
|
||||
* Project URL : http://www.jondmiles.com/bootstrap-treeview
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ========================================================= */
|
||||
|
||||
.treeview .list-group-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.treeview span.indent {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.treeview span.icon {
|
||||
width: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.treeview .node-disabled {
|
||||
color: silver;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
+1249
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,244 @@
|
||||
/**
|
||||
* QUnit v1.12.0 - A JavaScript Unit Testing Framework
|
||||
*
|
||||
* http://qunitjs.com
|
||||
*
|
||||
* Copyright 2012 jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
#qunit-tests { font-size: smaller; }
|
||||
|
||||
|
||||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header */
|
||||
|
||||
#qunit-header {
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
|
||||
color: #8699a4;
|
||||
background-color: #0d3349;
|
||||
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
|
||||
border-radius: 5px 5px 0 0;
|
||||
-moz-border-radius: 5px 5px 0 0;
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
text-decoration: none;
|
||||
color: #c2ccd1;
|
||||
}
|
||||
|
||||
#qunit-header a:hover,
|
||||
#qunit-header a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar label {
|
||||
display: inline-block;
|
||||
padding: 0 .5em 0 .1em;
|
||||
}
|
||||
|
||||
#qunit-banner {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0.5em 0 0.5em 2em;
|
||||
color: #5E740B;
|
||||
background-color: #eee;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
padding: 0.5em 0 0.5em 2.5em;
|
||||
background-color: #2b81af;
|
||||
color: #fff;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/** Tests: Pass/Fail */
|
||||
|
||||
#qunit-tests {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests li {
|
||||
padding: 0.4em 0.5em 0.4em 2.5em;
|
||||
border-bottom: 1px solid #fff;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #c2ccd1;
|
||||
text-decoration: none;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests li .runtime {
|
||||
float: right;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.qunit-assert-list {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
|
||||
.qunit-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests table {
|
||||
border-collapse: collapse;
|
||||
margin-top: .2em;
|
||||
}
|
||||
|
||||
#qunit-tests th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding: 0 .5em 0 0;
|
||||
}
|
||||
|
||||
#qunit-tests td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#qunit-tests pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#qunit-tests del {
|
||||
background-color: #e0f2be;
|
||||
color: #374e0c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests ins {
|
||||
background-color: #ffcaca;
|
||||
color: #500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** Test Counts */
|
||||
|
||||
#qunit-tests b.counts { color: black; }
|
||||
#qunit-tests b.passed { color: #5E740B; }
|
||||
#qunit-tests b.failed { color: #710909; }
|
||||
|
||||
#qunit-tests li li {
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/*** Passing Styles */
|
||||
|
||||
#qunit-tests li li.pass {
|
||||
color: #3c510c;
|
||||
background-color: #fff;
|
||||
border-left: 10px solid #C6E746;
|
||||
}
|
||||
|
||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||
#qunit-tests .pass .test-name { color: #366097; }
|
||||
|
||||
#qunit-tests .pass .test-actual,
|
||||
#qunit-tests .pass .test-expected { color: #999999; }
|
||||
|
||||
#qunit-banner.qunit-pass { background-color: #C6E746; }
|
||||
|
||||
/*** Failing Styles */
|
||||
|
||||
#qunit-tests li li.fail {
|
||||
color: #710909;
|
||||
background-color: #fff;
|
||||
border-left: 10px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
||||
#qunit-tests .fail .test-name,
|
||||
#qunit-tests .fail .module-name { color: #000000; }
|
||||
|
||||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: green; }
|
||||
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
padding: 0.5em 0.5em 0.5em 2.5em;
|
||||
|
||||
color: #2b81af;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
#qunit-testresult .module-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='UTF-8' />
|
||||
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
|
||||
|
||||
<title>bootstrap-treeview.js Tests</title>
|
||||
|
||||
<link rel='stylesheet' href='./lib/qunit-1.12.0.css'>
|
||||
|
||||
<script src='./lib/jquery.js'></script>
|
||||
<script src='./lib/qunit-1.12.0.js'></script>
|
||||
<script src="./lib/blanket.min.js"></script>
|
||||
|
||||
<script data-cover src='./lib/bootstrap-treeview.js'></script>
|
||||
|
||||
<!-- your tests, any and all to run with the given fixtures below -->
|
||||
<script src='./tests.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="qunit"></div> <!-- QUnit fills this with results, etc -->
|
||||
<div id='qunit-fixture'>
|
||||
|
||||
<!-- any HTML you want to be present in each test (will be reset for each test) -->
|
||||
<div id="treeview"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,875 @@
|
||||
/* global $, module, test, equal, ok */
|
||||
|
||||
;(function () {
|
||||
|
||||
'use strict';
|
||||
|
||||
function init(options) {
|
||||
return $('#treeview').treeview(options);
|
||||
}
|
||||
|
||||
function getOptions(el) {
|
||||
return el.data().treeview.options;
|
||||
}
|
||||
|
||||
var data = [
|
||||
{
|
||||
text: 'Parent 1',
|
||||
nodes: [
|
||||
{
|
||||
text: 'Child 1',
|
||||
nodes: [
|
||||
{
|
||||
text: 'Grandchild 1'
|
||||
},
|
||||
{
|
||||
text: 'Grandchild 2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Child 2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Parent 2'
|
||||
},
|
||||
{
|
||||
text: 'Parent 3'
|
||||
},
|
||||
{
|
||||
text: 'Parent 4'
|
||||
},
|
||||
{
|
||||
text: 'Parent 5'
|
||||
}
|
||||
];
|
||||
|
||||
var json = '[' +
|
||||
'{' +
|
||||
'"text": "Parent 1",' +
|
||||
'"nodes": [' +
|
||||
'{' +
|
||||
'"text": "Child 1",' +
|
||||
'"nodes": [' +
|
||||
'{' +
|
||||
'"text": "Grandchild 1"' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Grandchild 2"' +
|
||||
'}' +
|
||||
']' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Child 2"' +
|
||||
'}' +
|
||||
']' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Parent 2"' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Parent 3"' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Parent 4"' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Parent 5"' +
|
||||
'}' +
|
||||
']';
|
||||
|
||||
module('Options');
|
||||
|
||||
test('Options setup', function () {
|
||||
// First test defaults option values
|
||||
var el = init(),
|
||||
options = getOptions(el);
|
||||
ok(options, 'Defaults created ok');
|
||||
equal(options.levels, 2, 'levels default ok');
|
||||
equal(options.expandIcon, 'glyphicon glyphicon-plus', 'expandIcon default ok');
|
||||
equal(options.collapseIcon, 'glyphicon glyphicon-minus', 'collapseIcon default ok');
|
||||
equal(options.emptyIcon, 'glyphicon', 'emptyIcon default ok');
|
||||
equal(options.nodeIcon, '', 'nodeIcon default ok');
|
||||
equal(options.selectedIcon, '', 'selectedIcon default ok');
|
||||
equal(options.checkedIcon, 'glyphicon glyphicon-check', 'checkedIcon default ok');
|
||||
equal(options.uncheckedIcon, 'glyphicon glyphicon-unchecked', 'uncheckedIcon default ok');
|
||||
equal(options.color, undefined, 'color default ok');
|
||||
equal(options.backColor, undefined, 'backColor default ok');
|
||||
equal(options.borderColor, undefined, 'borderColor default ok');
|
||||
equal(options.onhoverColor, '#F5F5F5', 'onhoverColor default ok');
|
||||
equal(options.selectedColor, '#FFFFFF', 'selectedColor default ok');
|
||||
equal(options.selectedBackColor, '#428bca', 'selectedBackColor default ok');
|
||||
equal(options.searchResultColor, '#D9534F', 'searchResultColor default ok');
|
||||
equal(options.searchResultBackColor, undefined, 'searchResultBackColor default ok');
|
||||
equal(options.enableLinks, false, 'enableLinks default ok');
|
||||
equal(options.highlightSelected, true, 'highlightSelected default ok');
|
||||
equal(options.highlightSearchResults, true, 'highlightSearchResults default ok');
|
||||
equal(options.showBorder, true, 'showBorder default ok');
|
||||
equal(options.showIcon, true, 'showIcon default ok');
|
||||
equal(options.showCheckbox, false, 'showCheckbox default ok');
|
||||
equal(options.showTags, false, 'showTags default ok');
|
||||
equal(options.multiSelect, false, 'multiSelect default ok');
|
||||
equal(options.onNodeChecked, null, 'onNodeChecked default ok');
|
||||
equal(options.onNodeCollapsed, null, 'onNodeCollapsed default ok');
|
||||
equal(options.onNodeDisabled, null, 'onNodeDisabled default ok');
|
||||
equal(options.onNodeEnabled, null, 'onNodeEnabled default ok');
|
||||
equal(options.onNodeExpanded, null, 'onNodeExpanded default ok');
|
||||
equal(options.onNodeSelected, null, 'onNodeSelected default ok');
|
||||
equal(options.onNodeUnchecked, null, 'onNodeUnchecked default ok');
|
||||
equal(options.onNodeUnselected, null, 'onNodeUnselected default ok');
|
||||
equal(options.onSearchComplete, null, 'onSearchComplete default ok');
|
||||
equal(options.onSearchCleared, null, 'onSearchCleared default ok');
|
||||
|
||||
// Then test user options are correctly set
|
||||
var opts = {
|
||||
levels: 99,
|
||||
expandIcon: 'glyphicon glyphicon-expand',
|
||||
collapseIcon: 'glyphicon glyphicon-collapse',
|
||||
emptyIcon: 'glyphicon',
|
||||
nodeIcon: 'glyphicon glyphicon-stop',
|
||||
selectedIcon: 'glyphicon glyphicon-selected',
|
||||
checkedIcon: 'glyphicon glyphicon-checked-icon',
|
||||
uncheckedIcon: 'glyphicon glyphicon-unchecked-icon',
|
||||
color: 'yellow',
|
||||
backColor: 'purple',
|
||||
borderColor: 'purple',
|
||||
onhoverColor: 'orange',
|
||||
selectedColor: 'yellow',
|
||||
selectedBackColor: 'darkorange',
|
||||
searchResultColor: 'yellow',
|
||||
searchResultBackColor: 'darkorange',
|
||||
enableLinks: true,
|
||||
highlightSelected: false,
|
||||
highlightSearchResults: true,
|
||||
showBorder: false,
|
||||
showIcon: false,
|
||||
showCheckbox: true,
|
||||
showTags: true,
|
||||
multiSelect: true,
|
||||
onNodeChecked: function () {},
|
||||
onNodeCollapsed: function () {},
|
||||
onNodeDisabled: function () {},
|
||||
onNodeEnabled: function () {},
|
||||
onNodeExpanded: function () {},
|
||||
onNodeSelected: function () {},
|
||||
onNodeUnchecked: function () {},
|
||||
onNodeUnselected: function () {},
|
||||
onSearchComplete: function () {},
|
||||
onSearchCleared: function () {}
|
||||
};
|
||||
|
||||
options = getOptions(init(opts));
|
||||
ok(options, 'User options created ok');
|
||||
equal(options.levels, 99, 'levels set ok');
|
||||
equal(options.expandIcon, 'glyphicon glyphicon-expand', 'expandIcon set ok');
|
||||
equal(options.collapseIcon, 'glyphicon glyphicon-collapse', 'collapseIcon set ok');
|
||||
equal(options.emptyIcon, 'glyphicon', 'emptyIcon set ok');
|
||||
equal(options.nodeIcon, 'glyphicon glyphicon-stop', 'nodeIcon set ok');
|
||||
equal(options.selectedIcon, 'glyphicon glyphicon-selected', 'selectedIcon set ok');
|
||||
equal(options.checkedIcon, 'glyphicon glyphicon-checked-icon', 'checkedIcon set ok');
|
||||
equal(options.uncheckedIcon, 'glyphicon glyphicon-unchecked-icon', 'uncheckedIcon set ok');
|
||||
equal(options.color, 'yellow', 'color set ok');
|
||||
equal(options.backColor, 'purple', 'backColor set ok');
|
||||
equal(options.borderColor, 'purple', 'borderColor set ok');
|
||||
equal(options.onhoverColor, 'orange', 'onhoverColor set ok');
|
||||
equal(options.selectedColor, 'yellow', 'selectedColor set ok');
|
||||
equal(options.selectedBackColor, 'darkorange', 'selectedBackColor set ok');
|
||||
equal(options.searchResultColor, 'yellow', 'searchResultColor set ok');
|
||||
equal(options.searchResultBackColor, 'darkorange', 'searchResultBackColor set ok');
|
||||
equal(options.enableLinks, true, 'enableLinks set ok');
|
||||
equal(options.highlightSelected, false, 'highlightSelected set ok');
|
||||
equal(options.highlightSearchResults, true, 'highlightSearchResults set ok');
|
||||
equal(options.showBorder, false, 'showBorder set ok');
|
||||
equal(options.showIcon, false, 'showIcon set ok');
|
||||
equal(options.showCheckbox, true, 'showCheckbox set ok');
|
||||
equal(options.showTags, true, 'showTags set ok');
|
||||
equal(options.multiSelect, true, 'multiSelect set ok');
|
||||
equal(typeof options.onNodeChecked, 'function', 'onNodeChecked set ok');
|
||||
equal(typeof options.onNodeCollapsed, 'function', 'onNodeCollapsed set ok');
|
||||
equal(typeof options.onNodeDisabled, 'function', 'onNodeDisabled set ok');
|
||||
equal(typeof options.onNodeEnabled, 'function', 'onNodeEnabled set ok');
|
||||
equal(typeof options.onNodeExpanded, 'function', 'onNodeExpanded set ok');
|
||||
equal(typeof options.onNodeSelected, 'function', 'onNodeSelected set ok');
|
||||
equal(typeof options.onNodeUnchecked, 'function', 'onNodeUnchecked set ok');
|
||||
equal(typeof options.onNodeUnselected, 'function', 'onNodeUnselected set ok');
|
||||
equal(typeof options.onSearchComplete, 'function', 'onSearchComplete set ok');
|
||||
equal(typeof options.onSearchCleared, 'function', 'onSearchCleared set ok');
|
||||
});
|
||||
|
||||
test('Links enabled', function () {
|
||||
init({enableLinks:true, data:data});
|
||||
ok($('.list-group-item:first').children('a').length, 'Links are enabled');
|
||||
|
||||
});
|
||||
|
||||
|
||||
module('Data');
|
||||
|
||||
test('Accepts JSON', function () {
|
||||
var el = init({levels:1,data:json});
|
||||
equal($(el.selector + ' ul li').length, 5, 'Correct number of root nodes');
|
||||
|
||||
});
|
||||
|
||||
|
||||
module('Behaviour');
|
||||
|
||||
test('Is chainable', function () {
|
||||
var el = init();
|
||||
equal(el.addClass('test').attr('class'), 'treeview test', 'Is chainable');
|
||||
});
|
||||
|
||||
test('Correct initial levels shown', function () {
|
||||
|
||||
var el = init({levels:1,data:data});
|
||||
equal($(el.selector + ' ul li').length, 5, 'Correctly display 5 root nodes when levels set to 1');
|
||||
|
||||
el = init({levels:2,data:data});
|
||||
equal($(el.selector + ' ul li').length, 7, 'Correctly display 5 root and 2 child nodes when levels set to 2');
|
||||
|
||||
el = init({levels:3,data:data});
|
||||
equal($(el.selector + ' ul li').length, 9, 'Correctly display 5 root, 2 children and 2 grand children nodes when levels set to 3');
|
||||
});
|
||||
|
||||
test('Expanding a node', function () {
|
||||
|
||||
var cbWorked, onWorked = false;
|
||||
init({
|
||||
data: data,
|
||||
levels: 1,
|
||||
onNodeExpanded: function(/*event, date*/) {
|
||||
cbWorked = true;
|
||||
}
|
||||
})
|
||||
.on('nodeExpanded', function(/*event, date*/) {
|
||||
onWorked = true;
|
||||
});
|
||||
|
||||
var nodeCount = $('.list-group-item').length;
|
||||
var el = $('.expand-icon:first');
|
||||
el.trigger('click');
|
||||
ok(($('.list-group-item').length > nodeCount), 'Number of nodes are increased, so node must have expanded');
|
||||
ok(cbWorked, 'onNodeExpanded function was called');
|
||||
ok(onWorked, 'nodeExpanded was fired');
|
||||
});
|
||||
|
||||
test('Collapsing a node', function () {
|
||||
|
||||
var cbWorked, onWorked = false;
|
||||
init({
|
||||
data: data,
|
||||
levels: 2,
|
||||
onNodeCollapsed: function(/*event, date*/) {
|
||||
cbWorked = true;
|
||||
}
|
||||
})
|
||||
.on('nodeCollapsed', function(/*event, date*/) {
|
||||
onWorked = true;
|
||||
});
|
||||
|
||||
var nodeCount = $('.list-group-item').length;
|
||||
var el = $('.expand-icon:first');
|
||||
el.trigger('click');
|
||||
ok(($('.list-group-item').length < nodeCount), 'Number of nodes has decreased, so node must have collapsed');
|
||||
ok(cbWorked, 'onNodeCollapsed function was called');
|
||||
ok(onWorked, 'nodeCollapsed was fired');
|
||||
});
|
||||
|
||||
test('Selecting a node', function () {
|
||||
|
||||
var cbWorked, onWorked = false;
|
||||
var $tree = init({
|
||||
data: data,
|
||||
onNodeSelected: function(/*event, date*/) {
|
||||
cbWorked = true;
|
||||
}
|
||||
})
|
||||
.on('nodeSelected', function(/*event, date*/) {
|
||||
onWorked = true;
|
||||
});
|
||||
var options = getOptions($tree);
|
||||
|
||||
// Simulate click
|
||||
$('.list-group-item:first').trigger('click');
|
||||
|
||||
// Has class node-selected
|
||||
ok($('.list-group-item:first').hasClass('node-selected'), 'Node is correctly selected : class "node-selected" added');
|
||||
|
||||
// Only one can be selected
|
||||
ok(($('.node-selected').length === 1), 'There is only one selected node');
|
||||
|
||||
// Has correct icon
|
||||
var iconClass = options.selectedIcon || options.nodeIcon;
|
||||
ok(!iconClass || $('.expand-icon:first').hasClass(iconClass), 'Node icon is correct');
|
||||
|
||||
// Events triggered
|
||||
ok(cbWorked, 'onNodeSelected function was called');
|
||||
ok(onWorked, 'nodeSelected was fired');
|
||||
});
|
||||
|
||||
test('Unselecting a node', function () {
|
||||
|
||||
var cbWorked, onWorked = false;
|
||||
var $tree = init({
|
||||
data: data,
|
||||
onNodeUnselected: function(/*event, date*/) {
|
||||
cbWorked = true;
|
||||
}
|
||||
})
|
||||
.on('nodeUnselected', function(/*event, date*/) {
|
||||
onWorked = true;
|
||||
});
|
||||
var options = getOptions($tree);
|
||||
|
||||
// First select a node
|
||||
$('.list-group-item:first').trigger('click');
|
||||
cbWorked = onWorked = false;
|
||||
|
||||
// Simulate click
|
||||
$('.list-group-item:first').trigger('click');
|
||||
|
||||
// Has class node-selected
|
||||
ok(!$('.list-group-item:first').hasClass('node-selected'), 'Node is correctly unselected : class "node-selected" removed');
|
||||
|
||||
// Only one can be selected
|
||||
ok(($('.node-selected').length === 0), 'There are no selected nodes');
|
||||
|
||||
// Has correct icon
|
||||
ok(!options.nodeIcon || $('.expand-icon:first').hasClass(options.nodeIcon), 'Node icon is correct');
|
||||
|
||||
// Events triggered
|
||||
ok(cbWorked, 'onNodeUnselected function was called');
|
||||
ok(onWorked, 'nodeUnselected was fired');
|
||||
});
|
||||
|
||||
test('Selecting multiple nodes (multiSelect true)', function () {
|
||||
|
||||
init({
|
||||
data: data,
|
||||
multiSelect: true
|
||||
});
|
||||
|
||||
var $firstEl = $('.list-group-item:nth-child(1)').trigger('click');
|
||||
var $secondEl = $('.list-group-item:nth-child(2)').trigger('click');
|
||||
|
||||
$firstEl = $('.list-group-item:nth-child(1)');
|
||||
$secondEl = $('.list-group-item:nth-child(2)');
|
||||
|
||||
ok($firstEl.hasClass('node-selected'), 'First node is correctly selected : class "node-selected" added');
|
||||
ok($secondEl.hasClass('node-selected'), 'Second node is correctly selected : class "node-selected" added');
|
||||
ok(($('.node-selected').length === 2), 'There are two selected nodes');
|
||||
});
|
||||
|
||||
test('Clicking a non-selectable, collapsed node expands the node', function () {
|
||||
var testData = $.extend(true, {}, data);
|
||||
testData[0].selectable = false;
|
||||
|
||||
var cbCalled, onCalled = false;
|
||||
init({
|
||||
levels: 1,
|
||||
data: testData,
|
||||
onNodeSelected: function(/*event, date*/) {
|
||||
cbCalled = true;
|
||||
}
|
||||
})
|
||||
.on('nodeSelected', function(/*event, date*/) {
|
||||
onCalled = true;
|
||||
});
|
||||
|
||||
var nodeCount = $('.list-group-item').length;
|
||||
var el = $('.list-group-item:first');
|
||||
el.trigger('click');
|
||||
el = $('.list-group-item:first');
|
||||
ok(!el.hasClass('node-selected'), 'Node should not be selected');
|
||||
ok(!cbCalled, 'onNodeSelected function should not be called');
|
||||
ok(!onCalled, 'nodeSelected should not fire');
|
||||
ok(($('.list-group-item').length > nodeCount), 'Number of nodes are increased, so node must have expanded');
|
||||
});
|
||||
|
||||
test('Clicking a non-selectable, expanded node collapses the node', function () {
|
||||
var testData = $.extend(true, {}, data);
|
||||
testData[0].selectable = false;
|
||||
|
||||
var cbCalled, onCalled = false;
|
||||
init({
|
||||
levels: 2,
|
||||
data: testData,
|
||||
onNodeSelected: function(/*event, date*/) {
|
||||
cbCalled = true;
|
||||
}
|
||||
})
|
||||
.on('nodeSelected', function(/*event, date*/) {
|
||||
onCalled = true;
|
||||
});
|
||||
|
||||
var nodeCount = $('.list-group-item').length;
|
||||
var el = $('.list-group-item:first');
|
||||
el.trigger('click');
|
||||
el = $('.list-group-item:first');
|
||||
|
||||
ok(!el.hasClass('node-selected'), 'Node should not be selected');
|
||||
ok(!cbCalled, 'onNodeSelected function should not be called');
|
||||
ok(!onCalled, 'nodeSelected should not fire');
|
||||
ok(($('.list-group-item').length < nodeCount), 'Number of nodes has decreased, so node must have collapsed');
|
||||
});
|
||||
|
||||
test('Checking a node', function () {
|
||||
|
||||
// setup test
|
||||
var cbWorked, onWorked = false;
|
||||
var $tree = init({
|
||||
data: data,
|
||||
showCheckbox: true,
|
||||
onNodeChecked: function(/*event, date*/) {
|
||||
cbWorked = true;
|
||||
}
|
||||
})
|
||||
.on('nodeChecked', function(/*event, date*/) {
|
||||
onWorked = true;
|
||||
});
|
||||
var options = getOptions($tree);
|
||||
|
||||
// simulate click event on check icon
|
||||
var $el = $('.check-icon:first');
|
||||
$el.trigger('click');
|
||||
|
||||
// check state is correct
|
||||
$el = $('.check-icon:first');
|
||||
ok(($el.attr('class').indexOf(options.checkedIcon) !== -1), 'Node is checked : icon is correct');
|
||||
ok(cbWorked, 'onNodeChecked function was called');
|
||||
ok(onWorked, 'nodeChecked was fired');
|
||||
});
|
||||
|
||||
test('Unchecking a node', function () {
|
||||
|
||||
// setup test
|
||||
var cbWorked, onWorked = false;
|
||||
var $tree = init({
|
||||
data: data,
|
||||
showCheckbox: true,
|
||||
onNodeUnchecked: function(/*event, date*/) {
|
||||
cbWorked = true;
|
||||
}
|
||||
})
|
||||
.on('nodeUnchecked', function(/*event, date*/) {
|
||||
onWorked = true;
|
||||
});
|
||||
var options = getOptions($tree);
|
||||
|
||||
// first check a node
|
||||
var $el = $('.check-icon:first');
|
||||
$el.trigger('click');
|
||||
|
||||
// then simulate unchecking a node
|
||||
cbWorked = onWorked = false;
|
||||
$el = $('.check-icon:first');
|
||||
$el.trigger('click');
|
||||
|
||||
// check state is correct
|
||||
$el = $('.check-icon:first');
|
||||
ok(($el.attr('class').indexOf(options.uncheckedIcon) !== -1), 'Node is unchecked : icon is correct');
|
||||
ok(cbWorked, 'onNodeUnchecked function was called');
|
||||
ok(onWorked, 'nodeUnchecked was fired');
|
||||
});
|
||||
|
||||
|
||||
module('Methods');
|
||||
|
||||
test('getNode', function () {
|
||||
var $tree = init({ data: data });
|
||||
var nodeParent1 = $tree.treeview('getNode', 0);
|
||||
equal(nodeParent1.text, 'Parent 1', 'Correct node returned : requested "Parent 1", got "Parent 1"');
|
||||
});
|
||||
|
||||
test('getParent', function () {
|
||||
var $tree = init({ data: data });
|
||||
var nodeChild1 = $tree.treeview('getNode', 1);
|
||||
var parentNode = $tree.treeview('getParent', nodeChild1);
|
||||
equal(parentNode.text, 'Parent 1', 'Correct node returned : requested parent of "Child 1", got "Parent 1"');
|
||||
});
|
||||
|
||||
test('getSiblings', function () {
|
||||
var $tree = init({ data: data });
|
||||
|
||||
// Test root level, internally uses the this.tree
|
||||
var nodeParent1 = $tree.treeview('getNode', 0);
|
||||
var nodeParent1Siblings = $tree.treeview('getSiblings', nodeParent1);
|
||||
var isArray = (nodeParent1Siblings instanceof Array);
|
||||
var countOK = nodeParent1Siblings.length === 4;
|
||||
var resultsOK = nodeParent1Siblings[0].text === 'Parent 2';
|
||||
resultsOK = resultsOK && nodeParent1Siblings[1].text === 'Parent 3';
|
||||
resultsOK = resultsOK && nodeParent1Siblings[2].text === 'Parent 4';
|
||||
resultsOK = resultsOK && nodeParent1Siblings[3].text === 'Parent 5';
|
||||
ok(isArray, 'Correct siblings for "Parent 1" [root] : is array');
|
||||
ok(countOK, 'Correct siblings for "Parent 1" [root] : count OK');
|
||||
ok(resultsOK, 'Correct siblings for "Parent 1" [root] : results OK');
|
||||
|
||||
// Test non root level, internally uses getParent.nodes
|
||||
var nodeChild1 = $tree.treeview('getNode', 1);
|
||||
var nodeChild1Siblings = $tree.treeview('getSiblings', nodeChild1);
|
||||
var isArray = (nodeChild1Siblings instanceof Array);
|
||||
var countOK = nodeChild1Siblings.length === 1;
|
||||
var results = nodeChild1Siblings[0].text === 'Child 2'
|
||||
ok(isArray, 'Correct siblings for "Child 1" [non root] : is array');
|
||||
ok(countOK, 'Correct siblings for "Child 1" [non root] : count OK');
|
||||
ok(results, 'Correct siblings for "Child 1" [non root] : results OK');
|
||||
});
|
||||
|
||||
test('getSelected', function () {
|
||||
var $tree = init({ data: data })
|
||||
.treeview('selectNode', 0);
|
||||
|
||||
var selectedNodes = $tree.treeview('getSelected');
|
||||
ok((selectedNodes instanceof Array), 'Result is an array');
|
||||
equal(selectedNodes.length, 1, 'Correct number of nodes returned');
|
||||
equal(selectedNodes[0].text, 'Parent 1', 'Correct node returned');
|
||||
});
|
||||
|
||||
test('getUnselected', function () {
|
||||
var $tree = init({ data: data })
|
||||
.treeview('selectNode', 0);
|
||||
|
||||
var unselectedNodes = $tree.treeview('getUnselected');
|
||||
ok((unselectedNodes instanceof Array), 'Result is an array');
|
||||
equal(unselectedNodes.length, 8, 'Correct number of nodes returned');
|
||||
});
|
||||
|
||||
// Assumptions:
|
||||
// Default tree + expanded to 2 levels,
|
||||
// means 1 node 'Parent 1' should be expanded and therefore returned
|
||||
test('getExpanded', function () {
|
||||
var $tree = init({ data: data });
|
||||
var expandedNodes = $tree.treeview('getExpanded');
|
||||
ok((expandedNodes instanceof Array), 'Result is an array');
|
||||
equal(expandedNodes.length, 1, 'Correct number of nodes returned');
|
||||
equal(expandedNodes[0].text, 'Parent 1', 'Correct node returned');
|
||||
});
|
||||
|
||||
// Assumptions:
|
||||
// Default tree + expanded to 2 levels, means only 'Parent 1' should be expanded
|
||||
// as all other parent nodes have no children their state will be collapsed
|
||||
// which means 8 of the 9 nodes should be returned
|
||||
test('getCollapsed', function () {
|
||||
var $tree = init({ data: data });
|
||||
var collapsedNodes = $tree.treeview('getCollapsed');
|
||||
ok((collapsedNodes instanceof Array), 'Result is an array');
|
||||
equal(collapsedNodes.length, 8, 'Correct number of nodes returned');
|
||||
});
|
||||
|
||||
test('getChecked', function () {
|
||||
var $tree = init({ data: data, showCheckbox: true })
|
||||
.treeview('checkNode', 0);
|
||||
|
||||
var checkedNodes = $tree.treeview('getChecked');
|
||||
ok((checkedNodes instanceof Array), 'Result is an array');
|
||||
equal(checkedNodes.length, 1, 'Correct number of nodes returned');
|
||||
equal(checkedNodes[0].text, 'Parent 1', 'Correct node returned');
|
||||
});
|
||||
|
||||
test('getUnchecked', function () {
|
||||
var $tree = init({ data: data })
|
||||
.treeview('checkNode', 0);
|
||||
|
||||
var uncheckedNodes = $tree.treeview('getUnchecked');
|
||||
ok((uncheckedNodes instanceof Array), 'Result is an array');
|
||||
equal(uncheckedNodes.length, 8, 'Correct number of nodes returned');
|
||||
});
|
||||
|
||||
test('getDisabled', function () {
|
||||
var $tree = init({ data: data })
|
||||
.treeview('disableNode', 0);
|
||||
|
||||
var disabledNodes = $tree.treeview('getDisabled');
|
||||
ok((disabledNodes instanceof Array), 'Result is an array');
|
||||
equal(disabledNodes.length, 1, 'Correct number of nodes returned');
|
||||
equal(disabledNodes[0].text, 'Parent 1', 'Correct node returned');
|
||||
});
|
||||
|
||||
test('getEnabled', function () {
|
||||
var $tree = init({ data: data })
|
||||
.treeview('disableNode', 0);
|
||||
|
||||
var enabledNodes = $tree.treeview('getEnabled');
|
||||
ok((enabledNodes instanceof Array), 'Result is an array');
|
||||
equal(enabledNodes.length, 8, 'Correct number of nodes returned');
|
||||
});
|
||||
|
||||
test('disableAll / enableAll', function () {
|
||||
var $tree = init({ data: data, levels: 1 });
|
||||
|
||||
$tree.treeview('disableAll');
|
||||
equal($($tree.selector + ' ul li.node-disabled').length, 5, 'Disable all works, 9 nodes with node-disabled class');
|
||||
|
||||
$tree.treeview('enableAll');
|
||||
equal($($tree.selector + ' ul li.node-disabled').length, 0, 'Check all works, 9 nodes non with node-disabled class');
|
||||
});
|
||||
|
||||
test('disableNode / enableNode', function () {
|
||||
var $tree = init({ data: data, levels: 1 });
|
||||
var nodeId = 0;
|
||||
var node = $tree.treeview('getNode', 0);
|
||||
|
||||
// Disable node using node id
|
||||
$tree.treeview('disableNode', nodeId);
|
||||
ok($('.list-group-item:first').hasClass('node-disabled'), 'Disable node (by id) : Node has class node-disabled');
|
||||
ok(($('.node-disabled').length === 1), 'Disable node (by id) : There is only one disabled node');
|
||||
|
||||
// Enable node using node id
|
||||
$tree.treeview('enableNode', nodeId);
|
||||
ok(!$('.list-group-item:first').hasClass('node-disabled'), 'Enable node (by id) : Node does not have class node-disabled');
|
||||
ok(($('.node-checked').length === 0), 'Enable node (by id) : There are no disabled nodes');
|
||||
|
||||
// Disable node using node
|
||||
$tree.treeview('disableNode', node);
|
||||
ok($('.list-group-item:first').hasClass('node-disabled'), 'Disable node (by node) : Node has class node-disabled');
|
||||
ok(($('.node-disabled').length === 1), 'Disable node (by node) : There is only one disabled node');
|
||||
|
||||
// Enable node using node
|
||||
$tree.treeview('enableNode', node);
|
||||
ok(!$('.list-group-item:first').hasClass('node-disabled'), 'Enable node (by node) : Node does not have class node-disabled');
|
||||
ok(($('.node-checked').length === 0), 'Enable node (by node) : There are no disabled nodes');
|
||||
});
|
||||
|
||||
test('toggleNodeDisabled', function () {
|
||||
var $tree = init({ data: data, levels: 1 });
|
||||
var nodeId = 0;
|
||||
var node = $tree.treeview('getNode', 0);
|
||||
|
||||
// Toggle disabled using node id
|
||||
$tree.treeview('toggleNodeDisabled', nodeId);
|
||||
ok($('.list-group-item:first').hasClass('node-disabled'), 'Toggle node (by id) : Node has class node-disabled');
|
||||
ok(($('.node-disabled').length === 1), 'Toggle node (by id) : There is only one disabled node');
|
||||
|
||||
// Toggle disabled using node
|
||||
$tree.treeview('toggleNodeDisabled', node);
|
||||
ok(!$('.list-group-item:first').hasClass('node-disabled'), 'Toggle node (by node) : Node does not have class node-disabled');
|
||||
ok(($('.node-disabled').length === 0), 'Toggle node (by node) : There are no disabled nodes');
|
||||
});
|
||||
|
||||
test('checkAll / uncheckAll', function () {
|
||||
var $tree = init({ data: data, levels: 3, showCheckbox: true });
|
||||
|
||||
$tree.treeview('checkAll');
|
||||
equal($($tree.selector + ' ul li.node-checked').length, 9, 'Check all works, 9 nodes with node-checked class');
|
||||
equal($($tree.selector + ' ul li .glyphicon-check').length, 9, 'Check all works, 9 nodes with glyphicon-check icon');
|
||||
|
||||
$tree.treeview('uncheckAll');
|
||||
equal($($tree.selector + ' ul li.node-checked').length, 0, 'Check all works, 9 nodes non with node-checked class');
|
||||
equal($($tree.selector + ' ul li .glyphicon-unchecked').length, 9, 'Check all works, 9 nodes with glyphicon-unchecked icon');
|
||||
});
|
||||
|
||||
test('checkNode / uncheckNode', function () {
|
||||
var $tree = init({ data: data, showCheckbox: true });
|
||||
var options = getOptions($tree);
|
||||
var nodeId = 0;
|
||||
var node = $tree.treeview('getNode', 0);
|
||||
|
||||
// Check node using node id
|
||||
$tree.treeview('checkNode', nodeId);
|
||||
ok($('.list-group-item:first').hasClass('node-checked'), 'Check node (by id) : Node has class node-checked');
|
||||
ok(($('.node-checked').length === 1), 'Check node (by id) : There is only one checked node');
|
||||
ok($('.check-icon:first').hasClass(options.checkedIcon), 'Check node (by id) : Node icon is correct');
|
||||
|
||||
// Uncheck node using node id
|
||||
$tree.treeview('uncheckNode', nodeId);
|
||||
ok(!$('.list-group-item:first').hasClass('node-checked'), 'Uncheck node (by id) : Node does not have class node-checked');
|
||||
ok(($('.node-checked').length === 0), 'Uncheck node (by id) : There are no checked nodes');
|
||||
ok($('.check-icon:first').hasClass(options.uncheckedIcon), 'Uncheck node (by id) : Node icon is correct');
|
||||
|
||||
// Check node using node
|
||||
$tree.treeview('checkNode', node);
|
||||
ok($('.list-group-item:first').hasClass('node-checked'), 'Check node (by node) : Node has class node-checked');
|
||||
ok(($('.node-checked').length === 1), 'Check node (by node) : There is only one checked node');
|
||||
ok($('.check-icon:first').hasClass(options.checkedIcon), 'Check node (by node) : Node icon is correct');
|
||||
|
||||
// Uncheck node using node
|
||||
$tree.treeview('uncheckNode', node);
|
||||
ok(!$('.list-group-item:first').hasClass('node-checked'), 'Uncheck node (by node) : Node does not have class node-checked');
|
||||
ok(($('.node-checked').length === 0), 'Uncheck node (by node) : There are no checked nodes');
|
||||
ok($('.check-icon:first').hasClass(options.uncheckedIcon), 'Uncheck node (by node) : Node icon is correct');
|
||||
});
|
||||
|
||||
test('toggleNodeChecked', function () {
|
||||
var $tree = init({ data: data, showCheckbox: true });
|
||||
var options = getOptions($tree);
|
||||
var nodeId = 0;
|
||||
var node = $tree.treeview('getNode', 0);
|
||||
|
||||
// Toggle checked using node id
|
||||
$tree.treeview('toggleNodeChecked', nodeId);
|
||||
ok($('.list-group-item:first').hasClass('node-checked'), 'Toggle node (by id) : Node has class node-checked');
|
||||
ok(($('.node-checked').length === 1), 'Toggle node (by id) : There is only one checked node');
|
||||
ok($('.check-icon:first').hasClass(options.checkedIcon), 'Toggle node (by id) : Node icon is correct');
|
||||
|
||||
// Toggle checked using node
|
||||
$tree.treeview('toggleNodeChecked', node);
|
||||
ok(!$('.list-group-item:first').hasClass('node-checked'), 'Toggle node (by node) : Node does not have class node-checked');
|
||||
ok(($('.node-checked').length === 0), 'Toggle node (by node) : There are no checked nodes');
|
||||
ok($('.check-icon:first').hasClass(options.uncheckedIcon), 'Toggle node (by node) : Node icon is correct');
|
||||
});
|
||||
|
||||
test('selectNode / unselectNode', function () {
|
||||
var $tree = init({ data: data, selectedIcon: 'glyphicon glyphicon-selected' });
|
||||
var nodeId = 0;
|
||||
var node = $tree.treeview('getNode', 0);
|
||||
|
||||
// Select node using node id
|
||||
$tree.treeview('selectNode', nodeId);
|
||||
ok($('.list-group-item:first').hasClass('node-selected'), 'Select node (by id) : Node has class node-selected');
|
||||
ok(($('.node-selected').length === 1), 'Select node (by id) : There is only one selected node');
|
||||
|
||||
// Unselect node using node id
|
||||
$tree.treeview('unselectNode', nodeId);
|
||||
ok(!$('.list-group-item:first').hasClass('node-selected'), 'Unselect node (by id) : Node does not have class node-selected');
|
||||
ok(($('.node-selected').length === 0), 'Unselect node (by id) : There are no selected nodes');
|
||||
|
||||
// Select node using node
|
||||
$tree.treeview('selectNode', node);
|
||||
ok($('.list-group-item:first').hasClass('node-selected'), 'Select node (by node) : Node has class node-selected');
|
||||
ok(($('.node-selected').length === 1), 'Select node (by node) : There is only one selected node');
|
||||
|
||||
// Unselect node using node id
|
||||
$tree.treeview('unselectNode', node);
|
||||
ok(!$('.list-group-item:first').hasClass('node-selected'), 'Unselect node (by node) : Node does not have class node-selected');
|
||||
ok(($('.node-selected').length === 0), 'Unselect node (by node) : There are no selected nodes');
|
||||
});
|
||||
|
||||
test('toggleNodeSelected', function () {
|
||||
var $tree = init({ data: data });
|
||||
var nodeId = 0;
|
||||
var node = $tree.treeview('getNode', 0);
|
||||
|
||||
// Toggle selected using node id
|
||||
$tree.treeview('toggleNodeSelected', nodeId);
|
||||
ok($('.list-group-item:first').hasClass('node-selected'), 'Toggle node (by id) : Node has class node-selected');
|
||||
ok(($('.node-selected').length === 1), 'Toggle node (by id) : There is only one selected node');
|
||||
|
||||
// Toggle selected using node
|
||||
$tree.treeview('toggleNodeSelected', node);
|
||||
ok(!$('.list-group-item:first').hasClass('node-selected'), 'Toggle node (by id) : Node does not have class node-selected');
|
||||
ok(($('.node-selected').length === 0), 'Toggle node (by node) : There are no selected nodes');
|
||||
});
|
||||
|
||||
test('expandAll / collapseAll', function () {
|
||||
var $tree = init({ data: data, levels: 1 });
|
||||
equal($($tree.selector + ' ul li').length, 5, 'Starts in collapsed state, 5 root nodes displayed');
|
||||
|
||||
$tree.treeview('expandAll');
|
||||
equal($($tree.selector + ' ul li').length, 9, 'Expand all works, all 9 nodes displayed');
|
||||
|
||||
$tree.treeview('collapseAll');
|
||||
equal($($tree.selector + ' ul li').length, 5, 'Collapse all works, 5 original root nodes displayed');
|
||||
|
||||
$tree.treeview('expandAll', { levels: 1 });
|
||||
equal($($tree.selector + ' ul li').length, 7, 'Expand all (levels = 1) works, correctly displayed 7 nodes');
|
||||
});
|
||||
|
||||
test('expandNode / collapseNode / toggleExpanded', function () {
|
||||
var $tree = init({ data: data, levels: 1 });
|
||||
equal($($tree.selector + ' ul li').length, 5, 'Starts in collapsed state, 5 root nodes displayed');
|
||||
|
||||
$tree.treeview('expandNode', 0);
|
||||
equal($($tree.selector + ' ul li').length, 7, 'Expand node (by id) works, 7 nodes displayed');
|
||||
|
||||
$tree.treeview('collapseNode', 0);
|
||||
equal($($tree.selector + ' ul li').length, 5, 'Collapse node (by id) works, 5 original nodes displayed');
|
||||
|
||||
$tree.treeview('toggleNodeExpanded', 0);
|
||||
equal($($tree.selector + ' ul li').length, 7, 'Toggle node (by id) works, 7 nodes displayed');
|
||||
|
||||
$tree.treeview('toggleNodeExpanded', 0);
|
||||
equal($($tree.selector + ' ul li').length, 5, 'Toggle node (by id) works, 5 original nodes displayed');
|
||||
|
||||
$tree.treeview('expandNode', [ 0, { levels: 2 } ]);
|
||||
equal($($tree.selector + ' ul li').length, 9, 'Expand node (levels = 2, by id) works, 9 nodes displayed');
|
||||
|
||||
$tree = init({ data: data, levels: 1 });
|
||||
equal($($tree.selector + ' ul li').length, 5, 'Reset to collapsed state, 5 root nodes displayed');
|
||||
|
||||
var nodeParent1 = $tree.treeview('getNode', 0);
|
||||
$tree.treeview('expandNode', nodeParent1);
|
||||
equal($($tree.selector + ' ul li').length, 7, 'Expand node (by node) works, 7 nodes displayed');
|
||||
|
||||
$tree.treeview('collapseNode', nodeParent1);
|
||||
equal($($tree.selector + ' ul li').length, 5, 'Collapse node (by node) works, 5 original nodes displayed');
|
||||
|
||||
$tree.treeview('toggleNodeExpanded', nodeParent1);
|
||||
equal($($tree.selector + ' ul li').length, 7, 'Toggle node (by node) works, 7 nodes displayed');
|
||||
|
||||
$tree.treeview('toggleNodeExpanded', nodeParent1);
|
||||
equal($($tree.selector + ' ul li').length, 5, 'Toggle node (by node) works, 5 original nodes displayed');
|
||||
|
||||
$tree.treeview('expandNode', [ nodeParent1, { levels: 2 } ]);
|
||||
equal($($tree.selector + ' ul li').length, 9, 'Expand node (levels = 2, by node) works, 9 nodes displayed');
|
||||
});
|
||||
|
||||
test('revealNode', function () {
|
||||
var $tree = init({ data: data, levels: 1 });
|
||||
|
||||
$tree.treeview('revealNode', 1); // Child_1
|
||||
equal($($tree.selector + ' ul li').length, 7, 'Reveal node (by id) works, reveal Child 1 and 7 nodes displayed');
|
||||
|
||||
var nodeGrandchild1 = $tree.treeview('getNode', 2); // Grandchild 1
|
||||
$tree.treeview('revealNode', nodeGrandchild1);
|
||||
equal($($tree.selector + ' ul li').length, 9, 'Reveal node (by node) works, reveal Grandchild 1 and 9 nodes displayed');
|
||||
});
|
||||
|
||||
test('search', function () {
|
||||
var cbWorked, onWorked = false;
|
||||
var $tree = init({
|
||||
data: data,
|
||||
onSearchComplete: function(/*event, results*/) {
|
||||
cbWorked = true;
|
||||
}
|
||||
})
|
||||
.on('searchComplete', function(/*event, results*/) {
|
||||
onWorked = true;
|
||||
});
|
||||
|
||||
// Case sensitive, exact match
|
||||
var result = $tree.treeview('search', [ 'Parent 1', { ignoreCase: false, exactMatch: true } ]);
|
||||
equal(result.length, 1, 'Search "Parent 1" case sensitive, exact match - returns 1 result');
|
||||
|
||||
// Case sensitive, like
|
||||
result = $tree.treeview('search', [ 'Parent', { ignoreCase: false, exactMatch: false } ]);
|
||||
equal(result.length, 5, 'Search "Parent" case sensitive, exact match - returns 5 results');
|
||||
|
||||
// Case insensitive, exact match
|
||||
result = $tree.treeview('search', [ 'parent 1', { ignoreCase: true, exactMatch: true } ]);
|
||||
equal(result.length, 1, 'Search "parent 1" case insensitive, exact match - returns 1 result');
|
||||
|
||||
// Case insensitive, like
|
||||
result = $tree.treeview('search', [ 'parent', { ignoreCase: true, exactMatch: false } ]);
|
||||
equal(result.length, 5, 'Search "parent" case insensitive, exact match - returns 5 results')
|
||||
|
||||
// Check events fire
|
||||
ok(cbWorked, 'onSearchComplete function was called');
|
||||
ok(onWorked, 'searchComplete was fired');
|
||||
});
|
||||
|
||||
test('clearSearch', function () {
|
||||
var cbWorked, onWorked = false;
|
||||
var $tree = init({
|
||||
data: data,
|
||||
onSearchCleared: function(/*event, results*/) {
|
||||
cbWorked = true;
|
||||
}
|
||||
})
|
||||
.on('searchCleared', function(/*event, results*/) {
|
||||
onWorked = true;
|
||||
});
|
||||
|
||||
// Check results are cleared
|
||||
$tree.treeview('search', [ 'Parent 1', { ignoreCase: false, exactMatch: true } ]);
|
||||
equal($tree.find('.search-result').length, 1, 'Search results highlighted');
|
||||
$tree.treeview('clearSearch');
|
||||
equal($tree.find('.search-result').length, 0, 'Search results cleared');
|
||||
|
||||
// Check events fire
|
||||
ok(cbWorked, 'onSearchCleared function was called');
|
||||
ok(onWorked, 'searchCleared was fired');
|
||||
});
|
||||
|
||||
}());
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,597 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2024 The Bootstrap Authors
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
:root,
|
||||
[data-bs-theme=light] {
|
||||
--bs-blue: #0d6efd;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #d63384;
|
||||
--bs-red: #dc3545;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #ffc107;
|
||||
--bs-green: #198754;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #0dcaf0;
|
||||
--bs-black: #000;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #6c757d;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #e9ecef;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #adb5bd;
|
||||
--bs-gray-600: #6c757d;
|
||||
--bs-gray-700: #495057;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #212529;
|
||||
--bs-primary: #0d6efd;
|
||||
--bs-secondary: #6c757d;
|
||||
--bs-success: #198754;
|
||||
--bs-info: #0dcaf0;
|
||||
--bs-warning: #ffc107;
|
||||
--bs-danger: #dc3545;
|
||||
--bs-light: #f8f9fa;
|
||||
--bs-dark: #212529;
|
||||
--bs-primary-rgb: 13, 110, 253;
|
||||
--bs-secondary-rgb: 108, 117, 125;
|
||||
--bs-success-rgb: 25, 135, 84;
|
||||
--bs-info-rgb: 13, 202, 240;
|
||||
--bs-warning-rgb: 255, 193, 7;
|
||||
--bs-danger-rgb: 220, 53, 69;
|
||||
--bs-light-rgb: 248, 249, 250;
|
||||
--bs-dark-rgb: 33, 37, 41;
|
||||
--bs-primary-text-emphasis: #052c65;
|
||||
--bs-secondary-text-emphasis: #2b2f32;
|
||||
--bs-success-text-emphasis: #0a3622;
|
||||
--bs-info-text-emphasis: #055160;
|
||||
--bs-warning-text-emphasis: #664d03;
|
||||
--bs-danger-text-emphasis: #58151c;
|
||||
--bs-light-text-emphasis: #495057;
|
||||
--bs-dark-text-emphasis: #495057;
|
||||
--bs-primary-bg-subtle: #cfe2ff;
|
||||
--bs-secondary-bg-subtle: #e2e3e5;
|
||||
--bs-success-bg-subtle: #d1e7dd;
|
||||
--bs-info-bg-subtle: #cff4fc;
|
||||
--bs-warning-bg-subtle: #fff3cd;
|
||||
--bs-danger-bg-subtle: #f8d7da;
|
||||
--bs-light-bg-subtle: #fcfcfd;
|
||||
--bs-dark-bg-subtle: #ced4da;
|
||||
--bs-primary-border-subtle: #9ec5fe;
|
||||
--bs-secondary-border-subtle: #c4c8cb;
|
||||
--bs-success-border-subtle: #a3cfbb;
|
||||
--bs-info-border-subtle: #9eeaf9;
|
||||
--bs-warning-border-subtle: #ffe69c;
|
||||
--bs-danger-border-subtle: #f1aeb5;
|
||||
--bs-light-border-subtle: #e9ecef;
|
||||
--bs-dark-border-subtle: #adb5bd;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #212529;
|
||||
--bs-body-color-rgb: 33, 37, 41;
|
||||
--bs-body-bg: #fff;
|
||||
--bs-body-bg-rgb: 255, 255, 255;
|
||||
--bs-emphasis-color: #000;
|
||||
--bs-emphasis-color-rgb: 0, 0, 0;
|
||||
--bs-secondary-color: rgba(33, 37, 41, 0.75);
|
||||
--bs-secondary-color-rgb: 33, 37, 41;
|
||||
--bs-secondary-bg: #e9ecef;
|
||||
--bs-secondary-bg-rgb: 233, 236, 239;
|
||||
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
|
||||
--bs-tertiary-color-rgb: 33, 37, 41;
|
||||
--bs-tertiary-bg: #f8f9fa;
|
||||
--bs-tertiary-bg-rgb: 248, 249, 250;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #0d6efd;
|
||||
--bs-link-color-rgb: 13, 110, 253;
|
||||
--bs-link-decoration: underline;
|
||||
--bs-link-hover-color: #0a58ca;
|
||||
--bs-link-hover-color-rgb: 10, 88, 202;
|
||||
--bs-code-color: #d63384;
|
||||
--bs-highlight-color: #212529;
|
||||
--bs-highlight-bg: #fff3cd;
|
||||
--bs-border-width: 1px;
|
||||
--bs-border-style: solid;
|
||||
--bs-border-color: #dee2e6;
|
||||
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||
--bs-border-radius: 0.375rem;
|
||||
--bs-border-radius-sm: 0.25rem;
|
||||
--bs-border-radius-lg: 0.5rem;
|
||||
--bs-border-radius-xl: 1rem;
|
||||
--bs-border-radius-xxl: 2rem;
|
||||
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
|
||||
--bs-border-radius-pill: 50rem;
|
||||
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
--bs-focus-ring-width: 0.25rem;
|
||||
--bs-focus-ring-opacity: 0.25;
|
||||
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
|
||||
--bs-form-valid-color: #198754;
|
||||
--bs-form-valid-border-color: #198754;
|
||||
--bs-form-invalid-color: #dc3545;
|
||||
--bs-form-invalid-border-color: #dc3545;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--bs-body-color: #dee2e6;
|
||||
--bs-body-color-rgb: 222, 226, 230;
|
||||
--bs-body-bg: #212529;
|
||||
--bs-body-bg-rgb: 33, 37, 41;
|
||||
--bs-emphasis-color: #fff;
|
||||
--bs-emphasis-color-rgb: 255, 255, 255;
|
||||
--bs-secondary-color: rgba(222, 226, 230, 0.75);
|
||||
--bs-secondary-color-rgb: 222, 226, 230;
|
||||
--bs-secondary-bg: #343a40;
|
||||
--bs-secondary-bg-rgb: 52, 58, 64;
|
||||
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
|
||||
--bs-tertiary-color-rgb: 222, 226, 230;
|
||||
--bs-tertiary-bg: #2b3035;
|
||||
--bs-tertiary-bg-rgb: 43, 48, 53;
|
||||
--bs-primary-text-emphasis: #6ea8fe;
|
||||
--bs-secondary-text-emphasis: #a7acb1;
|
||||
--bs-success-text-emphasis: #75b798;
|
||||
--bs-info-text-emphasis: #6edff6;
|
||||
--bs-warning-text-emphasis: #ffda6a;
|
||||
--bs-danger-text-emphasis: #ea868f;
|
||||
--bs-light-text-emphasis: #f8f9fa;
|
||||
--bs-dark-text-emphasis: #dee2e6;
|
||||
--bs-primary-bg-subtle: #031633;
|
||||
--bs-secondary-bg-subtle: #161719;
|
||||
--bs-success-bg-subtle: #051b11;
|
||||
--bs-info-bg-subtle: #032830;
|
||||
--bs-warning-bg-subtle: #332701;
|
||||
--bs-danger-bg-subtle: #2c0b0e;
|
||||
--bs-light-bg-subtle: #343a40;
|
||||
--bs-dark-bg-subtle: #1a1d20;
|
||||
--bs-primary-border-subtle: #084298;
|
||||
--bs-secondary-border-subtle: #41464b;
|
||||
--bs-success-border-subtle: #0f5132;
|
||||
--bs-info-border-subtle: #087990;
|
||||
--bs-warning-border-subtle: #997404;
|
||||
--bs-danger-border-subtle: #842029;
|
||||
--bs-light-border-subtle: #495057;
|
||||
--bs-dark-border-subtle: #343a40;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #6ea8fe;
|
||||
--bs-link-hover-color: #8bb9fe;
|
||||
--bs-link-color-rgb: 110, 168, 254;
|
||||
--bs-link-hover-color-rgb: 139, 185, 254;
|
||||
--bs-code-color: #e685b5;
|
||||
--bs-highlight-color: #dee2e6;
|
||||
--bs-highlight-bg: #664d03;
|
||||
--bs-border-color: #495057;
|
||||
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
||||
--bs-form-valid-color: #75b798;
|
||||
--bs-form-valid-border-color: #75b798;
|
||||
--bs-form-invalid-color: #ea868f;
|
||||
--bs-form-invalid-border-color: #ea868f;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--bs-body-font-family);
|
||||
font-size: var(--bs-body-font-size);
|
||||
font-weight: var(--bs-body-font-weight);
|
||||
line-height: var(--bs-body-line-height);
|
||||
color: var(--bs-body-color);
|
||||
text-align: var(--bs-body-text-align);
|
||||
background-color: var(--bs-body-bg);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-top: var(--bs-border-width) solid;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
h6, h5, h4, h3, h2, h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1.375rem + 1.5vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(1.325rem + 0.9vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(1.3rem + 0.6vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
-webkit-text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1875em;
|
||||
color: var(--bs-highlight-color);
|
||||
background-color: var(--bs-highlight-bg);
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
|
||||
}
|
||||
|
||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--bs-font-monospace);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
pre code {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.875em;
|
||||
color: var(--bs-code-color);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
a > code {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1875rem 0.375rem;
|
||||
font-size: 0.875em;
|
||||
color: var(--bs-body-bg);
|
||||
background-color: var(--bs-body-color);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
kbd kbd {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
color: var(--bs-secondary-color);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
text-align: -webkit-match-parent;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[role=button] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
select:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
button,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
button:not(:disabled),
|
||||
[type=button]:not(:disabled),
|
||||
[type=reset]:not(:disabled),
|
||||
[type=submit]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
line-height: inherit;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
legend {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
legend + * {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper,
|
||||
::-webkit-datetime-edit-text,
|
||||
::-webkit-datetime-edit-minute,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* rtl:raw:
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
direction: ltr;
|
||||
}
|
||||
*/
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
::file-selector-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,594 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2024 The Bootstrap Authors
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
:root,
|
||||
[data-bs-theme=light] {
|
||||
--bs-blue: #0d6efd;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #d63384;
|
||||
--bs-red: #dc3545;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #ffc107;
|
||||
--bs-green: #198754;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #0dcaf0;
|
||||
--bs-black: #000;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #6c757d;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #e9ecef;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #adb5bd;
|
||||
--bs-gray-600: #6c757d;
|
||||
--bs-gray-700: #495057;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #212529;
|
||||
--bs-primary: #0d6efd;
|
||||
--bs-secondary: #6c757d;
|
||||
--bs-success: #198754;
|
||||
--bs-info: #0dcaf0;
|
||||
--bs-warning: #ffc107;
|
||||
--bs-danger: #dc3545;
|
||||
--bs-light: #f8f9fa;
|
||||
--bs-dark: #212529;
|
||||
--bs-primary-rgb: 13, 110, 253;
|
||||
--bs-secondary-rgb: 108, 117, 125;
|
||||
--bs-success-rgb: 25, 135, 84;
|
||||
--bs-info-rgb: 13, 202, 240;
|
||||
--bs-warning-rgb: 255, 193, 7;
|
||||
--bs-danger-rgb: 220, 53, 69;
|
||||
--bs-light-rgb: 248, 249, 250;
|
||||
--bs-dark-rgb: 33, 37, 41;
|
||||
--bs-primary-text-emphasis: #052c65;
|
||||
--bs-secondary-text-emphasis: #2b2f32;
|
||||
--bs-success-text-emphasis: #0a3622;
|
||||
--bs-info-text-emphasis: #055160;
|
||||
--bs-warning-text-emphasis: #664d03;
|
||||
--bs-danger-text-emphasis: #58151c;
|
||||
--bs-light-text-emphasis: #495057;
|
||||
--bs-dark-text-emphasis: #495057;
|
||||
--bs-primary-bg-subtle: #cfe2ff;
|
||||
--bs-secondary-bg-subtle: #e2e3e5;
|
||||
--bs-success-bg-subtle: #d1e7dd;
|
||||
--bs-info-bg-subtle: #cff4fc;
|
||||
--bs-warning-bg-subtle: #fff3cd;
|
||||
--bs-danger-bg-subtle: #f8d7da;
|
||||
--bs-light-bg-subtle: #fcfcfd;
|
||||
--bs-dark-bg-subtle: #ced4da;
|
||||
--bs-primary-border-subtle: #9ec5fe;
|
||||
--bs-secondary-border-subtle: #c4c8cb;
|
||||
--bs-success-border-subtle: #a3cfbb;
|
||||
--bs-info-border-subtle: #9eeaf9;
|
||||
--bs-warning-border-subtle: #ffe69c;
|
||||
--bs-danger-border-subtle: #f1aeb5;
|
||||
--bs-light-border-subtle: #e9ecef;
|
||||
--bs-dark-border-subtle: #adb5bd;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #212529;
|
||||
--bs-body-color-rgb: 33, 37, 41;
|
||||
--bs-body-bg: #fff;
|
||||
--bs-body-bg-rgb: 255, 255, 255;
|
||||
--bs-emphasis-color: #000;
|
||||
--bs-emphasis-color-rgb: 0, 0, 0;
|
||||
--bs-secondary-color: rgba(33, 37, 41, 0.75);
|
||||
--bs-secondary-color-rgb: 33, 37, 41;
|
||||
--bs-secondary-bg: #e9ecef;
|
||||
--bs-secondary-bg-rgb: 233, 236, 239;
|
||||
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
|
||||
--bs-tertiary-color-rgb: 33, 37, 41;
|
||||
--bs-tertiary-bg: #f8f9fa;
|
||||
--bs-tertiary-bg-rgb: 248, 249, 250;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #0d6efd;
|
||||
--bs-link-color-rgb: 13, 110, 253;
|
||||
--bs-link-decoration: underline;
|
||||
--bs-link-hover-color: #0a58ca;
|
||||
--bs-link-hover-color-rgb: 10, 88, 202;
|
||||
--bs-code-color: #d63384;
|
||||
--bs-highlight-color: #212529;
|
||||
--bs-highlight-bg: #fff3cd;
|
||||
--bs-border-width: 1px;
|
||||
--bs-border-style: solid;
|
||||
--bs-border-color: #dee2e6;
|
||||
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||
--bs-border-radius: 0.375rem;
|
||||
--bs-border-radius-sm: 0.25rem;
|
||||
--bs-border-radius-lg: 0.5rem;
|
||||
--bs-border-radius-xl: 1rem;
|
||||
--bs-border-radius-xxl: 2rem;
|
||||
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
|
||||
--bs-border-radius-pill: 50rem;
|
||||
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
--bs-focus-ring-width: 0.25rem;
|
||||
--bs-focus-ring-opacity: 0.25;
|
||||
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
|
||||
--bs-form-valid-color: #198754;
|
||||
--bs-form-valid-border-color: #198754;
|
||||
--bs-form-invalid-color: #dc3545;
|
||||
--bs-form-invalid-border-color: #dc3545;
|
||||
}
|
||||
|
||||
[data-bs-theme=dark] {
|
||||
color-scheme: dark;
|
||||
--bs-body-color: #dee2e6;
|
||||
--bs-body-color-rgb: 222, 226, 230;
|
||||
--bs-body-bg: #212529;
|
||||
--bs-body-bg-rgb: 33, 37, 41;
|
||||
--bs-emphasis-color: #fff;
|
||||
--bs-emphasis-color-rgb: 255, 255, 255;
|
||||
--bs-secondary-color: rgba(222, 226, 230, 0.75);
|
||||
--bs-secondary-color-rgb: 222, 226, 230;
|
||||
--bs-secondary-bg: #343a40;
|
||||
--bs-secondary-bg-rgb: 52, 58, 64;
|
||||
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
|
||||
--bs-tertiary-color-rgb: 222, 226, 230;
|
||||
--bs-tertiary-bg: #2b3035;
|
||||
--bs-tertiary-bg-rgb: 43, 48, 53;
|
||||
--bs-primary-text-emphasis: #6ea8fe;
|
||||
--bs-secondary-text-emphasis: #a7acb1;
|
||||
--bs-success-text-emphasis: #75b798;
|
||||
--bs-info-text-emphasis: #6edff6;
|
||||
--bs-warning-text-emphasis: #ffda6a;
|
||||
--bs-danger-text-emphasis: #ea868f;
|
||||
--bs-light-text-emphasis: #f8f9fa;
|
||||
--bs-dark-text-emphasis: #dee2e6;
|
||||
--bs-primary-bg-subtle: #031633;
|
||||
--bs-secondary-bg-subtle: #161719;
|
||||
--bs-success-bg-subtle: #051b11;
|
||||
--bs-info-bg-subtle: #032830;
|
||||
--bs-warning-bg-subtle: #332701;
|
||||
--bs-danger-bg-subtle: #2c0b0e;
|
||||
--bs-light-bg-subtle: #343a40;
|
||||
--bs-dark-bg-subtle: #1a1d20;
|
||||
--bs-primary-border-subtle: #084298;
|
||||
--bs-secondary-border-subtle: #41464b;
|
||||
--bs-success-border-subtle: #0f5132;
|
||||
--bs-info-border-subtle: #087990;
|
||||
--bs-warning-border-subtle: #997404;
|
||||
--bs-danger-border-subtle: #842029;
|
||||
--bs-light-border-subtle: #495057;
|
||||
--bs-dark-border-subtle: #343a40;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #6ea8fe;
|
||||
--bs-link-hover-color: #8bb9fe;
|
||||
--bs-link-color-rgb: 110, 168, 254;
|
||||
--bs-link-hover-color-rgb: 139, 185, 254;
|
||||
--bs-code-color: #e685b5;
|
||||
--bs-highlight-color: #dee2e6;
|
||||
--bs-highlight-bg: #664d03;
|
||||
--bs-border-color: #495057;
|
||||
--bs-border-color-translucent: rgba(255, 255, 255, 0.15);
|
||||
--bs-form-valid-color: #75b798;
|
||||
--bs-form-valid-border-color: #75b798;
|
||||
--bs-form-invalid-color: #ea868f;
|
||||
--bs-form-invalid-border-color: #ea868f;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--bs-body-font-family);
|
||||
font-size: var(--bs-body-font-size);
|
||||
font-weight: var(--bs-body-font-weight);
|
||||
line-height: var(--bs-body-line-height);
|
||||
color: var(--bs-body-color);
|
||||
text-align: var(--bs-body-text-align);
|
||||
background-color: var(--bs-body-bg);
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-top: var(--bs-border-width) solid;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
h6, h5, h4, h3, h2, h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--bs-heading-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(1.375rem + 1.5vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(1.325rem + 0.9vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(1.3rem + 0.6vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
-webkit-text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 0.5rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0.1875em;
|
||||
color: var(--bs-highlight-color);
|
||||
background-color: var(--bs-highlight-bg);
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 0.75em;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover {
|
||||
--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
|
||||
}
|
||||
|
||||
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: var(--bs-font-monospace);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
pre code {
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.875em;
|
||||
color: var(--bs-code-color);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
a > code {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0.1875rem 0.375rem;
|
||||
font-size: 0.875em;
|
||||
color: var(--bs-body-bg);
|
||||
background-color: var(--bs-body-color);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
kbd kbd {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table {
|
||||
caption-side: bottom;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
color: var(--bs-secondary-color);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
text-align: -webkit-match-parent;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
[role=button] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
select:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
button,
|
||||
[type=button],
|
||||
[type=reset],
|
||||
[type=submit] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
button:not(:disabled),
|
||||
[type=button]:not(:disabled),
|
||||
[type=reset]:not(:disabled),
|
||||
[type=submit]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
float: right;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: calc(1.275rem + 0.3vw);
|
||||
line-height: inherit;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
legend {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
legend + * {
|
||||
clear: right;
|
||||
}
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper,
|
||||
::-webkit-datetime-edit-text,
|
||||
::-webkit-datetime-edit-minute,
|
||||
::-webkit-datetime-edit-hour-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-inner-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
direction: ltr;
|
||||
}
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
::file-selector-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+12057
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+12030
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+4494
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,38 @@
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
font-family: -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu', 'Arial', sans-serif;
|
||||
background: linear-gradient(45deg, #4e95ff, #6032e4, #c478ff);
|
||||
}
|
||||
|
||||
div {
|
||||
width: 350px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(45deg, #61a0ff, #6737e9, #cb86ff);
|
||||
}
|
||||
|
||||
body, div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: 1em;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1>Hello Ultralight!<br>Hello <b>Glitchy Engine!</b></h1>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,7 +4,7 @@ namespace GlitchyEditor.Ultralight;
|
||||
|
||||
class UltralightEntityHierarchyWindow : UltralightWindow
|
||||
{
|
||||
public this() : base("Entity Hierarchy", "file:///app.html")
|
||||
public this() : base("Entity Hierarchy", "file:///pages/EntityHierarchy.html")
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user