Manage contribution suggestion using typehead.js library
This commit is contained in:
parent
996c19ba8f
commit
96ab0959b4
4 changed files with 1877 additions and 0 deletions
1782
inc/lib/typeahead.bundle.js
Normal file
1782
inc/lib/typeahead.bundle.js
Normal file
File diff suppressed because it is too large
Load diff
18
inc/myco.js
18
inc/myco.js
|
@ -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')[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();
|
||||
}
|
||||
|
||||
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() {
|
||||
$('#add_contribution_modal').data('group-uuid',$('#view-group').data('uuid'));
|
||||
$('#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('hidden.bs.modal',on_close_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);
|
||||
|
||||
|
|
|
@ -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
|
||||
*/
|
||||
|
|
46
index.html
46
index.html
|
@ -71,6 +71,51 @@ span.cat-color {
|
|||
list-style-type: none;
|
||||
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>
|
||||
<body>
|
||||
<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.date.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/myco_objects.js"></script>
|
||||
<script src="inc/myco_confirm.js"></script>
|
||||
|
|
Loading…
Reference in a new issue