Set files to the right place

This commit is contained in:
Xavier Guimard 2015-05-14 06:44:57 +00:00
parent 52c47c9e14
commit d220b90198
15 changed files with 0 additions and 195 deletions

View File

@ -1,195 +0,0 @@
# Lemonldap::NG::Manager forms
This files contains the form used to expose configuration attributes. The form
is chosen by looking at the *type* property of the current data.
This property is defined in `Lemonldap::NG::Manager::Attributes` package.
By default, it is set to *text*.
`Lemonldap::NG::Manager::Attributes` is compiled into JSON/JS files by
`jsongenerator.pl`script.
## 1. Form file architecture
Form files must be called `<type>.json` where *<type>* is the declared type of
configuration property to display.
Form files must contain only HTML that will be included in the manager DOM
*(in `#form` div)*. It **must** consist of two blocks:
* a `<div class="panel panel-default">` div that contains the form,
* a `<script type="text/javascript">` script that defines which item to display
in context menu.
Basic example:
<div class="panel panel-default">
<div class="panel panel-heading">
<h3 class="panel-title">{{translate(currentNode)}}</h3>
</div>
<div class="panel panel-body">
<div class="input-group">
<label class="input-group-addon" for="textinput" trspan="value"/>
<input id="textinput" class="form-control" ng-model="currentNode.data"/>
</div>
</div>
</div>
<script type="text/javascript">
buttons=[{
"title": "cancel"
}];
</script>
## 2. Form main div
Based on bootstrap CSS, the main div part may look like:
If configuration item name is read-only:
<div class="panel panel-default">
<div class="panel panel-heading">
<h3 class="panel-title">{{translate(currentNode)}}</h3>
</div>
<div class="panel panel-body">
__ FORM INPUTS __
</div>
</div>
If configuration item name may be modified:
<div class="panel panel-default">
<div class="panel panel-heading"> <!-- optional -->
<h3 class="panel-title" trspan="OptionalTitle" />
</div>
<div class="panel panel-body">
__ FORM INPUTS __
</div>
</div>
> Note that keywords to translate must be set in all `languages/*.json` files.
### 2.1. AngularJS bindings
Some AngularJS variables are available :
* `currentNode`: the data subnode corresponding to the selected tree item
* `currentScope`: the AngularJS scope corresponding to the selected tree item
You can simply used them as follow:
<input class="form-control" ng-model="currentNode.data"/>
## 3. Script part
Form div **must** define which item menu to display. It is done via the script part
of the file:
Empty context menu:
<script type="text/javascript">
buttons=[];
</script>
Else:
<script type="text/javascript">
buttons=[
{<menu item1>},
{<menu item2>},
{<menu item3>}
]
</script>
### 3.1. Menu item
#### 3.1.1. Simple case
Menu item is a javascript object with at least the key `title`.
<script type="text/javascript">
buttons=[
{ "title": "cancel" }
]
</script>
In this case, the item will be displayed using the translation of *cancel*. It
will launch the function `$scope.cancel()` declared in AngularJS controller
*(`js/manager.js` file)* without any argument: functions in the controller can
access to controller properties and methods.
#### 3.1.2. Dropdown item
You can have sub items simply using `buttons` key which must then be an array
of menu items.
<script type="text/javascript">
buttons=[{
"title": "textToTranslate",
"buttons": [
{ "title": "cancel" },
{ "other": "item" }
]
}]
</script>
#### 3.1.3. Specify function to use
<script type="text/javascript">
buttons=[{
"title": "addVirtualHost",
"action": "addVhost"
}]
</script>
Same as bellow except that it will launch `$scope.addVhost()`.
#### 3.1.4. Custom function
<script type="text/javascript">
buttons=[{
"title": "addVirtualHost",
"action": function(currentNode,currentScope){
doSomethingWith(currentNode);
}
}]
</script>
In this case, the item will launch the defined function with two arguments:
* `currentNode`: the data subnode corresponding to the selected tree item
* `currentScope`: the AngularJS scope corresponding to the selected tree item
##### Tips
You can access to the parent using this:
* `currentScope.$parentNodeScope` for the parent scope
* `currentScope.$parentNodeScope.$modelValue` for the parent node
## 4. Modal window
You can use a modal window to display a choice (look at forms/portalSkin.html
for a complete example):
<button class="btn btn-info" ng-click="showModal('portalSkinChoice.html')">
A modal window will be displayed using `portalSkinChoice.html` template. This
template must be declared in the file:
<script type="text/ng-template" id="portalSkinChoice.html">
<div class="modal-header">
<h3 class="modal-title" trspan="chooseSkin" />
</div>
<div class="modal-body">
<div class="btn-group">
<button class="btn" ng-repeat="b in currentNode.select" ng-click="ok(currentNode.data=b.k)">
{{b.v}}
</button>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()" trspan="ok"></button>
<button class="btn btn-warning" ng-click="cancel()" trspan="cancel"></button>
</div>
</script>

View File

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 8.0 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

View File

Before

Width:  |  Height:  |  Size: 599 B

After

Width:  |  Height:  |  Size: 599 B

View File

Before

Width:  |  Height:  |  Size: 545 B

After

Width:  |  Height:  |  Size: 545 B

View File

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

View File

Before

Width:  |  Height:  |  Size: 576 B

After

Width:  |  Height:  |  Size: 576 B

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

View File

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB