X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/6c3dfb35e4a92d05de9ffcfd7d6e23a9a9cb32fe..c9ec6d3adaf0d2119ed2ef7eecc2e5b525f2f86d:/modules/visualEditor.js diff --git a/modules/visualEditor.js b/modules/visualEditor.js index 8a96cb9..39859a8 100644 --- a/modules/visualEditor.js +++ b/modules/visualEditor.js @@ -15,8 +15,8 @@ rng.modules.visualEditor = function(sandbox) { isDirty = true; }); - this.node.on('mouseover', '[wlxml-tag]', function(e) { $(e.target).addClass('rng-hover')}); - this.node.on('mouseout', '[wlxml-tag]', function(e) { $(e.target).removeClass('rng-hover')}); + this.node.on('mouseover', '[wlxml-tag]', function(e) { mediator.nodeHovered($(e.target));}); + this.node.on('mouseout', '[wlxml-tag]', function(e) { mediator.nodeBlured($(e.target));}); this.node.on('click', '[wlxml-tag]', function(e) { console.log('clicked node type: '+e.target.nodeType); view._markSelected($(e.target)); @@ -31,6 +31,19 @@ rng.modules.visualEditor = function(sandbox) { view._markSelected(anchor); }); + 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); + } + }); + var metaTable = this.metaTable = this.node.find('#rng-visualEditor-meta table'); @@ -60,7 +73,27 @@ 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() { + 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-visualEditor-contentWrapper')[0], config); + + this.gridToggled = false; }, getMetaData: function() { var toret = {}; @@ -93,17 +126,59 @@ rng.modules.visualEditor = function(sandbox) { this.currentNode = node; mediator.nodeSelected(node); }, - markFirstSelected: function() { + 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'); + }, + dimNode: function(node) { + if(!this.gridToggled) + node.removeClass('rng-hover'); + }, + 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) - $(firstNodeWithText[0]).click().focus(); + node = $(firstNodeWithText[0]) + else { + node = this.node.find('[wlxml-class|="p"]') + } + this.selectNode(node); }, _addMetaRow: function(key, value) { var newRow = $(sandbox.getTemplate('metaItem')({key: key || '', value: value || ''})); newRow.appendTo(this.metaTable); return newRow; + }, + toggleGrid: function(toggle) { + this.node.find('[wlxml-tag]').toggleClass('rng-hover', toggle); + this.gridToggled = toggle; } }; @@ -127,6 +202,45 @@ 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')); + mediator.nodeSelectedById(target.attr('data-id')); + }); + + view.node.on('mouseenter', '.rng-visualEditor-editPaneSurrouding a', function(e) { + var target = $(e.target); + mediator.nodeHighlightedById(target.attr('data-id')); + }); + view.node.on('mouseleave', '.rng-visualEditor-editPaneSurrouding a', function(e) { + var target = $(e.target); + mediator.nodeDimmedById(target.attr('data-id')); + }); }, selectTab: function(id) { this.node.find('.rng-visualEditor-sidebarContentItem').hide(); @@ -138,19 +252,81 @@ rng.modules.visualEditor = function(sandbox) { updateEditPane: function(node) { var pane = this.node.find('#rng-visualEditor-edit'); 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]]'), + id: node.parent().attr('id') + } + var children = []; + node.children().each(function() { + var child = $(this); + children.push({repr: child.attr('wlxml-tag') + ' / ' + (child.attr('wlxml-class') || '[[no class]]'), id: child.attr('id')}); + }); + var naviTemplate = sandbox.getTemplate('editPaneNavigation')({parent: parent, children: children}); + pane.find('.rng-visualEditor-editPaneSurrouding > div').html($(naviTemplate)); + }, + highlightNode: function(id) { + var pane = this.node.find('#rng-visualEditor-edit'); + pane.find('a[data-id="'+id+'"]').addClass('rng-hover'); + }, + dimNode: function(id) { + var pane = this.node.find('#rng-visualEditor-edit'); + pane.find('a[data-id="' +id+'"]').removeClass('rng-hover'); + } + } + + var toolbarView = { + node: view.node.find('#rng-visualEditor-toolbar'), + setup: function() { + var view = this; + + view.node.find('button').click(function(e) { + var btn = $(e.currentTarget); + if(btn.attr('data-btn-type') === 'toggle') { + btn.toggleClass('active') + mediator.toolbarButtonToggled(btn.attr('data-btn'), btn.hasClass('active')); + } + }); } } view.setup(); sideBarView.setup(); + toolbarView.setup(); var mediator = { getCurrentNode: function() { return view.currentNode; }, + nodeCreated: function(node) { + view.selectNode(node); + + }, nodeSelected: function(node) { sideBarView.updateEditPane(node); + }, + nodeSelectedById: function(id) { + view.selectNodeById(id); + }, + nodeHighlightedById: function(id) { + view.highlightNodeById(id); + }, + nodeDimmedById: function(id) { + view.dimNodeById(id); + }, + toolbarButtonToggled: function(btn, toggle) { + if(btn === 'grid') + view.toggleGrid(toggle); + }, + nodeHovered: function(node) { + view.highlightNode(node); + sideBarView.highlightNode(node.attr('id')); + }, + nodeBlured: function(node) { + view.dimNode(node); + sideBarView.dimNode(node.attr('id')); } + } var isDirty = false; @@ -182,7 +358,7 @@ rng.modules.visualEditor = function(sandbox) { onShowed: function() { if(!wasShownAlready) { wasShownAlready = true; - view.markFirstSelected(); + view.selectFirstNode(); } }