Skip to content

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

multiple textinput and its little tag boxes

parent 597320a6
Hide whitespace changes
Inline Side-by-side
Showing with 216 additions and 41 deletions
static/css/comex_alt.css
View file @ f73da214
......@@ -56,18 +56,6 @@ iframe.wwwthumbsmall {
background-color: #555;
border-radius: 5em;
}
.box-highlight {
background-color: #AAA ;
padding: .2em .5em ;
background-color: #B00 ;
}
.box-highlight::after {
content: "x (close)" ;
font-size: .4em;
margin-bottom: .7em;
}
#information-example {
background-color:#AAA;
border-radius: 1em;
......
static/css/comex_user.css
View file @ f73da214
......@@ -4,6 +4,7 @@
.red { color:#910 ;}
.green { color:#161 ;}
.grey { color:#554 ;}
.lgrey { color:#ddd ;}
.orange{ color:#F96 ;}
.blue { color:#23A ;}
......@@ -62,7 +63,7 @@ button.clean-btn
p#doors_ret_msg {
font-weight: bold;
text-shadow: 2px;
text-shadow: .8px .8px #333, -.8px -.8px #333, -.8px .8px #333, .8px -.8px #333;
}
/* not used at present but could be useful for autompleted inputs */
......@@ -158,6 +159,18 @@ input.readonly {
min-width: 7.5em;
}
@media(max-width:400px){
/* ~ xs and sm */
.smlabel {
padding: 0;
font-size: 65%;
letter-spacing: -.1em;
max-width: 6em;
width: 5em;
min-width: 5em;
}
}
/* the question's additional legend or caption */
.legend {
font-family: Cambria, serif;
......@@ -191,6 +204,43 @@ input#my-captcha{
border-radius: .2em;
}
/* mini box for each keyword or tag */
.box-highlight {
max-width: 9em;
background-color: #161;
border: 2px solid #ACA;
padding: .5em .4em .6em .8em;
margin: .4em .2em .4em .5em;
border-radius: .3em;
color: #ddd;
display: inline-block;
-webkit-transition: opacity .3s ease-in;
letter-spacing: normal;
font-weight: 500;
}
.box-highlight-close {
font-size: .5em;
position: relative;
margin-top: -1em;
margin-right: -0.2em;
float: right;
right: 0px;
color: #ddd;
/*background-color: #333;*/
padding: .5em;
}
.operation:hover {
color: #23A;
text-shadow: .5px .5px #333, -.5px -.5px #333, -.5px .5px #333, .5px -.5px #333;
}
.tagbox-container {
background-color:#eee ;
border-bottom: 3px solid #ccc;
}
/* like a close window element */
.pull-up-right {
margin-top: -.5em;
......@@ -350,7 +400,9 @@ li.minilabel {
margin-bottom: 1em;
border: 2px solid #ddd;
-webkit-transition: opacity 5s ease;
display: none;
-webkit-transition: opacity 1s ease;
}
#main_message.faded {
......
static/js/comex_page_profile_controllers.js
View file @ f73da214
......@@ -41,6 +41,10 @@ selectSavedMenus(uinfo)
cmxClt.uform.initialize("comex_profile_form", completionAsYouGo)
// activate multiTextinput
cmxClt.uform.multiTextinput('keywords', uinfo.keywords)
// memory
var formValid = false
......
static/js/comex_page_reg_controllers.js
View file @ f73da214
......@@ -28,6 +28,10 @@ cmxClt.uauth.emailIdSupposedToExist = false
var validateWithMessage = false
// activate multiTextinput
cmxClt.uform.multiTextinput('keywords')
var shortRegVersion = true
var ignoredFields = []
if (shortRegVersion) {
......
static/js/comex_user_autocompletes.js
View file @ f73da214
......@@ -599,20 +599,6 @@
return false;
},
select: function (event, ui) {
var terms = this.value.split(/\s*,\s*/) ;
// console.log("currently autocompleting segment:",terms)
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
// $kwInput[0].style.fontWeight = "bold"
return false;
}
});
});
......
static/js/comex_user_shared.js
View file @ f73da214
......@@ -28,7 +28,7 @@ var cmxClt = (function() {
cC.strokeWhite = ".8px .8px #fff, -.8px -.8px #fff, -.8px .8px #fff, .8px -.8px #fff"
cC.strokeGrey = ".8px .8px #333, -.5px -.8px #333, -.8px .8px #333, .8px -.8px #333"
cC.strokeGrey = ".8px .8px #333, -.8px -.8px #333, -.8px .8px #333, .8px -.8px #333"
cC.strokeBlack = ".5px .5px #000, -.5px -.5px #000, -.5px .5px #000, .5px -.5px #000"
cC.strokeDeepGrey = "3px 3px 4px #333,-3px 3px 4px #333,-3px -3px 4px #333,3px -3px 4px #333"
......@@ -140,6 +140,7 @@ var cmxClt = (function() {
cC.uform.submitButton = document.getElementById('form_submit')
cC.uform.timestamp = document.getElementById('last_modified_date')
cC.uform.mainMessage = document.getElementById('main_message')
cC.uform.mtiStock = {} // arrays of inputs per fieldName
// functions
cC.uform.initialize
......@@ -156,7 +157,6 @@ var cmxClt = (function() {
// function definitions
// =====================
// multiTextinput
//
// stub for multiple textinput like keywords
......@@ -164,13 +164,124 @@ 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) {
cC.uform.multiTextinput = function (fName, perhapsPreviousValues) {
// HTML elt to insert tag boxes around
var refElt = null
// new array for full results
cC.uform.mtiStock[fName] = []
// there must be a normal text input
var normalInput = document.getElementById(fName)
normalInput.hidden = true
// POSS use autocomp
// perhaps surrounding input group
var inputWrap = cC.findAncestor(normalInput, 'question')
// if (inputWrap) {
// refElt = inputWrap
// }
// else {
refElt = normalInput
// }
// refElt.style.marginBottom = 0
// shows a box and saves the input value in mtiStock
var popTagbox = function(event) {
// debug
// console.log ('poptagbox from event' + event.type)
var newValue = normalInput.value
if (newValue != '') {
var 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)
// 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])
}
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])
}
}
// when re-entering previously saved values at init
if ( perhapsPreviousValues
&& perhapsPreviousValues.length) {
for (var i in perhapsPreviousValues) {
normalInput.value = perhapsPreviousValues[i]
popTagbox()
}
}
// bind it to 'blur', 'change' and ENTER
normalInput.onblur = popTagbox
normalInput.onchange = popTagbox
normalInput.onkeydown = function (ev) {
// perhaps now there's a jquery-ui autocomplete
var hasAutocomplete = $(normalInput).data('ui-autocomplete')
if (ev.keyCode == 13) {
// ENTER
if ( !hasAutocomplete
||
!hasAutocomplete.menu.active) {
popTagbox()
}
}
else if (ev.which == 27) {
// ESC
normalInput.value = ""
}
}
// expose
if (! cC.uform.mtiPopOneTag) {
cC.uform.mtiPopOneTag = {}
}
cC.uform.mtiPopOneTag[fName] = popTagbox()
var newTextArrayInput = document.createElement('input');
newTextArrayInput.class = "form-control autocomp" // TODO use autocomp
cC.insertAfter(normalInput, newTextArrayInput)
}
// initialize
......@@ -183,6 +294,19 @@ var cmxClt = (function() {
cC.uform.theForm.onkeyup = aValidationFun
cC.uform.theForm.onchange = aValidationFun
cC.uform.theForm.onblur = aValidationFun
cC.uform.theForm.classicSubmit = cC.uform.theForm.submit
cC.uform.theForm.submit = function() {
// collect multiTextinput values
for (var field in cC.uform.mtiStock) {
console.log('collecting', field)
document.getElementById(field).value = cC.uform.mtiStock[field].join(',')
console.log("new value is", document.getElementById(field).value)
}
cC.uform.theForm = cC.uform.theForm.classicSubmit()
}
}
// testFillField
......@@ -232,10 +356,10 @@ var cmxClt = (function() {
actualValue = null
document.getElementById(fieldName).value = ""
}
// arrays of text
// arrays of text: rm brackets and any squotes
if (fieldType == "at" && actualValue
&& actualValue.charAt(0) == '['
&& actualValue.charAt(1) == "'") {
&& actualValue.charAt(actualValue.length-1) == "]") {
actualValue = actualValue.replace(/[\[\]']/g,'')
document.getElementById(fieldName).value = actualValue
}
......@@ -259,11 +383,23 @@ var cmxClt = (function() {
var labelElt = document.querySelector('label[for='+fieldName+']')
var fieldLabel = labelElt ? labelElt.innerText : fieldName
// alternative filled values from storage lists
if ( (actualValue == null || actualValue == "" )
&& cC.uform.mtiStock[fieldName]
&& cC.uform.mtiStock[fieldName].length) {
actualValue = cC.uform.mtiStock[fieldName].join(',')
// debug
console.log('recreated multiTextinput value', actualValue)
}
// alternative null values
if (actualValue == "") {
actualValue = null
}
// debug
// console.log(
// "cmxClt.testFillField: field", fieldName,
......
templates/profile.html
View file @ f73da214
......@@ -250,13 +250,16 @@
</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"
type="text" class="form-control autocomp" placeholder="Add a keyword here"
value="{{ current_user.info.keywords }}">
<div class="input-group-addon">
<span class="glyphicon glyphicon-plus operation" onclick="cmxClt.uform.mtiPopOneTag['keywords']"></span>
</div>
</div>
<p class="legend">Please enter at least 5 comma-separated keywords</p>
<p class="legend">Please enter at least 5 keywords</p>
</div>
<div class="question input-group">
......@@ -534,7 +537,8 @@
<!-- == S U B M I T == -->
<div style="text-align:center">
<!-- @type button to avoid ENTER submit -->
<button class="btn btn-lg btn-success" id="form_submit" type="button" onclick="cmxClt.uform.theForm.submit()">
<button class="btn btn-lg btn-success" id="form_submit"
type="button" onclick="cmxClt.uform.theForm.submit()">
Save profile
</button>
</div>
......@@ -604,5 +608,6 @@
<script src="{{ url_for('static', filename='js/comex_user_shared.js') }}"></script>
<script src="{{ url_for('static', filename='js/comex_page_profile_controllers.js') }}"></script>
<script src="{{ url_for('static', filename='js/comex_user_autocompletes.js') }}"></script>
<!-- <script src="{{ url_for('static', filename='js/bootstrap-native.js') }}"></script> -->
<script src="{{ url_for('static', filename='js/bootstrap-native-1.1.min.js') }}"></script>
{% endblock %}
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