MrDoc/template/app_doc/doc.html

<!-- 继承自模板：app_doc/docs_base.html -->
{% extends 'app_doc/docs_base.html' %}
<!-- 引入静态文件 -->
{% load static %}

{% block keyword %}{{ doc.name }},{{ project.name }},{% endblock %}
{% block description %}{{doc.pre_content | slice:"0:100"}}{% endblock %}
{% block title %}{{ doc.name }} - {{ project.name }}{% endblock %}

{% block head_toolbar %}
    {% if request.user == doc.create_user or request.user == project.create_user %}
        <span class="btn pull-left">|</span>
        <a class="btn pull-left" aria-label="" href="{% url 'modify_doc' doc_id=doc.id %}">
            <i class="fa fa-edit"></i> <span class="layui-hide-xs">修改</span>
        </a>
        <a class="btn pull-left" aria-label="" href="{% url 'create_doc' %}?pid={{project.id}}" target="_blank">
            <i class="fa fa-plus-square"></i> <span class="layui-hide-xs">添加</span>
        </a>
        <a class="btn pull-left" aria-label="" href="{% url 'manage_doc' %}" target="_blank">
            <i class="fa fa-cubes"></i> <span class="layui-hide-xs">管理</span>
        </a>
    {% elif colla_user > 0 %}
        <span class="btn pull-left">|</span>
        {% if colla_user_role == 1 %}
        <a class="btn pull-left" aria-label="" href="{% url 'modify_doc' doc_id=doc.id %}">
            <i class="fa fa-edit"></i> <span class="layui-hide-xs">修改</span>
        </a>
        {% endif %}
        <a class="btn pull-left" aria-label="" href="{% url 'create_doc' %}?pid={{project.id}}" target="_blank">
            <i class="fa fa-plus-square"></i> <span class="layui-hide-xs">添加</span>
        </a>
    {% endif %}
    <!-- 文档目录 -->
    <div id="toc-container" class='sidebar'></div>
    
{% endblock %}

{% block content_head %}
    <h1>{{ doc.name }}</h1><hr>
{% endblock %}

{% block page_content %}
    <textarea style="display: none;">{{ doc.pre_content }}</textarea>
{% endblock %}

{% block doc_bottom_block %}
<div class="layui-row" style="margin-bottom: 10px;padding-left: 20px;">
    {% if doc_tags.count > 0 %}
        <i class="fa fa-tag"></i>
        {% for tag in doc_tags %}
            <a href="{% url 'tag_docs' tag.tag.id %}" style="font-size: 12px;line-height: 14px;height: 16px;padding: 0 5px;margin-left: 0;">{{tag.tag.name}}</a>
        {% endfor %}
    {% endif %}
</div>

<div class="layui-row layui-col-space20" style="padding-left: 20px;">
    <span>
        <i class="fa fa-user"></i> {% if doc.create_user.first_name != '' %} {{doc.create_user.first_name}} {% else %} {{doc.create_user.username}}{% endif %}
    </span>
    <span tooltip="更新于:{{doc.modify_time}}">
        <i class="fa fa-clock-o"></i> {{ doc.modify_time }}
    </span>

    <button id="share" class="doc-bottom-btn" tooltip="分享本文档">
        <i class="fa fa-share-alt" ></i> 分享
    </button>

    {% if request.user == doc.create_user or request.user.is_superuser %}
    <button class="doc-bottom-btn" tooltip="下载文档" id="download_doc">
        <i class="fa fa-download"></i> 下载
    </button>
    {% endif %}
</div>


{% endblock %}

{% block doc_previous_next %}
    {% load doc_filter %}
    <div class="layui-row" style="margin-top: 10px;padding:10px;display:flex;justify-content:space-around;">
        <!-- <hr> -->
        <div>
            {% if doc.id|get_doc_previous == None %}
                <button class="layui-btn layui-btn-disabled layui-btn-sm layui-btn-radius"><i class="layui-icon layui-icon-prev "></i>上一篇</button>
            {% else %}
                <a href="{% url 'doc' doc.top_doc doc.id|get_doc_previous %}" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-radius"><i class="layui-icon layui-icon-prev "></i>上一篇</a>
            {% endif %}
        </div>
        <div>
            {% if doc.id|get_doc_next == None %}
                <button class="layui-btn layui-btn-disabled layui-btn-sm layui-btn-radius">下一篇<i class="layui-icon layui-icon-next"></i></button>
            {% else %}
                <a href="{% url 'doc' doc.top_doc doc.id|get_doc_next %}" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-radius">下一篇<i class="layui-icon layui-icon-next"></i></a>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block right_widget %}
