import * as ko from "knockout" ; import "./one-selected.scss" ; import { SurveyPropertyOneSelectedEditor } from "../propertyEditors/propertyOneSelectedEditor" ; import { SurveyElementEditorContentModel } from "../questionEditors/questionEditor" ; const templateHtml = require ( "./one-selected.html" ) ; export class PropertyEditorOneSelectedViewModel { public availableClassesContainer : HTMLElement ; constructor ( public koAvailableClasses , public koAllowAddRemoveItems , public readOnly , public onAddClick , public koSelected , public getLocString , public getItemText , public koChangeCounter , public model , public onDeleteClick , public componentInfo , public afterRender ) { afterRender ( ) ; this . setupAvailableClassesContainer ( componentInfo . element . nextSibling ) ; } public get originalValue ( ) : any { return this . model . originalValue ; } public get selectedObjectEditor ( ) : ko . Observable < SurveyElementEditorContentModel > { return this . model . selectedObjectEditor ; } public setupAvailableClassesContainer = ( rootElement ) => { const className = "svd-available-classes-container" ; const element = rootElement . querySelector ( "." + className ) ; this . availableClassesContainer = element ; element . onfocus = ( event ) => { if ( this . availableClassesContainer . className . indexOf ( "--active" ) !== - 1 ) return ; this . toggleClassesContainer ( ) ; } ; element . onblur = ( event ) => { if ( this . availableClassesContainer . className . indexOf ( "--active" ) !== - 1 && event . relatedTarget && ! event . currentTarget [ "contains" ] ( event . relatedTarget ) ) { this . toggleClassesContainer ( ) ; } else { event . relatedTarget && event . relatedTarget [ "focus" ] ( ) ; } } ; } ; public toggleClassesContainer ( ) { const element = this . availableClassesContainer ; const className = "svd-available-classes-container" ; const activeClassName = className + "--active" ; if ( element . className . indexOf ( activeClassName ) !== - 1 ) { element . className = className ; this . availableClassesContainer . blur ( ) ; } else { element . className = className + " " + activeClassName ; this . availableClassesContainer . focus ( ) ; } } } ko . components . register ( "svd-property-editor-one-selected" , { viewModel : { createViewModel : ( params , componentInfo ) => { const model = params . model ; return new PropertyEditorOneSelectedViewModel ( model . koAvailableClasses , model . koAllowAddRemoveItems , model . readOnly , model . onAddClick , model . koSelected , model . getLocString , model . getItemText , model . koChangeCounter , model , model . onDeleteClick , componentInfo , ( ) => { typeof params . afterRender === "function" && params . afterRender . call ( model , componentInfo ) ; typeof model . koAfterRender === "function" && model . koAfterRender . call ( model , componentInfo ) ; } ) ; } , } , template : templateHtml , } ) ;