accurator/commit
Improved listeners textfield, resolves #278
author | Chris Dijkshoorn |
---|---|
Mon Jun 20 13:28:54 2016 +0200 | |
committer | Chris Dijkshoorn |
Mon Jun 20 13:28:54 2016 +0200 | |
commit | 6dce9deadfcf5181d8b486f6ce01c014128c98a8 |
tree | 1e850e83a0ba03ad8a87c6a3c44a4afd1c47958e |
parent | a84dc799415f4a2e8f59cb0ebe113e5b0fc93670 |
Diff style: patch stat
diff --git a/rdf/ui/fields.ttl b/rdf/ui/fields.ttl index 9898a00..63fa989 100644 --- a/rdf/ui/fields.ttl +++ b/rdf/ui/fields.ttl @@ -16,13 +16,13 @@ aagen:genericUI a auis:AnnotationUI ; aagen:textFragment ) . -aagen:textWhole a auis:DropdownField ; +aagen:textWhole a auis:TextField ; rdfs:label "Description"@en ; rdfs:label "Beschrijving"@nl ; dcterms:comment "add description of artwork"@en ; dcterms:comment "beschrijf het kunstwerk"@nl . -aagen:textFragment a auis:DropdownField ; +aagen:textFragment a auis:TextField ; rdfs:label "Description"@en ; rdfs:label "Beschrijving"@nl ; dcterms:comment "add description of artwork fragment"@en ; diff --git a/web/js/components/field.js b/web/js/components/field.js index 2795429..ae53647 100644 --- a/web/js/components/field.js +++ b/web/js/components/field.js @@ -28,6 +28,12 @@ function Field(defenition, context) { moderating: 'http://www.w3.org/ns/oa#moderating', }; + if (this.showAnnotations) { + // Add div for annotations, existing annotations are retrieved upon init deniche + this.annotationList = new AnnotationList(this.id + "DivAnnotations"); + $(this.node).append(this.annotationList.node); + } + if (this.fragmentField) { this._anno = anno; // reference to annotatorious @@ -41,41 +47,6 @@ function Field(defenition, context) { anno.fields[this.imageId][this.fieldsId] = [this]; } } - this.initDropdown(); -} - -Field.prototype.initDropdown = function() { - var _field = this; //make sure we can use this Field in $ scope - this.node = this.dropdownField(); - - if (this.showAnnotations) { - // Add div for annotations, existing annotations are retrieved upon init deniche - this.annotationList = new AnnotationList(this.id + "DivAnnotations"); - $(this.node).append(this.annotationList.node); - } - - // four sitations for obtaining and adding alternatives array - if (!this.souce) { - // 0. only add listerens in case no source is specified - this.addDropdownListeners(); - } else if (this.source instanceof Array) { - // 1. source is an array containing alternatives for dropdown - this.alternatives = this.source; - this.addTypeAhead(); - this.addDropdownListeners(); - } else if (this.source.api === "/api/autocomplete/all") { - // 2. all alternatives should be obtained - this.getAllAlternatives() - .then(function(alternativesArray){ - _field.alternatives = alternativesArray; - _field.addTypeAhead(); - _field.addDropdownListeners(); - }); - } else if (this.source.api === "/api/autocomplete") { - // 3. event listener should be placed and alternatives are obtained on trigger - // this.addTypeAhead(); - this.addDropdownListeners(); - } } Field.prototype.submitAnnotation = function(motiv, target, body, label, graph) { @@ -161,6 +132,118 @@ Field.prototype.addAnnotationFragment = function(annotation, update) { this._anno._deniche.addAnnotation(torious, update); } +/******************************************************************************* +TextField +*******************************************************************************/ +function TextField (field, context) { + Field.call(this, field, context); + this.node = this.html(); + + this.addEventListeners(); +} + +TextField.prototype = Object.create(Field.prototype); // inherit + +TextField.prototype.html = function() { + return $.el.div({'class':'form-group'}, + $.el.label({'class':'itemLbl', + 'for':this.inputId}, + this.label), + $.el.input({'type':'text', + 'class':'form-control', + 'id':this.inputId, + 'placeholder':this.comment, + 'autocomplete':'off'}) + ); +} + +TextField.prototype.addEventListeners = function() { + var _field = this; //make sure we can use this Field in $ scope + var inputField = $(this.node).find("#" + this.inputId); // reach the input + + // prevent standard form submit + inputField.keydown(function(event){ + if(event.keyCode == 13) { + event.preventDefault(); + return false; + } + }); + + // action upon pressing enter + inputField.on('keyup', function(event) { + // check to see if there is a value on pressing enter + if (inputField.val() && event.which == 13) { + var annotation = inputField.val(); + + // console.log("SAVE: literal EVENT: keyup ANNOTATION: ", annotation); + _field.submitAnnotation( + _field.MOTIVATION.tagging, + _field.target, + {'@value':annotation}, + annotation + ); + + // clear input + inputField.val(''); + } + }); + + // action on pressing esc + inputField.on('keyup', function(event) { + if (_field.fragmentField && event.which == 27) { + _field._anno._deniche.onFragmentCancel(event); + } + }); +} + +/******************************************************************************* +DropdownField +*******************************************************************************/ +function DropdownField (field, context) { + Field.call(this, field, context); + this.initDropdown(); +} + +DropdownField.prototype = Object.create(Field.prototype); // inherit + +Field.prototype.dropdownField = function() { + // Return the form group + return $.el.div({'class':'form-group'}, + $.el.label({'class':'itemLbl', + 'for':this.inputId}, + this.label), + $.el.input({'type':'text', + 'class':'form-control typeahead', + 'id':this.inputId, + 'placeholder':this.comment})); +} + +Field.prototype.initDropdown = function() { + var _field = this; //make sure we can use this Field in $ scope + this.node = this.dropdownField(); + + // three sitations for obtaining and adding alternatives array + if (this.source instanceof Array) { + // 1. source is an array containing alternatives for dropdown + this.alternatives = this.source; + this.addTypeAhead(); + this.addDropdownListeners(); + } else if (this.source.api === "/api/autocomplete/all") { + // 2. all alternatives should be obtained + this.getAllAlternatives() + .then(function(alternativesArray){ + _field.alternatives = alternativesArray; + _field.addTypeAhead(); + _field.addDropdownListeners(); + }); + } else if (this.source.api === "/api/autocomplete") { + // 3. event listener should be placed and alternatives are obtained on trigger + // this.addTypeAhead(); + this.addDropdownListeners(); + } +} + + Field.prototype.addDropdownListeners = function() { var _field = this; //make sure we can use this Field in $ scope var inputField = $(this.node).find("#" + this.inputId); // reach the input @@ -291,133 +374,3 @@ Field.prototype.createSuggestionTemplate = function() { } } } - -Field.prototype.dropdownField = function() { - // Return the form group - return $.el.div({'class':'form-group'}, - $.el.label({'class':'itemLbl', - 'for':this.inputId}, - this.label), - $.el.input({'type':'text', - 'class':'form-control typeahead', - 'id':this.inputId, - 'placeholder':this.comment})); -} - -/******************************************************************************* -TypeAheadField -*******************************************************************************/ -function DropdownField (field, context) { - Field.call(this, field, context); -} - -DropdownField.prototype = Object.create(Field.prototype); // inherit - -/******************************************************************************* -TextField -*******************************************************************************/ -function TextField (field, context) { - Field.call(this, field, context); -} - -TextField.prototype = Object.create(Field.prototype); // inherit - -// function dropdownField(id, label, comment) { -// return $.el.div({'class':'form-group'}, -// $.el.label({'class':'itemLbl', -// 'for':'itemInp' + id, -// 'id':'itemLbl' + id}, -// label), -// $.el.input({'type':'text', -// 'class':'form-control typeahead', -// 'id':'itemInp' + id, -// 'placeholder':comment}) -// ); -// } - -// function selectField(id, label, comment, source) { -// return $.el.div({'class':'form-group'}, -// $.el.label({'class':'itemLbl', -// 'for':'itemInp' + id, -// 'id':'itemLbl' + id}, -// label), -// $.el.select({'class':'form-control', -// 'id':'itemSlt' + id, -// 'placeholder':comment}, -// options(source, id)) -// ); -// } -// -// function options(source, fieldId) { -// var options = []; -// var id = "itemOpt" + fieldId; -// -// for(var i=0; i<source.length; i++) -// options[i] = $.el.option(source[i]); -// return options; -// } -// -// -// -// -// -// function textField(id, label, comment) { -// return $.el.div({'class':'form-group'}, -// $.el.label({'class':'itemLbl', -// 'for':'itemInp' + id, -// 'id':'itemLbl' + id}, -// label), -// $.el.textarea({'type':'text', -// 'class':'form-control', -// 'id':'itemInp' + id, -// 'rows':'2', -// 'placeholder':comment}) -// ); -// } -// -// function radioButtonField(id, label, comment, source) { -// return $.el.div({'class':'form-group'}, -// $.el.label({'class':'itemLbl', -// 'for':'itemInp' + id, -// 'id':'itemLbl' + id}, -// label), -// buttons(source, id, "radio") -// ); -// } -// -// function checkBoxField(id, label, comment, source) { -// return $.el.div({'class':'form-group'}, -// $.el.label({'class':'itemLbl', -// 'for':'itemInp' + id, -// 'id':'itemLbl' + id}, -// label), -// buttons(source, id, "checkbox") -// ); -// } -// -// function buttons(source, fieldId, type) { -// var buttons = []; -// var id = ""; -// -// if(type === "radio") { -// id = "itemRbtn" + fieldId; -// } else if(type === "checkbox") { -// id = "itemChk" + fieldId; -// } -// var name = id + "options"; -// -// for(var i=0; i<source.length; i++){ -// buttons[i] = -// $.el.label({'class':type + '-inline'}, -// $.el.input({'type':type, -// 'id':id + i, -// 'value':source[i]} -// ), -// source[i] -// ); -// // Add name attribute if type radio -// if(type === "radio") -// $(buttons[i]).find("input").attr("name", name); -// } -// return buttons; -// }