jQuery(document).ready(function() {
if (jQuery(".post-read-more-image").length >= 1) { return };
let ids = '';
let image_loaded = 0;
let total_image = 0;
const exclude_classes = ".post-track, .wp-smiley, .emoji";
jQuery.fn.run_image_tagging = function(){
ids = '';
image_loaded = 0;
total_image = 0;
wrap_imgtag();
if (!ids) { return; }
fetch_tags();
}
jQuery(document).run_image_tagging();
//fetch_tags
//add_list
//render_list
//after_load_img
//calc_pos
//sync_tag_repos
//tag_repos
//append_delete_btn
jQuery(window).resize(repos);
jQuery.fn.repos_imgtag = function() {
var img = $(this[0])
img.parent().find(".tagview").each((_i, e) => {
const tagview = jQuery(e);
after_load_img(tagview, { x: tagview.data("x"), y: tagview.data("y"), w: tagview.data("w") });
})
return this;
};
function wrap_imgtag() {
jQuery(".the-post")
.filter(".blog_posts, .loop_post, .status-publish")
.not(":has(.image-tag)")
.each(function(index) {
const post_id = jQuery(this).data('id');
if (ids) { ids += ','}
ids += post_id;
jQuery(this)
.find("img[class*=wp-image], .blog-post-preview-image img")
.not(exclude_classes)
.each((i, e) => {
el = jQuery(e);
el.wrap("
");
pa = el.parent();
ul = jQuery('')
jQuery('', { class: "image-tagbox", id: "tagbox-" + post_id }).appendTo(pa)
jQuery('', { class: "image-taglist", id: "taglist-" + post_id }).append(ul).appendTo(pa)
jQuery('', { style: "clear:both" }).appendTo(pa)
})
});
}
function fetch_tags() {
const blog_id = jQuery("body").data("blog-id");
jQuery.get(
"/wp-content/themes/base/get_image_tags_all.php",
`cache=yes&blog_id=${blog_id}&post_ids=${ids}`,
(data) => {
const o = JSON.parse(data);
total_image += Object.keys(o).length;
jQuery.each(o, add_list);
}
);
}
function add_list(k, v){
const draw_d = draw_tagview(k, v)
if (!draw_d) {return}
const box_d = render_tagbox(draw_d.el, draw_d.value);
if (!draw_d || !box_d) { return };
render_list(draw_d.el, draw_d.value);
after_load_img(box_d.tagview, box_d.pos);
}
function repos() {
jQuery(".tagview").each((_i, e) => {
const tagview = jQuery(e);
after_load_img(tagview, { x: tagview.data("x"), y: tagview.data("y"), w: tagview.data("w") });
})
}
function draw_tagview(key, value) {
const decodedUri = decodeURIComponent(value["src"]);
const encodeUri = encodeURIComponent(value["src"])
const el = jQuery(`[data-lazy-src='${decodedUri}'], [src$='${decodedUri}'], [src$='${encodeUri}']`);
if (el.not(exclude_classes).length <=0 ) { return; }
if (!el.hasClass("tagged")) { el.addClass('tagged') }
return {el: el, value: value}
}
function render_list(el, value) {
const taglist_ul = el.parent(".image-tag").find(".image-taglist ul");
const link = jQuery('', { href: value['link'], target: "_blank", text: value['name'] });
const tagli = jQuery('', { id: value['id'] })
.append(link)
.data('post-id', value['post_id'])
.data('src', value['src'])
.appendTo(taglist_ul)
append_delete_btn(tagli);
if (value['in_taglist'] != 'false') { return }
tagli.css('display', "none")
}
function render_tagbox(el, value) {
const pos = {
x: parseFloat(value['pic_x']),
y: parseFloat(value['pic_y']),
w: parseFloat(value['img_width']),
link: value['link'],
id: value['id']
}
const image_tagbox = jQuery(el.parents(".image-tag").find(".image-tagbox"));
if (image_tagbox.length <= 0) { return; };
tagview = create_tagview(image_tagbox, pos);
return {pos: pos, tagview: tagview}
}
function create_tagview(image_tagbox, data) {
const dot = jQuery('', { class: "dot" });
const taglink = jQuery('', { class: "image-tag-link", href: data.link, target: "_blank" }).append(dot);
const tagview = jQuery('', { class: "tagview", id: 'view_' + data.id })
.addClass('tagview')
.data("x", data.x).data("y", data.y).data("w", data.w)
.append(taglink)
.appendTo(image_tagbox)
dot.data("dist", parseFloat(dot.css("left").replace("px", "")))
tagview.data("width", parseFloat(tagview.css("width")))
tagview.data("height", parseFloat(tagview.css("height")))
return tagview;
}
function after_load_img(tagview, pos) {
const frame = tagview.parents(".image-tag");
const img = frame.find('img[class*=wp-image], img.tagged');
if ([frame.length, img.length].includes(0)) { return };
if (img.prop('complete')) {
sync_tag_repos(tagview, calc_pos(frame, pos));
} else {
img.on("load", function() {
sync_tag_repos(tagview, calc_pos(frame, pos));
})
}
}
function sync_tag_repos(tagview, pos) {
tag_repos(tagview, pos);
image_loaded++;
}
function calc_pos(frame, pos) {
const img = frame.find('img[class*=wp-image], img.tagged')
const scale = img.outerWidth() / pos.w;
const offset_x = img.offset().left - frame.offset().left
const pos_x = pos.x * scale + offset_x;
const pos_y = pos.y * scale;
return { x: pos_x, y: pos_y, scale: scale };
}
function tag_repos(tagview, pos) {
const dot = tagview.find(".dot")
const dist = pos.scale * dot.data("dist")
dot.css("left", dist).css("top", dist)
tagview.css("left", pos.x + "px")
.css("top", pos.y + "px")
.css("width", pos.scale * tagview.data('width'))
.css("height", pos.scale * tagview.data('height'))
}
function append_delete_btn(li) {
if (!jQuery("#tagview-main").hasClass('logged-in')) { return }
li.append('(Fjern tag)');
}
})