Skip to content

Commit

Permalink
enhancement: autcomplete multiple display
Browse files Browse the repository at this point in the history
  • Loading branch information
nicolaslabbe committed Nov 17, 2016
1 parent cac32e9 commit 5f11f38
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 82 deletions.
2 changes: 1 addition & 1 deletion src/cli/cms/editor/handlebars/printInput.js
View file
Expand Up @@ -29,7 +29,7 @@ export default function printInput () {
if(params.value == null) {
params.value = ''
}

if(typeof params.value === 'string') params.value = params.value.replace(/\"/g, '"')

var inputClass = 'form-control form-abe'
Expand Down
165 changes: 121 additions & 44 deletions src/cli/cms/editor/handlebars/sourceAttr.js
View file
Expand Up @@ -4,63 +4,140 @@ export default function sourceAttr(val, params) {
var selected = ''
var display = params.display

if (display.indexOf('{{') > -1) {
display = display.replace('{{', '').replace('}}', '')
if (display.indexOf('.') > -1) {
display = display.split('.')
display = display[display.length - 1]
var variables = []
var displayValues = params.display
var match
var isVariable = false
while(match = /\{\{(.*?)\}\}/g.exec(displayValues)) {
if (match != null && match[1] != null) {
isVariable = true
// var lastMatch = match[1]
// if (lastMatch.indexOf('.') > -1) {
// var lastMatch = lastMatch.split('.')
// lastMatch = lastMatch[lastMatch.length - 1]
// }
variables.push({
replace: match[0],
value: match[1]
})
displayValues = displayValues.replace('{{' + match[1] + '}}', "")
}
}

if(typeof hiddenVal === 'object' && Object.prototype.toString.call(hiddenVal) === '[object Object]') {
hiddenVal = JSON.stringify(hiddenVal).replace(/'/g, ''')

try {
var displayVal = eval('val.' + display)
if(display != null&& displayVal != null) {
val = displayVal
}else {
val = val[Object.keys(val)[0]]
}
}catch(e) {
val = val[Object.keys(val)[0]]
}
if (!isVariable) {
variables.push({
replace: displayValues,
value: displayValues
})
}

var val = display
if(typeof params.value === 'object' && Object.prototype.toString.call(params.value) === '[object Array]') {
Array.prototype.forEach.call(params.value, (v) => {
var item = v
try {
var displayV = eval('item.' + display)
if(display != null && displayV !== null) {
item = displayV
} else {
if(typeof v === 'string') {
item = v
} else {
item = v[Object.keys(v)[0]]
Array.prototype.forEach.call(variables, (variable) => {
var variableToUse = variable.value
if (variableToUse.indexOf('.') > -1) {
var checkMatch = variableToUse.split('.')
var found = false
while(!found) {
try {
var isFound = eval('v.' + checkMatch[0])
if (isFound != null) {
variableToUse = checkMatch.join('.')
found = true
}else {
checkMatch.shift()
if (checkMatch.length === 0) {
variableToUse = ""
found = true
}
}
}catch(e) {
checkMatch.shift()
if (checkMatch.length === 0) {
variableToUse = ""
found = true
}
}
}
}
} catch(e) {
item = v[Object.keys(v)[0]]
}

if(typeof val === 'object' && Object.prototype.toString.call(val) === '[object Array]'
&& typeof item === 'object' && Object.prototype.toString.call(item) === '[object Array]') {

Array.prototype.forEach.call(item, (i) => {
if(val.indexOf(i) >= 0) {
selected = 'selected="selected"'

if (variableToUse != null && variableToUse != "") {
try {
var replaceVal = eval('v.' + variableToUse)
val = val.replace(new RegExp(variable.replace, 'g'), replaceVal)
}catch(e) {

}
})
}else if(val === item) {
selected = 'selected="selected"'
}
}
})
})
}else if(params.value === hiddenVal) {
selected = 'selected="selected"'
}

// if (variables.length === 0) {
// variables.push({
// replace: display,
// value: display
// })
// }

// if (display.indexOf('{{') > -1) {
// display = display.replace('{{', '').replace('}}', '')
// if (display.indexOf('.') > -1) {
// display = display.split('.')
// display = display[display.length - 1]
// }
// }

// if(typeof hiddenVal === 'object' && Object.prototype.toString.call(hiddenVal) === '[object Object]') {
// hiddenVal = JSON.stringify(hiddenVal).replace(/'/g, ''')

// try {
// var displayVal = eval('val.' + display)
// if(display != null && displayVal != null) {
// val = displayVal
// }else {
// val = val[Object.keys(val)[0]]
// }
// }catch(e) {
// val = val[Object.keys(val)[0]]
// }
// }

// if(typeof params.value === 'object' && Object.prototype.toString.call(params.value) === '[object Array]') {
// Array.prototype.forEach.call(params.value, (v) => {
// var item = v
// try {
// var displayV = eval('item.' + display)
// if(display != null && displayV !== null) {
// item = displayV
// } else {
// if(typeof v === 'string') {
// item = v
// } else {
// item = v[Object.keys(v)[0]]
// }
// }
// } catch(e) {
// item = v[Object.keys(v)[0]]
// }

// if(typeof val === 'object' && Object.prototype.toString.call(val) === '[object Array]'
// && typeof item === 'object' && Object.prototype.toString.call(item) === '[object Array]') {

// Array.prototype.forEach.call(item, (i) => {
// if(val.indexOf(i) >= 0) {
// selected = 'selected="selected"'
// }
// })
// }else if(val === item) {
// selected = 'selected="selected"'
// }
// })
// }else if(params.value === hiddenVal) {
// selected = 'selected="selected"'
// }

return {
hiddenVal: hiddenVal,
selected: selected,
Expand Down
108 changes: 73 additions & 35 deletions src/server/public/scripts/modules/EditorAutocomplete.js
View file
Expand Up @@ -133,14 +133,14 @@ export default class EditorAutocomplete {
}

_add(display, value, json, autocompleteResultWrapper) {
var deepval = this._deep_value_array(json, display)
// var deepval = this._deep_value_array(json, display)

if(typeof deepval !== 'undefined' && deepval !== null && deepval !== '') {
// if(typeof deepval !== 'undefined' && deepval !== null && deepval !== '') {
var div = document.createElement('div')
div.classList.add('autocomplete-result')
div.setAttribute('data-parent-id', this._currentInput.getAttribute('data-id'))
div.setAttribute('value', value.replace(/&quote;/g, '\''))
div.innerHTML = `${this._deep_value_array(json, display)}`
div.innerHTML = display

var remove = document.createElement('span')
remove.classList.add('glyphicon', 'glyphicon-remove')
Expand All @@ -149,7 +149,7 @@ export default class EditorAutocomplete {
div.appendChild(remove)

autocompleteResultWrapper.appendChild(div)
}
// }
}

_select(target) {
Expand All @@ -163,8 +163,12 @@ export default class EditorAutocomplete {
}
}

this._add(target.getAttribute('data-display'), target.getAttribute('data-value'), json,
this._divWrapper.parentNode.querySelector('.autocomplete-result-wrapper'))
this._add(
target.getAttribute('data-display'),
target.getAttribute('data-value'),
json,
this._divWrapper.parentNode.querySelector('.autocomplete-result-wrapper')
)
this._saveData()

}
Expand All @@ -175,44 +179,78 @@ export default class EditorAutocomplete {

_showAutocomplete(sources, target, val) {
var display = target.getAttribute('data-display')
var first = true

this._divWrapper.innerHTML = ''
if (display.indexOf('{{') > -1) {
var deepDisplay = display.replace('{{', '').replace('}}', '').split('.')
display = deepDisplay.pop()
deepDisplay = deepDisplay.join('.')
try {
sources = eval('sources.' + deepDisplay)
}catch(e) {

var variables = []
var displayValues = display
var match
while(match = /\{\{(.*?)\}\}/g.exec(displayValues)) {
if (match != null && match[1] != null) {
variables.push({
replace: match[0],
value: match[1]
})
displayValues = displayValues.replace('{{' + match[1] + '}}', "")
}
}

this._divWrapper.innerHTML = ""
var deepValues = []
var first = true
if(typeof sources !== 'undefined' && sources !== null) {
if(typeof sources === 'object' && Object.prototype.toString.call(sources) === '[object Object]') {
sources = [sources]
}
Array.prototype.forEach.call(sources, (source) => {
var sourceVal = this._deep_value_array(source, display)
var i = 0
Array.prototype.forEach.call(variables, (variable) => {
var trueJson = sources

if(typeof sourceVal !== 'undefined' && sourceVal !== null) {
sourceVal = sourceVal.toLowerCase()
if(sourceVal.indexOf(val) > -1) {
var div = document.createElement('div')
div.addEventListener('mousedown', this._handleSelectValue)
div.setAttribute('data-value', JSON.stringify(source))
div.setAttribute('data-display', display)
if(first) {
div.classList.add('selected')
var splittedDiplay = variable.value.split('.')
while(Object.prototype.toString.call(trueJson) === '[object Object]') {
Array.prototype.forEach.call(Object.keys(trueJson), (key) => {
if (key === splittedDiplay[0]) {
trueJson = trueJson[key]
splittedDiplay.shift()

variables[i].value = splittedDiplay.join('.')
}
first = false
div.innerHTML = sourceVal.replace(val, `<span class="select">${val}</span>`)
this._divWrapper.appendChild(div)
}

})
}

if (Object.prototype.toString.call(trueJson) === '[object Array]') {
var j = 0
Array.prototype.forEach.call(trueJson, (item) => {
if (deepValues[j] == null) {
deepValues[j] = {replace: []}
}
try {
var val = eval('item.' + variables[i].value)
deepValues[j].replace.push({key: variables[i].replace, value: val})
deepValues[j].value = item
}catch(e) {
console.log(e)
}
j++
})
}

i++
})

Array.prototype.forEach.call(deepValues, (item) => {
var displayName = display
Array.prototype.forEach.call(item.replace, (replace) => {
displayName = displayName.replace(new RegExp(replace.key, 'g'), replace.value)
})
var div = document.createElement('div')
div.addEventListener('mousedown', this._handleSelectValue)
div.setAttribute('data-value', JSON.stringify(item.value))
div.setAttribute('data-display', displayName)
if(first) {
div.classList.add('selected')
}
first = false
div.innerHTML = displayName.replace(new RegExp(`(${val})`, 'i'), `<span class="select">$1</span>`)
this._divWrapper.appendChild(div)
})
}

this._show(target)
}

Expand Down
4 changes: 2 additions & 2 deletions src/server/public/scripts/modules/FormCreate.js
View file
Expand Up @@ -165,13 +165,13 @@ export default class FormCreate {
Array.prototype.forEach.call(slugMatches, function(slugMatch) {
var cleanSlugMath = slugMatch.replace('{{', '').replace('}}', '')
try {
var valueSlug = eval('values.' + cleanSlugMath)
var valueSlug = eval('values.' + cleanSlugMath) + ""
valueSlug = limax(valueSlug, {separateNumbers: false})
slug = slug.replace(slugMatch, valueSlug)
}catch(e) {
slug = slug.replace(slugMatch, '')
isValid = false
console.error('error on create', e)
// console.error('error on create', e.stack)
}
}.bind(this))
}
Expand Down

0 comments on commit 5f11f38

Please sign in to comment.