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.
95 lines
3.0 KiB
95 lines
3.0 KiB
/* Text palette to enter text and to choose font */
|
|
|
|
|
|
define([
|
|
'sugar-web/graphics/palette',
|
|
'mustache'
|
|
], function(palette, mustache) {
|
|
|
|
var textpalette = {};
|
|
|
|
/* We setup the palette with fonts */
|
|
textpalette.TextPalette = function(invoker, primaryText) {
|
|
palette.Palette.call(this, invoker, primaryText);
|
|
this.getPalette().id = "fontpalette";
|
|
this.fontChangeEvent = document.createEvent('CustomEvent');
|
|
this.fontChangeEvent.initCustomEvent('fontChange', true, true, {
|
|
'family': 'Arial'
|
|
});
|
|
this.template = '<center><table><tbody>' + '{{#rows}}' + '<tr>' + '{{#.}}' + '<td>' + '<button lineHeight="{{lineHeight}}" title="{{fontFamily}}" style="height:55px; width:55px; background-size:40px !important; background: #fff url({{ icon }}) no-repeat center; "></button>' + '</td>' + '{{/.}}' + '</tr>' + '{{/rows}}' + '</tbody></table></center>' + '<br/>';
|
|
var rows = [
|
|
[{
|
|
icon: 'icons/font-arial.svg',
|
|
lineHeight: '0.7',
|
|
fontFamily: 'Arial'
|
|
}, {
|
|
icon: 'icons/font-comic-sans.svg',
|
|
lineHeight: '0.8',
|
|
fontFamily: 'Comic Sans MS'
|
|
}, {
|
|
icon: 'icons/font-verdana.svg',
|
|
lineHeight: '0.8',
|
|
fontFamily: 'Verdana'
|
|
}]
|
|
];
|
|
var textsElem = document.createElement('div');
|
|
textsElem.innerHTML = mustache.render(this.template, {
|
|
rows: rows
|
|
});
|
|
this.setContent([textsElem]);
|
|
var buttons = textsElem.querySelectorAll('button');
|
|
var that = this;
|
|
|
|
function popDownOnButtonClick(event) {
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
buttons[i].style.border = '0px solid #000';
|
|
}
|
|
event.target.style.border = '1px solid #f00';
|
|
that.popDown();
|
|
}
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
buttons[i].addEventListener('click', function(e) {
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
buttons[i].style.border = '0px solid #000';
|
|
}
|
|
e.target.style.border = '1px solid #f00';
|
|
that.fontChangeEvent.detail.family = e.target.title;
|
|
that.getPalette().dispatchEvent(that.fontChangeEvent);
|
|
that.popDown();
|
|
});
|
|
}
|
|
popDownOnButtonClick({
|
|
target: buttons[0]
|
|
});
|
|
};
|
|
|
|
var setFont = function (font) {
|
|
var buttons = this.getPalette().querySelectorAll('button');
|
|
for (var i = 0; i < buttons.length; i++) {
|
|
if (font == buttons[i].title)
|
|
buttons[i].style.border = '1px solid #f00';
|
|
else
|
|
buttons[i].style.border = '0px solid #000';
|
|
}
|
|
};
|
|
|
|
var addEventListener = function(type, listener, useCapture) {
|
|
return this.getPalette().addEventListener(type, listener, useCapture);
|
|
};
|
|
|
|
textpalette.TextPalette.prototype = Object.create(palette.Palette.prototype, {
|
|
setFont: {
|
|
value: setFont,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true
|
|
},
|
|
addEventListener: {
|
|
value: addEventListener,
|
|
enumerable: true,
|
|
configurable: true,
|
|
writable: true
|
|
}
|
|
});
|
|
return textpalette;
|
|
});
|