165 lines
		
	
	
	
		
			4.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			165 lines
		
	
	
	
		
			4.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html5>
 | |
| <html>
 | |
| <head>
 | |
|     {% import "photo_card.html" as photo_card %}
 | |
|     {% import "header.html" as header %}
 | |
|     <title>Album {{album.display_name}}</title>
 | |
|     <meta charset="UTF-8">
 | |
|     <link rel="stylesheet" href="/static/common.css">
 | |
|     <script src="/static/common.js"></script>
 | |
| 
 | |
| <style>
 | |
| p
 | |
| {
 | |
|     word-break: break-word;
 | |
| }
 | |
| #content_body
 | |
| {
 | |
|     /* overriding common.css here */
 | |
|     display: block;
 | |
| }
 | |
| #title_editor,
 | |
| #description_editor
 | |
| {
 | |
|     width: 100%;
 | |
|     max-width: 800px;
 | |
| }
 | |
| #description_text
 | |
| {
 | |
|     padding: 8px;
 | |
|     background-color: rgba(0, 0, 0, 0.1);
 | |
| }
 | |
| #description_editor textarea
 | |
| {
 | |
|     width: 100%;
 | |
| }
 | |
| </style>
 | |
| </head>
 | |
| 
 | |
| 
 | |
| <body>
 | |
| {{header.make_header(session=session)}}
 | |
| <div id="content_body">
 | |
|     <h2 data-editor-id="title" data-editor-placeholder="title" id="title_text">
 | |
|         {%- if album.title -%}
 | |
|             {{album.title}}
 | |
|         {%- else -%}
 | |
|             Album {{album.id}}
 | |
|         {%- endif -%}
 | |
|     </h2>
 | |
|     <p data-editor-id="description" data-editor-placeholder="description" id="description_text" {% if album.description == "" %}class="hidden"{% endif %}>{{album.description}}</p>
 | |
| 
 | |
|     {% set viewparam = "?view=list" if view == "list" else "" %}
 | |
|     {% set parent = album.parent() %}
 | |
|     {% if parent %}
 | |
|     <h3>Parent: <a href="/album/{{parent.id}}{{viewparam}}">{{parent.display_name}}</a></h3>
 | |
|     {% else %}
 | |
|     <h3>Parent: <a href="/albums">Albums</a></h3>
 | |
|     {% endif %}
 | |
| 
 | |
|     {% set sub_albums = album.children() %}
 | |
|     <h3>Sub-albums</h3>
 | |
|     <ul>
 | |
|         {% for sub_album in sub_albums|sort(attribute='title') %}
 | |
|         <li><a href="/album/{{sub_album.id}}{{viewparam}}">{{sub_album.display_name}}</a></li>
 | |
|         {% endfor %}
 | |
|         <li><button class="green_button" onclick="var parent='{{album.id}}'; create_album_and_follow(parent);">Create child</button></li>
 | |
|     </ul>
 | |
| 
 | |
|     {% set photos = album.photos() %}
 | |
|     {% if photos %}
 | |
|         <h3>Photos</h3>
 | |
|         {% if view != "list" %}
 | |
|             <a href="?view=list">List view</a>
 | |
|         {% else %}
 | |
|             <a href="?view=grid">Grid view</a>
 | |
|         {% endif %}
 | |
|         <ul>
 | |
|         {% for photo in photos %}
 | |
|             {{photo_card.create_photo_card(photo, view=view)}}
 | |
|         {% endfor %}
 | |
|         </ul>
 | |
|     {% endif %}
 | |
|     <p>
 | |
|         {% if photos or sub_albums %}
 | |
|             Download:
 | |
|             {% if photos %}
 | |
|                 <a href="/album/{{album.id}}.zip?recursive=no">
 | |
|                     These files ({{album.sum_bytes(recurse=False, string=True)}})
 | |
|                 </a>
 | |
|             {% endif %}
 | |
|             {% if photos and sub_albums %}—{% endif %}
 | |
|             {% if sub_albums %}
 | |
|                 <a href="/album/{{album.id}}.zip?recursive=yes">
 | |
|                     Include children ({{album.sum_bytes(recurse=True, string=True)}})
 | |
|                 </a>
 | |
|             {% endif %}
 | |
|         {% endif %}
 | |
|     </p>
 | |
| </div>
 | |
| </body>
 | |
| 
 | |
| 
 | |
| <script type="text/javascript">
 | |
| var title_text = document.getElementById("title_text");
 | |
| var description_text = document.getElementById("description_text");
 | |
| var blank_title_text = "Album {{album.id}}";
 | |
| 
 | |
| function on_open(editor, edit_element_map)
 | |
| {
 | |
|     if (title_text.innerText == blank_title_text)
 | |
|     {
 | |
|         title_text.innerText = "";
 | |
|     }
 | |
|     editor.open();
 | |
|     edit_element_map['title'].focus();
 | |
| }
 | |
| 
 | |
| function on_save(editor, edit_element_map)
 | |
| {
 | |
|     var title_editor = edit_element_map['title'];
 | |
|     var description_editor = edit_element_map['description'];
 | |
| 
 | |
|     editor.show_spinner();
 | |
|     function callback()
 | |
|     {
 | |
|         editor.hide_spinner();
 | |
|         editor.save();
 | |
|         if (title_text.innerText == "")
 | |
|         {
 | |
|             document.title = blank_title_text;
 | |
|             title_text.innerText = blank_title_text;
 | |
|         }
 | |
|         else
 | |
|         {
 | |
|             document.title = "Album " + title_text.innerText;
 | |
|         }
 | |
|         if (description_text.innerText == "")
 | |
|         {
 | |
|             description_text.classList.add("hidden");
 | |
|         }
 | |
|     }
 | |
| 
 | |
|     var url = "/album/{{album.id}}/edit";
 | |
|     var data = new FormData();
 | |
|     data.append("title", title_editor.value);
 | |
|     data.append("description", description_editor.value);
 | |
|     post(url, data, callback);
 | |
| }
 | |
| 
 | |
| function on_cancel(editor, edit_element_map)
 | |
| {
 | |
|     editor.cancel();
 | |
|     if (title_text.innerText == "")
 | |
|     {
 | |
|         title_text.innerText = blank_title_text;
 | |
|     }
 | |
|     if (description_text.innerText == "")
 | |
|     {
 | |
|         description_text.classList.add("hidden");
 | |
|     }
 | |
| }
 | |
| 
 | |
| var editor = new Editor([title_text, description_text], on_open, on_save, on_cancel);
 | |
| </script>
 | |
| </html>
 |