Mercurial > libervia-web
changeset 353:ddb909ab5cbc
browser_side: wysiwyg edtion, first steps (do not use the buttons yet)
author | souliane <souliane@mailoo.org> |
---|---|
date | Thu, 13 Feb 2014 01:33:24 +0100 |
parents | 2610443b05a2 |
children | c417a7acfe44 |
files | browser_side/richtext.py public/libervia.css |
diffstat | 2 files changed, 60 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/browser_side/richtext.py Thu Feb 13 01:17:07 2014 +0100 +++ b/browser_side/richtext.py Thu Feb 13 01:33:24 2014 +0100 @@ -19,6 +19,7 @@ from pyjamas.ui.TextArea import TextArea from pyjamas.ui.Button import Button +from pyjamas.ui.CheckBox import CheckBox from pyjamas.ui.DialogBox import DialogBox from pyjamas.ui.Label import Label from pyjamas.ui.HTML import HTML @@ -140,10 +141,54 @@ label = Label(_("Syntax: %s") % syntax) label.addStyleName("richTextSyntaxLabel") self.toolbar.add(label) + self.wysiwyg_button = CheckBox('Wysiwyg edition') + wysiywgCb = lambda sender: self.setWysiwyg(sender.getChecked()) + self.wysiwyg_button.addClickListener(wysiywgCb) + self.toolbar.add(self.wysiwyg_button) self.getFlexCellFormatter().setColSpan(self.toolbar_offset + count, 0, 2) self.setWidget(self.toolbar_offset + count, 0, self.toolbar) count += 1 + def setWysiwyg(self, wysiwyg, init=False): + """Toggle the edition mode between rich content syntax and wysiwyg. + @param wysiwyg: boolean value + @param init: set to True to re-init without switching the widgets.""" + def setWysiwyg(): + self.wysiwyg = wysiwyg + if hasattr(self, 'wysiwyg_button'): + self.wysiwyg_button.setChecked(wysiwyg) + if not wysiwyg: + self.display.removeStyleName('richTextWysiwyg') + + if init: + setWysiwyg() + return + + self.getFlexCellFormatter().setColSpan(self.content_offset, 0, 2) + if wysiwyg: + def syntaxConvertCb(text): + self.display.setContent({'text': text}) + self.textarea.removeFromParent() # XXX: force as it is not always done... + self.setWidget(self.content_offset, 0, self.display) + self.display.addStyleName('richTextWysiwyg') + self.display.edit(True) + content = self.getContent() + if content['text'] and content['syntax'] != Const.SYNTAX_XHTML: + self.host.bridge.call('syntaxConvert', syntaxConvertCb, content['text'], content['syntax'], Const.SYNTAX_XHTML) + else: + syntaxConvertCb(content['text']) + else: + syntaxConvertCb = lambda text: self.textarea.setText(text) + text = self.display.getContent()['text'] + if text and self.toolbar.syntax != Const.SYNTAX_XHTML: + self.host.bridge.call('syntaxConvert', syntaxConvertCb, text) + else: + syntaxConvertCb(text) + self.setWidget(self.content_offset, 0, self.textarea) + self.textarea.setWidth('100%') # CSS width doesn't do it, don't know why + + setWysiwyg() # do it in the end because it affects self.getContent + def addToolbarButton(self, syntax, key): """Add a button with the defined parameters.""" button = Button('<img src="%s" class="richTextIcon" />' % @@ -175,7 +220,10 @@ def getContent(self): assert(hasattr(self, 'textarea')) assert(hasattr(self, 'toolbar')) - content = {'text': self.strproc(self.textarea.getText()), 'syntax': self.toolbar.syntax} + if self.wysiwyg: + content = {'text': self.display.getContent()['text'], 'syntax': Const.SYNTAX_XHTML} + else: + content = {'text': self.strproc(self.textarea.getText()), 'syntax': self.toolbar.syntax} if hasattr(self, 'title_panel'): content.update({'title': self.strproc(self.title_panel.getText())}) return content @@ -191,9 +239,11 @@ """ self.refresh(edit) BaseTextEditor.edit(self, edit, abort, sync) - if (edit and abort) or sync: + if (edit and abort): return - + self.setWysiwyg(False, init=True) # /!\ it affects self.getContent + if sync: + return # the following must NOT be done at each UI refresh! content = self._original_content if edit:
--- a/public/libervia.css Thu Feb 13 01:17:07 2014 +0100 +++ b/public/libervia.css Thu Feb 13 01:33:24 2014 +0100 @@ -1285,6 +1285,13 @@ height: 250px; } +.richTextWysiwyg { + min-height: 50px; + background-color: white; + border: 1px solid #a0a0a0; + border-radius: 5px; +} + .richTextSyntaxLabel { text-align: right; margin: 14px 0px 0px 14px;