From 3713890b5e3ea8405ba4fa18377b8fd1e5d017ee Mon Sep 17 00:00:00 2001 From: Dawa Ometto Date: Thu, 12 Sep 2019 20:28:58 +0200 Subject: [PATCH] Improve preview. Resolves #1414 (#1421) * Fix Preview text direction * Add hotkey for toggling preview --- .../gollum/javascript/editor/gollum.editor.js | 19 +-- .../public/gollum/javascript/gollum.js.erb | 121 +++++++++++++----- .../public/gollum/stylesheets/editor.scss | 4 + lib/gollum/templates/page.mustache | 7 - 4 files changed, 96 insertions(+), 55 deletions(-) diff --git a/lib/gollum/public/gollum/javascript/editor/gollum.editor.js b/lib/gollum/public/gollum/javascript/editor/gollum.editor.js index f93584fe..24ca1a5a 100755 --- a/lib/gollum/public/gollum/javascript/editor/gollum.editor.js +++ b/lib/gollum/public/gollum/javascript/editor/gollum.editor.js @@ -81,19 +81,12 @@ } }); - // Ace editor seems to capture all keyboard events so gollum's global - // shortcuts does not work in the editor area. So we add them back in - // the editor as commands. These commands are added back on-demand since - // not all gollum shortcuts are necessary in the presence of Ace editor. - editor.commands.addCommand({ - name: "saveContents", - bindKey: {win: "Ctrl-s", mac: "Command-s"}, - exec: function() { - $("#gollum-editor-submit").trigger("click"); - } - }); - }); - + if ( ActiveOptions.commands ) { + $.each(ActiveOptions.commands, function ( index, cmd ) { + editor.commands.addCommand(cmd); + }); + } + $("#gollum-editor-body-ace").resize(function(){ window.ace_editor.resize(); }); diff --git a/lib/gollum/public/gollum/javascript/gollum.js.erb b/lib/gollum/public/gollum/javascript/gollum.js.erb index eae55041..f78c6e58 100755 --- a/lib/gollum/public/gollum/javascript/gollum.js.erb +++ b/lib/gollum/public/gollum/javascript/gollum.js.erb @@ -72,6 +72,10 @@ function abspath(path, name){ return [newPath, newName]; } +function setTextDirection () { + $('.markdown-body p, .markdown-body span, .markdown-body pre, .markdown-body table').attr('dir','auto'); +} + // ua $(document).ready(function() { // for deleting the current page @@ -303,41 +307,58 @@ $(document).ready(function() { }); } + // Called when clicking the 'Preview' tab in the editor view + function getPreview () { + var formData = new FormData($('#gollum-editor-form').get(0)); + var paths = window.location.pathname.split('/'); + var sectionAnchor = window.location.hash.substr(1); + formData.append('page', paths[ paths.length - 1 ] || '') + $.ajax({ + url: routePath('preview'), + data: formData, + type: 'POST', + processData: false, + contentType: false, + success: function(data) { + var mainDiv = $('#wiki-wrapper', data); + $('.tabnav-div#preview-content').html(mainDiv); + setTextDirection(); + if (sectionAnchor ) { + if ( sectionHeading = $('a' + '#' + sectionAnchor+'.anchor')[0] ) { + sectionHeading.scrollIntoView(); + } + } + }, + error: function(data, textStatus, errorThrown) { + console.log('something went wrong: ' + textStatus + errorThrown); + } + }); + } + + function togglePreviewTab ( preview ) { + if (preview) { + active_div = '#preview-content' + active_tab = '#preview.tabnav-tab'; + } else { + active_div = '#edit-content' + active_tab = '#edit.tabnav-tab'; + } + + $('.tabnav-tab.selected').removeClass('selected'); + $(active_tab).addClass('selected'); + $('.tabnav-div').hide(); + $(active_div).show(); + } + if( $('.tabnav-tabs').length ){ $(".tabnav-tab").click( function(e) { e.preventDefault(); - if( ! $(this).hasClass('selected')) { - tab_id = $(this).attr('id'); - if (tab_id == 'preview') { - var formData = new FormData($('#gollum-editor-form').get(0)); - var paths = window.location.pathname.split('/'); - var sectionAnchor = window.location.hash.substr(1); - formData.append('page', paths[ paths.length - 1 ] || '') - $.ajax({ - url: routePath('preview'), - data: formData, - type: 'POST', - processData: false, - contentType: false, - success: function(data) { - var mainDiv = $('#wiki-wrapper', data); - $('.tabnav-div#preview-content').html(mainDiv); - if (sectionAnchor ) { - if ( sectionHeading = $('a' + '#' + sectionAnchor+'.anchor')[0] ) { - sectionHeading.scrollIntoView(); - } - } - }, - error: function(data, textStatus, errorThrown) { - console.log('something went wrong: ' + textStatus + errorThrown); - } - }); + if( !$(this).hasClass('selected') ) { + preview = $(this).attr('id') == 'preview'; + if (preview) { + getPreview(); } - $('.tabnav-tab.selected').removeClass('selected'); - $(this).addClass('selected'); - active_div = '#' + tab_id + "-content"; - $('.tabnav-div').hide(); - $(active_div).show(); + togglePreviewTab(preview); }; }); }; @@ -347,9 +368,32 @@ $(document).ready(function() { $("#gollum-editor-body").one('change', function(){ window.onbeforeunload = function(){ return "Leaving will discard all edits!" }; }); + + var previewHotkey = function () { + $('.tabnav-tab').not('.selected').click(); + return false; + }; + + // Hotkey for moving between Edit and Preview tab + Mousetrap.bind(['ctrl+shift+p'], previewHotkey); + $.GollumEditor({ - section: window.location.hash.substr(1) - }); + section: window.location.hash.substr(1), + commands: // Ace's keybindings overrule mousetrap, so add some of gollum's keyboard shortcuts to the editor, as well. + [{ + name: "togglePreview", + bindKey: {win: "ctrl-shift-p", mac: "ctrl-shift-p"}, + exec: previewHotkey + }, + { + name: "saveContents", + bindKey: {win: "Ctrl-s", mac: "Command-s"}, + exec: function() { + $("#gollum-editor-submit").trigger("click"); + } + }] + }); + $("#gollum-editor-submit").click( function(e) { e.preventDefault(); // Prevent button from being clicked again @@ -505,8 +549,15 @@ $(document).ready(function() { } if($('.markdown-body').length ){ - // Set text direction auto - $('.markdown-body p, .markdown-body span, .markdown-body pre, .markdown-body table').attr('dir','auto'); + // Set text direction (LTR or RTL) + setTextDirection(); + + // Set the 'e' hotkey for editing pages. + Mousetrap.bind(['e'], function( e ) { + e.preventDefault(); + window.location = routePath('edit') + '/' + pageFullPath; + return false; + }); if ($.markupSupportsEditableSections(pageFormat)){ // Copy anchors for each editable header and give the new anchor the 'edit' class, to display an "edit section" link diff --git a/lib/gollum/public/gollum/stylesheets/editor.scss b/lib/gollum/public/gollum/stylesheets/editor.scss index 42a8ed59..d9626f5e 100644 --- a/lib/gollum/public/gollum/stylesheets/editor.scss +++ b/lib/gollum/public/gollum/stylesheets/editor.scss @@ -21,6 +21,10 @@ a { color: lightgray; } +a.tabnav-tab:focus { + outline: none; +} + #gollum-editor-body-ace { overflow: hidden; font-family: Consolas, "Liberation Mono", Courier, monospace; diff --git a/lib/gollum/templates/page.mustache b/lib/gollum/templates/page.mustache index f4e35ea4..ca37375a 100644 --- a/lib/gollum/templates/page.mustache +++ b/lib/gollum/templates/page.mustache @@ -1,10 +1,3 @@ -