From 735a3379c508a9fed2af68d41d1204d6a31061db Mon Sep 17 00:00:00 2001
From: Alexander Sulfrian <alex@spline.inf.fu-berlin.de>
Date: Mon, 11 Jan 2016 04:26:42 +0100
Subject: First working version

---
 ep.json                      | 10 ++++--
 index.js                     | 35 +++++++++++++++++++++
 static/css/buttons.css       | 12 +++----
 static/js/index.js           | 74 ++++++++++++++++++++++++++++++++++++++++++++
 static/js/shared.js          | 28 -----------------
 templates/editbarButtons.ejs | 12 +++----
 6 files changed, 128 insertions(+), 43 deletions(-)
 delete mode 100644 static/js/shared.js

diff --git a/ep.json b/ep.json
index 5249002..acbbf09 100644
--- a/ep.json
+++ b/ep.json
@@ -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"
       }
     }
   ]
diff --git a/index.js b/index.js
index 43b349c..1a741d0 100644
--- a/index.js
+++ b/index.js
@@ -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>
-- 
cgit v1.2.3-1-g7c22