basic integration of codemirror

mgaitan · Sep 19, 2014 · 71139bc · 71139bc
1 parent e2ab8ee
commit 71139bc
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 69 deletions.
diff --git a/waliki/forms.py b/waliki/forms.py
@@ -6,6 +6,16 @@ class PageForm(forms.ModelForm):
     raw = forms.CharField(label="", widget=forms.Textarea)
     message = forms.CharField(max_length=200, required=False)
 
+    class Media:
+        js = ('codemirror/lib/codemirror.js',
+              'codemirror/mode/markdown/markdown.js',
+              'codemirror/mode/rst/rst.js',
+              'js/waliki.js'
+              )
+        css = {
+            'all': ('codemirror/lib/codemirror.css',)
+        }
+
     def __init__(self, *args, **kwargs):
         is_hidden = kwargs.pop('is_hidden', None)
         super(PageForm, self).__init__(*args, **kwargs)
@@ -24,5 +34,5 @@ def save(self, commit=True):
 
     class Meta:
         model = Page
-        fields = ['title', 'raw', 'message']
+        fields = ['title', 'markup', 'raw', 'message']
 
diff --git a/waliki/static/css/waliki.css b/waliki/static/css/waliki.css
@@ -13,7 +13,7 @@ textarea#body {
   font-size: 13px;
 }
 
-//diff
+// diff
 
 span.ins, span.del {
     padding: 3px;
@@ -82,6 +82,6 @@ div.important, div.note, div.hint {
 }
 
 
-div#editor {
+div#editor, div#preview {
     padding: 1.2em;
 }
diff --git a/waliki/static/js/waliki.js b/waliki/static/js/waliki.js
@@ -0,0 +1 @@
+CodeMirror.fromTextArea(document.getElementById("id_raw"));
diff --git a/waliki/templates/base.html b/waliki/templates/base.html
@@ -13,9 +13,7 @@
 
          {% block style_base %}
         <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
-        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-theme.min.css'%}">
         <link rel="stylesheet" type="text/css" href="{% static 'css/pygments.css'%}">
-        <link rel="stylesheet" type="text/css" href="{% static 'codemirror/lib/codemirror.css'%}">
         <link rel="stylesheet" type="text/css" href="{% static 'css/waliki.css'%}">
             {% block extra_style %}{% endblock %}
         {% endblock %}

diff --git a/waliki/templates/waliki/edit.html b/waliki/templates/waliki/edit.html
@@ -2,6 +2,12 @@
 {% load bootstrap_tags %}
 {% block title %}<h1>Editing: {{ page.title }}</h1>{% endblock title %}
 
+{% block extra_head %}
+ {{ form.media.css }}
+{% endblock %}
+
+
+
 {% block content %}
 
 <div class="row">
@@ -10,6 +16,20 @@
 <ul class="nav nav-tabs">
     <li class="active"><a href="#editor" data-toggle="tab">Editor</a></li>
     <li><a href="#preview" data-toggle="tab" id="previewlink">Preview</a></li>
+    <li class="pull-right">
+            <div class="btn-group btn-group-sm">
+            <a href="#" class="btn btn-default">reStructuredText</a>
+            <button class="btn dropdown-toggle btn-default" data-toggle="dropdown">
+                <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+                <li><a id="#" >Markdown</a></li>
+            </ul>
+        </div>
+
+    </li>
+
+
 </ul>
 <div class="tab-content">
     <div class="tab-pane active" id="editor">
@@ -74,70 +94,7 @@
     $('#previewlink').click();
 });
 
-{% comment %}
-    $('#btn-attachments').click(function(e) {
-        e.preventDefault();
-        var url = $(this).attr('href');
-        $.get(url, function(data){
-                $('#attachments-body').html(data);
-                $('#attachments').modal('show');
-        });
-    });
-
-
-// Configurable Codemirror integration
-
-    function isFullScreen(cm) {
-      return /\bCodeMirror-fullscreen\b/.test(cm.getWrapperElement().className);
-    }
-    function winHeight() {
-      return window.innerHeight || (document.documentElement || document.body).clientHeight;
-    }
-    function setFullScreen(cm, full) {
-      var wrap = cm.getWrapperElement();
-      if (full) {
-        wrap.className += " CodeMirror-fullscreen";
-        wrap.style.height = winHeight() + "px";
-        document.documentElement.style.overflow = "hidden";
-      } else {
-        wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
-        wrap.style.height = "";
-        document.documentElement.style.overflow = "";
-      }
-      cm.refresh();
-    }
-
-    CodeMirror.on(window, "resize", function() {
-      var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
-      if (!showing) return;
-      showing.CodeMirror.getWrapperElement().style.height = winHeight() + "px";
-    });
-
-
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-  lineNumbers: true,
-  tabMode: "indent",
-  extraKeys: {
-        "F11": function(cm) {
-          setFullScreen(cm, !isFullScreen(cm));
-        },
-        "Esc": function(cm) {
-          if (isFullScreen(cm)) setFullScreen(cm, false);
-        }
-  }
-});
-
-var theme = '{{ config.THEME }}';
-editor.setOption("theme", theme);
-
-var markLang = '{{ page.markup }}';
-if (markLang == 'reStructuredText'){
-  editor.setOption("mode", 'rst');
-}
-else{
-  editor.setOption("mode", 'markdown');
-}
-{% endcomment %}
 </script>
+{{ form.media.js }}
 
 {% endblock extra_script %}