voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
etiquette/templates/photo.html

358 lines
9.7 KiB
HTML
Raw Normal View History

checkpoint
2016-09-18 08:33:46 +00:00
<!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>
Fix handling of unicode filename downloads Add photo attribute dot_extension Fix bug using unnormalized offset in calculations
2016-12-25 02:34:34 +00:00
{% set filename = photo.id + photo.dot_extension %}
checkpoint
2016-10-30 01:46:23 +00:00
{% set link = "/file/" + filename %}
checkpoint
2016-11-27 09:06:11 +00:00
checkpoint
2016-09-18 08:33:46 +00:00
<style>
#content_body
{
/* Override common.css */
checkpoint add photo and search css for narrow screens; incorporate new expressionmatch kit; entry_with_history cursor moves to end; albums indicate total filesize; etc
2017-02-25 06:07:59 +00:00
flex-direction: row;
checkpoint
2016-09-18 08:33:46 +00:00
flex: 1;
}
#left
{
display: flex;
Add early author search; Load Photo.mimetype on instantiation
2016-12-24 03:49:51 +00:00
padding: 8px;
checkpoint
2016-09-18 08:33:46 +00:00
flex-direction: column;
justify-content: flex-start;
background-color: rgba(0, 0, 0, 0.1);
checkpoint add photo and search css for narrow screens; incorporate new expressionmatch kit; entry_with_history cursor moves to end; albums indicate total filesize; etc
2017-02-25 06:07:59 +00:00
max-width: 300px;
checkpoint
2016-09-18 08:33:46 +00:00
}
#right
{
flex: 1;
checkpoint add photo and search css for narrow screens; incorporate new expressionmatch kit; entry_with_history cursor moves to end; albums indicate total filesize; etc
2017-02-25 06:07:59 +00:00
display: flex;
}
@media screen and (max-width: 800px)
{
#content_body
{
/*
When flexing, it tries to contain itself entirely in the screen,
forcing #left and #right to squish together.
*/
flex: none;
flex-direction: column-reverse;
}
#left
{
/*
Display: None will be overridden as soon as the page detects that the
screen is in narrow mode and turns off the tag box's autofocus
*/
display: none;
flex-direction: row;
width: initial;
max-width: none;
margin-top: 8px;
}
#right
{
flex: none;
height: calc(100% - 20px);
}
checkpoint
2016-09-18 08:33:46 +00:00
}
#editor_area
{
flex: 3;
}
#message_area
{
overflow-y: auto;
flex: 1;
background-color: rgba(0, 0, 0, 0.1);
}
list view
2016-11-07 02:00:30 +00:00
.photo_viewer
checkpoint
2016-09-18 08:33:46 +00:00
{
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
}
list view
2016-11-07 02:00:30 +00:00
.photo_viewer a
checkpoint
2016-09-18 08:33:46 +00:00
{
checkpoint
2016-10-30 01:46:23 +00:00
display: flex;
justify-content: center;
align-items: center;
}
#photo_img_holder
{
height: 100%;
width: 100%;
checkpoint
2016-09-18 08:33:46 +00:00
display: flex;
justify-content: center;
align-items: center;
checkpoint
2016-10-30 01:46:23 +00:00
background-repeat: no-repeat;
checkpoint
2016-09-18 08:33:46 +00:00
}
checkpoint add photo and search css for narrow screens; incorporate new expressionmatch kit; entry_with_history cursor moves to end; albums indicate total filesize; etc
2017-02-25 06:07:59 +00:00
#photo_img_holder img
checkpoint
2016-09-18 08:33:46 +00:00
{
checkpoint
2016-10-10 03:50:13 +00:00
max-height: 100%;
max-width: 100%;
checkpoint
2016-09-18 08:33:46 +00:00
}
list view
2016-11-07 02:00:30 +00:00
.photo_viewer audio
checkpoint
2016-09-18 08:33:46 +00:00
{
width: 100%;
}
list view
2016-11-07 02:00:30 +00:00
.photo_viewer video
checkpoint
2016-09-18 08:33:46 +00:00
{
max-width: 100%;
max-height: 100%;
width: 100%;
}
</style>
checkpoint
2016-11-27 09:06:11 +00:00
</head>
checkpoint
2016-09-18 08:33:46 +00:00
<body>
very early session and registration support
2016-12-18 13:12:14 +00:00
{{header.make_header(session=session)}}
checkpoint
2016-09-18 08:33:46 +00:00
<div id="content_body">
<div id="left">
<div id="editor_area">
<!-- TAG INFO -->
<h4>Tags</h4>
<ul id="this_tags">
Allow templates to get objects instead of json
2016-12-21 00:33:40 +00:00
{% set tags = photo.sorted_tags() %}
{% for tag in tags %}
checkpoint
2016-09-18 08:33:46 +00:00
<li>
Allow templates to get objects instead of json
2016-12-21 00:33:40 +00:00
<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>
checkpoint
2016-09-18 08:33:46 +00:00
</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">
Allow templates to get objects instead of json
2016-12-21 00:33:40 +00:00
{% if photo.author_id %}
{% set author = photo.author() %}
<li>Author: <a href="/user/{{author.username}}">{{author.username}}</a>
checkpoint
2016-10-10 03:50:13 +00:00
{% endif %}
Allow templates to get objects instead of json
2016-12-21 00:33:40 +00:00
{% if photo.width %}
<li>Dimensions: {{photo.width}}x{{photo.height}} px</li>
<li>Aspect ratio: {{photo.ratio}}</li>
checkpoint
2016-09-18 08:33:46 +00:00
{% endif %}
Add early author search; Load Photo.mimetype on instantiation
2016-12-24 03:49:51 +00:00
<li>Size: {{photo.bytestring()}}</li>
Allow templates to get objects instead of json
2016-12-21 00:33:40 +00:00
{% if photo.duration %}
Add early author search; Load Photo.mimetype on instantiation
2016-12-24 03:49:51 +00:00
<li>Duration: {{photo.duration_string()}}</li>
Allow templates to get objects instead of json
2016-12-21 00:33:40 +00:00
{% endif %}
Fix handling of unicode filename downloads Add photo attribute dot_extension Fix bug using unnormalized offset in calculations
2016-12-25 02:34:34 +00:00
<li><a href="/file/{{photo.id}}{{photo.dot_extension}}?download=1">Download as {{photo.id}}.{{photo.extension}}</a></li>
<li><a href="/file/{{photo.id}}{{photo.dot_extension}}?download=1&original_filename=1">Download as "{{photo.basename}}"</a></li>
checkpoint
2016-09-18 08:33:46 +00:00
</ul>
<!-- CONTAINING ALBUMS -->
Allow templates to get objects instead of json
2016-12-21 00:33:40 +00:00
{% set albums = photo.albums() %}
{% if albums %}
checkpoint
2016-09-18 08:33:46 +00:00
<h4>Albums containing this photo</h4>
<ul id="containing albums">
Allow templates to get objects instead of json
2016-12-21 00:33:40 +00:00
{% for album in albums %}
<li><a href="/album/{{album.id}}">{{album.title}}</a></li>
checkpoint
2016-09-18 08:33:46 +00:00
{% endfor %}
{% endif %}
</ul>
</div>
<div id="message_area">
</div>
</div>
<div id="right">
checkpoint
2016-10-30 01:46:23 +00:00
<!-- THE PHOTO ITSELF -->
list view
2016-11-07 02:00:30 +00:00
<div class="photo_viewer">
Add early author search; Load Photo.mimetype on instantiation
2016-12-24 03:49:51 +00:00
{% if photo.mimetype == "image" %}
checkpoint fix bug in which renaming photo causes os.remove even when it's an in-place rename on case-insensitive systems; incorporate expressionmatch for filename search; minor comment cleanup
2017-02-26 06:47:20 +00:00
<div id="photo_img_holder">
<img
id="photo_img"
src="{{link}}"
alt="{{photo.basename}}"
onclick="toggle_hoverzoom()"
onload="this.style.opacity=0.99"
>
</div>
Add early author search; Load Photo.mimetype on instantiation
2016-12-24 03:49:51 +00:00
{% elif photo.mimetype == "video" %}
Allow templates to get objects instead of json
2016-12-21 00:33:40 +00:00
<video src="{{link}}" controls preload=none {%if photo.thumbnail%}poster="/thumbnail/{{photo.id}}.jpg"{%endif%}></video>
Add early author search; Load Photo.mimetype on instantiation
2016-12-24 03:49:51 +00:00
{% elif photo.mimetype == "audio" %}
checkpoint
2016-09-18 08:33:46 +00:00
<audio src="{{link}}" controls></audio>
{% else %}
<a href="{{link}}">View {{filename}}</a>
{% endif %}
</div>
</div>
</div>
</body>
checkpoint
2016-11-27 09:06:11 +00:00
checkpoint
2016-09-18 08:33:46 +00:00
<script type="text/javascript">
checkpoint add photo and search css for narrow screens; incorporate new expressionmatch kit; entry_with_history cursor moves to end; albums indicate total filesize; etc
2017-02-25 06:07:59 +00:00
var content_body = document.getElementById('content_body');
checkpoint
2016-10-10 03:50:13 +00:00
var add_tag_box = document.getElementById('add_tag_textbox');
var add_tag_button = document.getElementById('add_tag_button');
checkpoint
2016-09-18 08:33:46 +00:00
var message_area = document.getElementById('message_area');
checkpoint
2016-10-10 03:50:13 +00:00
add_tag_box.onkeydown = function(){entry_with_history_hook(add_tag_box, add_tag_button)};
checkpoint
2016-09-18 08:33:46 +00:00
Move specific functions out of common.js
2016-12-21 05:53:59 +00:00
function add_photo_tag(photoid, tagname, callback)
{
if (tagname === ""){return}
var url = "/photo/" + photoid;
data = new FormData();
data.append("add_tag", tagname);
return post(url, data, callback);
}
function remove_photo_tag(photoid, tagname, callback)
{
if (tagname === ""){return}
var url = "/photo/" + photoid;
data = new FormData();
data.append("remove_tag", tagname);
return post(url, data, callback);
}
function submit_tag(callback)
{
add_photo_tag('{{photo.id}}', add_tag_box.value, callback);
add_tag_box.value = "";
}
function receive_callback(response)
{
var tagname = response["tagname"];
if ("error" in response)
{
Make login page javascript-based instead of html form (sorry)
2016-12-21 09:11:50 +00:00
message_positivity = "message_negative";
Move specific functions out of common.js
2016-12-21 05:53:59 +00:00
message_text = '"' + tagname + '" ' + response["error"];
}
else if ("action" in response)
{
var action = response["action"];
Make login page javascript-based instead of html form (sorry)
2016-12-21 09:11:50 +00:00
message_positivity = "message_positive";
Move specific functions out of common.js
2016-12-21 05:53:59 +00:00
if (action == "add_tag")
{
message_text = "Added tag " + tagname;
}
else if (action == "remove_tag")
{
message_text = "Removed tag " + tagname;
}
}
create_message_bubble(message_area, message_positivity, message_text, 8000);
}
checkpoint
2016-10-30 01:46:23 +00:00
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;
checkpoint add photo and search css for narrow screens; incorporate new expressionmatch kit; entry_with_history cursor moves to end; albums indicate total filesize; etc
2017-02-25 06:07:59 +00:00
if (getComputedStyle(content_body).flexDirection != "column-reverse")
{
add_tag_box.focus();
}
checkpoint
2016-10-30 01:46:23 +00:00
}
function toggle_hoverzoom()
{
img = document.getElementById("photo_img");
if (img.style.opacity === "0")
{
disable_hoverzoom();
}
else
{
enable_hoverzoom();
}
}
checkpoint
2016-11-27 09:06:11 +00:00
photo_img_holder = document.getElementById("photo_img_holder");
photo_img = document.getElementById("photo_img");
checkpoint
2016-10-30 01:46:23 +00:00
function move_hoverzoom(event)
{
var x;
var y;
general cleanup; move binding_filler helper
2016-12-21 05:33:14 +00:00
// Adding 5% to perceived position gives us a bit of padding around the image,
// so you don't need to navigate a 1px line to see the edge.
// We first subtract half of the image dimensions so that the 5% is applied
// to both left and right. Otherwise 105% of 0 is still 0 which doesn't
// apply padding on the left.
checkpoint
2016-11-27 09:06:11 +00:00
var mouse_x = event.offsetX;
mouse_x -= (photo_img_holder.offsetWidth / 2);
mouse_x *= 1.05;
mouse_x += (photo_img_holder.offsetWidth / 2);
general cleanup; move binding_filler helper
2016-12-21 05:33:14 +00:00
checkpoint
2016-11-27 09:06:11 +00:00
var mouse_y = event.offsetY;
mouse_y -= (photo_img_holder.offsetHeight / 2);
mouse_y *= 1.05;
mouse_y += (photo_img_holder.offsetHeight / 2);
general cleanup; move binding_filler helper
2016-12-21 05:33:14 +00:00
checkpoint
2016-11-27 09:06:11 +00:00
if (photo_img.naturalWidth < photo_img_holder.offsetWidth)
checkpoint
2016-10-30 01:46:23 +00:00
{
general cleanup; move binding_filler helper
2016-12-21 05:33:14 +00:00
// If the image is smaller than the frame, just center it
checkpoint
2016-11-27 09:06:11 +00:00
x = (photo_img.naturalWidth - photo_img_holder.offsetWidth) / 2;
checkpoint
2016-10-30 01:46:23 +00:00
}
else
{
general cleanup; move binding_filler helper
2016-12-21 05:33:14 +00:00
// Take the amount of movement necessary (frame width - image width)
// times our distance across the image as a percentage.
checkpoint
2016-11-27 09:06:11 +00:00
x = (photo_img.naturalWidth - photo_img_holder.offsetWidth) * (mouse_x / photo_img_holder.offsetWidth);
checkpoint
2016-10-30 01:46:23 +00:00
}
general cleanup; move binding_filler helper
2016-12-21 05:33:14 +00:00
checkpoint
2016-11-27 09:06:11 +00:00
if (photo_img.naturalHeight < photo_img_holder.offsetHeight)
checkpoint
2016-10-30 01:46:23 +00:00
{
checkpoint
2016-11-27 09:06:11 +00:00
y = (photo_img.naturalHeight - photo_img_holder.offsetHeight) / 2;
checkpoint
2016-10-30 01:46:23 +00:00
}
else
{
checkpoint
2016-11-27 09:06:11 +00:00
y = (photo_img.naturalHeight - photo_img_holder.offsetHeight) * (mouse_y / photo_img_holder.offsetHeight);
checkpoint
2016-10-30 01:46:23 +00:00
}
//console.log(x);
checkpoint
2016-11-27 09:06:11 +00:00
photo_img_holder.style.backgroundPosition=(-x)+"px "+(-y)+"px";
checkpoint
2016-10-30 01:46:23 +00:00
}
checkpoint add photo and search css for narrow screens; incorporate new expressionmatch kit; entry_with_history cursor moves to end; albums indicate total filesize; etc
2017-02-25 06:07:59 +00:00
setTimeout(
/*
When the screen is in column mode, the autofocusing of the tag box snaps the
screen down to it, which is annoying. By starting the #left hidden, we have
an opportunity to unset the autofocus before showing it.
*/
function()
{
var left = document.getElementById("left");
if (getComputedStyle(content_body).flexDirection == "column-reverse")
{
add_tag_box.autofocus = false;
}
left.style.display = "flex";
},
0
);
checkpoint
2016-11-27 09:06:11 +00:00
</script>
</html>
Reference in a new issue Copy permalink