blockbench/js/interface/interface.js

var app_colors;
const StartScreen = {};

//Panels
class Panel {
	constructor(data) {
		var scope = this;
		this.type = 'panel'
		this.id = data.id || 'new_panel'
		this.menu = data.menu
		this.title = data.title || tl('panel.'+this.id)
		this.condition = data.condition
		this.onResize = data.onResize
		this.node = $('.panel#'+this.id).get(0)// || $('<div class="panel" id="'+this.id+'"></div>')[0]
		if (data.toolbars) {
			this.toolbars = data.toolbars
		}
		this.handle = $('<h3 class="panel_handle">'+this.title+'</h3>').get(0)
		if (!Blockbench.isMobile) {
			$(this.handle).draggable({
				revertDuration: 0,
				cursorAt: { left: 24, top: 24 },
				helper: 'clone',
				revert: true,
				appendTo: 'body',
				zIndex: 19,
				scope: 'panel',
				start: function() {
					Interface.panel = scope;
				},
				stop: function(e, ui) {
					var target = Interface.panel
					if (typeof target === 'string') {
						scope.moveTo(target)
					} else if (target.type === 'panel') {
						var target_pos = $(target.node).offset().top
						var target_height = $(target.node).height()
						var before = ui.position.top < target_pos + target_height / 2
						if (target && target !== scope) {
							scope.moveTo(target, before)
						} else {
							if (e.clientX > window.innerWidth - 200) {
								scope.moveTo('right_bar')
							} else if (e.clientX < 200) {
								scope.moveTo('left_bar')
							}
						}
					}
					saveInterfaceRearrangement()
					updateInterface()
				}
			})
		}
		$(this.node)
			.droppable({
				accept: 'h3',
				scope: 'panel',
				tolerance: 'pointer',
				drop: function(e, ui) {
					Interface.panel = scope;
				}
			})
			.click((event) => {
				setActivePanel(this.id)
			})
			.contextmenu((event) => {
				setActivePanel(this.id)
			})
			.prepend(this.handle)
	}
	moveTo(ref_panel, before) {
		var scope = this
		if (typeof ref_panel === 'string') {
			if (ref_panel === 'left_bar') {
				$('#left_bar').append(scope.node)
			} else {
				$('#right_bar').append(scope.node)
			}
		} else {
			if (before) {
				$(ref_panel.node).before(scope.node)
			} else {
				$(ref_panel.node).after(scope.node)
			}
		}
		if (this.onResize) {
			this.onResize()
		}
		updateInterface()
	}
	update() {
		var show = BARS.condition(this.condition)
		if (show) {
			$(this.node).show()
			if (Interface.data.left_bar.includes(this.id)) {
				this.width = Interface.data.left_bar_width
			} else if (Interface.data.right_bar.includes(this.id)) {
				this.width = Interface.data.right_bar_width
			}
			if (this.onResize) this.onResize()
		} else {
			$(this.node).hide()
		}
	}
}
class ResizeLine {
	constructor(data) {
		var scope = this;
		this.id = data.id
		this.horizontal = data.horizontal === true
		this.position = data.position
		this.condition = data.condition
		this.width = 0;
		var jq = $('<div class="resizer '+(data.horizontal ? 'horizontal' : 'vertical')+'"></div>')
		this.node = jq.get(0)
		jq.draggable({
			axis: this.horizontal ? 'y' : 'y',
			containment: 'document',
			revert: true,
			start: function(e, u) {
				scope.before = data.get()
			},
			drag: function(e, u) {
				if (scope.horizontal) {
					data.set(scope.before, u.position.top - u.originalPosition.top)
				} else {
					data.set(scope.before, (e.clientX - u.position.left))
				}
				updateInterface()
			},
			stop: function(e, u) {
				updateInterface()
			}
		})
	}
	update() {
		if (BARS.condition(this.condition)) {
			$(this.node).show()
			if (this.position) {
				this.position(this)
			}
		} else {
			$(this.node).hide()
		}
	}
	setPosition(data) {
		var jq = $(this.node)
		jq.css('top', 	data.top 	!== undefined ? data.top+	'px' : '')
		jq.css('bottom',data.bottom !== undefined ? data.bottom+'px' : '')
		jq.css('left', 	data.left 	!== undefined ? data.left+	'px' : '')
		jq.css('right', data.right 	!== undefined ? data.right+	'px' : '')

		if (data.top !== undefined) {
			jq.css('top', data.top+'px')
		}
		if (data.bottom !== undefined && (!data.horizontal || data.top === undefined)) {
			jq.css('bottom', data.bottom+'px')
		}
		if (data.left !== undefined) {
			jq.css('left', data.left+'px')
		}
		if (data.right !== undefined && (data.horizontal || data.left === undefined)) {
			jq.css('right', data.right+'px')
		}
	}
}

