Skip to content

C
clinicaltrials
Commit f3ff539b authored by Romain Loth's avatar Romain Loth
Browse files
Options

hashtags as multi text input + fixResidue on reg like profile

parent 45882952
Hide whitespace changes
Inline Side-by-side
Showing with 74 additions and 56 deletions
static/js/comex_page_profile_controllers.js
View file @ f3ff539b
......@@ -46,6 +46,7 @@ cmxClt.uform.initialize("comex_profile_form", completionAsYouGo)
// activate multiTextinput
cmxClt.uform.multiTextinput('keywords', uinfo.keywords)
cmxClt.uform.multiTextinput('hashtags', uinfo.hashtags, "#23A")
var deleteUser = document.getElementById('delete_user')
deleteUser.checked = false
......
static/js/comex_page_reg_controllers.js
View file @ f3ff539b
......@@ -30,6 +30,7 @@ var validateWithMessage = false
// activate multiTextinput
cmxClt.uform.multiTextinput('keywords')
cmxClt.uform.multiTextinput('hashtags', [], "#23A")
var shortRegVersion = true
......@@ -44,7 +45,10 @@ function testAsYouGo() {
cmxClt.uauth.earlyValidate()
if (validateWithMessage) {
cmxClt.uform.simpleValidateAndMessage({'ignore':ignoredFields})
cmxClt.uform.simpleValidateAndMessage({'ignore':ignoredFields, 'fixResidue':true})
// NB fixResidue is useful when user has a problem
// on submit then clicks "back" and ends up with
// hashtags in brackets like "['#a','#b']"
}
cmxClt.uform.checkJobDateStatus()
......
static/js/comex_user_shared.js
View file @ f3ff539b
......@@ -38,6 +38,8 @@ var cmxClt = (function() {
cC.COLS = [
["keywords", true, "plsfill", "at", "map_infos"],
// ==> *keywords* table
["hashtags", false, "plsfill", "at", "map_infos"],
// ==> *hashtags* table
["doors_uid", true, "auto" , "t", null],
["last_modified_date", true, "auto" , "d", null],
......@@ -50,7 +52,6 @@ var cmxClt = (function() {
["initials", true, "pref", "t", null],
["position", true, "plsfill", "t", "map_infos"],
["interests_text", false, "pref", "t", "other_infos"],
["hashtags", false, "plsfill", "at", "map_infos"],
["gender", false, "plsfill", "m", "other_infos"],
["job_looking_date", false, "pref" , "d", "map_infos"],
["home_url", false, "plsfill", "t", "other_infos"],
......@@ -165,7 +166,7 @@ var cmxClt = (function() {
// => validate words become removable "pills"
// => result is concatenated texts in hidden input.#fName
// TODO finalize and add to initialize
cC.uform.multiTextinput = function (fName, perhapsPreviousValues) {
cC.uform.multiTextinput = function (fName, perhapsPreviousValues, perhapsColor) {
// HTML elt to insert tag boxes around
var refElt = null
......@@ -192,56 +193,66 @@ var cmxClt = (function() {
// debug
// console.log ('poptagbox from event' + event.type)
var newValue = normalInput.value
if (newValue != '') {
var newBox = document.createElement('div')
var asIsValue = normalInput.value
if (asIsValue != '') {
// maybe several values from cache (comma is reserved as separator)
var subValues = asIsValue.split(/,/)
for (var i in subValues) {
var newValue = subValues[i]
// "let" so that it's unique for each i
// (this unique pointer is useful in newBoxClose)
let newBox = document.createElement('div')
// move the value
normalInput.value = ''
newBox.textContent = newValue
// and save it
var nSaved = cC.uform.mtiStock[fName].push(newValue)
// create a close elt for the box
var newBoxClose = document.createElement('div')
newBoxClose.classList.add('box-highlight-close')
newBoxClose.classList.add('operation')
newBoxClose.innerHTML = '<span class="glyphicon glyphicon-remove"></span>'
var closeBox = function() {
// start transition
newBox.style.opacity = 0
// remove value from stock
var i = 0
for (i in cC.uform.mtiStock[fName]){
if (cC.uform.mtiStock[fName][i] == newValue) {
break ;
}
}
cC.uform.mtiStock[fName].splice(i, 1)
// move the value
normalInput.value = ''
newBox.textContent = newValue
// signal form change
cC.uform.theForm.dispatchEvent(new CustomEvent('change'))
// and save it
var nSaved = cC.uform.mtiStock[fName].push(newValue)
// remove box
setTimeout(function(){newBox.style.display = 'none'}, 300)
// console.debug("droptagbox", cC.uform.mtiStock[fName].length, cC.uform.mtiStock[fName])
}
// create a close elt for the box
var newBoxClose = document.createElement('div')
newBoxClose.classList.add('box-highlight-close')
newBoxClose.classList.add('operation')
newBoxClose.innerHTML = '<span class="glyphicon glyphicon-remove"></span>'
newBoxClose.onclick = closeBox
newBox.insertBefore(newBoxClose, newBox.firstChild)
var closeBox = function() {
// start transition
newBox.style.opacity = 0
// remove value from stock
var i = 0
for (i in cC.uform.mtiStock[fName]){
if (cC.uform.mtiStock[fName][i] == newValue) {
break ;
}
// show the box
newBox.classList.add("box-highlight")
if (perhapsColor) {
newBox.style.backgroundColor = perhapsColor
}
cC.uform.mtiStock[fName].splice(i, 1)
cC.insertAfter(refElt, newBox)
// signal form change
cC.uform.theForm.dispatchEvent(new CustomEvent('change'))
// remove box
setTimeout(function(){newBox.style.display = 'none'}, 300)
console.log("droptagbox", cC.uform.mtiStock[fName].length, cC.uform.mtiStock[fName])
// console.debug("poptagbox", cC.uform.mtiStock[fName].length, cC.uform.mtiStock[fName])
}
newBoxClose.onclick = closeBox
newBox.insertBefore(newBoxClose, newBox.firstChild)
// show the box
newBox.classList.add("box-highlight")
cC.insertAfter(refElt, newBox)
console.log("poptagbox", cC.uform.mtiStock[fName].length, cC.uform.mtiStock[fName])
}
}
......
templates/profile.html
View file @ f3ff539b
......@@ -317,13 +317,14 @@
</div>
<div class="question">
<div class="input-group">
<p class="legend">Hashtags for community interest groups (seminars, mailing lists, events...)</p>
<div class="input-group tagbox-container">
<label for="hashtags" class="smlabel input-group-addon">Interest groups</label>
<input id="hashtags" name="hashtags" maxlength="350"
type="text" class="form-control" placeholder="eg #dataviz, #networks"
type="text" class="form-control" placeholder="eg #dataviz, #networks, #rochebrune2018"
value="{{ current_user.info.hashtags }}">
</div>
<p class="legend">Interest groups (for seminars, mailing lists, events) aka "community hashtags"</p>
<p class="legend">(press TAB or ENTER after each)</p>
</div>
</div> <!-- /panel-body -->
......
templates/registration_full_form.html
View file @ f3ff539b
......@@ -257,7 +257,7 @@
</p>
<div class="question">
<div class="input-group">
<div class="input-group tagbox-container">
<label for="keywords" class="smlabel input-group-addon">* Key subjects</label>
<input id="keywords" name="keywords" maxlength="350"
type="text" class="form-control autocomp" placeholder="keywords"
......@@ -320,15 +320,15 @@
</div>
<div class="question">
<div class="input-group">
<p class="legend">Hashtags for community interest groups (seminars, mailing lists, events...)</p>
<div class="input-group tagbox-container">
<label for="hashtags" class="smlabel input-group-addon">Interest groups</label>
<input id="hashtags" name="hashtags" maxlength="350"
type="text" class="form-control" placeholder="eg #dataviz, #networks">
type="text" class="form-control" placeholder="eg #dataviz, #networks, #rochebrune2018">
</div>
<p class="legend">Interest groups (for seminars, mailing lists, events) aka "community hashtags"</p>
<p class="legend">(press TAB or ENTER after each)</p>
</div>
</div> <!-- /panel-body -->
<div class="panel-footer ccsection-footer">&nbsp;</div>
......
templates/registration_short_form.html
View file @ f3ff539b
......@@ -256,7 +256,7 @@
<div class="question">
<div class="input-group">
<label for="keywords" class="smlabel input-group-addon">* Key subjects</label>
<label for="keywords" class="smlabel input-group-addon tagbox-container">* Key subjects</label>
<input id="keywords" name="keywords" maxlength="350"
type="text" class="form-control autocomp" placeholder="keywords"
placeholder="keywords">
......@@ -318,12 +318,13 @@
</div>
<div class="question">
<div class="input-group">
<p class="legend">Hashtags for community interest groups (seminars, mailing lists, events...)</p>
<div class="input-group tagbox-container">
<label for="hashtags" class="smlabel input-group-addon">Interest groups</label>
<input id="hashtags" name="hashtags" maxlength="350"
type="text" class="form-control" placeholder="eg #dataviz, #networks">
type="text" class="form-control" placeholder="eg #dataviz, #networks, #rochebrune2018">
</div>
<p class="legend">Interest groups (for seminars, mailing lists, events) aka "community hashtags"</p>
<p class="legend">(press TAB or ENTER after each)</p>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment