Initial release as open source

README.md

@@ -0,0 +1,139 @@
+# Explr.js
+
+Explorer-like tree jQuery plugin
+
+## Usage
+
+```html
+<!-- include the required CSS -->
+<link rel="stylesheet" type="text/css" href="jquery.explr.css" />
+
+<!-- include any version of jQuery before including plugin -->
+<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
+
+<!-- include the plugin -->
+<script type="text/javascript" src="jquery.explr-1.1.min.js"></script>
+
+<ul class="explr">
+    <li>
+    <a href="#">1st item 1st level</a>
+    <ul>
+        <li>
+        <a href="#">1st item 2nd level</a>
+        </li>
+    </ul>
+    </li>
+    <li>
+    <a href="#">2nd item 1st level</a>
+    </li>
+</ul>
+
+<script type="text/javascript">
+$('.explr').explr();
+</script>
+```
+
+### Options
+
+| option | type | default | description |
+| --- | --- | --- | --- |
+| `ajaxContainerId` | `string` | `"explr-content"` | id element of AJAX container |
+| `ajaxLoadingText` | `string` | `"<p>loading data..</p>"` | HTML to be displayed when loading AJAX request |
+| `ajaxOptions` | `object` | `{}` | See `$.ajax()` API reference |
+| `animDuration` | `string` | `"fast"` | Duration of toggle animation, set 0 to disable |
+| `folderTooltip` | `string` | `"click to expand/collapse"` | Tooltip to be displayed when mouse hover the folders |
+| `rememberState` | `bool` | `true` | Store tree state in cookie |
+| `startCollapsed` | `bool` | `true` | Collapsed/expanded at start |
+| `treeHeight` | `string` / `number` | `"auto"` | Height of tree in number (of pixels) or 'auto' to adjust automatically |
+| `treeWidth` | `string` / `number` | `"auto"` | Width of tree in number (of pixels) or 'auto' to adjust automatically |
+
+Example:
+
+```js
+$('.explr').explr({
+    startCollapsed : true,
+    treeHeight : 200,
+    treeWidth : 400
+});
+```
+
+To load AJAX content when clicking node, add `rel="explr-ajax"` attribute to the link elements like this:
+
+```html
+<div class="tree-wrapper">
+    <ul id="id">
+    <li>
+        <a href="#">External content loaded with AJAX</a>
+        <ul>
+        <li>
+            <a href="test.html" rel="explr-ajax">load test.html</a>
+        </li>
+        <li>
+            <a href="test.php?getdata=hello" rel="explr-ajax">load test.php along with a GET data</a>
+        </li>
+        </ul>
+    </li>
+    <li>
+        <a href="#">Internal content</a>
+        <ul>
+        <li>
+            <a href="#top">go to top of page</a>
+        </li>
+        <li>
+            <a href="#bottom">go to bottom of page</a>
+        </li>
+        </ul>
+    </li>
+    </ul>
+</div>
+
+<div id="ajax-content-wrapper"></div>
+
+<script type="text/javascript">
+$('.tree-wrapper').explr({
+    ajaxContainerId	: 'ajax-content-wrapper'
+});
+</script>
+```
+
+### Icons
+
+| ![](css/img/pc.de/address.png) icon-address | ![](css/img/pc.de/address.png) icon-archives | ![](css/img/pc.de/bestseller.png) icon-badge | ![](css/img/pc.de/address.png) icon-bank | ![](css/img/pc.de/address.png) icon-basket | ![](css/img/pc.de/order.png) icon-board |
+| --- | --- | --- | --- | --- | --- |
+| icon-board2 | icon-book | icon-bookmark | icon-business | icon-calendar | icon-card |
+| icon-card2 | icon-chain | icon-chart | icon-lock | icon-check | icon-clock |
+| icon-comment | icon-config | icon-customers | icon-cv | icon-direction | icon-flag |
+| icon-folder | icon-folder2 | icon-folder3 | icon-hand | icon-heart | icon-help |
+| icon-home | icon-lamp | icon-left | icon-left2 | icon-mail | icon-mail2 |
+| icon-palette | icon-pencil | icon-pencil2 | icon-phone | icon-photo | icon-print |
+| icon-project | icon-refresh | icon-right | icon-right2 | icon-star | icon-tag |
+| icon-text | icon-text2 | icon-text3 | icon-text4 | icon-user | icon-world |
+| icon-zoom ||||||
+
+To define another custom icon class name you have to edit the CSS file, then add a CSS class preceded by `.explr-tree` like this:
+
+```css
+.explr-tree .icon-mycustomicon > li, .explr-tree li.icon-mycustomicon {
+    background-image: url("img/mycustomicon.png");
+}
+```
+
+## Credits
+
+* Stuttgart icon set from PC.DE
+
+## License
+
+Dual licensed under GPLv2 & MIT
+
+Copyright © 2010-2011 Faisal Salman <<[email protected]>>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of 
+this software and associated documentation files (the "Software"), to deal in 
+the Software without restriction, including without limitation the rights to use, 
+copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the 
+Software, and to permit persons to whom the Software is furnished to do so, 
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all 
+copies or substantial portions of the Software.

css/jquery-explr-1.4.css

@@ -0,0 +1,189 @@
+/*
+ * Explr.js v1.4
+ * Explorer-like tree jQuery plugin
+ * https://github.com/faisalman/explr-js
+ *
+ * Copyright © 2010-2011 Faisal Salman <[email protected]>
+ * Dual licensed under GPLv2 & MIT
+ */
+
+.explr-tree * {
+	margin: 0;
+	padding: 0;
+}
+
+.explr-tree, 
+.explr-tree ol,
+.explr-tree ul {
+	display: block;
+	font-family: Ubuntu, Helvetica, Tahoma, sans-serif;
+	font-size: 12px;
+	letter-spacing: normal;
+	line-height: 12px;
+	list-style: none;
+	margin: 0;
+	padding-bottom: 0;
+	padding-left: 20px;
+	padding-top: 5px;
+	position: relative;
+}
+
+.explr-tree {
+	background: #fff;
+/*	border: 1px solid #999;*/
+	overflow: auto;
+}
+
+.explr-tree li {
+	background: url("img/pc.de/folder.png") 16px 2px no-repeat;
+	display: block;
+	position: relative;
+	white-space: nowrap;
+}
+
+.explr-tree li a {
+	color: #555;
+	display: block;
+	font-size: 12px;
+	margin-left: 30px;
+	padding: 3px 0 5px 8px;
+	text-decoration: none;
+}
+
+.explr-tree li a:hover {
+	color: #ff0084;
+	text-decoration: underline;
+}
+
+.explr-line {
+	border-left: 1px dotted #999;
+	border-bottom: 1px dotted #999;
+	height: 22px;
+	position: absolute;
+	margin-left: 0;
+	margin-top: -12px;
+	width: 12px;
+}
+
+.explr-tree ol>li:first-child>.explr-line,
+.explr-tree ul>li:first-child>.explr-line {
+	margin-top: -8px;
+	height: 18px;
+}
+
+.explr-line-fix {
+	border-left: 1px dotted #999;
+}
+
+.explr-plus {
+	background: url("img/pc.de/plus.png") 0 0 no-repeat;
+	height: 16px;
+	margin-left: -8px;
+	margin-top: 2px;
+	position: absolute;
+	width: 40px;
+	z-index: 1;
+}
+
+.explr-minus { background-image: url("img/pc.de/busy.png"); }
+
+
+/* Menu icons: */
+
+.explr-tree .icon-text > li, .explr-tree li.icon-text { background-image: url("img/pc.de/attibutes.png"); }
+.explr-tree .icon-address > li, .explr-tree li.icon-address { background-image: url("img/pc.de/address.png"); }
+.explr-tree .icon-archives > li, .explr-tree li.icon-archives { background-image: url("img/pc.de/archives.png"); }
+.explr-tree .icon-badge > li, .explr-tree li.icon-badge { background-image: url("img/pc.de/bestseller.png"); }
+.explr-tree .icon-bank > li, .explr-tree li.icon-bank { background-image: url("img/pc.de/bank.png"); }
+.explr-tree .icon-basket > li, .explr-tree li.icon-basket { background-image: url("img/pc.de/basket.png"); }
+.explr-tree .icon-board > li, .explr-tree li.icon-board { background-image: url("img/pc.de/order.png"); }
+.explr-tree .icon-board2 > li, .explr-tree li.icon-board2 { background-image: url("img/pc.de/order-1.png"); }
+.explr-tree .icon-book > li, .explr-tree li.icon-book { background-image: url("img/pc.de/library.png"); }
+.explr-tree .icon-bookmark > li, .explr-tree li.icon-bookmark { background-image: url("img/pc.de/bookmark.png"); }
+.explr-tree .icon-business > li, .explr-tree li.icon-business { background-image: url("img/pc.de/business-contact.png"); }
+.explr-tree .icon-calendar > li, .explr-tree li.icon-calendar { background-image: url("img/pc.de/calendar.png"); }
+.explr-tree .icon-card > li, .explr-tree li.icon-card { background-image: url("img/pc.de/credit-card.png"); }
+.explr-tree .icon-card2 > li, .explr-tree li.icon-card2 { background-image: url("img/pc.de/my-account.png"); }
+.explr-tree .icon-chain > li, .explr-tree li.icon-chain { background-image: url("img/pc.de/link.png"); }
+.explr-tree .icon-chart > li, .explr-tree li.icon-chart { background-image: url("img/pc.de/statistics.png"); }
+.explr-tree .icon-check > li, .explr-tree li.icon-check { background-image: url("img/pc.de/check.png"); }
+.explr-tree .icon-clock > li, .explr-tree li.icon-clock { background-image: url("img/pc.de/full-time.png"); }
+.explr-tree .icon-comment > li, .explr-tree li.icon-comment { background-image: url("img/pc.de/comment.png"); }
+.explr-tree .icon-config > li, .explr-tree li.icon-config { background-image: url("img/pc.de/config.png"); }
+.explr-tree .icon-customers > li, .explr-tree li.icon-customers { background-image: url("img/pc.de/customers.png"); }
+.explr-tree .icon-cv > li, .explr-tree li.icon-cv { background-image: url("img/pc.de/cv.png"); }
+.explr-tree .icon-db > li, .explr-tree li.icon-db { background-image: url("img/pc.de/database.png"); }
+.explr-tree .icon-direction > li, .explr-tree li.icon-direction { background-image: url("img/pc.de/milestone.png"); }
+.explr-tree .icon-flag > li, .explr-tree li.icon-flag { background-image: url("img/pc.de/flag.png"); }
+.explr-tree .icon-folder > li, .explr-tree li.icon-folder { background-image: url("img/pc.de/folder.png"); }
+.explr-tree .icon-folder2 > li, .explr-tree li.icon-folder2 { background-image: url("img/pc.de/finished-work.png"); }
+.explr-tree .icon-folder3 > li, .explr-tree li.icon-folder3 { background-image: url("img/pc.de/upcoming-work.png"); }
+.explr-tree .icon-hand > li, .explr-tree li.icon-hand { background-image: url("img/pc.de/freelance.png"); }
+.explr-tree .icon-heart > li, .explr-tree li.icon-heart { background-image: url("img/pc.de/heart.png"); }
+.explr-tree .icon-help > li, .explr-tree li.icon-help { background-image: url("img/pc.de/consulting.png"); }
+.explr-tree .icon-home > li, .explr-tree li.icon-home { background-image: url("img/pc.de/home.png"); }
+.explr-tree .icon-lamp > li, .explr-tree li.icon-lamp { background-image: url("img/pc.de/lightbulb.png"); }
+.explr-tree .icon-left > li, .explr-tree li.icon-left { background-image: url("img/pc.de/sign-out.png"); }
+.explr-tree .icon-left2 > li, .explr-tree li.icon-left2 { background-image: url("img/pc.de/login.png"); }
+.explr-tree .icon-lock > li, .explr-tree li.icon-lock { background-image: url("img/pc.de/lock.png"); }
+.explr-tree .icon-mail > li, .explr-tree li.icon-mail { background-image: url("img/pc.de/contact.png"); }
+.explr-tree .icon-mail2 > li, .explr-tree li.icon-mail2 { background-image: url("img/pc.de/email.png"); }
+.explr-tree .icon-palette > li, .explr-tree li.icon-palette { background-image: url("img/pc.de/drawings.png"); }
+.explr-tree .icon-pencil > li, .explr-tree li.icon-pencil { background-image: url("img/pc.de/edit.png"); }
+.explr-tree .icon-pencil2 > li, .explr-tree li.icon-pencil2 { background-image: url("img/pc.de/pencil.png"); }
+.explr-tree .icon-phone > li, .explr-tree li.icon-phone { background-image: url("img/pc.de/phone.png"); }
+.explr-tree .icon-photo > li, .explr-tree li.icon-photo { background-image: url("img/pc.de/photography.png"); }
+.explr-tree .icon-print > li, .explr-tree li.icon-print { background-image: url("img/pc.de/print.png"); }
+.explr-tree .icon-project > li, .explr-tree li.icon-project { background-image: url("img/pc.de/project.png"); }
+.explr-tree .icon-refresh > li, .explr-tree li.icon-refresh { background-image: url("img/pc.de/refresh.png"); }
+.explr-tree .icon-right > li, .explr-tree li.icon-right { background-image: url("img/pc.de/sign-in.png"); }
+.explr-tree .icon-right2 > li, .explr-tree li.icon-right2 { background-image: url("img/pc.de/logout.png"); }
+.explr-tree .icon-showreel > li, .explr-tree li.icon-showreel { background-image: url("img/pc.de/showreel.png"); }
+.explr-tree .icon-star > li, .explr-tree li.icon-star { background-image: url("img/pc.de/star.png"); }
+.explr-tree .icon-tag > li, .explr-tree li.icon-tag { background-image: url("img/pc.de/tag.png"); }
+.explr-tree .icon-text2 > li, .explr-tree li.icon-text2 { background-image: url("img/pc.de/issue.png"); }
+.explr-tree .icon-text3 > li, .explr-tree li.icon-text3 { background-image: url("img/pc.de/future-projects.png"); }
+.explr-tree .icon-text4 > li, .explr-tree li.icon-text4 { background-image: url("img/pc.de/old-versions.png"); }
+.explr-tree .icon-user > li, .explr-tree li.icon-user { background-image: url("img/pc.de/user.png"); }
+.explr-tree .icon-world > li, .explr-tree li.icon-world { background-image: url("img/pc.de/world.png"); }
+.explr-tree .icon-zoom > li, .explr-tree li.icon-zoom { background-image: url("img/pc.de/zoom.png"); }
+
+
+/* IE Hack Fixes: */
+
+.explr-ie, 
+.explr-ie ol,
+.explr-ie ul {
+	margin-left: 4px;
+	padding-left: 16px;
+	position: static;
+}
+
+.explr-ie ol,
+.explr-ie ul {
+	overflow: hidden;
+}
+
+.explr-ie {
+	padding-top: 20px;
+}
+
+.explr-ie .explr-line, 
+.explr-ie .explr-plus {
+	top: 0;
+	left: 4px;
+}
+
+.explr-ie li {
+	height: auto !important;
+	height: 24px;
+	*padding-top: 12px;
+	_padding-top: 0;
+}
+
+.explr-ie li a {
+	*position: absolute;
+	_position: static;
+	*top: 0;
+	_top: auto;
+}