var Interface = {
	default_data: {
		left_bar_width: 332,
		right_bar_width: 314,
		quad_view_x: 50,
		quad_view_y: 50,
		timeline_height: 260,
		left_bar: ['uv', 'textures', 'display', 'animations', 'keyframe', 'variable_placeholders'],
		right_bar: ['color', 'outliner', 'chat']
	},
	Resizers: {
		left: new ResizeLine({
			id: 'left',
			condition: function() {
				var i = 0;
				Interface.data.left_bar.forEach(p => {
					if (Interface.Panels[p] && BARS.condition(Interface.Panels[p].condition)) {i++;}
				})
				return i;
			},
			get: function() {return Interface.data.left_bar_width},
			set: function(o, diff) {
				Interface.data.left_bar_width = limitNumber(o + diff, 128, $(window).width()- 240 - Interface.data.right_bar_width)
			},
			position: function(line) {
				line.setPosition({
					top: 32,
					bottom: 0,
					left: Interface.data.left_bar_width-3
				})
			}
		}),
		right: new ResizeLine({
			id: 'right',
			condition: function() {
				var i = 0;
				Interface.data.right_bar.forEach(p => {
					if (Interface.Panels[p] && BARS.condition(Interface.Panels[p].condition)) {i++;}
				})
				return i;
			},
			get: function() {return Interface.data.right_bar_width},
			set: function(o, diff) {
				Interface.data.right_bar_width = limitNumber(o - diff, 128, $(window).width()- 240 - Interface.data.left_bar_width)
			},
			position: function(line) {
				line.setPosition({
					top: 32,
					bottom: 0,
					right: Interface.data.right_bar_width-3
				})
			}
		}),
		quad_view_x: new ResizeLine({
			id: 'quad_view_x',
			condition: function() {return quad_previews.enabled},
			get: function() {return Interface.data.quad_view_x},
			set: function(o, diff) {Interface.data.quad_view_x = limitNumber(o + diff/$('#preview').width()*100, 5, 95)},
			position: function(line) {
				var p = document.getElementById('preview')
				line.setPosition({
					top: 32,
					bottom: p ? window.innerHeight - (p.clientHeight + p.offsetTop) : 0,
					left: Interface.data.left_bar_width + $('#preview').width()*Interface.data.quad_view_x/100
				}
			)}
		}),
		quad_view_y: new ResizeLine({
			id: 'quad_view_y',
			horizontal: true,
			condition: function() {return quad_previews.enabled},
			get: function() {return Interface.data.quad_view_y},
			set: function(o, diff) {
				Interface.data.quad_view_y = limitNumber(o + diff/$('#preview').height()*100, 5, 95)
			},
			position: function(line) {line.setPosition({
				left: Interface.data.left_bar_width+2,
				right: Interface.data.right_bar_width+2,
				top: $('#preview').offset().top + $('#preview').height()*Interface.data.quad_view_y/100
			})}
		}),
		timeline: new ResizeLine({
			id: 'timeline',
			horizontal: true,
			condition: function() {return Modes.animate},
			get: function() {return Interface.data.timeline_height},
			set: function(o, diff) {
				Interface.data.timeline_height = limitNumber(o - diff, 150, document.body.clientHeight-120)
			},
			position: function(line) {line.setPosition({
				left: Interface.data.left_bar_width+2,
				right: Interface.data.right_bar_width+2,
				top: $('#timeline').offset().top
			})}
		})
	},
	status_bar: {},
	Panels: {}
}

