You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
207 lines
8.8 KiB
JavaScript
207 lines
8.8 KiB
JavaScript
/**
|
|
* @license
|
|
* Copyright (C) 2013 KO GmbH <copyright@kogmbh.com>
|
|
*
|
|
* @licstart
|
|
* The JavaScript code in this page is free software: you can redistribute it
|
|
* and/or modify it under the terms of the GNU Affero General Public License
|
|
* (GNU AGPL) as published by the Free Software Foundation, either version 3 of
|
|
* the License, or (at your option) any later version. The code is distributed
|
|
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
|
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU AGPL for more details.
|
|
*
|
|
* As additional permission under GNU AGPL version 3 section 7, you
|
|
* may distribute non-source (e.g., minimized or compacted) forms of
|
|
* that code without the copy of the GNU GPL normally required by
|
|
* section 4, provided you include this license notice and a URL
|
|
* through which recipients can access the Corresponding Source.
|
|
*
|
|
* As a special exception to the AGPL, any HTML file which merely makes function
|
|
* calls to this code, and for that purpose includes it by reference shall be
|
|
* deemed a separate work for copyright law purposes. In addition, the copyright
|
|
* holders of this code give you permission to combine this code with free
|
|
* software libraries that are released under the GNU LGPL. You may copy and
|
|
* distribute such a system following the terms of the GNU AGPL for this code
|
|
* and the LGPL for the libraries. If you modify this code, you may extend this
|
|
* exception to your version of the code, but you are not obligated to do so.
|
|
* If you do not wish to do so, delete this exception statement from your
|
|
* version.
|
|
*
|
|
* This license applies to this entire compilation.
|
|
* @licend
|
|
* @source: http://www.webodf.org/
|
|
* @source: http://gitorious.org/webodf/webodf/
|
|
*/
|
|
|
|
/*global runtime,define,require,document,dijit */
|
|
|
|
define("webodf/editor/widgets/dialogWidgets/fontEffectsPane", [], function () {
|
|
"use strict";
|
|
|
|
var FontEffectsPane = function (callback) {
|
|
var self = this,
|
|
editorSession,
|
|
contentPane,
|
|
form,
|
|
preview,
|
|
textColorPicker,
|
|
backgroundColorPicker,
|
|
fontPicker;
|
|
|
|
this.widget = function () {
|
|
return contentPane;
|
|
};
|
|
|
|
this.value = function () {
|
|
var textProperties = form.get('value'),
|
|
textStyle = textProperties.textStyle;
|
|
|
|
textProperties.fontWeight = (textStyle.indexOf('bold') !== -1)
|
|
? 'bold'
|
|
: 'normal';
|
|
textProperties.fontStyle = (textStyle.indexOf('italic') !== -1)
|
|
? 'italic'
|
|
: 'normal';
|
|
textProperties.underline = (textStyle.indexOf('underline') !== -1)
|
|
? 'solid'
|
|
: 'none';
|
|
|
|
delete textProperties.textStyle;
|
|
return textProperties;
|
|
};
|
|
|
|
this.setStyle = function (styleName) {
|
|
var style = editorSession.getParagraphStyleAttributes(styleName)['style:text-properties'],
|
|
s_bold,
|
|
s_italic,
|
|
s_underline,
|
|
s_fontSize,
|
|
s_fontName,
|
|
s_color,
|
|
s_backgroundColor;
|
|
|
|
if (style !== undefined) {
|
|
s_bold = style['fo:font-weight'];
|
|
s_italic = style['fo:font-style'];
|
|
s_underline = style['style:text-underline-style'];
|
|
s_fontSize = parseFloat(style['fo:font-size']);
|
|
s_fontName = style['style:font-name'];
|
|
s_color = style['fo:color'];
|
|
s_backgroundColor = style['fo:background-color'];
|
|
|
|
form.attr('value', {
|
|
fontName: s_fontName && s_fontName.length ? s_fontName : 'Arial',
|
|
fontSize: isNaN(s_fontSize) ? 12 : s_fontSize,
|
|
textStyle: [
|
|
s_bold,
|
|
s_italic,
|
|
s_underline === 'solid' ? 'underline' : undefined
|
|
]
|
|
});
|
|
textColorPicker.set('value', s_color && s_color.length ? s_color : '#000000');
|
|
backgroundColorPicker.set('value', s_backgroundColor && s_backgroundColor.length ? s_backgroundColor : '#ffffff');
|
|
|
|
} else {
|
|
// TODO: Use default style here
|
|
form.attr('value', {
|
|
fontFamily: 'sans-serif',
|
|
fontSize: 12,
|
|
textStyle: []
|
|
});
|
|
textColorPicker.set('value', '#000000');
|
|
backgroundColorPicker.set('value', '#ffffff');
|
|
}
|
|
|
|
};
|
|
|
|
function init(cb) {
|
|
require([
|
|
"dojo",
|
|
"dojo/ready",
|
|
"dojo/dom-construct",
|
|
"dijit/layout/ContentPane",
|
|
"dojox/widget/ColorPicker",
|
|
"webodf/editor/widgets/fontPicker"
|
|
], function (dojo, ready, domConstruct, ContentPane, ColorPicker, FontPicker) {
|
|
var translator = document.translator,
|
|
editorBase = dojo.config && dojo.config.paths &&
|
|
dojo.config.paths['webodf/editor'];
|
|
runtime.assert(editorBase, "webodf/editor path not defined in dojoConfig");
|
|
ready(function () {
|
|
contentPane = new ContentPane({
|
|
title: translator("fontEffects"),
|
|
href: editorBase+"/widgets/dialogWidgets/fontEffectsPane.html",
|
|
preload: true
|
|
});
|
|
|
|
contentPane.onLoad = function () {
|
|
var textColorTB = dijit.byId('textColorTB'),
|
|
backgroundColorTB = dijit.byId('backgroundColorTB');
|
|
|
|
form = dijit.byId('fontEffectsPaneForm');
|
|
document.translateContent(form.domNode);
|
|
|
|
preview = document.getElementById('previewText');
|
|
textColorPicker = dijit.byId('textColorPicker');
|
|
backgroundColorPicker = dijit.byId('backgroundColorPicker');
|
|
|
|
// Bind dojox widgets' values to invisible form elements, for easy parsing
|
|
textColorPicker.onChange = function (value) {
|
|
textColorTB.set('value', value);
|
|
};
|
|
backgroundColorPicker.onChange = function (value) {
|
|
backgroundColorTB.set('value', value);
|
|
};
|
|
|
|
fontPicker = new FontPicker(function (picker) {
|
|
picker.widget().startup();
|
|
document.getElementById('fontPicker').appendChild(picker.widget().domNode);
|
|
picker.widget().name = 'fontName';
|
|
picker.setEditorSession(editorSession);
|
|
});
|
|
|
|
// Automatically update preview when selections change
|
|
form.watch('value', function () {
|
|
if (form.value.textStyle.indexOf('bold') !== -1) {
|
|
preview.style.fontWeight = 'bold';
|
|
} else {
|
|
preview.style.fontWeight = 'normal';
|
|
}
|
|
if (form.value.textStyle.indexOf('italic') !== -1) {
|
|
preview.style.fontStyle = 'italic';
|
|
} else {
|
|
preview.style.fontStyle = 'normal';
|
|
}
|
|
if (form.value.textStyle.indexOf('underline') !== -1) {
|
|
preview.style.textDecoration = 'underline';
|
|
} else {
|
|
preview.style.textDecoration = 'none';
|
|
}
|
|
|
|
preview.style.fontSize = form.value.fontSize + 'pt';
|
|
preview.style.fontFamily = fontPicker.getFamily(form.value.fontName);
|
|
preview.style.color = form.value.color;
|
|
preview.style.backgroundColor = form.value.backgroundColor;
|
|
});
|
|
};
|
|
|
|
return cb();
|
|
});
|
|
});
|
|
}
|
|
|
|
this.setEditorSession = function(session) {
|
|
editorSession = session;
|
|
if (fontPicker) {
|
|
fontPicker.setEditorSession(editorSession);
|
|
}
|
|
};
|
|
|
|
init(function () {
|
|
return callback(self);
|
|
});
|
|
};
|
|
|
|
return FontEffectsPane;
|
|
});
|