Skip to content

Commit

Permalink
import
Browse files Browse the repository at this point in the history
  • Loading branch information
@ASlatius
ASlatius committed Apr 28, 2015
1 parent 7805a39 commit fcfaaaa
Show file tree
Hide file tree
Showing 10 changed files with 1,169 additions and 3 deletions.
6 changes: 3 additions & 3 deletions LICENSE
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
Copyright (c) 2015, A Slatius
Copyright (c) 2014, iksnimak
Copyright (c) 2015, slatiusa
All rights reserved.

Redistribution and use in source and binary forms, with or without
Expand All @@ -11,7 +12,7 @@ modification, are permitted provided that the following conditions are met:
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.

* Neither the name of yii2-nestable2 nor the names of its
* Neither the name of the {organization} nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.

Expand All @@ -25,4 +26,3 @@ SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

84 changes: 84 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
yii2-nestable
=============

Yii2 implementation for jquery.nestable plugin that interfaces with the Nested Sets behavior for Yii 2.
- jquery.nestable plugin: http://dbushell.github.io/Nestable/
- Nested Sets Behavior for Yii 2: https://github.com/creocoder/yii2-nested-sets

## Installation

The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

Either run

```
$ php composer.phar require slatiusa/yii2-nestable "dev-master"
```

or add

```
"slatiusa/yii2-nestable": "dev-master"
```

to the ```require``` section of your `composer.json` file.

## Usage

Be sure to add an action to your controller;
```
use slatiusa\nestable\Nestable;
class yourClass extends Controller
{
public function actions() {
return [
'nodeMove' => [
'class' => 'slatiusa\nestable\NestableNodeMoveAction',
'modelName' => TreeModel::className(),
],
];
}
```

And then render the widget in your view;

```
echo Nestable::widget([
'type' => Nestable::TYPE_WITH_HANDLE,
'query' => TreeModel::find()->where([ top of tree ]),
'modelOptions' => [
'name' => 'name'
],
'pluginEvents' => [
'change' => 'function(e) {}',
],
'pluginOptions' => [
'maxDepth' => 7,
],
]);
```

You can either supply an ActiveQuery object in `query` from which a tree will be built.
You can also supply an item list;
```
...
'items' => [
['content' => 'Item # 1', 'id' => 1],
['content' => 'Item # 2', 'id' => 2],
['content' => 'Item # 3', 'id' => 3],
['content' => 'Item # 4 with children', 'id' => 4, 'children' => [
['content' => 'Item # 4.1', 'id' => 5],
['content' => 'Item # 4.2', 'id' => 6],
['content' => 'Item # 4.3', 'id' => 7],
]],
],
```

The `modelOptions['name']` should hold an attribute name that will be used to name on the items in the list.
You can alternatively supply an unnamed `function($model)` to build your own content string.

Supply a `pluginEvents['change']` with some JavaScript code to catch the change event fired by jquery.nestable plugin.
The `pluginOptions` accepts all the options for the original jquery.nestable plugin.
189 changes: 189 additions & 0 deletions assets/css/nestable.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
/**
* Nestable
*/
.dd {
position: relative;
display: block;
margin: 0;
padding: 0;
list-style: none;
font-size: 13px;
line-height: 20px;
}
.dd-list {
display: block;
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.dd-list .dd-list {
padding-left: 30px;
}
.dd-collapsed .dd-list {
display: none;
}
.dd-item,
.dd-empty,
.dd-placeholder {
display: block;
position: relative;
margin: 0;
padding: 0;
min-height: 20px;
font-size: 13px;
line-height: 20px;
}
.dd-handle {
display: block;
height: 30px;
margin: 5px 0;
padding: 5px 10px;
color: #333;
text-decoration: none;
font-weight: bold;
border: 1px solid #ccc;
background: #fafafa;
background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
background: linear-gradient(top, #fafafa 0%, #eee 100%);
-webkit-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.dd-handle:hover {
color: #2ea8e5;
background: #fff;
}
.dd-item > button {
display: block;
position: relative;
cursor: pointer;
float: left;
width: 25px;
height: 20px;
margin: 5px 0;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
border: 0;
background: transparent;
font-size: 12px;
line-height: 1;
text-align: center;
font-weight: bold;
}
.dd-item > button:before {
content: '+';
display: block;
position: absolute;
width: 100%;
text-align: center;
text-indent: 0;
}
.dd-item > button[data-action="collapse"]:before {
content: '-';
}
.dd-placeholder,
.dd-empty {
margin: 5px 0;
padding: 0;
min-height: 30px;
background: #f2fbff;
border: 1px dashed #b6bcbf;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.dd-empty {
border: 1px dashed #bbb;
min-height: 100px;
background-color: #e5e5e5;
background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
.dd-dragel {
position: absolute;
pointer-events: none;
z-index: 9999;
}
.dd-dragel > .dd-item .dd-handle {
margin-top: 0;
}
.dd-dragel .dd-handle {
-webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1);
box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, .1);
}
.dd-hover > .dd-handle {
background: #2ea8e5 !important;
}

/**
* Nestable Draggable Handles
*/
.dd3-content {
display: block;
height: 30px;
margin: 5px 0;
padding: 5px 10px 5px 40px;
color: #333;
text-decoration: none;
font-weight: bold;
border: 1px solid #ccc;
background: #fafafa;
background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
background: linear-gradient(top, #fafafa 0%, #eee 100%);
-webkit-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.dd3-content:hover {
color: #2ea8e5;
background: #fff;
}
.dd-dragel > .dd3-item > .dd3-content {
margin: 0;
}
.dd3-item > button {
margin-left: 30px;
}
.dd3-handle {
position: absolute;
margin: 0;
left: 0;
top: 0;
cursor: pointer;
width: 30px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
border: 1px solid #aaa;
background: #ddd;
background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
background: linear-gradient(top, #ddd 0%, #bbb 100%);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.dd3-handle:before {
content: '≡';
display: block;
position: absolute;
left: 0;
top: 3px;
width: 100%;
text-align: center;
text-indent: 0;
color: #fff;
font-size: 20px;
font-weight: normal;
}
.dd3-handle:hover {
background: #ddd;
}
Loading

0 comments on commit fcfaaaa

Please sign in to comment.