//Misc
function unselectInterface(event) {
	if (open_menu && $('.contextMenu').find(event.target).length === 0 && $('.menu_bar_point.opened:hover').length === 0) {
		open_menu.hide();
	}
	if (ActionControl.open && $('#action_selector').find(event.target).length === 0) {
		ActionControl.hide();
	}
	if ($(event.target).is('input.cube_name:not([disabled])') === false && Blockbench.hasFlag('renaming')) {
		stopRenameOutliner()
	}
}
function setupInterface() {
	Interface.data = $.extend(true, {}, Interface.default_data)
	var interface_data = localStorage.getItem('interface_data')
	try {
		interface_data = JSON.parse(interface_data)
		var old_data = Interface.data
		if (interface_data.left_bar) Interface.data.left_bar = interface_data.left_bar;
		if (interface_data.right_bar) Interface.data.right_bar = interface_data.right_bar;
		for (key in Interface.Panels) {
			if (!Interface.data.left_bar.includes(key) && !Interface.data.right_bar.includes(key)) {
				if (old_data.left_bar.includes(key)) {
					Interface.data.left_bar.push(key)
				} else {
					Interface.data.right_bar.push(key)
				}
			}
		}
		$.extend(true, Interface.data, interface_data)
	} catch (err) {}

	if (!Language.loading_steps) {
		Language.loading_steps = true;
	} else {
		translateUI()
	}
	$('.edit_session_active').hide()

	$('.sidebar').droppable({
		accept: 'h3',
		scope: 'panel',
		tolerance: 'pointer',
		drop: function(e, ui) {
			Interface.panel = $(this).attr('id');
		}
	})

	//Colors
	var color_wrapper = $('#color_wrapper')
	for (var key in app_colors) {
		if (app_colors[key] && app_colors[key].hex) {
			(() => {
				var scope_key = key;
				var hex = app_colors[scope_key].hex;
				if (key == 'text_acc') key = 'accent_text';
				var field = $(`<div class="color_field">
						<div class="layout_color_preview" style="background-color: var(--color-${scope_key})" class="color_input"></div>
						<div class="desc">
							<h4>${tl('layout.color.'+key)}</h4>
							<p>${tl('layout.color.'+key+'.desc')}</p>
						</div>
					</div>`);
				color_wrapper.append(field);

				var last_color = hex;
				field.spectrum({
					preferredFormat: "hex",
					color: hex,
					showAlpha: false,
					showInput: true,
					move(c) {
						app_colors[scope_key].hex = c.toHexString();
						updateUIColor();
					},
					change(c) {
						last_color = c.toHexString();
					},
					hide(c) {
						app_colors[scope_key].hex = last_color;
						field.spectrum('set', last_color)
						updateUIColor();
					}
				});
			})()
		}
	}


	//Panels
	Interface.Panels.uv = new Panel({
		id: 'uv',
		condition: () => Modes.id === 'edit' || Modes.id === 'paint',
		toolbars: {
			bottom: Toolbars.main_uv
		},
		onResize: function() {
			var size = limitNumber($(this.node).width()-10, 64, 1200)
			size = Math.floor(size/16)*16
			main_uv.setSize(size)
		}
	})
	Interface.Panels.textures = new Panel({
		id: 'textures',
		condition: () => Modes.id === 'edit' || Modes.id === 'paint',
		toolbars: {
			head: Toolbars.textures
		},
		menu: new Menu([
			'import_texture',
			'create_texture',
			'reload_textures',
			'change_textures_folder',
			'save_textures'
		])
	})
	Interface.Panels.element = new Panel({
		id: 'element',
		condition: () => Modes.edit,
		toolbars: {
			element_position: Toolbars.element_position,
			element_size: Toolbars.element_size,
			element_origin: Toolbars.element_origin,
			element_rotation: Toolbars.element_rotation,
		}
	})
	Interface.Panels.color = new Panel({
		id: 'color',
		condition: () => Modes.id === 'paint',
		toolbars: {

		},
		onResize: t => {
			$('#main_colorpicker').spectrum('reflow');
			var h = $('.panel#color .sp-container.sp-flat').height()-20;
			$('.panel#color .sp-palette').css('max-height', h+'px')
		}
	})
	Interface.Panels.color.picker = $('#main_colorpicker').spectrum({
			preferredFormat: "hex",
			color: 'ffffff',
			flat: true,
			showAlpha: true,
			showInput: true,
			maxSelectionSize: 128,
			showPalette: true,
			palette: [],
			localStorageKey: 'brush_color_palette',
			move: function(c) {
				$('#main_colorpicker_preview > div').css('background-color', c.toRgbString())
			}
		})
	Interface.Panels.outliner = new Panel({
		id: 'outliner',
		condition: () => Modes.id === 'edit' || Modes.id === 'paint' || Modes.id === 'animate',
		toolbars: {
			head: Toolbars.outliner
		},
		onResize: t => {
			getAllOutlinerObjects().forEach(o => o.updateElement())
		},
		menu: new Menu([
			'add_cube',
			'add_group',
			'_',
			'sort_outliner',
			'select_all',
			'collapse_groups',
			'element_colors',
			'outliner_toggle'
		])
	})
	Interface.Panels.chat = new Panel({
		id: 'chat',
		condition: function() {return EditSession.active},
		toolbars: {},
		onResize: t => {
		},
		menu: new Menu([
		])
	})
	Interface.Panels.animations = new Panel({
		id: 'animations',
		condition: () => Animator.open,
		toolbars: {
			head: Toolbars.animations
		}
	})
	Interface.Panels.keyframe = new Panel({
		id: 'keyframe',
		condition: () => Animator.open,
		toolbars: {
			head: Toolbars.keyframe
		}
	})
	Interface.Panels.variable_placeholders = new Panel({
		id: 'variable_placeholders',
		condition: () => Animator.open,
		toolbars: {
		}
	})
	Interface.Panels.display = new Panel({
		id: 'display',
		condition: function() {return display_mode},
		toolbars: {
			head: Toolbars.textures
		}
	})
	Interface.data.left_bar.forEach((id) => {
		if (Interface.Panels[id]) {
			$('#left_bar').append(Interface.Panels[id].node)
		}
	})
	Interface.data.right_bar.forEach((id) => {
		if (Interface.Panels[id]) {
			$('#right_bar').append(Interface.Panels[id].node)
		}
	})


	Interface.status_bar.menu = new Menu([
		'project_window',
		'open_model_folder',
		'open_backup_folder',
		'save'
	])

	for (var key in Interface.Resizers) {
		var resizer = Interface.Resizers[key]
		$('#page_wrapper').append(resizer.node)
	}
	//$(document).contextmenu()


	//Tooltip Fix
	$(document).on('mouseenter', '.tool', function() {
		var tooltip = $(this).find('div.tooltip')
		if (!tooltip || typeof tooltip.offset() !== 'object') return;
		//Left
		if (tooltip.css('left') === '-4px') {
			tooltip.css('left', 'auto')
		}
		if (-tooltip.offset().left > 4) {
			tooltip.css('left', '-4px')
		}
		//Right
		if (tooltip.css('right') === '-4px') {
			tooltip.css('right', 'auto')
		}

		if ((tooltip.offset().left + tooltip.width()) - $(window).width() > 4) {
			tooltip.css('right', '-4px')
		} else if ($(this).parent().css('position') == 'relative') {
			tooltip.css('right', '0')
		}
	})

	var stats_bar_vue = new Vue({
		el: '#status_bar',
		data: {Prop}
	})



	//Clickbinds
	$('header'	  ).click( 	function() { setActivePanel('header'  )})
	$('#preview'	).click(function() { setActivePanel('preview' )})

	$('ul#cubes_list').click(function(event) {
		if (event.target === document.getElementById('cubes_list')) {
			unselectAll()
		}
	})
	$('#texture_list').click(function(){
		unselectTextures()
	})
	$('#timeline').mousedown((event) => {
		setActivePanel('timeline');
	})
	$(document).on('mousedown touchdown', unselectInterface)
	
	$('.context_handler').on('click', function() {
		$(this).addClass('ctx')
	})
	$(document).contextmenu(function(event) {
		if (!$(event.target).hasClass('allow_default_menu')) {
			/*if (event.target.nodeName === 'INPUT' && $(event.target).is(':focus')) {
				Interface.text_edit_menu.open(event, event.target)
			}*/
			return false;
		}
	})

	//Scrolling
	$('input[type="range"]').on('mousewheel', function () {
		var obj = $(event.target)
		var factor = event.deltaY > 0 ? -1 : 1
		var val = parseFloat(obj.val()) + parseFloat(obj.attr('step')) * factor
		val = limitNumber(val, obj.attr('min'), obj.attr('max'))

		if (obj.attr('trigger_type')) {
			DisplayMode.scrollSlider(obj.attr('trigger_type'), val, obj)
			return;
		}

		obj.val(val)
		eval(obj.attr('oninput'))
		eval(obj.attr('onmouseup'))
	})

	//Mousemove
	$(document).mousemove(function(event) {
		mouse_pos.x = event.clientX
		mouse_pos.y = event.clientY
	})
	updateInterface()
}
function saveInterfaceRearrangement() {
	Interface.data.left_bar.length = 0
	$('#left_bar > .panel').each((i, obj) => {
		let id = $(obj).attr('id');
		Interface.data.left_bar.push(id);
	})
	Interface.data.right_bar.length = 0
	$('#right_bar > .panel').each((i, obj) => {
		let id = $(obj).attr('id');
		Interface.data.right_bar.push(id);
	})
	localStorage.setItem('interface_data', JSON.stringify(Interface.data))
}

