diff --git a/ep.json b/ep.json index 33c2dbd..047d29e 100644 --- a/ep.json +++ b/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" } } ] diff --git a/static/css/page_view.css b/static/css/page_view.css index 64499e0..fda742f 100644 --- a/static/css/page_view.css +++ b/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; } -} \ No newline at end of file +} diff --git a/static/js/page_view.js b/static/js/page_view.js index 8f85900..c2aa4da 100644 --- a/static/js/page_view.js +++ b/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: '

', + postHtml: '

', + 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 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 -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: '
', + 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; diff --git a/static/js/shared.js b/static/js/shared.js new file mode 100644 index 0000000..67fee80 --- /dev/null +++ b/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; diff --git a/templates/page_view_entry.ejs b/templates/page_view_entry.ejs index 241f54b..9f19ef7 100644 --- a/templates/page_view_entry.ejs +++ b/templates/page_view_entry.ejs @@ -2,3 +2,10 @@ >

+

+ + +