diff --git a/dist/css/simpletree.css b/dist/css/simpletree.css
index ad0a3cc4e768489cf27671ef223a243254420aa7..53a0d6088c4edd8405d8a51d8c7eaca3a5cbb8ab 100644
--- a/dist/css/simpletree.css
+++ b/dist/css/simpletree.css
@@ -12,7 +12,6 @@ Adapted as a jQuery plugin by Maurizio Manetti
list-style-type: none;
margin: 0;
padding: 0;
- font-size: 12px;
background-image: url('../img/vdot.gif');
background-repeat: repeat-y;
background-position: 8px 0;
@@ -60,7 +59,6 @@ Adapted as a jQuery plugin by Maurizio Manetti
.st-treed .st-last {
background-image: url('../img/corner.gif');
background-position: 8px 0;
- background-color: #fff;
}
.st-treed .st-file a {
diff --git a/dist/js/simpletree.jquery.js b/dist/js/simpletree.jquery.js
index ae8bde016daebd4b6277ca796046fc37d42ab488..97be69b2fcd8cc8f68d18ee99f4d7844628520b8 100644
--- a/dist/js/simpletree.jquery.js
+++ b/dist/js/simpletree.jquery.js
@@ -9,21 +9,36 @@ Adapted as a jQuery plugin by Maurizio Manetti
*/
-(function( $ ) {
+;(function( $, window, document, undefined ) {
"use strict";
- $.fn.simpletree = function( options ) {
-
- var settings = $.extend({
- classChanged: 'st-treed',
- classOpen: 'st-open',
- classCollapsed: 'st-collapsed',
- classLeaf: 'st-file',
- classLast: 'st-last',
- startCollapsed: true
- }, options);
+ var pluginName = 'simpletree',
+ defaults = {
+ classChanged: 'st-treed',
+ classOpen: 'st-open',
+ classCollapsed: 'st-collapsed',
+ classLeaf: 'st-file',
+ classLast: 'st-last',
+ startCollapsed: true
+ };
+ // util function to get the real bg color of an element
+ var get_bgcolor = function(obj) {
+ var real = obj.css('backgroundColor');
+ var none = 'rgba(0, 0, 0, 0)';
+ // if bg color not set look for the color of first parent with a bg color set
+ if (real === none) {
+ real = obj.parents().filter(function() {
+ return $(this).css('backgroundColor') != none
+ }).first().css('backgroundColor');
+ }
+ // if bg color yet not set fallback to white
+ if (real === undefined) {
+ real = 'rgba(255, 255, 255, 255)';
+ }
+ return real;
+ }
var handleClick = function(e) {
if (!e) var e = window.event;
@@ -31,28 +46,58 @@ Adapted as a jQuery plugin by Maurizio Manetti
if (e.stopPropagation) e.stopPropagation();
}
- this.addClass('st-treed');
- this.find('li').each(function(index){
- var $li = $(this);
- if ($li.children('ul').length > 0) {
- $li.addClass(settings.classCollapsed);
- $li.on('mousedown',function(event) {
- $li.toggleClass(settings.classOpen + ' ' + settings.classCollapsed);
- handleClick(event);
- });
- } else {
- $li.addClass(settings.classLeaf);
- }
- if ($li.next('li').length == 0) {
- $li.addClass(settings.classLast);
- }
- });
+ function SimpleTree( element, options ) {
+ this.element = $(element);
+ this.settings = $.extend( {}, defaults, options);
+ this._defaults = defaults;
+ this._name = pluginName;
+ this.init();
+ }
- this.find('a').on('mousedown',handleClick);
-
- return this;
-
+ SimpleTree.prototype.init = function () {
+ var settings = this.settings;
+ var $element = this.element;
+ // init the plugin on matched elements
+ $element.addClass(settings.classChanged);
+ // take all listed items
+ $element.find('li').each(function(index){
+ var $li = $(this);
+ // if the list item has unordered lists as children
+ if ($li.children('ul').length > 0) {
+ if (settings.startCollapsed) {
+ $li.addClass(settings.classCollapsed); // add class collapsed if should start collapsed (it is the default setting)
+ } else {
+ $li.addClass(settings.classOpen); // add class open if it should start open
+ }
+ // manage click on item
+ $li.on('mousedown',function(event) {
+ $li.toggleClass(settings.classOpen + ' ' + settings.classCollapsed); // toggle open / collapsed status
+ handleClick(event); // avoid propagation of the event to parent container(s)
+ });
+ } else {
+ $li.addClass(settings.classLeaf); // has no children: it's a leaf
+ }
+ // has no list items subsequent siblings: it is the last one
+ if ($li.next('li').length == 0) {
+ $li.addClass(settings.classLast);
+ // set the background color explicitly so to hide the UL vertical dots
+ $li.css('backgroundColor',get_bgcolor($li));
+ }
+ });
+ // avoid anchor tags click to fire collapse / open of parent containers
+ $element.find('a').on('mousedown',handleClick);
};
+
+ // prevent against multiple instantiations
+ // attach the plugin in the data-attribute of matched elements
+ $.fn[pluginName] = function ( options ) {
+ return this.each(function () {
+ if (!$.data(this, 'plugin_' + pluginName)) {
+ $.data(this, 'plugin_' + pluginName,
+ new SimpleTree( this, options ));
+ }
+ });
+ }
-}( jQuery ));
+}( jQuery, window, document ));
diff --git a/examples/index.html b/examples/index.html
index f3ac93db078dd197af203f08213031552d32052f..a64e0dd17bfe256c24292da06408d1260fbae67d 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -2,19 +2,23 @@
<html>
<head>
<meta charset="utf-8">
- <title>Simple tree example</title>
-
+ <title>jquery-simpletree usage example</title>
+ <link rel="stylesheet" href="../dist/css/simpletree.css">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
+
<style>
+ body {
+ background-color: #f1f1f1;
+ font-family: 'Lato', sans-serif;
+ font-size: 13px;
+ }
div.spacer {
margin-bottom: 20px;
}
</style>
-
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
-
- <link rel="stylesheet" href="../dist/css/simpletree.css">
- <script src="../dist/js/simpletree.jquery.js"></script>
+ <script src="../dist/js/simpletree.jquery.js?v=150623"></script>
<script>
@@ -24,6 +28,10 @@
$('#firstTree').simpletree();
});
+ $('#maketree_two').on('click',function(){
+ $('#secondTree').simpletree({startCollapsed: false});
+ });
+
});
</script>
@@ -32,73 +40,154 @@
<body>
-<div class="spacer">
- <button id="maketree_one">Make a Tree</button>
-</div>
-
- <ul id="firstTree" class="tree">
- <li>Element 1</li>
- <li><a href="#">Element 2</a>
- <ul>
- <li><a href="#">Sub-element 2.1</a></li>
- <li>Sub-element 2.2</li>
- <li>Sub-element 2.3
- <ul>
- <li><a href="#">Sub-sub-element 2.3.1</a></li>
- <li>Sub-sub-element 2.3.2</li>
- <li>Sub-sub-element 2.3.3</li>
- <li><a href="#">Sub-sub-element 2.3.4</a>
- <ul>
- <li>Sub-sub-sub-element 2.3.4.1</li>
- <li>Sub-sub-sub-element 2.3.4.2</li>
- <li>Sub-sub-sub-element 2.3.4.3</li>
- </ul>
- </li>
- <li>Sub-sub-element 2.3.5</li>
- </ul>
- </li>
- <li>Sub-element 2.4</li>
- </ul>
- </li>
- <li>Element 3</li>
- <li>Element 4
- <ul>
- <li>Sub-element 4.1</li>
- <li><a href="#">Sub-element 4.2</a>
- <ul>
- <li><a href="#">Sub-sub-element 4.2.1</a></li>
- <li><a href="#">Sub-sub-element 4.2.2</a></li>
- </ul>
- </li>
- <li><a href="#">Sub-element 4.3</a>
- <ul>
- <li><a href="#">Sub-sub-element 4.3.1</a></li>
- <li><a href="#">Sub-sub-element 4.3.2</a>
- <ul>
- <li><a href="#">Sub-sub-sub-element 4.3.2.1</a></li>
- <li>Sub-sub-sub-element 4.3.2.2</li>
- <li>Sub-sub-sub-element 4.3.2.3</li>
- </ul>
- </li>
- <li><a href="#">Sub-sub-element 4.3.3</a></li>
- <li><a href="#">Sub-sub-element 4.3.4</a></li>
- <li><a href="#">Sub-sub-element 4.3.5</a>
- <ul>
- <li>Sub-sub-sub-element 4.3.5.1</li>
- <li><a href="#">Sub-sub-sub-element 4.3.5.2</a></li>
- <li>Sub-sub-sub-element 4.3.5.3</li>
- </ul>
- </li>
- <li><a href="#">Sub-sub-element 4.3.6</a></li>
- </ul>
- </li>
- </ul>
+ <h1>Examples:</h1>
+
+ <div class="spacer">
+ <button id="maketree_one">Make a Tree with first list (start collapsed)</button>
+ <ul id="firstTree" class="tree">
+ <li><b>FIRST TREE</b></li>
+ <li><a href="#">Element 2</a>
+ <ul>
+ <li><a href="#">Sub-element 2.1</a></li>
+ <li>Sub-element 2.2</li>
+ <li>Sub-element 2.3
+ <ul style="background-color: #ccffcc;">
+ <li><a href="#">Sub-sub-element 2.3.1</a> - Light green bg is to test last child correct bg image</li>
+ <li>Sub-sub-element 2.3.2</li>
+ <li>Sub-sub-element 2.3.3</li>
+ <li><a href="#">Sub-sub-element 2.3.4</a>
+ <ul>
+ <li>Sub-sub-sub-element 2.3.4.1</li>
+ <li>Sub-sub-sub-element 2.3.4.2</li>
+ <li>Sub-sub-sub-element 2.3.4.3</li>
+ </ul>
+ </li>
+ <li>Sub-sub-element 2.3.5</li>
+ </ul>
+ </li>
+ <li>Sub-element 2.4</li>
+ </ul>
</li>
- <li>Element 5</li>
- <li>Element 6</li>
+ <li>Element 3</li>
+ <li>Element 4
+ <ul>
+ <li>Sub-element 4.1</li>
+ <li><a href="#">Sub-element 4.2</a>
+ <ul>
+ <li><a href="#">Sub-sub-element 4.2.1</a></li>
+ <li><a href="#">Sub-sub-element 4.2.2</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Sub-element 4.3</a>
+ <ul>
+ <li><a href="#">Sub-sub-element 4.3.1</a></li>
+ <li><a href="#">Sub-sub-element 4.3.2</a>
+ <ul>
+ <li><a href="#">Sub-sub-sub-element 4.3.2.1</a></li>
+ <li>Sub-sub-sub-element 4.3.2.2</li>
+ <li>Sub-sub-sub-element 4.3.2.3</li>
+ </ul>
+ </li>
+ <li><a href="#">Sub-sub-element 4.3.3</a></li>
+ <li><a href="#">Sub-sub-element 4.3.4</a></li>
+ <li><a href="#">Sub-sub-element 4.3.5</a>
+ <ul>
+ <li>Sub-sub-sub-element 4.3.5.1</li>
+ <li><a href="#">Sub-sub-sub-element 4.3.5.2</a></li>
+ <li>Sub-sub-sub-element 4.3.5.3</li>
+ </ul>
+ </li>
+ <li><a href="#">Sub-sub-element 4.3.6</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>Element 5</li>
+ <li>Element 6</li>
+ </ul>
+ </div>
+
+ <hr>
+
+ <div class="spacer">
+ <button id="maketree_two">Make a Tree with second list (start uncollapsed)</button>
+ <ul id="secondTree" class="tree">
+ <li><b>SECOND TREE</b></li>
+ <li><a href="#">Element 2</a>
+ <ul>
+ <li><a href="#">Sub-element 2.1</a></li>
+ <li>Sub-element 2.2</li>
+ <li>Sub-element 2.3
+ <ul>
+ <li><a href="#">Sub-sub-element 2.3.1</a></li>
+ <li>Sub-sub-element 2.3.2</li>
+ <li>Sub-sub-element 2.3.3</li>
+ <li><a href="#">Sub-sub-element 2.3.4</a>
+ <ul>
+ <li>Sub-sub-sub-element 2.3.4.1</li>
+ <li>Sub-sub-sub-element 2.3.4.2</li>
+ <li>Sub-sub-sub-element 2.3.4.3</li>
+ </ul>
+ </li>
+ <li>Sub-sub-element 2.3.5</li>
+ </ul>
+ </li>
+ <li>Sub-element 2.4</li>
+ </ul>
+ </li>
+ <li>Element 3</li>
+ <li>Element 4
+ <ul>
+ <li>Sub-element 4.1</li>
+ <li><a href="#">Sub-element 4.2</a>
+ <ul>
+ <li><a href="#">Sub-sub-element 4.2.1</a></li>
+ <li><a href="#">Sub-sub-element 4.2.2</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Sub-element 4.3</a>
+ <ul>
+ <li><a href="#">Sub-sub-element 4.3.1</a></li>
+ <li><a href="#">Sub-sub-element 4.3.2</a>
+ <ul>
+ <li><a href="#">Sub-sub-sub-element 4.3.2.1</a></li>
+ <li>Sub-sub-sub-element 4.3.2.2</li>
+ <li>Sub-sub-sub-element 4.3.2.3</li>
+ </ul>
+ </li>
+ <li><a href="#">Sub-sub-element 4.3.3</a></li>
+ <li><a href="#">Sub-sub-element 4.3.4</a></li>
+ <li><a href="#">Sub-sub-element 4.3.5</a>
+ <ul>
+ <li>Sub-sub-sub-element 4.3.5.1</li>
+ <li><a href="#">Sub-sub-sub-element 4.3.5.2</a></li>
+ <li>Sub-sub-sub-element 4.3.5.3</li>
+ </ul>
+ </li>
+ <li><a href="#">Sub-sub-element 4.3.6</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>Element 6</li>
+ </ul>
+ </div>
+
+ <hr>
+
+
+ <h2>In progress...</h2>
+
+ <ul>
+ <li><b>Make tree from class</b></li>
+ <li><b>Make tree on document ready</b></li>
+ <li><b>Collapse all</b></li>
+ <li><b>Expand all</b></li>
+ <li><b>Destroy tree</b></li>
+ </ul>
+
+
-</ul>
-
</body>
</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index e7e655de9222c4e83d2961508da53873eddf10ce..7de1f2fc6fe0f379ecf25b98b0ed3e225205091f 100644
--- a/package.json
+++ b/package.json
@@ -14,13 +14,13 @@
"version": "0.0.1",
"author": {
"name": "Maurizio Manetti",
- "url": "http://mauriziomanetti.it"
+ "url": "https://mauntrelio.github.io"
},
"maintainers": [
{
"name": "Maurizio Manetti",
"email": "maurizio@imanetti.net",
- "url": "http://mauriziomanetti.it"
+ "url": "https://mauntrelio.github.io"
}
],
"licenses": [
@@ -33,7 +33,7 @@
"homepage": "https://github.com/mauntrelio/jquery-simpletree",
"docs": "https://github.com/mauntrelio/jquery-simpletree",
"download": "https://github.com/mauntrelio/jquery-simpletree/zipball/master",
- "demo": "https://mauntrelio.github.com/demos/jquery-simpletree/",
+ "demo": "https://mauntrelio.github.io/demos/jquery-simpletree/",
"dependencies": {
"jquery": ">=1.12"
}