From 18584b0dc39dc310245560b4704c9133cea62f73 Mon Sep 17 00:00:00 2001 From: Keeper Date: Tue, 20 Oct 2015 15:42:45 -0400 Subject: [PATCH] ADD: fontScale button FIX: docs --- Gruntfile.coffee | 1 + lib/simditor.js | 103 +++++++++++++++++++++++++-- site/_data/configs.yml | 17 +++-- site/assets/_coffee/page-demo.coffee | 2 +- site/assets/scripts/page-demo.js | 2 +- site/assets/scripts/simditor.js | 103 +++++++++++++++++++++++++-- src/buttons/fontScale.coffee | 67 +++++++++++++++++ src/formatter.coffee | 2 +- src/i18n.coffee | 12 ++++ 9 files changed, 293 insertions(+), 16 deletions(-) create mode 100644 src/buttons/fontScale.coffee diff --git a/Gruntfile.coffee b/Gruntfile.coffee index aba8dd10..2450a391 100644 --- a/Gruntfile.coffee +++ b/Gruntfile.coffee @@ -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' diff --git a/lib/simditor.js b/lib/simditor.js index ec19c4fa..b04b1175 100644 --- a/lib/simditor.js +++ b/lib/simditor.js @@ -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; }, @@ -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'], @@ -2690,7 +2690,13 @@ Simditor.i18n = { 'alignCenter': '居中', 'alignLeft': '居左', 'alignRight': '居右', - 'selectLanguage': '选择程序语言' + 'selectLanguage': '选择程序语言', + 'fontScale': '字体大小', + 'fontScaleXLarge': '超大字体', + 'fontScaleLarge': '大号字体', + 'fontScaleNormal': '正常大小', + 'fontScaleSmall': '小号字体', + 'fontScaleXSmall': '超小字体' }, 'en-US': { 'blockquote': 'Block Quote', @@ -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' } }; @@ -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); diff --git a/site/_data/configs.yml b/site/_data/configs.yml index ed82fe8a..60de5ad2 100644 --- a/site/_data/configs.yml +++ b/site/_data/configs.yml @@ -23,6 +23,7 @@ 'italic' 'underline' 'strikethrough' + 'fontScale' 'color' 'ol' # ordered list 'ul' # unordered list @@ -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. @@ -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. diff --git a/site/assets/_coffee/page-demo.coffee b/site/assets/_coffee/page-demo.coffee index 26a71901..2956280b 100644 --- a/site/assets/_coffee/page-demo.coffee +++ b/site/assets/_coffee/page-demo.coffee @@ -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 diff --git a/site/assets/scripts/page-demo.js b/site/assets/scripts/page-demo.js index f9ee1ef3..7b4d69ff 100644 --- a/site/assets/scripts/page-demo.js +++ b/site/assets/scripts/page-demo.js @@ -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; diff --git a/site/assets/scripts/simditor.js b/site/assets/scripts/simditor.js index 3d867f1f..3d1bcf6e 100644 --- a/site/assets/scripts/simditor.js +++ b/site/assets/scripts/simditor.js @@ -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; }, @@ -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'], @@ -2685,7 +2685,13 @@ Simditor.i18n = { 'alignCenter': '居中', 'alignLeft': '居左', 'alignRight': '居右', - 'selectLanguage': '选择程序语言' + 'selectLanguage': '选择程序语言', + 'fontScale': '字体大小', + 'fontScaleXLarge': '超大字体', + 'fontScaleLarge': '大号字体', + 'fontScaleNormal': '正常大小', + 'fontScaleSmall': '小号字体', + 'fontScaleXSmall': '超小字体' }, 'en-US': { 'blockquote': 'Block Quote', @@ -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' } }; @@ -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); diff --git a/src/buttons/fontScale.coffee b/src/buttons/fontScale.coffee new file mode 100644 index 00000000..3f476af4 --- /dev/null +++ b/src/buttons/fontScale.coffee @@ -0,0 +1,67 @@ + +class FontScaleButton extends Button + + name: 'fontScale' + + icon: 'font' + + disableTag: 'pre' + + htmlTag: 'span' + + _init: -> + @menu = [{ + name: '150%' + text: @_t('fontScaleXLarge') + param: '5' + }, { + name: '125%' + text: @_t('fontScaleLarge') + param: '4' + }, { + name: '100%' + text: @_t('fontScaleNormal') + param: '3' + }, { + name: '75%' + text: @_t('fontScaleSmall') + param: '2' + }, { + name: '50%' + text: @_t('fontScaleXSmall') + param: '1' + }] + super() + + _activeStatus: -> + range = @editor.selection.range() + @setActive $(range.startContainer).parents('span[style*="font-size"]').length > 0 + @active + + command: (param)-> + range = @editor.selection.range() + return if range.collapsed + + # Use span[style] instead of font[size] + 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' + + @editor.body.find('span[style*="font-size"]').each -> + $span = $ @ + size = @style.fontSize + + if /large|x-large|small|x-small/.test(size) + $span.css('fontSize', sizeMap[size]) + else if size is 'medium' + $span.replaceWith $span.contents() + + @editor.trigger 'valuechanged' + +Simditor.Toolbar.addButton FontScaleButton diff --git a/src/formatter.coffee b/src/formatter.coffee index 19073bfd..01ece5b0 100644 --- a/src/formatter.coffee +++ b/src/formatter.coffee @@ -26,7 +26,7 @@ class Formatter extends SimpleModule , @opts.allowedAttributes @_allowedStyles = $.extend - span: ['color'] + span: ['color', 'font-size'] b: ['color'] i: ['color'] strong: ['color'] diff --git a/src/i18n.coffee b/src/i18n.coffee index c639e5d5..1af264a0 100644 --- a/src/i18n.coffee +++ b/src/i18n.coffee @@ -44,6 +44,12 @@ Simditor.i18n = 'alignLeft': '居左' 'alignRight': '居右' 'selectLanguage': '选择程序语言' + 'fontScale': '字体大小' + 'fontScaleXLarge': '超大字体' + 'fontScaleLarge': '大号字体' + 'fontScaleNormal': '正常大小' + 'fontScaleSmall': '小号字体' + 'fontScaleXSmall': '超小字体' 'en-US': 'blockquote': 'Block Quote' @@ -89,3 +95,9 @@ Simditor.i18n = 'alignLeft': 'Align Left' 'alignRight': 'Align Right' 'selectLanguage': 'Select Language' + 'fontScale': 'Font Size' + 'fontScaleXLarge': 'X Large Size' + 'fontScaleLarge': 'Large Size' + 'fontScaleNormal': 'Normal Size' + 'fontScaleSmall': 'Small Size' + 'fontScaleXSmall': 'X Small Size'