hashtags as multi text input + fixResidue on reg like profile

static/js/comex_page_profile_controllers.js

@@ -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

@@ -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

@@ -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,10 +193,17 @@ var cmxClt = (function() {
             // debug
             // console.log ('poptagbox from event' + event.type)
 
-            var newValue = normalInput.value
+            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]
 
-            if (newValue != '') {
-                var newBox = document.createElement('div')
+                    // "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 = ''
@@ -204,7 +212,6 @@ var cmxClt = (function() {
                     // 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')
@@ -230,7 +237,7 @@ var cmxClt = (function() {
                         // remove box
                         setTimeout(function(){newBox.style.display = 'none'}, 300)
 
-                    console.log("droptagbox", cC.uform.mtiStock[fName].length, cC.uform.mtiStock[fName])
+                        // console.debug("droptagbox", cC.uform.mtiStock[fName].length, cC.uform.mtiStock[fName])
                     }
 
                     newBoxClose.onclick = closeBox
@@ -239,9 +246,13 @@ var cmxClt = (function() {
 
                     // show the box
                     newBox.classList.add("box-highlight")
+                    if (perhapsColor) {
+                        newBox.style.backgroundColor = perhapsColor
+                    }
                     cC.insertAfter(refElt, newBox)
 
-                console.log("poptagbox", cC.uform.mtiStock[fName].length, cC.uform.mtiStock[fName])
+                    // console.debug("poptagbox", cC.uform.mtiStock[fName].length, cC.uform.mtiStock[fName])
+                }
             }
         }
 

templates/profile.html

@@ -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

@@ -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

@@ -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>