Skip to content
Snippets Groups Projects
Commit d07c6e37 authored by john's avatar john
Browse files

comments can now be used normally in read-only mode

parent cf12f14f
No related branches found
No related tags found
No related merge requests found
import { each, keys, includes } from 'lodash'
import {
ContainerEditor as SubstanceContainerEditor,
Surface,
......@@ -31,11 +32,18 @@ class ContainerEditor extends SubstanceContainerEditor {
}
// open for editing
// TODO -- should maybe change to isEditable ?
if (!this.props.disabled) {
el.addClass('sm-enabled')
el.setAttribute('contenteditable', true)
}
// editing locked, selection open (for comments)
if (this.isReadOnlyMode()) {
const documentSession = this.getDocumentSession()
documentSession.on('didUpdate', this.disableToolbar, this)
}
return el
}
......@@ -43,6 +51,8 @@ class ContainerEditor extends SubstanceContainerEditor {
Surface.prototype.didMount.apply(this, arguments)
this.container.on('nodes:changed', this.onContainerChange, this)
if (this.isEmpty()) this.createText()
if (this.isReadOnlyMode()) this.links()
}
// create an empty paragraph with an empty node
......@@ -73,6 +83,33 @@ class ContainerEditor extends SubstanceContainerEditor {
this.rerender()
this.setSelection(newSel)
}
// only runs if editor is in read-only mode
// disables all tools, apart from comments
disableToolbar () {
const commandStates = this.getCommandStates()
each(keys(commandStates), key => {
const allowed = ['comment', 'save', 'undo', 'redo']
if (!includes(allowed, key)) commandStates[key].disabled = true
})
}
getCommandStates () {
const commandManager = this.context.commandManager
return commandManager.getCommandStates()
}
isReadOnlyMode () {
return !this.isEditable() && this.isSelectable()
}
links () {
const allLinks = this.el.findAll('a')
each(allLinks, link =>
link.attr('target', '_blank')
)
}
}
export default ContainerEditor
import {
ProseEditor,
ProseEditorOverlayTools,
ScrollPane,
SplitPane,
TOCProvider
......@@ -8,7 +9,7 @@ import {
import Comments from './panes/Comments/CommentBoxList'
import CommentsProvider from './panes/Comments/CommentsProvider'
import ContainerEditor from './ContainerEditor'
import Overlay from './Overlay'
// import Overlay from './Overlay'
import Notes from './panes/Notes/Notes'
import NotesProvider from './panes/Notes/NotesProvider'
import TableOfContents from './panes/TableOfContents/TableOfContents'
......@@ -69,7 +70,7 @@ class Editor extends ProseEditor {
var contentPanel = $$(ScrollPane, {
scrollbarPosition: 'right',
overlay: Overlay
overlay: ProseEditorOverlayTools
})
.append(editorWithComments)
.attr('id', 'content-panel')
......@@ -132,20 +133,19 @@ class Editor extends ProseEditor {
}
getChildContext () {
var doc = this.doc
// TODO -- check whether this is correct
var oldContext = super.getChildContext()
const oldContext = super.getChildContext()
const doc = this.doc
// toc provider
var tocProvider = new TOCProvider(doc, {
const tocProvider = new TOCProvider(doc, {
containerId: 'body'
})
// // notes provider
var notesProvider = new NotesProvider(doc)
const notesProvider = new NotesProvider(doc)
// // comments provider
var commentsProvider = new CommentsProvider(doc, {
const commentsProvider = new CommentsProvider(doc, {
commandManager: this.commandManager,
comments: this.props.fragment.comments,
containerId: this.props.containerId,
......@@ -156,10 +156,11 @@ class Editor extends ProseEditor {
})
// attach all to context
return { ...oldContext,
tocProvider: tocProvider,
notesProvider: notesProvider,
commentsProvider: commentsProvider
return {
...oldContext,
tocProvider,
notesProvider,
commentsProvider
}
}
}
......
import { ProseEditorOverlayTools } from 'substance'
import { each, includes, keys } from 'lodash'
class Overlay extends ProseEditorOverlayTools {
getActiveTools () {
const surface = this.getSurface()
if (!surface) return []
const activeTools = super.getActiveTools()
if (!surface.isEditable() && surface.isSelectable()) {
const commandStates = this.getCommandStates()
each(keys(commandStates), key => {
const allowed = ['comment', 'save']
if (!includes(allowed, key)) commandStates[key].disabled = true
})
console.log('filter it', activeTools)
}
return activeTools
}
getCommandStates () {
const commandManager = this.context.commandManager
return commandManager.getCommandStates()
}
getContainerId () {
const editor = this.getEditor()
return editor.props.containerId
}
getEditor () {
return this.context.controller
}
getSurface () {
const containerId = this.getContainerId()
const surfaceManager = this.context.surfaceManager
return surfaceManager.getSurface(containerId)
}
}
export default Overlay
......@@ -104,7 +104,7 @@ export default class SimpleEditor extends React.Component {
let viewMode = !canEdit
? (
<Alert bsStyle='warning' className='view-mode'>
<span>Editor is in View Mode</span>
<span>Editor is in Read-Only Mode</span>
</Alert>
)
: null
......
......@@ -14,6 +14,7 @@ $primary: #eee;
$ultra-light-gray: #fafafa;
$black: #000;
$shadow: rgba(0, 0, 0, .05);
$teal: #46b9ba;
$toolbar-active-bg: rgba(204, 204, 204, .75);
$transparent-black: rgba(0, 0, 0, .75);
......@@ -24,9 +25,6 @@ $white: #fff;
position: relative;
.view-mode {
// background-color: $primary;
// border-bottom: 1px solid $border;
// border-top: 1px solid $border;
height: 44px;
position: fixed;
right: 0;
......@@ -53,7 +51,6 @@ $white: #fff;
background-color: $primary;
border: 1px solid $border;
border-right: 0;
// padding: 1px;
padding-left: 0;
button {
......@@ -114,7 +111,7 @@ $white: #fff;
.sc-switch-text-type {
margin-left: 1px;
width: 150px !important;
width: 150px;
.se-toggle {
background: transparent;
......@@ -203,7 +200,7 @@ $white: #fff;
.se-context-section {
background-color: $ultra-light-gray;
border-left: 1px solid $light-gray;
box-shadow: inset 0 0 10px rgba(0, 0, 0, .05);
box-shadow: inset 0 0 10px $shadow;
}
.sc-comments-pane {
......
......@@ -7,12 +7,11 @@ import {
class CommentBubble extends Tool {
render ($$) {
const mode = this.getMode()
const title = 'Create a new comment'
let commands = this.getCommentState()
if (commands.mode !== 'create') return $$('div')
commands.active = true
this.setBubblePosition()
if (mode !== 'create') return $$('div')
const icon = $$(Icon, { icon: 'fa-comment' })
.addClass('sc-comment-icon')
......@@ -31,18 +30,23 @@ class CommentBubble extends Tool {
// calculated relative to the overlay container, which gets positioned
// wrong on resize (substance bug -- TODO)
didMount () {
this.position()
DefaultDOMElement.getBrowserWindow().on('resize', this.didUpdate, this)
}
didUpdate () {
if (this.el.getChildCount() === 0) return
this.setBubblePosition()
this.position()
}
dispose () {
DefaultDOMElement.getBrowserWindow().off(this)
}
position () {
if (this.el.getChildCount() === 0) return
this.setBubblePosition()
}
setBubblePosition () {
// without this check, the editor will break on first load
const surface = this.getSurface()
......
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