function updateInterface() {
	BARS.updateConditions()
	MenuBar.update()
	resizeWindow()
	localStorage.setItem('interface_data', JSON.stringify(Interface.data))
}
function updateInterfacePanels() {
	$('#page_wrapper').css(
		'grid-template-columns',
		Interface.data.left_bar_width+'px auto '+ Interface.data.right_bar_width +'px'
	)
	for (var key in Interface.Panels) {
		var panel = Interface.Panels[key]
		panel.update()
	}
	var left_width = $('.sidebar#left_bar > .panel:visible').length ? Interface.data.left_bar_width : 0
	var right_width = $('.sidebar#right_bar > .panel:visible').length ? Interface.data.right_bar_width : 0
	if (!left_width || !right_width) {
		$('#page_wrapper').css(
			'grid-template-columns',
			left_width+'px auto '+ right_width +'px'
		)
	}

	$('.quad_canvas_wrapper.qcw_x').css('width', Interface.data.quad_view_x+'%')
	$('.quad_canvas_wrapper.qcw_y').css('height', Interface.data.quad_view_y+'%')
	$('.quad_canvas_wrapper:not(.qcw_x)').css('width', (100-Interface.data.quad_view_x)+'%')
	$('.quad_canvas_wrapper:not(.qcw_y)').css('height', (100-Interface.data.quad_view_y)+'%')
	$('#timeline').css('height', Interface.data.timeline_height+'px')
	for (var key in Interface.Resizers) {
		var resizer = Interface.Resizers[key]
		resizer.update()
	}
}

