From 0214643f72c6aaa8e85eaba2ad27f2ca03ca6401 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Wed, 5 Jun 2013 15:04:50 +0200 Subject: [PATCH 1/1] wip: Experimenting with new approach - dividing visualEditor module --- fnpjs/layout.js | 18 ++ fnpjs/vbox.js | 13 ++ modules.js | 7 + modules/documentCanvas/documentCanvas.js | 255 +++++++++++++++++++++ modules/documentCanvas/template.html | 8 + modules/documentCanvas/transformations.js | 108 +++++++++ modules/metadataEditor/metadataEditor.js | 90 ++++++++ modules/metadataEditor/metadataEditor.less | 32 +++ modules/metadataEditor/templates/item.html | 5 + modules/metadataEditor/templates/main.html | 8 + modules/metadataEditor/transformations.js | 22 ++ modules/nodeFamilyTree/nodeFamilyTree.js | 62 +++++ modules/nodeFamilyTree/template.html | 19 ++ modules/nodePane/nodePane.js | 35 +++ modules/nodePane/nodePane.less | 9 + modules/nodePane/template.html | 23 ++ modules/rng.js | 12 +- modules/rng2/layout.html | 6 + modules/rng2/layout.less | 53 +++++ modules/rng2/rng2.js | 104 +++++++++ rng.js | 3 +- 21 files changed, 889 insertions(+), 3 deletions(-) create mode 100644 fnpjs/layout.js create mode 100644 fnpjs/vbox.js create mode 100644 modules/documentCanvas/documentCanvas.js create mode 100644 modules/documentCanvas/template.html create mode 100644 modules/documentCanvas/transformations.js create mode 100644 modules/metadataEditor/metadataEditor.js create mode 100644 modules/metadataEditor/metadataEditor.less create mode 100644 modules/metadataEditor/templates/item.html create mode 100644 modules/metadataEditor/templates/main.html create mode 100644 modules/metadataEditor/transformations.js create mode 100644 modules/nodeFamilyTree/nodeFamilyTree.js create mode 100644 modules/nodeFamilyTree/template.html create mode 100644 modules/nodePane/nodePane.js create mode 100644 modules/nodePane/nodePane.less create mode 100644 modules/nodePane/template.html create mode 100644 modules/rng2/layout.html create mode 100644 modules/rng2/layout.less create mode 100644 modules/rng2/rng2.js diff --git a/fnpjs/layout.js b/fnpjs/layout.js new file mode 100644 index 0000000..a7c27fe --- /dev/null +++ b/fnpjs/layout.js @@ -0,0 +1,18 @@ +define(['libs/jquery-1.9.1.min', 'libs/underscore-min'], function($ ,_) { + 'use strict'; + + var Layout = function(template) { + this.dom = $(_.template(template)()); + + }; + + Layout.prototype.setView = function(place, view) { + this.dom.find('[fnpjs-place=' + place + ']').append(view); + }; + + Layout.prototype.getAsView = function() { + return this.dom + }; + + return {Layout: Layout}; +}); \ No newline at end of file diff --git a/fnpjs/vbox.js b/fnpjs/vbox.js new file mode 100644 index 0000000..a7a5a67 --- /dev/null +++ b/fnpjs/vbox.js @@ -0,0 +1,13 @@ +define(['libs/jquery-1.9.1.min', './layout'], function($, layout) { + + var VBox = function() {}; + + VBox.prototype = new layout.Layout('
'); + VBox.prototype.appendView = function(view) { + var item = $('
').addClass('fnpjs-vbox-item').append(view); + this.dom.append(item); + } + + return {VBox: VBox}; + +}); \ No newline at end of file diff --git a/modules.js b/modules.js index 309faf1..32010a0 100644 --- a/modules.js +++ b/modules.js @@ -10,5 +10,12 @@ define(function(require) { sourceEditor: require('modules/sourceEditor'), tabsManager: require('modules/tabsManager'), visualEditor: require('modules/visualEditor'), + + documentCanvas: require('modules/documentCanvas/documentCanvas'), + nodePane: require('modules/nodePane/nodePane'), + metadataEditor: require('modules/metadataEditor/metadataEditor'), + nodeFamilyTree: require('modules/nodeFamilyTree/nodeFamilyTree'), + + rng2: require('modules/rng2/rng2') } }); \ No newline at end of file diff --git a/modules/documentCanvas/documentCanvas.js b/modules/documentCanvas/documentCanvas.js new file mode 100644 index 0000000..7e7fdf0 --- /dev/null +++ b/modules/documentCanvas/documentCanvas.js @@ -0,0 +1,255 @@ +// Module that implements main WYSIWIG edit area + +define([ +'libs/underscore-min', +'./transformations', +'libs/text!./template.html'], function(_, transformations, template) { + + + +return function(sandbox) { + + var view = { + node: $(_.template(template)()), + currentNode: null, + setup: function() { + var view = this; + + this.node.find('#rng-module-documentCanvas-content').on('keyup', function() { + //isDirty = true; + sandbox.publish('contentChanged'); + }); + + this.node.on('mouseover', '[wlxml-tag]', function(e) { sandbox.publish('nodeHovered', $(e.target)); }); + this.node.on('mouseout', '[wlxml-tag]', function(e) { sandbox.publish('nodeBlured', $(e.target)); }); + this.node.on('click', '[wlxml-tag]', function(e) { + console.log('clicked node type: '+e.target.nodeType); + view._markSelected($(e.target)); + }); + + this.node.on('keyup', '#rng-module-documentCanvas-contentWrapper', function(e) { + var anchor = $(window.getSelection().anchorNode); + if(anchor[0].nodeType === Node.TEXT_NODE) + anchor = anchor.parent(); + if(!anchor.is('[wlxml-tag]')) + return; + view._markSelected(anchor); + }); + + this.node.on('keydown', '#rng-module-documentCanvas-contentWrapper', function(e) { + if(e.which === 13) { + e.preventDefault(); + view.insertNewNode(null, null); + } + }); + + + var observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + _.each(mutation.addedNodes, function(node) { + node = $(node); + node.parent().find('[wlxml-tag]').each(function() { + tag = $(this); + if(!tag.attr('id')) + tag.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);})); + }); + }); + }); + }); + var config = { attributes: true, childList: true, characterData: true, subtree: true }; + observer.observe(this.node.find('#rng-module-documentCanvas-contentWrapper')[0], config); + + this.gridToggled = false; + }, + _createNode: function(wlxmlTag, wlxmlClass) { + var toBlock = ['div', 'document', 'section', 'header']; + var htmlTag = _.contains(toBlock, wlxmlTag) ? 'div' : 'span'; + var toret = $('<' + htmlTag + '>'); + toret.attr('wlxml-tag', wlxmlTag); + if(wlxmlClass) + toret.attr('wlxml-class', wlxmlClass); + return toret; + }, + insertNewNode: function(wlxmlTag, wlxmlClass) { + //TODO: Insert inline + var anchor = $(window.getSelection().anchorNode); + var anchorOffset = window.getSelection().anchorOffset; + if(anchor[0].nodeType === Node.TEXT_NODE) + anchor = anchor.parent(); + if(anchor.text() === '') { + var todel = anchor; + anchor = anchor.parent(); + todel.remove(); + } + if(anchorOffset > 0 && anchorOffset < anchor.text().length) { + if(wlxmlTag === null && wlxmlClass === null) { + return this.splitWithNewNode(anchor); + } + return this.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass); + } + var newNode = this._createNode(wlxmlTag || anchor.attr('wlxml-tag'), wlxmlClass || anchor.attr('wlxml-class')); + if(anchorOffset === 0) + anchor.before(newNode) + else + anchor.after(newNode); + mediator.nodeCreated(newNode); + //isDirty = true; + sandbox.publish('contentChanged'); + }, + wrapSelectionWithNewNode: function(wlxmlTag, wlxmlClass) { + var selection = window.getSelection(); + if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) { + var startOffset = selection.anchorOffset; + var endOffset = selection.focusOffset; + if(startOffset > endOffset) { + var tmp = startOffset; + startOffset = endOffset; + endOffset = tmp; + } + var node = selection.anchorNode; + var prefix = node.data.substr(0, startOffset); + var suffix = node.data.substr(endOffset); + var core = node.data.substr(startOffset, endOffset - startOffset); + var newNode = this._createNode(wlxmlTag, wlxmlClass); + newNode.text(core || 'test'); + $(node).replaceWith(newNode); + newNode.before(prefix); + newNode.after(suffix); + mediator.nodeCreated(newNode); + //isDirty = true; + sandbox.publish('contentChanged'); + } + }, + splitWithNewNode: function(node) { + var selection = window.getSelection(); + if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) { + var startOffset = selection.anchorOffset; + var endOffset = selection.focusOffset; + if(startOffset > endOffset) { + var tmp = startOffset; + startOffset = endOffset; + endOffset = tmp; + } + var anchor = selection.anchorNode; + var prefix = anchor.data.substr(0, startOffset); + var suffix = anchor.data.substr(endOffset); + var prefixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class')); + var newNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class')); + var suffixNode = this._createNode(node.attr('wlxml-tag'), node.attr('wlxml-class')); + prefixNode.text(prefix); + suffixNode.text(suffix); + node.replaceWith(newNode); + newNode.before(prefixNode); + newNode.after(suffixNode); + mediator.nodeCreated(newNode); + //isDirty = true; + sandbox.publish('contentChanged'); + } + }, + setBody: function(HTMLTree) { + this.node.find('#rng-module-documentCanvas-content').html(HTMLTree); + }, + getBody: function() { + return this.node.find('#rng-module-documentCanvas-content').html(); + }, + _markSelected: function(node) { + this.dimNode(node); + + this.node.find('.rng-current').removeClass('rng-current'); + + node.addClass('rng-current'); + + this.currentNode = node; + sandbox.publish('nodeSelected', node); + + }, + selectNode: function(node) { + view._markSelected(node); + var range = document.createRange(); + range.selectNodeContents(node[0]); + range.collapse(false); + + var selection = document.getSelection(); + selection.removeAllRanges() + selection.addRange(range); + }, + selectNodeById: function(id) { + var node = this.node.find('#'+id); + if(node) + this.selectNode(node); + }, + highlightNode: function(node) { + if(!this.gridToggled) { + node.addClass('rng-hover'); + var label = node.attr('wlxml-tag'); + if(node.attr('wlxml-class')) + label += ' / ' + node.attr('wlxml-class'); + var tag = $('
').addClass('rng-visualEditor-nodeHoverTag').text(label); + node.append(tag); + } + }, + dimNode: function(node) { + if(!this.gridToggled) { + node.removeClass('rng-hover'); + node.find('.rng-visualEditor-nodeHoverTag').remove(); + } + }, + highlightNodeById: function(id) { + var node = this.node.find('#'+id); + if(node) + this.highlightNode(node); + }, + dimNodeById: function(id) { + var node = this.node.find('#'+id); + if(node) + this.dimNode(node); + }, + selectFirstNode: function() { + var firstNodeWithText = this.node.find('[wlxml-tag]').filter(function() { + return $(this).clone().children().remove().end().text().trim() !== ''; + }).first(); + var node; + if(firstNodeWithText.length) + node = $(firstNodeWithText[0]) + else { + node = this.node.find('[wlxml-class|="p"]') + } + this.selectNode(node); + }, + toggleGrid: function(toggle) { + this.node.find('[wlxml-tag]').toggleClass('rng-hover', toggle); + this.gridToggled = toggle; + } + }; + + view.setup(); + + /* public api */ + return { + start: function() { sandbox.publish('ready'); }, + getView: function() { return view.node; }, + setDocument: function(xml) { + var transformed = transformations.fromXML.getDocumentDescription(xml); + view.setBody(transformed.HTMLTree); + view.selectFirstNode(); + //isDirty = false; + }, + modifyCurrentNode: function(attr, value) { + if(view.currentNode) + view.currentNode.attr('wlxml-'+attr, value); + }, + highlightNode: function(id) { + view.highlightNodeById(id); + }, + dimNode: function(id) { + view.dimNodeById(id); + }, + selectNode: function(id) { + view.selectNodeById(id); + } + + } + +}; + +}); \ No newline at end of file diff --git a/modules/documentCanvas/template.html b/modules/documentCanvas/template.html new file mode 100644 index 0000000..b4d7dd7 --- /dev/null +++ b/modules/documentCanvas/template.html @@ -0,0 +1,8 @@ +
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/modules/documentCanvas/transformations.js b/modules/documentCanvas/transformations.js new file mode 100644 index 0000000..cd20d2b --- /dev/null +++ b/modules/documentCanvas/transformations.js @@ -0,0 +1,108 @@ +define(['libs/jquery-1.9.1.min'], function($) { + + var transformations = {}; + + transformations.fromXML = { + getHTMLTree: function(xml) { + var inner = $(xml).clone(); + var toret = $('
'); + toret.append(inner); + + var toBlock = ['div', 'section', 'header']; + var toInline = ['aside', 'span']; + + var transform = function(tags, replacingTagName) { + tags.forEach(function(tagName) { + tagName = tagName.toLowerCase(); + console.log('running ' + tagName); + toret.find(tagName).replaceWith(function() { + var currentTag = $(this); + if(currentTag.attr('wlxml-tag')) + return; + var toret = $('<' + replacingTagName + '>').attr('wlxml-tag', tagName); + toret.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);})); + for(var i = 0; i < this.attributes.length; i++) { + var attr = this.attributes.item(i); + var value = attr.name === 'class' ? attr.value.replace(/\./g, '-') : attr.value; + toret.attr('wlxml-' + attr.name, value) + } + toret.append(currentTag.contents()); + return toret; + }); + }); + } + + transform(toBlock, 'div'); + transform(toInline, 'span'); + + return toret.children(); + }, + getMetaData: function(xml) { + var toret = {}; + $(xml).find('metadata').children().each(function() { + var node = $(this); + toret[this.nodeName.split(':')[1].toLowerCase()] = node.text(); + }) + return toret; + }, + getDocumentDescription: function(xml) { + return { + HTMLTree: this.getHTMLTree(xml), + metadata: this.getMetaData(xml) + } + } + } + + transformations.toXML = { + getXML: function(documentDescription) { + + var inner = $(documentDescription.HTMLTree); + var toret = $('
'); + toret.append(inner); + + toret.find('div, span').replaceWith(function() { + var div = $(this); + var tagName = div.attr('wlxml-tag'); + var toret = $('<'+tagName+'>'); + + for(var i = 0; i < this.attributes.length; i++) { + var attr = this.attributes.item(i); + var split = attr.name.split('-') + console.log(split); + if(split[0] !== 'wlxml' || (split.length > 1 && split[1] === 'tag')) + continue; + var wlxmlName = split.splice(1).join('-'); + var value = wlxmlName === 'class' ? attr.value.replace(/-/g, '.') : attr.value; + console.log(name + ': ' + value); + toret.attr(wlxmlName, value); + } + + toret.append(div.contents()); + return toret; + }); + + var meta = $('\n'); + _.each(_.keys(documentDescription.metadata), function(key) { + meta.append('\n\t' + documentDescription.metadata[key] + ''); + }); + meta.append('\n'); + + var metadata = toret.find('metadata'); + if(metadata.length === 0) { + var section = toret.find('section'); + section = section.length ? $(section[0]) : null; + if(section) { + section.prepend(meta) + } + } else { + metadata.replaceWith(meta); + } + + + return vkbeautify.xml(toret.html()); + } + } + + return transformations; + +}); \ No newline at end of file diff --git a/modules/metadataEditor/metadataEditor.js b/modules/metadataEditor/metadataEditor.js new file mode 100644 index 0000000..5c3e4fc --- /dev/null +++ b/modules/metadataEditor/metadataEditor.js @@ -0,0 +1,90 @@ +define([ +'libs/jquery-1.9.1.min', +'libs/underscore-min', +'./transformations', +'libs/text!./templates/main.html', +'libs/text!./templates/item.html' +], function($, _, transformations, mainTemplate, itemTemplate) { + +'use strict'; + +return function(sandbox) { + + + var view = { + node: $(_.template(mainTemplate)()), + setup: function() { + var metaTable = this.metaTable = this.node.find('table'); + + this.node.find('.rng-module-metadataEditor-addBtn').click(function() { + var newRow = view._addMetaRow('', ''); + $(newRow.find('td div')[0]).focus(); + //isDirty = true; + }); + + this.metaTable.on('click', '.rng-visualEditor-metaRemoveBtn', function(e) { + $(e.target).closest('tr').remove(); + //isDirty = true; + }); + + this.metaTable.on('keydown', '[contenteditable]', function(e) { + console.log(e.which); + if(e.which === 13) { + if($(document.activeElement).hasClass('rng-module-metadataEditor-metaItemKey')) { + metaTable.find('.rng-module-metadataEditor-metaItemValue').focus(); + } else { + var input = $(''); + input.appendTo('body').focus() + view.node.find('.rng-module-metadataEditor-addBtn').focus(); + input.remove(); + } + e.preventDefault(); + } + + }); + }, + getMetaData: function() { + var toret = {}; + this.node.find('tr').each(function() { + var tr = $(this); + var inputs = $(this).find('td [contenteditable]'); + var key = $(inputs[0]).text(); + var value = $(inputs[1]).text(); + toret[key] = value; + }); + return toret; + }, + setMetadata: function(metadata) { + var view = this; + this.metaTable.find('tr').remove(); + _.each(_.keys(metadata), function(key) { + view._addMetaRow(key, metadata[key]); + }); + }, + _addMetaRow: function(key, value) { + var newRow = $(_.template(itemTemplate)({key: key || '', value: value || ''})); + newRow.appendTo(this.metaTable); + return newRow; + } + } + + view.setup(); + + return { + start: function() { + sandbox.publish('ready'); + }, + setMetadata: function(xml) { + view.setMetadata(transformations.getMetadata(xml)); + }, + getMetadata: function() { + return view.getMetadata(); + }, + getView: function() { + return view.node; + } + + }; +} + +}); \ No newline at end of file diff --git a/modules/metadataEditor/metadataEditor.less b/modules/metadataEditor/metadataEditor.less new file mode 100644 index 0000000..8a9446c --- /dev/null +++ b/modules/metadataEditor/metadataEditor.less @@ -0,0 +1,32 @@ +.rng-module-metadataEditor { + + table { + margin-bottom:10px; + + [contenteditable] { + cursor: pointer; + } + + li:last-child { + border-bottom: none !important; + } + + tr td:nth-child(1){ + width: 20%; + } + + tr td:nth-child(2) { + width:80%; + } + } + + .rng-module-metadataEditor-addBtn { + float:right; + margin-right:6px; + } + + .btn { + padding:3px; + line-height:10px; + } +} \ No newline at end of file diff --git a/modules/metadataEditor/templates/item.html b/modules/metadataEditor/templates/item.html new file mode 100644 index 0000000..ef91cab --- /dev/null +++ b/modules/metadataEditor/templates/item.html @@ -0,0 +1,5 @@ + +
<%= key %>
+
<%= value %>
+ + \ No newline at end of file diff --git a/modules/metadataEditor/templates/main.html b/modules/metadataEditor/templates/main.html new file mode 100644 index 0000000..e163cbb --- /dev/null +++ b/modules/metadataEditor/templates/main.html @@ -0,0 +1,8 @@ +
+
+ Meta dane + +
+ +
+
\ No newline at end of file diff --git a/modules/metadataEditor/transformations.js b/modules/metadataEditor/transformations.js new file mode 100644 index 0000000..a6fea3f --- /dev/null +++ b/modules/metadataEditor/transformations.js @@ -0,0 +1,22 @@ +define(['libs/jquery-1.9.1.min'], function($) { + + return { + getMetadata: function(xml) { + var toret = {}; + $(xml).find('metadata').children().each(function() { + var node = $(this); + toret[this.nodeName.split(':')[1].toLowerCase()] = node.text(); + }) + return toret; + }, + getXML: function(metadata) { + var meta = $('\n'); + _.each(_.keys(metadata), function(key) { + meta.append('\n\t' + metadata[key] + ''); + }); + meta.append('\n'); + return vkbeautify.xml(meta.html()); + } + } + +}); \ No newline at end of file diff --git a/modules/nodeFamilyTree/nodeFamilyTree.js b/modules/nodeFamilyTree/nodeFamilyTree.js new file mode 100644 index 0000000..68ab8f0 --- /dev/null +++ b/modules/nodeFamilyTree/nodeFamilyTree.js @@ -0,0 +1,62 @@ +define([ +'libs/jquery-1.9.1.min', +'libs/underscore-min', +'libs/text!./template.html' +], function($, _, templateSrc) { + +'use strict'; + +return function(sandbox) { + + var template = _.template(templateSrc); + + var view = { + dom: $('
' + template({children: null, parent: null}) + '
'), + setup: function() { + this.dom.on('click', 'a', function(e) { + var target = $(e.target); + sandbox.publish('nodeSelected', target.attr('data-id')); + }); + + this.dom.on('mouseenter', 'a', function(e) { + var target = $(e.target); + sandbox.publish('nodeEntered', target.attr('data-id')); + }); + this.dom.on('mouseleave', 'a', function(e) { + var target = $(e.target); + sandbox.publish('nodeLeft', target.attr('data-id')); + }); + }, + setNode: function(node) { + var parentClass = node.parent().attr('wlxml-class'); + var parent = node.parent('[wlxml-tag]').length ? { + repr: node.parent().attr('wlxml-tag') + (parentClass ? ' / ' + parentClass : ''), + id: node.parent().attr('id') + } : undefined; + var children = []; + node.children('[wlxml-tag]').each(function() { + var child = $(this); + var childClass = child.attr('wlxml-class'); + children.push({repr: child.attr('wlxml-tag') + (childClass ? ' / ' + childClass : ''), id: child.attr('id')}); + }); + this.dom.empty(); + this.dom.append($(template({parent: parent, children: children}))); + } + } + + view.setup(); + + return { + start: function() { + sandbox.publish('ready'); + }, + setNode: function(node) { + view.setNode(node); + }, + getView: function() { + return view.dom; + } + }; +}; + +}); \ No newline at end of file diff --git a/modules/nodeFamilyTree/template.html b/modules/nodeFamilyTree/template.html new file mode 100644 index 0000000..252d234 --- /dev/null +++ b/modules/nodeFamilyTree/template.html @@ -0,0 +1,19 @@ +
+ + + + + + + + + + \ No newline at end of file diff --git a/modules/nodePane/nodePane.js b/modules/nodePane/nodePane.js new file mode 100644 index 0000000..47777b7 --- /dev/null +++ b/modules/nodePane/nodePane.js @@ -0,0 +1,35 @@ +define([ +'libs/text!./template.html', +'libs/jquery-1.9.1.min', +'libs/underscore-min', + +], function(templateSrc, $, _) { + +return function(sandbox) { + + view = $(_.template(templateSrc)()); + + view.on('change', 'select', function(e) { + var target = $(e.target); + var attr = target.attr('class').split('-')[2].split('nodePane')[1].substr(0,3) === 'Tag' ? 'tag' : 'class'; + sandbox.publish('nodeChanged', attr, target.val()); + }); + + return { + start: function() { + sandbox.publish('ready'); + }, + getView: function() { + return view; + }, + setNode: function(node) { + var tag = node.attr('wlxml-tag'); + var klass = node.attr('wlxml-class'); + view.find('.rng-module-nodePane-tagSelect').val(tag); + view.find('.rng-module-nodePane-classSelect').val(klass); + } + } + +} + +}); \ No newline at end of file diff --git a/modules/nodePane/nodePane.less b/modules/nodePane/nodePane.less new file mode 100644 index 0000000..5dfd252 --- /dev/null +++ b/modules/nodePane/nodePane.less @@ -0,0 +1,9 @@ +.rng-module-nodePane { + label { + width: 50px; + display: inline-block; + } + select { + width: 100px; + } +} \ No newline at end of file diff --git a/modules/nodePane/template.html b/modules/nodePane/template.html new file mode 100644 index 0000000..4d5caf6 --- /dev/null +++ b/modules/nodePane/template.html @@ -0,0 +1,23 @@ +
+
+ Current node +
+ + +
+
+ + +
+
+
\ No newline at end of file diff --git a/modules/rng.js b/modules/rng.js index 6068d4d..0106f03 100644 --- a/modules/rng.js +++ b/modules/rng.js @@ -32,7 +32,7 @@ return function(sandbox) { eventHandlers.tabsManager = { ready: function() { sandbox.getModule('skelton').setMainView(sandbox.getModule('tabsManager').getView()); - _.each(['visualEditor', 'sourceEditor'], function(moduleName) { + _.each(['visualEditor', 'sourceEditor', 'rng2'], function(moduleName) { sandbox.getModule(moduleName).start(); }); }, @@ -84,6 +84,12 @@ return function(sandbox) { } } + eventHandlers.rng2 = { + ready: function() { + addTab('rng2 test', 'rng2test', sandbox.getModule('rng2').getView()); + + } + } /* api */ @@ -92,7 +98,9 @@ return function(sandbox) { sandbox.getModule('data').start(); }, handleEvent: function(moduleName, eventName, args) { - if(eventHandlers[moduleName] && eventHandlers[moduleName][eventName]) { + if('') + wysiwigHandler.handleEvent(moduleName, eventName, args); + else if(eventHandlers[moduleName] && eventHandlers[moduleName][eventName]) { eventHandlers[moduleName][eventName].apply(eventHandlers, args); } } diff --git a/modules/rng2/layout.html b/modules/rng2/layout.html new file mode 100644 index 0000000..f98ca07 --- /dev/null +++ b/modules/rng2/layout.html @@ -0,0 +1,6 @@ +
+
+
+
+
+
\ No newline at end of file diff --git a/modules/rng2/layout.less b/modules/rng2/layout.less new file mode 100644 index 0000000..9b603dd --- /dev/null +++ b/modules/rng2/layout.less @@ -0,0 +1,53 @@ + +.rng-module-rng2-left { + float: left; + width: 600px; +} + +.rng-module-rng2-right { + float: right; + position: relative; + width: 258px; + margin-left: 50px; + + border-width: 1px 1px 1px 1px; + border-style: solid; + border-color: #ddd; + padding: 5px 15px; + + p, td, label, input, select { + font-size: 11px; + line-height:13px; + } + + select { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + height: auto; + line-height: 14px; + } + + legend { + font-size:11px; + height:30px; + } + + + .rng-view-tabs-tabBar { + position:absolute; + top:-1px; + right:-50px; + border-width: 1px 1px 1px 0px; + border-style: solid; + border-color: #ddd; + padding: 5px; + background: #ededed; + } + + label + select { + position:relative; + top: 5px; + } + +} \ No newline at end of file diff --git a/modules/rng2/rng2.js b/modules/rng2/rng2.js new file mode 100644 index 0000000..e488e1b --- /dev/null +++ b/modules/rng2/rng2.js @@ -0,0 +1,104 @@ +define([ +'fnpjs/layout', +'fnpjs/vbox', +'views/tabs/tabs', +'libs/text!./layout.html', +], +function(layout, vbox, tabs, layoutTemplate) { + +'use strict'; + +return function(sandbox) { + var view = new layout.Layout(layoutTemplate); + + var sidebar = new tabs.View({stacked: true}); + sidebar.render(); + + var box = new vbox.VBox(); + + + view.setView('rightColumn', sidebar.$el); + + var eventHandlers = {}; + + eventHandlers.documentCanvas = { + ready: function() { + sandbox.getModule('documentCanvas').setDocument(sandbox.getModule('data').getDocument()); + view.setView('leftColumn', sandbox.getModule('documentCanvas').getView()); + }, + + nodeSelected: function(node) { + sandbox.getModule('nodePane').setNode(node); + sandbox.getModule('nodeFamilyTree').setNode(node); + }, + + contentChanged: function() { + + }, + + nodeHovered: function(node) { + + }, + + nodeBlured: function(node) { + + } + }; + + eventHandlers.nodePane = { + ready: function() { + //sidebar.addTab({icon: 'pencil'}, 'nodePane', sandbox.getModule('nodePane').getView()); + box.appendView(sandbox.getModule('nodePane').getView()); + sidebar.addTab({icon: 'pencil'}, 'edit', box.getAsView()); + }, + + nodeChanged: function(attr, value) { + sandbox.getModule('documentCanvas').modifyCurrentNode(attr, value); + } + }; + + eventHandlers.metadataEditor = { + ready: function() { + sandbox.getModule('metadataEditor').setMetadata(sandbox.getModule('data').getDocument()); + sidebar.addTab({icon: 'info-sign'}, 'metadataEditor', sandbox.getModule('metadataEditor').getView()); + } + }; + + eventHandlers.nodeFamilyTree = { + ready: function() { + //sidebar.addTab({icon: 'home'}, 'family', sandbox.getModule('nodeFamilyTree').getView()); + box.appendView(sandbox.getModule('nodeFamilyTree').getView()); + }, + nodeEntered: function(id) { + sandbox.getModule('documentCanvas').highlightNode(id); + }, + nodeLeft: function(id) { + sandbox.getModule('documentCanvas').dimNode(id); + }, + nodeSelected: function(id) { + sandbox.getModule('documentCanvas').selectNode(id); + } + } + + + + return { + start: function() { + sandbox.getModule('documentCanvas').start(); + sandbox.getModule('nodePane').start(); + sandbox.getModule('metadataEditor').start(); + sandbox.getModule('nodeFamilyTree').start(); + + sandbox.publish('ready'); + }, + handleEvent: function(moduleName, eventName, args) { + if(eventHandlers[moduleName] && eventHandlers[moduleName][eventName]) { + eventHandlers[moduleName][eventName].apply(eventHandlers, args); + } + }, + getView: function() { return view.getAsView(); } + + } +} + +}); \ No newline at end of file diff --git a/rng.js b/rng.js index e30a633..57d5818 100644 --- a/rng.js +++ b/rng.js @@ -3,6 +3,7 @@ define({ initModules: ['rng'], permissions: { 'skelton': ['getDOM'], - 'rng': ['getModule', 'handleEvents'] + 'rng': ['getModule', 'handleEvents'], + 'rng2': ['getModule', 'handleEvents'] } }); \ No newline at end of file -- 2.20.1
powyżej<% if(parent) { %><%= parent.repr %><% } else { %>-<% } %>
poniżej +
    + <% if(!children || children.length === 0) { %>-<% } else { %> + <% children.forEach(function(child) { %> +
  • <%= child.repr %>
    • + <% }); %> + <% } %> +
+