You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.5 KiB
76 lines
2.5 KiB
define(["sugar-web/graphics/palette"], function (palette) {
|
|
|
|
'use strict';
|
|
|
|
var textpalette = {};
|
|
|
|
textpalette.TextPalette = function (textButton, toonModel, title) {
|
|
|
|
palette.Palette.call(this, textButton);
|
|
|
|
this.getPalette().id = "text-palette";
|
|
|
|
var containerElem = document.createElement('div');
|
|
|
|
var content = '<div class="row small">' +
|
|
'<label>' + title + '</label>' +
|
|
'</div>' +
|
|
'<div class="row expand">' +
|
|
'<textarea rows="8" id="editor" class="expand"></textarea>' +
|
|
'</div>';
|
|
|
|
|
|
var styleToolbar = '<div class="toolbar" id="text-style-toolbar">' +
|
|
'<button class="toolbutton" id="text-inc-size"></button>' +
|
|
'<button class="toolbutton" id="text-dec-size"></button>' +
|
|
'<button class="toolbutton" id="text-set-bold"></button>' +
|
|
'<button class="toolbutton" id="text-set-italic"></button>'+
|
|
'</div>';
|
|
|
|
content = content + styleToolbar;
|
|
|
|
var colors = ['#000000', '#ff0000', '#00008b', '#006400', '#8b008b',
|
|
'#c0c0c0', '#ffd700', '#008000', '#ff4500', '#8b4513' ];
|
|
|
|
content = content + '<table><tr>';
|
|
for (var i = 0; i < colors.length; i++) {
|
|
content = content + '<td><button class="color-picker" ' +
|
|
'value="' + colors[i] + '" ' +
|
|
'style="background-color: ' + colors[i] + '"></button></td>';
|
|
if (i == 4) {
|
|
content = content + '</tr><tr>';
|
|
};
|
|
};
|
|
content = content + '</tr></table>';
|
|
|
|
containerElem.innerHTML = content;
|
|
|
|
this.setContent([containerElem]);
|
|
|
|
this.editorElem = containerElem.querySelector('#editor');
|
|
|
|
this.colorButtons = document.querySelectorAll(".color-picker");
|
|
|
|
this.incTextBtn = containerElem.querySelector('#text-inc-size');
|
|
this.decTextBtn = containerElem.querySelector('#text-dec-size');
|
|
this.boldTextBtn = containerElem.querySelector('#text-set-bold');
|
|
this.italicTextBtn = containerElem.querySelector('#text-set-italic');
|
|
|
|
};
|
|
|
|
var setText = function (text) {
|
|
this.editorElem.value = text;
|
|
};
|
|
|
|
textpalette.TextPalette.prototype =
|
|
Object.create(palette.Palette.prototype, {
|
|
setText: {
|
|
value: setText,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true
|
|
}
|
|
});
|
|
|
|
return textpalette;
|
|
});
|