working page break support basis

ep.json

@@ -3,11 +3,21 @@
     {
       "name": "page_view",
       "client_hooks": {
-        "postAceInit": "ep_page_view/static/js/page_view:postAceInit"
+        "postAceInit": "ep_page_view/static/js/page_view",
+        "aceEditorCSS": "ep_page_view/static/js/page_view",
+        "aceCreateDomLine": "ep_page_view/static/js/page_view",
+        "aceAttribsToClasses": "ep_page_view/static/js/page_view",
+        "aceDomLineProcessLineAttributes": "ep_page_view/static/js/page_view",
+        "collectContentPre": "ep_page_view/static/js/shared",
+        "aceInitialized": "ep_page_view/static/js/page_view",
+        "aceKeyEvent": "ep_page_view/static/js/page_view"
       },
       "hooks": {
         "eejsBlock_mySettings": "ep_page_view/page_view",
-        "eejsBlock_styles": "ep_page_view/page_view"
+        "eejsBlock_styles": "ep_page_view/page_view",
+        "collectContentPre": "ep_page_view/static/js/shared",
+        "collectContentPost": "ep_page_view/static/js/shared",
+        "getLineHTMLForExport": "ep_page_view/index"
       }
     }
   ]

index.js

@@ -0,0 +1,31 @@
+var eejs = require('ep_etherpad-lite/node/eejs/');
+var Changeset = require("ep_etherpad-lite/static/js/Changeset");
+exports.eejsBlock_editbarMenuLeft = function (hook_name, args, cb) {
+  args.content = args.content + eejs.require("ep_page_view/templates/editbarButtons.ejs");
+  return cb();
+}
+
+function getInlineStyle(pageBreak) {
+  return "pageBreak: "+pageBreak+";";
+}
+
+// line, apool,attribLine,text
+exports.getLineHTMLForExport = function (hook, context) {
+  var header = _analyzeLine(context.attribLine, context.apool);
+  if (header) {
+    var inlineStyle = getInlineStyle(header);
+    return "<sup>" + context.text.substring(1) + "</sup>";
+  }
+}
+
+function _analyzeLine(alineAttrs, apool) {
+  var header = null;
+  if (alineAttrs) {
+    var opIter = Changeset.opIterator(alineAttrs);
+    if (opIter.hasNext()) {
+      var op = opIter.next();
+      header = Changeset.opAttributeValue(op, 'pageBreak', apool);
+    }
+  }
+  return header;
+}

static/css/iframe.css

@@ -0,0 +1,6 @@
+.pageBreak{
+  page-break-before: always;
+  border-bottom: 1px dotted #AAA;
+  width:100%;
+  height:1px;
+}

static/css/page_view.css

@@ -1,4 +1,4 @@
-@media (min-width: 860px) {
+@media (min-width: 1060px) {
   
 #editorcontainer.page_view {
   overflow: hidden;
@@ -13,6 +13,11 @@ iframe.page_view {
   border-width: 1px 1px 0 1px;
   position: relative;
   max-width: 850px;
+  padding:100px !important;
+  background-color:#fff;
+  min-height:800px;
+  top:150px;
+}
+
 }
 
-}

static/js/page_view.js

