ign4/rf/i4m/m.js

mod_templates_4 = window.mod_templates_4 || $("")

// reload templates
function html_js_handler_lobby(rsp) {
	clog("html_js_handler_lobby",[...arguments])
	mod_templates_4 = $(`<span>${rsp}</span>`)
	clog("html_js_handler_lobby2")
	init_lobby()
	clog("html_js_handler_lobby3")
	// init_api6()
}




function init_lobby(){
	saftly_remove(".plugin_top.lobby_root")
	var lroot = mod_templates_4.find(".lobby_root")
	lr = $(lroot[0].outerHTML)
	clog("...",lr)
	// welcome_page
	// add_node
	// add_node(n,`.vid_toptoolbar_hook`,"append")
	// rooms_dir
	// lr.find(".rooms_dir")[0].style.height = "600px"
	add_node(lr,"#welcome_page","append")
	add_tiles()
	$(".arrow").click(arrow_click_cb)
	$(".tile_button").click(tile_button_cb)
	clog("init_lobby........")
	// $("#welcome_page").

}
function scroll_rt(n){
	var rooms_scroll = $(".rooms_dir_full")
	var room_tiles = rooms_scroll.children(".room_span")
	room_tiles[n].scrollIntoView({ behavior: 'smooth', block: 'nearest' ,inline:"nearest"})
	// room_span
	// vid.scrollIntoView({ behavior: 'smooth', block: 'nearest' ,inline:"nearest"})
}
function scroll_rt2(o){
	var rooms_scroll = $(".rooms_dir_full")
	var room_tiles = rooms_scroll.children(".room_span")
	var bcr
	var bcr_rooms
	var rooms_dir =  $(".rooms_dir")
	// rooms_scroll

	bcr_rooms = rooms_dir[0].getBoundingClientRect()
	// clog("~~~",bcr_rooms)
	var v_last 
	var r,l
	var r_,l_,r_2,l_2
	var c,c2,cr,cl,cr2,cl2
	var r2,l2


	var cr_n,cr_p,cl_n,cl_p
	var cr_nn,cr_pn,cl_nn,cl_pn

	cr_n = -Infinity
	cl_n = -Infinity
	cr_p = Infinity
	cl_p = Infinity
	cr_nn = ""
	cl_nn = ""
	cr_pn = ""
	cl_pn = ""



    $(".nxt").removeClass("nxt")
    $(".nxt_x").removeClass("nxt_x")
    $(".nxt0").removeClass("nxt0")
    $(".nxt1").removeClass("nxt1")
    $(".nxt2").removeClass("nxt2")
    $(".nxt3").removeClass("nxt3")
    for (v of room_tiles){
        bcr = v.getBoundingClientRect()
        // clog("...",bcr.left - bcr_rooms.left,bcr)
        // clog("...",bcr_rooms.left - bcr.left ,bcr)
        // clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,bcr)
        // r = bcr_rooms.right - bcr.right
        // l = bcr_rooms.left - bcr.left

        // r_ = bcr_rooms.right - bcr.left
        // l_ = bcr_rooms.left - bcr.right


        c = (bcr.right + bcr.left) / 2
        cr = bcr_rooms.right - c
        cl = bcr_rooms.left - c
        cl = c - bcr_rooms.left 


        if (cr < 0){
        	cr_n = Math.max(cr_n,cr)
        	cr_n == cr ? cr_nn = v : 0

        } else {
        	cr_p = Math.min(cr_p,cr)
        	cr_p == cr ? cr_pn = v : 0

        }

        if (cl < 0){
        	cl_n = Math.max(cl_n,cl)
        	cl_n == cl ? cl_nn = v : 0
        } else {
        	cl_p = Math.min(cl_p,cl)
        	cl_p == cl ? cl_pn = v : 0
        	
        }



        // r2 = r
        // l2 = l

        // r_2 = r_
        // l_2 = l_
        c2 = c
        cr2 = cr
        cl2 = cl




        // clog("...",bcr_rooms.right - bcr.right,bcr_rooms.left - bcr.left ,v)
        v_last = v
    }
    // $(cr_nn).addClass("nxt0")
    // $(cl_nn).addClass("nxt1")
    var scroll_n = ""

    if ($(o.that).hasClass("right")){
    	if (cr_nn){
    		scroll_n = cr_nn
    	} else {
    		scroll_n = cr_np

    	}
    } else if ($(o.that).hasClass("left")){
    	if (cl_nn){
    		scroll_n = cl_nn
    	} else {
    		scroll_n = cl_np
    		
    	}
    }
    if (scroll_n){
    	scroll_n.scrollIntoView({ behavior: 'smooth', block: 'nearest' ,inline:"nearest"})
    	// $(scroll_n).addClass("nxt_x")
    }
    // $(cr_pn).addClass("nxt2")
    // $(cl_pn).addClass("nxt3")


	// var bcr
}




