Mess but semi working page logic

ep.json

@@ -3,11 +3,21 @@
     {
       "name": "page_view",
       "client_hooks": {
-        "postAceInit": "ep_page_view/static/js/page_view:postAceInit"
+        "aceEditorCSS": "ep_page_view/static/js/page_view",
+        "aceDomLineProcessLineAttributes": "ep_page_view/static/js/page_view",
+        "postAceInit": "ep_page_view/static/js/page_view:postAceInit",
+        "aceEditEvent": "ep_page_view/static/js/page_view:aceEditEvent",
+        "aceCreateDomLine": "ep_page_view/static/js/page_view:aceCreateDomLine",
+        "aceAttribsToClasses": "ep_page_view/static/js/page_view",
+        "collectContentPre": "ep_page_view/static/js/shared",
+        "aceRegisterBlockElements": "ep_page_view/static/js/page_view",
+        "aceInitialized": "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"
       }
     }
   ]

static/css/page_view.css

@@ -1,3 +1,9 @@
+.pagebreak{
+  margin-top:50px;
+  border-top:dotted grey 1px;
+  padding-top:50px;
+}
+
 @media (min-width: 860px) {
   
 #editorcontainer.page_view {
@@ -15,4 +21,4 @@ iframe.page_view {
   max-width: 850px;
 }
 
-}
+}

static/js/page_view.js

@@ -1,4 +1,41 @@
+var _, $, jQuery;
+
+var $ = require('ep_etherpad-lite/static/js/rjquery').$;
+var _ = require('ep_etherpad-lite/static/js/underscore');
+var cssFiles = ['ep_page_view/static/css/page_view.css'];
+
 var isMobile = $.browser.mobile;
+var page_layout = {};
+page_layout.lineObj = {};
+
+// Our pagebreak attribute will result in a pagebreak class
+function aceAttribsToClasses(hook, context){
+  if(context.key == 'pagebreak'){
+    return ['pagebreak'];
+  }
+}
+
+var aceRegisterBlockElements = function(){
+  return ["pagebreak"];
+}
+
+// Here we convert the class pagebreak into a tag
+var aceDomLineProcessLineAttributes = function(name, context){
+  //console.log("process lien attr", context);
+  var cls = context.cls;
+  var domline = context.domline;
+  var alignType = /(?:^| )pagebreak:([A-Za-z0-9]*)/.exec(cls);
+  var tagIndex;
+  if (alignType){
+    var modifier = {
+      preHtml: '<p style="width:100%;text-align:right"><span>',
+      postHtml: '</span></p>',
+      processedMarker: true
+    };
+    return [modifier];
+  }
+  return [];
+};
 
 if (!isMobile) {
   var postAceInit = function(hook, context){
@@ -34,21 +71,104 @@ if (!isMobile) {
       pv.disable();
     }
   };
+  $("#options-linenoscheck").attr("checked", false);
   exports.postAceInit = postAceInit;
 } else {
   $('input#options-pageview').hide();
   $('label[for=options-pageview]').hide();
 }
 
-function getParam(sname){
-  var params = location.search.substr(location.search.indexOf("?")+1);
-  var sval = "";
-  params = params.split("&");
-  // split param and value into individual pieces
-  for (var i=0; i<params.length; i++)
-  {
-    temp = params[i].split("=");
-    if ( [temp[0]] == sname ) { sval = temp[1]; }
-  }
-  return sval;
+exports.aceEditEvent = function (hook_name, args, cb) {
+  if(!args.callstack.docTextChanged) return false; // we should only run this if the pad contents is changed..
+  // actually the above isn't true, we will have to redraw pages on pretty much any change :\
+   pageLayoutUpdate();
 }
+
+function pageLayoutUpdate(){
+  // Get the document dimensions in Pixels remembering 1 px = 0.264583333 mm
+  // Figure out what line each page should be on
+  var lines = $('iframe[name="ace_outer"]').contents().find('iframe').contents().find("#innerdocbody").children("div");
+  var currPage = 1;
+  $(lines).each(function(){
+    var newY = $(this).context.offsetTop;
+    var focusId = this.id; // get the id of the link
+    var linePage = pageNumber(newY);
+
+    // Is it a new page?
+    if(linePage > currPage){ // New page, need to add line break above this line or so
+      currPage = linePage;
+      // Add line break above this line
+      var newPage = true;
+      $(this).addClass("pagebreak");
+    }else{
+      var newPage = false;
+    } 
+
+    // Put together the object, we will refer to this in aceCreateDomLine
+    page_layout.lineObj[focusId] = {
+      y : newY,
+      pageNumber : linePage,
+      newPage: newPage
+    }
+  });
+  //console.log(page_layout.lineObj);
+  // Draw something that shows a split page, it might be we add a class to a div or so
+
+}
+
+function pageNumber(y){ // Given a Y co-ord provide the page number
+  var paperHeight = 297; // temporary 297 is mm height of A4
+  var pageNumber = y / 297;
+  y = y * 0.264583333; // Number of MM of each pixel
+  pageNumber = Math.ceil(pageNumber); // Round up to nearest whole number.. Note Round UP!
+  return pageNumber;
+}
+
+function getParam(sname){
+  var params = location.search.substr(location.search.indexOf("?")+1);
+  var sval = "";
+  params = params.split("&");
+  // split param and value into individual pieces
+  for (var i=0; i<params.length; i++)
+  {
+    temp = params[i].split("=");
+    if ( [temp[0]] == sname ) { sval = temp[1]; }
+  }
+  return sval;
+}
+
+exports.aceCreateDomLine = function(name, args){
+  //console.log("J", name, args);
+  if (args.cls.indexOf('image') > -1) { // If it's an image
+    var src;
+    cls = args.cls.replace(/(^| )image:(\S+)/g, function(x0, space, image) {
+      src = image;
+      return space + "image image_" + image;
+    });
+
+   return [{
+     cls: cls,
+     extraOpenTags: '<img src="' + src + '" style="max-width:100%" /><br/>',
+     extraCloseTags:''
+   }];
+  }
+}
+
+
+// Once ace is initialized, we set ace_doInsertalign and bind it to the context
+function aceInitialized(hook, context){
+  top.pad.changeViewOption('showLineNumbers', false);
+  pageLayoutUpdate();
+}
+
+function aceEditorCSS(){
+  return cssFiles;
+};
+
+// Export all hooks
+exports.aceRegisterBlockElements = aceRegisterBlockElements;
+exports.aceInitialized = aceInitialized;
+exports.postAceInit = postAceInit;
+exports.aceDomLineProcessLineAttributes = aceDomLineProcessLineAttributes;
+exports.aceAttribsToClasses = aceAttribsToClasses;
+exports.aceEditorCSS = aceEditorCSS;

static/js/shared.js

@@ -0,0 +1,28 @@
+var _ = require('ep_etherpad-lite/static/js/underscore');
+
+var tags = ['pagebreak'];
+
+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['pagebreak'] = 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['pagebreak'];
+  }
+};
+
+exports.collectContentPre = collectContentPre;
+exports.collectContentPost = collectContentPost;

templates/page_view_entry.ejs

@@ -2,3 +2,10 @@
     <input type="checkbox" id="options-pageview" <%= checked %>></input> 
     <label for="options-pageview">Page View</label>
 </p>
+<p>
+    <label for="options-pageview-paper-type">Paper Size</label>
+    <select id="options-pageview-paper-type">
+     <option value="a4">A4</option>
+     <option value="a5">A5</option>
+    </select>
+</p>