diff options
Diffstat (limited to 'doc/views')
| -rw-r--r-- | doc/views/breaking-changes.htm | 27 | ||||
| -rw-r--r-- | doc/views/bug-reporting-contributing.htm | 36 | ||||
| -rw-r--r-- | doc/views/configs-options.htm | 382 | ||||
| -rw-r--r-- | doc/views/contributing.htm | 53 | ||||
| -rw-r--r-- | doc/views/demo-callbacks.htm | 163 | ||||
| -rw-r--r-- | doc/views/demo-disabling-enabling.htm | 126 | ||||
| -rw-r--r-- | doc/views/demo-dynamic-update.htm | 160 | ||||
| -rw-r--r-- | doc/views/demo-grouping.htm | 204 | ||||
| -rw-r--r-- | doc/views/demo-horizontal-layout.htm | 106 | ||||
| -rw-r--r-- | doc/views/demo-minimum.htm | 103 | ||||
| -rw-r--r-- | doc/views/demo-single-selection-mode.htm | 108 | ||||
| -rw-r--r-- | doc/views/dependency-compatibility.htm | 22 | ||||
| -rw-r--r-- | doc/views/faq.htm | 45 | ||||
| -rw-r--r-- | doc/views/getting-started.htm | 118 | ||||
| -rw-r--r-- | doc/views/issues-bug-reporting.htm | 33 | ||||
| -rw-r--r-- | doc/views/main.htm | 113 | ||||
| -rw-r--r-- | doc/views/mit-license.htm | 13 | ||||
| -rw-r--r-- | doc/views/other-cool-stuffs.htm | 13 |
18 files changed, 1825 insertions, 0 deletions
diff --git a/doc/views/breaking-changes.htm b/doc/views/breaking-changes.htm new file mode 100644 index 0000000..ca83f99 --- /dev/null +++ b/doc/views/breaking-changes.htm @@ -0,0 +1,27 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Breaking Changes</h3> + + <p>Below are the breaking changes since previous version:</p> + + <ol> + <li> + File name and the directive name have been changed. I am really sorry for this, but this is the only workaround + to prevent wrong language statistic in Github (they don't count files whose name starts with "angular"). The repository name stays the same. + </li> + <li> + <code>output-model</code> is now required. + </li> + <li> + <code>input-model</code> is now static (not dynamically updated), hence why we need output-model. On the plus side, you now can + re-use the input model where necessary. + </li> + <li> + <code>default-label</code> is deprecated. Custom text and translations can be done using the <code>translation</code> attribute. + </li> + </ol> + + </div> +</div> + diff --git a/doc/views/bug-reporting-contributing.htm b/doc/views/bug-reporting-contributing.htm new file mode 100644 index 0000000..f7aec99 --- /dev/null +++ b/doc/views/bug-reporting-contributing.htm @@ -0,0 +1,36 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Bug Reporting & Contributing</h3> + + <h5>Bug Reporting</h5> + Please follow these steps: + <ol> + <li>Search in the <a href="https://github.com/isteven/angular-multi-select/issues">issue</a> section first. There might already be an answer for similar issue. Do check both open and closed issues.</li> + <li>If there's no previous issue found, then please create a new issue in <a href="https://github.com/isteven/angular-multi-select/issues">https://github.com/isteven/angular-multi-select/issues</a>.</li> + <li><label class="label label-danger">Important</label> Please replicate the problem in JSFiddle or Plunker (or any other online JS collaboration tool), and include the URL in the issue you are creating.</li> + </ol> + + <h5>Contributing</h5> + + Notes on contributing and Pull Requests (PRs): + <ol> + <li>I will prioritize PRs which serve the greater good with the least complexity.</li> + <li>If I don't accept a PR, it means either: + <ul> + <li>I am working on the same thing, or</li> + <li>It doesn't serve greater good, or</li> + <li>It conflicts with existing functionalities</li> + </ul> + </li> + </ol> + <br /> + As of now, some of the most wanted features are: + <ul> + <li>AJAX (or promise objects)</li> + <li>Lazy loading</li> + </ul> + + </div> +</div> + diff --git a/doc/views/configs-options.htm b/doc/views/configs-options.htm new file mode 100644 index 0000000..a627802 --- /dev/null +++ b/doc/views/configs-options.htm @@ -0,0 +1,382 @@ +<div class="row"> + <div class="col-sm-12"> + <h3 class="pageHeading">Configuration & Options</h3> +<!-- +<div class="row"> + <div class="col-sm-12"> + <h5>Full spec</h5> + <pre><code><div + multi-select + input-model="$scope.arrOfObjects" + output-model="$scope.arrOfObjects2" + button-label="property1 property2 ..." + item-label="property1 property2 ..." + tick-property="property3" + disable-property="property4" + orientation="horizontal | vertical" + selection-mode="multiple | single" + max-labels="999" + directive-id="..." + is-disabled="true | false" + helper-elements="all none reset filter" + default-label="..." + on-open="$scope.function()" + on-close="$scope.function()" + on-item-click="$scope.function( data )" + on-select-all="$scope.function()" + on-select-none="$scope.function()" + on-reset="$scope.function()" + on-clear="$scope.function()" + on-filter-change="$scope.function()" + i18n="$scope.object" +> +</div> +</code></pre> + </div> +</div> +--> + <p>Below are the available attributes to configure the multi-select directive. The first 5 are required.</p> + <span class="configData"> + <h5>input-model</h5> <span class="label label-primary">required</span> + <p> + This is the data you pass into the directive. You can programatically do changes + and the directive will refresh accordingly. For example; to reset programmatically, you can iterate over + this input-model and set <code>selected = false</code>. If, for any reason, you want to reset it, set it into an empty array. + Don't set it to null or other types. + </p> + <p> + <span class="inlineTitle">Type</span>: $scope variable. Array of objects. <br /> + <span class="inlineTitle">Default value</span>: N/A <br /> + <span class="inlineTitle">Example</span>: <br /> + In your view: <code><div isteven-multi-select ... input-model="inputList"></div></code>. + <br /> + In your controller: + </p> + <pre><code>$scope.inputList = [ + { firstName: "Peter", lastName: "Parker", pic: "<img src='[...]/peter.png />", selected: false }, + { firstName: "Mary", lastName: "Jane", pic: "<img src='[...]/mary.png />", selected: false }, + { firstName: "Bruce", lastName: "Wayne", pic: "<img src='[...]/bruce.png />", selected: true }, + { firstName: "David", lastName: "Banner", pic: "<img src='[...]/david.png />", selected: false }, + { firstName: "Natalia", lastName: "Romanova", pic: "<img src='[...]/nat.png />", selected: false }, + { firstName: "Clark", lastName: "Kent", pic: "<img src='[...]/clark.png />", selected: true } +];</code></pre> + <p> + <span class="inlineTitle">Note</span>: + There might be some limitations on what HTML tags you can use (Use common sense. For example, flash animation + most likely won't work on the button label). It's highly suggested that you don't use + BUTTON and INPUT tags to prevent conflicts. + </p> + + <h5>output-model</h5> <span class="label label-primary">required</span> + <p> + Will list all the selected items. If you enable grouping, this WILL NOT include the group headers. + Also, this model is OUTPUT ONLY. If you want to programmatically change things, do it in the INPUT-MODEL. + </p> + <p> + <span class="inlineTitle">Type</span>: $scope variable. Array of objects. <br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... output-model="outputData"></div></code>. + </p> + + <h5>button-label</h5> <span class="label label-primary">required</span> + <p> + input-model properties that you want to display on the button. + </p> + <p> + <span class="inlineTitle">Type</span>: String. Separate multiple values by space.<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... button-label="pic firstName"></div></code> + </p> + + <h5>item-label</h5> <span class="label label-primary">required</span> + <p> + input-model properties that you use as item label. + </p> + <p> + <span class="inlineTitle">Type</span>: String. Separate multiple values by space.<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code>><div isteven-multi-select ... item-label="firstName lastName"></div></code> + <p> + + <h5>tick-property</h5> <span class="label label-primary">required</span> + <p> + input-model property with a boolean value that represents whether a checkbox is ticked or not. + </p> + <p> + <span class="inlineTitle">Type</span>: String<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Example</span>: + </p> + <ul> + <li> + If <code><div isteven-multi-select ... tick-property="selected"></div></code>, then: + <ul> + <li>selected === true, item is selected. </li> + <li>selected === false, item is not selected.</li> + </ul> + </li> + <li> + If <code>><div isteven-multi-select ... tick-property="isOn"></div></code>, then: + <ul> + <li>isOn === true, item is selected. </li> + <li>isOn === false, item is not selected.</li> + </ul> + </li> + </ul> + + <h5>disable-property</h5> + <p> + Input-model property with a boolean value that represent whether an item is disabled or enabled. + This gives you granular control over each checkbox, and it has higher priority over the "is-disabled" attribute explained later. + </p> + <p> + <span class="inlineTitle">Type</span>: String<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Example</span>: + </p> + <ul> + <li> + If <code><div isteven-multi-select ... disable-property="thisItemIsDisabled"></div></code>, then: + <ul> + <li>thisItemIsDisabled === true, item is disabled. </li> + <li>thisItemIsDisabled === false, item is enabled.</li> + </ul> + </li> + </ul> + + <h5>orientation</h5> + <p>Orientation of the item list.</p> + <p> + <span class="inlineTitle">Type</span>: String<br /> + <span class="inlineTitle">Available values</span>: "vertical" | "horizontal"<br /> + <span class="inlineTitle">Default value</span>: "vertical"<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... orientation="vertical"></div></code>. + </p> + + <h5>selection-mode</h5> + <p>Single or multiple selection. If not specified, the default will be "multiple".</p> + <p> + <span class="inlineTitle">Type</span>: String<br /> + <span class="inlineTitle">Available values</span>: "single" | "multiple"<br /> + <span class="inlineTitle">Default value</span>: "multiple"<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... selection-mode="single"></div></code>. + </p> + + + <h5>max-labels</h5> + <p> + Maximum number of items that will be displayed in the dropdown button. If not specified, will display all selected items. + </p> + <p> + <span class="inlineTitle">Type</span>: Integer-parseable string ( Such as "2", or "3" )<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Example</span>: + With the input-model above, + </p> + <ul> + <li><code>max-labels="1"</code> will display: "Bruce Wayne, ... (Total: 2)" on the button.</li> + <li><code>max-labels="0"</code> will display: "(Total: 2)" on the button.</li> + </ul> + + <h5>is-disabled</h5> + <p> + Will disable or enable all checkboxes except stated otherwise in "disable-property" above. + It's similar with ng-disabled, visit <a href="http://docs.angularjs.org/api/ng/directive/ngDisabled">http://docs.angularjs.org/api/ng/directive/ngDisabled</a> + to learn more. + </p> + <p> + <span class="inlineTitle">Type</span>: $scope boolean expression, or string ( "true" or "false" )<br /> + <span class="inlineTitle">Default value</span>: false or "false"<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... is-disabled="true"></div></code>. + </p> + + <h5>directive-id</h5> + <p> + Name or id for your directive, to be attached to a <code>span</code> element (parent of the button elemnet). + Useful if you want to debug from within the directive code and you use more than one directive in one page. + Example (from within the multi-select.js): <code>console.log( 'Currently active multi-select: ' + $scope.directiveId );</code> + </p> + <p> + <span class="inlineTitle">Type</span>: String<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... directive-id="hello1"></div></code>. + </p> + + + <h5>helper-elements</h5> + <p> + Define which helper buttons (Select all, none, reset, filter box) to be displayed. + </p> + <p> + <span class="inlineTitle">Type</span>: String. Separate multiple values with space. Order of values does not matter.<br /> + <span class="inlineTitle">Available values</span>: Combinations of "all", "none", "reset", "filter", or empty string<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Example</span>: + <ul> + <li> + Display "Select All" button and the filter box: <code><div isteven-multi-select ... helper-elements="all filter"></div></code> + </li> + <li> + Display none: empty string. <code><div isteven-multi-select ... helper-elements=""></div></code>. + </li> + <li>If not specified, by default will display all.</li> + </ul> + </p> + + <h5>max-height</h5> + <p> + Set the maximum height of the selection item list area. + </p> + <p> + <span class="inlineTitle">Type</span>: Integer-parseable string or string which comply with CSS' height unit (such as "100", "100px") <br /> + <span class="inlineTitle">Default value</span>: auto<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... max-height="250px"></div></code>. + </p> + + <h5>min-search-length</h5> <span class="label label-warning">New! v3.0.0</span> + <p> + Set the minimum characters required to trigger search action. + </p> + <p> + <span class="inlineTitle">Type</span>: Integer-parseable string ( Such as "3", or "5" ).<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... min-search-length="3"></div></code>. + </p> + + <h5>search-property</h5> <span class="label label-warning">New! v3.0.0</span> + <p> + Set which input-model properties to be searched. Previously, the directive will search from all + available object properties. Now, if this is specified, you can define which property to search. + </p> + <p> + <span class="inlineTitle">Type</span>: String<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... search-property="firstName"></div></code>. + </p> + + <h5>translation</h5> <span class="label label-warning">New! v3.0.0</span> + <p> + Use custom text on the helper elements. You can use different text or other languages. If you use it, + you need to define ALL five of the labels here, or they will show "undefined". + </p> + <p> + <span class="inlineTitle">Type</span>: $scope object<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... translation="localLang"></div></code>. + </p> + <p> + In your controller: + <pre ><code>$scope.localLang = { + selectAll : "Tick all", + selectNone : "Tick none", + reset : "Undo all" + search : "Type here to search...", + nothingSelected : "Nothing is selected" //default-label is deprecated and replaced with this. +}</code></pre> + </p> + + <h5>on-open</h5> + <p> + A $scope function to call on multi-select open. You need to define this function in your controller. + </p> + <p> + <span class="inlineTitle">Type</span>: $scope function<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Parameter</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... on-open="funcOpen()"></div></code>. + </p> + + <h5>on-close</h5> + <p> + A $scope function to call on multi-select close (be it by clicking the button or clicking outside the multi-select element). + You need to define this function in your controller. + </p> + <p> + <span class="inlineTitle">Type</span>: $scope function<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Parameter</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... on-close="funcClose()"></div></code>. + </p> + + <h5>on-item-click</h5> + <p> + A $scope function to call when user click on an item. Triggered AFTER the item is clicked. + You need to define this function in your controller. + </p> + <p> + <span class="inlineTitle">Type</span>: $scope function<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Parameter</span>: Will pass a singular object of the clicked item<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... on-item-click="funcClick( data )"></div></code>. + </p> + + <h5>on-select-all</h5> <span class="label label-warning">New! v3.0.0</span> + <p> + A $scope function to call when "select all" button is clicked. + You need to define this function in your controller. + </p> + <p> + <span class="inlineTitle">Type</span>: $scope function<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Parameter</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... on-select-all="funcSelectAll()"></div></code>. + </p> + + <h5>on-select-none</h5> <span class="label label-warning">New! v3.0.0</span> + <p> + A $scope function to call when "select none" button is clicked. + You need to define this function in your controller. + </p> + <p> + <span class="inlineTitle">Type</span>: $scope function<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Parameter</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... on-select-none="funcSelectNone()"></div></code>. + </p> + + <h5>on-reset</h5> <span class="label label-warning">New! v3.0.0</span> + <p> + A $scope function to call when "reset" button is clicked. + You need to define this function in your controller. + </p> + <p> + <span class="inlineTitle">Type</span>: $scope function<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Parameter</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... on-reset="funcReset()"></div></code>. + </p> + + <h5>on-clear</h5> <span class="label label-warning">New! v3.0.0</span> + <p> + A $scope function to call when the "x" button in filter field is clicked. + You need to define this function in your controller. + </p> + <p> + <span class="inlineTitle">Type</span>: $scope function<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Parameter</span>: N/A<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... on-clear="funcClear()"></div></code>. + </p> + + <h5>on-search-change</h5> <span class="label label-warning">New! v3.0.0</span> + <p> + A $scope function to call when you type in the search field. + You need to define this function in your controller. + </p> + <p> + <span class="inlineTitle">Type</span>: $scope function<br /> + <span class="inlineTitle">Default value</span>: N/A<br /> + <span class="inlineTitle">Parameter</span>: Will pass the string that you type and the result<br /> + <span class="inlineTitle">Example</span>: <code><div isteven-multi-select ... on-filter-change="funcFilterChange( data )"></div></code>. + </p> + + </span> + </div> +</div> +<script> + $(document).ready(function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); +</script> diff --git a/doc/views/contributing.htm b/doc/views/contributing.htm new file mode 100644 index 0000000..6845280 --- /dev/null +++ b/doc/views/contributing.htm @@ -0,0 +1,53 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Contributing</h3> + + <h5>Notes on contributing and Pull Requests (PRs):</h5> + <p>As usual, I will prioritize PRs which serve the greater good, or are critical.</p> + <p>If I don't accept a PR, it means either:</p> + <ul> + <li>I am currently working on the same thing, or</li> + <li>It doesn't serve greater good (perhaps only applies to you or, say, 5% of the users), or</li> + <li>It conflicts with existing functionalities</li> + </ul> + + <p>As of now, some of the most wanted features are:</p> + <ul> + <li>AJAX (or promise objects)</li> + <li>Lazy loading</li> + </ul> + + <p> + When working on a PR, please set your TAB to be 4 spaces (ASCII 32). + </p> + + <h5>Useful Pull Requests</h5> + <p> + Here are some PRs contributed by various great developers, but not included in the project due to reasons above. + </p> + <ul> + <li> + <a href="https://github.com/isteven/angular-multi-select/pull/151" target="_blank">#151</a> + Using angular in itemlabels (tooltips) - compile directive added and used + </li> + <li> + <a href="https://github.com/isteven/angular-multi-select/pull/127" target="_blank">#127</a> + Customize output model properties, single item behavior, control disabled, filter patch, etc. + </li> + <li> + <a href="https://github.com/isteven/angular-multi-select/pull/95" target="_blank">#95</a> + Add custom "more" label callback + </li> + <li> + <a href="https://github.com/isteven/angular-multi-select/pull/78" target="_blank">#78</a> + Allow hidden items + </li> + <li> + <a href="https://github.com/isteven/angular-multi-select/pull/57" target="_blank">#57</a> + Add ability to change label divider + </li> + </ul> + </div> +</div> + diff --git a/doc/views/demo-callbacks.htm b/doc/views/demo-callbacks.htm new file mode 100644 index 0000000..ade9ac1 --- /dev/null +++ b/doc/views/demo-callbacks.htm @@ -0,0 +1,163 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Demo > Callbacks</h3> + + <p> + The directive provides 8 (eight) callbacks. Open your browser's console to see the output. + </p> + + <br /> + + <div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + on-open="fOpen()" + on-close="fClose()" + on-item-click="fClick( data )" + on-select-all="fSelectAll()" + on-select-none="fSelectNone()" + on-reset="fReset()" + on-clear="fClear()" + on-search-change="fSearchChange( data )" + ></div> + + + <p> </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><div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + ... + on-open="fOpen()" + on-close="fClose()" + on-item-click="fClick( data )" + on-select-all="fSelectAll()" + on-select-none="fSelectNone()" + on-reset="fReset()" + on-clear="fClear()" + on-search-change="fSearchChange( data )" +> +</div></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> </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> + + <p>Define your callback functions:</p> + <pre><code>$scope.fOpen = function() { + console.log( 'On-open' ); +} + +$scope.fClose = function() { + console.log( 'On-close' ); +} + +$scope.fClick = function( data ) { + console.log( 'On-item-click' ); + console.log( 'On-item-click - data:' ); + console.log( data ); +} + +$scope.fSelectAll = function() { + console.log( 'On-select-all' ); +} + +$scope.fSelectNone = function() { + console.log( 'On-select-none' ); +} + +$scope.fReset = function() { + console.log( 'On-reset' ); +} + +$scope.fClear = function() { + console.log( 'On-clear' ); +} + +$scope.fSearchChange = function( data ) { + console.log( 'On-search-change' ); + console.log( 'On-search-change - keyword: ' + data.keyword ); + console.log( 'On-search-change - result: ' ); + console.log( data.result ); +}</code></pre> + </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> </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 < outputBrowsers.length - 1">,</span></td> + </tr> + </table> + ]; + </div> + + <h5>Learn more</h5> + </p> + Open the <code>/docs/js/controllers/demo-callbacks.js</code>, as well as this view + <code>docs/views/demo-callbacks.htm</code>to learn the code directly. + </p> + + </div> +</div> + +<script> + $(document).ready(function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); +</script> diff --git a/doc/views/demo-disabling-enabling.htm b/doc/views/demo-disabling-enabling.htm new file mode 100644 index 0000000..737de31 --- /dev/null +++ b/doc/views/demo-disabling-enabling.htm @@ -0,0 +1,126 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Demo > Disabling / Enabling</h3> + + <p> + You can disable the directive, as well as each selection item in it. + As you might have guessed, you can do this programmatically, on the fly. + When the directive is disabled, You can still toggle the dropdown button + and see the items, but some of the directive's button will be hidden. + </p> + + <br /> + <div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + + disable-property="disabled" + is-disabled="disableDir" + > + </div> + + <h5>Disable / enable the directive</h5> + <p> + Click one of the buttons below to disable or enable the directive. + </p> + <p> + <button type="button" class="btn btn-danger btn-xs" ng-click="disableDir = true" >Disable</button> + <button type="button" class="btn btn-success btn-xs" ng-click="disableDir = false" >Enable</button> + </p> + <h5>Disable / enable singular item</h5> + <p> + You need to use <code>disable-property</code> attribute to define which object is disabled / enabled. + Click one of the buttons below to disable or enable the first browser. + </p> + <p> + <button type="button" class="btn btn-danger btn-xs" ng-click="modernBrowsers[ 0 ].disabled = true" >Disable the first browser</button> + <button type="button" class="btn btn-success btn-xs" ng-click="modernBrowsers[ 0 ].disabled = false" >Enable the first browser</button> + </p> + + <br /> + <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><div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + ... + disable-property="disabled" + is-disabled="disableDir" +> +</div></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> </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> </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> + +<script> + $(document).ready(function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); +</script> diff --git a/doc/views/demo-dynamic-update.htm b/doc/views/demo-dynamic-update.htm new file mode 100644 index 0000000..4a33fdb --- /dev/null +++ b/doc/views/demo-dynamic-update.htm @@ -0,0 +1,160 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Demo > Dynamic Update</h3> + + <p> + The directive listens to changes on their input <code>$scope</code> variable. + This is how you programatically update the directive - by changing the input model - and it will + refresh accordingly. + </p> + <br /> + <div + isteven-multi-select + input-model="dynamicData" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + > + </div> + <h5>Update input-model</h5> + <p> + Click one of the buttons below to load different data into it. + </p> + <p> + <button type="button" class="btn btn-success btn-xs" ng-click="switchSource( 'modernBrowsers' )" >Load modern browsers</button> + <button type="button" class="btn btn-primary btn-xs" ng-click="switchSource( 'oldBrowsers' )" >Load old browsers</button> + </p> + <h5>Update singular data</h5> + <p> + You can also update a single item. Operations like these are totally valid: + <ul> + <li><code>$scope.modernBrowsers[ 1 ].ticked = false</code>, or</li> + <li><code>$scope.modernBrowsers[ 1 ].name = 'Hola!'</code></li> + </ul> + For example, click this button below to change the name of the first chosen browser, into 'Hello World'. + </p> + <p> + <button type="button" class="btn btn-warning btn-xs" ng-click="dynamicData[ 0 ].name = 'Hello World'" >Update singular data</button> + </p> + <br /> + <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><div + isteven-multi-select + input-model="dynamicData" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" +> +</div> +... +<!-- The buttons to do data operation --> +<button type="button" class="btn btn-success btn-xs" ng-click="switchSource( 'modernBrowsers' )" >Load modern browsers</button> +<button type="button" class="btn btn-primary btn-xs" ng-click="switchSource( 'oldBrowsers' )" >Load old browsers</button> +<button type="button" class="btn btn-warning btn-xs" ng-click="dynamicData[ 0 ].name = 'Hello World!'" >Update singular data</button></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 dynamicData" > + <td> </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 < modernBrowsers.length - 1">,</span></td> + </tr> + </table> + ]; + </div> + + <div class="fauxCode hljs xml"> + $scope.oldBrowsers = [ + <table> + <tr class="hljs-tag" ng-repeat="row in oldBrowsers" > + <td> </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 < oldBrowsers.length - 1">,</span></td> + </tr> + </table> + ]; + </div> + + <p> + Some extra codes here; <code>$scope.swithcSource()</code> is a function where we switch + the <code>$scope.dynamicData</code> content with modern or old browsers. + </p> + <pre><code>// This will be our input model +$scope.dynamicData = []; + +// Just a function to switch the model on button click. +$scope.switchSource = function( data ) { + $scope.dynamicData = angular.copy( $scope[ data ] ); +} + +// Initially we'll use the modern browsers +$scope.switchSource( 'modernBrowsers' );</code></pre> + </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> </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>Learn more</h5> + </p> + Open the <code>/docs/js/controllers/demo-dynamic-update.js</code>, as well as this view + <code>docs/views/demo-dynamic-update.htm</code>to learn the code directly. + </p> + + </div> +</div> + +<script> + $(document).ready(function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); +</script> diff --git a/doc/views/demo-grouping.htm b/doc/views/demo-grouping.htm new file mode 100644 index 0000000..14764a8 --- /dev/null +++ b/doc/views/demo-grouping.htm @@ -0,0 +1,204 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Demo > Grouping</h3> + + <p>Vertical grouping</p> + <div + isteven-multi-select + input-model="webBrowsersGrouped" + output-model="outputBrowsers1" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + group-property="msGroup" + > + </div> + + <br /> + <p>Horizontal grouping (just add <code>orientation="horizontal"</code>).</p> + <div + isteven-multi-select + input-model="webBrowsersGrouped" + output-model="outputBrowsers2" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + orientation="horizontal" + group-property="msGroup" + > + </div> + + <h5>Grouping is just additional rows in your input-model</h5> + <p> + First, in your directive declaration, set a grouping marker using the <code>group-property</code>, + let's say <code>group-property="msGroup"</code>. This is our group marker. +Now, in your controller, grouping is made by enclosing some rows of your input-model array with + this <code>msGroup</code> attribute. + <ul> + <li><code>msGroup: true</code> will start a group, and</li> + <li><code>msGroup: false</code> will end a group</li> + </ul> + Example: + </p> + <pre><code>$scope.data = [ + { name: 'People', msGroup: true }, // Start a group labled 'People' + { name: 'Person A', selected: false }, // Person A. + { name: 'Person B', selected: false }, // Person B + { msGroup: false } // Close 'People' group +];</code></pre> + + <p> + The directive will take care of indentation of grouped items. It supports nested grouping, as deep as your layout permits. + You can use HTML tags on groups as usual. Clicking the group header will select/deselect + all visible items under that particular group EXCEPT on single selection-mode. + </p> + <p> + Below are the codes to create the vertical multi-select above: + </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><div + isteven-multi-select + input-model="webBrowsersGrouped" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + ... + group-property="msGroup" +> +</div></code></pre> + </div> + <div role="tabpanel" class="tab-pane" id="controller"> + <p>Define your input-model:</p> + <pre><code>$scope.webBrowsersGrouped = [ + { + name: '<strong>All Browsers</strong>', + msGroup: true + }, + { + name: '<strong>Modern Web Browsers</strong>', + msGroup: true + }, + { + icon: '<img src="https://cdn1.iconfinder.com/data/icons/fatcow/32/opera.png" />', + name: 'Opera', + maker: '(Opera Software)', + ticked: true + }, + { + icon: '<img src="https://cdn1.iconfinder.com/data/icons/fatcow/32/internet_explorer.png" />', + name: 'Internet Explorer', + maker: '(Microsoft)', + ticked: false + }, + { + icon: '<img src="https://cdn1.iconfinder.com/data/icons/humano2/32x32/apps/firefox-icon.png" />', + name: 'Firefox', + maker: '(Mozilla Foundation)', + ticked: true + }, + { + icon: '<img src="https://cdn1.iconfinder.com/data/icons/fatcow/32x32/safari_browser.png" />', + name: 'Safari', + maker: '(Apple)', + ticked: false + }, + { + icon: '<img src="https://cdn1.iconfinder.com/data/icons/google_jfk_icons_by_carlosjj/32/chrome.png" />', + name: 'Chrome', + maker: '(Google)', + ticked: true + }, + { + msGroup: false + }, + { + name: '<strong>Classic Web Browsers</strong>', + msGroup: true + }, + { + icon: '<img src="http://www.ucdmc.ucdavis.edu/apps/error/nojavascript/images/netscape_icon.jpg" />', + name: 'Netscape Navigator', + maker: '(Netscape Corporation)', + ticked: true + }, + { + icon: '<img src="http://upload.wikimedia.org/wikipedia/en/thumb/f/f4/Amaya_logo_65x50.png/48px-Amaya_logo_65x50.png" />', + name: 'Amaya', + maker: '(Inria & W3C)', + ticked: true + }, + { + icon: '<img src="http://upload.wikimedia.org/wikipedia/commons/8/8c/WorldWideWeb_Icon.png" />', + name: 'WorldWideWeb Nexus', + maker: '(Tim Berners-Lee)', + ticked: false + }, + { + msGroup: false + }, + { + msGroup: false + } +];</pre></code> + + </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.outputBrowsers1 = [ + <table> + <tr class="hljs-tag" ng-repeat="row in outputBrowsers1" > + <td> </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 < outputBrowsers1.length - 1">,</span></td> + </tr> + </table> + ]; + </div> + + <h5>Things to remember</h5> + <p><span class="label label-danger">Important</span> Your input-model is still a flat, one-dimensional array of objects.</p> + <p><span class="label label-danger">Important</span> Don't put <code>tick-property</code> in your group marker.</p> + <p><span class="label label-danger">Important</span> Group markers won't be included in the output-model.</p> + <p><span class="label label-primary">Note</span> You search the item label, not the group label.</p> + + <h5>Learn more</h5> + </p> + Open the <code>/docs/js/controllers/demo-grouping.js</code>, as well as this view + <code>docs/views/demo-grouping.htm</code>to learn the code directly. + </p> + </div> +</div> + +<script> + $(document).ready(function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); +</script> diff --git a/doc/views/demo-horizontal-layout.htm b/doc/views/demo-horizontal-layout.htm new file mode 100644 index 0000000..8b58933 --- /dev/null +++ b/doc/views/demo-horizontal-layout.htm @@ -0,0 +1,106 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Demo > Horizontal Layout</h3> + + <p> + This will create inline selection items, which will span over the parent element's width. + <br /> + You might need to make some CSS adjustments depending on the CSS UI kit that you use. + </p> + + <br /> + + <div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + orientation="horizontal" + > + </div> + + <p> </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><div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + ... + orientation="horizontal" +> +</div></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> </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> </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> + +<script> + $(document).ready(function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); +</script> diff --git a/doc/views/demo-minimum.htm b/doc/views/demo-minimum.htm new file mode 100644 index 0000000..752ae5b --- /dev/null +++ b/doc/views/demo-minimum.htm @@ -0,0 +1,103 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Demo > Minimum</h3> + + <p> + This is the minimum configuration required by the directive. + Just define your input and output, choose the input-object's property that you want to use as + item & button labels, as well as the property that represents the selection state of an item. + For most of you, this would be enough. + </p> + + <br /> + <div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + > + </div> + + <p> </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><div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" +> +</div></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> </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> </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> + +<script> + $(document).ready(function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); +</script> diff --git a/doc/views/demo-single-selection-mode.htm b/doc/views/demo-single-selection-mode.htm new file mode 100644 index 0000000..af0858d --- /dev/null +++ b/doc/views/demo-single-selection-mode.htm @@ -0,0 +1,108 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Demo > Single Selection Mode</h3> + + <p> + By default, single selection mode will only show reset button and the search field. + In the example below, all helper elements are hidden - it now looks like a normal drop down menu. + </p> + <p> + Go to <a href="#/configs-options">configs & options</a> section and find "helper-elements" to learn how to hide the helper elements. + </p> + + <br /> + <div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + helper-elements="" + selection-mode="single" + > + </div> + + <p> </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><div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + ... + selection-mode="single" +> +</div></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> </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> </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> + +<script> + $(document).ready(function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); +</script> diff --git a/doc/views/dependency-compatibility.htm b/doc/views/dependency-compatibility.htm new file mode 100644 index 0000000..6b8b3f0 --- /dev/null +++ b/doc/views/dependency-compatibility.htm @@ -0,0 +1,22 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Dependency & Compatibility</h3> + + <h5>Dependency</h5> + <p> + AngularJs version 1.3.xx. Other versions may or may not work. Please test first. + </p> + + <h5>Browser compatibility</h5> + The directive was tested working on most modern desktop browsers such as: + <ul> + <li>Opera >= 12.16</li> + <li>Internet Explorer 12</li> + <li>Firefox >= 27</li> + <li>Google Chrome >= 33</li> + </ul> + May or may not work on some mobile browsers. Please test first before you use this on mobile environment. + </div> +</div> + diff --git a/doc/views/faq.htm b/doc/views/faq.htm new file mode 100644 index 0000000..c1cffa1 --- /dev/null +++ b/doc/views/faq.htm @@ -0,0 +1,45 @@ +<div class="row"> + <div class="col-sm-12"> + <h3 class="pageHeading">Frequently Asked Questions</h3> + + <p> + People asked me a lot of questions regarding the decisions behind the directive's design. Why this? why not that? + So here are some of the explanations: + </p> + + <h5>The models - why do they have to be array of objects? Why aren't you using ng-options like most solutions?</h5> + <p> + I believe that an element is simply an embodiment of the data it contains. Something like "form will follow function" + idea. In this case, I believe an array of object is the best data structure to use. With array of objects, + you know how your element looks like, which data are checked / disabled, etc, just by looking at it. + </p> + + <h5>... and why can't we use multi-dimensional input-model?</h5> + <p> + There's no doubt that I can add more codes to process multi-dimensional array into a flat array, + but that will add more complexities into the directive. Do me a favour - flatten the multi-dimensional + array into a flat array in your controller before you pass it into the input-model. Another reason is + that at the moment, AngularJs' <code>ng-repeat</code> has no standard way of looping over multi-dimensional + array. There are some hacks available, but again the extra complexities are not worth it. + </p> + + <h5>Why output-model is still an array of objects, even when there's only one item?</h5> + <p> + So that you don't need to write different logic to process the output data. Once an array, always an array (At least in multiple selection mode - + things might change in the single selection mode. I'll see how it goes along the way). + </p> + + <h5>It's very slow with 99999 selection items. It also shows memory leak symptoms.</h5> + <p> + This directive is a practical solution, not a performance champion. It will not win any coding competition. + Anyway, rest assured that I always try to optimize the code with every iteration. + </p> + + <h5>The directive is great, but it's not the "Angular way" (or whatever way).</h5> + <p> + Unfortunately this is a trade-off in order to achieve some of the functionalities. + My noob skill, as well as lack of proper development time is also a factor. + </p> + </div> +</div> + diff --git a/doc/views/getting-started.htm b/doc/views/getting-started.htm new file mode 100644 index 0000000..b6d424f --- /dev/null +++ b/doc/views/getting-started.htm @@ -0,0 +1,118 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Getting Started</h3> + + <h5>Include the required files</h5> + + <p>First things first:</p> + + <pre><code><!DOCTYPE html> +<html ng-app="myApp" id="myApp"> + <head> + ... + <link rel="stylesheet" href="isteven-multi-select.css"> + ... + <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script> + <script src="isteven-multi-select.js"></script> + ... + <head></code></pre> + + </div> +</div> + +<div class="row"> + <div class="col-sm-12"> + + <h5>Initiate your AngularJs app & load the module</h5> + + <p> + If you learn AngularJs from AngularJs' website, you should be familiar with this <code>app.js</code> + file, in which you initiate your AngularJs app. So let's put our directive module there and load it, such as: + </p> + + <pre><code>var myApp = angular.module( "myApp", [ "isteven-multi-select" ]);</code></pre> + + <h5>In your controller</h5> + + <p> + In your controller, define a <code>$scope</code> variable as the input-model. This is our "ng-model", + so to speak. + </p> + <p> + <span class="label label-primary">Note</span> The input-model has to be a one-dimensional (flat), array of objects. + </p> + + <pre><code>$scope.modernBrowsers = [ + { icon: "<img src=[..]/opera.png.. />", name: "Opera", maker: "(Opera Software)", ticked: true }, + { icon: "<img src=[..]/internet_explorer.png.. />", name: "Internet Explorer", maker: "(Microsoft)", ticked: false }, + { icon: "<img src=[..]/firefox-icon.png.. />", name: "Firefox", maker: "(Mozilla Foundation)", ticked: true }, + { icon: "<img src=[..]/safari_browser.png.. />", name: "Safari", maker: "(Apple)", ticked: false }, + { icon: "<img src=[..]/chrome.png.. />", name: "Chrome", maker: "(Google)", ticked: true } +]; </code></pre> + </div> +</div> + +<div class="row"> + <div class="col-sm-12"> + <h5>In your view</h5> + <p>Let's now define the directive with a minimum required configuration options.</p> + </div> +</div> + +<div class="row"> + <div class="col-sm-5"> + <p>As an attribute:</p> + + <pre><code><div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" +> +</div></code></pre> + + </div> + + <div class="col-sm-7"> + + <p>... or as an element, but be careful with browser compatibility.</p> + + <pre><code><isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" +> +</isteven-multi-select></code></pre> + + </div> +</div> + +<div class="row"> + <div class="col-sm-12"> + <p>By now you should now have dropdown button like the one you saw earlier on the front page.</p> + + <h5>Getting the selected items</h5> + + <p> + This should be obvious, but I got this question a lot, so: +<pre><code>angular.forEach( $scope.outputBrowsers, function( value, key ) { + /* do your stuff here */ +});</code></pre> +</p> + +<p>That's it! Go to the <a href="#/configs-options">Configs & Options</a> section to read more</p> + </div> +</div> + +<script> + $(document).ready(function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); +</script> diff --git a/doc/views/issues-bug-reporting.htm b/doc/views/issues-bug-reporting.htm new file mode 100644 index 0000000..3984092 --- /dev/null +++ b/doc/views/issues-bug-reporting.htm @@ -0,0 +1,33 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Issues & Bug Reporting</h3> + + Please follow these steps: + <ol> + <li> + <strong>READ THE MANUAL AGAIN</strong>. You might have missed something. This includes the MINIMUM ANGULARJS VERSION and the SUPPORTED BROWSERS. + </li> + <li> + The next step is to search in Github's <a href="https://github.com/isteven/angular-multi-select/issues">issue</a> + section first. There might already be an answer for similar issue. Do check both open and closed issues. + </li> + <li> + If there's no previous issue found, then please create a new issue in + <a href="https://github.com/isteven/angular-multi-select/issues">https://github.com/isteven/angular-multi-select/issues</a>. + </li> + <li> + <label class="label label-danger">Important</label> Please replicate + the problem in JSFiddle or Plunker (or any other online JS collaboration tool), and + include the URL in the issue you are creating. + </li> + <li> + <label class="label label-danger">Important</label> When you're done, please close the issue you've created. + </li> + </ol> + <p> + I usually close issues that have no further response within certain days. + </p> + </div> +</div> + diff --git a/doc/views/main.htm b/doc/views/main.htm new file mode 100644 index 0000000..baa3912 --- /dev/null +++ b/doc/views/main.htm @@ -0,0 +1,113 @@ +<div class="row"> + <div class="col-sm-12"> + <h3 class="pageHeading">AngularJs MultiSelect</h3> + </div> +</div> +<div class="row"> + <div class="col-sm-12"> + <p> + Pure AngularJS directive which creates a dropdown button with multiple or single selections. + Doesn't require jQuery and works well with other Javascript libraries. + </p> + <br /> + <div + isteven-multi-select + input-model="modernBrowsers" + output-model="anyOutput" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + > + </div> + <h5>Features</h5> + <ul> + <li> + Pure AngularJS. Can be easily combined with other Javascript libraries such as jQuery, Twitter Bootstrap, etc + <br />(With slight adjustments where necessary). + </li> + <li>Multiple or single selection types</li> + <li>Use HTML & CSS in your button & checkbox labels</li> + <li>Unlimited nested grouping</li> + <li>Keyboard navigation support</li> + <li>Event callbacks available</li> + <li>Configurable</li> + <li>i18n. Easily translated to different languages.</li> + </ul> + + <h5>Current version</h5> + <p>3.0.0</p> + + <h5>Changelog</h5> + <p> + See <a href="https://github.com/isteven/angular-multi-select/blob/master/CHANGELOG.md" target="_blank">CHANGELOG.md</a>. + For those who's upgrading from version 2.x.x, do note that this version is not backward-compatible. Please read this manual + thoroughly and update your code accordingly. Read the <a href="#/breaking-changes">breaking changes</a> to know more. + </p> + <h5>If you like this directive</h5> + <p> + Do consider "purchasing" it - basically making a donation. I am moving away from my full-time job soon, + and your support will greatly help me to keep this project alive. I use the "Buy Now" button instead + of usual "Donate" button because of PayPal's restriction. They now only allow registered charities + to use the "Donate" button. + </p> + <!-- + <p> + <a href="https://github.com/isteven/angular-multi-select" target="_blank" class="download" onclick="ga( 'send', 'event', 'button', 'click' );"> + <span class="fa fa-github fa-lg"> + </span> + View on Github + </a> + </p> + --> + + </div> +</div> +<div class="row"> + <div class="col-sm-12"> + <div style="display: inline-block;float: left; width: 140px;"> + <strong style="float: left; padding-top:5px;">$5 </strong> + <script async="async" src="js/libs/paypal-button.min.js?merchant=K2MZQDX6JG8H6" + data-button="buynow" + data-name="iSteven's AngularJs MultiSelect" + data-quantity="1" + data-amount="5" + data-currency="USD" + data-shipping="0" + data-tax="0" + ></script> + </div> + <div style="display: inline-block;"> + <strong style="float: left; padding-top:5px;">$10 </strong> + <script async="async" src="js/libs/paypal-button.min.js?merchant=K2MZQDX6JG8H6" + data-button="buynow" + data-name="iSteven's AngularJs MultiSelect" + data-quantity="1" + data-amount="10" + data-currency="USD" + data-shipping="0" + data-tax="0" + ></script> + </div> + </div> +</div> +<div class="row"> + <div class="col-sm-12"> + <h5>About this documentation</h5> + <p> + If you download the complete package, this web-based documentation can be found in the <code>/docs</code> folder of the master branch. + It's an AngularJs app itself, so it is suggested that you run it under a web server, such as your localhost. + </p> + </div> +</div> +<!-- +<a href="https://github.com/isteven/angular-multi-select"> + <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"> +</a> +--> +<script> + $(document).ready(function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); +</script> diff --git a/doc/views/mit-license.htm b/doc/views/mit-license.htm new file mode 100644 index 0000000..de443b5 --- /dev/null +++ b/doc/views/mit-license.htm @@ -0,0 +1,13 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">MIT License</h3> + + <p>The MIT License (MIT)</p> + <p>Copyright (c) 2014-2015 Ignatius Steven (https://github.com/isteven)</p> + <p>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:</p> + <p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p> + <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p> + </div> +</div> + diff --git a/doc/views/other-cool-stuffs.htm b/doc/views/other-cool-stuffs.htm new file mode 100644 index 0000000..b41b41c --- /dev/null +++ b/doc/views/other-cool-stuffs.htm @@ -0,0 +1,13 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Other Cool Stuffs</h3> + + Have a look on other directives I've created: + <ul> + <!-- <li><a href="https://github.com/isteven/angular-multi-select" target='_blank'>AngularJS Multi Select</a>: multi-select dropdown, able to use HTML in your data. Supports unlimited nested grouping.</li> --> + <li><a href="https://github.com/isteven/angular-omni-bar" target='_blank'>AngularJS Omni Bar</a>: multi purpose loading / progress bar.</li> + <li><a href="https://github.com/isteven/angular-route-rage" target='_blank'>AngularJS Route Rage</a>: use $routeParams parameters directly in your view.</li> + </ul> + </div> +</div> |