X-Git-Url: https://git.mdrn.pl/fnpeditor.git/blobdiff_plain/70fd8f6118a3e8bf298dd9c48c310f3309b780c3..3733d5e0527a89111f9e33bb8380fed20ea768fc:/modules/visualEditor.js?ds=inline diff --git a/modules/visualEditor.js b/modules/visualEditor.js index 08085de..bb4ad31 100644 --- a/modules/visualEditor.js +++ b/modules/visualEditor.js @@ -3,32 +3,82 @@ rng.modules.visualEditor = function(sandbox) { var view = { node: $(sandbox.getTemplate('main')()), + currentNode: null, setup: function() { - var node = this.node; - node.find('#rng-visualEditor-content').on('keyup', function() { + var view = this; + + this.node.find('#rng-visualEditor-content').on('keyup', function() { isDirty = true; }); - node.find('#rng-visualEditor-meta').on('keyup', function() { + this.node.find('#rng-visualEditor-meta').on('keyup', function() { 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('click', '[wlxml-tag]', function(e) { + console.log('clicked node type: '+e.target.nodeType); + view._markSelected($(e.target)); + }); + + this.node.on('keyup', '#rng-visualEditor-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); + }); + + + var metaTable = this.metaTable = this.node.find('#rng-visualEditor-meta table'); + + this.node.find('.rng-visualEditor-metaAddBtn').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-visualEditor-metaItemKey')) { + metaTable.find('.rng-visualEditor-metaItemValue').focus(); + } else { + var input = $(''); + input.appendTo('body').focus() + view.node.find('.rng-visualEditor-metaAddBtn').focus(); + input.remove(); + } + e.preventDefault(); + } + + }); + }, getMetaData: function() { var toret = {}; - this.node.find('#rng-visualEditor-meta table tr').each(function() { + this.metaTable.find('tr').each(function() { var tr = $(this); - var key = $(tr.find('td')[0]).html(); - var value = $(tr.find('td input')[0]).val(); + var inputs = $(this).find('td [contenteditable]'); + var key = $(inputs[0]).text(); + var value = $(inputs[1]).text(); toret[key] = value; }); console.log(toret); return toret; }, setMetaData: function(metadata) { - var table = this.node.find('#rng-visualEditor-meta table'); - table.empty(); + var view = this; + this.metaTable.find('tr').remove(); _.each(_.keys(metadata), function(key) { - $(sandbox.getTemplate('metaItem')({key: key, value: metadata[key]})).appendTo(table); + view._addMetaRow(key, metadata[key]); }); }, setBody: function(HTMLTree) { @@ -36,11 +86,111 @@ rng.modules.visualEditor = function(sandbox) { }, getBody: function() { return this.node.find('#rng-visualEditor-content').html(); - } + }, + _markSelected: function(node) { + this.node.find('.rng-current').removeClass('rng-current'); + node.addClass('rng-current'); + this.currentNode = node; + mediator.nodeSelected(node); + }, + markFirstSelected: function() { + var firstNodeWithText = this.node.find('[wlxml-tag]').filter(function() { + return $(this).clone().children().remove().end().text().trim() !== ''; + }).first(); + if(firstNodeWithText.length) + $(firstNodeWithText[0]).click().focus(); + }, + _addMetaRow: function(key, value) { + var newRow = $(sandbox.getTemplate('metaItem')({key: key || '', value: value || ''})); + newRow.appendTo(this.metaTable); + return newRow; + } }; + + + var sideBarView = { + node: view.node.find('#rng-visualEditor-sidebar'), + setup: function() { + var view = this; + this.node.find('#rng-visualEditor-sidebarButtons a').click(function(e) { + e.preventDefault(); + var target = $(e.currentTarget); + if(!target.attr('data-content-id')) + return; + view.selectTab(target.attr('data-content-id')); + }); + view.selectTab('rng-visualEditor-edit'); + + view.node.on('change', '.rng-visualEditor-editPaneNodeForm select', function(e) { + var target = $(e.target); + var attr = target.attr('id').split('-')[2].split('editPane')[1].substr(0,3) === 'Tag' ? 'tag' : 'class'; + 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; + } + }); + }, + selectTab: function(id) { + this.node.find('.rng-visualEditor-sidebarContentItem').hide(); + this.node.find('#'+id).show(); + this.node.find('#rng-visualEditor-sidebarButtons li').removeClass('active'); + this.node.find('#rng-visualEditor-sidebarButtons li a[data-content-id=' + id + ']').parent().addClass('active'); + + }, + 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')}))); + } + } + view.setup(); + sideBarView.setup(); + + var mediator = { + getCurrentNode: function() { + return view.currentNode; + }, + nodeCreated: 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); + + }, + nodeSelected: function(node) { + sideBarView.updateEditPane(node); + } + } var isDirty = false; + var wasShownAlready = false; return { @@ -64,6 +214,12 @@ rng.modules.visualEditor = function(sandbox) { }, setDirty: function(dirty) { isDirty = dirty; + }, + onShowed: function() { + if(!wasShownAlready) { + wasShownAlready = true; + view.markFirstSelected(); + } } }