X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/8e0830cb8d24b4d81d12a4df96d03c9d78f88343..87cdc842b0f5f80d78ecb3cbbc3ce5c6ed6a7e62:/modules/visualEditor.js diff --git a/modules/visualEditor.js b/modules/visualEditor.js index 5e26978..d5ff4b5 100644 --- a/modules/visualEditor.js +++ b/modules/visualEditor.js @@ -34,13 +34,7 @@ rng.modules.visualEditor = function(sandbox) { this.node.on('keydown', '#rng-visualEditor-contentWrapper', function(e) { if(e.which === 13) { e.preventDefault(); - var anchor = $(window.getSelection().anchorNode); - if(anchor[0].nodeType === Node.TEXT_NODE) - anchor = anchor.parent(); - var newNode = anchor.clone().empty(); - newNode.attr('id', ''); - anchor.after(newNode); - view.selectNode(newNode); + view.insertNewNode(null, null); } }); @@ -77,9 +71,6 @@ rng.modules.visualEditor = function(sandbox) { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { - if(mutation.addedNodes.length > 0) { - console.log(mutation.addedNodes); - } _.each(mutation.addedNodes, function(node) { node = $(node); node.parent().find('[wlxml-tag]').each(function() { @@ -95,6 +86,88 @@ rng.modules.visualEditor = function(sandbox) { 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; + }, + 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; + } + }, + 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; + } + }, getMetaData: function() { var toret = {}; this.metaTable.find('tr').each(function() { @@ -121,8 +194,12 @@ rng.modules.visualEditor = function(sandbox) { return this.node.find('#rng-visualEditor-content').html(); }, _markSelected: function(node) { + this.dimNode(node); + this.node.find('.rng-current').removeClass('rng-current'); + node.addClass('rng-current'); + this.currentNode = node; mediator.nodeSelected(node); }, @@ -142,12 +219,20 @@ rng.modules.visualEditor = function(sandbox) { this.selectNode(node); }, highlightNode: function(node) { - if(!this.gridToggled) + 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) + if(!this.gridToggled) { node.removeClass('rng-hover'); + node.find('.rng-visualEditor-nodeHoverTag').remove(); + } }, highlightNodeById: function(id) { var node = this.node.find('#'+id); @@ -205,31 +290,7 @@ rng.modules.visualEditor = function(sandbox) { mediator.getCurrentNode().attr('wlxml-'+attr, target.val()); isDirty = true; }); - - view.node.on('change', '.rng-visualEditor-editPaneSelectionForm select', function(e) { - var target = $(e.target); - 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 = $('' + core + ''); - $(node).replaceWith(newNode); - newNode.before(prefix); - newNode.after(suffix); - mediator.nodeCreated(newNode); - isDirty = true; - } - }); - + view.node.on('click', '.rng-visualEditor-editPaneSurrouding a', function(e) { var target = $(e.target); mediator.nodeDimmedById(target.attr('data-id')); @@ -254,16 +315,18 @@ rng.modules.visualEditor = function(sandbox) { }, updateEditPane: function(node) { var pane = this.node.find('#rng-visualEditor-edit'); + var parentClass = node.parent().attr('wlxml-class'); pane.html( $(sandbox.getTemplate('editPane')({tag: node.attr('wlxml-tag'), klass: node.attr('wlxml-class')}))); - var parent = { - repr: node.parent().attr('wlxml-tag') + ' / ' + (node.parent().attr('wlxml-class') || '[[no 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().each(function() { + node.children('[wlxml-tag]').each(function() { var child = $(this); - children.push({repr: child.attr('wlxml-tag') + ' / ' + (child.attr('wlxml-class') || '[[no class]]'), id: child.attr('id')}); + var childClass = child.attr('wlxml-class'); + children.push({repr: child.attr('wlxml-tag') + (childClass ? ' / ' + childClass : ''), id: child.attr('id')}); }); var naviTemplate = sandbox.getTemplate('editPaneNavigation')({parent: parent, children: children}); pane.find('.rng-visualEditor-editPaneSurrouding > div').html($(naviTemplate)); @@ -289,13 +352,52 @@ rng.modules.visualEditor = function(sandbox) { btn.toggleClass('active') mediator.toolbarButtonToggled(btn.attr('data-btn'), btn.hasClass('active')); } + if(btn.attr('data-btn-type') === 'cmd') { + mediator.toolbarButtonCmd(btn.attr('data-btn'), btn.attr('data-meta')); + } }); + }, + getOption: function(option) { + return this.node.find('.rng-visualEditor-toolbarOption[data-option=' + option +']').val(); + } + } + + var statusBarView = { + node: view.node.find('#rng-visualEditor-statusbar'), + setup: function() { + var view = this; + view.node.on('mouseenter', 'a', function(e) { + var target = $(e.target); + mediator.nodeHighlightedById(target.attr('data-id')); + }); + view.node.on('mouseleave', 'a', function(e) { + var target = $(e.target); + mediator.nodeDimmedById(target.attr('data-id')); + }); + view.node.on('click', 'a', function(e) { + e.preventDefault(); + mediator.nodeSelectedById($(e.target).attr('data-id')); + }); + }, + + showNode: function(node) { + this.node.empty(); + this.node.html(sandbox.getTemplate('statusBarNodeDisplay')({node: node, parents: node.parents('[wlxml-tag]')})); + //node.parents('[wlxml-tag]') + }, + + highlightNode: function(id) { + this.node.find('a[data-id="'+id+'"]').addClass('rng-hover'); + }, + dimNode: function(id) { + this.node.find('a[data-id="' +id+'"]').removeClass('rng-hover'); } } view.setup(); sideBarView.setup(); toolbarView.setup(); + statusBarView.setup(); var mediator = { getCurrentNode: function() { @@ -303,10 +405,10 @@ rng.modules.visualEditor = function(sandbox) { }, nodeCreated: function(node) { view.selectNode(node); - }, nodeSelected: function(node) { sideBarView.updateEditPane(node); + statusBarView.showNode(node); }, nodeSelectedById: function(id) { view.selectNodeById(id); @@ -323,13 +425,36 @@ rng.modules.visualEditor = function(sandbox) { if(btn === 'tags') view.toggleTags(toggle); }, + toolbarButtonCmd: function(btn, meta) { + if(btn === 'new-node') { + var wlxmlTag = toolbarView.getOption('newTag-tag'); + var wlxmlClass = toolbarView.getOption('newTag-class'); + if(meta) { + var split = meta.split('/'); + wlxmlTag = split[0]; + wlxmlClass = split[1]; + } + if(window.getSelection().isCollapsed) + view.insertNewNode(wlxmlTag, wlxmlClass); + else { + this.wrapWithNodeRequest(wlxmlTag, wlxmlClass); + } + + + } + }, nodeHovered: function(node) { view.highlightNode(node); sideBarView.highlightNode(node.attr('id')); + statusBarView.highlightNode(node.attr('id')); }, nodeBlured: function(node) { view.dimNode(node); sideBarView.dimNode(node.attr('id')); + statusBarView.dimNode(node.attr('id')); + }, + wrapWithNodeRequest: function(wlxmlTag, wlxmlClass) { + view.wrapSelectionWithNewNode(wlxmlTag, wlxmlClass); } }