KDView = require './../../core/view.coffee' KDInputValidator = require './inputvalidator.coffee' ###* * The base input field view. Similar to the classic `` * element, but with additional options such as validation. * * ## Usage * * ```coffee * view = new KDInputView * placeholder: 'Type something here for an inspiring message!' * * view.on 'keyup', (e) -> * if e.keyCode is 13 #13==Enter * new KDNotificationView * content: "You said #{e.target.value}!" * * appView.addSubView view * ``` * * Create a simple text input view, with a placeholder. When the `keyup` * event is fired, we check what the key is. If the keyCode is `13` * *(An Enter key)*, we create a notification with the value of the field. ### module.exports = class KDInputView extends KDView ###* * Options supports the following keys. * - **options.type**: The type of this input. All html input types are * supported. It should be noted that `"textarea"` and `"select"` do not * create `` elements, but rather they create `" when "select" then $ "" else $ "" bindValidationEvents:-> @on "ValidationError", @bound "giveValidationFeedback" @on "ValidationPassed", @bound "giveValidationFeedback" @on "focus", @bound "clearValidationFeedback" setLabel:(label = @getOptions().label)-> return unless label @inputLabel = label @inputLabel.$()[0].setAttribute "for", @getName() @inputLabel.$().bind "click",()=> @$().trigger "focus" @$().trigger "click" getLabel:-> @inputLabel setCallback:-> @inputCallback = @getOptions().callback getCallback:-> @inputCallback setType:(@inputType = "text")-> getType:-> @inputType setName:(@inputName)-> getName:-> @inputName setFocus:-> (KD.getSingleton "windowController").setKeyView this @$().trigger 'focus' setBlur:-> (KD.getSingleton "windowController").setKeyView null @$().trigger 'blur' setSelectOptions:(options)-> unless options.length for own optGroup, subOptions of options $optGroup = $ "" @$().append $optGroup for option in subOptions $optGroup.append "" else if options.length for option in options @$().append "" else warn "no valid options specified for the input:", @ @$().val @getDefaultValue() setDefaultValue:(value)-> return if not value? and value isnt '' KDInputView::setValue.call this, value @inputDefaultValue = value getDefaultValue:-> @inputDefaultValue setPlaceholder:(value)-> if @$().is("input") or @$().is("textarea") @$().attr "placeholder",value @options.placeholder = value ###* * Disable this input field. ### makeDisabled:-> @getDomElement().attr "disabled","disabled" ###* * Enable this input field. ### makeEnabled:-> @getDomElement().removeAttr "disabled" ###* * Get the value of this input field. ### getValue:-> if @getOption("type") is "checkbox" value = @$().is ':checked' else value = @getDomElement().val() {forceCase} = @getOptions() if forceCase value = if forceCase.toLowerCase() is 'uppercase' then value.toUpperCase() else value.toLowerCase() return value ###* * Set the value of this input field. ### setValue:(value)-> $el = @$() el = $el[0] if @getOption("type") in ["checkbox", "radio"] if value then el.setAttribute "checked", "checked" else el.removeAttribute "checked" else $el.val value setCase:(forceCase)-> cb = => $el = @getDomElement() el = $el[0] val = @getValue() return if val is $el.val() start = el.selectionStart end = el.selectionEnd @setValue val # FIXME: setSelectionRange not supported in IE < 9 - need polyfill el.setSelectionRange(start, end) if el.setSelectionRange @on "keyup", cb @on "blur", cb unsetValidation:-> @setValidation {} setValidation:(ruleSet)-> @valid = no @currentRuleset = ruleSet @validationCallbacks or= {} @createRuleChain ruleSet for own oldEventName, oldCallbacks of @validationCallbacks for oldCallback in oldCallbacks @off oldEventName, oldCallback @ruleChain.forEach (rule)=> eventName = \ if ruleSet.events if ruleSet.events[rule] then ruleSet.events[rule] else if ruleSet.event then ruleSet.event else if ruleSet.event then ruleSet.event if eventName @validationCallbacks[eventName] or= [] @validationCallbacks[eventName].push cb = (event)=> @validate rule, event if rule in @ruleChain @on eventName, cb validate:(rule, event = {})-> @ruleChain or= [] @validationResults or= {} rulesToBeValidated = if rule then [rule] else @ruleChain ruleSet = @currentRuleset or @getOptions().validate if @ruleChain.length > 0 rulesToBeValidated.forEach (rule)=> if KDInputValidator["rule#{rule.capitalize()}"]? result = KDInputValidator["rule#{rule.capitalize()}"] @, event @setValidationResult rule, result else if "function" is typeof ruleSet.rules[rule] ruleSet.rules[rule] @, event else @valid = yes allClear = yes for own result, errMsg of @validationResults if errMsg then allClear = no @valid = if allClear then yes else no @emit "ValidationPassed" if @valid @emit "ValidationResult", @valid return @valid createRuleChain:(ruleSet)-> {rules} = ruleSet @validationResults or= {} @ruleChain = if typeof rules is "object" then (rule for own rule,value of rules) else [rules] for rule in @ruleChain @validationResults[rule] = null setValidationResult:(rule, err, showNotification=yes)-> if err @validationResults[rule] = err @showValidationError err if @getOptions().validate.notifications and showNotification @emit "ValidationError", err @valid = no else @validationResults[rule] = null # if there is any true on validation results' values then is not valid @valid = not( (v for own k, v of @validationResults) .map((result)-> Boolean result) .indexOf(true) > -1 ) showValidationError:(message)-> @validationNotifications[message]?.destroy() {container, notifications} = @getOption('validate') if notifications?.type is 'tooltip' if @tooltip str = "- #{message}
#{@tooltip.getOption 'title'}" @unsetTooltip() notifications = cssClass : notifications.cssClass or 'input-validation' delegate : notifications.delegate or this title : notifications.title or str or message placement : notifications.placement or 'right' direction : notifications.direction or 'left' forcePosition : yes @validationNotifications[message] = notice = @setTooltip notifications notice.show() else if notifications @validationNotifications[message] = notice = new KDNotificationView container : container title : message type : 'growl' cssClass : 'mini' duration : 2500 notice.on "KDObjectWillBeDestroyed", => message = notice.getOptions().title delete @validationNotifications[message] clearValidationFeedback:-> @unsetClass "validation-error validation-passed" @emit "ValidationFeedbackCleared" giveValidationFeedback:(err)-> return unless @getOption "decorateValidation" if err @setClass "validation-error" else @setClass "validation-passed" @unsetClass "validation-error" setCaretPosition:(pos)-> @selectRange pos, pos getCaretPosition:-> el = @$()[0] # modern if el.selectionStart return el.selectionStart # ie else if document.selection el.focus() r = document.selection.createRange() return 0 unless r re = el.createTextRange() rc = re.duplicate() re.moveToBookmark r.getBookmark() rc.setEndPoint 'EndToStart', re return rc.text.length return 0 selectAll:-> @getDomElement().select() selectRange:(selectionStart, selectionEnd)-> input = @$()[0] if input.setSelectionRange input.focus() input.setSelectionRange selectionStart, selectionEnd else if input.createTextRange range = input.createTextRange() range.collapse yes range.moveEnd 'character', selectionEnd range.moveStart 'character', selectionStart range.select() setAutoGrow:-> $input = @$() $input.css 'overflow', 'hidden' @setClass 'autogrow' # input content is copied into clone # element to get calculated height @_clone = $ '
', class : 'invisible' @on 'focus', => @_clone.appendTo 'body' @_clone.css height : 'auto' zIndex : 100000 width : $input.css 'width' boxSizing : $input.css 'box-sizing' borderTop : $input.css 'border-top' borderRight : $input.css 'border-right' borderBottom : $input.css 'border-bottom' borderLeft : $input.css 'border-left' minHeight : $input.css 'minHeight' maxHeight : $input.css 'maxHeight' paddingTop : $input.css 'padding-top' paddingRight : $input.css 'padding-right' paddingBottom : $input.css 'padding-bottom' paddingLeft : $input.css 'padding-left' wordBreak : $input.css 'wordBreak' fontSize : $input.css 'fontSize' fontWeight : $input.css 'fontWeight' lineHeight : $input.css 'lineHeight' whiteSpace : 'pre-line' @on 'blur', => @_clone.detach() @on 'input', (event) => KD.utils.defer => @resize event resize: (event) -> return unless @_clone @_clone.appendTo 'body' unless document.body.contains @_clone[0] val = @getElement().value.replace(/\n/g,'\n ') safeValue = Encoder.XSSEncode val @_clone.html safeValue height = @_clone.height() getValue = (rule) => parseInt @_clone.css(rule), 10 if @$().css('boxSizing') is 'border-box' padding = getValue('paddingTop') + getValue('paddingBottom') border = getValue('borderTopWidth') + getValue('borderBottomWidth') height = height + border + padding newHeight = if @initialHeight then Math.max @initialHeight, height else height if @previousHeight isnt newHeight @setHeight newHeight @emit 'InputHeightChanged' @previousHeight = newHeight enableTabKey:-> @inputTabKeyEnabled = yes disableTabKey:-> @inputTabKeyEnabled = no change:-> keyUp:-> yes keyDown:(event)-> @checkTabKey event if @inputTabKeyEnabled yes focus:-> @setKeyView() yes blur:-> # this messes up things # if you switch between inputs on focus next input sets the keyview to itself # and this fires right afterwards and reverts it back to blurred one # hopefully fixed KD.getSingleton("windowController").revertKeyView @ yes mouseDown:-> @setFocus() #WHY NO? #NO because if it propagates, other stuff might become keyview no checkTabKey:(event)-> tab = " " tabLength = tab.length t = event.target ss = t.selectionStart se = t.selectionEnd # // Tab key - insert tab expansion if event.which is 9 event.preventDefault() # // Special case of multi line selection if ss isnt se and t.value.slice(ss,se).indexOf("n") isnt -1 # // In case selection was not of entire lines (e.g. selection begins in the middle of a line) # // we ought to tab at the beginning as well as at the start of every following line. pre = t.value.slice(0,ss) sel = t.value.slice(ss,se).replace(/n/g,"n"+tab) post = t.value.slice(se,t.value.length) t.value = pre.concat(tab).concat(sel).concat(post) t.selectionStart = ss + tab.length t.selectionEnd = se + tab.length # // "Normal" case (no selection or selection on one line only) else t.value = t.value.slice(0,ss).concat(tab).concat(t.value.slice(ss,t.value.length)) if ss is se t.selectionStart = t.selectionEnd = ss + tab.length else t.selectionStart = ss + tab.length t.selectionEnd = se + tab.length # // Backspace key - delete preceding tab expansion, if exists else if event.which is 8 and t.value.slice(ss - tabLength,ss) is tab event.preventDefault() t.value = t.value.slice(0,ss - tabLength).concat(t.value.slice(ss,t.value.length)) t.selectionStart = t.selectionEnd = ss - tab.length # // Delete key - delete following tab expansion, if exists else if event.which is 46 and t.value.slice(se,se + tabLength) is tab event.preventDefault() t.value = t.value.slice(0,ss).concat(t.value.slice(ss + tabLength,t.value.length)) t.selectionStart = t.selectionEnd = ss # // Left/right arrow keys - move across the tab in one go else if event.which is 37 && t.value.slice(ss - tabLength,ss) is tab event.preventDefault() t.selectionStart = t.selectionEnd = ss - tabLength else if event.which is 39 and t.value.slice(ss,ss + tabLength) is tab event.preventDefault() t.selectionStart = t.selectionEnd = ss + tabLength