HTMLify

file-show.html
Views: 150 | Author: abh
<!DOCTYPE html>
<html>
<head>
    <title>{{ file.name }}</title>
    {% include "stylesheet.html" %}
    <link rel="stylesheet" href="/pygments.css">
    <style>
    </style>
</head>
<body>
	<h1>HTMLify</h1>
	{% include "search-bar.html" %}
	{% include "nav-bar.html" %}
    <div class="file-container">
        <div class="file-header">
            <div class="file-title" style="overflow:auto;">{{ file.name }}</div>
            <div class="file-info">
                Views: {{ file.views }} <!-- imlement sooon | Stars: 50 -->| Author: <a href="/{{ file.owner }}" style="text-decoration: none;color: black;">{{ file.owner }}</a>
            </div>
        </div>
        <div class="file-content">{% if file.type == "text" %}{{ file.highlighted() | safe }}</div>
        {% elif file.type == "image" %}<img src="/raw/{{ file.path }}" style="height:auto;width:100%;"></div>
        {% elif file.type == "video" %}<video width="100%" style="height:auto;width:100%;" controls><source src="/raw/{{ file.path }}"></video></div>
        {% elif file.type == "document" %}<iframe src="/raw/{{ file.path }}" width="100%"></iframe></div>
        {% else %}<a href="/raw/{{ file.path }}" class="download-button" download>Download File<span class="file-size">({{ file.sizef() }})</span></a></div>
        {% endif %}
        <div class="link-copy-box">
            <h3>Share this file:</h3>
            <input type="text" id="fileLink" value="{{ request.url }}" readonly>
            <button onclick="copycontent('fileLink')">Copy</button><br><br>
        <a href="/raw/{{ file.path }}"><button>View Raw</button></a>
        <a href="/raw/{{ file.path }}" download><button>Download File<span class="file-size">({{ file.sizef() }})</span></button></a>
        <button id="embedcodebutton" onclick="embedcode()">Embed Code</button>        
        <form method="POST" action="/edit" style="display:inline-block;">
            <input type="hidden" name="clone" value="{{ file.id }}"/>
            <button>Clone</button>
        </form>
        </div>
        <h3>Comments</h3>
        
        {% for comment in file.comments %}
        <div class="comment-card" id="comment-{{ comment.id }}">
        <div class="comment-header">
        <span class="comment-author"><img src="/media/dp/{{ comment.author }}.jpg"><a href="/{{ comment.author }}">{{ comment.author }}</a></span>
        <span class="comment-time">{{ comment.time.strftime("%Y-%m-%d %H:%M") }}</span>
        </div>
        <hr>
        <div class="comment-content">
        {{ comment.content | safe }}
        </div>
        <div class="comment-actions">
            <a href="#comment-text-field" onclick="add_mention('{{ comment.author }}')">Reply(Mention)</a>
        <!--<a href="#">Like</a>-->
        </div>
        </div>
        {% endfor %}
        
        <div class="comment-section">
            <form action="/action/comment" method="POST">
            <input name="file-id" type="hidden" value="{{ file.id }}" />
            <textarea id="comment-text-field" name="content" placeholder="Leave a comment...
use <b>, <i>, <u> etc to format comment
use '@' for mention users." maxlength="1024" required></textarea>
			<input type="hidden" name="token" value="{{ token }}">
            <button>Comment</button>
            </form>
        </div>
    </div>

<script>
function copycontent(id) {
    var fileLinkInput = document.getElementById(id);
    fileLinkInput.select();
    document.execCommand("copy");
    alert("Copied to clipboard!");
}

function embedcode() {
    document.getElementById("embedcodebutton").outerHTML = `<input type="text" id="embedcode" value="<iframe src='{{ request.scheme }}://{{ request.host }}/api/embed?id={{ file.id }}'></iframe>" readonly><button onclick="copycontent('embedcode')">Copy</button>`;
}

function add_mention(username){
    var comment_field = document.getElementById("comment-text-field");
    comment_field.value = "@"+username + " " + comment_field.value;
}
</script>
</body>
</html>

Comments