CAMP/edgware
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

font family aloha plugin

Browse Source
This commit is contained in:
Sanjay B 2013-09-11 00:00:27 +05:30
parent 8019271a34
commit 2fc1338182
7 changed files with 369 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
edgware/static/aloha/plugins/common/fontfamily/README.md Normal file
View File

@ -0,0 +1,4 @@
Aloha-Plugin-FontFamily
=======================
Aloha-Plugin-FontFamily

38
edgware/static/aloha/plugins/common/fontfamily/css/fontfamily.css Normal file
View File

@ -0,0 +1,38 @@
.aloha-button-fontfamily {
background: url( '../img/icon.gif' );
}
.aloha-fontfamily-overlay {
position: absolute;
display: none;
float: left;
padding: 3px;
top: 0;
left: 0;
border: 1px solid #afafaf;
border-collapse: separate;
background-color: #fff;
z-index: 12000;
}
.aloha-fontfamily-overlay {
border-collapse:collapse;
}
.aloha-fontfamily-overlay td {
width: 10em;
height: 1em;
border: 1px solid #afafaf;
font-size: 0.8em;
padding: 0.05em;
}
.aloha-fontfamily-overlay td.mouseover {
border: 1px solid #fdea83;
background-color: #fefce1;
}
.aloha-fontfamily-overlay td.focused {
border: 1px solid #407bcf;
background-color: #b9d6f9;
}

BIN
edgware/static/aloha/plugins/common/fontfamily/img/icon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 B

318
edgware/static/aloha/plugins/common/fontfamily/lib/fontfamily-plugin.js Normal file
View File

