MrDoc/template/app_doc/doc.html
2020-12-31 07:56:33 +08:00

361 lines
15 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="layui-icon layui-icon-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="layui-icon layui-icon-add-1"></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="layui-icon layui-icon-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="layui-icon layui-icon-add-1"></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 %}
{% if doc.editor_mode == 3 %}
{{ doc.content | safe }}
{% else %}
<textarea style="display: none;">{{ doc.pre_content }}</textarea>
{% endif %}
{% endblock %}
{% block children_content %}
{% if doc.show_children %}
{% load doc_filter %}
{% for children in doc.id|get_next_doc %}
<li style="list-style: disc;font-size: 15px;"><a href="{% url 'doc' pro_id=pro_id doc_id=children.id %}" title="{{children.name}}">{{ children.name }}</a></li>
{% endfor %}
{% endif %}
{% 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 class="doc-bottom-icon">
<i class="layui-icon layui-icon-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}}" class="doc-bottom-icon">
<i class="layui-icon layui-icon-log"></i> {{ doc.modify_time }}
</span>
<button id="share" class="doc-bottom-btn" tooltip="{% trans '分享本文档' %}">
<i class="layui-icon layui-icon-share" ></i> {% trans "分享文档" %}
</button>
<span class="doc-bottom-icon">
{% if request.user.is_authenticated %}
{% if is_collect_doc %}
<i class="layui-icon layui-icon-star-fill collected" id="collect_doc"></i> {% trans "收藏文档" %}
{% else %}
<i class="layui-icon layui-icon-star" id="collect_doc"></i> {% trans "收藏文档" %}
{% endif %}
{% else %}
<i class="layui-icon layui-icon-star" title="请登录后收藏"></i> {% trans "收藏文档" %}
{% endif %}
</span>
{% 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" id='copy_link'>
<input type="text" name="share_link" class="layui-input" id="share_link" readonly>
</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.location.protocol + '//' + document.location.host + '/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.location.host + '/share_doc/?token={{doc_share.token}}')
{% endif %}
var share_data = {
'id':'{{doc.id}}',
}
//监听链接栏被单击
$('#copy_link').click(function(){
var target = document.getElementById("share_link");
// 选择内容
target.focus();
target.setSelectionRange(0, target.value.length);
document.execCommand("copy");
layer.msg('链接地址已复制', {
time: 2000, //2s后自动关闭
btn: '好的',
btnAlign: 'c'
});
})
//监听分享框分享类型的单选事件
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 %}