seahub/templates/repo_edit_file.html

{% extends base_template %}
{% load seahub_tags i18n %}

{% block extra_style %}
{% if filetype == 'Sf' %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}aloha-0.22.3/css/aloha.css" />
{% else %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}codemirror/codemirror.css" />
<style type="text/css">
.CodeMirror-focused pre.CodeMirror-cursor {
  visibility: visible;
}
.CodeMirror-scroll {
    height:auto;
}
</style>
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}codemirror/monokai.css" />
{% endif %}
{% endblock %}

{% block main_panel %}
    <h2>{% trans "Edit" %} <span class="op-target">{{ u_filename }}</span></h2>
    <div id="path-op" class="ovhd">
        <p class="path fleft">
         {% trans "Current path: " %}
         {% for name, link in zipped %}
            {% if not forloop.last %}
                <a href="{{ SITE_ROOT }}repo/{{ repo.id }}/?p={{ link|urlencode }}">{{ name }}</a> /               
            {% else %}
                <a href="{{ SITE_ROOT }}repo/{{ repo.id }}/files/?p={{ path }}">{{ name }}</a>
            {% endif %}
         {% endfor %}
    </p>
    <div id="op-after-edit" class="fright hide">
        <button data="{{ SITE_ROOT }}repo/{{ repo.id }}/files/?p={{ path }}" id="file-edit-cancel">{% trans "Cancel" %}</button>
        {% if filetype == 'Markdown' %}
            <button id="source-code-btn" class="hide">{% trans "Continue editing" %}</button>
            <button id="preview-btn">{% trans "Preview" %}</button>
        {% endif %}
        <button id="file-edit-submit">{% trans "Submit" %}</button>
    </div>
    </div>
    <div id="file-edit">
        {% ifnotequal file_content None %}
        {% ifnotequal filetype 'Sf' %}
        <textarea id="docu-view" class="hide">{{ file_content|escape }}</textarea>
        {% else %}
        <div id="sf" class="article">{{ file_content|safe }}</div>
        {% endifnotequal %}
        {% endifnotequal %}
        {% if filetype == 'Markdown' %}
        <div id="md-view" class="article hide"></div>
        {% endif %}
    </div>
{% endblock %}

{% block extra_script %}
{% if filetype == 'Sf' %}
<script type="text/javascript" src="{{MEDIA_URL}}aloha-0.22.3/lib/require.js"></script>
<script type="text/javascript">
//settings must be before aloha.js
Aloha = window.Aloha || {}; 
Aloha.settings = Aloha.settings || {}; 
if ($('#lang-context').attr('data-lang') == 'zh-cn') {
    Aloha.settings.locale = "zh-hans";
}
</script>
<script type="text/javascript" src="{{MEDIA_URL}}aloha-0.22.3/lib/aloha.js" data-aloha-plugins="common/format, common/abbr, common/align, common/characterpicker, common/image, common/link, common/list, common/table, common/undo, common/ui"></script>
{% else %}
<script type="text/javascript" src="{{MEDIA_URL}}codemirror/codemirror.js"></script>
{% endif %}
{% if filetype == 'Markdown' %}
<script type="text/javascript" src="{{MEDIA_URL}}js/showdown.js"></script>
{% endif %}
<script type="text/javascript">
{% ifnotequal file_content None %}
$('#main').css('width','100%');
$('h2, #path-op').css({'width':950, 'margin':'0 auto'});
$('#file-edit').css({'background':'#f4f4f4', 'border-top':'1px solid #ededed'});
$('#sf, #md-view').css({'width':690, 'margin':'35px auto', 'border':'1px solid #ccc', 'box-shadow':'0 0 6px #ccc', 'min-height':400});
$('#footer').addClass('hide');
{% if filetype == 'Sf' %}
Aloha.ready(function() { $('#sf').aloha().focus(); });
{% else %}
var editor = CodeMirror.fromTextArea($('#docu-view')[0], {
    {% include "snippets/editor_set_mode.html" %}
    {% if filetype == 'Markdown' %}
    mode: 'markdown',
    {% endif %}
    theme: 'monokai',
    indentUnit: 4,
    lineNumbers: true,
    autofocus: true
});
$('.CodeMirror').css({'width':950, 'margin':'35px auto', 'box-shadow':'0 0 6px #272822'});
$('.CodeMirror-scroll').css({'min-height':480});
{% endif %}
$('#op-after-edit').removeClass('hide');

{% if filetype == 'Markdown' %}
$('#source-code-btn').click(function() {
    $('#md-view, #source-code-btn').addClass('hide');
    $('.CodeMirror, #preview-btn').removeClass('hide');
    editor.focus();
});
$('#preview-btn').click(function() {
    var content = editor.getValue();
    var converter = new Showdown.converter();
    $('.CodeMirror, #preview-btn').addClass('hide');
    $('#md-view').html(converter.makeHtml(content)).removeClass('hide');
    $('#md-view').children(':first').css('margin-top', '0');
    $('#source-code-btn').removeClass('hide');
});
{% endif %}

$('#file-edit-submit').click(function () {
    var submit_btn = $(this);
    disable(submit_btn);
    {% if filetype == 'Sf' %}
    var content = $('#sf').html();
    {% else %}
    var content = editor.getValue();
    {% endif %}

    $.ajax({
        type: "POST",
        url: '{{ SITE_ROOT }}repo/{{repo.id}}/file/edit/?p={{path|urlencode}}&head={{head_id}}',
        dataType: 'json',
        cache: false,
        contentType: 'application/json; charset=utf-8',
        beforeSend: prepareCSRFToken,
        data: {content: content, encoding: '{{ encoding }}'},
        success: function(data) {
            location.href = $('#file-edit-cancel').attr('data');
        },
        error: function(xhr, ajaxOptions, thrownError) {
            var jsonVal = jQuery.parseJSON(xhr.responseText);
            $('#op-after-edit').prepend('<p class="error">' + jsonVal['error'] + '</p>');
            enable(submit_btn);
        }
    });
});
$('#file-edit-cancel').click(function() {
    location.href = $(this).attr('data');
});
{% endifnotequal %}

{% if err %}
$('#file-edit').html('<div id="sf" class="article"><p class="error">{{ err }}</p></div>');
{% endif %}
</script>
{% endblock %}