@ -0,0 +1,318 @@
/**
* Aloha.FontFamily
* The Font Family allows the change of font face of text
* Author: Jeremy Strouse (jstrouse@strouseconsulting.com)
* This is in parts based on the Aloha characterpicker plugin and other plugins
* such as the colorselector plugin and previous version plugins by RecessMobile
*/
define(
[ 'aloha',
'aloha/jquery',
'aloha/plugin',
'ui/ui',
'ui/button',
'i18n!fontfamily/nls/i18n',
'i18n!aloha/nls/i18n',
'css!fontfamily/css/fontfamily.css'],
function (Aloha, jQuery, Plugin, Ui, Button, i18n, i18nCore){
"use strict";
return Plugin.create( 'fontfamily', {
languages: ['en'],
init: function() {
if (!Aloha.settings.plugins.fontfamily) {
Aloha.settings.plugins.fontfamily = {}
}
self.settings = Aloha.settings.plugins.fontfamily || {};
if(!self.settings.fontfamilies) {
self.settings.fontfamilies = 'Georgia, serif|Palatino Linotype, Book Antiqua, Palatino, serif|Times New Roman, Times, serif|Arial, Helvetica, sans-serif|Arial Black, Gadget, sans-serif|Comic Sans MS, cursive, sans-serif|Impact, Charcoal, sans-serif|Lucida Sans Unicode, Lucida Grande, sans-serif|Tahoma, Geneva, sans-serif|Trebuchet MS, Helvetica, sans-serif|Verdana, Geneva, sans-serif|Courier New, Courier, monospace|Lucida Console, Monaco, monospace'
}
var that = this,
buttons = [],
names = ['fontfamily' ],
tooltips = [i18n.t('button.fontfamily.tooltip')];
function Fontfamily(fontfamilies, onSelectCallback) {
var self = this;
self.$node = jQuery('<table class="aloha-fontfamily-overlay" role="dialog"><tbody></tbody></table>');
// don't let the mousedown bubble up. otherwise there won't be an activeEditable
self.$node.mousedown(function(e) {
return false;
});
self.$tbody = self.$node.find('tbody');
self.$node.appendTo(jQuery('body'));
self._createFontFamilyButtons(self.$node, fontfamilies, onSelectCallback);
self._initHideOnDocumentClick();
self._initHideOnEsc();
self._initCursorFocus(onSelectCallback);
self._initEvents();
}
Fontfamily.prototype = {
show: function( insertButton ) {
var self = this;
// position the overlay relative to the insert-button
self.$node.css(jQuery(insertButton).offset());
self.$node.show();
// focus the first font family
self.$node.find('.focused').removeClass('focused');
jQuery(self.$node.find('td')[0]).addClass('focused');
},
_initHideOnDocumentClick: function() {
var self = this;
// if the user clicks somewhere outside of the layer,
// the layer should be closed
// stop bubbling the click on the create-dialog up to the
// body event
self.$node.click(function(e) {
e.stopPropagation();
});
// hide the layer if user clicks anywhere in the body
jQuery('body').click(function(e) {
var overlayVisibleAndNotTarget
= (self.$node.css('display') === 'table')
&& (e.target != self.$node[0])
// don't consider clicks to the 'show' button.
&& !(jQuery(e.target).hasClass('aloha-button-fontfamily') || jQuery(e.target).children().hasClass('aloha-button-fontfamily'))
if(overlayVisibleAndNotTarget) {
self.$node.hide();
}
});
},
_initHideOnEsc: function() {
var self = this;
// escape closes the overlay
jQuery(document).keyup(function(e) {
var overlayVisibleAndEscapeKeyPressed = (self.$node.css('display') === 'table') && (e.keyCode === 27);
if(overlayVisibleAndEscapeKeyPressed) {
self.$node.hide();
}
});
},
_initCursorFocus: function( onSelectCallback ) {
var self = this;
// you can navigate through the table with the arrow keys
// and select one with the enter key
var $current, $next, $prev, $nextRow, $prevRow;
var movements = {
13: function select() {
$current = self.$node.find('.focused');
self.$node.hide();
onSelectCallback($current.text());
},
37: function left() {
$current = self.$node.find('.focused');
$prev = $current.prev().addClass('focused');
if($prev.length > 0) {
$current.removeClass('focused');
}
},
38: function up() {
$current = self.$node.find('.focused');
$prevRow = $current.parent().prev();
if($prevRow.length > 0) {
$prev = jQuery($prevRow.children()[$current.index()]).addClass('focused');
if($prev.length > 0) {
$current.removeClass('focused');
}
}
},
39: function right() {
$current = self.$node.find('.focused');
$next = $current.next().addClass('focused');
if($next.length > 0) {
$current.removeClass('focused');
}
},
40: function down() {
$current = self.$node.find('.focused');
$nextRow = $current.parent().next();
if($nextRow.length > 0) {
$next = jQuery($nextRow.children()[$current.index()]).addClass('focused');
if($next.length > 0) {
$current.removeClass('focused');
}
}
}
};
jQuery(document).keydown(function(e) {
e.stopPropagation( );
var isOverlayVisible = self.$node.css('display') === 'table';
if(isOverlayVisible) {
// check if there is a move-command for the pressed key
var moveCommand = movements[e.keyCode];
if(moveCommand) {
moveCommand();
return false;
}
}
});
},
_initEvents: function() {
var self = this;
// when the editable is deactivated, hide the layer
Aloha.bind('aloha-editable-deactivated', function(event, rangeObject) {
self.$node.hide();
});
},
_createFontFamilyButtons: function($node, fontfamilies, onSelectCallback) {
var self = this;
function mkButton(fontfamilyCode) {
return jQuery("<td style='FONT-FAMILY: "+fontfamilyCode+"; cursor: pointer'>" + fontfamilyCode.split(",")[0] + "</td>")
.mouseover(function() {
jQuery(this).addClass('mouseover');
})
.mouseout(function() {
jQuery(this).removeClass('mouseover');
})
.click(function(e) {
self.$node.hide();
onSelectCallback(fontfamilyCode)
return false;
});
}
function addRow() {
return jQuery('<tr></tr>').appendTo(self.$tbody);
}
var fontfamilyList = jQuery.grep(
fontfamilies.split('|'),
function filterOutEmptyOnces(e) {
return e != '';
}
);
var i=0, fontfamilyCode;
var $row;
while(fontfamilyCode = fontfamilyList[i]) {
$row = addRow();
mkButton(fontfamilyCode).appendTo($row);
i++;
}
}
};
function onFontfamilySelect(fontfamilyCode) {
var self = this;
var tagToUse = "span";
var classToUse = "class=aloha";
var cssTag = "FONT-FAMILY";
var styleToUse = "style='" + cssTag + ": " + fontfamilyCode + "'";
var markup = jQuery('<' + tagToUse + ' ' + classToUse + ' ' + styleToUse + '></' + tagToUse + '>'), rangeObject = Aloha.Selection.rangeObject, selectedCells = jQuery('.aloha-cell-selected');
// formating workaround for table plugin
if (selectedCells.length > 0) {
var cellMarkupCounter = 0;
selectedCells.each(function () {
var cellContent = jQuery(this).find('div'), cellMarkup = cellContent.find(tagToUse);
if (cellMarkup.length > 0) {
// unwrap all found markup text
// <td><b>text</b> foo <b>bar</b></td>
// and wrap the whole contents of the <td> into <b> tags
// <td><b>text foo bar</b></td>
cellMarkup.contents().unwrap();
cellMarkupCounter++;
}
cellContent.contents().wrap('<' + tagToUse + ' ' + classToUse + ' ' + styleToUse + '></' + tagToUse + '>');
});
// remove all markup if all cells have markup
if (cellMarkupCounter == selectedCells.length) {
selectedCells.find(tagToUse).contents().unwrap();
}
return false;
}
var parents = rangeObject.getSelectionTree();
var count = 0;
var partialreplace = false;
// Loop through all matching markup sections and apply the new CSS
for (var i = 0; i < parents.length; i++) {
if (parents[i].selection.toLowerCase() == "full") {
count = 0;
jQuery(parents[i].domobj).find('span').each(function () {
count += 1;
jQuery(this).css(cssTag.toLowerCase(),fontfamilyCode);
});
if (count == 0 && parents.length == 1) {
// Maybe we just selected the actual element, so check it's parent
jQuery(parents[i].domobj).parent().each(function() {
if (this.nodeName.toLowerCase() == 'span') {
count += 1;
jQuery(this).css(cssTag.toLowerCase(),fontfamilyCode);
};
});
}
if (count == 0 || (parents[i].domobj.tagName && parents[i].domobj.tagName.toLowerCase() != 'span')) {
if (parents[i].domobj.nodeType == 3)
jQuery(parents[i].domobj).wrap(markup);
else
jQuery(parents[i].domobj).wrapInner(markup);
}
}
else if (parents[i].selection.toLowerCase() == "partial") {
partialreplace = true;
replacechild(parents[i],tagToUse,classToUse,styleToUse,cssTag,fontfamilyCode);
}
};
// Trigger undo point!
Aloha.activeEditable.smartContentChange( { type : 'blur' }, null );
// Throws errors if we've added a tag in the middle, so skip it
// instead of having it error
if (! partialreplace)
rangeObject.select();
return false;
}
function replacechild(item,tagToUse,classToUse,styleToUse,cssTag,fontfamilyCode) {
if (item.domobj.nodeType == 3) {
var text = item.domobj.data.substr(item.startOffset, item.endOffset - item.startOffset);
text = '<' + tagToUse + ' ' + classToUse + ' ' + styleToUse + '>' + text + '</' + tagToUse + '>';
text = item.domobj.data.substr(0,item.startOffset) + text;
text = text + item.domobj.data.substr(item.endOffset, item.domobj.data.length - item.endOffset);
jQuery(item.domobj).replaceWith(text);
}
else if (item.domobj.tagName.toLowerCase() == tagToUse.toLowerCase() && item.selection == "full") {
jQuery(item.domobj).css(cssTag.toLowerCase(),fontfamilyCode);
jQuery(item.domobj).find('span').each(function () {
jQuery(this).css(cssTag.toLowerCase(),fontfamilyCode);
});
}
else {
for (var j = 0; j < item.children.length; j++) {
if (item.children[j].selection == "partial" || item.children[j].selection == "full")
replacechild(item.children[j],tagToUse,classToUse,styleToUse,cssTag,fontfamilyCode);
};
}
}
var fontfamily = new Fontfamily(self.settings.fontfamilies, onFontfamilySelect);
for (var i=0; i < names.length; i++) {
var value = names[i];
var index = i;
Ui.adopt(value, Button, {
tooltip: tooltips[index],
icon: "aloha-button-" + value,
name: value,
scope: 'Aloha.continuoustext',
click: function () {
var btnName = this.name;
if (Aloha.activeEditable) {
Aloha.activeEditable.obj[0].focus()
}
fontfamily.show(this.buttonElement[0]);
}
});
}
}
});
});

5
edgware/static/aloha/plugins/common/fontfamily/nls/en/i18n.js Normal file
View File

@ -0,0 +1,5 @@
define({
"button.fontfamily.tooltip": "Font" ,
"button.fontfamily.text": "F" ,
}
);

3
edgware/static/aloha/plugins/common/fontfamily/nls/i18n.js Normal file
View File

@ -0,0 +1,3 @@
define( {
'en': true
} );

1
edgware/templates/editor.html
View File

@ -42,6 +42,7 @@
common/abbr,
common/horizontalruler,
common/align,
common/fontfamily,
extra/formatlesspaste,
extra/headerids,
extra/listenforcer,