lib.itmens/journal/templates/mark.html

143 lines
5.5 KiB
HTML
Raw Normal View History

2022-12-23 00:08:42 -05:00
{% load static %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% load admin_url %}
{% load mastodon %}
{% load oauth_token %}
{% load truncate %}
{% load highlight %}
{% load thumb %}
<div id="modal" _="on closeModal add .closing then wait for animationend then remove me">
<div class="modal-underlay" _="on click trigger closeModal"></div>
<div class="modal-content">
<div class="add-to-list-modal__head">
<span class="add-to-list-modal__title">{% trans '标记' %} {{ item.title }}</span>
<span class="add-to-list-modal__close-button modal-close" _="on click trigger closeModal">
<i class="fa-solid fa-xmark"></i>
2022-12-23 00:08:42 -05:00
</span>
</div>
2022-12-23 00:08:42 -05:00
<div class="add-to-list-modal__body">
<form action="{% url 'journal:mark' item.uuid %}" method="post">
{% csrf_token %}
<div id="statusSelection" class="mark-modal__status-radio float-right">
<ul id="id_status">
{% for k, v in shelf_types %}
2023-02-15 23:45:12 -05:00
{% if v %}
2022-12-25 13:45:24 -05:00
<li><label for="id_status_{{ k }}"><input type="radio" name="status" value="{{ k }}" required="" id="id_status_{{ k }}" {% if shelf_type == k %}checked=""{% endif %}> {{ v }}</label></li>
2023-02-15 23:45:12 -05:00
{% endif %}
2022-12-23 00:08:42 -05:00
{% endfor %}
</ul>
</div>
<div class="mark-modal__rating-star rating-star-edit"></div>
2022-12-25 13:45:24 -05:00
<input type="hidden" name="rating" id="id_rating" value="{{ mark.rating|floatformat:0 }}">
2022-12-23 00:08:42 -05:00
<div class="mark-modal__clear"></div>
2022-12-25 13:45:24 -05:00
<textarea name="text" cols="40" rows="10" placeholder="超过360字部分实例可能无法显示" maxlength="360" id="id_text">{% if mark.text %}{{ mark.text }}{% endif %}</textarea>
2022-12-23 00:08:42 -05:00
<div class="mark-modal__tag">
<label>标签</label>
<div class="tag-input">
<input name="tags" type="text" placeholder="回车增加标签" id="id_tags" value="">
</div>
</div>
<div class="mark-modal__share-checkbox float-right">
<label for="id_share_to_mastodon"><input type="checkbox" name="share_to_mastodon" id="id_share_to_mastodon" value="1" {%if not request.user.preference.default_no_share %}checked{% endif %}>分享到联邦网络</label>
2022-12-23 00:08:42 -05:00
</div>
<div class="mark-modal__option">
<div class="mark-modal__visibility-radio">
<span>可见性:
<ul id="id_visibility">
<li><label for="id_visibility_0"><input type="radio" name="visibility" value="0" required="" id="id_visibility_0" {% if mark.visibility == 0 %}checked{% endif %}> 公开</label> </li>
<li><label for="id_visibility_1"><input type="radio" name="visibility" value="1" required="" id="id_visibility_1" {% if mark.visibility == 1 %}checked{% endif %}> 仅关注者</label> </li>
<li><label for="id_visibility_2"><input type="radio" name="visibility" value="2" required="" id="id_visibility_2" {% if mark.visibility == 2 %}checked{% endif %}> 仅自己</label> </li>
</ul>
</span>
</div>
</div>
2023-01-10 22:36:13 -05:00
2022-12-23 00:08:42 -05:00
<div class="mark-modal__confirm-button">
<input type="submit" class="button float-right" value="保存">
</div>
2023-01-10 22:36:13 -05:00
<div class="mark-modal__option">
<div class="mark-modal__visibility-radio">
<span>更改标记日期:
<label for="mark_anotherday"><input type="checkbox" name="mark_anotherday" value="1" id="mark_anotherday"> </label>
<input type="date" name="mark_date" id="mark_date" min="1900-01-01" max="{{date_today}}" value="{{date_today}}" style="display: none;">
</span>
</div>
</div>
2022-12-23 00:08:42 -05:00
</form>
</div>
<script>
(function(){
new inputTags({
container: document.getElementsByClassName("tag-input")[0],
tags : "{{ tags }}".split(","),
allowDuplicateTags : false,
duplicateTime: 300,
onTagRemove : function (tag) {},
});
2023-01-10 22:36:13 -05:00
// editable rating star in modal
2022-12-23 00:08:42 -05:00
ratingLabels = $("#modal .rating-star-edit");
$(ratingLabels).each( function(index, value) {
let ratingScore = $("input[type='hidden'][name='rating']").val() / 2;
let label = $(this);
label.starRating({
initialRating: ratingScore,
starSize: 20,
onHover: function(currentIndex, currentRating, $el){
$("input[type='hidden'][name='rating']").val(currentIndex);
},
onLeave: function(currentIndex, currentRating, $el){
$("input[type='hidden'][name='rating']").val(currentRating * 2);
}
2022-12-23 00:08:42 -05:00
});
});
2023-01-10 22:36:13 -05:00
//show date picker if mark yesterday
$("#modal #mark_anotherday").on('click', function(e) {
if ($("#modal #mark_anotherday:checked").val() == '1') {
$("#modal #mark_date").show()
} else {
$("#modal #mark_date").hide()
}
});
// hide rating star when select wish
2022-12-23 00:08:42 -05:00
const WISH_CODE = "wishlist";
if ($("#statusSelection input[type='radio']:checked").val() == WISH_CODE) {
2022-12-25 13:45:24 -05:00
$("#modal .rating-star-edit").hide();
2022-12-23 00:08:42 -05:00
}
$("#statusSelection input[type='radio']").on('click', function() {
if ($(this).val() == WISH_CODE) {
2022-12-25 13:45:24 -05:00
$("#modal .rating-star-edit").hide();
2022-12-23 00:08:42 -05:00
} else {
2022-12-25 13:45:24 -05:00
$("#modal .rating-star-edit").show();
2022-12-23 00:08:42 -05:00
}
2022-12-23 00:08:42 -05:00
});
// show confirm modal
2022-12-25 13:45:24 -05:00
$("#modal a.delete").on('click', function(e) {
2022-12-23 00:08:42 -05:00
e.preventDefault();
$(".confirm-modal").show();
$(".bg-mask").show();
});
// confirm modal
$(".confirm-modal input[type='submit']").on('click', function(e) {
e.preventDefault();
2022-12-25 13:45:24 -05:00
$("#modal form").submit();
2022-12-23 00:08:42 -05:00
});
})();
</script>
</div>