function resizeWindow(event) {
	if (!previews || (event && event.target && event.target !== window)) {
		return;
	}
	if (Animator.open) {
		Timeline.updateSize()
	}

	if (Interface.data) {
		updateInterfacePanels()
	}
	previews.forEach(function(prev) {
		if (prev.canvas.isConnected) {
			prev.resize()
		}
	})
	var dialog = $('dialog#'+open_dialog)
	if (dialog.length) {
		if (dialog.outerWidth() + dialog.offset().left > window.innerWidth) {
			dialog.css('left', limitNumber(window.innerWidth-dialog.outerWidth(), 0, 4e3) + 'px')
		}
		if (dialog.outerHeight() + dialog.offset().top > window.innerHeight) {
			dialog.css('top', limitNumber(window.innerHeight-dialog.outerHeight(), 0, 4e3) + 'px')
		}
	}
	BARS.updateToolToolbar()
}
$(window).resize(resizeWindow)

function setActivePanel(panel) {
	Prop.active_panel = panel
}
function setProjectTitle(title) {
	if (Format.bone_rig && Project.geometry_name) {
		title = Project.geometry_name
	}
	if (title) {
		Prop.file_name = Prop.file_name_alt = title
		if (!Project.name) {
			Project.name = title
		}
		if (Format.bone_rig) {
			title = title.replace(/^geometry\./,'').replace(/:[a-z0-9.]+/, '')
		}
		$('title').text(title+' - Blockbench')
	} else {
		Prop.file_name = Prop.file_name_alt = ''
		$('title').text('Blockbench')
	}
}
//Zoom
function setZoomLevel(mode) {
	if (Prop.active_panel === 'uv') {
		var zoom = main_uv.zoom
		switch (mode) {
			case 'in':	zoom *= 1.5;  break;
			case 'out':   zoom *= 0.66;  break;
			case 'reset': zoom = 1; break;
		}
		zoom = limitNumber(zoom, 1, 4)
		main_uv.setZoom(zoom)

	} else if (isApp) {
		switch (mode) {
			case 'in':	Prop.zoom += 5;  break;
			case 'out':   Prop.zoom -= 5;  break;
			case 'reset': Prop.zoom = 100; break;
		}
		var level = (Prop.zoom - 100) / 12
		currentwindow.webContents.setZoomLevel(level)
		resizeWindow()
	}
}

