clipperz/password-manager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added HTML native support for auto-completion in tag editor

Browse Source 
Not sure on which browser this feature is working; only tested in Chrome for Mac.
This commit is contained in:
Giulio Cesare Solaroli 2015-03-03 17:42:25 +01:00
parent 03ce1d3497
commit 2368d471e8
7 changed files with 53 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/delta/js/Clipperz/PM/UI/Components/Cards/Detail.js
View File

@ -25,6 +25,10 @@ Clipperz.Base.module('Clipperz.PM.UI.Components.Cards');
Clipperz.PM.UI.Components.Cards.Detail = React.createClass({
propTypes: {
'allTags': React.PropTypes.array,
},
viewComponentProps: function () {
var result;

12
frontend/delta/js/Clipperz/PM/UI/Components/Cards/Edit.js
View File

@ -29,6 +29,7 @@ Clipperz.PM.UI.Components.Cards.Edit = React.createClass({
//============================================================================
propTypes: {
'allTags': React.PropTypes.array,
// 'label': React.PropTypes.string /*.isRequired */ ,
// 'loading': React.PropTypes.bool,
},
@ -264,13 +265,12 @@ console.log("DROP"); //, anEvent);
//............................................................................
renderTags: function (someTags) {
var tags;
var allTags;
cleanupTags: function (someTags) {
return MochiKit.Base.filter(Clipperz.PM.DataModel.Record.isRegularTag, someTags).sort(Clipperz.Base.caseInsensitiveCompare);
},
tags = MochiKit.Base.filter(Clipperz.PM.DataModel.Record.isRegularTag, someTags).sort(Clipperz.Base.caseInsensitiveCompare);
allTags = tags;
return Clipperz.PM.UI.Components.Cards.TagEditor({'selectedTags':tags, 'allTags':allTags, 'readOnly':false });
renderTags: function (someTags) {
return Clipperz.PM.UI.Components.Cards.TagEditor({'selectedTags':this.cleanupTags(someTags), 'allTags':this.cleanupTags(this.props['allTags']), 'readOnly':false });
},
//............................................................................

38
frontend/delta/js/Clipperz/PM/UI/Components/Cards/TagEditor.js
View File

@ -43,8 +43,12 @@ Clipperz.PM.UI.Components.Cards.TagEditor = React.createClass({
//----------------------------------------------------------------------------
stillNotUsedTags: function () {
// return MochiKit.Base.filter(function, this.props['allTags']);
listOfTagsNotUsedYet: function () {
var selectedTags = this.props['selectedTags'];
//console.log("ALL TAGS", this.props['allTags']);
//console.log("SELECTED TAGS", this.props['selectedTags']);
return MochiKit.Base.filter(function (aTag) { return selectedTags.indexOf(aTag) == -1 }, this.props['allTags']);
// return this.props['allTags'];
},
//----------------------------------------------------------------------------
@ -67,24 +71,23 @@ Clipperz.PM.UI.Components.Cards.TagEditor = React.createClass({
//----------------------------------------------------------------------------
addTagValue: function (anEvent) {
this.addTag(anEvent.currentTarget.value);
anEvent.currentTarget.value = "";
},
handleKeyDown: function(anEvent) {
switch (anEvent.keyCode) {
case 9: // tab
console.log("TAB");
// if (anEvent.shiftKey || !this.state.isOpen) {
// return;
// }
// this.selectFocusedOption();
this.addTagValue(anEvent);
break;
case 13: // enter
console.log("ENTER");
this.addTag(anEvent.currentTarget.value);
anEvent.currentTarget.value = "";
// this.selectFocusedOption();
this.addTagValue(anEvent);
anEvent.preventDefault();
break;
/*
case 27: // escape
console.log("ESCAPE");
// if (this.state.isOpen) {
@ -104,10 +107,10 @@ Clipperz.PM.UI.Components.Cards.TagEditor = React.createClass({
// this.focusNextOption();
break;
default: return;
default:
return;
*/
}
anEvent.preventDefault();
},
//----------------------------------------------------------------------------
@ -120,7 +123,10 @@ Clipperz.PM.UI.Components.Cards.TagEditor = React.createClass({
},
renderEditField: function () {
return React.DOM.input({'type':'text', 'onKeyDown':this.handleKeyDown, 'placeholder': "tag"});
return [
React.DOM.input({'type':'text', 'list':'tagListData', 'onKeyDown':this.handleKeyDown, 'placeholder': "tag"}),
React.DOM.datalist({'id':'tagListData'}, MochiKit.Base.map(function (aTag) { return React.DOM.option({}, aTag); }, this.listOfTagsNotUsedYet()))
];
},
render: function () {

4
frontend/delta/js/Clipperz/PM/UI/Components/Pages/CardDetailPage.js
View File

@ -24,6 +24,10 @@ refer to http://www.clipperz.com.
Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
Clipperz.PM.UI.Components.Pages.CardDetailPage = React.createClass({
propTypes: {
'allTags': React.PropTypes.array,
},
/*
viewComponentProps: function () {
var result;

2
frontend/delta/js/Clipperz/PM/UI/Components/Pages/MainPage.js
View File

@ -33,6 +33,8 @@ Clipperz.PM.UI.Components.Pages.MainPage = React.createClass({
},
propTypes: {
'tags': React.PropTypes.object,
'allTags': React.PropTypes.array,
'messageBox': React.PropTypes.object.isRequired,
'featureSet': React.PropTypes.oneOf(['FULL', 'EXPIRED', 'TRIAL', 'OFFLINE']).isRequired,
'accountInfo': React.PropTypes.object.isRequired,

1
frontend/delta/js/Clipperz/PM/UI/Components/Panels/MainPanel.js
View File

@ -29,6 +29,7 @@ Clipperz.PM.UI.Components.Panels.MainPanel = React.createClass({
//=========================================================================
propTypes: {
'allTags': React.PropTypes.array,
'messageBox': React.PropTypes.object.isRequired,
'featureSet': React.PropTypes.oneOf(['FULL', 'EXPIRED', 'TRIAL', 'OFFLINE']).isRequired,
'style': React.PropTypes.oneOf(Clipperz_PM_UI_availableStyles).isRequired,

6
frontend/delta/js/Clipperz/PM/UI/MainController.js
View File

@ -242,10 +242,9 @@ console.log("THE BROWSER IS OFFLINE");
shouldShowRegistrationForm = parameters['shouldShowRegistrationForm'] && canRegisterNewUsers;
this.pages()['loginPage'].setProps({'mode':this.loginMode(), 'isNewUserRegistrationAvailable':canRegisterNewUsers});
this.showLoginForm();
if (shouldShowRegistrationForm) {
this.showRegistrationForm_handler();
} else {
this.showLoginForm();
}
// this.overlay().done("", 0.5);
@ -725,6 +724,9 @@ console.log("THE BROWSER IS OFFLINE");
// MochiKit.Base.method(this.user(), 'getTags', this.shouldIncludeArchivedCards()),
MochiKit.Base.method(this, 'allTags', this.shouldIncludeArchivedCards()),
MochiKit.Base.method(this, 'setPageProperties', 'mainPage', 'tags'),
MochiKit.Base.method(this, 'allTags', true || this.shouldIncludeArchivedCards()),
MochiKit.Base.keys,
MochiKit.Base.method(this, 'setPageProperties', 'mainPage', 'allTags'),
MochiKit.Base.method(this, 'getAllCardsCount'),
MochiKit.Base.method(this, 'setPageProperties', 'mainPage', 'allCardsCount'),
MochiKit.Base.method(this, 'getArchivedCardsCount'),