SankakuAddon

Adds a few quality of life improvements on Sankaku Channel: 'Set Parent' mode, automatic image scaling, duplicate tagging/flagging, muting videos. Fully configurable using localStorage.
As of 2016-10-16. See the latest version.
Install this script ?
Ask a question, post a review, or report the script.
// ==UserScript==
// @name        SankakuAddon
// @namespace   SankakuAddon
// @description Adds a few quality of life improvements on Sankaku Channel: 'Set Parent' mode, automatic image scaling, duplicate tagging/flagging, muting videos. Fully configurable using localStorage.
// @include     http://chan.sankakucomplex.com/*
// @include     https://chan.sankakucomplex.com/*
// @include     http://idol.sankakucomplex.com/*
// @include     https://idol.sankakucomplex.com/*
// @run-at      document-start
// @version     0.95
// @grant       none
// ==/UserScript==

var version = "v0.95";

//IDEA hotkeys for quick access of different modes

//known bugs/limitations:
//#1 new modes are sometimes not at the last place in the dropdown menu
//#2 image scaling doesn't scale translation boxes
//flash videos cannot be muted


/***************************/
/* configuration functions */
/***************************/

const default_config = {
  scroll_to_image:true,
  scale_image:true, //and video
  scale_flash:false,
  scale_mode:0, //hardcoded exception
  scale_on_resize:false,
  video_mute:true,
  video_controls:true,
  setparent_deletepotentialduplicate:false,
  hide_headerlogo:false
};

const use_local_storage = (typeof(Storage) !== "undefined");
const key_prefix = "config.";

var config = JSON.parse(JSON.stringify(default_config));


//calls f(cfg_elem, key, get_value) for each existing config element
function foreach_config_element(f) {
  for (var key in config) {
    if (config.hasOwnProperty(key)) {
      var cfg_key = key_prefix + key;
      var cfg_elem = document.getElementById(cfg_key);
      if (cfg_elem === null) continue;

      (function(cfg_elem) {
        if (key === "scale_mode") { //hardcoded exception
          f(cfg_elem, key, function() { return cfg_elem.value; });
        } else {
          f(cfg_elem, key, function() { return cfg_elem.checked; });
        }
      })(cfg_elem);
    }
  }
}

function save_config(key, value) {
  if (!use_local_storage) {
    notice("addon: couldn't save setting \"" + key + " = " + value + "\" to local storage. check permissions.");
    return;
  }

  var cfg_key = key_prefix + key;
  localStorage.setItem(cfg_key, JSON.stringify(value));
}

function load_config() {
  for (var key in config) {
    if (config.hasOwnProperty(key)) {
      var value = config[key]; //default already loaded

      if (use_local_storage) {
        var cfg_key = key_prefix + key;
        var stored_value = localStorage.getItem(cfg_key);
        if (stored_value) value = JSON.parse(stored_value);
      }

      config_changed(key, value); //fire regardless
    }
  }
}

function local_storage_changed(e) {
  if (e.key.startsWith(key_prefix)) {
    var key = e.key.substring(key_prefix.length);
    var value = JSON.parse(e.newValue);

    config_changed(key, value);
  }
}

//event that is fired whenever a setting changes in the config dialog or the local storage
function config_changed(key, value) {
  config[key] = value;

  //update config dialog
  var cfg_key = key_prefix + key;
  var cfg_elem = document.getElementById(cfg_key);
  if (cfg_elem === null) {
    notice("addon error: couldn't find config element " + cfg_key + "!");
    return;
  }

  if (key === "scale_mode") { //hardcoded exception
    cfg_elem.value = config[key];
  } else {
    cfg_elem.checked = config[key];
  }

  //currently the only dynamic change
  if (key === "hide_headerlogo") hide_headerlogo(value);
}

function reset_config() {
  //clear local storage
  if (use_local_storage) {
    for (var key in config) {
      if (config.hasOwnProperty(key)) {
        var cfg_key = key_prefix + key;
        localStorage.removeItem(cfg_key);
      }
    }
  }

  for (var key in config) {
    if (config.hasOwnProperty(key)) {
      config_changed(key, default_config[key]);
    }
  }
}

function show_config_overlay(bool) {
  document.getElementById("cfg_overlay").style.display = (bool ? "" : "none");
}


/********************/
/* helper functions */
/********************/

function getScrollbarWidth() { //from Stack Overflow
  var outer = document.createElement("div");
  outer.style.visibility = "hidden";
  outer.style.width = "100px";
  outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

  document.body.appendChild(outer);

  var widthNoScroll = outer.offsetWidth;
  // force scrollbars
  outer.style.overflow = "scroll";

  // add innerdiv
  var inner = document.createElement("div");
  inner.style.width = "100%";
  outer.appendChild(inner);

  var widthWithScroll = inner.offsetWidth;

  // remove divs
  outer.parentNode.removeChild(outer);

  return widthNoScroll - widthWithScroll;
}

//helper function to modify nodes on creation
function register_observer(node_id, node_modifier) {
  var observer = new MutationObserver(function(mutations) {
    for (var i = 0; i < mutations.length; i++) {
      var mutationAddedNodes = mutations[i].addedNodes;
      for (var j = 0; j < mutationAddedNodes.length; j++) {
        var node = mutationAddedNodes[j];
        if (node.id && node.id == node_id) {
          node_modifier(node);
          observer.disconnect();
          return;
        }
      }
    }
  });
  observer.observe(document, {childList: true, subtree: true});
}


/*********************/
/* general functions */
/*********************/

var header_offset_height = null; //distance needed to scroll if headerlogo is hidden/shown


function hide_headerlogo(hide) {
  var headerlogo = document.getElementById("headerlogo");
  var visible = (headerlogo.style.display != "none");

  headerlogo.style.display = (hide ? "none" : "");

  //scroll if needed
  if (!!visible == !!hide) window.scrollBy(0, (visible && hide ? -1 : 1) * header_offset_height);
}


/***********************************************/
/* main page / visually similar page functions */
/***********************************************/

function add_mode_options(modeDropdown) {
  var option;
  if (modeDropdown.options.namedItem("choose-parent") === null) {
    option = document.createElement("option");
    option.text = "Choose Parent";
    option.value = "choose-parent";
    modeDropdown.add(option);
  }
  if (modeDropdown.options.namedItem("set-parent") === null) {
    option = document.createElement("option");
    option.text = "Set Parent";
    option.value = "set-parent";
    modeDropdown.add(option);
  }
}


/***********************/
/* post page functions */
/***********************/

//original post/parent ids
var post_id = null;
var parent_id = null;
//original image size
var img_width = null;
var img_height = null;
var img_aspect_ratio = null;
var resize_timer;

function reset_parent_id() {
  document.getElementById("post_parent_id").value = parent_id;
}

function get_old_tags_array() {
  return document.getElementById("post_old_tags").value.trim().split(/\s+/);
}

function get_tags_array() {
  return document.getElementById("post_tags").value.trim().split(/\s+/);
}

function add_tag(tag) {
  var tags = get_tags_array();

  if ((tag == "duplicate" && tags.indexOf("legitimate_variation") != -1) || (tag == "legitimate_variation" && tags.indexOf("duplicate") != -1)) {
    notice("addon: cannot tag as duplicate and legitimate_variation at the same time.");
    return;
  }

  if (tags.indexOf(tag) != -1) {
    notice("addon: tag already present.");
    return;
  }

  document.getElementById("post_tags").value += " " + tag;

  update_tag_buttons();
}

function remove_tag(tag) {
  var tags = get_tags_array();

  for (var i = 0; i < tags.length; i++) {
    if (tags[i] == tag) {
      tags[i] = "";
    }
  }

  document.getElementById("post_tags").value = tags.join(" ");

  update_tag_buttons();
}

function reset_tags() {
  document.getElementById("post_tags").value = document.getElementById("post_old_tags").value;
  update_tag_buttons();
}

