@ -29,11 +29,8 @@
import { Component , Prop , Vue } from 'vue-property-decorator'
import { Component , Prop , Vue } from 'vue-property-decorator'
import DeckCardEditorMenu from '@/components/deck-card-editor-menu.vue'
import DeckCardEditorMenu from '@/components/deck-card-editor-menu.vue'
import {
import {
elementNameToMenuState ,
menuActionToCommand ,
menuActionToCommand ,
getElementAndParentName ,
getActiveMarksAndBlocks ,
marks ,
blocks ,
State ,
State ,
movementKeys ,
movementKeys ,
controlSequenceKeys
controlSequenceKeys
@ -48,45 +45,33 @@ export default class DeckCardEditor extends Vue {
private contentInFocus = false
private contentInFocus = false
private menuState : State = {
private defaultMenuState ( ) : State {
bold : false ,
return {
italic : false ,
bold : false ,
paragraph : true ,
italic : false ,
heading1 : false ,
paragraph : true ,
heading2 : false ,
heading1 : false ,
heading3 : false ,
heading2 : false ,
bulletList : false ,
heading3 : false ,
spacer : false ,
bulletList : false ,
separator : false ,
spacer : false ,
statBlock : false
separator : false ,
statBlock : false
}
}
}
private clearMarks ( ) {
private menuState = this . defaultMenuState ( )
marks . forEach ( mark => {
this . menuState [ mark ] = false
} )
}
private toggleBlock ( name : string ) {
private resetMenuState ( ) {
blocks . forEach ( block => {
this . menuState = this . defaultMenuState ( )
this . menuState [ block ] = false
} )
this . menuState [ name ] = true
}
}
private setMenuState ( elementName : string , parentName ? : string ) {
private setMenuState ( marks : string [ ] , block : string ) {
const stateName = elementNameToMenuState [ elementName ]
this . resetMenuState ( )
marks . forEach ( mark => { this . menuState [ mark ] = true } )
/ / m a r k s a r e a l w a y s i n s i d e a b l o c k e l e m e n t
if ( block !== 'paragraph' ) {
if ( marks . indexOf ( stateName ) >= 0 && parentName ) {
this . menuState . paragraph = false
const parentStateName = elementNameToMenuState [ parentName ]
this . menuState [ block ] = true
/ / m a r k s a r e i n c l u s i v e l i k e c h e c k b o x e s
this . menuState [ stateName ] = true
/ / b u t b l o c k s a r e e x c l u s i v e l i k e r a d i o b u t t o n s
this . toggleBlock ( parentStateName )
} else {
this . clearMarks ( )
this . toggleBlock ( stateName )
}
}
}
}
@ -105,11 +90,8 @@ export default class DeckCardEditor extends Vue {
const sel = window . getSelection ( ) ? . focusNode
const sel = window . getSelection ( ) ? . focusNode
if ( ! sel ) return
if ( ! sel ) return
const [ elementName , parentName ] = getElementAndParentName ( sel )
const { marks , block } = getActiveMarksAndBlocks ( sel as HTMLElement )
console . log ( 'focussed element' , elementName , parentName )
this . setMenuState ( marks , block )
if ( ! elementName ) return
this . setMenuState ( elementName , parentName )
}
}
private syncMenuStateIfFocussed ( ) {
private syncMenuStateIfFocussed ( ) {