//Dialogs
function showDialog(dialog) {
	var obj = $('.dialog#'+dialog)
	$('.dialog').hide(0)
	if (open_menu) {
		open_menu.hide()
	}
	$('#blackout').fadeIn(0)
	obj.fadeIn(0)
	open_dialog = dialog
	open_interface = dialog
	Prop.active_panel = 'dialog'
	//Draggable
	if (obj.hasClass('draggable')) {
		obj.draggable({
			handle: ".dialog_handle",
			containment: 'body'
		})
		var x = ($(window).width()-obj.outerWidth()) / 2;
		var top = ($(window).height() - obj.outerHeight()) / 2;
		obj.css('left', x+'px')
		obj.css('top', 'px')
		obj.css('max-height', ($(window).height()-128)+'px')
	}
}
function hideDialog() {
	$('#blackout').fadeOut(0)
	$('.dialog').fadeOut(0)
	open_dialog = false;
	open_interface = false;
	Prop.active_panel = undefined
}
function setSettingsTab(tab) {
	$('#settings .tab.open').removeClass('open')
	$('#settings .tab#'+tab).addClass('open')
	$('#settings .tab_content').addClass('hidden')
	$('#settings .tab_content#'+tab).removeClass('hidden')
	if (tab === 'keybindings') {
		//Keybinds
		$('#keybindlist').css('max-height', ($(window).height() - 420) +'px')
	} else if (tab === 'setting') {
		//Settings
		$('#settingslist').css('max-height', ($(window).height() - 420) +'px')
	} else if (tab === 'layout_settings') {
		$('#layout_list').css('max-height', ($(window).height() - 420) +'px')
		$('#layout_font_main').val(app_colors.main.font)
		$('#layout_font_headline').val(app_colors.headline.font)
	}
}

//Color
function colorSettingsSetup(reset) {
	app_colors = {
		back: {hex: '#21252b'},
		dark: {hex: '#17191d'},
		border: {hex: '#181a1f'},
		ui: {hex: '#282c34'},
		bright_ui: {hex: '#f4f3ff'},
		accent: {hex: '#3e90ff'},
		button: {hex: '#3a3f4b'},
		selected: {hex: '#3c4456'},
		text: {hex: '#cacad4'},
		light: {hex: '#f4f3ff'},
		text_acc: {hex: '#000006'},
		grid: {hex: '#495061'},
		wireframe: {hex: '#576f82'},
		main: {font: ''},
		headline: {font: ''},
		css: ''
	}
	if (reset) {
		$('#layout_font_main').val('')
		$('#layout_font_headline').val('')
		changeUIFont('main')
		changeUIFont('headline')
		$('style#bbstyle').text('')
		resizeWindow()
	}
	if (localStorage.getItem('app_colors') != null && reset != true) {
		var stored_app_colors = JSON.parse(localStorage.getItem('app_colors'))
		$.extend(app_colors, stored_app_colors)
	}
	updateUIColor()
	buildGrid()
}
function changeUIFont(type) {
	var font = $('#layout_font_'+type).val()
	app_colors[type].font = font
	if (type === 'main') {
		$('body').css('font-family', app_colors[type].font)
	} else {
		$('h1, h2, h3, h4, h5').css('font-family', app_colors[type].font)
	}
}
function updateUIColor() {
	for (var type in app_colors) {
		if (app_colors.hasOwnProperty(type)) {
			if (type === 'css') {
				$('style#bbstyle').text(app_colors.css)
			} else if (app_colors[type].hex) {
				document.body.style.setProperty('--color-'+type, app_colors[type].hex);
			} else if (app_colors[type].font) {
				if (type === 'main') {
					$('body').css('font-family', app_colors[type].font)
				} else {
					$('h1, h2, h3, h4, h5').css('font-family', app_colors[type].font)
				}
			}
		}
	}
	$('meta[name=theme-color]').attr('content', app_colors.border.hex)

	var c_outline = parseInt('0x'+app_colors.accent.hex.replace('#', ''))

	if (c_outline !== gizmo_colors.outline.getHex()) {
		gizmo_colors.outline.set(c_outline)
		Canvas.outlineMaterial.color = gizmo_colors.outline
	}
	var w_wire = parseInt('0x'+app_colors.wireframe.hex.replace('#', ''))
	if (!gizmo_colors.wire || w_wire !== gizmo_colors.wire.getHex()) {
		gizmo_colors.wire = new THREE.Color( w_wire )
		Canvas.wireframeMaterial.color = gizmo_colors.wire
	}

	var c_grid = parseInt('0x'+app_colors.grid.hex.replace('#', ''))
	if (!gizmo_colors.grid || c_grid !== gizmo_colors.grid.getHex()) {
		gizmo_colors.grid = new THREE.Color( c_grid )
		three_grid.children.forEach(c => {
			if (c.name === 'grid' && c.material) {
				c.material.color = gizmo_colors.grid;
			}
		})
	}

	localStorage.setItem('app_colors', JSON.stringify(app_colors))
}

