module Shockout { export class KoHandlers { public static bindKoHandlers ( ) { bindKoHandlers ( ko ) ; } } function bindKoHandlers ( ko ) { ko . bindingHandlers [ 'spHtmlEditor' ] = { init : function ( element , valueAccessor , allBindings , vm ) { var koName = Utils . observableNameFromControl ( element ) ; $ ( element ) . blur ( update ) . change ( update ) . keydown ( update ) ; function update ( ) { vm [ koName ] ( $ ( this ) . html ( ) ) ; } } , update : function ( element , valueAccessor , allBindings , vm ) { var value = ko . utils . unwrapObservable ( valueAccessor ( ) ) || "" ; if ( element . innerHTML !== value ) { element . innerHTML = value ; } } } ; ko . bindingHandlers [ 'spPerson' ] = { init : function ( element , valueAccessor , allBindings , bindingContext ) { try { if ( element . tagName . toLowerCase ( ) != 'input' || $ ( element ) . attr ( 'type' ) == 'hidden' ) { return ; } var viewModel = bindingContext . $data , modelValue = valueAccessor ( ) , person = ko . unwrap ( modelValue ) ; var $element = $ ( element ) . addClass ( 'people-picker-control' ) . attr ( 'placeholder' , 'Employee Account Name' ) ; var $parent = $ ( element ) . parent ( ) ; var $spError = $ ( '<div>' , { 'class' : 'sp-validation person' } ) ; $element . after ( $spError ) ; var $desc = $ ( '<div>' , { 'class' : 'no-print' , 'html' : '<em>Enter the employee name. The auto-suggest menu will appear below the field. Select the account name.</em>' } ) ; $spError . after ( $desc ) ; var $spValidate = $ ( '<button>' , { 'html' : Templates . personIcon , 'class' : Templates . buttonDefault , 'title' : 'Validate the employee account name.' } ) . on ( 'click' , function ( ) { if ( $ . trim ( $element . val ( ) ) == '' ) { $element . removeClass ( 'invalid' ) . removeClass ( 'valid' ) ; return false ; } if ( ! Utils . validateSpPerson ( modelValue ( ) ) ) { $spError . text ( 'Invalid' ) . addClass ( 'error' ) . show ( ) ; $element . addClass ( 'invalid' ) . removeClass ( 'valid' ) ; } else { $spError . text ( 'Valid' ) . removeClass ( 'error' ) ; $element . removeClass ( 'invalid' ) . addClass ( 'valid' ) . show ( ) ; } return false ; } ) . insertAfter ( $element ) ; var $reset = $ ( '<button>' , { 'class' : Templates . resetButton , 'html' : 'Reset' } ) . on ( 'click' , function ( ) { modelValue ( null ) ; return false ; } ) . insertAfter ( $spValidate ) ; var autoCompleteOpts = { source : SPForm . searchPrincipals ? searchPrincipals : searchUserInformationList , minLength : 3 , select : function ( event , ui ) { modelValue ( ui . item . value ) ; } } ; $ ( element ) . autocomplete ( autoCompleteOpts ) ; $ ( element ) . on ( 'focus' , function ( ) { $ ( this ) . removeClass ( 'valid' ) ; } ) . on ( 'blur' , function ( ) { onChangeSpPersonEvent ( this , modelValue ) ; } ) . on ( 'mouseout' , function ( ) { onChangeSpPersonEvent ( this , modelValue ) ; } ) ; } catch ( e ) { if ( SPForm . DEBUG ) { console . info ( 'Error in Knockout handler spPerson init()' ) ; console . info ( e ) ; } } function searchPrincipals ( request , response ) { SpSoap . searchPrincipals ( request . term , function ( data ) { var users = $ . map ( data , function ( user ) { var account = user . AccountName ; if ( account . indexOf ( '|' ) > - 1 ) { account = account . split ( '|' ) [ 1 ] ; } return { label : `${ user . DisplayName } (${ user . Email })` , value : `${ user . UserInfoID };#${ account }` } ; } ) ; if ( $ . isFunction ( Shockout [ 'peopleFilter' ] ) ) { users = Shockout [ 'peopleFilter' ] ( users ) ; } response ( users ) ; } , 10 , 'User' ) ; } ; function searchUserInformationList ( request , response ) { SpApi . searchUsers ( request . term , function ( data ) { var users = [ ] ; for ( var i = 0 ; i < data . length ; i ++ ) { var user = data [ i ] ; var account = user . Account ; if ( account . indexOf ( '|' ) > - 1 ) { account = account . split ( '|' ) [ 1 ] ; } users . push ( { label : `${ user . Name } (${ user . WorkEmail })` , value : `${ user . Id };#${ account }` } ) ; } if ( $ . isFunction ( Shockout [ 'peopleFilter' ] ) ) { users = Shockout [ 'peopleFilter' ] ( users ) ; } response ( users ) ; } ) ; } ; function onChangeSpPersonEvent ( self , modelValue ) { var value = $ . trim ( $ ( self ) . val ( ) ) ; if ( value == '' ) { modelValue ( null ) ; $ ( self ) . removeClass ( 'valid' ) . removeClass ( 'invalid' ) ; return ; } if ( Utils . validateSpPerson ( modelValue ( ) ) ) { $ ( self ) . val ( modelValue ( ) . split ( '#' ) [ 1 ] ) ; $ ( self ) . addClass ( 'valid' ) . removeClass ( 'invalid' ) ; } else { $ ( self ) . removeClass ( 'valid' ) . addClass ( 'invalid' ) ; } } ; } , update : function ( element , valueAccessor , allBindings , bindingContext ) { try { var viewModel = bindingContext . $data ; var modelValue = valueAccessor ( ) ; var person = ko . unwrap ( modelValue ) ; var displayName = "" ; if ( Utils . validateSpPerson ( person ) ) { displayName = person . indexOf ( '|' ) > - 1 ? person . split ( '|' ) [ 1 ] : person . split ( '#' ) [ 1 ] ; $ ( element ) . addClass ( "valid" ) ; } if ( 'value' in element ) { $ ( element ) . val ( displayName ) ; } else { $ ( element ) . text ( displayName ) ; } } catch ( e ) { if ( SPForm . DEBUG ) { console . info ( 'Error in Knockout handler spPerson update()' ) ; console . info ( e ) ; } } } } ; ko . bindingHandlers [ 'spMoney' ] = { 'init' : function ( element , valueAccessor , allBindings , viewModel , bindingContext ) { if ( element . tagName . toLowerCase ( ) != 'input' || $ ( element ) . attr ( 'type' ) == 'hidden' ) { return ; } viewModel = bindingContext . $data ; var value = valueAccessor ( ) ; var valueUnwrapped = ko . unwrap ( value ) ; $ ( element ) . on ( 'blur' , onChange ) . on ( 'change' , onChange ) ; function onChange ( ) { var val = this . value . toString ( ) . replace ( /[^\d\.\-]/g , '' ) ; val = val == '' ? null : ( val - 0 ) ; value ( val ) ; } ; } , 'update' : function ( element , valueAccessor , allBindings , viewModel , bindingContext ) { viewModel = bindingContext . $data ; var value = valueAccessor ( ) ; var valueUnwrapped = ko . unwrap ( value ) ; if ( valueUnwrapped != null ) { if ( valueUnwrapped < 0 ) { $ ( element ) . addClass ( 'negative' ) ; } else { $ ( element ) . removeClass ( 'negative' ) ; } } else { valueUnwrapped = 0 ; } var formattedValue = Utils . formatMoney ( valueUnwrapped ) ; Utils . updateKoField ( element , formattedValue ) ; } } ; ko . bindingHandlers [ 'spDecimal' ] = { 'init' : function ( element , valueAccessor , allBindings , viewModel , bindingContext ) { if ( element . tagName . toLowerCase ( ) != 'input' || $ ( element ) . attr ( 'type' ) == 'hidden' ) { return ; } viewModel = bindingContext . $data ; var value = valueAccessor ( ) ; var valueUnwrapped = ko . unwrap ( value ) ; $ ( element ) . on ( 'blur' , onChange ) . on ( 'change' , onChange ) ; function onChange ( ) { var val = this . value . toString ( ) . replace ( /[^\d\-\.]/g , '' ) ; val = val == '' ? null : ( val - 0 ) ; value ( val ) ; } ; } , 'update' : function ( element , valueAccessor , allBindings , viewModel , bindingContext ) { viewModel = bindingContext . $data ; var value = valueAccessor ( ) ; var valueUnwrapped = ko . unwrap ( value ) ; var precision = allBindings . get ( 'precision' ) || 2 ; var formattedValue = Utils . toFixed ( valueUnwrapped , precision ) ; if ( valueUnwrapped != null ) { if ( valueUnwrapped < 0 ) { $ ( element ) . addClass ( 'negative' ) ; } else { $ ( element ) . removeClass ( 'negative' ) ; } } else { valueUnwrapped = 0 ; } Utils . updateKoField ( element , formattedValue ) ; } } ; ko . bindingHandlers [ 'spNumber' ] = { init : function ( element , valueAccessor , allBindings , viewModel , bindingContext ) { if ( element . tagName . toLowerCase ( ) != 'input' || $ ( element ) . attr ( 'type' ) == 'hidden' ) { return ; } viewModel = bindingContext . $data ; var value = valueAccessor ( ) ; var valueUnwrapped = ko . unwrap ( value ) ; $ ( element ) . on ( 'blur' , onChange ) . on ( 'change' , onChange ) ; function onChange ( ) { var val = this . value . toString ( ) . replace ( /[^\d\-]/g , '' ) ; val = val == '' ? null : ( val - 0 ) ; value ( val ) ; } ; } , update : function ( element , valueAccessor , allBindings , viewModel , bindingContext ) { viewModel = bindingContext . $data ; var value = valueAccessor ( ) ; var valueUnwrapped = ko . unwrap ( value ) ; valueUnwrapped = valueUnwrapped == null ? 0 : valueUnwrapped ; valueUnwrapped = valueUnwrapped . constructor == String ? valueUnwrapped = valueUnwrapped . replace ( /\D/g ) - 0 : valueUnwrapped ; Utils . updateKoField ( element , valueUnwrapped ) ; if ( value . constructor == Function ) { value ( valueUnwrapped ) ; } } } ; ko . bindingHandlers [ 'spDate' ] = { after : [ 'attr' ] , init : function ( element , valueAccessor , allBindings , viewModel , bindingContext ) { var modelValue = valueAccessor ( ) ; if ( element . tagName . toLowerCase ( ) != 'input' || $ ( element ) . attr ( 'type' ) == 'hidden' ) { return ; } $ ( element ) . css ( 'display' , 'inline-block' ) . addClass ( 'datepicker med' ) . attr ( 'placeholder' , 'MM/DD/YYYY' ) . on ( 'blur' , onDateChange ) . on ( 'change' , onDateChange ) . after ( Templates . calendarIcon ) ; $ ( element ) . datepicker ( { changeMonth : true , changeYear : true } ) ; function onDateChange ( ) { modelValue ( Utils . parseDate ( this . value ) ) ; } ; } , update : function ( element , valueAccessor , allBindings , viewModel , bindingContext ) { var modelValue = valueAccessor ( ) ; var date = Utils . parseDate ( ko . unwrap ( modelValue ) ) ; var dateStr = '' ; if ( ! ! date && date != null ) { dateStr = Utils . dateToLocaleString ( date ) ; } if ( 'value' in element ) { $ ( element ) . val ( dateStr ) ; } else { $ ( element ) . text ( dateStr ) ; } } } ; ko . bindingHandlers [ 'spDateTime' ] = { after : [ 'attr' ] , init : function ( element , valueAccessor , allBindings , viewModel , bindingContext ) { if ( element . tagName . toLowerCase ( ) != 'input' || $ ( element ) . attr ( 'type' ) == 'hidden' ) { return ; } try { var modelValue = valueAccessor ( ) ; var model = new DateTimeModel ( element , modelValue ) ; element [ '$$model' ] = model ; } catch ( e ) { if ( SPForm . DEBUG ) { console . warn ( 'Error in Knockout handler spDateTime init()...' ) ; throw e ; } } } , update : function ( element , valueAccessor , allBindings , viewModel , bindingContext ) { try { var modelValue = valueAccessor ( ) ; var date = Utils . parseDate ( ko . unwrap ( modelValue ) ) ; if ( element . tagName . toLowerCase ( ) == 'input' ) { var model = element [ '$$model' ] ; if ( ! ! model ) { model . setDisplayValue ( modelValue ) ; } } else { $ ( element ) . text ( DateTimeModel . toString ( modelValue ) ) ; } } catch ( e ) { if ( SPForm . DEBUG ) { console . warn ( 'Error in Knockout handler spDateTime update()...' ) ; throw e ; } } } } ; } }