@ -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,7 +45,8 @@ export default class DeckCardEditor extends Vue {
private contentInFocus = false
private contentInFocus = false
private menuState : State = {
private defaultMenuState ( ) : State {
return {
bold : false ,
bold : false ,
italic : false ,
italic : false ,
paragraph : true ,
paragraph : true ,
@ -60,33 +58,20 @@ export default class DeckCardEditor extends Vue {
separator : false ,
separator : false ,
statBlock : false
statBlock : false
}
}
private clearMarks ( ) {
marks . forEach ( mark => {
this . menuState [ mark ] = false
} )
}
}
private toggleBlock ( name : string ) {
private menuState = this . defaultMenuState ( )
blocks . forEach ( block => {
this . menuState [ block ] = false
} )
this . menuState [ name ] = true
}
private setMenuState ( elementName : string , parentName ? : string ) {
private resetMenuState ( ) {
const stateName = elementNameToMenuState [ elementName ]
this . menuState = this . defaultMenuState ( )
}
/ / 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
private setMenuState ( marks : string [ ] , block : string ) {
if ( marks . indexOf ( stateName ) >= 0 && parentName ) {
this . resetMenuState ( )
const parentStateName = elementNameToMenuState [ parentName ]
marks . forEach ( mark => { this . menuState [ mark ] = 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
if ( block !== 'paragraph' ) {
this . menuState [ stateName ] = true
this . menuState . paragraph = false
/ / 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 . menuState [ block ] = true
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 ( ) {