Skip to content

Commit

Permalink
ADD: fontScale button
Browse files Browse the repository at this point in the history 
FIX: docs
  • Loading branch information
@tinyfive
tinyfive committed Oct 21, 2015
1 parent d55f082 commit 18584b0
Show file tree
Hide file tree
Showing 9 changed files with 293 additions and 16 deletions.
1 change: 1 addition & 0 deletions Gruntfile.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ module.exports = (grunt) ->
'src/buttons/button.coffee'
'src/buttons/popover.coffee'
'src/buttons/title.coffee'
'src/buttons/fontScale.coffee'
'src/buttons/bold.coffee'
'src/buttons/italic.coffee'
'src/buttons/underline.coffee'
Expand Down
103 changes: 99 additions & 4 deletions lib/simditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}
}(this, function ($, SimpleModule, simpleHotkeys, simpleUploader) {

var AlignmentButton, BlockquoteButton, BoldButton, Button, Clipboard, CodeButton, CodePopover, ColorButton, Formatter, HrButton, ImageButton, ImagePopover, IndentButton, Indentation, InputManager, ItalicButton, Keystroke, LinkButton, LinkPopover, ListButton, OrderListButton, OutdentButton, Popover, Selection, Simditor, StrikethroughButton, TableButton, TitleButton, Toolbar, UnderlineButton, UndoManager, UnorderListButton, Util,
var AlignmentButton, BlockquoteButton, BoldButton, Button, Clipboard, CodeButton, CodePopover, ColorButton, FontScaleButton, Formatter, HrButton, ImageButton, ImagePopover, IndentButton, Indentation, InputManager, ItalicButton, Keystroke, LinkButton, LinkPopover, ListButton, OrderListButton, OutdentButton, Popover, Selection, Simditor, StrikethroughButton, TableButton, TitleButton, Toolbar, UnderlineButton, UndoManager, UnorderListButton, Util,
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
hasProp = {}.hasOwnProperty,
indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
Expand Down Expand Up @@ -480,7 +480,7 @@ Formatter = (function(superClass) {
code: ['class']
}, this.opts.allowedAttributes);
this._allowedStyles = $.extend({
span: ['color'],
span: ['color', 'font-size'],
b: ['color'],
i: ['color'],
strong: ['color'],
Expand Down Expand Up @@ -2690,7 +2690,13 @@ Simditor.i18n = {
'alignCenter': '居中',
'alignLeft': '居左',
'alignRight': '居右',
'selectLanguage': '选择程序语言'
'selectLanguage': '选择程序语言',
'fontScale': '字体大小',
'fontScaleXLarge': '超大字体',
'fontScaleLarge': '大号字体',
'fontScaleNormal': '正常大小',
'fontScaleSmall': '小号字体',
'fontScaleXSmall': '超小字体'
},
'en-US': {
'blockquote': 'Block Quote',
Expand Down Expand Up @@ -2735,7 +2741,13 @@ Simditor.i18n = {
'alignCenter': 'Align Center',
'alignLeft': 'Align Left',
'alignRight': 'Align Right',
'selectLanguage': 'Select Language'
'selectLanguage': 'Select Language',
'fontScale': 'Font Size',
'fontScaleXLarge': 'X Large Size',
'fontScaleLarge': 'Large Size',
'fontScaleNormal': 'Normal Size',
'fontScaleSmall': 'Small Size',
'fontScaleXSmall': 'X Small Size'
}
};

Expand Down Expand Up @@ -3186,6 +3198,89 @@ TitleButton = (function(superClass) {

Simditor.Toolbar.addButton(TitleButton);

FontScaleButton = (function(superClass) {
extend(FontScaleButton, superClass);

function FontScaleButton() {
return FontScaleButton.__super__.constructor.apply(this, arguments);
}

FontScaleButton.prototype.name = 'fontScale';

FontScaleButton.prototype.icon = 'font';

FontScaleButton.prototype.disableTag = 'pre';

FontScaleButton.prototype.htmlTag = 'span';

FontScaleButton.prototype._init = function() {
this.menu = [
{
name: '150%',
text: this._t('fontScaleXLarge'),
param: '5'
}, {
name: '125%',
text: this._t('fontScaleLarge'),
param: '4'
}, {
name: '100%',
text: this._t('fontScaleNormal'),
param: '3'
}, {
name: '75%',
text: this._t('fontScaleSmall'),
param: '2'
}, {
name: '50%',
text: this._t('fontScaleXSmall'),
param: '1'
}
];
return FontScaleButton.__super__._init.call(this);
};

FontScaleButton.prototype._activeStatus = function() {
var range;
range = this.editor.selection.range();
this.setActive($(range.startContainer).parents('span[style*="font-size"]').length > 0);
return this.active;
};

FontScaleButton.prototype.command = function(param) {
var range, sizeMap;
range = this.editor.selection.range();
if (range.collapsed) {
return;
}
document.execCommand('styleWithCSS', false, true);
document.execCommand('fontSize', false, param);
document.execCommand('styleWithCSS', false, false);
sizeMap = {
'x-large': '1.5em',
'large': '1.25em',
'small': '.75em',
'x-small': '.5em'
};
this.editor.body.find('span[style*="font-size"]').each(function() {
var $span, size;
$span = $(this);
size = this.style.fontSize;
if (/large|x-large|small|x-small/.test(size)) {
return $span.css('fontSize', sizeMap[size]);
} else if (size === 'medium') {
return $span.replaceWith($span.contents());
}
});
return this.editor.trigger('valuechanged');
};

return FontScaleButton;

})(Button);

Simditor.Toolbar.addButton(FontScaleButton);

BoldButton = (function(superClass) {
extend(BoldButton, superClass);

Expand Down
17 changes: 12 additions & 5 deletions site/_data/configs.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
'italic'
'underline'
'strikethrough'
'fontScale'
'color'
'ol' # ordered list
'ul' # unordered list
Expand Down Expand Up @@ -133,7 +134,7 @@
Default whitelist:
```coffee
['br', 'a', 'img', 'b', 'strong', 'i', 'u', 'font', 'p', 'ul', 'ol', 'li', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'hr']
['br', 'span', 'a', 'img', 'b', 'strong', 'i', 'strike', 'u', 'font', 'p', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'h1', 'h2', 'h3', 'h4', 'hr']
```
Note that custom whitelist will be merged into the default one.
Expand All @@ -160,11 +161,17 @@
Inline style whitelist. Default whitelist:
```coffee
span: ['color', 'font-size']
b: ['color']
i: ['color']
strong: ['color']
strike: ['color']
u: ['color']
p: ['margin-left', 'text-align']
h1: ['margin-left']
h2: ['margin-left']
h3: ['margin-left']
h4: ['margin-left']
h1: ['margin-left', 'text-align']
h2: ['margin-left', 'text-align']
h3: ['margin-left', 'text-align']
h4: ['margin-left', 'text-align']
```
Note that custom whitelist will be merged into the default one.
Expand Down
2 changes: 1 addition & 1 deletion site/assets/_coffee/page-demo.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
$ ->
Simditor.locale = 'en-US'

toolbar= ['title', 'bold', 'italic', 'underline', 'strikethrough', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment']
toolbar= ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment']
mobileToolbar=["bold","underline","strikethrough","color","ul","ol"]
toolbar = mobileToolbar if mobilecheck()
editor = new Simditor
Expand Down
2 changes: 1 addition & 1 deletion site/assets/scripts/page-demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
$(function() {
var $preview, editor, mobileToolbar, toolbar;
Simditor.locale = 'en-US';
toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];
toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];
mobileToolbar = ["bold", "underline", "strikethrough", "color", "ul", "ol"];
if (mobilecheck()) {
toolbar = mobileToolbar;
Expand Down
103 changes: 99 additions & 4 deletions site/assets/scripts/simditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
}
}(this, function ($, SimpleModule, simpleHotkeys, simpleUploader) {

var AlignmentButton, BlockquoteButton, BoldButton, Button, Clipboard, CodeButton, CodePopover, ColorButton, Formatter, HrButton, ImageButton, ImagePopover, IndentButton, Indentation, InputManager, ItalicButton, Keystroke, LinkButton, LinkPopover, ListButton, OrderListButton, OutdentButton, Popover, Selection, Simditor, StrikethroughButton, TableButton, TitleButton, Toolbar, UnderlineButton, UndoManager, UnorderListButton, Util,
var AlignmentButton, BlockquoteButton, BoldButton, Button, Clipboard, CodeButton, CodePopover, ColorButton, FontScaleButton, Formatter, HrButton, ImageButton, ImagePopover, IndentButton, Indentation, InputManager, ItalicButton, Keystroke, LinkButton, LinkPopover, ListButton, OrderListButton, OutdentButton, Popover, Selection, Simditor, StrikethroughButton, TableButton, TitleButton, Toolbar, UnderlineButton, UndoManager, UnorderListButton, Util,
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
hasProp = {}.hasOwnProperty,
indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
Expand Down Expand Up @@ -475,7 +475,7 @@ Formatter = (function(superClass) {
code: ['class']
}, this.opts.allowedAttributes);
this._allowedStyles = $.extend({
span: ['color'],
span: ['color', 'font-size'],
b: ['color'],
i: ['color'],
strong: ['color'],
Expand Down Expand Up @@ -2685,7 +2685,13 @@ Simditor.i18n = {
'alignCenter': '居中',
'alignLeft': '居左',
'alignRight': '居右',
'selectLanguage': '选择程序语言'
'selectLanguage': '选择程序语言',
'fontScale': '字体大小',
'fontScaleXLarge': '超大字体',
'fontScaleLarge': '大号字体',
'fontScaleNormal': '正常大小',
'fontScaleSmall': '小号字体',
'fontScaleXSmall': '超小字体'
},
'en-US': {
'blockquote': 'Block Quote',
Expand Down Expand Up @@ -2730,7 +2736,13 @@ Simditor.i18n = {
'alignCenter': 'Align Center',
'alignLeft': 'Align Left',
'alignRight': 'Align Right',
'selectLanguage': 'Select Language'
'selectLanguage': 'Select Language',
'fontScale': 'Font Size',
'fontScaleXLarge': 'X Large Size',
'fontScaleLarge': 'Large Size',
'fontScaleNormal': 'Normal Size',
'fontScaleSmall': 'Small Size',
'fontScaleXSmall': 'X Small Size'
}
};

Expand Down Expand Up @@ -3181,6 +3193,89 @@ TitleButton = (function(superClass) {

Simditor.Toolbar.addButton(TitleButton);

FontScaleButton = (function(superClass) {
extend(FontScaleButton, superClass);

function FontScaleButton() {
return FontScaleButton.__super__.constructor.apply(this, arguments);
}

FontScaleButton.prototype.name = 'fontScale';

FontScaleButton.prototype.icon = 'font';

FontScaleButton.prototype.disableTag = 'pre';

FontScaleButton.prototype.htmlTag = 'span';

FontScaleButton.prototype._init = function() {
this.menu = [
{
name: '150%',
text: this._t('fontScaleXLarge'),
param: '5'
}, {
name: '125%',
text: this._t('fontScaleLarge'),
param: '4'
}, {
name: '100%',
text: this._t('fontScaleNormal'),
param: '3'
}, {
name: '75%',
text: this._t('fontScaleSmall'),
param: '2'
}, {
name: '50%',
text: this._t('fontScaleXSmall'),
param: '1'
}
];
return FontScaleButton.__super__._init.call(this);
};

FontScaleButton.prototype._activeStatus = function() {
var range;
range = this.editor.selection.range();
this.setActive($(range.startContainer).parents('span[style*="font-size"]').length > 0);
return this.active;
};

FontScaleButton.prototype.command = function(param) {
var range, sizeMap;
range = this.editor.selection.range();
if (range.collapsed) {
return;
}
document.execCommand('styleWithCSS', false, true);
document.execCommand('fontSize', false, param);
document.execCommand('styleWithCSS', false, false);
sizeMap = {
'x-large': '1.5em',
'large': '1.25em',
'small': '.75em',
'x-small': '.5em'
};
this.editor.body.find('span[style*="font-size"]').each(function() {
var $span, size;
$span = $(this);
size = this.style.fontSize;
if (/large|x-large|small|x-small/.test(size)) {
return $span.css('fontSize', sizeMap[size]);
} else if (size === 'medium') {
return $span.replaceWith($span.contents());
}
});
return this.editor.trigger('valuechanged');
};

return FontScaleButton;

})(Button);

Simditor.Toolbar.addButton(FontScaleButton);

BoldButton = (function(superClass) {
extend(BoldButton, superClass);

Expand Down
Loading

0 comments on commit 18584b0

Please sign in to comment.