<!-- 修改文档 -->
{% if doc.create_user == request.user %}
    <a class="editDoc" href="{% url 'modify_doc' doc_id=doc.id %}" title="修改文档"><i class="fa fa-pencil"></i></a>
{% endif %}
<!-- 目录 -->
<div class="tocMenu" style="display: none;"><i class="fa fa-list"></i></div>
<!-- 分享按钮 -->
{% if project.role == 1 and request.user == doc.create_user %}
    <div class="shareDoc" id="shareDoc"><i class="fa fa-share"></i></div>
{% endif %}
{% endblock %}

{% block custom_script %}
<!-- 下载选项卡模板 -->
<div id="download_div" style="display: none;">
    <div class="layui-row" style="margin: 10px;">
        <a class="" download='{{doc.name}}.md' href="{% url 'download_doc_md' doc.id %}" target="_blank">
            <i class="fa fa-download"></i> 下载Markdown文件
        </a>
    </div>
</div>
<!-- 分享文档选项卡模板 -->
<div id="share_doc_div" style="display: none;">
    <div class="layui-tab-content">
        <div class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">分享</label>
                <div class="layui-input-block">
                  <input type="checkbox" name="switch" 
                    lay-skin="switch" lay-text="开启|关闭" lay-filter="share-switch"
                    {% if is_share and doc_share.is_enable %}checked{%endif%}
                    >
                </div>
            </div>
            
            <div class="layui-form" style="display: {% if is_share and doc_share.is_enable %}block;{% else %}none;{% endif %}" id="share-link">
                <div class="layui-form-item">
                    <label class="layui-form-label">链接</label>
                    <div class="layui-input-block">
                        <input type="text" name="share_link" class="layui-input" id="share_link" disabled>
                    </div>
                </div>
            </div>
            
            <div class="layui-form-item" style="display:{% if is_share and doc_share.is_enable %}block;{% else %}none;{% endif %}" id="share-type">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    {% if doc_share.share_type == 1 %}
                    <input type="radio" name="share_type" value="0" title="公开" lay-filter="share_type">
                    <input type="radio" name="share_type" value="1" title="私密" checked lay-filter="share_type">
                    {% else %}
                    <input type="radio" name="share_type" value="0" title="公开" checked lay-filter="share_type">
                    <input type="radio" name="share_type" value="1" title="私密" lay-filter="share_type">
                    {% endif %}
                </div>
                
            </div>
            <div class="layui-form" style="display:{% if is_share and doc_share.is_enable and doc_share.share_type == 1 %}block;{% else %}none;{% endif %}" id="share_value_item">
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="share_value" value='{{doc_share.share_value}}' disabled class="layui-input" id="share_doc_value">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <button class="layui-btn layui-btn-xs layui-btn-primary" id="updateShareValue"><i class="fa fa-repeat"></i> 更新密码</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{% static 'toc/doctoc.js' %}"></script>
<script src="{% static 'viewerjs/viewer.min.js' %}"></script>
<script>
    var layer = layui.layer;
    var form = layui.form;
    // 手机屏幕上默认最小化目录
    if(window.outerWidth < 1300){
        $(".sidebar").toggleClass("doc-toc-hide");
    }
    // 切换文档目录显示与否
    $(".tocMenu").click(function() {
        console.log("隐藏文档目录")
        $(".sidebar").toggleClass("doc-toc-hide");
    });
    
    //修改a标签链接新窗口打开
    $('#content').on('click','a',function(e){
        e.target.target = '_blank';
    });
    
    // 图片放大显示
    var img_options = {
        url: 'data-original',
        fullscreen:false,//全屏
        rotatable:false,//旋转
        scalable:false,//翻转
        button:false,//关闭按钮
        toolbar:false,
        title:false,
      };
    var viewer = new Viewer(document.getElementById('content'), img_options);

    // 显示文档下载弹出框
    $("#download_doc").click(function(r){
        var layer = layui.layer;
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: ['350px','150px'],
            shadeClose: true,
            content: $('#download_div')
          });
    });
    
    // 生成随机分享码
    function randomWord(randomFlag, min, max){
        var str = "",
            range = min,
            arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        // 随机产生
        if(randomFlag){
            range = Math.round(Math.random() * (max-min)) + min;
        }
        for(var i=0; i<range; i++){
            pos = Math.round(Math.random() * (arr.length-1));
            str += arr[pos];
        }
        return str;
    };
    
    // 更新文档分享状态
    function updateDocShare(data){
        $.post("{% url 'share_doc' %}",data,function(r){
            if(r.status){
                layer.msg("设置成功",{offset: 't'})
                console.log(r.data)
                $("input[name=share_link]").val(document.domain + '/share_doc/?token=' + r.data.doc)
            }else{
                layer.msg("设置出错")
            }
        })
    }

    // 分享文档
    $("#shareDoc").click(function(){
        layer.open({
            type:1,
            title:'分享文档:{{doc.name}}',
            content:$("#share_doc_div"),
            area:'450px',
            // btn:['创建分享','取消'],
            success : function(index, layero) { // 成功弹出后回调
                form.render();
            },
        })
    })
    {% if is_share %}
        $("input[name=share_link]").val(window.location.protocol + '//' + document.domain + '/share_doc/?token={{doc_share.token}}')
    {% endif %}

    var share_data = {
        'id':'{{doc.id}}',
    }

    //监听分享框分享类型的单选事件
    form.on('radio(share_type)', function(data){
    //   console.log(data.value); //被点击的radio的value值
      if(data.value == 0){ // 公开
            $("#share_value_item").css("display","none");
            share_data['share_type'] = 0;
            share_data['share_value'] = $("#share_doc_value").val();
            share_data['is_enable'] = true
            updateDocShare(share_data);
            
      }else if(data.value == 1){ // 私密
            $("#share_value_item").css("display","block");
            {% if doc_share.share_value == '' or doc_share is None %}
                $("#share_doc_value").val(randomWord(false,4))
            {% endif %}
            share_data['share_type'] = 1;
            share_data['share_value'] = $("#share_doc_value").val();
            share_data['is_enable'] = true
            updateDocShare(share_data);
      }
    });

    // 监听分享开关事件
    form.on('switch(share-switch)', function(data){
        console.log(data.elem.checked); //开关是否开启，true或者false
        if(data.elem.checked){ // 开启
            console.log("开启分享")
            $("#share-type").css('display',"block");
            $("#share-expire").css('display',"block");
            $("#share-link").css("display","block");
            if($("input[name='share_type']:checked").val() == 1){
                $("#share_value_item").css("display","block");
            }
            // 开启
            share_data['share_type'] = $("input[name='share_type']:checked").val();
            share_data['share_value'] = $("#share_doc_value").val();
            share_data['is_enable'] = true
            updateDocShare(share_data);
        }else{
            console.log("关闭分享")
            layer.msg("关闭分享",{offset: 't'})
            $("#share-type").css('display',"none")
            $("#share-expire").css('display',"none")
            $("#share_value_item").css("display","none");
            $("#share-link").css("display","none");
            share_data['share_type'] = $("input[name='share_type']:checked").val();
            share_data['share_value'] = $("#share_doc_value").val();
            share_data['is_enable'] = false
            updateDocShare(share_data);
        }
    });  

    // 更新文档分享密码
    $("#updateShareValue").click(function(){
        $("#share_doc_value").val(randomWord(false,4));
        share_data['share_type'] = 1;
        share_data['share_value'] = $("#share_doc_value").val();
        share_data['is_enable'] = true
        updateDocShare(share_data);
    })
</script>
{% endblock %}