diff options
| -rw-r--r-- | ep.json | 10 | ||||
| -rw-r--r-- | index.js | 35 | ||||
| -rw-r--r-- | static/css/buttons.css | 12 | ||||
| -rw-r--r-- | static/js/index.js | 74 | ||||
| -rw-r--r-- | static/js/shared.js | 28 | ||||
| -rw-r--r-- | templates/editbarButtons.ejs | 12 |
6 files changed, 128 insertions, 43 deletions
@@ -4,13 +4,17 @@ "name": "main", "client_hooks": { "aceEditorCSS": "ep_headline_buttons/static/js/index", - "collectContentPre": "ep_headline_buttons/static/js/shared" + "aceInitialized": "ep_headline_buttons/static/js/index", + "postAceInit": "ep_headline_buttons/static/js/index", + "collectContentPre": "ep_headline_buttons/static/js/index", + "aceRegisterBlockElements": "ep_headline_buttons/static/js/index", + "aceDomLineProcessLineAttributes": "ep_headline_buttons/static/js/index", + "aceAttribsToClasses": "ep_headline_buttons/static/js/index" }, "hooks": { "eejsBlock_styles": "ep_headline_buttons/index", "eejsBlock_editbarMenuLeft": "ep_headline_buttons/index", - "collectContentPre": "ep_headline_buttons/static/js/shared", - "collectContentPost": "ep_headline_buttons/static/js/shared" + "getLineHTMLForExport": "ep_headline_buttons/index" } } ] @@ -11,4 +11,39 @@ exports.eejsBlock_styles = function (hook_name, args, cb) { return cb(); } +exports.getLineHTMLForExport = function (hook, ctx) { + function _analyzeLine(lineAttrs, pool) { + if (lineAttrs) { + var opIter = Changeset.opIterator(lineAttrs); + if (opIter.hasNext()) { + var op = opIter.next(); + return Changeset.opAttributeValue(op, 'headline_buttons', pool); + } + } + } + function _getStyle(tag) { + switch (tag) { + case 'h1': + return 'margin: 0; line-height: 1.5em; font-size: 2em'; + case 'h2': + return 'margin: 0; line-height: 1.5em; font-size: 1.5em'; + case 'h3': + return 'margin: 0; line-height: 1.5em; font-size: 1.17em'; + case 'h4': + return 'margin: 0; line-height: 1.5em'; + case 'h5': + return 'margin: 0; line-height: 1.5em; font-size: 0.83em'; + case 'h6': + return 'margin: 0; line-height: 1.5em; font-size: 0.75em'; + } + + return ''; + } + + var tag = _analyzeLine(ctx.attribLine, ctx.apool); + if (tag) { + var style = _getStyle(tag); + return "<" + tag + " style=\"" + style + "\">" + ctx.text.substring(1) + "</" + tag + ">"; + } +} diff --git a/static/css/buttons.css b/static/css/buttons.css index e073b0f..04d55a0 100644 --- a/static/css/buttons.css +++ b/static/css/buttons.css @@ -8,25 +8,25 @@ } .buttonicon-headline-h1 { - background-position: 0px 1px; + background-position: -2px 0px; } .buttonicon-headline-h2 { - background-position: 0px -15px; + background-position: -2px -16px; } .buttonicon-headline-h3 { - background-position: 0px -31px; + background-position: -2px -32px; } .buttonicon-headline-h4 { - background-position: 0px -47px; + background-position: -2px -48px; } .buttonicon-headline-h5 { - background-position: 0px -63px; + background-position: -2px -64px; } .buttonicon-headline-h6 { - background-position: 0px -79px; + background-position: -2px -80px; } diff --git a/static/js/index.js b/static/js/index.js index ab18207..fd9cc06 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -1,7 +1,81 @@ +var $ = require('ep_etherpad-lite/static/js/rjquery').$; +var _ = require('ep_etherpad-lite/static/js/underscore'); + var cssFiles = ['ep_headline_buttons/static/css/headline_buttons.css']; +var tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; function aceEditorCSS(){ return cssFiles; }; +function postAceInit(ace, pad) { + $('.headline-button').on('click', function() { + var data = $(this).data('key'); + if (typeof data !== 'undefined') { + pad.ace.callWithAce(function (ace) { + ace.ace_doToggleHeading(data); + }, data, true); + } + }); +}; + +function aceInitialized(hook, context) { + function doToggleHeading(tag) { + var rep = this.rep; + var attrsManager = this.documentAttributeManager; + + if (!(rep.selStart && rep.selEnd)) { + return; + } + + var firstLine = rep.selStart[0]; + var lastLine = Math.max(firstLine, rep.selEnd[0] - ((rep.selEnd[1] === 0) ? 1 : 0)); + _(_.range(firstLine, lastLine + 1)).each(function(i) { + if (attrsManager.getAttributeOnLine(i, 'headline_buttons') == tag) { + attrsManager.removeAttributeOnLine(i, 'headline_buttons'); + } + else { + attrsManager.setAttributeOnLine(i, 'headline_buttons', tag); + } + }); + } + + context.editorInfo.ace_doToggleHeading = _(doToggleHeading).bind(context); +} + +function collectContentPre(hook, ctx) { + if ($.inArray(ctx.tname, tags) >= 0) { + ctx.state.lineAttributes['headline_buttons'] = ctx.tname; + } +}; + +function aceRegisterBlockElements() { + return tags; +}; + +function aceDomLineProcessLineAttributes(hook, ctx) { + if (typeof ctx.cls !== 'undefined') { + var headline_type = ctx.cls.match(/(?:^| )headline_buttons:(\S+)/); + if (headline_type) { + return [{ + processedMarker: true, + preHtml: '<' + headline_type[1] + '>', + postHtml: '</' + headline_type[1] + '>' + }]; + } + } +}; + +function aceAttribsToClasses(hook, ctx) { + if (ctx.key == 'headline_buttons' && ctx.value != '') { + return ['headline_buttons:' + ctx.value]; + } +}; + exports.aceEditorCSS = aceEditorCSS; +exports.aceInitialized = aceInitialized; +exports.postAceInit = postAceInit; +exports.collectContentPre = collectContentPre; +exports.aceRegisterBlockElements = aceRegisterBlockElements; +exports.aceDomLineProcessLineAttributes = aceDomLineProcessLineAttributes; +exports.aceAttribsToClasses = aceAttribsToClasses; diff --git a/static/js/shared.js b/static/js/shared.js deleted file mode 100644 index df88e6b..0000000 --- a/static/js/shared.js +++ /dev/null @@ -1,28 +0,0 @@ -var _ = require('ep_etherpad-lite/static/js/underscore'); - -var tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; - -var collectContentPre = function(hook, context){ - var tname = context.tname; - var state = context.state; - var lineAttributes = state.lineAttributes - var tagIndex = _.indexOf(tags, tname); - - if (tagIndex >= 0) { - lineAttributes['heading'] = tags[tagIndex]; - } -}; - -var collectContentPost = function(hook, context){ - var tname = context.tname; - var state = context.state; - var lineAttributes = state.lineAttributes - var tagIndex = _.indexOf(tags, tname); - - if (tagIndex >= 0) { - delete lineAttributes['heading']; - } -}; - -exports.collectContentPre = collectContentPre; -exports.collectContentPost = collectContentPost; diff --git a/templates/editbarButtons.ejs b/templates/editbarButtons.ejs index 0682bf1..5648e9e 100644 --- a/templates/editbarButtons.ejs +++ b/templates/editbarButtons.ejs @@ -1,30 +1,30 @@ <li class="separator acl-write"></li> -<li class="acl-write" id="headline_h1" data-key="headline_h1"> +<li class="acl-write headline-button" data-key="h1"> <a class="grouped-left" data-l10n-id="pad.toolbar.h1.title"> <span class="buttonicon-headline buttonicon-headline-h1"></span> </a> </li> -<li class="acl-write" id="headline_h2" data-key="headline_h2"> +<li class="acl-write headline-button" data-key="h2"> <a class="grouped-middle" data-l10n-id="pad.toolbar.h2.title"> <span class="buttonicon-headline buttonicon-headline-h2"></span> </a> </li> -<li class="acl-write" id="headline_h3" data-key="headline_h3"> +<li class="acl-write headline-button" data-key="h3"> <a class="grouped-middle" data-l10n-id="pad.toolbar.h3.title"> <span class="buttonicon-headline buttonicon-headline-h3"></span> </a> </li> -<li class="acl-write" id="headline_h4" data-key="headline_h4"> +<li class="acl-write headline-button" data-key="h4"> <a class="grouped-middle" data-l10n-id="pad.toolbar.h4.title"> <span class="buttonicon-headline buttonicon-headline-h4"></span> </a> </li> -<li class="acl-write" id="headline_h5" data-key="headline_h5"> +<li class="acl-write headline-button" data-key="h5"> <a class="grouped-middle" data-l10n-id="pad.toolbar.h5.title"> <span class="buttonicon-headline buttonicon-headline-h5"></span> </a> </li> -<li class="acl-write" id="headline_h6" data-key="headline_h6"> +<li class="acl-write headline-button" data-key="h6"> <a class="grouped-right" data-l10n-id="pad.toolbar.h6.title"> <span class="buttonicon-headline buttonicon-headline-h6"></span> </a> |