268 lines
7.2 KiB
HTML
268 lines
7.2 KiB
HTML
<!DOCTYPE html5>
|
|
<html>
|
|
<head>
|
|
{% import "header.html" as header %}
|
|
<title>Photo</title>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="/static/common.css">
|
|
<script src="/static/common.js"></script>
|
|
{% set filename = photo["id"] + "." + photo["extension"] %}
|
|
{% set link = "/file/" + filename %}
|
|
{% set mimetype=photo["mimetype"] %}
|
|
|
|
<style>
|
|
#content_body
|
|
{
|
|
/* Override common.css */
|
|
flex: 1;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
#left
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
width: 300px;
|
|
}
|
|
#right
|
|
{
|
|
display: flex;
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
#editor_area
|
|
{
|
|
flex: 3;
|
|
}
|
|
#message_area
|
|
{
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
.photo_viewer
|
|
{
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.photo_viewer a
|
|
{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
#photo_img_holder
|
|
{
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.photo_viewer img
|
|
{
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
.photo_viewer audio
|
|
{
|
|
width: 100%;
|
|
}
|
|
.photo_viewer video
|
|
{
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
{{header.make_header(session=session)}}
|
|
<div id="content_body">
|
|
<div id="left">
|
|
<div id="editor_area">
|
|
<!-- TAG INFO -->
|
|
<h4>Tags</h4>
|
|
<ul id="this_tags">
|
|
{% for tag in photo['tags'] %}
|
|
<li>
|
|
<a class="tag_object" href="/search?tag_musts={{tag["name"]}}">{{tag["qualified_name"]}}</a>
|
|
<button class="remove_tag_button" onclick="remove_photo_tag('{{photo["id"]}}', '{{tag["name"]}}', receive_callback);"></button>
|
|
</li>
|
|
{% endfor %}
|
|
<li>
|
|
<input id="add_tag_textbox" type="text" autofocus>
|
|
<button id="add_tag_button" class="add_tag_button" onclick="submit_tag(receive_callback);">add</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- METADATA & DOWNLOAD -->
|
|
<h4>File info</h4>
|
|
<ul id="metadata">
|
|
{% if photo["width"] %}
|
|
<li>Dimensions: {{photo["width"]}}x{{photo["height"]}} px</li>
|
|
<li>Aspect ratio: {{photo["ratio"]}}</li>
|
|
<li>Size: {{photo["bytes_str"]}}</li>
|
|
{% endif %}
|
|
{% if photo["duration"] %}
|
|
<li>Duration: {{photo["duration_str"]}}</li>
|
|
{% endif %}
|
|
<li><a href="/file/{{photo["id"]}}.{{photo["extension"]}}?download=1">Download as {{photo["id"]}}.{{photo["extension"]}}</a></li>
|
|
<li><a href="/file/{{photo["id"]}}.{{photo["extension"]}}?download=1&original_filename=1">Download as "{{photo["filename"]}}"</a></li>
|
|
</ul>
|
|
|
|
<!-- CONTAINING ALBUMS -->
|
|
{% if photo["albums"] %}
|
|
<h4>Albums containing this photo</h4>
|
|
<ul id="containing albums">
|
|
{% for album in photo["albums"] %}
|
|
<li><a href="/album/{{album["id"]}}">{{album["title"]}}</a></li>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
<div id="message_area">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="right">
|
|
<!-- THE PHOTO ITSELF -->
|
|
<div class="photo_viewer">
|
|
{% if mimetype == "image" %}
|
|
<div id="photo_img_holder"><img id="photo_img" src="{{link}}" onclick="toggle_hoverzoom()" onload="this.style.opacity=0.99"></div>
|
|
<!-- <img src="{{link}}"> -->
|
|
{% elif mimetype == "video" %}
|
|
<video src="{{link}}" controls preload=none {%if photo["has_thumbnail"]%}poster="/thumbnail/{{photo["id"]}}.jpg"{%endif%}></video>
|
|
{% elif mimetype == "audio" %}
|
|
<audio src="{{link}}" controls></audio>
|
|
{% else %}
|
|
<a href="{{link}}">View {{filename}}</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var add_tag_box = document.getElementById('add_tag_textbox');
|
|
var add_tag_button = document.getElementById('add_tag_button');
|
|
var message_area = document.getElementById('message_area');
|
|
add_tag_box.onkeydown = function(){entry_with_history_hook(add_tag_box, add_tag_button)};
|
|
|
|
function enable_hoverzoom()
|
|
{
|
|
console.log("enable");
|
|
div = document.getElementById("photo_img_holder");
|
|
img = document.getElementById("photo_img");
|
|
if (img.naturalWidth < div.offsetWidth && img.naturalHeight < div.offsetHeight)
|
|
{
|
|
return;
|
|
}
|
|
img.style.opacity = 0;
|
|
img.style.display = "none";
|
|
div.style.cursor = "zoom-out";
|
|
div.style.backgroundImage = "url('{{link}}')";
|
|
div.onmousemove = move_hoverzoom;
|
|
setTimeout(function(){div.onclick = disable_hoverzoom;}, 100);
|
|
return true;
|
|
}
|
|
function disable_hoverzoom()
|
|
{
|
|
console.log("disable");
|
|
div = document.getElementById("photo_img_holder");
|
|
img = document.getElementById("photo_img");
|
|
img.style.opacity = 100;
|
|
div.style.cursor = "";
|
|
img.style.display="";
|
|
div.style.backgroundImage = "none";
|
|
div.onmousemove = null;
|
|
div.onclick = null;
|
|
add_tag_box.focus();
|
|
}
|
|
function toggle_hoverzoom()
|
|
{
|
|
img = document.getElementById("photo_img");
|
|
if (img.style.opacity === "0")
|
|
{
|
|
disable_hoverzoom();
|
|
}
|
|
else
|
|
{
|
|
enable_hoverzoom();
|
|
}
|
|
}
|
|
|
|
photo_img_holder = document.getElementById("photo_img_holder");
|
|
photo_img = document.getElementById("photo_img");
|
|
function move_hoverzoom(event)
|
|
{
|
|
var x;
|
|
var y;
|
|
var mouse_x = event.offsetX;
|
|
mouse_x -= (photo_img_holder.offsetWidth / 2);
|
|
mouse_x *= 1.05;
|
|
mouse_x += (photo_img_holder.offsetWidth / 2);
|
|
var mouse_y = event.offsetY;
|
|
mouse_y -= (photo_img_holder.offsetHeight / 2);
|
|
mouse_y *= 1.05;
|
|
mouse_y += (photo_img_holder.offsetHeight / 2);
|
|
if (photo_img.naturalWidth < photo_img_holder.offsetWidth)
|
|
{
|
|
x = (photo_img.naturalWidth - photo_img_holder.offsetWidth) / 2;
|
|
}
|
|
else
|
|
{
|
|
x = (photo_img.naturalWidth - photo_img_holder.offsetWidth) * (mouse_x / photo_img_holder.offsetWidth);
|
|
}
|
|
if (photo_img.naturalHeight < photo_img_holder.offsetHeight)
|
|
{
|
|
y = (photo_img.naturalHeight - photo_img_holder.offsetHeight) / 2;
|
|
}
|
|
else
|
|
{
|
|
y = (photo_img.naturalHeight - photo_img_holder.offsetHeight) * (mouse_y / photo_img_holder.offsetHeight);
|
|
}
|
|
//console.log(x);
|
|
photo_img_holder.style.backgroundPosition=(-x)+"px "+(-y)+"px";
|
|
}
|
|
function receive_callback(response)
|
|
{
|
|
var tagname = response["tagname"];
|
|
if ("error" in response)
|
|
{
|
|
message_positivity = "callback_message_negative";
|
|
message_text = '"' + tagname + '" ' + response["error"];
|
|
}
|
|
else if ("action" in response)
|
|
{
|
|
var action = response["action"];
|
|
message_positivity = "callback_message_positive";
|
|
if (action == "add_tag")
|
|
{
|
|
message_text = "Added tag " + tagname;
|
|
}
|
|
else if (action == "remove_tag")
|
|
{
|
|
message_text = "Removed tag " + tagname;
|
|
}
|
|
}
|
|
create_message_bubble(message_positivity, message_text, 8000);
|
|
}
|
|
function submit_tag(callback)
|
|
{
|
|
add_photo_tag('{{photo["id"]}}', add_tag_box.value, callback);
|
|
add_tag_box.value = "";
|
|
}
|
|
</script>
|
|
</html>
|