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').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);
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
*/
|
*/
|
||||||
|
|
46
index.html
46
index.html
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue