diff --git a/src/javascript/gui/richtext.js b/src/javascript/gui/richtext.js index 8149c6ea46..b7d4c423ff 100644 --- a/src/javascript/gui/richtext.js +++ b/src/javascript/gui/richtext.js @@ -152,6 +152,15 @@ return false; }; + RichText.prototype.commandValue = function(q) { + try { + return this.getDocument().queryCommandValue(q); + } catch ( e ) { + console.warn('RichText::commandValue()', q, 'error', e, e.stack); + } + return null; + }; + RichText.prototype.setContent = function(c) { this.hasChanged = false; this.strlen = c.length; @@ -188,6 +197,13 @@ return null; }; + RichText.prototype.getWindow = function() { + if ( this.$view ) { + return this.$view.contentWindow; + } + return null; + }; + RichText.prototype.blur = function() { if ( !GUIElement.prototype.blur.apply(this, arguments) ) { return false; } if ( this.$view && this.$view.contentWindow ) { diff --git a/src/javascript/gui/toolbar.js b/src/javascript/gui/toolbar.js index aa07bdd8cf..ace3733b11 100644 --- a/src/javascript/gui/toolbar.js +++ b/src/javascript/gui/toolbar.js @@ -93,6 +93,10 @@ var item = self.items[i] || null; var el = document.createElement('li'); + if ( item ) { + self.items[i]._element = el; + } + if ( !item ) { el.className = 'Separator ' + i; self.$container.appendChild(el); @@ -149,17 +153,7 @@ }; ToolBar.prototype.getItem = function(name) { - var result = null; - if ( this.$container ) { - this.$container.childNodes.forEach(function(child, i) { - if ( (new RegExp(name)).test(child.className) ) { - result = child; - return false; - } - return true; - }); - } - return result; + return this.items[name]; }; ///////////////////////////////////////////////////////////////////////////// diff --git a/src/javascript/utils.js b/src/javascript/utils.js index c1ea91eb15..52de052d3b 100644 --- a/src/javascript/utils.js +++ b/src/javascript/utils.js @@ -423,9 +423,9 @@ } var hex = [ - (r).toString( 16 ), - (g).toString( 16 ), - (b).toString( 16 ) + parseInt(r, 10).toString( 16 ), + parseInt(g, 10).toString( 16 ), + parseInt(b, 10).toString( 16 ) ]; Object.keys(hex).forEach(function(i) { diff --git a/src/packages/default/Draw/main.js b/src/packages/default/Draw/main.js index ec13a0be94..1e620cc7a2 100644 --- a/src/packages/default/Draw/main.js +++ b/src/packages/default/Draw/main.js @@ -349,7 +349,7 @@ self.currentStyle[type] = hex; if ( toolBar ) { var className = (type == "fg") ? "foregroundColor" : "backgroundColor"; - toolBar.getItem(className).getElementsByClassName('Color')[0].style.backgroundColor = hex; + toolBar.getItem(className)._element.getElementsByClassName('Color')[0].style.backgroundColor = hex; } }; @@ -357,14 +357,14 @@ var txt = {round: "Round", miter: "Miter", bevel: "Bevel"}; self.currentStyle.lineJoin = type; if ( toolBar ) { - toolBar.getItem('lineJoin').getElementsByClassName('LineJoin')[0].innerHTML = _(txt[type]); + toolBar.getItem('lineJoin')._element.getElementsByClassName('LineJoin')[0].innerHTML = _(txt[type]); } }; var _selectLineWidth = function(width) { self.currentStyle.lineWidth = width; if ( toolBar ) { - toolBar.getItem('lineWidth').getElementsByClassName('LineWidth')[0].innerHTML = width; + toolBar.getItem('lineWidth')._element.getElementsByClassName('LineWidth')[0].innerHTML = width; } }; @@ -375,7 +375,7 @@ self.currentStyle.stroke = !self.currentStyle.stroke; } if ( toolBar ) { - toolBar.getItem('enableStroke').getElementsByClassName('EnableStroke')[0].innerHTML = _(self.currentStyle.stroke ? "Stroked" : "No stroke"); + toolBar.getItem('enableStroke')._element.getElementsByClassName('EnableStroke')[0].innerHTML = _(self.currentStyle.stroke ? "Stroked" : "No stroke"); } }; @@ -916,7 +916,7 @@ var toolBar = this._getGUIElement('ApplicationDrawToolBar'); if ( toolBar ) { var className = (type == "fg") ? "foregroundColor" : "backgroundColor"; - toolBar.getItem(className).getElementsByClassName('Color')[0].style.backgroundColor = val; + toolBar.getItem(className)._element.getElementsByClassName('Color')[0].style.backgroundColor = val; } this._focus(); diff --git a/src/packages/default/Writer/main.js b/src/packages/default/Writer/main.js index f261a5ae84..bd803ac3f9 100644 --- a/src/packages/default/Writer/main.js +++ b/src/packages/default/Writer/main.js @@ -27,7 +27,7 @@ * @author Anders Evenrud * @licence Simplified BSD License */ -(function(Application, Window, GUI, Dialogs, VFS) { +(function(Application, Window, GUI, Dialogs, VFS, Utils) { 'use strict'; ///////////////////////////////////////////////////////////////////////////// @@ -86,6 +86,7 @@ // Create window contents here var mb = this._addGUIElement(new GUI.MenuBar('WriterMenuBar'), root); var tb = this._addGUIElement(new GUI.ToolBar('WriterToolBar'), root); + var rt; var _createIcon = function(i) { return OSjs.API.getThemeResource(i, 'icon'); @@ -105,23 +106,29 @@ }], self); }; - var _setFont = function(name, size) { - self.command('fontName', name); - self.command('fontSize', size); - self.font = name; - self.fontSize = size; - tb.getItem('font').getElementsByTagName('span')[0].style.fontFamily = name; - tb.getItem('font').getElementsByTagName('span')[0].innerHTML = name + ' (' + size + ')'; + var _setFont = function(name, size, nocommand) { + if ( !nocommand ) { + self.command('fontName', name); + self.command('fontSize', size); + } + self.font = name || self.font; + self.fontSize = size || self.fontSize; + tb.getItem('font')._element.getElementsByTagName('span')[0].style.fontFamily = self.font; + tb.getItem('font')._element.getElementsByTagName('span')[0].innerHTML = self.font + ' (' + self.fontSize.toString() + ')'; }; - var _setTextColor = function(hex) { - self.command('foreColor', hex); + var _setTextColor = function(hex, nocommand) { + if ( !nocommand ) { + self.command('foreColor', hex); + } self.textColor = hex; - tb.getItem('textColor').getElementsByTagName('span')[0].style.color = hex; + tb.getItem('textColor')._element.getElementsByTagName('span')[0].style.color = hex; }; - var _setBackColor = function(hex) { - self.command('hiliteColor', hex); + var _setBackColor = function(hex, nocommand) { + if ( !nocommand ) { + self.command('hiliteColor', hex); + } self.backColor = hex; - tb.getItem('backColor').getElementsByTagName('span')[0].style.backgroundColor = hex; + tb.getItem('backColor')._element.getElementsByTagName('span')[0].style.backgroundColor = hex; }; var _action = function(ev, el, name, item) { @@ -150,6 +157,64 @@ } }; + function _updateToolbar() { + if ( rt ) { + var styles = { + fontName: rt.commandValue('fontName').replace(/^\'/, '').replace(/\'$/, ''), + fontSize: rt.commandValue('fontSize'), + foreColor: rt.commandValue('foreColor'), + hiliteColor: rt.commandValue('hiliteColor'), + justifyLeft: rt.commandValue('justifyLeft'), + justifyCenter: rt.commandValue('justifyCenter'), + justifyRight: rt.commandValue('justifyRight'), + bold: rt.commandValue('bold'), + italic: rt.commandValue('italic'), + underline: rt.commandValue('underline'), + strikeThrough: rt.commandValue('strikeThrough') + }; + + if ( !styles.foreColor.match(/^\#/) ) { + var tmp = styles.foreColor.replace(/\s/g, '').replace(/^rgb\(/, '').replace(/\)$/, '').split(','); + if ( tmp.length > 2 ) { + styles.foreColor = Utils.convertToHEX.apply(Utils, tmp); + } else { + styles.foreColor = self.textColor; + } + } + + if ( !styles.hiliteColor.match(/^\#/) ) { + var tmp = styles.hiliteColor.replace(/\s/g, '').replace(/^rgb\(/, '').replace(/\)$/, '').split(','); + if ( tmp.length > 2 ) { + styles.hiliteColor = Utils.convertToHEX.apply(Utils, tmp); + } else { + styles.hiliteColor = self.backColor; + } + } + + _setBackColor(styles.hiliteColor, true); + _setTextColor(styles.foreColor, true); + _setFont(styles.fontName, styles.fontSize, true); + + /* + if ( tb ) { + Utils.$removeClass(tb.getItem('justifyLeft')._element, 'Active'); + Utils.$removeClass(tb.getItem('justifyCenter')._element, 'Active'); + Utils.$removeClass(tb.getItem('justifyRight')._element, 'Active'); + + if ( styles.justifyLeft ) { + Utils.$addClass(tb.getItem('justifyLeft')._element, 'Active'); + } + if ( styles.justifyCenter ) { + Utils.$addClass(tb.getItem('justifyCenter')._element, 'Active'); + } + if ( styles.justifyRight ) { + Utils.$addClass(tb.getItem('justifyRight')._element, 'Active'); + } + } + */ + } + } + tb.addItem('bold', {toggleable: true, title: OSjs.API._('LBL_BOLD'), onClick: _action, icon: _createIcon('actions/format-text-bold.png')}); tb.addItem('italic', {toggleable: true, title: OSjs.API._('LBL_ITALIC'), onClick: _action, icon: _createIcon('actions/format-text-italic.png')}); tb.addItem('underline', {toggleable: true, title: OSjs.API._('LBL_UNDERLINE'), onClick: _action, icon: _createIcon('actions/format-text-underline.png')}); @@ -170,7 +235,14 @@ tb.render(); tb.addItem('indent', {title: OSjs.API._('LBL_INDENT'), onClick: _action, icon: _createIcon('actions/gtk-indent-ltr.png')}); - var rt = this._addGUIElement(new GUI.RichText('WriterRichText'), root); + rt = this._addGUIElement(new GUI.RichText('WriterRichText', {onInited: function() { + rt.getWindow().addEventListener('selectstart', function() { + _updateToolbar(); + }); + rt.getWindow().addEventListener('mouseup', function() { + _updateToolbar(); + }); + }}), root); /* var sb = this._addGUIElement(new GUI.StatusBar('WriterStatusBar'), root); @@ -267,7 +339,7 @@ var t = DEFAULT_FILENAME; if ( file ) { - t = OSjs.Utils.filename(file); + t = Utils.filename(file); } this._setTitle(this.title + " - " + t); @@ -376,4 +448,4 @@ OSjs.Applications = OSjs.Applications || {}; OSjs.Applications.ApplicationWriter = ApplicationWriter; -})(OSjs.Helpers.DefaultApplication, OSjs.Helpers.DefaultApplicationWindow, OSjs.GUI, OSjs.Dialogs, OSjs.VFS); +})(OSjs.Helpers.DefaultApplication, OSjs.Helpers.DefaultApplicationWindow, OSjs.GUI, OSjs.Dialogs, OSjs.VFS, OSjs.Utils);