From c0e4a7f3d5bf9d7346edc01308e82043ca10ee57 Mon Sep 17 00:00:00 2001 From: eb1 Date: Sat, 7 Sep 2019 15:15:11 -0500 Subject: [PATCH 1/5] Basic typeahead functionality. Just getting the display to work for testing purposes. --- www/js/views/ProjectViews.js | 54 +++++++++++++++++++++++++++--- www/tpl/ProjectSourceLanguage.html | 2 +- 2 files changed, 50 insertions(+), 6 deletions(-) diff --git a/www/js/views/ProjectViews.js b/www/js/views/ProjectViews.js index 0706ff99..6f6da184 100644 --- a/www/js/views/ProjectViews.js +++ b/www/js/views/ProjectViews.js @@ -9,6 +9,7 @@ define(function (require) { var $ = require('jquery'), Underscore = require('underscore'), + ta = require('typeahead'), Backbone = require('backbone'), Handlebars = require('handlebars'), Marionette = require('marionette'), @@ -43,6 +44,13 @@ define(function (require) { // Helper methods //// +// languageMatches = function(langs) { +// return function findMatches(query, callback) { +// var matches = langs.where({name: query}); +// callback(matches); +// }; +// }, + // Helper method that returns the RFC5646 code based on the ISO639 code and variant buildFullLanguageCode = function (langCode, langVariant) { var fullCode = ""; @@ -726,6 +734,16 @@ define(function (require) { // SourceLanguageView - view / edit the source language name and code, as well as // any variants. Also specify whether the language is LTR. SourceLanguageView = Marionette.CompositeView.extend({ + theLangs: null, + languageMatches: function(coll) { + return function findMatches(query, callback) { + coll.fetch({reset: true, data: {name: query}}); + var matches = coll.filter(function (item) { + return (item.attributes.Ref_Name.indexOf(query) !== -1); + }); + callback(matches); + }; + }, template: Handlebars.compile(tplSourceLanguage), childView: LanguagesListView, itemViewContainer: null, @@ -736,6 +754,33 @@ define(function (require) { onRender: function () { this.itemViewContainer = this.$('#name-suggestions'); }, + onShow: function () { + this.theLangs = new langs.LanguageCollection(); + this.theLangs.fetch({reset: true, data: {name: ""}}); + + $("#LanguageName").typeahead( + { + hint: true, + highlight: true, + minLength: 1, + limit: 10 + }, + { + name: 'languages', + source: this.languageMatches(this.theLangs), + templates: { + empty: ['
No languages found
'].join('\n'), + pending: ['
Searching...
'].join('\n'), + suggestion: function (data) { + if (data.attributes.Part1.length > 0) { + return '
(' + data.attributes.Part1 + ') ' + data.attributes.Ref_Name + '
'; + } else { + return '
(' + data.attributes.Id + ') ' + data.attributes.Ref_Name + '
'; + } + } + } + }); + }, events: { "keyup #SourceLanguageName": "search", "keypress #SourceLanguageName": "onkeypress" @@ -1046,13 +1091,13 @@ define(function (require) { switch (step) { case 1: // source language this.model.set("SourceLanguageName", currentView.langName, {silent: true}); - this.model.set("SourceLanguageCode", $("#LanguageCode").val.trim(), {silent: true}); + this.model.set("SourceLanguageCode", $("#LanguageCode").val().trim(), {silent: true}); this.model.set("SourceVariant", Handlebars.Utils.escapeExpression($('#LanguageVariant').val().trim()), {silent: true}); this.model.set("SourceDir", ($('#RTL').is(':checked') === true) ? "rtl" : "ltr", {silent: true}); break; case 2: // target language this.model.set("TargetLanguageName", currentView.langName, {silent: true}); - this.model.set("TargetLanguageCode", $("#LanguageCode").val.trim(), {silent: true}); + this.model.set("TargetLanguageCode", $("#LanguageCode").val().trim(), {silent: true}); this.model.set("TargetVariant", Handlebars.Utils.escapeExpression($('#LanguageVariant').val().trim()), {silent: true}); this.model.set("TargetDir", ($('#RTL').is(':checked') === true) ? "rtl" : "ltr", {silent: true}); this.model.set("name", i18n.t("view.lblSourceToTargetAdaptations", { @@ -1598,7 +1643,7 @@ define(function (require) { return false; } this.model.set("SourceLanguageName", currentView.langName, {silent: true}); - this.model.set("SourceLanguageCode", $("#LanguageCode").val.trim(), {silent: true}); + this.model.set("SourceLanguageCode", $("#LanguageCode").val().trim(), {silent: true}); this.model.set("SourceDir", ($('#RTL').is(':checked') === true) ? "rtl" : "ltr", {silent: true}); this.model.set("SourceVariant", $('#LanguageVariant').val().trim(), {silent: true}); break; @@ -1611,7 +1656,7 @@ define(function (require) { return false; } this.model.set("TargetLanguageName", currentView.langName, {silent: true}); - this.model.set("TargetLanguageCode", $("#LanguageCode").val.trim(), {silent: true}); + this.model.set("TargetLanguageCode", $("#LanguageCode").val().trim(), {silent: true}); this.model.set("TargetVariant", $('#LanguageVariant').val().trim(), {silent: true}); this.model.set("TargetDir", ($('#RTL').is(':checked') === true) ? "rtl" : "ltr", {silent: true}); // also set the ID and name of the project, now that we (should) have both source and target defined @@ -1661,7 +1706,6 @@ define(function (require) { ShowStep: function (number) { var totalSteps = 6; - var tmpCode = ""; var progressPct = ((number * 1.0 / totalSteps) * 100).toFixed(1); // clear out the old view (if any) currentView = null; diff --git a/www/tpl/ProjectSourceLanguage.html b/www/tpl/ProjectSourceLanguage.html index f919c914..61575030 100644 --- a/www/tpl/ProjectSourceLanguage.html +++ b/www/tpl/ProjectSourceLanguage.html @@ -1,5 +1,5 @@
-
+
From 6aa5c3b3feb4d4702c853c37eaade03346def19e Mon Sep 17 00:00:00 2001 From: eb1 Date: Mon, 9 Sep 2019 20:11:10 -0500 Subject: [PATCH 2/5] Work on #348 More typeahead functionality (not complete) --- www/js/views/ProjectViews.js | 188 ++++++++++------------------- www/res/css/styles.css | 9 ++ www/tpl/ProjectSourceLanguage.html | 4 +- www/tpl/ProjectTargetLanguage.html | 4 +- 4 files changed, 76 insertions(+), 129 deletions(-) diff --git a/www/js/views/ProjectViews.js b/www/js/views/ProjectViews.js index 6f6da184..27caa0ef 100644 --- a/www/js/views/ProjectViews.js +++ b/www/js/views/ProjectViews.js @@ -24,7 +24,6 @@ define(function (require) { tplSourceLanguage = require('text!tpl/ProjectSourceLanguage.html'), tplTargetLanguage = require('text!tpl/ProjectTargetLanguage.html'), tplUSFMFiltering = require('text!tpl/ProjectUSFMFiltering.html'), - tplLanguages = require('text!tpl/LanguagesList.html'), tplEditorPrefs = require('text!tpl/EditorPrefs.html'), i18n = require('i18n'), usfm = require('utils/usfm'), @@ -723,37 +722,22 @@ define(function (require) { return arr; } }), - - // LanguagesListView - displays a list of language codes / names matching - // a search criteria. Used as a child view of the SourceLanguageView and TargetLanguageView - // classes, defined below. - LanguagesListView = Marionette.ItemView.extend({ - template: Handlebars.compile(tplLanguages) - }), // SourceLanguageView - view / edit the source language name and code, as well as // any variants. Also specify whether the language is LTR. - SourceLanguageView = Marionette.CompositeView.extend({ + SourceLanguageView = Marionette.ItemView.extend({ theLangs: null, languageMatches: function(coll) { return function findMatches(query, callback) { - coll.fetch({reset: true, data: {name: query}}); + var theQuery = query.toLowerCase(); + coll.fetch({reset: true, data: {name: theQuery}}); var matches = coll.filter(function (item) { - return (item.attributes.Ref_Name.indexOf(query) !== -1); + return (item.attributes.Ref_Name.toLowerCase().indexOf(theQuery) !== -1); }); callback(matches); }; }, template: Handlebars.compile(tplSourceLanguage), - childView: LanguagesListView, - itemViewContainer: null, - attachBuffer: function (compositeView, buffer) { - var container = this.itemViewContainer; - container.append(buffer); - }, - onRender: function () { - this.itemViewContainer = this.$('#name-suggestions'); - }, onShow: function () { this.theLangs = new langs.LanguageCollection(); this.theLangs.fetch({reset: true, data: {name: ""}}); @@ -762,12 +746,12 @@ define(function (require) { { hint: true, highlight: true, - minLength: 1, - limit: 10 + minLength: 1 }, { name: 'languages', source: this.languageMatches(this.theLangs), + limit: 20, templates: { empty: ['
No languages found
'].join('\n'), pending: ['
Searching...
'].join('\n'), @@ -780,45 +764,50 @@ define(function (require) { } } }); - }, - events: { - "keyup #SourceLanguageName": "search", - "keypress #SourceLanguageName": "onkeypress" - }, - onSelectLanguage: function (event) { - // pull out the language - this.langName = $(event.currentTarget).html().substring($(event.currentTarget).html().indexOf(' ') + 6).trim(); - $("#langName").html(i18n.t('view.lblSourceLanguageName') + ": " + this.langName); - this.langCode = $(event.currentTarget).attr('id').trim(); - $("#langCode").html(i18n.t('view.lblCode') + ": " + this.langCode); - $("#LanguageName").val(this.langName); } }), // TargetLanguageView - view / edit the target language name and code, as well as // any variants. Also specify whether the language is LTR. - TargetLanguageView = Marionette.CompositeView.extend({ - template: Handlebars.compile(tplTargetLanguage), - childView: LanguagesListView, - itemViewContainer: null, - attachBuffer: function (compositeView, buffer) { - var container = this.itemViewContainer; - container.append(buffer); - }, - onRender: function () { - this.itemViewContainer = this.$('div#name-suggestions'); + TargetLanguageView = Marionette.ItemView.extend({ + theLangs: null, + languageMatches: function(coll) { + return function findMatches(query, callback) { + var theQuery = query.toLowerCase(); + coll.fetch({reset: true, data: {name: theQuery}}); + var matches = coll.filter(function (item) { + return (item.attributes.Ref_Name.toLowerCase().indexOf(theQuery) !== -1); + }); + callback(matches); + }; }, - events: { - "keyup #TargetLanguageName": "search", - "keypress #TargetLanguageName": "onkeypress" - }, - onSelectLanguage: function (event) { - // pull out the language - this.langName = $(event.currentTarget).html().substring($(event.currentTarget).html().indexOf(' ') + 6).trim(); - $("#langName").html(i18n.t('view.lblTargetLanguageName') + ": " + this.langName); - this.langCode = $(event.currentTarget).attr('id').trim(); - $("#langCode").html(i18n.t('view.lblCode') + ": " + this.langCode); - $("#LanguageName").val(this.langName); + template: Handlebars.compile(tplTargetLanguage), + onShow: function () { + this.theLangs = new langs.LanguageCollection(); + this.theLangs.fetch({reset: true, data: {name: ""}}); + + $("#LanguageName").typeahead( + { + hint: true, + highlight: true, + minLength: 1 + }, + { + name: 'languages', + source: this.languageMatches(this.theLangs), + limit: 20, + templates: { + empty: ['
No languages found
'].join('\n'), + pending: ['
Searching...
'].join('\n'), + suggestion: function (data) { + if (data.attributes.Part1.length > 0) { + return '
(' + data.attributes.Part1 + ') ' + data.attributes.Ref_Name + '
'; + } else { + return '
(' + data.attributes.Id + ') ' + data.attributes.Ref_Name + '
'; + } + } + } + }); } }), @@ -950,10 +939,10 @@ define(function (require) { "click #Punctuation": "OnEditPunctuation", "click #Cases": "OnEditCases", "click #Filtering": "OnEditFiltering", - "keyup #LanguageName": "searchLanguageName", - "keypress #LanguageName": "onkeypressLanguageName", "keyup #LanguageVariant": "onkeyupLanguageVariant", - "click .autocomplete-suggestion": "selectLanguage", + "typeahead:select .typeahead": "selectLanguage", + "typeahead:cursorchange .typeahead": "selectLanguage", + "typeahead:close .typeahead": "changeLanguage", "click .delete-row": "onClickDeleteRow", "keyup .new-row": "addNewRow", "click #CopyPunctuation": "OnClickCopyPunctuation", @@ -968,25 +957,6 @@ define(function (require) { step = 9; this.ShowView(step); }, - searchLanguageName: function () { - // pull out the value from the input field - var key = $('#LanguageName').val().trim(); - if (key.trim() === "") { - // Fix problem where an empty value returns all results. - // Here if there's no _real_ value, fetch nothing. - languages.fetch({reset: true, data: {name: " "}}); - this.$("#name-suggestions").hide(); - } else { - // find all matches in the language collection - languages.fetch({reset: true, data: {name: key}}); - this.$("#name-suggestions").show(); - } - // scroll the language search field to the top of the screen if necessary - window.Application.scrollIntoViewCenter($("#LanguageName")); -// $("#LanguageName")[0].scrollIntoView(true); -// $(".topcoat-list__header").html(i18n.t("view.lblPossibleLanguages")); -// console.log(key + ": " + languages.length + " results."); - }, onkeyupLanguageVariant: function () { var newLangCode = ""; newLangCode = buildFullLanguageCode(currentView.langCode, $('#LanguageVariant').val().trim().replace(/\s+/g, '')); @@ -996,25 +966,25 @@ define(function (require) { addNewRow: function (event) { currentView.addNewRow(event); }, - onkeypressLanguageName: function (event) { - this.$("#name-suggestions").show(); -// $(".topcoat-list__header").html(i18n.t("view.lblSearching")); - if (event.keycode === 13) { // enter key pressed - event.preventDefault(); - } - }, searchTarget: function (event) { currentView.search(event); }, onkeypressTargetName: function (event) { currentView.onkeypress(event); }, - selectLanguage: function (event) { - var newLangCode = ""; - currentView.onSelectLanguage(event); - newLangCode = buildFullLanguageCode(currentView.langCode, $('#LanguageVariant').val().trim().replace(/\s+/g, '')); - currentView.langCode = newLangCode; - $('#LanguageCode').val(newLangCode); + selectLanguage: function (event, suggestion) { + if (suggestion) { + var newLangCode = ""; + currentView.langName = suggestion.attributes.Ref_Name; + newLangCode = (suggestion.attributes.Part1.length > 0) ? suggestion.attributes.Part1 : suggestion.attributes.Id; + currentView.langCode = buildFullLanguageCode(newLangCode, $('#LanguageVariant').val().trim().replace(/\s+/g, '')); + $('#LanguageName').val(currentView.langName); + $('#LanguageCode').val(currentView.langCode); + } + }, + changeLanguage: function (event) { + console.log("changeLanguage"); + $('#LanguageName').val(currentView.langName); }, onClickDeleteRow: function (event) { currentView.onClickDeleteRow(event); @@ -1323,10 +1293,9 @@ define(function (require) { "click #targetFont": "OnEditTargetFont", "click #navFont": "OnEditNavFont", "focus #LanguageName": "onFocusLanguageName", - "keyup #LanguageName": "searchLanguageName", "keypress #LanguageName": "onkeypressLanguageName", "blur #LanguageName": "onBlurLanguageName", - "click .autocomplete-suggestion": "selectLanguage", + "typeahead:select .typeahead": "selectLanguage", "focus #LanguageVariant": "onFocusLanguageVariant", "click #LanguageVariant": "onClickLanguageVariant", "keyup #LanguageVariant": "onkeyupLanguageVariant", @@ -1364,32 +1333,6 @@ define(function (require) { ShowTinyUI(); }, - searchLanguageName: function () { - // pull out the value from the input field - var key = $('#LanguageName').val(); - if (key.trim() === "") { - // Fix problem where an empty value returns all results. - // Here if there's no _real_ value, fetch nothing. - languages.fetch({reset: true, data: {name: " "}}); - this.$("#name-suggestions").hide(); - } else { - // find all matches in the language collection - Underscore.first(languages.fetch({reset: true, data: {name: key}}), 100); - this.$("#name-suggestions").show(); - } - // scroll the language search field to the top of the screen if necessary - window.Application.scrollIntoViewCenter($("#LanguageName")); -// $("#LanguageName")[0].scrollIntoView(true); -// $(".topcoat-list__header").html(i18n.t("view.lblPossibleLanguages")); - }, - - onkeypressLanguageName: function (event) { - this.$("#name-suggestions").show(); -// $(".topcoat-list__header").html(i18n.t("view.lblSearching")); - if (event.keycode === 13) { // enter key pressed - event.preventDefault(); - } - }, onClickLanguageVariant: function (event) { // scroll up if there's not enough room for the keyboard if (($(window).height() - $(".StepContainer").height()) < 300) { @@ -1412,12 +1355,11 @@ define(function (require) { onkeypressTargetName: function (event) { currentView.onkeypress(event); }, - selectLanguage: function (event) { + selectLanguage: function (event, suggestion) { var newLangCode = ""; - currentView.onSelectLanguage(event); - this.$("#name-suggestions").hide(); newLangCode = buildFullLanguageCode(currentView.langCode, $('#LanguageVariant').val().trim().replace(/\s+/g, '')); currentView.langCode = newLangCode; + currentView.langName = "something"; $('#LanguageCode').val(newLangCode); }, onClickDeleteRow: function (event) { @@ -1723,8 +1665,6 @@ define(function (require) { this.$("#StepTitle").html(i18n.t('view.lblCreateProject')); // instructions this.$("#StepInstructions").html(i18n.t('view.dscProjectSourceLanguage')); - // controls - this.$("#name-suggestions").hide(); // first step -- disable the prev button this.$("#Prev").attr('disabled', 'true'); this.$("#lblPrev").html(i18n.t('view.lblPrev')); @@ -1749,7 +1689,6 @@ define(function (require) { this.$("#RTL").checked = true; } this.$("#LanguageVariant").html(this.model.get("TargetVariant")); - this.$("#name-suggestions").hide(); this.$("#Prev").removeAttr('disabled'); break; case 3: // fonts @@ -1804,7 +1743,6 @@ define(function (require) { PunctuationView: PunctuationView, SourceLanguageView: SourceLanguageView, TargetLanguageView: TargetLanguageView, - LanguagesListView: LanguagesListView, USFMFilteringView: USFMFilteringView }; }); diff --git a/www/res/css/styles.css b/www/res/css/styles.css index 82c932da..6d5d6abf 100755 --- a/www/res/css/styles.css +++ b/www/res/css/styles.css @@ -1272,6 +1272,15 @@ typeahead styles min-width: 1rem; } +.full .twitter-typeahead { + width:100%; +} + +#scrollable-dropdown-menu .tt-menu { + max-height: 175px; + overflow-y: auto; +} + .tt-menu { background-color: #fff; border: 1px solid #ccc; diff --git a/www/tpl/ProjectSourceLanguage.html b/www/tpl/ProjectSourceLanguage.html index 61575030..ac0e4a68 100644 --- a/www/tpl/ProjectSourceLanguage.html +++ b/www/tpl/ProjectSourceLanguage.html @@ -1,6 +1,6 @@
-
- +
+
diff --git a/www/tpl/ProjectTargetLanguage.html b/www/tpl/ProjectTargetLanguage.html index df60e947..3c35e606 100644 --- a/www/tpl/ProjectTargetLanguage.html +++ b/www/tpl/ProjectTargetLanguage.html @@ -1,6 +1,6 @@
-
- +
+
From d0c0b50d031d797d4c1ab50ce2cbd8dd59d46243 Mon Sep 17 00:00:00 2001 From: eb1 Date: Mon, 9 Sep 2019 21:40:37 -0500 Subject: [PATCH 3/5] More work on #348 typeahead display controls what gets placed in the field when selected. --- www/js/views/ProjectViews.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/www/js/views/ProjectViews.js b/www/js/views/ProjectViews.js index 27caa0ef..01a58a7a 100644 --- a/www/js/views/ProjectViews.js +++ b/www/js/views/ProjectViews.js @@ -750,6 +750,9 @@ define(function (require) { }, { name: 'languages', + display: function (data) { + return data.attributes.Ref_Name; + }, source: this.languageMatches(this.theLangs), limit: 20, templates: { @@ -794,6 +797,9 @@ define(function (require) { }, { name: 'languages', + display: function (data) { + return data.attributes.Ref_Name; + }, source: this.languageMatches(this.theLangs), limit: 20, templates: { @@ -942,7 +948,6 @@ define(function (require) { "keyup #LanguageVariant": "onkeyupLanguageVariant", "typeahead:select .typeahead": "selectLanguage", "typeahead:cursorchange .typeahead": "selectLanguage", - "typeahead:close .typeahead": "changeLanguage", "click .delete-row": "onClickDeleteRow", "keyup .new-row": "addNewRow", "click #CopyPunctuation": "OnClickCopyPunctuation", @@ -978,14 +983,9 @@ define(function (require) { currentView.langName = suggestion.attributes.Ref_Name; newLangCode = (suggestion.attributes.Part1.length > 0) ? suggestion.attributes.Part1 : suggestion.attributes.Id; currentView.langCode = buildFullLanguageCode(newLangCode, $('#LanguageVariant').val().trim().replace(/\s+/g, '')); - $('#LanguageName').val(currentView.langName); $('#LanguageCode').val(currentView.langCode); } }, - changeLanguage: function (event) { - console.log("changeLanguage"); - $('#LanguageName').val(currentView.langName); - }, onClickDeleteRow: function (event) { currentView.onClickDeleteRow(event); }, From fd2fb78f4f2d4f7e1aeda77f13d52e0b1fcc7633 Mon Sep 17 00:00:00 2001 From: eb1 Date: Tue, 10 Sep 2019 13:57:05 -0500 Subject: [PATCH 4/5] Fix #348 Use typeahead dropdown in source and target language edit fields (new project wizard and edit project screens). --- www/js/views/ProjectViews.js | 73 +++++++++++++++--------------- www/tpl/ProjectSourceLanguage.html | 2 +- www/tpl/ProjectTargetLanguage.html | 2 +- 3 files changed, 38 insertions(+), 39 deletions(-) diff --git a/www/js/views/ProjectViews.js b/www/js/views/ProjectViews.js index 01a58a7a..5abc8ba8 100644 --- a/www/js/views/ProjectViews.js +++ b/www/js/views/ProjectViews.js @@ -109,13 +109,13 @@ define(function (require) { // Helper to import the KB file associated with the specified project // (overriding any existing KB). This gets called from both mobileImportAIC // and browserImportAIC - importKBFile = function (file, project) { - var reader = new FileReader(); - reader.onloadend = function (evt) { - - }; - reader.readAsText(file, "UTF-8"); - }, +// importKBFile = function (file, project) { +// var reader = new FileReader(); +// reader.onloadend = function (evt) { +// +// }; +// reader.readAsText(file, "UTF-8"); +// }, // Helper to import the selected file into the specified // project object (overridding any existing values). This gets called @@ -945,7 +945,10 @@ define(function (require) { "click #Punctuation": "OnEditPunctuation", "click #Cases": "OnEditCases", "click #Filtering": "OnEditFiltering", + "focus #LanguageName": "onFocusLanguageName", + "focus #LanguageVariant": "onFocusLanguageVariant", "keyup #LanguageVariant": "onkeyupLanguageVariant", + "focus #LanguageCode": "onFocusLanguageCode", "typeahead:select .typeahead": "selectLanguage", "typeahead:cursorchange .typeahead": "selectLanguage", "click .delete-row": "onClickDeleteRow", @@ -962,6 +965,18 @@ define(function (require) { step = 9; this.ShowView(step); }, + onFocusLanguageName: function (event) { + window.Application.scrollIntoViewCenter(event.currentTarget); + }, + + onFocusLanguageVariant: function (event) { + window.Application.scrollIntoViewCenter(event.currentTarget); + }, + + onFocusLanguageCode: function (event) { + window.Application.scrollIntoViewCenter(event.currentTarget); + }, + onkeyupLanguageVariant: function () { var newLangCode = ""; newLangCode = buildFullLanguageCode(currentView.langCode, $('#LanguageVariant').val().trim().replace(/\s+/g, '')); @@ -1282,9 +1297,11 @@ define(function (require) { render: function () { template = Handlebars.compile(tplNewProject); this.$el.html(template()); - this.ShowStep(step); return this; }, + onShow: function () { + this.ShowStep(step); + }, //// // Event Handlers //// @@ -1293,12 +1310,12 @@ define(function (require) { "click #targetFont": "OnEditTargetFont", "click #navFont": "OnEditNavFont", "focus #LanguageName": "onFocusLanguageName", - "keypress #LanguageName": "onkeypressLanguageName", "blur #LanguageName": "onBlurLanguageName", "typeahead:select .typeahead": "selectLanguage", + "typeahead:cursorchange .typeahead": "selectLanguage", "focus #LanguageVariant": "onFocusLanguageVariant", - "click #LanguageVariant": "onClickLanguageVariant", "keyup #LanguageVariant": "onkeyupLanguageVariant", + "focus #LanguageCode": "onFocusLanguageCode", "blur #LanguageVariant": "onBlurLanguageVariant", "click #btnLangAdvanced": "onClickLanguageAdvanced", "click .delete-row": "onClickDeleteRow", @@ -1314,35 +1331,17 @@ define(function (require) { }, onFocusLanguageName: function (event) { - HideTinyUI(); window.Application.scrollIntoViewCenter(event.currentTarget); -// $("#LanguageName")[0].scrollIntoView(true); }, - onBlurLanguageName: function () { - ShowTinyUI(); - }, - onFocusLanguageVariant: function (event) { - HideTinyUI(); window.Application.scrollIntoViewCenter(event.currentTarget); -// $("#LanguageVariant")[0].scrollIntoView(true); }, - onBlurLanguageVariant: function () { - ShowTinyUI(); + onFocusLanguageCode: function (event) { + window.Application.scrollIntoViewCenter(event.currentTarget); }, - onClickLanguageVariant: function (event) { - // scroll up if there's not enough room for the keyboard - if (($(window).height() - $(".StepContainer").height()) < 300) { - var top = event.currentTarget.offsetTop - $("#LanguageVariant").outerHeight(); - $("#LanguageVariant").scrollTop(top); - } - }, - onClickLanguageAdvanced: function () { - - }, onkeyupLanguageVariant: function () { var newLangCode = ""; newLangCode = buildFullLanguageCode(currentView.langCode, $('#LanguageVariant').val().trim().replace(/\s+/g, '')); @@ -1356,11 +1355,13 @@ define(function (require) { currentView.onkeypress(event); }, selectLanguage: function (event, suggestion) { - var newLangCode = ""; - newLangCode = buildFullLanguageCode(currentView.langCode, $('#LanguageVariant').val().trim().replace(/\s+/g, '')); - currentView.langCode = newLangCode; - currentView.langName = "something"; - $('#LanguageCode').val(newLangCode); + if (suggestion) { + var newLangCode = ""; + currentView.langName = suggestion.attributes.Ref_Name; + newLangCode = (suggestion.attributes.Part1.length > 0) ? suggestion.attributes.Part1 : suggestion.attributes.Id; + currentView.langCode = buildFullLanguageCode(newLangCode, $('#LanguageVariant').val().trim().replace(/\s+/g, '')); + $('#LanguageCode').val(currentView.langCode); + } }, onClickDeleteRow: function (event) { currentView.onClickDeleteRow(event); @@ -1480,7 +1481,6 @@ define(function (require) { if (step > 1) { step--; } - ShowTinyUI(); this.ShowStep(step); } }, @@ -1490,7 +1490,6 @@ define(function (require) { if (this.GetProjectInfo(step) === true) { if (step < this.numSteps) { step++; - ShowTinyUI(); this.ShowStep(step); } else { // last step -- finish up diff --git a/www/tpl/ProjectSourceLanguage.html b/www/tpl/ProjectSourceLanguage.html index ac0e4a68..30d72547 100644 --- a/www/tpl/ProjectSourceLanguage.html +++ b/www/tpl/ProjectSourceLanguage.html @@ -2,7 +2,7 @@
-
+
diff --git a/www/tpl/ProjectTargetLanguage.html b/www/tpl/ProjectTargetLanguage.html index 3c35e606..54577923 100644 --- a/www/tpl/ProjectTargetLanguage.html +++ b/www/tpl/ProjectTargetLanguage.html @@ -2,7 +2,7 @@
-
+
From 59fb64c41fa7b8028cb2bec071329582f93a4a1b Mon Sep 17 00:00:00 2001 From: eb1 Date: Tue, 10 Sep 2019 15:42:27 -0500 Subject: [PATCH 5/5] Fix robustness issue with language name If the user happens to set and then clear the language name (via selection change), they can continue on to the next step. Changed this so that the language name and code are cleared out when the user sets/clears the language name -- this causes validation to fail. --- www/js/views/ProjectViews.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/www/js/views/ProjectViews.js b/www/js/views/ProjectViews.js index 5abc8ba8..8922153b 100644 --- a/www/js/views/ProjectViews.js +++ b/www/js/views/ProjectViews.js @@ -999,6 +999,11 @@ define(function (require) { newLangCode = (suggestion.attributes.Part1.length > 0) ? suggestion.attributes.Part1 : suggestion.attributes.Id; currentView.langCode = buildFullLanguageCode(newLangCode, $('#LanguageVariant').val().trim().replace(/\s+/g, '')); $('#LanguageCode').val(currentView.langCode); + } else { + // no suggestion passed -- clear out the language name and code + currentView.langName = ""; + currentView.langCode = ""; + $('#LanguageCode').val(currentView.langCode); } }, onClickDeleteRow: function (event) { @@ -1361,6 +1366,11 @@ define(function (require) { newLangCode = (suggestion.attributes.Part1.length > 0) ? suggestion.attributes.Part1 : suggestion.attributes.Id; currentView.langCode = buildFullLanguageCode(newLangCode, $('#LanguageVariant').val().trim().replace(/\s+/g, '')); $('#LanguageCode').val(currentView.langCode); + } else { + // no suggestion passed -- clear out the language name and code + currentView.langName = ""; + currentView.langCode = ""; + $('#LanguageCode').val(currentView.langCode); } }, onClickDeleteRow: function (event) {