@@ -1,7 +1,11 @@
+var _, $, jQuery;
+var $ = require('ep_etherpad-lite/static/js/rjquery').$;
+var _ = require('ep_etherpad-lite/static/js/underscore');
+
 var isMobile = $.browser.mobile;
 
 if (!isMobile) {
-  var postAceInit = function(hook, context){
+  exports.postAceInit = function(hook, context){
     var pv = {
       enable: function() {
         $('#editorcontainer, iframe').addClass('page_view');
@@ -33,8 +37,17 @@ if (!isMobile) {
       $('#options-pageview').attr('checked',false);
       pv.disable();
     }
+
+    $('.menu_left').append("<span id='insertPageBreak'>Page Break</span>");
+
+    // Bind the event handler to the toolbar buttons
+    $('#insertPageBreak').on('click', function(){
+      context.ace.callWithAce(function(ace){
+        ace.ace_doInsertPageBreak();
+      },'insertPageBreak' , true);
+    });
+
   };
-  exports.postAceInit = postAceInit;
 } else {
   $('input#options-pageview').hide();
   $('label[for=options-pageview]').hide();
@@ -52,3 +65,97 @@ function getParam(sname){
   }
   return sval;
 }
+
+exports.aceEditorCSS = function(hook_name, cb){
+  return ["/ep_page_view/static/css/iframe.css"];
+} // inner pad CSS
+
+
+// Our PageBreak attribute will result in a PageBreak:1 class
+exports.aceAttribsToClasses = function(hook, context){
+  if(context.key == 'pageBreak'){
+    return ['pageBreak:' + 1 ];
+  }
+}
+
+/***
+*
+* Add the Javascript to Ace inner head, this is for the onClick listener
+*
+***/
+exports.aceDomLineProcessLineAttributes = function(name, context){
+  
+  if( context.cls.indexOf("pageBreak") !== -1) { var type="pageBreak"; }
+  var tagIndex = context.cls.indexOf(type);
+  if (tagIndex !== undefined && type){
+    var modifier = {
+      preHtml: '<div class="pageBreak">',
+      postHtml: '</div>',
+      processedMarker: true
+    };
+    return [modifier]; // return the modifier
+  }
+
+  return []; // or return nothing
+  
+};
+
+
+// Here we convert the class pageBreak into a tag
+exports.aceCreateDomLine = function(name, context){
+  var cls = context.cls;
+  var domline = context.domline;
+  var pageBreak = /(?:^| )pageBreak:([A-Za-z0-9]*)/.exec(cls);
+  var tagIndex;
+  if (pageBreak){
+    var modifier = {
+      extraOpenTags: '<div class=pageBreak>',
+      extraCloseTags: '</div>',
+      cls: cls
+    };
+    return [modifier];
+  }
+  return [];
+};
+
+function doInsertPageBreak(){
+  this.editorInfo.ace_doReturnKey();
+
+  var rep = this.rep;
+  var documentAttributeManager = this.documentAttributeManager;
+  if (!(rep.selStart && rep.selEnd)){ return; } // only continue if we have some caret position
+  var firstLine = rep.selStart[0]; // Get the first line
+  var lastLine = Math.max(firstLine, rep.selEnd[0] - ((rep.selEnd[1] === 0) ? 1 : 0)); // Get the last line
+  _(_.range(firstLine, lastLine + 1)).each(function(i){ // For each line, either turn on or off task list
+    var isPageBreak = documentAttributeManager.getAttributeOnLine(i, 'pageBreak');
+    if(!isPageBreak){ // if its already a PageBreak item
+      documentAttributeManager.setAttributeOnLine(i, 'pageBreak', 'pageBreak'); // make the line a task list
+    }else{
+      documentAttributeManager.removeAttributeOnLine(i, 'pageBreak'); // remove the task list from the line
+    }
+  });
+  this.editorInfo.ace_focus();
+  this.editorInfo.ace_doReturnKey();
+ 
+}
+
+// Once ace is initialized, we set ace_doInsertPageBreak and bind it to the context
+exports.aceInitialized = function(hook, context){
+  var editorInfo = context.editorInfo;
+  editorInfo.ace_doInsertPageBreak = _(doInsertPageBreak).bind(context);
+}
+
+
+// Listen for Control Enter and if it is control enter then insert page break
+exports.aceKeyEvent = function(hook, callstack, editorInfo, rep, documentAttributeManager, evt){
+  var evt = callstack.evt;
+  var k = evt.keyCode;
+  if(evt.ctrlKey && k == 13 && evt.type == "keyup" ){
+    callstack.editorInfo.ace_doInsertPageBreak();
+    evt.preventDefault();
+    return true;
+  }else{
+    return;
+  }
+}
+

static/js/shared.js

@@ -0,0 +1,26 @@
+var _ = require('ep_etherpad-lite/static/js/underscore');
+
+var collectContentPre = function(hook, context){
+  var tname = context.tname;
+  var state = context.state;
+  var lineAttributes = state.lineAttributes
+  var tagIndex = tname;
+
+  if(tagIndex >= 0){
+    lineAttributes['pageBreak'] = tagIndex;
+  }
+};
+
+var collectContentPost = function(hook, context){
+  var tname = context.tname;
+  var state = context.state;
+  var lineAttributes = state.lineAttributes
+  var tagIndex = tname;
+
+  if(tagIndex >= 0){
+    delete lineAttributes['pageBreak'];
+  }
+};
+
+exports.collectContentPre = collectContentPre;
+exports.collectContentPost = collectContentPost;