Manage contribution suggestion using typehead.js library

This commit is contained in:
Benjamin Renard 2014-07-20 17:04:14 +02:00
parent 996c19ba8f
commit 96ab0959b4
4 changed files with 1877 additions and 0 deletions

1782
inc/lib/typeahead.bundle.js Normal file

File diff suppressed because it is too large Load diff

View file

@ -399,9 +399,26 @@ on_show_add_contribution_modal=function(e) {
} }
$('#add_contribution_modal #add_contribution_category').html(cats); $('#add_contribution_modal #add_contribution_category').html(cats);
$('#add_contribution_modal #add_contribution_category')[0].value=current_cat; $('#add_contribution_modal #add_contribution_category')[0].value=current_cat;
$('#add_contribution_modal #add_contribution_title').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'titles',
displayKey: 'value',
source: group.findContributionByTitleMatches()
});
$('#add_contribution_modal #add_contribution_title').focus(); $('#add_contribution_modal #add_contribution_title').focus();
} }
on_select_contribution_suggestion=function(event,choice,name) {
if (jQuery.type(choice['category'])=='string') {
$('#add_contribution_modal #add_contribution_category')[0].value=choice['category'];
}
}
on_click_add_contribution_btn=function() { on_click_add_contribution_btn=function() {
$('#add_contribution_modal').data('group-uuid',$('#view-group').data('uuid')); $('#add_contribution_modal').data('group-uuid',$('#view-group').data('uuid'));
$('#add_contribution_modal #edit_uuid')[0].value='-1'; $('#add_contribution_modal #edit_uuid')[0].value='-1';
@ -828,6 +845,7 @@ $( document ).ready( function() {
$("#add_contribution_modal").on('shown.bs.modal',on_show_add_contribution_modal); $("#add_contribution_modal").on('shown.bs.modal',on_show_add_contribution_modal);
$("#add_contribution_modal").on('hidden.bs.modal',on_close_add_contribution_modal); $("#add_contribution_modal").on('hidden.bs.modal',on_close_add_contribution_modal);
$("#add_contribution_modal form").on('submit',on_valid_add_contribution_modal); $("#add_contribution_modal form").on('submit',on_valid_add_contribution_modal);
$('#add_contribution_modal #add_contribution_title').on('typeahead:selected', on_select_contribution_suggestion);
$("#display_balance_btn").bind('click',on_display_balance_btn_click); $("#display_balance_btn").bind('click',on_display_balance_btn_click);

View file

@ -306,6 +306,37 @@ function Group(uuid,name,data) {
); );
} }
this.findContributionByTitleMatches=function() {
var contributions=this.contributions;
return function(q, cb) {
var matches, substrRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
var titles=[];
for (uuid in contributions) {
if (substrRegex.test(contributions[uuid].title)) {
var title=String(contributions[uuid].title).replace(/^\s+|\s+$/g, '');
if (titles.indexOf(title.toLowerCase())!=-1) {
continue;
}
titles.push(title.toLowerCase());
matches.push({
value: title,
category: contributions[uuid].category
});
}
}
cb(matches);
};
}
/* /*
* Categories * Categories
*/ */

View file

@ -71,6 +71,51 @@ span.cat-color {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
/*
* Typehead
*/
.tt-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
.tt-suggestion > p {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: nowrap;
}
.tt-suggestion > p:hover,
.tt-suggestion > p:focus,
.tt-suggestion.tt-cursor p {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #428bca;
}
.twitter-typeahead, .tt-hint {
width: 100%;
}
</style> </style>
<body> <body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
@ -569,6 +614,7 @@ span.cat-color {
<script src="inc/lib/pickadate/picker.js"></script> <script src="inc/lib/pickadate/picker.js"></script>
<script src="inc/lib/pickadate/picker.date.js"></script> <script src="inc/lib/pickadate/picker.date.js"></script>
<script src="inc/lib/pickadate/legacy.js"></script> <script src="inc/lib/pickadate/legacy.js"></script>
<script src="inc/lib/typeahead.bundle.js"></script>
<script src="inc/lib/uuid.js"></script> <script src="inc/lib/uuid.js"></script>
<script src="inc/myco_objects.js"></script> <script src="inc/myco_objects.js"></script>
<script src="inc/myco_confirm.js"></script> <script src="inc/myco_confirm.js"></script>