Skip to content

Add the function of tabindex with plain use of other button like Enter #568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add the function of tabindex with plain use of other button like Enter #568

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2ce9d1c
Add the function of tabindex with plain use of other button like Enter
chocobidou Feb 4, 2019
76af186
changement du nom du plugin pour publication sous bower
chocobidou Feb 4, 2019
dc61f3d
changement de la version en 4.1.0
chocobidou Feb 4, 2019
fcc7d8e
Update package.json
chocobidou Feb 4, 2019
506ca14
Update package.json
chocobidou Feb 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name" : "isteven-angular-multiselect",
"version" : "v4.0.0",
"name" : "choco-isteven-angular-multiselect",
"version" : "v4.1.0",
"main" : [
"isteven-multi-select.js",
"isteven-multi-select.css"
Expand Down
10 changes: 7 additions & 3 deletions doc/index.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<script src="highlight/highlight.pack.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/isteven-multi-select.js"></script>
<script src="js/libs/isteven-multi-select.js"></script>
<script src="js/libs/paypal-button.min.js"></script>

<script src="js/app.js"></script>
Expand All @@ -41,7 +41,8 @@
<script src="js/controllers/demo-disabling-enabling.js"></script>
<script src="js/controllers/demo-grouping.js"></script>
<script src="js/controllers/demo-callbacks.js"></script>
<script src="js/controllers/demo-single-selection-mode.js"></script>
<script src="js/controllers/demo-single-selection-mode.js"></script>
<script src="js/controllers/demo-tabindex.js"></script>

<script>
$("#menu-toggle").click(function(e) {
Expand Down Expand Up @@ -99,7 +100,10 @@ <h5>AngularJs MultiSelect &nbsp;&nbsp;<span class="fa fa-home"></span></h5>
</li>
<li class="subMenu">
<a href="#/demo-single-selection-mode">Single Selection Mode</a>
</li>
</li>
<li class="subMenu">
<a href="#/tab-index">Tabindex</a>
</li>
<li>
<a href="#/breaking-changes">Breaking Changes</a>
</li>
Expand Down
9 changes: 8 additions & 1 deletion doc/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,12 @@ var myApp = angular.module( 'myApp' , [
$routeProvider.when( '/demo-minimum' , {
templateUrl: 'views/demo-minimum.htm',
controller: 'demoMinimum'
});
});

$routeProvider.when( '/tab-index' , {
templateUrl: 'views/demo-tabindex.htm',
controller: 'demoTabindex'
});

$routeProvider.when( '/demo-horizontal-layout' , {
templateUrl: 'views/demo-horizontal-layout.htm',
Expand Down Expand Up @@ -92,6 +97,8 @@ var myApp = angular.module( 'myApp' , [
$routeProvider.when( '/other-cool-stuffs' , {
templateUrl: 'views/other-cool-stuffs.htm'
});




$routeProvider.otherwise( {
Expand Down
35 changes: 35 additions & 0 deletions doc/js/controllers/demo-tabindex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
myApp.controller( 'demoTabindex' , [ '$scope' , function ($scope) {

$scope.modernBrowsers = [
{
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
}
];
}]);
7 changes: 5 additions & 2 deletions doc/js/libs/isteven-multi-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect'

// settings based on attribute
isDisabled : '=',
tabindexglob : '=',

// callbacks
onClear : '&',
Expand Down Expand Up @@ -895,6 +896,7 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect'
$scope.groupProperty = attrs.groupProperty;
$scope.tickProperty = attrs.tickProperty;
$scope.directiveId = attrs.directiveId;
$scope.tabIndexGlob = attrs.tabindexglob;

// Unfortunately I need to add these grouping properties into the input model
var tempStr = genRandomString( 5 );
Expand Down Expand Up @@ -966,8 +968,8 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect'
$scope.icon.tickMark = $sce.trustAsHtml( $scope.icon.tickMark );

// min length of keyword to trigger the filter function
if ( typeof attrs.MinSearchLength !== 'undefined' && parseInt( attrs.MinSearchLength ) > 0 ) {
vMinSearchLength = Math.floor( parseInt( attrs.MinSearchLength ) );
if ( typeof attrs.minSearchLength !== 'undefined' && parseInt( attrs.minSearchLength ) > 0 ) {
vMinSearchLength = Math.floor( parseInt( attrs.minSearchLength ) );
}

/*******************************************************
Expand Down Expand Up @@ -1035,6 +1037,7 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect'
'ng-click="toggleCheckboxes( $event ); refreshSelectedItems(); refreshButton(); prepareGrouping; prepareIndex();"' +
'ng-bind-html="varButtonLabel"' +
'ng-disabled="disable-button"' +
'tabindex="{{tabIndexGlob}}"' +
'>' +
'</button>' +
// overlay layer
Expand Down
40 changes: 40 additions & 0 deletions doc/views/demo-tabindex.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<div class="row">
<div class="col-sm-12">

<h3 class="pageHeading">Demo > tabindex</h3>

<p>
Permit to use the tabindex attribute on the isteven-multi-select.
</p>

<br />

<input type="text" tabindex="1"></input>
<br />
<br />

<div
isteven-multi-select
input-model="modernBrowsers"
output-model="outputBrowsers"
button-label="icon name"
item-label="icon name maker"
tick-property="ticked"
tabIndexGlob="2"
>
</div>
<br />

<input type="text" tabindex="3"></div>


</div>
</div>

<script>
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
3 changes: 3 additions & 0 deletions isteven-multi-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect'

// settings based on attribute
isDisabled : '=',
tabindexglob : '=',

// callbacks
onClear : '&',
Expand Down Expand Up @@ -895,6 +896,7 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect'
$scope.groupProperty = attrs.groupProperty;
$scope.tickProperty = attrs.tickProperty;
$scope.directiveId = attrs.directiveId;
$scope.tabIndexGlob = attrs.tabindexglob;

// Unfortunately I need to add these grouping properties into the input model
var tempStr = genRandomString( 5 );
Expand Down Expand Up @@ -1035,6 +1037,7 @@ angular.module( 'isteven-multi-select', ['ng'] ).directive( 'istevenMultiSelect'
'ng-click="toggleCheckboxes( $event ); refreshSelectedItems(); refreshButton(); prepareGrouping; prepareIndex();"' +
'ng-bind-html="varButtonLabel"' +
'ng-disabled="disable-button"' +
'tabindex="{{tabIndexGlob}}"' +
'>' +
'</button>' +
// overlay layer
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "isteven-angular-multiselect",
"version": "v4.0.0",
"name": "choco-isteven-angular-multiselect",
"version": "v4.1.0",
"description": "A multi select dropdown directive for AngularJS",
"main": [
"isteven-multi-select.js",
Expand Down