import { Component , ElementRef , HostBinding , HostListener , OnDestroy , Input , OnInit } from '@angular/core' ; import { EditorView } from 'prosemirror-view' ; import { Subscription } from 'rxjs' ; import Icon from '../../../icons' ; import { NgxEditorService } from '../../../editor.service' ; import { MenuService } from '../menu.service' ; import { TextColor , TextBackgroundColor } from '../MenuCommands' ; type Command = typeof TextColor | typeof TextBackgroundColor ; @ Component ( { selector : 'ngx-color-picker' , templateUrl : './color-picker.component.html' , styleUrls : [ './color-picker.component.scss' ] } ) export class ColorPickerComponent implements OnInit , OnDestroy { @ Input ( ) presets : string [ ] [ ] ; @ Input ( ) type : string ; constructor ( private el , private menuService , private ngxeService ) { } @ HostBinding ( 'class.NgxEditor__MenuItem--Active' ) get valid ( ) : boolean { return this . isActive || this . showPopup ; } @ HostBinding ( 'class.NgxEditor--Disabled' ) get disabled ( ) : boolean { return ! this . canExecute ; } get title ( ) : string { return this . getLabel ( this . type === 'text_color' ? 'text_color' : 'background_color' ) ; } get icon ( ) : string { return Icon . get ( this . type === 'text_color' ? 'text_color' : 'color_fill' ) ; } private get command ( ) : Command { return this . type === 'text_color' ? TextColor : TextBackgroundColor ; } private updateSubscription : Subscription ; private editorView : EditorView ; showPopup = false ; isActive = false ; activeColors : string [ ] = [ ] ; private canExecute = true ; getContrastYIQ ( hexcolor ) { hexcolor = hexcolor . replace ( '#' , '' ) ; const r = parseInt ( hexcolor . substr ( 0 , 2 ) , 16 ) ; const g = parseInt ( hexcolor . substr ( 2 , 2 ) , 16 ) ; const b = parseInt ( hexcolor . substr ( 4 , 2 ) , 16 ) ; const yiq = ( ( r * 299 ) + ( g * 587 ) + ( b * 114 ) ) / 1000 ; return ( yiq >= 128 ) ? 'black' : 'white' ; } @ HostListener ( 'document:mousedown' , [ '$event' ] ) onDocumentClick ( e ) { if ( ! this . el . nativeElement . contains ( e . target ) && this . showPopup ) { this . hidePopup ( ) ; } } private hidePopup ( ) { this . showPopup = false ; } togglePopup ( e ) { e . preventDefault ( ) ; if ( e . button !== 0 ) { return ; } this . showPopup = ! this . showPopup ; } remove ( e ) { e . preventDefault ( ) ; const { state , dispatch } = this . editorView ; this . command . remove ( ) ( state , dispatch ) ; this . hidePopup ( ) ; } onColorSelect ( e , color ) { e . preventDefault ( ) ; if ( e . button !== 0 ) { return ; } const { state , dispatch } = this . editorView ; if ( this . type === 'text_color' ) { const attrs = { color } ; this . command . apply ( attrs ) ( state , dispatch ) ; } else { const attrs = { backgroundColor : color } ; this . command . apply ( attrs ) ( state , dispatch ) ; } if ( ! this . editorView . hasFocus ( ) ) { this . editorView . focus ( ) ; } this . hidePopup ( ) ; } private update = ( view ) => { const { state } = view ; this . canExecute = this . command . canExecute ( state ) ; this . isActive = this . command . isActive ( state ) ; this . activeColors = [ ] ; if ( this . isActive ) { this . activeColors = this . command . getActiveColors ( state ) ; } } ; getLabel ( key ) { return this . ngxeService . locals . get ( key ) ; } ngOnInit ( ) { this . editorView = this . menuService . editor . view ; this . updateSubscription = this . menuService . editor . update . subscribe ( ( view ) => { this . update ( view ) ; } ) ; } ngOnDestroy ( ) { this . updateSubscription . unsubscribe ( ) ; } }