X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/9201c5810622e27a19de7e331046108d7110c46b..a9da2ddb356fb313c1a5b45b073eec2c5a282649:/modules/visualEditor.js
diff --git a/modules/visualEditor.js b/modules/visualEditor.js
index 70fc435..82ee13e 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,62 @@ 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;
+ },
+ toggleTags: function(toggle) {
+
}
};
@@ -131,7 +209,7 @@ rng.modules.visualEditor = function(sandbox) {
view.node.on('change', '.rng-visualEditor-editPaneSelectionForm select', function(e) {
var target = $(e.target);
var selection = window.getSelection();
- if(selection.anchorNode.isSameNode(selection.focusNode) && selection.anchorNode.nodeType === Node.TEXT_NODE) {
+ if(selection.anchorNode === selection.focusNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
var startOffset = selection.anchorOffset;
var endOffset = selection.focusOffset;
if(startOffset > endOffset) {
@@ -143,10 +221,29 @@ rng.modules.visualEditor = function(sandbox) {
var prefix = node.data.substr(0, startOffset);
var suffix = node.data.substr(endOffset);
var core = node.data.substr(startOffset, endOffset - startOffset);
- $(node).replaceWith(prefix + '' + core + '' + suffix);
+ 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();
@@ -158,19 +255,83 @@ 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('[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 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);
+ if(btn === 'tags')
+ view.toggleTags(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;
@@ -202,7 +363,7 @@ rng.modules.visualEditor = function(sandbox) {
onShowed: function() {
if(!wasShownAlready) {
wasShownAlready = true;
- view.markFirstSelected();
+ view.selectFirstNode();
}
}