diff --git a/www/js/Application.js b/www/js/Application.js index 385e78c5..cf71ce30 100755 --- a/www/js/Application.js +++ b/www/js/Application.js @@ -446,10 +446,25 @@ define(function (require) { console.log("editTU"); // update the KB list, then show the view $.when(window.Application.kbList.fetch({reset: true, data: {projectid: id}})).done(function () { - var theTU = null; + var theTU = null, + bNewTU = false; // are we creating a new TU? if (id === "000") { - theTU = null; + // create a new / temporary TU to pass in to the TUView + // (this object isn't saved or added to the collection yet) + var newID = window.Application.generateUUID(), + curDate = new Date(), + timestamp = (curDate.getFullYear() + "-" + (curDate.getMonth() + 1) + "-" + curDate.getDay() + "T" + curDate.getUTCHours() + ":" + curDate.getUTCMinutes() + ":" + curDate.getUTCSeconds() + "z"), + theTU = new kbModels.TargetUnit({ + tuid: newID, + projectid: id, + source: "", + refstring: [], + timestamp: timestamp, + user: "", + isGloss: 0 + }); + bNewTU = true; } else { // show the selected TU var tu = window.Application.kbList.where({tuid: id}); @@ -458,9 +473,11 @@ define(function (require) { return; // don't do anything -- this TU is supposed to exist } theTU = tu[0]; + bNewTU = false; } showTransView = new SearchViews.TUView({model: theTU}); showTransView.spObj = null; // NO current sourcephrase (this is coming from the KB editor) + showTransView.bNewTU = bNewTU; // set the bNewTU flag as appropriate showTransView.delegateEvents(); window.Application.main.show(showTransView); }); diff --git a/www/js/views/SearchViews.js b/www/js/views/SearchViews.js index 58142fee..57fa26eb 100644 --- a/www/js/views/SearchViews.js +++ b/www/js/views/SearchViews.js @@ -92,6 +92,17 @@ define(function (require) { } else { console.log("addNewRS -- item already exists, no work to do"); } + // are we creating a new TU? + if (!$("#tbBottom").hasClass("hide")) { + // creating a new TU -- check to see if we have a source and at least 1 refstring + if (model.get("source").length > 0 && refstrings.length > 0) { + // we have both -- enable the OK button + $("#OK").prop("disabled", false); + } else { + // hmm... one of these failed; disable the OK button + $("#OK").prop("disabled", true); + } + } }, deleteSelectedDocs = function () { @@ -210,7 +221,7 @@ define(function (require) { rs = model.get("refstring"); if (rs.length > 1) { // multiple translations - give a count - lstTU += i18next.t("view.ttlTotalTranslations", {total: require.length}); + lstTU += i18next.t("view.ttlTotalTranslations", {total: rs.length}); } else if (rs.length === 1) { // exactly 1 translation - just display it lstTU += rs[0].target; @@ -361,10 +372,11 @@ define(function (require) { } }, events: { - "focus #tgtPhrase": "onFocusTarget", - "blur #tgtPhrase": "onBlurTarget", - "keydown #tgtphrase": "onEditTarget", - "click #btnUndo": "onUndoTarget", + "click #OK": "onOK", + "click #Cancel": "onCancel", + "focus #srcPhrase": "onFocusSource", + "keydown #srcPhrase": "onEditSource", + "blur #srcPhrase": "onBlurSource", "click #btnNewRS": "onNewRS", "click .topcoat-list__item": "onClickRefString", "keydown .refstring-list__item": "onEditRefString", @@ -376,20 +388,68 @@ define(function (require) { "click .btnSearch": "onClickSearch", "click .btnSearchItem": "onClickSearchItem" }, - onFocusTarget: function () { - // show the undo button, in case the user wants to revert + // User clicked the OK button (new TU). Save the TU and add it to our TUList + onOK: function () { + this.model.save(); + window.Application.kblist.add(this.model); + window.history.go(-1); }, - onEditTarget: function () { - // show the undo button, in case the user wants to revert + // User clicked the Cancel button (new TU). Delete the TU and return to the TU List page. + onCancel: function () { + this.model = null; + window.history.go(-1); + }, + // Focus set to the source edit field + onFocusSource: function () { + // reset the dirty bit -- that's all + this.bDirty = false; }, - onBlurTarget: function () { - // hide the undo button + // User typed something in the source text (new TU) + onEditSource: function (event) { + // pull out the text + var value = $("#srcPhrase").text(), + trimmedValue = value.trim(); + if (trimmedValue.length > 0) { + // there's something here -- enable the "add translation" button if needed + if ($("#btnNewRS").hasClass("filter-gray")) { + $("#btnNewRS").removeClass("filter-gray"); + $("#btnNewRS").addClass("filter-burnt-orange"); + } + } else { + // no "real" text - disable the "add translation" button if needed + if ($("#btnNewRS").hasClass("filter-burnt-orange")) { + $("#btnNewRS").removeClass("filter-burnt-orange"); + $("#btnNewRS").addClass("filter-gray"); + } + } + if ((event.keyCode === 9) || (event.keyCode === 13)) { + // tab or enter key -- blur focus + $("#srcPhrase").blur(); + } else { + // any other key -- set the dirty bit + this.bDirty = true; + } }, - onUndoTarget: function () { + // Focus moved from the srcPhrase edit field (probably new TU). If the trimmed text is non-empty, set the + // source for the current TU + onBlurSource: function () { + if (this.bDirty === true) { + // text changed in the source edit field -- if it's non-empty, update the source for the current TU + var value = $("#srcPhrase").text(), + trimmedValue = value.trim(); + if (trimmedValue.length > 0) { + this.model.set('source', trimmedValue, {silent: true}); + } + } + // reset the dirty bit + this.bDirty = false; }, // user clicked on the "new translation" button - prompt the user for a new translation string, // and then update the refstrings list if the user clicks OK onNewRS: function () { + if ($("#btnNewRS").hasClass("filter-gray")) { + return; // button is disabled - exit + } console.log("onNewRS - entry"); if (navigator.notification) { // on mobile device @@ -739,38 +799,6 @@ define(function (require) { // window.Application.router.navigate("adapt/" + cid, {trigger: true}); }, onShow: function () { - if (this.model === null) { - // this. - // no obj -- create a new TU - // // no entry in KB with this source -- add one - // var newID = window.Application.generateUUID(), - // newTU = new kbModels.TargetUnit({ - // tuid: newID, - // projectid: projectid, - // source: sourceValue, - // refstring: [ - // { - // target: targetValue, - // n: "1" - // } - // ], - // timestamp: timestamp, - // user: "", - // isGloss: isGloss - // }); - // kblist.add(newTU); - // newTU.save(); - - } - // do a fuzzy search on the TargetUnit's source (i.e., no punctuation) - this.spList.fetch({reset: true, data: {source: this.model.get("source")}}); - // also fill out the chapter list - window.Application.ChapterList.fetch({reset: true, data: {name: ""}}); - // fill current translation info - var srcLang = window.Application.currentProject.get('SourceLanguageName'); - var tgtLang = window.Application.currentProject.get('TargetLanguageName'); - $("#lblSourceLang").html(srcLang); - $("#lbltargetLang").html(tgtLang); // load the source / target punctuation pairs window.Application.currentProject.get('PunctPairs').forEach(function (elt, idx, array) { punctsSource.push(elt.s); @@ -781,6 +809,37 @@ define(function (require) { caseSource.push(elt.s); caseTarget.push(elt.t); }); + // load the chapter list + window.Application.ChapterList.fetch({reset: true, data: {name: ""}}); + // display the source and target language names + var srcLang = window.Application.currentProject.get('SourceLanguageName'); + var tgtLang = window.Application.currentProject.get('TargetLanguageName'); + $("#lblSourceLang").html(srcLang); + $("#lbltargetLang").html(tgtLang); + // is this a new TU? + if (this.bNewTU === true) { + var range = null, + selection = null; + // creating a new TU + $("#tbBottom").removeClass("hide"); // show the OK/Cancel button + // disable the OK button until the user adds a source AND target + $("#OK").prop('disabled', true); + // disable the "Add Translation" button until they type in a source + $("#btnNewRS").removeClass("filter-burnt-orange"); + $("#btnNewRS").addClass("filter-gray"); + // hide the current translation / target UI + $("#lblCurrentTrans").hide(); + $(".tgtbox").hide(); + // first item of business is adding the source phrase -- nudge the user there + $("#srcPhrase").prop('contenteditable', true); + $("#srcBox").attr("style", "background: #eee;"); // + $("#srcPhrase").attr("style", "display:block;") + $("#srcPhrase").focus(); + $("#srcPhrase").mouseup(); + return; // no further processing + } + // do a fuzzy search on the TargetUnit's source (i.e., no punctuation) + this.spList.fetch({reset: true, data: {source: this.model.get("source")}}); // source we're looking at $("#srcPhrase").html(this.model.get("source")); // are we looking at a current point in the translation, or just the possible TU refstrings? diff --git a/www/res/css/styles.css b/www/res/css/styles.css index ae7c4b51..fefaba5a 100755 --- a/www/res/css/styles.css +++ b/www/res/css/styles.css @@ -42,9 +42,12 @@ background-color: #b26200; color: white; } -.filter-burnt-orange { /* use CSS filter to turn black SVG images burnt orange */ +.filter-burnt-orange { /* CSS filter to display black as burnt orange */ filter: invert(28%) sepia(67%) saturate(2780%) hue-rotate(33deg) brightness(101%) contrast(101%); } +.filter-gray { /* CSS filter to display black as gray / disabled */ + filter: invert(62%) sepia(0%) saturate(268%) hue-rotate(139deg) brightness(98%) contrast(91%); +} .bg-darkdarkblue { background-color: #12536d; color: white; diff --git a/www/tpl/TargetUnit.html b/www/tpl/TargetUnit.html index 98c30a0c..967f4937 100644 --- a/www/tpl/TargetUnit.html +++ b/www/tpl/TargetUnit.html @@ -15,9 +15,9 @@
{{t 'view.lblCurrentTranslation'}}
-
-
- +
+
+
{{t 'view.lblAllTranslations'}} {{t 'view.lblFrequency'}}