1731 lines
57 KiB
JavaScript
Executable File
1731 lines
57 KiB
JavaScript
Executable File
/*
|
|
* We have a few competing goals:
|
|
*
|
|
* First, be as responsive as possible. Preload nearby post HTML and their images.
|
|
*
|
|
* If data in a post page changes, eg. if the user votes, then coming back to the page
|
|
* later should retain the changes. This means either requesting the page again, or
|
|
* retaining the document node and reusing it, so we preserve the changes that were
|
|
* made in-place.
|
|
*
|
|
* Don't use too much memory. If we keep every document node in memory as we use it,
|
|
* the images will probably be kept around too. Release older nodes, so the browser
|
|
* is more likely to release images that havn't been used in a while.
|
|
*
|
|
* We do the following:
|
|
* - When we load a new post, it's formatted and its scripts are evaluated normally.
|
|
* - When we're replacing the displayed post, its node is stashed away in a node cache.
|
|
* - If we come back to the post while it's in the node cache, we'll use the node directly.
|
|
* - HTML and images for posts are preloaded. We don't use a simple mechanism like
|
|
* Preload.preload_raw, because Opera's caching is broken for XHR and it'll always
|
|
* do a slow revalidation.
|
|
* - We don't depend on browser caching for HTML. That would require us to expire a
|
|
* page when we switch away from it if we've made any changes (eg. voting), so we
|
|
* don't pull an out-of-date page next time. This is slower, and would require us
|
|
* to be careful about expiring the cache.
|
|
*/
|
|
|
|
BrowserView = function(container)
|
|
{
|
|
this.container = container;
|
|
|
|
/* The post that we currently want to display. This will be either one of the
|
|
* current html_preloads, or be the displayed_post_id. */
|
|
this.wanted_post_id = null;
|
|
this.wanted_post_frame = null;
|
|
|
|
/* The post that's currently actually being displayed. */
|
|
this.displayed_post_id = null;
|
|
this.displayed_post_frame = null;
|
|
|
|
this.current_ajax_request = null;
|
|
this.last_preload_request = [];
|
|
this.last_preload_request_active = false;
|
|
|
|
this.image_pool = new ImgPoolHandler();
|
|
this.img_box = this.container.down(".image-box");
|
|
this.container.down(".image-canvas");
|
|
|
|
/* Pop. Show large by default {
|
|
*/
|
|
(function($, B){
|
|
/* MI: If mobile browser, do nothing. */
|
|
if (Prototype.BrowserIsMobile)
|
|
return;
|
|
|
|
var COOKIE_NAME = "browse_large_by_default";
|
|
B.large_by_default = jQuery.cookie(COOKIE_NAME) === "0" ? false : true;
|
|
|
|
var li = $($('.post-info-right-edge li')[0]).css("position", "relative");
|
|
var div = $('.default_to_large_cont'), a = div.children('a'), s = a.children('span');
|
|
function toggle_show_large() {
|
|
B.large_by_default = !B.large_by_default;
|
|
(B.large_by_default ? s.show() : s.hide());
|
|
jQuery.cookie(COOKIE_NAME, (B.large_by_default ? 1 : 0));
|
|
}
|
|
|
|
a.click(function(){
|
|
toggle_show_large();
|
|
return false;
|
|
});
|
|
|
|
li.hover(function(){
|
|
div.show();
|
|
}, function(){
|
|
div.hide();
|
|
});
|
|
|
|
if (!B.large_by_default)
|
|
s.hide();
|
|
})(jQuery, this);
|
|
/* } */
|
|
|
|
/* In Opera 10.63, the img.complete property is not reset to false after changing the
|
|
* src property. Blits from images to the canvas silently fail, with nothing being
|
|
* blitted and no exception raised. This causes blank canvases to be displayed, because
|
|
* we have no way of telling whether the image is blittable or if the blit succeeded. */
|
|
if(!Prototype.Browser.Opera)
|
|
this.canvas = create_canvas_2d();
|
|
if(this.canvas)
|
|
{
|
|
this.canvas.hide();
|
|
this.img_box.appendChild(this.canvas);
|
|
}
|
|
this.zoom_level = 0;
|
|
|
|
/* True if the post UI is visible. */
|
|
this.post_ui_visible = true;
|
|
|
|
this.update_navigator = this.update_navigator.bind(this);
|
|
|
|
Event.on(window, "resize", this.window_resize_event.bindAsEventListener(this));
|
|
document.on("viewer:vote", function(event) { if(this.vote_widget) this.vote_widget.set(event.memo.score); }.bindAsEventListener(this));
|
|
|
|
if(TagCompletion)
|
|
TagCompletion.init();
|
|
|
|
/* Double-clicking the main image, or on nothing, toggles the thumb bar. */
|
|
this.container.down(".image-container").on("dblclick", ".image-container", function(event) {
|
|
/* Watch out: Firefox fires dblclick events for all buttons, with the standard
|
|
* button maps, but IE only fires it for left click and doesn't set button at
|
|
* all, so event.isLeftClick won't work. */
|
|
if(event.button)
|
|
return;
|
|
|
|
event.stop();
|
|
document.fire("viewer:set-thumb-bar", {toggle: true});
|
|
}.bindAsEventListener(this));
|
|
|
|
/* Image controls: */
|
|
document.on("viewer:view-large-toggle", function(e) { this.toggle_view_large_image(); }.bindAsEventListener(this));
|
|
this.container.down(".post-info").on("click", ".toggle-zoom", function(e) { e.stop(); this.toggle_view_large_image(true); }.bindAsEventListener(this)); // Pop.
|
|
this.container.down(".parent-post").down("A").on("click", this.parent_post_click_event.bindAsEventListener(this));
|
|
this.container.down(".child-posts").down("A").on("click", this.child_posts_click_event.bindAsEventListener(this));
|
|
|
|
this.container.down(".post-frames").on("click", ".post-frame-link", function(e, item) {
|
|
e.stop();
|
|
|
|
/* Change the displayed post frame to the one that was clicked. Since all post frames
|
|
* are usually displayed in the thumbnail view, set center_thumbs to true to recenter
|
|
* on the thumb that was clicked, so it's clearer what's happening. */
|
|
document.fire("viewer:set-active-post", {post_id: this.displayed_post_id, post_frame: item.post_frame, center_thumbs: true});
|
|
}.bind(this));
|
|
|
|
/* We'll receive this message from the thumbnail view when the overlay is
|
|
* visible on the bottom of the screen, to tell us how much space is covered up
|
|
* by it. */
|
|
this.thumb_bar_height = 0;
|
|
document.on("viewer:thumb-bar-changed", function(e) {
|
|
/* Update the thumb bar height and rescale the image to fit the new area. */
|
|
this.thumb_bar_height = e.memo.height;
|
|
this.update_image_window_size();
|
|
|
|
this.set_post_ui(e.memo.shown);
|
|
this.scale_and_position_image(true);
|
|
}.bindAsEventListener(this));
|
|
|
|
/*
|
|
OnKey(79, null, function(e) {
|
|
this.zoom_level -= 1;
|
|
this.scale_and_position_image(true);
|
|
this.update_navigator();
|
|
return true;
|
|
}.bindAsEventListener(this));
|
|
|
|
OnKey(80, null, function(e) {
|
|
this.zoom_level += 1;
|
|
this.scale_and_position_image(true);
|
|
this.update_navigator();
|
|
return true;
|
|
}.bindAsEventListener(this));
|
|
*/
|
|
/* Hide member-only and moderator-only controls: */
|
|
$(document.body).pickClassName("is-member", "not-member", User.is_member_or_higher());
|
|
$(document.body).pickClassName("is-moderator", "not-moderator", User.is_mod_or_higher());
|
|
|
|
var tag_span = this.container.down(".post-tags");
|
|
tag_span.on("click", ".post-tag", function(e, element) {
|
|
e.stop();
|
|
document.fire("viewer:perform-search", {tags: element.tag_name});
|
|
}.bind(this));
|
|
|
|
/* These two links do the same thing, but one is shown to approve a pending post
|
|
* and the other is shown to unflag a flagged post, so they prompt differently. */
|
|
this.container.down(".post-approve").on("click", function(e) {
|
|
e.stop();
|
|
if(!confirm("Approve this post?"))
|
|
return;
|
|
var post_id = this.displayed_post_id;
|
|
Post.approve(post_id, false);
|
|
}.bindAsEventListener(this));
|
|
|
|
this.container.down(".post-unflag").on("click", function(e) {
|
|
e.stop();
|
|
if(!confirm("Unflag this post?"))
|
|
return;
|
|
var post_id = this.displayed_post_id;
|
|
Post.unflag(post_id);
|
|
}.bindAsEventListener(this));
|
|
|
|
this.container.down(".post-delete").on("click", function(e) {
|
|
e.stop();
|
|
var post = Post.posts.get(this.displayed_post_id);
|
|
var default_reason = "";
|
|
if(post.flag_detail)
|
|
default_reason = post.flag_detail.reason;
|
|
|
|
var reason = prompt("Reason:", default_reason);
|
|
if(!reason || reason == "")
|
|
return;
|
|
var post_id = this.displayed_post_id;
|
|
Post.approve(post_id, reason);
|
|
}.bindAsEventListener(this));
|
|
|
|
this.container.down(".post-undelete").on("click", function(e) {
|
|
e.stop();
|
|
if(!confirm("Undelete this post?"))
|
|
return;
|
|
var post_id = this.displayed_post_id;
|
|
Post.undelete(post_id);
|
|
}.bindAsEventListener(this));
|
|
|
|
this.container.down(".flag-button").on("click", function(e) {
|
|
e.stop();
|
|
var post_id = this.displayed_post_id;
|
|
Post.flag(post_id);
|
|
}.bindAsEventListener(this));
|
|
|
|
this.container.down(".activate-post").on("click", function(e) {
|
|
e.stop();
|
|
|
|
var post_id = this.displayed_post_id;
|
|
if(!confirm("Activate this post?"))
|
|
return;
|
|
Post.update_batch([{ id: post_id, is_held: false }], function()
|
|
{
|
|
var post = Post.posts.get(post_id);
|
|
if(post.is_held)
|
|
notice("Couldn't activate post");
|
|
else
|
|
notice("Activated post");
|
|
}.bind(this));
|
|
}.bindAsEventListener(this));
|
|
|
|
this.container.down(".reparent-post").on("click", function(e) {
|
|
e.stop();
|
|
|
|
if(!confirm("Make this post the parent?"))
|
|
return;
|
|
|
|
var post_id = this.displayed_post_id;
|
|
var post = Post.posts.get(post_id);
|
|
if(post == null)
|
|
return;
|
|
|
|
Post.reparent_post(post_id, post.parent_id, false);
|
|
}.bindAsEventListener(this));
|
|
|
|
this.container.down(".pool-info").on("click", ".remove-pool-from-post", function(e, element)
|
|
{
|
|
e.stop();
|
|
var pool_info = element.up(".pool-info");
|
|
var pool = Pool.pools.get(pool_info.pool_id);
|
|
var pool_name = pool.name.replace(/_/g, ' ');
|
|
if(!confirm("Remove this post from pool #" + pool_info.pool_id + ": " + pool_name + "?"))
|
|
return;
|
|
|
|
Pool.remove_post(pool_info.post_id, pool_info.pool_id);
|
|
}.bind(this));
|
|
|
|
/* Post editing: */
|
|
var post_edit = this.container.down(".post-edit");
|
|
post_edit.down("FORM").on("submit", function(e) { e.stop(); this.edit_save(); }.bindAsEventListener(this));
|
|
this.container.down(".show-tag-edit").on("click", function(e) { e.stop(); this.edit_show(true); }.bindAsEventListener(this));
|
|
this.container.down(".edit-save").on("click", function(e) { e.stop(); this.edit_save(); }.bindAsEventListener(this));
|
|
this.container.down(".edit-cancel").on("click", function(e) { e.stop(); this.edit_show(false); }.bindAsEventListener(this));
|
|
|
|
this.edit_post_area_changed = this.edit_post_area_changed.bind(this);
|
|
post_edit.down(".edit-tags").on("paste", function(e) { this.edit_post_area_changed.defer(); }.bindAsEventListener(this));
|
|
post_edit.down(".edit-tags").on("keydown", function(e) { this.edit_post_area_changed.defer(); }.bindAsEventListener(this));
|
|
new TagCompletionBox(post_edit.down(".edit-tags"));
|
|
|
|
this.container.down(".post-edit").on("keydown", function(e) {
|
|
/* Don't e.stop() KEY_ESC, so we fall through and let handle_keypress unfocus the
|
|
* form entry, if any. Otherwise, Chrome gets confused and leaves the focus on the
|
|
* hidden input, where it'll steal keystrokes. */
|
|
if (e.keyCode == Event.KEY_ESC) { this.edit_show(false); }
|
|
else if (e.keyCode == Event.KEY_RETURN) { e.stop(); this.edit_save(); }
|
|
}.bindAsEventListener(this));
|
|
|
|
/* When the edit-post hotkey is pressed (E), force the post UI open and show editing. */
|
|
document.on("viewer:edit-post", function(e) {
|
|
document.fire("viewer:set-thumb-bar", { set: true });
|
|
this.edit_show(true);
|
|
}.bindAsEventListener(this));
|
|
|
|
/* When the post that's currently being displayed is updated by an API call, update
|
|
* the displayed info. */
|
|
document.on("posts:update", function(e) {
|
|
if(e.memo.post_ids.get(this.displayed_post_id) == null)
|
|
return;
|
|
this.set_post_info();
|
|
}.bindAsEventListener(this));
|
|
|
|
this.vote_widget = new Vote(jQuery(this.container.down(".vote-container"), null));
|
|
this.vote_widget.initShortcut();
|
|
|
|
this.blacklist_override_post_id = null;
|
|
this.container.down(".show-blacklisted").on("click", function(e) { e.preventDefault(); }.bindAsEventListener(this));
|
|
this.container.down(".show-blacklisted").on("dblclick", function(e) {
|
|
e.stop();
|
|
this.blacklist_override_post_id = this.displayed_post_id;
|
|
var post = Post.posts.get(this.displayed_post_id);
|
|
this.set_main_image(post, this.displayed_post_frame);
|
|
}.bindAsEventListener(this));
|
|
|
|
|
|
this.img_box.on("viewer:center-on", function(e) { this.center_image_on(e.memo.x, e.memo.y); }.bindAsEventListener(this));
|
|
|
|
this.navigator = new Navigator(this.container.down(".image-navigator"), this.img_box);
|
|
|
|
this.container.on("swipe:horizontal", function(e) { document.fire("viewer:show-next-post", { prev: e.memo.right }); }.bindAsEventListener(this));
|
|
|
|
// if(Prototype.BrowserFeatures.Touchscreen)
|
|
/* MI: Using Prototype.BrowserIsMobile instead. */
|
|
if (Prototype.BrowserIsMobile)
|
|
{
|
|
this.create_voting_popup();
|
|
this.image_swipe = new SwipeHandler(this.container.down(".image-container"));
|
|
}
|
|
|
|
/* Create the frame editor. This must be created before image_dragger, since it takes priority
|
|
* for drags. */
|
|
this.container.down(".edit-frames-button").on("click", function(e) { e.stop(); this.show_frame_editor(); }.bindAsEventListener(this));
|
|
this.frame_editor = new FrameEditor(this.container.down(".frame-editor"), this.img_box, this.container.down(".frame-editor-popup"),
|
|
{
|
|
onClose: function() {
|
|
this.hide_frame_editor();
|
|
}.bind(this)
|
|
});
|
|
|
|
/* If we're using dragging as a swipe gesture (see SwipeHandler), don't use it for
|
|
* dragging too. */
|
|
if(this.image_swipe == null)
|
|
this.image_dragger = new WindowDragElementAbsolute(this.img_box, this.update_navigator);
|
|
}
|
|
|
|
BrowserView.prototype.create_voting_popup = function()
|
|
{
|
|
/* Create the low-level voting widget. */
|
|
var popup_vote_widget_container = this.container.down(".vote-popup-container");
|
|
popup_vote_widget_container.show();
|
|
this.popup_vote_widget = new Vote(jQuery(popup_vote_widget_container), null);
|
|
this.popup_vote_widget.initShortcut();
|
|
|
|
var flash = this.container.down(".vote-popup-flash");
|
|
|
|
/* vote-popup-expand is the part that's always present and is clicked to display the
|
|
* voting popup. Create a dragger on it, and pass the position down to the voting
|
|
* popup as we drag around. */
|
|
var popup_expand = this.container.down(".vote-popup-expand");
|
|
popup_expand.show();
|
|
|
|
var last_dragged_over = null;
|
|
|
|
this.popup_vote_dragger = new DragElement(popup_expand, {
|
|
ondown: function(drag) {
|
|
/* Stop the touchdown/mousedown events, so this drag takes priority over any
|
|
* others. In particular, we don't want this.image_swipe to also catch this
|
|
* as a drag. */
|
|
drag.latest_event.stop();
|
|
|
|
flash.hide();
|
|
flash.removeClassName("flash-star");
|
|
|
|
this.popup_vote_widget.set_mouseover(null);
|
|
last_dragged_over = null;
|
|
popup_vote_widget_container.removeClassName("vote-popup-hidden");
|
|
}.bind(this),
|
|
|
|
onup: function(drag) {
|
|
/* If we're cancelling the drag, don't activate the vote, if any. */
|
|
if(drag.cancelling)
|
|
{
|
|
debug("cancelling drag");
|
|
last_dragged_over = null;
|
|
}
|
|
|
|
/* Call even if star_container is null or not a star, so we clear any mouseover. */
|
|
this.popup_vote_widget.set_mouseover(last_dragged_over);
|
|
|
|
var star = this.popup_vote_widget.activate_item(last_dragged_over);
|
|
|
|
/* If a vote was made, flash the vote star. */
|
|
if(star != null)
|
|
{
|
|
/* Set the star-# class to color the star. */
|
|
for(var i = 0; i < 4; ++i)
|
|
flash.removeClassName("star-" + i);
|
|
flash.addClassName("star-" + star);
|
|
|
|
flash.show();
|
|
|
|
/* Center the element on the screen. */
|
|
var offset = this.image_window_size;
|
|
var flash_x = offset.width/2 - flash.offsetWidth/2;
|
|
var flash_y = offset.height/2 - flash.offsetHeight/2;
|
|
flash.setStyle({left: flash_x + "px", top: flash_y + "px"});
|
|
flash.addClassName("flash-star");
|
|
}
|
|
|
|
popup_vote_widget_container.addClassName("vote-popup-hidden");
|
|
last_dragged_over = null;
|
|
}.bind(this),
|
|
|
|
ondrag: function(drag) {
|
|
last_dragged_over = document.elementFromPoint(drag.x, drag.y);
|
|
this.popup_vote_widget.set_mouseover(last_dragged_over);
|
|
}.bind(this)
|
|
});
|
|
}
|
|
|
|
|
|
BrowserView.prototype.set_post_ui = function(visible)
|
|
{
|
|
/* Disable the post UI by default on touchscreens; we don't have an interface
|
|
* to toggle it. */
|
|
// if(Prototype.BrowserFeatures.Touchscreen)
|
|
/* MI: Using Prototype.BrowserIsMobile instead. */
|
|
if (Prototype.BrowserIsMobile)
|
|
visible = false;
|
|
|
|
/* If we don't have a post displayed, always hide the post UI even if it's currently
|
|
* shown. */
|
|
this.container.down(".post-info").show(visible && this.displayed_post_id != null);
|
|
|
|
if(visible == this.post_ui_visible)
|
|
return;
|
|
|
|
this.post_ui_visible = visible;
|
|
if(this.navigator)
|
|
this.navigator.set_autohide(!visible);
|
|
|
|
/* If we're hiding the post UI, cancel the post editor if it's open. */
|
|
if(!this.post_ui_visible)
|
|
this.edit_show(false);
|
|
}
|
|
|
|
|
|
BrowserView.prototype.image_loaded_event = function(event)
|
|
{
|
|
/* Record that the image is completely available, so it can be blitted to the canvas.
|
|
* This is different than img.complete, which is true if the image has completed downloading
|
|
* but hasn't yet been decoded, so isn't yet completely available. This generally happens
|
|
* if we query img.completed quickly after setting img.src and the image data is cached. */
|
|
this.img.fully_loaded = true;
|
|
|
|
document.fire("viewer:displayed-image-loaded", { post_id: this.displayed_post_id, post_frame: this.displayed_post_frame });
|
|
this.update_canvas();
|
|
}
|
|
|
|
/* Return true if last_preload_request includes [post_id, post_frame]. */
|
|
BrowserView.prototype.post_frame_list_includes = function(post_id_list, post_id, post_frame)
|
|
{
|
|
var found_preload = post_id_list.find(function(post) { return post[0] == post_id && post[1] == post_frame; });
|
|
return found_preload != null;
|
|
}
|
|
|
|
/* Begin preloading the HTML and images for the given post IDs. */
|
|
BrowserView.prototype.preload = function(post_ids)
|
|
{
|
|
/* We're being asked to preload post_ids. Only do this if it seems to make sense: if
|
|
* the user is actually traversing posts that are being preloaded. Look at the previous
|
|
* call to preload(). If it didn't include the current post, then skip the preload. */
|
|
var last_preload_request = this.last_preload_request;
|
|
this.last_preload_request = post_ids;
|
|
|
|
if(!this.post_frame_list_includes(last_preload_request, this.wanted_post_id, this.wanted_post_frame))
|
|
{
|
|
// debug("skipped-preload(" + post_ids.join(",") + ")");
|
|
this.last_preload_request_active = false;
|
|
return;
|
|
}
|
|
this.last_preload_request_active = true;
|
|
// debug("preload(" + post_ids.join(",") + ")");
|
|
|
|
var new_preload_container = new PreloadContainer();
|
|
for(var i = 0; i < post_ids.length; ++i)
|
|
{
|
|
var post_id = post_ids[i][0];
|
|
var post_frame = post_ids[i][1];
|
|
var post = Post.posts.get(post_id);
|
|
|
|
if(post_frame != -1)
|
|
{
|
|
var frame = post.frames[post_frame];
|
|
new_preload_container.preload(frame.url);
|
|
}
|
|
else
|
|
new_preload_container.preload(post.sample_url);
|
|
}
|
|
|
|
/* If we already were preloading images, we created the new preloads before
|
|
* deleting the old ones. That way, any images that are still being preloaded
|
|
* won't be deleted and recreated, possibly causing the download to be interrupted
|
|
* and resumed. */
|
|
if(this.preload_container)
|
|
this.preload_container.destroy();
|
|
this.preload_container = new_preload_container;
|
|
}
|
|
|
|
BrowserView.prototype.load_post_id_data = function(post_id)
|
|
{
|
|
debug("load needed");
|
|
|
|
// If we already have a request in flight, don't start another; wait for the
|
|
// first to finish.
|
|
if(this.current_ajax_request != null)
|
|
return;
|
|
|
|
new Ajax.Request("/post.json", {
|
|
parameters: {
|
|
tags: "id:" + post_id,
|
|
api_version: 2,
|
|
filter: 1,
|
|
include_tags: "1",
|
|
include_votes: "1",
|
|
include_pools: 1
|
|
},
|
|
method: "get",
|
|
|
|
onCreate: function(resp) {
|
|
this.current_ajax_request = resp.request;
|
|
}.bind(this),
|
|
|
|
onSuccess: function(resp) {
|
|
if(this.current_ajax_request != resp.request)
|
|
return;
|
|
|
|
/* If no posts were returned, then the post ID we're looking up doesn't exist;
|
|
* treat this as a failure. */
|
|
var resp = resp.responseJSON;
|
|
this.success = resp.posts.length > 0;
|
|
if(!this.success)
|
|
{
|
|
notice("Post #" + post_id + " doesn't exist");
|
|
return;
|
|
}
|
|
|
|
Post.register_resp(resp);
|
|
}.bind(this),
|
|
|
|
onComplete: function(resp) {
|
|
if(this.current_ajax_request == resp.request)
|
|
this.current_ajax_request = null;
|
|
|
|
/* If the request failed and we were requesting wanted_post_id, don't keep trying. */
|
|
var success = resp.request.success() && this.success;
|
|
if(!success && post_id == this.wanted_post_id)
|
|
{
|
|
/* As a special case, if the post we requested doesn't exist and we aren't displaying
|
|
* anything at all, force the thumb bar open so we don't show nothing at all. */
|
|
if(this.displayed_post_id == null)
|
|
document.fire("viewer:set-thumb-bar", {set: true});
|
|
|
|
return;
|
|
}
|
|
|
|
/* This will either load the post we just finished, or request data for the
|
|
* one we want. */
|
|
this.set_post(this.wanted_post_id, this.wanted_post_frame);
|
|
}.bind(this),
|
|
|
|
onFailure: function(resp) {
|
|
notice("Error " + resp.status + " loading post");
|
|
}.bind(this)
|
|
});
|
|
}
|
|
|
|
BrowserView.prototype.set_viewing_larger_version = function(b, from_toggle_zoom) // Pop.
|
|
{
|
|
this.viewing_larger_version = b;
|
|
|
|
var post = Post.posts.get(this.displayed_post_id);
|
|
var can_zoom = post != null && post.jpeg_url != post.sample_url;
|
|
|
|
var viewing_larger_version = from_toggle_zoom || !this.large_by_default ? b : !b; // Pop.
|
|
|
|
this.container.down(".zoom-icon-none").show(!can_zoom);
|
|
this.container.down(".zoom-icon-in").show(can_zoom && !viewing_larger_version); // Pop.
|
|
this.container.down(".zoom-icon-out").show(can_zoom && viewing_larger_version); // Pop.
|
|
|
|
/* When we're on the regular version and we're on a touchscreen, disable drag
|
|
* scrolling so we can use it to switch images instead. */
|
|
// if(Prototype.BrowserFeatures.Touchscreen && this.image_dragger)
|
|
/* MI: Using Prototype.BrowserIsMobile instead. */
|
|
if (Prototype.BrowserIsMobile && this.image_dragger)
|
|
this.image_dragger.set_disabled(!b);
|
|
|
|
/* Only allow dragging to create new frames when not viewing the large version,
|
|
* since we need to be able to drag the image. */
|
|
if(this.frame_editor)
|
|
{
|
|
this.frame_editor.set_drag_to_create(!b);
|
|
this.frame_editor.set_show_corner_drag(!b);
|
|
}
|
|
}
|
|
|
|
BrowserView.prototype.set_main_image = function(post, post_frame, from_toggle_zoom) // Pop.
|
|
{
|
|
/*
|
|
* Clear the previous post, if any. Don't keep the old IMG around; create a new one, or
|
|
* we may trigger long-standing memory leaks in WebKit, eg.:
|
|
* https://bugs.webkit.org/show_bug.cgi?id=31253
|
|
*
|
|
* This also helps us avoid briefly displaying the old image with the new dimensions, which
|
|
* can otherwise take some hoop jumping to prevent.
|
|
*/
|
|
if(this.img != null)
|
|
{
|
|
this.img.stopObserving();
|
|
this.img.parentNode.removeChild(this.img);
|
|
this.image_pool.release(this.img);
|
|
this.img = null;
|
|
}
|
|
|
|
/* If this post is blacklisted, show a message instead of displaying it. */
|
|
var hide_post = Post.is_blacklisted(post.id) && post.id != this.blacklist_override_post_id;
|
|
this.container.down(".blacklisted-message").show(hide_post);
|
|
if(hide_post)
|
|
return;
|
|
|
|
this.img = this.image_pool.get();
|
|
this.img.className = "main-image";
|
|
|
|
if(this.canvas)
|
|
this.canvas.hide();
|
|
this.img.show();
|
|
|
|
/*
|
|
* Work around an iPhone bug. If a touchstart event is sent to this.img, and then
|
|
* (due to a swipe gesture) we remove the image and replace it with a new one, no
|
|
* touchend is ever delivered, even though it's the containing box listening to the
|
|
* event. Work around this by setting the image to pointer-events: none, so clicks on
|
|
* the image will actually be sent to the containing box directly.
|
|
*/
|
|
this.img.setStyle({pointerEvents: "none"});
|
|
|
|
this.img.on("load", this.image_loaded_event.bindAsEventListener(this));
|
|
|
|
if (!from_toggle_zoom && this.large_by_default)
|
|
this.viewing_larger_version = true
|
|
|
|
this.img.fully_loaded = false;
|
|
if(post_frame != -1 && post_frame < post.frames.length)
|
|
{
|
|
var frame = post.frames[post_frame];
|
|
this.img.src = frame.url;
|
|
this.img_box.original_width = frame.width;
|
|
this.img_box.original_height = frame.height;
|
|
this.img_box.show();
|
|
}
|
|
else if(this.viewing_larger_version && post.jpeg_url)
|
|
{
|
|
this.img.src = post.jpeg_url;
|
|
this.img_box.original_width = post.jpeg_width;
|
|
this.img_box.original_height = post.jpeg_height;
|
|
this.img_box.show();
|
|
}
|
|
else if(!this.viewing_larger_version && post.sample_url)
|
|
{
|
|
this.img.src = post.sample_url;
|
|
this.img_box.original_width = post.sample_width;
|
|
this.img_box.original_height = post.sample_height;
|
|
this.img_box.show();
|
|
}
|
|
else
|
|
{
|
|
/* Having no sample URL is an edge case, usually from deleted posts. Keep the number
|
|
* of code paths smaller by creating the IMG anyway, but not showing it. */
|
|
this.img_box.hide();
|
|
}
|
|
|
|
this.container.down(".image-box").appendChild(this.img);
|
|
|
|
if(this.viewing_larger_version)
|
|
{
|
|
this.navigator.set_image(post.preview_url, post.actual_preview_width, post.actual_preview_height);
|
|
this.navigator.set_autohide(!this.post_ui_visible);
|
|
}
|
|
this.navigator.enable(this.viewing_larger_version);
|
|
|
|
this.scale_and_position_image();
|
|
|
|
}
|
|
|
|
/*
|
|
* Display post_id. If post_frame is not null, set the specified frame.
|
|
*
|
|
* If no_hash_change is true, the UrlHash will not be updated to reflect the new post.
|
|
* This should be used when this is called to load the post already reflected by the
|
|
* URL hash. For example, the hash "#/pool:123" shows pool 123 in the thumbnails and
|
|
* shows its first post in the view. It should *not* change the URL hash to reflect
|
|
* the actual first post (eg. #12345/pool:123). This will insert an unwanted history
|
|
* state in the browser, so the user has to go back twice to get out.
|
|
*
|
|
* no_hash_change should also be set when loading a state as a result of hashchange,
|
|
* for similar reasons.
|
|
*/
|
|
BrowserView.prototype.set_post = function(post_id, post_frame, lazy, no_hash_change, replace_history)
|
|
{
|
|
if(post_id == null)
|
|
throw "post_id must not be null";
|
|
|
|
/* If there was a lazy load pending, cancel it. */
|
|
this.cancel_lazily_load();
|
|
|
|
this.wanted_post_id = post_id;
|
|
this.wanted_post_frame = post_frame;
|
|
this.wanted_post_no_hash_change = no_hash_change;
|
|
this.wanted_post_replace_history = replace_history;
|
|
|
|
if(post_id == this.displayed_post_id && post_frame == this.displayed_post_frame)
|
|
return;
|
|
|
|
/* If a lazy load was requested and we're not yet loading the image for this post,
|
|
* delay loading. */
|
|
var is_cached = this.last_preload_request_active && this.post_frame_list_includes(this.last_preload_request, post_id, post_frame);
|
|
if(lazy && !is_cached)
|
|
{
|
|
this.lazy_load_timer = window.setTimeout(function() {
|
|
this.lazy_load_timer = null;
|
|
this.set_post(this.wanted_post_id, this.wanted_post_frame, false, this.wanted_post_no_hash_change, this.wanted_post_replace_history);
|
|
}.bind(this), 500);
|
|
return;
|
|
}
|
|
|
|
this.hide_frame_editor();
|
|
|
|
var post = Post.posts.get(post_id);
|
|
if(post == null)
|
|
{
|
|
/* The post we've been asked to display isn't loaded. Request a load and come back. */
|
|
if(this.displayed_post_id == null)
|
|
this.container.down(".post-info").hide();
|
|
|
|
this.load_post_id_data(post_id);
|
|
return;
|
|
}
|
|
|
|
if(post_frame == null) {
|
|
// If post_frame is unspecified and we have a frame, display the first.
|
|
post_frame = this.get_default_post_frame(post_id);
|
|
|
|
// We know what frame we actually want to display now, so update wanted_post_frame.
|
|
this.wanted_post_frame = post_frame;
|
|
}
|
|
|
|
/* If post_frame doesn't exist, just display the main post. */
|
|
if(post_frame != -1 && post.frames.length <= post_frame)
|
|
post_frame = -1;
|
|
|
|
this.displayed_post_id = post_id;
|
|
this.displayed_post_frame = post_frame;
|
|
if(!no_hash_change) {
|
|
var post_frame_hash = this.get_post_frame_hash(post, post_frame);
|
|
UrlHash.set_deferred({"post-id": post_id, "post-frame": post_frame_hash}, replace_history);
|
|
}
|
|
|
|
this.set_viewing_larger_version(false);
|
|
|
|
this.set_main_image(post, post_frame);
|
|
|
|
if(this.vote_widget) {
|
|
if (this.vote_widget.post_id) {
|
|
Post.votes.set(this.vote_widget.post_id, this.vote_widget.data.vote);
|
|
Post.posts.get(this.vote_widget.post_id).score = this.vote_widget.data.score;
|
|
}
|
|
this.vote_widget.post_id = post.id;
|
|
this.vote_widget.updateWidget(Post.votes.get(post.id), post.score);
|
|
};
|
|
if(this.popup_vote_widget) {
|
|
this.popup_vote_widget.post_id = post.id;
|
|
this.popup_vote_widget.updateWidget(Post.votes.get(post.id), post.score);
|
|
};
|
|
|
|
document.fire("viewer:displayed-post-changed", { post_id: post_id, post_frame: post_frame });
|
|
|
|
this.set_post_info();
|
|
|
|
/* Hide the editor when changing posts. */
|
|
this.edit_show(false);
|
|
}
|
|
|
|
/* Return the frame spec for the hash, eg. "-0".
|
|
*
|
|
* If the post has no frames, then just omit the frame spec. If the post has any frames,
|
|
* then return the frame number or "-F" for the full image. */
|
|
BrowserView.prototype.post_frame_hash = function(post, post_frame)
|
|
{
|
|
if(post.frames.length == 0)
|
|
return "";
|
|
return "-" + (post_frame == -1? "F":post_frame);
|
|
}
|
|
|
|
/* Return the default frame to display for the given post. If the post isn't loaded,
|
|
* we don't know which frame we'll display and null will be returned. This corresponds
|
|
* to a hash of #1234, where no frame is specified (eg. #1234-F, #1234-0). */
|
|
BrowserView.prototype.get_default_post_frame = function(post_id)
|
|
{
|
|
var post = Post.posts.get(post_id);
|
|
if(post == null)
|
|
return null;
|
|
|
|
return post.frames.length > 0? 0: -1;
|
|
}
|
|
|
|
BrowserView.prototype.get_post_frame_hash = function(post, post_frame)
|
|
{
|
|
/*
|
|
* Omitting the frame in the hash selects the default frame: the first frame if any,
|
|
* otherwise the full image. If we're setting the hash to a post_frame which would be
|
|
* selected by this default, omit the frame so this default is used. For example, if
|
|
* post #1234 has one frame and post_frame is 0, it would be selected by the default,
|
|
* so omit the frame and use a hash of #1234, not #1234-0.
|
|
*
|
|
* This helps normalize the hash. Otherwise, loading /#1234 will update the hash to
|
|
* /#1234-in set_post, causing an unwanted history entry.
|
|
*/
|
|
var default_frame = post.frames.length > 0? 0:-1;
|
|
if(post_frame == default_frame)
|
|
return null;
|
|
else
|
|
return post_frame;
|
|
}
|
|
/* Set the post info box for the currently displayed post. */
|
|
BrowserView.prototype.set_post_info = function()
|
|
{
|
|
var post = Post.posts.get(this.displayed_post_id);
|
|
if(!post)
|
|
return;
|
|
|
|
this.container.down(".post-id").setTextContent(post.id);
|
|
this.container.down(".post-id-link").href = "/post/show/" + post.id;
|
|
this.container.down(".posted-by").show();
|
|
this.container.down(".posted-at").setTextContent(time_ago_in_words(new Date(post.created_at*1000)));
|
|
|
|
/* Fill in the pool list. */
|
|
var pool_info = this.container.down(".pool-info");
|
|
while(pool_info.firstChild)
|
|
pool_info.removeChild(pool_info.firstChild);
|
|
if(post.pool_posts)
|
|
{
|
|
post.pool_posts.each(function(pp) {
|
|
var pool_post = pp[1];
|
|
var pool_id = pool_post.pool_id;
|
|
var pool = Pool.pools.get(pool_id);
|
|
|
|
var pool_title = pool.name.replace(/_/g, " ");
|
|
var sequence = pool_post.sequence;
|
|
if(sequence.match(/^[0-9]/))
|
|
sequence = "#" + sequence;
|
|
|
|
var html =
|
|
'<div class="pool-info">Post ${sequence} in <a class="pool-link" href="/post/browse#/pool:${pool_id}">${desc}</a> ' +
|
|
'(<a target="_blank" href="/pool/show/${pool_id}">pool page</a>)';
|
|
|
|
if(Pool.can_edit_pool(pool))
|
|
html += '<span class="advanced-editing"> (<a href="#" class="remove-pool-from-post">remove</a>)</div></span>';
|
|
|
|
var div = html.subst({
|
|
sequence: sequence,
|
|
pool_id: pool_id,
|
|
desc: pool_title.escapeHTML()
|
|
}).createElement();
|
|
|
|
div.post_id = post.id;
|
|
div.pool_id = pool_id;
|
|
|
|
pool_info.appendChild(div);
|
|
}.bind(this));
|
|
}
|
|
|
|
if(post.creator_id != null)
|
|
{
|
|
this.container.down(".posted-by").down("A").href = "/user/show/" + post.creator_id;
|
|
this.container.down(".posted-by").down("A").setTextContent(post.author);
|
|
} else {
|
|
this.container.down(".posted-by").down("A").href = "#"
|
|
this.container.down(".posted-by").down("A").setTextContent('Anonymous');
|
|
}
|
|
|
|
this.container.down(".post-dimensions").setTextContent(post.width + "x" + post.height);
|
|
this.container.down(".post-source").show(post.source != "");
|
|
if(post.source != "")
|
|
{
|
|
var text = post.source;
|
|
var url = null;
|
|
|
|
var m = post.source.match(/^http:\/\/.*pixiv\.net\/(img\d+\/)?img\/(\w+)\/(\d+)(_.+)?\.\w+$/);
|
|
if(m)
|
|
{
|
|
text = "pixiv #" + m[3] + " (" + m[2] + ")";
|
|
url = "http://www.pixiv.net/member_illust.php?mode=medium&illust_id=" + m[3];
|
|
}
|
|
else if(post.source.substr(0, 7) == "http://")
|
|
{
|
|
text = text.substr(7);
|
|
if(text.substr(0, 4) == "www.")
|
|
text = text.substr(4);
|
|
if(text.length > 20)
|
|
text = text.substr(0, 20) + "...";
|
|
url = post.source;
|
|
}
|
|
|
|
var source_box = this.container.down(".post-source");
|
|
|
|
source_box.down("A").show(url != null);
|
|
source_box.down("SPAN").show(url == null);
|
|
if(url)
|
|
{
|
|
source_box.down("A").href = url;
|
|
source_box.down("A").setTextContent(text);
|
|
}
|
|
else
|
|
{
|
|
source_box.down("SPAN").setTextContent(text);
|
|
}
|
|
|
|
}
|
|
|
|
if(post.frames.length > 0)
|
|
{
|
|
/* Hide this with a class rather than by changing display, so show_frame_editor
|
|
* and hide_frame_editor can hide and unhide this separately. */
|
|
this.container.down(".post-frames").removeClassName("no-frames");
|
|
|
|
var frame_list = this.container.down(".post-frame-list");
|
|
while(frame_list.firstChild)
|
|
frame_list.removeChild(frame_list.firstChild);
|
|
|
|
for(var i = -1; i < post.frames.length; ++i)
|
|
{
|
|
var text = i == -1? "main": (i+1);
|
|
|
|
var a = document.createElement("a");
|
|
a.href = "/post/browse#" + post.id + this.post_frame_hash(post, i);
|
|
|
|
a.className = "post-frame-link";
|
|
if(this.displayed_post_frame == i)
|
|
a.className += " current-post-frame";
|
|
|
|
a.setTextContent(text);
|
|
a.post_frame = i;
|
|
frame_list.appendChild(a);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
this.container.down(".post-frames").addClassName("no-frames");
|
|
}
|
|
|
|
|
|
var ratings = {s: "Safe", q: "Questionable", e: "Explicit"};
|
|
this.container.down(".post-rating").setTextContent(ratings[post.rating]);
|
|
this.container.down(".post-score").setTextContent(post.score);
|
|
this.container.down(".post-hidden").show(!post.is_shown_in_index);
|
|
|
|
this.container.down(".post-info").show(this.post_ui_visible);
|
|
|
|
var file_extension = function(path)
|
|
{
|
|
var m = path.match(/.*\.([^.]+)/);
|
|
if(!m)
|
|
return "";
|
|
return m[1];
|
|
}
|
|
|
|
var has_sample = (post.sample_url != post.file_url);
|
|
var has_jpeg = (post.jpeg_url != post.file_url);
|
|
var has_image = post.file_url != null && !has_sample;
|
|
|
|
/* Hide the whole download-links box if there are no downloads available, usually
|
|
* because of a deleted post. */
|
|
this.container.down(".download-links").show(has_image || has_sample || has_jpeg);
|
|
|
|
this.container.down(".download-image").show(has_image);
|
|
if(has_image)
|
|
{
|
|
this.container.down(".download-image").href = post.file_url;
|
|
this.container.down(".download-image-desc").setTextContent(number_to_human_size(post.file_size) + " " + file_extension(post.file_url.toUpperCase()));
|
|
}
|
|
|
|
this.container.down(".download-jpeg").show(has_sample);
|
|
if(has_sample)
|
|
{
|
|
this.container.down(".download-jpeg").href = has_jpeg? post.jpeg_url: post.file_url;
|
|
var image_desc = number_to_human_size(has_jpeg? post.jpeg_file_size: post.file_size) /*+ " " + post.jpeg_width + "x" + post.jpeg_height*/ + " JPG";
|
|
this.container.down(".download-jpeg-desc").setTextContent(image_desc);
|
|
}
|
|
|
|
this.container.down(".download-png").show(has_jpeg);
|
|
if(has_jpeg)
|
|
{
|
|
this.container.down(".download-png").href = post.file_url;
|
|
var png_desc = number_to_human_size(post.file_size) /*+ " " + post.width + "x" + post.height*/ + " " + file_extension(post.file_url.toUpperCase());
|
|
this.container.down(".download-png-desc").setTextContent(png_desc);
|
|
}
|
|
|
|
/* For links that are handled by click events, try to set the href so that copying the
|
|
* link will give a similar effect. For example, clicking parent-post will call set_post
|
|
* to display it, and the href links to /post/browse#12345. */
|
|
var parent_post = this.container.down(".parent-post");
|
|
parent_post.show(post.parent_id != null);
|
|
if(post.parent_id)
|
|
parent_post.down("A").href = "/post/browse#" + post.parent_id;
|
|
|
|
var child_posts = this.container.down(".child-posts");
|
|
child_posts.show(post.has_children);
|
|
if(post.has_children)
|
|
child_posts.down("A").href = "/post/browse#/parent:" + post.id;
|
|
|
|
|
|
/* Create the tag links. */
|
|
var tag_span = this.container.down(".post-tags");
|
|
var first = true;
|
|
while(tag_span.firstChild)
|
|
tag_span.removeChild(tag_span.firstChild);
|
|
|
|
|
|
var tags_by_type = Post.get_post_tags_with_type(post);
|
|
tags_by_type.each(function(t) {
|
|
var tag = t[0];
|
|
var type = t[1];
|
|
|
|
var span = $(document.createElement("SPAN", ""));
|
|
span = $(span);
|
|
span.className = "tag-type-" + type;
|
|
|
|
var space = document.createTextNode(" ");
|
|
span.appendChild(space);
|
|
|
|
var a =
|
|
jQuery('<a>', {
|
|
text: tag,
|
|
href: "/post/browse#/" + tag,
|
|
class: "post-tag tag-type-" + type,
|
|
});
|
|
/* Break tags with <wbr>, so long tags can be wrapped. */
|
|
a.html(a.html().replace(/_/g, '_<wbr>'));
|
|
/* convert back to something Prototype or whatever can understand */
|
|
a = a[0];
|
|
a.tag_name = tag;
|
|
span.appendChild(a);
|
|
tag_span.appendChild(span);
|
|
});
|
|
|
|
var flag_post = this.container.down(".flag-button");
|
|
flag_post.show(post.status == "active");
|
|
|
|
this.container.down(".post-approve").show(post.status == "flagged" || post.status == "pending");
|
|
this.container.down(".post-delete").show(post.status != "deleted");
|
|
this.container.down(".post-undelete").show(post.status == "deleted");
|
|
|
|
var flagged = this.container.down(".flagged-info");
|
|
flagged.show(post.status == "flagged");
|
|
if(post.status == "flagged" && post.flag_detail)
|
|
{
|
|
var by = flagged.down(".by");
|
|
flagged.down(".flagged-by-box").show(post.flag_detail.user_id != null);
|
|
if(post.flag_detail.user_id != null)
|
|
{
|
|
by.setTextContent(post.flag_detail.flagged_by);
|
|
by.href = "/user/show/" + post.flag_detail.user_id;
|
|
}
|
|
|
|
var reason = flagged.down(".reason");
|
|
reason.setTextContent(post.flag_detail.reason);
|
|
}
|
|
|
|
/* Moderators can unflag images, and the person who flags an image can unflag it himself. */
|
|
var is_flagger = post.flag_detail && post.flag_detail.user_id == User.get_current_user_id();
|
|
var can_unflag = flagged && (User.is_mod_or_higher() || is_flagger);
|
|
flagged.down(".post-unflag").show(can_unflag);
|
|
|
|
var pending = this.container.down(".status-pending");
|
|
pending.show(post.status == "pending");
|
|
this.container.down(".pending-reason-box").show(post.flag_detail && post.flag_detail.reason);
|
|
if(post.flag_detail)
|
|
this.container.down(".pending-reason").setTextContent(post.flag_detail.reason);
|
|
|
|
var deleted = this.container.down(".status-deleted");
|
|
deleted.show(post.status == "deleted");
|
|
if(post.status == "deleted")
|
|
{
|
|
var by_container = deleted.down(".by-container");
|
|
by_container.show(post.flag_detail.flagged_by != null);
|
|
|
|
var by = by_container.down(".by");
|
|
by.setTextContent(post.flag_detail.flagged_by);
|
|
by.href = "/user/show/" + post.flag_detail.user_id;
|
|
|
|
var reason = deleted.down(".reason");
|
|
reason.setTextContent(post.flag_detail.reason);
|
|
}
|
|
|
|
this.container.down(".status-held").show(post.is_held);
|
|
var has_permission = User.get_current_user_id() == post.creator_id || User.is_mod_or_higher();
|
|
this.container.down(".activate-post").show(has_permission);
|
|
}
|
|
|
|
BrowserView.prototype.edit_show = function(shown)
|
|
{
|
|
var post = Post.posts.get(this.displayed_post_id);
|
|
if(!post)
|
|
shown = false;
|
|
|
|
if(!User.is_member_or_higher())
|
|
shown = false;
|
|
|
|
this.edit_shown = shown;
|
|
this.container.down(".post-tags-box").show(!shown);
|
|
this.container.down(".post-edit").show(shown);
|
|
if(!shown)
|
|
{
|
|
/* Revert all changes. */
|
|
this.frame_editor.discard();
|
|
return;
|
|
}
|
|
|
|
this.select_edit_box(".post-edit-main");
|
|
|
|
/* This returns [tag, tag type]. We only want the tag; we call this so we sort the
|
|
* tags consistently. */
|
|
var tags_by_type = Post.get_post_tags_with_type(post);
|
|
var tags = tags_by_type.pluck(0);
|
|
|
|
tags = tags.join(" ") + " ";
|
|
|
|
this.container.down(".edit-tags").old_value = tags;
|
|
this.container.down(".edit-tags").value = tags;
|
|
this.container.down(".edit-source").value = post.source;
|
|
this.container.down(".edit-parent").value = post.parent_id;
|
|
this.container.down(".edit-shown-in-index").checked = post.is_shown_in_index;
|
|
|
|
var rating_class = new Hash({ s: ".edit-safe", q: ".edit-questionable", e: ".edit-explicit" });
|
|
this.container.down(rating_class.get(post.rating)).checked = true;
|
|
|
|
this.edit_post_area_changed();
|
|
|
|
this.container.down(".edit-tags").focus();
|
|
}
|
|
|
|
/* Set the size of the tag edit area to the size of its contents. */
|
|
BrowserView.prototype.edit_post_area_changed = function()
|
|
{
|
|
var post_edit = this.container.down(".post-edit");
|
|
var element = post_edit.down(".edit-tags");
|
|
element.style.height = "0px";
|
|
element.style.height = element.scrollHeight + "px";
|
|
if(0)
|
|
{
|
|
var rating = null;
|
|
var source = null;
|
|
var parent_id = null;
|
|
element.value.split(" ").each(function(tag)
|
|
{
|
|
/* This mimics what the server side does; it does prevent metatags from using
|
|
* uppercase in source: metatags. */
|
|
tag = tag.toLowerCase();
|
|
/* rating:q or just q: */
|
|
var m = tag.match(/^(rating:)?([qse])$/);
|
|
if(m)
|
|
{
|
|
rating = m[2];
|
|
return;
|
|
}
|
|
|
|
var m = tag.match(/^(parent):([0-9]+)$/);
|
|
if(m)
|
|
{
|
|
if(m[1] == "parent")
|
|
parent_id = m[2];
|
|
}
|
|
|
|
var m = tag.match(/^(source):(.*)$/);
|
|
if(m)
|
|
{
|
|
if(m[1] == "source")
|
|
source = m[2];
|
|
}
|
|
}.bind(this));
|
|
|
|
debug("rating: " + rating);
|
|
debug("source: " + source);
|
|
debug("parent: " + parent_id);
|
|
}
|
|
}
|
|
|
|
BrowserView.prototype.edit_save = function()
|
|
{
|
|
var save_completed = function()
|
|
{
|
|
notice("Post saved");
|
|
|
|
/* If we're still showing the post we saved, hide the edit area. */
|
|
if(this.displayed_post_id == post_id)
|
|
this.edit_show(false);
|
|
}.bind(this);
|
|
var post_id = this.displayed_post_id;
|
|
|
|
/* If we're in the frame editor, save it. Don't save the hidden main editor. */
|
|
if(this.frame_editor)
|
|
{
|
|
if(this.frame_editor.is_opened())
|
|
{
|
|
this.frame_editor.save(save_completed);
|
|
return;
|
|
}
|
|
}
|
|
|
|
var edit_tags = this.container.down(".edit-tags");
|
|
var tags = edit_tags.value;
|
|
|
|
/* Opera doesn't blur the field automatically, even when we hide it later. */
|
|
edit_tags.blur();
|
|
|
|
/* Find which rating is selected. */
|
|
var rating_class = new Hash({ s: ".edit-safe", q: ".edit-questionable", e: ".edit-explicit" });
|
|
var selected_rating = "s";
|
|
rating_class.each(function(c) {
|
|
if(this.container.down(c[1]).checked)
|
|
selected_rating = c[0];
|
|
}.bind(this));
|
|
|
|
/* update_batch will give us updates for any related posts, as well as the one we're
|
|
* updating. */
|
|
Post.update_batch([{
|
|
id: post_id,
|
|
tags: this.container.down(".edit-tags").value,
|
|
old_tags: this.container.down(".edit-tags").old_value,
|
|
source: this.container.down(".edit-source").value,
|
|
parent_id: this.container.down(".edit-parent").value,
|
|
/* MI: Set value to int explicity, instead of bool, as it was converted to string,
|
|
* then to int, ending up as 0.
|
|
*/
|
|
is_shown_in_index: this.container.down(".edit-shown-in-index").checked ? 1 : 0,
|
|
rating: selected_rating
|
|
}], save_completed);
|
|
}
|
|
|
|
BrowserView.prototype.window_resize_event = function(e)
|
|
{
|
|
if(e.stopped)
|
|
return;
|
|
this.update_image_window_size();
|
|
this.scale_and_position_image(true);
|
|
}
|
|
|
|
BrowserView.prototype.toggle_view_large_image = function(from_toggle_zoom)/*Pop.*/
|
|
{
|
|
var post = Post.posts.get(this.displayed_post_id);
|
|
if(post == null)
|
|
return;
|
|
if(this.img == null)
|
|
return;
|
|
|
|
if(post.jpeg_url == post.sample_url)
|
|
{
|
|
/* There's no larger version to display. */
|
|
return;
|
|
}
|
|
|
|
/* Toggle between the sample and JPEG version. */
|
|
this.set_viewing_larger_version(!this.viewing_larger_version, from_toggle_zoom); // Pop.
|
|
this.set_main_image(post, null, from_toggle_zoom); // XXX frame // Pop.
|
|
}
|
|
|
|
/* this.image_window_size is the size of the area where the image is visible. */
|
|
BrowserView.prototype.update_image_window_size = function()
|
|
{
|
|
this.image_window_size = getWindowSize();
|
|
|
|
/* If the thumb bar is shown, exclude it from the window height and fit the image
|
|
* in the remainder. Since the bar is at the bottom, we don't need to do anything to
|
|
* adjust the top. */
|
|
this.image_window_size.height -= this.thumb_bar_height;
|
|
|
|
this.image_window_size.height = Math.max(this.image_window_size.height, 0); /* clamp to 0 if there's no space */
|
|
|
|
/* When the window size changes, update the navigator since the cursor will resize to
|
|
* match. */
|
|
this.update_navigator();
|
|
}
|
|
|
|
BrowserView.prototype.scale_and_position_image = function(resizing)
|
|
{
|
|
var img_box = this.img_box;
|
|
if(!this.img)
|
|
return;
|
|
var original_width = img_box.original_width;
|
|
var original_height = img_box.original_height;
|
|
|
|
var post = Post.posts.get(this.displayed_post_id);
|
|
if(!post)
|
|
{
|
|
debug("unexpected: displayed post " + this.displayed_post_id + " unknown");
|
|
return;
|
|
}
|
|
|
|
var window_size = this.image_window_size;
|
|
|
|
var ratio = 1.0;
|
|
if(!this.viewing_larger_version)
|
|
{
|
|
/* Zoom the image to fit the viewport. */
|
|
var ratio = window_size.width / original_width;
|
|
if (original_height * ratio > window_size.height)
|
|
ratio = window_size.height / original_height;
|
|
}
|
|
|
|
ratio *= Math.pow(0.9, this.zoom_level);
|
|
|
|
this.displayed_image_width = Math.round(original_width * ratio);
|
|
this.displayed_image_height = Math.round(original_height * ratio);
|
|
|
|
this.img.width = this.displayed_image_width;
|
|
this.img.height = this.displayed_image_height;
|
|
|
|
this.update_canvas();
|
|
|
|
if(this.frame_editor)
|
|
this.frame_editor.set_image_dimensions(this.displayed_image_width, this.displayed_image_height);
|
|
|
|
/* If we're resizing and showing the full-size image, don't snap the position
|
|
* back to the default. */
|
|
if(resizing && this.viewing_larger_version)
|
|
return;
|
|
|
|
var x = 0.5;
|
|
var y = 0.5;
|
|
if(this.viewing_larger_version)
|
|
{
|
|
/* Align the image to the top of the screen. */
|
|
y = this.image_window_size.height/2;
|
|
y /= this.displayed_image_height;
|
|
}
|
|
|
|
this.center_image_on(x, y);
|
|
}
|
|
|
|
/* x and y are [0,1]. */
|
|
BrowserView.prototype.update_navigator = function()
|
|
{
|
|
if(!this.navigator)
|
|
return;
|
|
if(!this.img)
|
|
return;
|
|
|
|
/* The coordinates of the image located at the top-left corner of the window: */
|
|
var scroll_x = -this.img_box.offsetLeft;
|
|
var scroll_y = -this.img_box.offsetTop;
|
|
|
|
/* The coordinates at the center of the window: */
|
|
x = scroll_x + this.image_window_size.width/2;
|
|
y = scroll_y + this.image_window_size.height/2;
|
|
|
|
var percent_x = x / this.displayed_image_width;
|
|
var percent_y = y / this.displayed_image_height;
|
|
|
|
var height_percent = this.image_window_size.height / this.displayed_image_height;
|
|
var width_percent = this.image_window_size.width / this.displayed_image_width;
|
|
this.navigator.image_position_changed(percent_x, percent_y, height_percent, width_percent);
|
|
}
|
|
|
|
/*
|
|
* If Canvas support is available, we can accelerate drawing.
|
|
*
|
|
* Most browsers are slow when resizing large images. In the best cases, it results in
|
|
* dragging the image around not being smooth (all browsers except Chrome). In the worst
|
|
* case it causes rendering the page to be very slow; in Chrome, drawing the thumbnail
|
|
* strip under a large resized image is unusably slow.
|
|
*
|
|
* If Canvas support is enabled, then once the image is fully loaded, blit the image into
|
|
* the canvas at the size we actually want to display it at. This avoids most scaling
|
|
* performance issues, because it's not rescaling the image constantly while dragging it
|
|
* around.
|
|
*
|
|
* Note that if Chrome fixes its slow rendering of boxes *over* the image, then this may
|
|
* be unnecessary for that browser. Rendering the image itself is very smooth; Chrome seems
|
|
* to prescale the image just once, which is what we're doing.
|
|
*
|
|
* Limitations:
|
|
* - If full-page zooming is being used, it'll still scale at runtime.
|
|
* - We blit the entire image at once. It's more efficient to blit parts of the image
|
|
* as necessary to paint, but that's a lot more work.
|
|
* - Canvas won't blit partially-loaded images, so we do nothing until the image is complete.
|
|
*/
|
|
BrowserView.prototype.update_canvas = function()
|
|
{
|
|
if(!this.img.fully_loaded)
|
|
{
|
|
debug("image incomplete; can't render to canvas");
|
|
return false;
|
|
}
|
|
|
|
if(!this.canvas)
|
|
return;
|
|
|
|
/* If the contents havn't changed, skip the blit. This happens frequently when resizing
|
|
* the window when not fitting the image to the screen. */
|
|
if(this.canvas.rendered_url == this.img.src &&
|
|
this.canvas.width == this.displayed_image_width &&
|
|
this.canvas.height == this.displayed_image_height)
|
|
{
|
|
// debug(this.canvas.rendered_url + ", " + this.canvas.width + ", " + this.canvas.height)
|
|
// debug("Skipping canvas blit");
|
|
return;
|
|
}
|
|
|
|
this.canvas.rendered_url = this.img.src;
|
|
this.canvas.width = this.displayed_image_width;
|
|
this.canvas.height = this.displayed_image_height;
|
|
var ctx = this.canvas.getContext("2d");
|
|
ctx.drawImage(this.img, 0, 0, this.displayed_image_width, this.displayed_image_height);
|
|
this.canvas.show();
|
|
this.img.hide();
|
|
|
|
return true;
|
|
}
|
|
|
|
|
|
BrowserView.prototype.center_image_on = function(percent_x, percent_y)
|
|
{
|
|
var x = percent_x * this.displayed_image_width;
|
|
var y = percent_y * this.displayed_image_height;
|
|
|
|
var scroll_x = x - this.image_window_size.width/2;
|
|
scroll_x = Math.round(scroll_x);
|
|
|
|
var scroll_y = y - this.image_window_size.height/2;
|
|
scroll_y = Math.round(scroll_y);
|
|
|
|
this.img_box.setStyle({left: -scroll_x + "px", top: -scroll_y + "px"});
|
|
|
|
this.update_navigator();
|
|
}
|
|
|
|
BrowserView.prototype.cancel_lazily_load = function()
|
|
{
|
|
if(this.lazy_load_timer == null)
|
|
return;
|
|
|
|
window.clearTimeout(this.lazy_load_timer);
|
|
this.lazy_load_timer = null;
|
|
}
|
|
|
|
/* Update the window title when the display changes. */
|
|
WindowTitleHandler = function()
|
|
{
|
|
this.searched_tags = "";
|
|
this.post_id = null;
|
|
this.post_frame = null;
|
|
this.pool = null;
|
|
|
|
document.on("viewer:searched-tags-changed", function(e) {
|
|
this.searched_tags = e.memo.tags || "";
|
|
this.update();
|
|
}.bindAsEventListener(this));
|
|
|
|
document.on("viewer:displayed-post-changed", function(e) {
|
|
this.post_id = e.memo.post_id;
|
|
this.post_frame = e.memo.post_id;
|
|
this.update();
|
|
}.bindAsEventListener(this));
|
|
|
|
document.on("viewer:displayed-pool-changed", function(e) {
|
|
this.pool = e.memo.pool;
|
|
this.update();
|
|
}.bindAsEventListener(this));
|
|
|
|
this.update();
|
|
}
|
|
|
|
WindowTitleHandler.prototype.update = function()
|
|
{
|
|
var post = Post.posts.get(this.post_id);
|
|
|
|
if(this.pool)
|
|
{
|
|
var title = this.pool.name.replace(/_/g, " ");
|
|
|
|
if(post && post.pool_posts)
|
|
{
|
|
var pool_post = post.pool_posts.get(this.pool.id);
|
|
if(pool_post)
|
|
{
|
|
var sequence = pool_post.sequence;
|
|
title += " ";
|
|
if(sequence.match(/^[0-9]/))
|
|
title += "#";
|
|
title += sequence;
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
var title = "/" + this.searched_tags.replace(/_/g, " ");
|
|
}
|
|
|
|
title += " - Browse";
|
|
document.title = title;
|
|
}
|
|
|
|
BrowserView.prototype.parent_post_click_event = function(event)
|
|
{
|
|
event.stop();
|
|
|
|
var post = Post.posts.get(this.displayed_post_id);
|
|
if(post == null || post.parent_id == null)
|
|
return;
|
|
|
|
this.set_post(post.parent_id);
|
|
}
|
|
|
|
BrowserView.prototype.child_posts_click_event = function(event)
|
|
{
|
|
event.stop();
|
|
|
|
/* Search for this post's children. Set the results mode to center-on-current, so we
|
|
* focus on the current item. */
|
|
document.fire("viewer:perform-search", {
|
|
tags: "parent:" + this.displayed_post_id,
|
|
results_mode: "center-on-current"
|
|
});
|
|
}
|
|
|
|
BrowserView.prototype.select_edit_box = function(className)
|
|
{
|
|
if(this.shown_edit_container)
|
|
this.shown_edit_container.hide();
|
|
this.shown_edit_container = this.container.down(className);
|
|
this.shown_edit_container.show();
|
|
}
|
|
|
|
BrowserView.prototype.show_frame_editor = function()
|
|
{
|
|
this.select_edit_box(".frame-editor");
|
|
|
|
/* If we're displaying a frame and not the whole image, switch to the main image. */
|
|
var post_frame = null;
|
|
if(this.displayed_post_frame != -1)
|
|
{
|
|
post_frame = this.displayed_post_frame;
|
|
document.fire("viewer:set-active-post", {post_id: this.displayed_post_id, post_frame: -1});
|
|
}
|
|
|
|
this.frame_editor.open(this.displayed_post_id);
|
|
this.container.down(".post-frames").hide();
|
|
|
|
/* If we were on a frame when opened, focus the frame we were on. Otherwise,
|
|
* leave it on the default. */
|
|
if(post_frame != null)
|
|
this.frame_editor.focus(post_frame);
|
|
}
|
|
|
|
BrowserView.prototype.hide_frame_editor = function()
|
|
{
|
|
this.frame_editor.discard();
|
|
this.container.down(".post-frames").show();
|
|
}
|
|
|
|
var Navigator = function(container, target)
|
|
{
|
|
this.container = container;
|
|
this.target = target;
|
|
this.hovering = false;
|
|
this.autohide = false;
|
|
this.img = this.container.down(".image-navigator-img");
|
|
this.container.show();
|
|
|
|
this.handlers = [];
|
|
this.handlers.push(this.container.on("mousedown", this.mousedown_event.bindAsEventListener(this)));
|
|
this.handlers.push(this.container.on("mouseover", this.mouseover_event.bindAsEventListener(this)));
|
|
this.handlers.push(this.container.on("mouseout", this.mouseout_event.bindAsEventListener(this)));
|
|
|
|
this.dragger = new DragElement(this.container, {
|
|
snap_pixels: 0,
|
|
onenddrag: this.enddrag.bind(this),
|
|
ondrag: this.ondrag.bind(this)
|
|
});
|
|
}
|
|
|
|
Navigator.prototype.set_image = function(image_url, width, height)
|
|
{
|
|
this.img.src = image_url;
|
|
this.img.width = width;
|
|
this.img.height = height;
|
|
}
|
|
|
|
Navigator.prototype.enable = function(enabled)
|
|
{
|
|
this.container.show(enabled);
|
|
}
|
|
|
|
Navigator.prototype.mouseover_event = function(e)
|
|
{
|
|
if(e.relatedTarget && e.relatedTarget.isParentNode(this.container))
|
|
return;
|
|
debug("over " + e.target.className + ", " + this.container.className + ", " + e.target.isParentNode(this.container));
|
|
this.hovering = true;
|
|
this.update_visibility();
|
|
}
|
|
|
|
Navigator.prototype.mouseout_event = function(e)
|
|
{
|
|
if(e.relatedTarget && e.relatedTarget.isParentNode(this.container))
|
|
return;
|
|
debug("out " + e.target.className);
|
|
this.hovering = false;
|
|
this.update_visibility();
|
|
}
|
|
|
|
Navigator.prototype.mousedown_event = function(e)
|
|
{
|
|
var x = e.pointerX();
|
|
var y = e.pointerY();
|
|
var coords = this.get_normalized_coords(x, y);
|
|
this.center_on_position(coords);
|
|
}
|
|
|
|
Navigator.prototype.enddrag = function(e)
|
|
{
|
|
this.shift_lock_anchor = null;
|
|
this.locked_to_x = null;
|
|
this.update_visibility();
|
|
}
|
|
|
|
Navigator.prototype.ondrag = function(e)
|
|
{
|
|
var coords = this.get_normalized_coords(e.x, e.y);
|
|
if(e.latest_event.shiftKey != (this.shift_lock_anchor != null))
|
|
{
|
|
/* The shift key has been pressed or released. */
|
|
if(e.latest_event.shiftKey)
|
|
{
|
|
/* The shift key was just pressed. Remember the position we were at when it was
|
|
* pressed. */
|
|
this.shift_lock_anchor = [coords[0], coords[1]];
|
|
}
|
|
else
|
|
{
|
|
/* The shift key was released. */
|
|
this.shift_lock_anchor = null;
|
|
this.locked_to_x = null;
|
|
}
|
|
}
|
|
|
|
this.center_on_position(coords);
|
|
}
|
|
|
|
Navigator.prototype.image_position_changed = function(percent_x, percent_y, height_percent, width_percent)
|
|
{
|
|
/* When the image is moved or the visible area is resized, update the cursor rectangle. */
|
|
var cursor = this.container.down(".navigator-cursor");
|
|
cursor.setStyle({
|
|
top: this.img.height * (percent_y - height_percent/2) + "px",
|
|
left: this.img.width * (percent_x - width_percent/2) + "px",
|
|
width: this.img.width * width_percent + "px",
|
|
height: this.img.height * height_percent + "px"
|
|
});
|
|
}
|
|
|
|
Navigator.prototype.get_normalized_coords = function(x, y)
|
|
{
|
|
var offset = this.img.cumulativeOffset();
|
|
x -= offset.left;
|
|
y -= offset.top;
|
|
x /= this.img.width;
|
|
y /= this.img.height;
|
|
return [x, y];
|
|
|
|
}
|
|
|
|
/* x and y are absolute window coordinates. */
|
|
Navigator.prototype.center_on_position = function(coords)
|
|
{
|
|
if(this.shift_lock_anchor)
|
|
{
|
|
if(this.locked_to_x == null)
|
|
{
|
|
/* Only change the coordinate with the greater delta. */
|
|
var change_x = Math.abs(coords[0] - this.shift_lock_anchor[0]);
|
|
var change_y = Math.abs(coords[1] - this.shift_lock_anchor[1]);
|
|
|
|
/* Only lock to moving vertically or horizontally after we've moved a small distance
|
|
* from where shift was pressed. */
|
|
if(change_x > 0.1 || change_y > 0.1)
|
|
this.locked_to_x = change_x > change_y;
|
|
}
|
|
|
|
/* If we've chosen an axis to lock to, apply it. */
|
|
if(this.locked_to_x != null)
|
|
{
|
|
if(this.locked_to_x)
|
|
coords[1] = this.shift_lock_anchor[1];
|
|
else
|
|
coords[0] = this.shift_lock_anchor[0];
|
|
}
|
|
}
|
|
|
|
coords[0] = Math.max(0, Math.min(coords[0], 1));
|
|
coords[1] = Math.max(0, Math.min(coords[1], 1));
|
|
|
|
this.target.fire("viewer:center-on", {x: coords[0], y: coords[1]});
|
|
}
|
|
|
|
Navigator.prototype.set_autohide = function(autohide)
|
|
{
|
|
this.autohide = autohide;
|
|
this.update_visibility();
|
|
}
|
|
|
|
Navigator.prototype.update_visibility = function()
|
|
{
|
|
var box = this.container.down(".image-navigator-box");
|
|
var visible = !this.autohide || this.hovering || this.dragger.dragging;
|
|
box.style.visibility = visible? "visible":"hidden";
|
|
}
|
|
|
|
Navigator.prototype.destroy = function()
|
|
{
|
|
this.dragger.destroy();
|
|
|
|
this.handlers.each(function(h) { h.stop(); });
|
|
this.dragger = this.handlers = null;
|
|
|
|
this.container.hide();
|
|
}
|
|
|
|
|