//BBLayout
function applyBBStyle(data) {
	data = autoParseJSON(data)
	if (typeof data !== 'object') return;
	$.extend(app_colors, data)
	if (data.css) {
		$('style#bbstyle').text(data.css)
		resizeWindow()
	}
	updateUIColor()
}

//UI Edit
function setProgressBar(id, val, time) {
	if (!id || id === 'main') {
		Prop.progress = val
	} else {
		$('#'+id+' > .progress_bar_inner').animate({width: val*488}, time-1)
	}
	if (isApp) {
		currentwindow.setProgressBar(val)
	}
}

//Tooltip
function showShiftTooltip() {
	$(':hover').find('.tooltip_shift').css('display', 'inline')
}
$(document).keyup(function(event) {
	if (event.which === 16) {
		$('.tooltip_shift').hide()
	}
})

//Start Screen
function addStartScreenSection(data) {
	var obj = $('<section></section>')
	if (typeof data.graphic === 'object') {
		var left = $('<left class="graphic"></left>')
		obj.append(left)

		if (data.graphic.type === 'icon') {
			var icon = Blockbench.getIconNode(data.graphic.icon)
			$(icon).addClass('graphic_icon')
			left.append(icon)
		} else {
			left.css('background-image', `url('${data.graphic.source}')`)
		}
		if (data.graphic.width) {
			left.css('width', data.graphic.width+'px').css('flex-shrink', '0');
		}
		if (data.graphic.width && data.graphic.height && Blockbench.isMobile) {
			left.css('height', '0')
				.css('padding-top', '0')
				.css('padding-bottom', (data.graphic.height/data.graphic.width*100)+'%')
		} else {
			if (data.graphic.height) left.css('height', data.graphic.height+'px');
			if (data.graphic.width && !data.graphic.height) left.css('height', data.graphic.width+'px');
		}
	}
	if (data.text instanceof Array) {
		var right = $('<right></right>')
		obj.append(right)
		data.text.forEach(line => {
			var content = line.text ? marked(tl(line.text)) : '';
			switch (line.type) {
				case 'h1': var tag = 'h3'; break;
				case 'h2': var tag = 'h4'; break;
				case 'list':
					var tag = 'ul class="list_style"';
					line.list.forEach(string => {
						content += `<li>${marked(tl(string))}</li>`;
					})
					break;
				case 'button': var tag = 'button'; break;
				default:   var tag = 'p'; break;
			}
			var l = $(`<${tag}>${content}</${tag.split(' ')[0]}>`);
			if (typeof line.click == 'function') {
				l.click(line.click);
			}
			right.append(l);
		})
	}
	if (data.closable !== false) {
		obj.append(`<i class="material-icons start_screen_close_button">clear</i>`);
		obj.find('i.start_screen_close_button').click((e) => {
			obj.detach()
		});
	}
	if (data.color) {
		obj.css('background-color', data.color);
	}
	if (data.text_color) {
		obj.css('color', data.text_color);
	}
	if (data.last) {
		$('#start_screen content').append(obj);
	} else {
		$('#start_screen content').prepend(obj);
	}
}

