Commit 972632d3 authored by chris's avatar chris

disabled state plus on click handlers

parent c17a6e9e
import { Command, documentHelpers } from 'substance'
import { Command } from 'substance'
class ChangeCaseCommand extends Command {
getCommandState(params) {
......@@ -8,14 +8,8 @@ class ChangeCaseCommand extends Command {
}
const selection = params.editorSession.getSelection()
const highlightings = documentHelpers.getPropertyAnnotationsForSelection(
params.editorSession.getDocument(),
params.editorSession.getSelection(),
{ type: 'highlighter' },
)
if (!selection.isCollapsed()) {
console.log('hereee?')
if (selection.isCollapsed() || selection.isContainerSelection()) {
newState.disabled = true
}
......
......@@ -6,10 +6,26 @@ class ChangeCaseTool extends Tool {
constructor(...args) {
super(...args)
this.DropDownOptions = [
{ name: 'Upper case', action: 'uppercase' },
{ name: 'Lower case', action: 'lowerase' },
{ name: 'Sentence case', action: 'sentencecase' },
{ name: 'Title case', action: 'titlecase' },
{
name: 'Upper case',
description: 'tranform all leters to upper case',
action: 'uppercase',
},
{
name: 'Lower case',
description: 'tranform all leters to lower case',
action: 'lowerase',
},
{
name: 'Sentence case',
description: 'tranform first letter only capped',
action: 'sentencecase',
},
{
name: 'Title case',
description: 'tranform first letter of all words capped',
action: 'titlecase',
},
]
}
......@@ -20,6 +36,7 @@ class ChangeCaseTool extends Tool {
let el = $$('div')
.addClass('change-case-wrapper')
.attr('id', 'change-case')
.append(
$$('div')
.addClass('choose-case')
......@@ -29,29 +46,34 @@ class ChangeCaseTool extends Tool {
.on('click', this.toggleDropdown),
)
if (this.props.commandState.disabled) {
el.addClass('sm-disabled')
}
let options = $$('span')
if (this.state.open) {
el.addClass('sm-open')
// dropdown options
let options = $$('div')
options = $$('div')
.addClass('se-options')
.ref('options')
forEach(this.DropDownOptions, (option, index) => {
let button = $$('button')
.addClass('se-option sm-' + option.name)
.addClass('se-option')
.attr('data-type', option)
.append(
$$('div')
.append(option.name)
.addClass('option-box')
.attr('title', `Add ${option.name} highlighting`),
.attr('title', option.description),
)
.on('click', () => this.addHighLighting(option.name))
.on('click', () => this.changeCase(option.action))
options.append(button)
})
el.append(options)
}
return el
return el.append(options)
}
toggleDropdown() {
......@@ -60,6 +82,41 @@ class ChangeCaseTool extends Tool {
})
}
changeCase(action) {
this.extendState({
open: false,
})
switch (action) {
case 'uppercase':
this.transformToUpper()
break
case 'lowerase':
this.transformToLower()
break
case 'sentencecase':
this.transformToSentence()
break
case 'titlecase':
this.transformToTitle()
break
}
}
transformToUpper() {
console.log('upper')
}
transformToLower() {
console.log('lower')
}
transformToSentence() {
console.log('sentence')
}
transformToTitle() {
console.log('title')
}
getInitialState() {
return {
open: false,
......
.change-case-wrapper {
width: 120px;
font-size: 13px;
font-family: 'Fira Sans';
&.sm-disabled {
cursor: default;
opacity: 0.4;
pointer-events: none;
}
.choose-case {
margin-top: 3px;
cursor: pointer;
......
......@@ -28,7 +28,7 @@ class HighLighterTool extends Tool {
.addClass('highlighter-wrapper')
.append(dropDownCarret)
if (this.props.disabled) el.addClass('sm-disabled')
if (this.props.commandState.disabled) el.addClass('sm-disabled')
if (this.state.open) {
el.addClass('sm-open')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment