You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@allura.apache.org by br...@apache.org on 2015/07/29 23:10:04 UTC

[04/41] allura git commit: [#7897] ticket:804 Show preview using Allura's syntax

[#7897] ticket:804 Show preview using Allura's syntax


Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/ad4eee78
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/ad4eee78
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/ad4eee78

Branch: refs/heads/master
Commit: ad4eee78c31a16cc667b73b883e0d69c36505cac
Parents: ebd486c
Author: Igor Bondarenko <je...@gmail.com>
Authored: Thu Jun 18 17:47:38 2015 +0300
Committer: Igor Bondarenko <je...@gmail.com>
Committed: Mon Jul 27 14:23:54 2015 +0300

----------------------------------------------------------------------
 .../lib/widgets/resources/js/sf_markitup.js     | 55 +++++++++++++++++---
 1 file changed, 49 insertions(+), 6 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/allura/blob/ad4eee78/Allura/allura/lib/widgets/resources/js/sf_markitup.js
----------------------------------------------------------------------
diff --git a/Allura/allura/lib/widgets/resources/js/sf_markitup.js b/Allura/allura/lib/widgets/resources/js/sf_markitup.js
index f57fb4b..b10e331 100644
--- a/Allura/allura/lib/widgets/resources/js/sf_markitup.js
+++ b/Allura/allura/lib/widgets/resources/js/sf_markitup.js
@@ -28,12 +28,13 @@ $(window).load(function() {
             var $help_contents = $('div.markdown_help_contents', $container);
 
             var toolbar = Editor.toolbar;
-            toolbar[11] = {name: 'info', action: show_help},
-            toolbar[12] = {name: 'preview', action: show_preview},
-            new Editor({
+            toolbar[11] = {name: 'info', action: show_help};
+            toolbar[12] = {name: 'preview', action: show_preview};
+            var editor = new Editor({
               element: $textarea[0],
               toolbar: toolbar
-            }).render();
+            });
+            editor.render();
 
             function show_help() {
               $help_contents.html('Loading...');
@@ -42,7 +43,7 @@ $(window).load(function() {
                 var display_section = function(evt) {
                   var $all_sections = $('.markdown_syntax_section', $help_contents);
                   var $this_section = $(location.hash.replace('#', '.'), $help_contents);
-                  if ($this_section.length == 0) {
+                  if ($this_section.length === 0) {
                     $this_section = $('.md_ex_toc', $help_contents);
                   }
                   $all_sections.addClass('hidden_in_modal');
@@ -56,7 +57,49 @@ $(window).load(function() {
             }
 
             function show_preview() {
-              console.log('preview');
+              /*
+               * This is pretty much the same as original Editor.togglePreview,
+               * but rendered text is fetched from the server.
+               * https://github.com/lepture/editor/blob/0f493bfdc7c3014ee7ac656f41b5b52f8955b2e9/src/intro.js#L216-L242
+               */
+              var toolbar = editor.toolbar.preview;
+              var cm = editor.codemirror;
+              var wrapper = cm.getWrapperElement();
+              var preview = wrapper.lastChild;
+              if (!/editor-preview/.test(preview.className)) {
+                preview = document.createElement('div');
+                preview.className = 'editor-preview';
+                wrapper.appendChild(preview);
+              }
+              if (/editor-preview-active/.test(preview.className)) {
+                preview.className = preview.className.replace(
+                    /\s*editor-preview-active\s*/g, ''
+                    );
+                toolbar.className = toolbar.className.replace(/\s*active\s*/g, '');
+              } else {
+                /* When the preview button is clicked for the first time,
+                 * give some time for the transition from editor.css to fire and the view to slide from right to left,
+                 * instead of just appearing.
+                 */
+                setTimeout(function() {preview.className += ' editor-preview-active';}, 1);
+                toolbar.className += ' active';
+              }
+              get_rendered_text(preview, cm.getValue());
+            }
+
+            function get_rendered_text(preview, text) {
+              preview.innerHTML = 'Loading...';
+              var cval = $.cookie('_session_id');
+              $.post('/nf/markdown_to_html', {
+                markdown: text,
+                project: $('input.markdown_project', $container).val(),
+                neighborhood: $('input.markdown_neighborhood', $container).val(),
+                app: $('input.markdown_app', $container).val(),
+                _session_id: cval
+              },
+              function(resp) {
+                preview.innerHTML = resp;
+              });
             }
 
             $('.close', $help_area).bind('click', function() {