var documentReady = new Promise((resolve, reject) => {
	$(document).ready(function() {
		resolve()
	})
});


(function() {
	var news_call = $.getJSON('https://blockbench.net/api/news/news.json')
	var version_call = $.getJSON('https://raw.githubusercontent.com/JannisX11/blockbench/master/package.json')
	Promise.all([news_call, documentReady]).then((data) => {
		if (!data || !data[0]) return;
		data = data[0];

		//Update Screen
		if (Blockbench.hasFlag('after_update') && data.new_version) {
			addStartScreenSection(data.new_version)
		}
		if (data.psa) {
			addStartScreenSection(data.psa)
		}

	})
	documentReady.then(() => {
		var startup_count = parseInt(localStorage.getItem('startups')||0)

		//Backup Model
		if (localStorage.getItem('backup_model') && (!isApp || !currentwindow.webContents.second_instance)) {
			var backup_model = localStorage.getItem('backup_model')
			localStorage.removeItem('backup_model')

			addStartScreenSection({
				color: 'var(--color-back)',
				graphic: {type: 'icon', icon: 'fa-archive'},
				text: [
					{type: 'h1', text: tl('message.recover_backup.title')},
					{text: tl('message.recover_backup.message')},
					{type: 'button', text: tl('dialog.ok'), click: (e) => {
						loadModelFile({content: backup_model, path: 'backup.bbmodel', no_file: true})
					}}
				]
			})
		}


		//Electron
		if (isApp && !compareVersions(process.versions.electron, '4.0.0')) {
			addStartScreenSection({
				graphic: {type: 'icon', icon: 'fas.fa-atom'},
				text: [
					{type: 'h1', text: 'Electron Update Recommended'},
					{text: 'Your Blockbench is using an old version of Electron. Install the latest version to get the best performance and newest features. Just run the latest Blockbench installer. This only takes a minute and will not affect your custom settings.'},
					{text: '[Blockbench Downloads](https://blockbench.net/downloads/)'}
				]
			})
		}
		//Discord
		if (startup_count < 6) {
			addStartScreenSection({
				color: '#7289da',
				text_color: '#ffffff',
				graphic: {type: 'icon', icon: 'fab.fa-discord'},
				text: [
					{type: 'h1', text: 'Discord Server'},
					{text: 'You need help with modeling or you want to chat about Blockbench? Join the [Modeling Discord](http://discord.blockbench.net)!'}
				],
				last: true
			})
		}
		//Donation reminder
		if (startup_count % 12 === 11) {
			addStartScreenSection({
				graphic: {type: 'icon', icon: 'fas fa-heart'},
				text: [
					{type: 'h1', text: 'Donation'},
					{text: 'Are you enjoying Blockbench? Consider donating to the project. Blockbench is 100% donation funded.'},
					{text: '[Donate](https://blockbench.net/donate)'}
				],
				last: true
			})
		}
	})

	Promise.all([version_call, documentReady]).then((data) => {
		if (data[0] && data[0].version) {
			latest_version = data[0].version;
			if (isApp && compareVersions(latest_version, appVersion)) {

				addStartScreenSection({
					color: 'var(--color-back)',
					graphic: {type: 'icon', icon: 'update'},
					text: [
						{type: 'h1', text: tl('message.update_notification.title')},
						{text: tl('message.update_notification.message', [latest_version])},
						{type: 'button', text: tl('message.update_notification.install'), click: (e) => {
							checkForUpdates(true)
						}}
					]
				})
			}
		}
	})

})()


onVueSetup(function() {
	
	StartScreen.vue = new Vue({
		el: '#start_screen',
		data: {
			formats: Formats,
			recent: isApp ? recent_projects : []
		},
		methods: {
			getDate(p) {
				if (p.day) {
					var diff = Blockbench.openTime.dayOfYear() - p.day;
					if (diff <= 0) {
						return tl('dates.today');
					} else if (diff == 1) {
						return tl('dates.yesterday');
					} else if (diff <= 7) {
						return tl('dates.this_week');
					} else {
						return tl('dates.weeks_ago', [Math.ceil(diff/7)]);
					}
				} else {
					return '-'
				}
			},
			openProject: function(p, event) {
				Blockbench.read([p.path], {}, files => {
					loadModelFile(files[0]);
				})
				//readFile(p.path, !event.shiftKey)
			}
		}
	})
})