From: Aleksander Ɓukasz Date: Mon, 26 May 2014 11:03:07 +0000 (+0200) Subject: editor: refactoring canvas markup X-Git-Url: https://git.mdrn.pl/fnpeditor.git/commitdiff_plain/a1337ec35d99fc246d98bc67b80d5bfad44282d4?hp=41e72aeb83a24604c20aa896c18d9865955446c0 editor: refactoring canvas markup --- diff --git a/src/editor/modules/documentCanvas/canvas/canvas.html b/src/editor/modules/documentCanvas/canvas/canvas.html new file mode 100644 index 0000000..d798fd2 --- /dev/null +++ b/src/editor/modules/documentCanvas/canvas/canvas.html @@ -0,0 +1,5 @@ +
+
+
+
+
\ No newline at end of file diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js index 3bf6b51..ab31ee1 100644 --- a/src/editor/modules/documentCanvas/canvas/canvas.js +++ b/src/editor/modules/documentCanvas/canvas/canvas.js @@ -11,7 +11,8 @@ define([ 'modules/documentCanvas/canvas/genericElement', 'modules/documentCanvas/canvas/nullElement', 'modules/documentCanvas/canvas/gutter', -], function($, _, Backbone, logging, documentElement, keyboard, utils, wlxmlListener, ElementsRegister, genericElement, nullElement, gutter) { +'libs/text!./canvas.html' +], function($, _, Backbone, logging, documentElement, keyboard, utils, wlxmlListener, ElementsRegister, genericElement, nullElement, gutter, canvasTemplate) { 'use strict'; /* global document:false, window:false, Node:false, gettext */ @@ -75,13 +76,13 @@ var Canvas = function(wlxmlDocument, elements) { }.bind(this)); this.eventBus = _.extend({}, Backbone.Events); - this.wrapper = $('
'); + this.dom = $(canvasTemplate); + this.rootWrapper = this.dom.find('.root-wrapper'); this.gutter = gutter.create(); this.gutterView = new gutter.GutterView(this.gutter); - this.rootWrapper = $('
').addClass('canvas-wrapper').attr('contenteditable', true); - this.wrapper.find('.crow').append(this.rootWrapper, this.gutterView.dom); + this.dom.find('.view-row').append(this.gutterView.dom); this.wlxmlListener = wlxmlListener.create(this); this.loadWlxmlDocument(wlxmlDocument); @@ -92,7 +93,7 @@ var Canvas = function(wlxmlDocument, elements) { $.extend(Canvas.prototype, Backbone.Events, { getElementOffset: function(element) { - return element.dom.offset().top - this.wrapper.offset().top; + return element.dom.offset().top - this.dom.offset().top; }, loadWlxmlDocument: function(wlxmlDocument) { @@ -205,7 +206,7 @@ $.extend(Canvas.prototype, Backbone.Events, { mutation.target.data = mutation.target.data.replace(utils.unicode.ZWS, ''); canvas._moveCaretToTextElement(canvas.getDocumentElement(mutation.target), 'end'); } - observer.observe(canvas.wrapper[0], config); + observer.observe(canvas.dom[0], config); var textElement = canvas.getDocumentElement(mutation.target), toSet = mutation.target.data !== utils.unicode.ZWS ? mutation.target.data : ''; @@ -249,7 +250,7 @@ $.extend(Canvas.prototype, Backbone.Events, { }, view: function() { - return this.wrapper; + return this.dom; }, doc: function() { diff --git a/src/editor/modules/documentCanvas/canvas/canvas.less b/src/editor/modules/documentCanvas/canvas/canvas.less new file mode 100644 index 0000000..934aff8 --- /dev/null +++ b/src/editor/modules/documentCanvas/canvas/canvas.less @@ -0,0 +1,8 @@ +.view-table { + display: table; + width: 96%; + + .view-row { + display: table-row; + } +} diff --git a/src/editor/modules/documentCanvas/documentCanvas.less b/src/editor/modules/documentCanvas/documentCanvas.less index d1042c2..1297d73 100644 --- a/src/editor/modules/documentCanvas/documentCanvas.less +++ b/src/editor/modules/documentCanvas/documentCanvas.less @@ -1,4 +1,5 @@ @import 'nodes.less'; +@import 'canvas/canvas.less'; @import 'canvas/documentElement.less'; @import 'canvas/genericElement.less'; @import 'canvas/gutter.less'; @@ -31,7 +32,7 @@ .rng-mixin-scrollbar-thumb-window-inactive; } - .canvas-wrapper { + .root-wrapper { display: table-cell; vertical-align: top; width:800px;