MrDoc/template/app_doc/doc.html
2020-12-07 20:58:59 +08:00

319 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- 继承自模板app_doc/docs_base.html -->
{% extends 'app_doc/docs_base.html' %}
<!-- 引入静态文件 -->
{% load static %}
{% load i18n %}
{% 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">{% trans "修改" %}</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">{% trans "添加" %}</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">{% trans "管理" %}</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">{% trans "修改" %}</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">{% trans "添加" %}</span>
</a>
{% endif %}
<!-- 文档目录 -->
<div id="toc-container" class='sidebar doc-toc-hide'></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="{% trans '更新于:' %}{{doc.modify_time}}">
<i class="fa fa-clock-o"></i> {{ doc.modify_time }}
</span>
<button id="share" class="doc-bottom-btn" tooltip="{% trans '分享本文档' %}">
<i class="fa fa-share-alt" ></i> {% trans "分享" %}
</button>
{% if request.user == doc.create_user or request.user.is_superuser %}
<button class="doc-bottom-btn" tooltip="{% trans '下载文档' %}" id="download_doc">
<i class="fa fa-download"></i> {% trans "下载" %}
</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>{% trans "上一篇" %}</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>{% trans "上一篇" %}</a>
{% endif %}
</div>
<div>
{% if doc.id|get_doc_next == None %}
<button class="layui-btn layui-btn-disabled layui-btn-sm layui-btn-radius">{% trans "下一篇" %}<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">{% trans "下一篇" %}<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="{% trans '修改文档' %}"><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> {% trans "下载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">{% trans "分享" %}</label>
<div class="layui-input-block">
<input type="checkbox" name="switch"
lay-skin="switch" lay-text="{% trans '开启|关闭' %}" 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">{% trans "链接" %}</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">{% trans "类型" %}</label>
<div class="layui-input-block">
{% if doc_share.share_type == 1 %}
<input type="radio" name="share_type" value="0" title="{% trans '公开' %}" lay-filter="share_type">
<input type="radio" name="share_type" value="1" title="{% trans '私密' %}" checked lay-filter="share_type">
{% else %}
<input type="radio" name="share_type" value="0" title="{% trans '公开' %}" checked lay-filter="share_type">
<input type="radio" name="share_type" value="1" title="{% trans '私密' %}" 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">{% trans "密码" %}</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> {% trans "更新密码" %}</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{% static 'toc/doctoc.js' %}"></script>
<script>
// layui.use(['jquery','layer','form'],function(){
var layer = layui.layer;
var form = layui.form;
// var $ = layui.jquery;
// Ajax默认配置
$.ajaxSetup({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
// 非小屏默认展开文档目录
if(window.innerWidth > 1650){
$(".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';
});
// 显示文档下载弹出框
$("#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("{% trans '设置成功' %}",{offset: 't'})
console.log(r.data)
$("input[name=share_link]").val(document.domain + '/share_doc/?token=' + r.data.doc)
}else{
layer.msg("{% trans '设置出错' %}")
}
})
}
// 分享文档
$("#shareDoc").click(function(){
layer.open({
type:1,
title:'{% trans "分享文档" %}:{{doc.name}}',
content:$("#share_doc_div"),
area:'450px',
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("{% trans '关闭分享' %}",{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 %}