function arrow_click_cb(e){
	scroll_rt2({that:this,e})

	// clog("arrow_click_cb",{that:this,e})
}
function tile_button_cb(e){

	var rspan = $(this).parents(".room_span")
	var room_name = rspan[0].dataset["room"]

	// clog("tile_button",rspan[0].dataset["room"],{that:this,e})
	// clog("nav",location.pathname + rspan[0].dataset["room"])
	if (!room_name){
		clog("<>")
		return 

	}
	location.assign(location.pathname + rspan[0].dataset["room"])

}

dj_tiles = [
{room:"fisher","img":"fisher.png","title":"Fisher"},
{room:"louis_the_child","img":"louis_the_child.png","title":"Louis The Child"},
{room:"petit_biscuit","img":"petit_biscuit.png","title":"Petit Biscuit"},
{room:"porter_robinson","img":"porter_robinson.png","title":"Porter Robinson"},
]

// $(".rxt")[0].style.cssText

function add_tiles(){
	var rtile = mod_templates_4.find(".room_span.rxt")
	var rtile2 = rtile[0].outerHTML
	var i,k,v,n
	i=0
	var djt 
	while (i < 10){

		n = $(rtile2)
		djt = dj_tiles[i]
				// url("/ign/rf/img/cropped_bak.jpg");
		if (djt){
			n.css({
				// "--vurl":`/ign/rf/artists/${djt["img"]}`,
				// "--vurl":`"/ign/rf/artists/${djt["img"]}"`,
				"--vurl":`url("/ign/rf/artists/${djt["img"]}")`,
				"--vtitle":`"${djt["title"]}"`,
			})
			clog("zz")
			// n[0].cssText += `--vurl:${djt["img"]};`
			// n[0].cssText += `--vtitle:"${djt["title"]}"`
		n.addClass(`rxz${i}`)
		n[0].dataset["room"] = djt["room"]
		}
		n.addClass(`rx${i}`)
		// add_node(n,".rooms_dir","append")
		add_node(n,".rooms_dir_full","append")
		i+=1
		clog("//",i)
	}
	resize_tiles()
	// set_width()

}


function set_width(){
	var rdf = $('.rooms_dir_full')
  // var totalWidth = 20;
  var totalWidth = 0;
	rdf.children().each(function(){
    totalWidth += $(this).outerWidth();
    totalWidth +=px_int($(this).css("margin-left") )
	totalWidth +=px_int($(this).css("margin-right"))

    // totalWidth += ?  :
    // totalWidth +=  ?  :
  });
     rdf.css('width', totalWidth);
}

function px_int(s){
	// totalWidth
	var a = s.split("px") 
	var ret = Number(a[0])
	ret = ret ? ret : 0
	return ret
}
// CLIENT_RESIZED
function resize_tiles(){
	try {

	var Height= window.innerHeight
	var Width= window.innerWidth
	var vheight0 = window.innerHeight - 230
	var vheight = window.innerHeight - 230
	vheight = Math.max(vheight,350)
	vheight = Math.min(Height,vheight)

	// if
	$(".rooms_dir").css({
		"--innerHeight":`${window.innerHeight}px`,
		"--vheight":`${vheight}px`,
		"--innerWidth":`${window.innerWidth}px`,
	})
	set_width()

	}catch(err){}
}
/*
$(document).ready(function(){
  var totalWidth = 0;
  $('#container').children().each(function(){
    totalWidth += $(this).outerWidth();
  });
  $('#container').css('width', totalWidth);
});
*/

glob_mx.qxi_cb["CLIENT_RESIZED"] = window.glob_mx.qxi_cb["CLIENT_RESIZED"] || {}

glob_mx.qxi_cb["CLIENT_RESIZED"].fn = resize_tiles


clog(".....2")

try {
setTimeout(init_lobby,1000)
init_lobby()
} catch (err) {
clog("err:",err)
}