add new help entries in manual

4 files changed, 233 insertions, 0 deletions

diff --git a/index.htm b/index.htm
index 651ab30..f06faa1 100644
--- a/index.htm
+++ b/index.htm
@@ -89,6 +89,12 @@
                         <a href="#/demo-grouping">Grouping</a>
                     </li>
                     <li class="subMenu">
+                        <a href="#/demo-helper-elements">Helper Elements</a>
+                    </li>                                      
+                    <li class="subMenu">
+                        <a href="#/demo-output-properties">Output Properties</a>
+                    </li>                                                  
+                    <li class="subMenu">
                         <a href="#/demo-callbacks">Callbacks</a>
                     </li>                   
                     <li class="subMenu">
diff --git a/js/app.js b/js/app.js
index acb4db7..e52bad9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -44,6 +44,16 @@ var myApp = angular.module( 'myApp' , [
         controller: 'demoGrouping'
     });        
 
+    $routeProvider.when( '/demo-output-properties' , {
+        templateUrl: 'views/demo-output-properties.htm', 
+        controller: 'demoMinimum'
+    });        
+
+    $routeProvider.when( '/demo-helper-elements' , {
+        templateUrl: 'views/demo-helper-elements.htm', 
+        controller: 'demoMinimum'
+    });            
+
     $routeProvider.when( '/demo-callbacks' , {
         templateUrl: 'views/demo-callbacks.htm', 
         controller: 'demoCallbacks'
diff --git a/views/demo-helper-elements.htm b/views/demo-helper-elements.htm
new file mode 100644
index 0000000..c2e96cf
--- /dev/null
+++ b/views/demo-helper-elements.htm
@@ -0,0 +1,116 @@
+<div class="row">
+    <div class="col-sm-12">
+
+        <h3 class="pageHeading">Demo > Helper Elements</h3>        
+
+        <p>
+            You can define which helper elements to be displayed by using attribute <code>helper-elements</code>, such as:            
+        </p>
+        <div
+            isteven-multi-select 
+            input-model="modernBrowsers" 
+            output-model="outputBrowsers"
+            button-label="icon name"        
+            item-label="icon name maker"        
+            tick-property="ticked"  
+            helper-elements="all filter"
+            >
+        </div>          
+        
+        <p>&nbsp;</p>
+        <div role="tabpanel">
+
+          <!-- Nav tabs -->
+          <ul class="nav nav-tabs" role="tablist">
+            <li role="presentation" class="active"><a data-target="#view" aria-controls="home" role="tab" data-toggle="tab">View</a></li>
+            <li role="presentation"><a data-target="#controller" aria-controls="profile" role="tab" data-toggle="tab">Controller</a></li>
+          </ul>
+
+          <!-- Tab panes -->
+          <div class="tab-content">
+            <div role="tabpanel" class="tab-pane active" id="view">
+                <p>Define your directive:</p>
+                <pre><code>&lt;div
+    isteven-multi-select
+    input-model="modernBrowsers"
+    output-model="outputBrowsers"
+    button-label="icon name"
+    item-label="icon name maker"
+    tick-property="ticked"
+    ...
+    helper-elements="all filter"
+&gt;
+&lt;/div&gt;</code></pre>
+            </div>
+            <div role="tabpanel" class="tab-pane" id="controller">
+                <p>Define your input-model:</p>
+        <div class="fauxCode hljs xml">
+            $scope.modernBrowsers = [
+            <table>
+                <tr class="hljs-tag" ng-repeat="row in modernBrowsers" >
+                    <td>&nbsp;</td>
+                    <td>{</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
+                    <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
+                    <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
+                </tr>
+            </table>
+            ];
+        </div>  
+            </div>
+          </div>
+
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-sm-12">              
+        <h5>Output model</h5>
+        <p>
+            Look at the <code>output-model</code> below to see the values getting updated 
+            as you select / deselect an item in the directive. Icons in the objects are actually full HTML <code>img</code> tag, shortened for simplicity. 
+        </p>
+        <div class="fauxCode hljs xml">
+            $scope.outputBrowsers = [
+            <table>
+                <tr class="hljs-tag" ng-repeat="row in outputBrowsers" >
+                    <td>&nbsp;</td>
+                    <td>{</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
+                    <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
+                    <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
+                </tr>
+            </table>
+            ];
+        </div>                
+
+        <h5>Other examples</h5>
+        <p>
+            The attribute accepts a combination of "all none filter reset", in space separated string. Example:
+            <ul>
+                <li><code>helper-elements="filter"</code>: will display the search (filter) field only</li>
+                <li><code>helper-elements="all none"</code>: will display the "Select all" and "Select none" buttons</li>
+                <li><code>helper-elements=""</code>: will display no helper elements at all</li>
+            </ul>            
+        </p>
+        <br />
+        <p>
+            <span class="label label-primary">Note</span> 
+            When the directive is disabled (using <code>is-disabled</code> property), the helper elements will be disabled except the filter field. 
+            The purpose is to allow you to search and see the selection state even when the directive is disabled.
+        </p>
+    </div>        
+</div>
+
+<script>    
+    $(document).ready(function() {
+      $('pre code').each(function(i, block) {
+        hljs.highlightBlock(block);
+      });
+    });
+</script>
diff --git a/views/demo-output-properties.htm b/views/demo-output-properties.htm
new file mode 100644
index 0000000..7e59bf2
--- /dev/null
+++ b/views/demo-output-properties.htm
@@ -0,0 +1,101 @@
+<div class="row">
+    <div class="col-sm-12">
+
+        <h3 class="pageHeading">Demo > Output Properties</h3>        
+
+        <p>
+            You can choose which properties you want to have in your output-model.
+        </p>
+        
+        <br />
+        <div
+            isteven-multi-select 
+            input-model="modernBrowsers" 
+            output-model="outputBrowsers"
+            button-label="icon name"        
+            item-label="icon name maker"        
+            tick-property="ticked"  
+            output-properties="name ticked"
+            >
+        </div>  
+
+        <p>&nbsp;</p>
+
+        <div role="tabpanel">
+
+          <!-- Nav tabs -->
+          <ul class="nav nav-tabs" role="tablist">
+            <li role="presentation" class="active"><a data-target="#view" aria-controls="home" role="tab" data-toggle="tab">View</a></li>
+            <li role="presentation"><a data-target="#controller" aria-controls="profile" role="tab" data-toggle="tab">Controller</a></li>
+          </ul>
+
+          <!-- Tab panes -->
+          <div class="tab-content">
+            <div role="tabpanel" class="tab-pane active" id="view">
+                <p>Define your directive:</p>
+                <pre><code>&lt;div
+    isteven-multi-select
+    input-model="modernBrowsers"
+    output-model="outputBrowsers"
+    button-label="icon name"
+    item-label="icon name maker"
+    tick-property="ticked"
+    ...
+    output-properties="name ticked"
+&gt;
+&lt;/div&gt;</code></pre>
+            </div>
+            <div role="tabpanel" class="tab-pane" id="controller">
+                <p>Define your input-model:</p>
+        <div class="fauxCode hljs xml">
+            $scope.modernBrowsers = [
+            <table>
+                <tr class="hljs-tag" ng-repeat="row in modernBrowsers" >
+                    <td>&nbsp;</td>
+                    <td>{</td>
+                    <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
+                    <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
+                    <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
+                </tr>
+            </table>
+            ];
+        </div>  
+            </div>
+          </div>
+
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-sm-12">              
+        <h5>Output model</h5>
+        <p>
+            Look at the <code>output-model</code> below to see the values getting updated 
+            as you select / deselect an item in the directive. Icons in the objects are actually full HTML <code>img</code> tag, shortened for simplicity. 
+        </p>
+        <div class="fauxCode hljs xml">
+            $scope.outputBrowsers = [
+            <table>
+                <tr class="hljs-tag" ng-repeat="row in outputBrowsers" >
+                    <td>&nbsp;</td>
+                    <td>{</td>
+                    <td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
+                    <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
+                    <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
+                </tr>
+            </table>
+            ];
+        </div>                
+    </div>        
+</div>
+
+<script>    
+    $(document).ready(function() {
+      $('pre code').each(function(i, block) {
+        hljs.highlightBlock(block);
+      });
+    });
+</script>