function update_tag_buttons() {
  var taglist = document.getElementById("post_tags");
  var dup_button = document.getElementById("tag_dup_button");
  var var_button = document.getElementById("tag_var_button");
  var pot_button = document.getElementById("tag_pot_button");

  if (!taglist || !dup_button || !var_button || !pot_button) {
    notice("addon error: couldn't find tag buttons.");
    return;
  }

  var tags = get_tags_array();

  if (tags.indexOf("duplicate") == -1) {
    dup_button.onclick = function() {add_tag("duplicate"); return false;};
    dup_button.innerHTML = "Tag duplicate";
  } else {
    dup_button.onclick = function() {remove_tag("duplicate"); return false;};
    dup_button.innerHTML = "Untag duplicate";
  }

  if (tags.indexOf("legitimate_variation") == -1) {
    var_button.onclick = function() {add_tag("legitimate_variation"); return false;};
    var_button.innerHTML = "Tag legitimate_variation";
  } else {
    var_button.onclick = function() {remove_tag("legitimate_variation"); return false;};
    var_button.innerHTML = "Untag legitimate_variation";
  }

  pot_button.innerHTML = "Untag potential_duplicate";
  if (tags.indexOf("potential_duplicate") == -1) {
    pot_button.disabled = true;
  } else {
    pot_button.onclick = function() {remove_tag("potential_duplicate"); return false;};
    pot_button.disabled = false;
  }
}


//flag option with default text
function flag_duplicate(id, reason_suffix) {
  var current_parent_id = document.getElementById("post_parent_id").value;

  if (current_parent_id != parent_id) {
    notice("addon: parent id was changed but not saved!");
    return false;
  }

  if (!current_parent_id || current_parent_id.length === 0) {
    notice("addon: no parent id set!");
    return false;
  }

  var tags = get_tags_array();
  var old_tags = get_old_tags_array();
  if (tags.indexOf("duplicate") == -1 && old_tags.indexOf("duplicate") != -1) {
    notice("addon: duplicate tag set but not saved!");
    return false;
  }
  if (old_tags.indexOf("duplicate") == -1) {
    notice("addon: not tagged as duplicate!");
    return false;
  }

  if (old_tags.indexOf("legitimate_variation") != -1) {
    notice("addon: tagged as legitimate_variation, are you sure it is a duplicate?");
    return false;
  }

  var reason = prompt("Why should this post be reconsidered for moderation?", "duplicate of " + parent_id + reason_suffix);
  if (reason === null) {
    return false;
  }
  new Ajax.Request("/post/flag.json", {
    parameters: {
      "id": id,
      "reason": reason
    },
    onComplete: function(response) {
      var resp = response.responseJSON;
      if (resp.success) {
        notice("Post was resent to moderation queue");
      } else {
        notice("Error: " + resp.reason);
      }
    }
  });
}


//stretch image/video/flash
function scale_image(mode) {
  mode = Number(mode);
  if (isNaN(mode)) {
    notice("addon error: scaling mode wasn't a number?");
    return;
  }

  var flash = false;
  var obj, emb;

  var img = document.getElementById("image"); //image or video
  if (!img) {
    var non_image_content = document.getElementById("non-image-content");
    img = non_image_content.getElementsByTagName("object")[0];
    emb = non_image_content.getElementsByTagName("embed")[0];
    flash = img && emb;

    if (!flash || !config.scale_flash) return;
  }

  //save original image size
  if (img_width  === null)       img_width  = img.width;
  if (img_height === null)       img_height = img.height;
  if (img_aspect_ratio === null) img_aspect_ratio = img.width / img.height;

  //reset image size
  if (mode === -1) {
    if (!flash) {
      img.style.width  = null;
      img.style.height = null;
    } else {
      img.width  = img_width;
      img.height = img_height;
      emb.width  = img_width;
      emb.height = img_height;
    }
    return;
  }

  var scale = function(obj) {
    //target rect
    var img_rect_w = Math.max(window.innerWidth - img.getBoundingClientRect().left - getScrollbarWidth() - 1, 1);
    var img_rect_h = Math.max(window.innerHeight - 1, 1);
    var img_rect_aspect_ratio = img_rect_w / img_rect_h;

    //fit into window
    if (mode === 0) {
      mode = (img_aspect_ratio > img_rect_aspect_ratio ? 1 : 2);
    }

    //horizontal
    if (mode === 1) {
      obj.width  = Math.floor(img_rect_w) + "px";
      obj.height = Math.floor(img_rect_w / img_aspect_ratio) + "px";

      //vertical
    } else if (mode === 2) {
      obj.width  = Math.floor(img_rect_h * img_aspect_ratio) + "px";
      obj.height = Math.floor(img_rect_h) + "px";
    }
  };

  if (!flash) {
    scale(img.style);
  } else {
    scale(img);
    scale(emb);
  }
}

function scroll_to_image() {
  var img = document.getElementById("image");
  if (!img) img = document.getElementById("non-image-content");
  if (!img) return;
  img.scrollIntoView();
}


/******************/
/* document-start */
/******************/


/*************************************/
/* main page / visually similar page */
/*************************************/

if (location.pathname === "/" || location.pathname.startsWith("/post/similar")) {

  // add new modes right when dropdown is added to prevent it being reset to "view post" on page reloads
  register_observer("mode", function(node) { add_mode_options(node); });


/*************/
/* post page */
/*************/

} else if (location.pathname.startsWith("/post/show/")) {

  var mute_video = function(node) {
    if (node.nodeType !== Node.ELEMENT_NODE) return;
    if (node.tagName !== "VIDEO") return;

    if (config.video_mute)     node.muted = true;
    if (config.video_controls) node.controls = true;
  };

  register_observer("image", function(node) {
    mute_video(node);
  });

}




/******************/
/* content-loaded */
/******************/

document.addEventListener("DOMContentLoaded", function() {

  header_offset_height = document.getElementById("headerlogo").offsetHeight;


  //fix for flagged posts not always showing red border
  //problem: "flagged" style is defined before "has-parent" and "has-children" CSS styles, so these two take priority
  //fix: just add another copy of the "flagged" style at the end
  var sheet = document.createElement("style");
  sheet.innerHTML = "img.has-children {padding:0px;border:2px solid #A7DF38;} img.has-parent {padding:0px;border:2px solid #CCCC00;} img.flagged {padding: 0px; border: 2px solid #F00;}";
  document.body.appendChild(sheet);


  //add config overlay
  var cfg_overlay = document.createElement("div");
  cfg_overlay.style = "display:none; border:1px solid #DDD; top: 300px; width: 400px; height: 260px; position:fixed; left: 0; right: 0; margin: 0 auto; overflow: auto; background-color: white; z-index: 10001;";
  cfg_overlay.id = "cfg_overlay";
  cfg_overlay.innerHTML = ""
    + "<div style='display: table; position: absolute; height: 100%; width: 100%'>"
    + "<div style='display: table-cell; vertical-align: middle'>"
    + "<div style='padding: 8px; margin-left: auto; margin-right: auto;'>"
    +   "<b>Sankaku Addon "+version+"</b><br/>"
    +   "<hr style='margin-top: 0; margin-bottom: 2px; border:1px solid #DDD;'>"
    +   "<span>"
    +     "<input id='" + key_prefix + "scroll_to_image' type='checkbox'>"
    +     "<span>Scroll to image/video when opening post</span><br>"
    +   "</span>"
    +   "<span>"
    +     "<input id='" + key_prefix + "scale_image' type='checkbox'>"
    +     "<span>Scale image/video when opening post</span><br>"
    +   "</span>"
    +   "<span>"
    +     "<input id='" + key_prefix + "scale_flash' type='checkbox'>"
    +     "<span>Also scale flash videos</span><br>"
    +   "</span>"
    +   "<span>"
    +     "<input id='" + key_prefix + "scale_on_resize' type='checkbox'>"
    +     "<span title=\"This uses the 'scale image mode' setting, so it doesn't work well when using the manual scaling actions.\" style='cursor:help'>Scale image on window resize</span><br>"
    +   "</span>"
    +   "<span>"
    +     "<span>Scale image/video mode: </span>"
    +     "<select id='" + key_prefix + "scale_mode'>"
    +       "<option value=0>Fit to window</option>"
    +       "<option value=1>Fit horizontally</option>"
    +       "<option value=2>Fit vertically</option>"
    +     "</select>"
    +     "<br>"
    +   "</span>"
    +   "<span>"
    +     "<input id='" + key_prefix + "video_mute' type='checkbox'>"
    +     "<span>Mute (non-flash) videos*</span><br>"
    +   "</span>"
    +   "<span>"
    +     "<input id='" + key_prefix + "video_controls' type='checkbox'>"
    +     "<span>Show video controls*</span><br>"
    +   "</span>"
    +   "<span>"
    +     "<input id='" + key_prefix + "setparent_deletepotentialduplicate' type='checkbox'>"
    +     "<span>Delete potential_duplicate tag when using \"Set Parent\"</span><br>"
    +   "</span>"
    +   "<span>"
    +     "<input id='" + key_prefix + "hide_headerlogo' type='checkbox'>"
    +     "<span>Hide header logo</span><br>"
    +   "</span>"
    +   "<button id='config_close'>Close</button>"
    +   "<button id='config_reset'>Reset settings</button>"
    +   "<span>&nbsp;*requires a page reload.</span>"
    + "</div>"
    + "";
  document.body.appendChild(cfg_overlay);

  //add events
  document.getElementById("config_close").onclick = function() { show_config_overlay(false); return false; };
  document.getElementById("config_reset").onclick = function() { reset_config(); return false; };
  foreach_config_element(function(cfg_elem, key, get_value) {
    cfg_elem.addEventListener("change", function() {
      config_changed(key, get_value());
      save_config(key, get_value());
    });
  });

  //listen for config changes in other windows
  window.addEventListener("storage", local_storage_changed);

  //add config button to navbar
  var navbar = document.getElementById("navbar");
  if (navbar === null) {
    notice("addon error: couldn't find \"navbar\" element! Config dialog disabled.");
  } else {
    navbar.style.whiteSpace = "nowrap"; //hack to fit config button

    var a = document.createElement("A");
    a.href = "#";
    a.onclick = function() { show_config_overlay(true); return false; };
    a.innerHTML = "Addon config";
    a.style.fontSize = "110%";

    var newli = document.createElement("li");
    newli.className = "lang-select"; //
    newli.appendChild(a);
    navbar.appendChild(newli);
  }

  load_config();


  /*************************************/
  /* main page / visually similar page */
  /*************************************/

  if (location.pathname === "/" || location.pathname.startsWith("/post/similar")) {

    if (!PostModeMenu.old_change) PostModeMenu.old_change = PostModeMenu.change;
    if (!PostModeMenu.old_click)  PostModeMenu.old_click  = PostModeMenu.click;

    //add change events
    PostModeMenu.change = function() {
      var s = $F("mode");

      PostModeMenu.old_change();

      if (s == "apply-tag-script") {
        document.body.setStyle({
          backgroundColor: "#FDF" //weaken color intensity
        });
      } else if (s == "choose-parent") {
        document.body.setStyle({
          backgroundColor: "#FFD"
        });
      } else if (s == "set-parent") {
        if (Cookie.get("chosen-parent") === null) {
          notice("addon: Choose parent first!");
          $("mode").value = "choose-parent";
          PostModeMenu.change();
        } else {
          document.body.setStyle({
            backgroundColor: "#DFF"
          });
        }
      }
    };

    //add click events
    PostModeMenu.click = function(post_id) {

      if (PostModeMenu.old_click(post_id)) {
        return true;
      }

      var s = $("mode");

      if (s.value == "choose-parent") {
        Cookie.put("chosen-parent", post_id);
        $("mode").value = "set-parent";
        PostModeMenu.change();
      } else if (s.value == "set-parent") {
        var parent_id = Cookie.get("chosen-parent");
        TagScript.run(post_id, "parent:" + parent_id + (config.setparent_deletepotentialduplicate ? " -potential_duplicate" : ""));
      }
      return false;
    };

    //guarantee that 'mode' variable correctly changes to new modes when loading page
    PostModeMenu.change();


  /*************/
  /* post page */
  /*************/

  } else if (location.pathname.startsWith("/post/show/")) {

    var hidden_post_id = document.getElementById("hidden_post_id");
    if (hidden_post_id) {
      post_id = hidden_post_id.innerHTML;
    }

    var post_parent_id = document.getElementById("post_parent_id");
    if (post_parent_id) {
      parent_id = post_parent_id.value;
    }


    scale_image(config.scale_mode);
    if (config.scroll_to_image) scroll_to_image();

    window.addEventListener("resize", function() {
      clearTimeout(resize_timer);
      resize_timer = setTimeout(function() {
        if (config.scale_on_resize) scale_image(config.scale_mode);
      }, 100);
    });


    //add actions
    var li = document.getElementById("add-to-pool");
    if (li === null) {
      notice("addon error: couldn't find \"add-to-pool\" element! Addon actions disabled.");
      return;
    }

    if (document.getElementById("flag-duplicate") === null) {
      var actions_ul = li.parentElement;

      var seperator = document.createElement("H5");
      seperator.innerHTML = "Addon actions";
      var newli = document.createElement("li");
      newli.appendChild(seperator);
      actions_ul.appendChild(newli);

      var add_action = function(func, name, id) {
        var a = document.createElement("A");
        a.href = "#";
        a.onclick = function() {func(); return false;};
        a.innerHTML = name;

        var newli = document.createElement("li");
        newli.id = id;
        newli.appendChild(a);
        actions_ul.appendChild(newli);
      };

      add_action(function() { scale_image(0); scroll_to_image(); },  "Fit image",              "scale-image-fit");
      add_action(function() { scale_image(1); scroll_to_image(); },  "Fit image (Horizontal)", "scale-image-hor");
      add_action(function() { scale_image(2); scroll_to_image(); },  "Fit image (Vertical)",   "scale-image-ver");
      add_action(function() { scale_image(-1); scroll_to_image(); }, "Reset image size",       "reset-image");

      if (post_id !== null) {
        add_action(function() { flag_duplicate(post_id);                           }, "Flag duplicate",              "flag-duplicate");
        add_action(function() { flag_duplicate(post_id, ", visually identical");   }, "Flag duplicate (identical)",  "flag-duplicate-identical");
        add_action(function() { flag_duplicate(post_id, " with worse quality");    }, "Flag duplicate (quality)",    "flag-duplicate-quality");
        add_action(function() { flag_duplicate(post_id, " with worse resolution"); }, "Flag duplicate (resolution)", "flag-duplicate-resolution");
      }
    }


    //add tag buttons
    var edit_form = document.getElementById("edit-form");
    if (edit_form) {

      var button_place = edit_form.children[1].children[0].children[0].children[0];

      var el = document.createElement("BUTTON");
      el.id = "clear_parent_id_button";
      el.style = "margin: 0 3px 0 6px;";
      el.innerHTML = "Clear";
      el.onclick = function() { post_parent_id.clear(); return false;};
      post_parent_id.parentNode.appendChild(el);

      el = document.createElement("BUTTON");
      el.id = "reset_parent_id_button";
      el.style = "margin: 0 3px;";
      el.innerHTML = "Reset";
      el.onclick = function() { reset_parent_id(); return false;};
      post_parent_id.parentNode.appendChild(el);

      el = document.createElement("BUTTON");
      el.id = "tag_reset_button";
      el.style = "margin: 0 3px 0 6px;";
      el.innerHTML = "Reset";
      el.onclick = function() { reset_tags(); return false; };
      button_place.appendChild(el);

      el = document.createElement("BUTTON");
      el.id = "tag_dup_button";
      el.style = "margin: 0 3px;";
      button_place.appendChild(el);

      el = document.createElement("BUTTON");
      el.id = "tag_var_button";
      el.style = "margin: 0 3px;";
      button_place.appendChild(el);

      el = document.createElement("BUTTON");
      el.id = "tag_pot_button";
      el.style = "margin: 0 3px;";
      button_place.appendChild(el);

      update_tag_buttons();
    }

  }

}, false);