thedesk/app/js/ui/layout.js

//レイアウトの設定

var websocketOld = []
var websocket = []
var wsHome = []
var wsLocal = []
var websocketNotf = []

//カラム追加ボックストグル
function addColumnMenu() {
	$('#left-menu a').removeClass('active')
	$('#addColumnMenu').addClass('active')
	$('.menu-content').addClass('hide')
	$('#add-box').removeClass('hide')
	addselCk()
}
$('.type').click(function () {
	$('.type').removeClass('active')
	$(this).addClass('active')
	$('#type-sel').val($(this).attr('data-type'))
})
//最初、カラム変更時に発火
function parseColumn(target, dontclose) {
	if (target === 0) {
		//this is kuso
		target = 'zero'
	}
	console.log('%c Parse column', 'color:red;font-size:125%')
	var size = localStorage.getItem('size')
	if (size) {
		$('#timeline-container').css('font-size', size + 'px')
		$('.toot-reset').css('font-size', size + 'px')
		$('.cont-series').css('font-size', size + 'px')
	}
	if (localStorage.getItem('menu-done')) {
		$('#fukidashi').addClass('hide')
	}
	if (!dontclose && !target) {
		tlCloser()
	}

	var multi = localStorage.getItem('multi')
	if (multi) {
		var obj = JSON.parse(multi)
		var templete
		Object.keys(obj).forEach(function (key) {
			var acct = obj[key]
			localStorage.setItem('name_' + key, acct.name)
			localStorage.setItem('user_' + key, acct.user)
			localStorage.setItem('user-id_' + key, acct.id)
			localStorage.setItem('prof_' + key, acct.prof)
			localStorage.setItem('domain_' + key, acct.domain)
			localStorage.setItem('acct_' + key + '_at', acct.at)
			localStorage.setItem('acct_' + key + '_rt', acct.rt ? acct.rt : null)
			if (!target) mastodonBaseStreaming(key)
			ckdb(key)
			//フィルターデータ読もう
			getFilter(key)
			var domain = localStorage.getItem('domain_' + key)
			if (localStorage.getItem('mode_' + domain) == 'misskey') {
				localStorage.removeItem('misskey_wss_' + key)
				connectMisskey(key, false)
			}
			localStorage.removeItem('emoji_' + key) //カスタム絵文字カテゴリ分け用旧データ削除
		})
	}
	var acctlist = obj
	console.table(obj)
	/*var xed=localStorage.getItem("xed");
	if(xed){
		xpand();
	}*/
	var col = localStorage.getItem('column')
	if (!col) {
		var obj = [
			{
				domain: 0,
				type: 'home',
			},
			{
				domain: 0,
				type: 'local',
			}
		]
		var json = JSON.stringify(obj)
		localStorage.setItem('column', json)
	} else {
		var obj = JSON.parse(col)
	}
	var numtarget = false
	if (target == 'add') {
		var tlidtar = obj.length - 1
		obj = [obj[tlidtar]]
	} else if (target) {
		var tlidtar = target
		if (target == 'zero') {
			target = 0
		}
		obj = [obj[target]]
		numtarget = true
	} else {
		var tlidtar = null
		if ($('#timeline-container').length) {
			$('#timeline-container').html('')
			$('.box, .boxIn').resizable('destroy')
		}
	}
	var basekey = 0
	for (var key = 0; key < obj.length; key++) {
		var next = key + 1
		//acctって言いながらタイムライン
		var acct = obj[key]
		if (tlidtar) {
			if (tlidtar == 'zero') {
				key = 0
			} else {
				key = tlidtar
			}
		}
		if (acct.type == 'notf') {
			var notf_attr = ' data-notf=' + acct.domain
			var if_notf = 'hide'
		} else {
			var notf_attr = ''
			var if_notf = ''
		}
		if (localStorage.getItem('notification_' + acct.domain)) {
			var unique_notf = lang.lang_layout_thisacct.replace('{{notf}}', localStorage.getItem('notification_' + acct.domain))
		} else {
			if (lang.language == 'ja') {
				var notflocale = '通知'
			} else if (lang.language == 'en') {
				var notflocale = 'Notification'
			}
			var unique_notf = lang.lang_layout_thisacct.replace('{{notf}}', notflocale)
		}
		var insert = ''
		var icnsert = ''
		if (acct.background) {
			if (acct.text == 'def') {
			} else {
				if (acct.text == 'black') {
					var txhex = '000000'
					var ichex = '9e9e9e'
				} else if (acct.text == 'white') {
					var txhex = 'ffffff'
					var ichex = 'eeeeee'
				}
				insert = 'background-color:#' + acct.background + '; color: #' + txhex + '; '
				icnsert = ' style="color: #' + ichex + '" '
			}
		}
		if (acctlist[acct.domain]) {
			if (acctlist[acct.domain].background != 'def') {
				insert = insert + ' border-bottom:medium solid #' + acctlist[acct.domain].background + ';'
			}
		}
		if (acct.type == 'notf' && localStorage.getItem('setasread') == 'no') {
			localStorage.setItem('hasNotfC_' + acct.domain, 'true')
		} else {
			localStorage.removeItem('hasNotfC_' + acct.domain)
		}
		var css = ''
		var width = localStorage.getItem('width')
		if (width) {
			css = ' min-width:' + width + 'px;'
		}
		var maxWidth = localStorage.getItem('max-width')
		if (maxWidth) {
			css = css + 'max-width:' + maxWidth + 'px;'
		}
		var margin = localStorage.getItem('margin')
		if (margin) {
			css = css + 'margin-right:' + margin + 'px;'
		}
		if (acct.width) {
			css = css + ' min-width:' + acct.width + 'px !important;max-width:' + acct.width + 'px !important;'
		}
		if (acct.type == 'webview') {
			if (localStorage.getItem('fixwidth')) {
				var fixwidth = localStorage.getItem('fixwidth')
				var css = ' min-width:' + fixwidth + 'px;'
			} else {
				var css = ''
			}
			var html = webviewParse('https://tweetdeck.twitter.com', key, insert, icnsert, css)
			$('#timeline-container').append(html)
			initWebviewEvent()
		} else if (acct.type == 'tootsearch') {
			if (!acct.left_fold) {
				basekey = key
			}

			var anime = localStorage.getItem('animation')
			if (anime == 'yes' || !anime) {
				var animecss = 'box-anime'
			} else {
				var animecss = ''
			}
			unstreamingTL(acct.type, key, basekey, insert, icnsert, acct.left_fold, css, animecss, acct.data)
		} else if (acct.type == 'bookmark') {
			if (!acct.left_fold) {
				basekey = key
			}

			var anime = localStorage.getItem('animation')
			if (anime == 'yes' || !anime) {
				var animecss = 'box-anime'
			} else {
				var animecss = ''
			}
			unstreamingTL(acct.type, key, basekey, insert, icnsert, acct.left_fold, css, animecss, acct.domain)
		} else if (acct.type == 'utl') {
			if (!acct.left_fold) {
				basekey = key
			}

			var anime = localStorage.getItem('animation')
			if (anime == 'yes' || !anime) {
				var animecss = 'box-anime'
			} else {
				var animecss = ''
			}
			unstreamingTL(acct.type, key, basekey, insert, icnsert, acct.left_fold, css, animecss, { acct: acct.domain, data: acct.data })
		} else {
			var anime = localStorage.getItem('animation')
			if (anime == 'yes' || !anime) {
				var animecss = 'box-anime'
			} else {
				var animecss = ''
			}
			var unread = `<a id="unread_${key}" onclick="showUnread('${key}','${acct.type}','${acct.domain}')"
					 class="setting nex waves-effect" title="${lang.lang_layout_unread}">
					<i class="material-icons waves-effect nex">more</i><span>${lang.lang_layout_unread}</span>
				</a>`
			var notfDomain = acct.domain
			var notfKey = key
			var if_tag = ''
			var if_tag_btn = ''
			if (acct.type == 'notf') {
				var excludeNotf =
					`<div style="border: 1px solid; padding: 5px; margin-top: 5px; margin-bottom: 5px;">${lang.lang_layout_excluded}:<br>
					<label>
						<input type="checkbox" class="filled-in" id="exc-reply-${key}" ${excludeCk(key, 'mention')} />
						<span>
							${lang.lang_layout_mention}
						</span>
					</label>
					<label>
						<input type="checkbox" class="filled-in" id="exc-fav-${key}" ${excludeCk(key, 'favourite')} />
						<span>
						${lang.lang_layout_fav}
						</span>
					</label> 
					<label>
						<input type="checkbox" class="filled-in" id="exc-bt-${key}" ${excludeCk(key, 'reblog')} />
						<span>
						${lang.lang_layout_bt}
						</span>
					</label>
					<label>
						<input type="checkbox" class="filled-in" id="exc-follow-${key}" ${excludeCk(key, 'follow')} />
						<span>
						${lang.lang_status_follow}
						</span>
					</label> 
					<label>
						<input type="checkbox" class="filled-in" id="exc-poll-${key}" ${excludeCk(key, 'poll')} />
						<span>
						${lang.lang_layout_poll}
						</span>
					</label> <br />
					<button class="btn btn-flat waves-effect notf-exclude-btn waves-light" style="width:calc(50% - 11px); padding:0;" onclick="exclude('${key}')">Filter</button>`
				if (checkNotfFilter(key)) {
					excludeNotf =
						excludeNotf +
						`<button class="btn btn-flat red-text waves-effect notf-exclude-btn waves-light" style="width:calc(50% - 11px); padding:0;" onclick="resetNotfFilter('${key}')">
							Clear all
						</button>`
				}
				excludeNotf = excludeNotf + '</div>'
				notfDomain = 'dummy'
				notfKey = 'dummy'
				var excludeHome =''
			} else if (acct.type == 'home') {
				var excludeNotf = ''
				var excludeHome = `<a onclick="ebtToggle('${key}')" class="setting nex waves-effect">
						<i class="fas fa-retweet nex" title="${lang.lang_layout_excludingbt}" style="font-size: 24px"></i>
						<span>${lang.lang_layout_excludingbt}</span><span id="sta-bt-${key}">Off</span>
					</a>`
			} else if (acct.type == 'tag') {
				if (acct.data.name) {
					var name = acct.data.name
					var all = acct.data.all
					var any = acct.data.any
					var none = acct.data.none
				} else {
					var name = acct.data
					var all = ''
					var any = ''
					var none = ''
				}
				if_tag = `<div class="column-hide notf-indv-box" id="tag-box_${key}" style="padding:5px;">
					Base: ${name}<br>
					<div id="tagManager-${key}">
						all: <input type="text" id="all_tm-${key}"" value="${all}">
						any: <input type="text" id="any_tm-${key}" value="${any}">
						none: <input type="text" id="none_tm-${key}"" value="${none}">
					</div>
					<button onclick="addTag('${key}')" class="btn waves-effect" style="width: 100%">Refresh</button>
				</div>`
				if_tag_btn = `<a onclick="setToggleTag('${key}')" class="setting nex" 
				title="${lang.lang_layout_tagManager}" style="width:30px">
				<i class="material-icons waves-effect nex">note_add</i>
				</a>`
				unread = ''
				var excludeNotf = ''
				var excludeHome = ''
				var if_notf = 'hide'
			} else {
				var excludeNotf = ''
				var excludeHome = ''
				unread = ''
			}

			var markers = localStorage.getItem('markers')
			if (markers == 'yes') {
				markers = true
			} else {
				markers = false
			}
			const smallHeader = localStorage.getItem('smallHeader') === 'yes'
			if (!markers) {
				unread = ''
			}
			if (!acct.left_fold) {
				basekey = key
				if (!numtarget) {
					var basehtml = `<div style="${css}" class="box ${animecss}" id="timeline_box_${basekey}_parentBox"></div>`
					$('#timeline-container').append(basehtml)
				}
				var left_hold = `<a onclick="leftFoldSet('${key}')" class="setting nex waves-effect">
						<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftFold}">view_agenda</i>
					<span>${lang.lang_layout_leftFold}</span></a>`
			} else {
				var left_hold = `<a onclick="leftFoldRemove('${key}')" class="setting nex waves-effect">
						<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftUnfold}">view_column</i>
					<span>${lang.lang_layout_leftUnfold}</span></a>`
			}
			if (key === 0) {
				left_hold = ''
			}
			if (localStorage.getItem('mode_' + localStorage.getItem('domain_' + acct.domain)) == 'misskey') {
				var isMisRed = ''
				exclude = ''
				var if_misskey_hide = 'hide'
			} else {
				var isMisRed = 'red-text'
				var if_misskey_hide = ''
			}
			if (acct.height) {
				var addHeight = ' min-height:' + acct.height + 'px;max-height:' + acct.height + 'px;'
			} else {
				var addHeight = ''
			}
			if (acct.type != 'pub' && acct.type != 'pub-media') {
				var mediaFil = `<a onclick="mediaToggle('${key}')" class="setting nex waves-effect">
					<i class="material-icons nex" title="${lang.lang_layout_mediafil}">perm_media</i>
				<span>${lang.lang_layout_mediafil}</span/><span id="sta-media-${key}">On</span></a>`
			} else {
				var mediaFil = `<a onclick="remoteOnly('${key}','${acct.type}')" class="setting nex waves-effect">
					<i class="material-icons nex" title="${lang.lang_layout_remoteOnly}">perm_media</i><br />
					<span id="sta-remote-${key}">Off</span>
				${lang.lang_layout_remoteOnly}</a>`
			}
			var html = `
				<div class="boxIn" id="timeline_box_${key}_box" tlid="${key}" data-acct="${acct.domain}" style="${addHeight}">
					<div class="notice-box ${smallHeader ? 'small-header' : ''} z-depth-2" id="menu_${key}" style="${insert}">
						<div class="area-notice">
							<i class="material-icons waves-effect ${isMisRed} notice_icon_acct_${acct.domain} top-icon" id="notice_icon_${key}" ${notf_attr} 
								 onclick="checkStr('${acct.type}','${data}','${acct.domain}', '${key}', '${delc}','${voice}',null)"
							 	 title="${lang.lang_layout_gotop}" aria-hidden="true">
							</i>
						</div>
					<div class="area-notice_name">
						<span id="notice_${key}" class="tl-title"></span>
					</div>
					<div class="area-a1">
						<a onclick="notfToggle('${acct.domain}','${key}')" class="setting nex ${if_notf}" 
							title="${unique_notf}" ${icnsert}>
							<i class="material-icons waves-effect nex notf-icon_${acct.domain}" aria-hidden="true">notifications</i>
							<span class="voice">${unique_notf}</span>
						</a>
						<span class="cbadge hide notf-announ_${acct.domain}" style="margin-right:0" 
							onclick="notfToggle('${acct.domain}','${key}')" title="${lang.lang_layout_announ}">
							<i class="fas fa-bullhorn"></i>
							<span class="notf-announ_${acct.domain}_ct"></span>
							<span class="voice">${lang.lang_layout_announ}</span>
						</span>
						${if_tag_btn}
					</div>
					<div class="area-sta">
						<span class="new badge teal notf-reply_${acct.domain} hide" data-badge-caption="Rp" aria-hidden="true">0</span>
						<span class="new badge yellow black-text notf-fav_${acct.domain} hide" data-badge-caption="Fv" aria-hidden="true">0</span>
						<span class="new badge blue notf-bt_${acct.domain} hide" data-badge-caption="BT" aria-hidden="true">0</span>
						<span class="new badge orange notf-follow_${acct.domain} hide" data-badge-caption="Fw" aria-hidden="true">0</span>
					</div>
					<div class="area-a2">
						<a onclick="removeColumn('${key}')" class="setting nex">
							<i class="material-icons waves-effect nex" title="${lang.lang_layout_delthis}" ${icnsert} aria-hidden="true">cancel</i>
							<span class="voice">${lang.lang_layout_delthis}</span>
						</a>
					</div>
					<div class="area-a3">
						<a onclick="setToggle('${key}')" class="setting nex" title="${lang.lang_layout_setthis}" ${icnsert}>
							<i class="material-icons waves-effect nex" aria-hidden="true">settings</i>
							<span class="voice">${lang.lang_layout_setthis}</span>
						</a>
					</div>
				</div>
				<div class="column-hide notf-indv-box z-depth-4" id="notf-box_${notfKey}">
					<div class="announce_${acct.domain}" style="border: 1px solid"></div>
					<div id="notifications_${notfKey}" data-notf="${notfDomain}" data-type="notf" class="notf-timeline">
					</div>
				</div>
				<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;">
					${excludeNotf}
					<div class="columnSettings">
					${excludeHome}
					${unread}
					${left_hold}
					${mediaFil}
					<a onclick="cardToggle('${key}')" class="setting nex waves-effect">
						<i class="material-icons nex" title="${lang.lang_layout_linkanades}">link</i>
					<span>${lang.lang_layout_linkana}</span><span id="sta-card-${key}">On</span>
					</a>
					<a onclick="voiceToggle('${key}')" class="setting nex waves-effect">
						<i class="material-icons nex" title="${lang.lang_layout_tts}">hearing</i>
					<span>${lang.lang_layout_tts}TL</span/><span id="sta-voice-${key}">On</span>
					</a>
					<a onclick="columnReload('${key}','${acct.type}')" class="setting nex ${if_misskey_hide} waves-effect">
						<i class="material-icons nex" title="${lang.lang_layout_reconnect}">refresh</i>
						<span>${lang.lang_layout_reconnect}</span>
					</a>
					<a onclick="resetWidth('${key}')" class="setting nex waves-effect">
						<i class="material-icons nex rotate-90" title="${lang.lang_layout_resetWidth}">height</i>
						<span>${lang.lang_layout_resetWidth}</span>
					</a></div>
					<p>${lang.lang_layout_headercolor}</p>
					<div id="picker_${key}" class="color-picker"></div>
				</div>${if_tag}
				<div class="tl-box" tlid="${key}">
					<div id="timeline_${key}" class="tl ${acct.type}-timeline " tlid="${key}" 
						data-type="${acct.type}" data-acct="${acct.domain}" data-const="${acct.type}_${acct.domain}">
						<div id="landing_${key}" style="text-align:center">
						${lang.lang_layout_nodata}
					</div>
				</div>
			</div>`
			if (numtarget) {
				$('timeline_box_' + key + '_box').html(html)
			} else {
				$('#timeline_box_' + basekey + '_parentBox').append(html)
			}
			localStorage.removeItem('pool_' + key)
			if (acct.data) {
				var data = acct.data
			} else {
				var data = ''
			}
			if (localStorage.getItem('catch_' + key)) {
				var delc = 'true'
			} else {
				var delc = 'false'
			}

			if (localStorage.getItem('voice_' + key)) {
				var voice = true
			} else {
				var voice = false
			}
			tl(acct.type, data, acct.domain, key, delc, voice, '')
			cardCheck(key)
			ebtCheck(key)
			mediaCheck(key)
			catchCheck(key)
			voiceCheck(key)
			var css = ''
		}
	}
	var box = localStorage.getItem('box')
	if (box == 'absolute') {
		setTimeout(show, 1000)
	}
	if (localStorage.getItem('reverse')) {
		$('#bottom').removeClass('reverse')
		$('.leftside').removeClass('reverse')
	}
	$('#bottom').removeClass('hide')
	if (localStorage.getItem('sec') && localStorage.getItem('sec') != 'nothing') {
		secvis(localStorage.getItem('sec'))
	}
	favTag()
	var cw = localStorage.getItem('always-cw')
	if (cw == 'yes') {
		if (!$('#cw').hasClass('cw-avail')) {
			$('#cw-text').show()
			$('#cw').addClass('yellow-text')
			$('#cw').addClass('cw-avail')
			var cwt = localStorage.getItem('cw-text')
			if (cwt) {
				$('#cw-text').val(cwt)
			}
		}
	}
	$('.box, .boxIn').resizable({
		minHeight: 50,
		minWidth: 50,
		grid: 50,
		resize: function (event, ui) {
			$(this).css('min-width', ui.size.width + 'px')
			$(this).css('max-width', ui.size.width + 'px')
			$(this).css('min-height', ui.size.height + 'px')
			$(this).css('max-height', ui.size.height + 'px')
		},
		stop: function (event, ui) {
			var col = localStorage.getItem('column')
			var o = JSON.parse(col)
			var width = ui.size.width
			var height = ui.size.height
			if ($(this).hasClass('boxIn')) {
				//縦幅。その縦幅を持つカラムのidは
				console.log('tate')
				var key = $(this).attr('tlid')
				var obj = o[key]
				obj.height = height
				o[key] = obj
			} else {
				//横幅。その縦幅を持つカラムのidは
				console.log('yoko')
				var key = $(this).find('.boxIn').attr('tlid')
				var obj = o[key]
				obj.width = width
				o[key] = obj
			}
			var json = JSON.stringify(o)
			localStorage.setItem('column', json)
		},
	})
}
function checkStr(type, data, acct_id, key, delc, voice) {
	if ($('#notice_icon_' + key).hasClass('red-text') && type != 'notf' && type != 'mix') {
		goTop(key)
		tlDiff(type, data, acct_id, key, delc, voice, '')
	} else {
		goTop(key)
	}
}
//セカンダリートゥートボタン
function secvis(set) {
	if (set == 'public') {
		$('#toot-sec-icon').text('public')
		$('#toot-sec-btn').addClass('purple')
	} else if (set == 'unlisted') {
		$('#toot-sec-icon').text('lock_open')
		$('#toot-sec-btn').addClass('blue')
	} else if (set == 'private') {
		$('#toot-sec-icon').text('lock')
		$('#toot-sec-btn').addClass('orange')
	} else if (set == 'direct') {
		$('#toot-sec-icon').text('mail')
		$('#toot-sec-btn').addClass('red')
	} else if (set == 'limited') {
		$('#toot-sec-icon').text('group')
		$('#toot-sec-btn').addClass('teal')
	} else if (set == 'local') {
		$('#toot-sec-icon').text('visibility')
		$('#toot-sec-btn').addClass('light-blue')
	}
	$('#toot-sec-btn').removeClass('hide')
}
//カラム追加
function addColumn() {
	var acct = $('#add-acct-sel').val()
	if (acct != 'webview' && acct != 'noauth') {
		localStorage.setItem('last-use', acct)
	}
	var type = $('#type-sel').val()
	if (acct == 'noauth') {
		acct = $('#noauth-url').val()
		type = 'noauth'
	} else if (acct == 'webview') {
		acct = ''
		type = 'webview'
	}
	var add = {
		domain: acct,
		type: type,
	}
	var multi = localStorage.getItem('column')
	var obj = JSON.parse(multi)
	if (!obj) {
		var leng = 0
		var json = JSON.stringify([add])
		localStorage.setItem('column', json)
	} else {
		var leng = obj.length
		obj.push(add)
		var json = JSON.stringify(obj)
		localStorage.setItem('column', json)
	}

	parseColumn('add')
}
function addselCk() {
	var acct = $('#add-acct-sel').val()
	var domain = localStorage.getItem('domain_' + acct)
	if (acct == 'webview') {
		$('#auth').addClass('hide')
		$('#noauth').addClass('hide')
		$('#webview-add').removeClass('hide')
	} else if (acct == 'noauth') {
		$('#auth').addClass('hide')
		$('#noauth').removeClass('hide')
		$('#webview-add').addClass('hide')
	} else {
		$('#auth').removeClass('hide')
		$('#noauth').addClass('hide')
		$('#webview-add').addClass('hide')
	}
	if (domain == 'knzk.me' || domain == 'mstdn.y-zu.org') {
		$('#type-sel').append('<option value="dm" data-trans="dm" id="direct-add">' + lang.layout_dm + '</option>')
	} else {
		$('#direct-add').remove()
	}
}
//カラム削除
function removeColumn(tlid) {
	$('#sort-box').addClass('hide')
	$('#sort-box').removeClass('show')
	Swal.fire({
		title: lang.lang_layout_deleteColumn,
		text: lang.lang_layout_deleteColumnDesc,
		type: 'warning',
		showCancelButton: true,
		confirmButtonText: lang.lang_yesno,
		cancelButtonText: lang.lang_no,
	}).then((result) => {
		if (result.value) {
			var multi = localStorage.getItem('column')
			var obj = JSON.parse(multi)
			var data = obj[tlid]
			obj.splice(tlid, 1)
			var json = JSON.stringify(obj)
			localStorage.setItem('column', json)
			sortLoad()
			$('#timeline_box_' + tlid + '_box').remove()
			if (!data.left_fold) {
				$('#timeline_box_' + tlid + '_parentBox').remove()
			}
		}
		$('#sort-box').removeClass('hide')
		$('#sort-box').addClass('show')
	})
}

//設定トグル
function setToggle(tlid) {
	colorpicker(tlid)
	if ($('#util-box_' + tlid).hasClass('column-hide')) {
		$('#util-box_' + tlid).css('display', 'block')
		$('#util-box_' + tlid).animate(
			{
				height: '200px',
			},
			{
				duration: 300,
				complete: function () {
					$('#util-box_' + tlid).css('overflow-y', 'scroll')
					$('#util-box_' + tlid).removeClass('column-hide')
				},
			}
		)
	} else {
		$('#util-box_' + tlid).css('overflow-y', 'hidden')
		$('#util-box_' + tlid).animate(
			{
				height: '0',
			},
			{
				duration: 300,
				complete: function () {
					$('#util-box_' + tlid).addClass('column-hide')
					$('#util-box_' + tlid).css('display', 'none')
				},
			}
		)
	}
}
//タグトグル
//設定トグル
function setToggleTag(tlid) {
	if ($('#tag-box_' + tlid).hasClass('column-hide')) {
		$('#tag-box_' + tlid).css('display', 'block')
		$('#tag-box_' + tlid).animate(
			{
				height: '200px',
			},
			{
				duration: 300,
				complete: function () {
					$('#tag-box_' + tlid).css('overflow-y', 'scroll')
					$('#tag-box_' + tlid).removeClass('column-hide')
				},
			}
		)
	} else {
		$('#tag-box_' + tlid).css('overflow-y', 'hidden')
		$('#tag-box_' + tlid).animate(
			{
				height: '0',
			},
			{
				duration: 300,
				complete: function () {
					$('#tag-box_' + tlid).addClass('column-hide')
					$('#tag-box_' + tlid).css('display', 'none')
				},
			}
		)
	}
}
function colorpicker(key) {
	temp = `<div onclick="coloradd('${key}','def','def')" class="pointer">Default</div>
		<div onclick="coloradd('${key}','f44336','white')" class="red white-text pointer">Red</div>
		<div onclick="coloradd('${key}','e91e63','white')" class="pink white-text pointer">Pink</div>
		<div onclick="coloradd('${key}','9c27b0','white')" class="purple white-text pointer">Purple</div>
		<div onclick="coloradd('${key}','673ab7','white')" class="deep-purple white-text pointer">Deep-purple</div>
		<div onclick="coloradd('${key}','3f51b5','white')" class="indigo white-text pointer">Indigo</div>
		<div onclick="coloradd('${key}','2196f3','white')" class="blue white-text pointer">Blue</div>
		<div onclick="coloradd('${key}','03a9f4','black')" class="light-blue black-text pointer">Light-blue</div>
		<div onclick="coloradd('${key}','00bcd4','black')" class="cyan black-text pointer">Cyan</div>
		<div onclick="coloradd('${key}','009688','white')" class="teal white-text pointer">Teal</div>
		<div onclick="coloradd('${key}','4caf50','black')" class="green black-text pointer">Green</div>
		<div onclick="coloradd('${key}','8bc34a','black')" class="light-green black-text pointer">Light-green</div>
		<div onclick="coloradd('${key}','cddc39','black')" class="lime black-text pointer">Lime</div>
		<div onclick="coloradd('${key}','ffeb3b','black')" class="yellow black-text pointer">Yellow</div>
		<div onclick="coloradd('${key}','ffc107','black')" class="amber black-text pointer">Amber</div>
		<div onclick="coloradd('${key}','ff9800','black')" class="orange black-text pointer">Orange</div>
		<div onclick="coloradd('${key}','ff5722','white')" class="deep-orange white-text pointer">Deep-orange</div>
		<div onclick="coloradd('${key}','795548','white')" class="brown white-text pointer">Brown</div>
		<div onclick="coloradd('${key}','9e9e9e','white')" class="grey white-text pointer">Grey</div>
		<div onclick="coloradd('${key}','607d8b','white')" class="blue-grey white-text pointer">Blue-grey</div>
		<div onclick="coloradd('${key}','000000','white')" class="black white-text pointer">Black</div>
		<div onclick="coloradd('${key}','ffffff','black')" class="white black-text pointer">White</div>`
	$('#picker_' + key).html(temp)
}
function coloradd(key, bg, txt) {
	var col = localStorage.getItem('column')
	var o = JSON.parse(col)
	var obj = o[key]
	obj.background = bg
	obj.text = txt
	o[key] = obj
	var json = JSON.stringify(o)
	localStorage.setItem('column', json)
	if (txt == 'def') {
		$('#menu_' + key).css('background-color', '')
		$('#menu_' + key).css('color', '')
		$('#menu_' + key + ' .nex').css('color', '')
	} else {
		$('#menu_' + key).css('background-color', '#' + bg)
		if (txt == 'black') {
			var bghex = '000000'
			var ichex = '9e9e9e'
		} else if (txt == 'white') {
			var bghex = 'ffffff'
			var ichex = 'eeeeee'
		}
		$('#menu_' + key + ' .nex').css('color', '#' + ichex)
		$('#menu_' + key).css('color', '#' + bghex)
	}
}
//禁断のTwitter
function webviewParse(url, key, insert, icnsert, css) {
	var html = `<div class="box" id="timeline_box_${key}_box" tlid="${key}" style="${css}">
			<div class="notice-box z-depth-2" id="menu_${key}" style="${insert}">
				<div class="area-notice">
					<i class="fab fa-twitter waves-effect" id="notice_icon_${key}" style="font-size:40px; padding-top:25%;"></i>
				</div>
				<div class="area-notice_name tl-title">WebView('${url}')</div>
				<div class="area-sta">
				</div>
				<div class="area-a2">
					<a onclick="removeColumn('${key}')" class="setting nex">
						<i class="material-icons waves-effect nex" title="${lang.lang_layout_delthis}" ${icnsert}>cancel</i>
					</a>
				</div>
				<div class="area-a3">
					<a onclick="setToggle('${key}')" class="setting nex" title="${lang.lang_layout_setthis}" ${icnsert}>
						<i class="material-icons waves-effect nex">settings</i>
					</a>
				</div>
			</div>
			<div class="column-hide notf-indv-box z-depth-4" id="notf-box_${key}"></div>
			<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;">
				${lang.lang_layout_headercolor}
				<br>
				<div id="picker_${key}" class="color-picker"></div>
			</div>
			<div class="tl-box" tlid="${key}" style="width:100%;height:100%;">
				<div id="timeline_${key}" class="tl" tlid="${key}" data-type="webview" style="width:100%;height:100%;">
					<webview src="${url}" style="width:100%;height:100%;" id="webview" preload="./js/platform/twitter.js"></webview>
				</div>
			</div>
		</div>`
	return html
}
function unstreamingTL(type, key, basekey, insert, icnsert, left_fold, css, animecss, data) {
	//type名が関数名
	if (!left_fold) {
		var basehtml = `<div style="${css}" class="box ${animecss}" id="timeline_box_${basekey}_parentBox"></div>`
		$('#timeline-container').append(basehtml)
		var left_hold = `<a onclick="leftFoldSet('${key}')" class="setting nex">
				<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftFold}">view_agenda</i>
			</a>
			${lang.lang_layout_leftFold}
			</span><br>`
	} else {
		var left_hold = `<a onclick="leftFoldRemove('${key}')" class="setting nex">
				<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftUnfold}">view_column</i>
			</a>
			${lang.lang_layout_leftUnfold}
			</span><br>`
	}
	if (type == 'utl') {
		var dataHtml = false
	} else {
		var dataHtml = data
	}
	var html = `<div class="boxIn" id="timeline_box_${key}_box" tlid="${key}">
			<div class="notice-box z-depth-2" id="menu_${key}" style="${insert} ">
				<div class="area-notice">
					<i class="material-icons waves-effect" id="notice_icon_${key}" style="font-size:40px; padding-top:25%;" 
						onclick="${type}('${key}','${dataHtml}');" title="${lang.lang_layout_gotop}"></i>
				</div>
				<div class="area-notice_name">
					<span id="notice_${key}" class="tl-title"></span>
				</div>
				<div class="area-a1"></div>
				<div class="area-sta"></div>
				<div class="area-a2">
					<a onclick="removeColumn('${key}')" class="setting nex">
						<i class="material-icons waves-effect nex" title="${lang.lang_layout_delthis}"${icnsert}>cancel</i>
					</a>
				</div>
				<div class="area-a3">
					<a onclick="setToggle('${key}')" class="setting nex" title="${lang.lang_layout_setthis}" ${icnsert}>
						<i class="material-icons waves-effect nex">settings</i>
					</a>
				</div>
			</div>
		<div class="column-hide notf-indv-box" id="util-box_${key}" style="padding:5px;">
			${left_hold}
			<a onclick="mediaToggle('${key}')" class="setting nex">
				<i class="material-icons waves-effect nex" title="${lang.lang_layout_mediafil}">perm_media</i>
				<span id="sta-media-${key}">On</span>
			</a>
			${lang.lang_layout_mediafil}<br>
			${lang.lang_layout_headercolor}<br>
			<div id="picker_${key}" class="color-picker"></div>
		</div>
		<div class="tl-box" tlid="${key}">
			<div id="timeline_${key}" class="tl ${type}-timeline" tlid="${key}" data-type="${type}" data-acct="${data}">
				<div id="landing_${key}" style="text-align:center">
					${lang.lang_layout_nodata}
				</div>
			</div>
		</div>`
	$('#timeline_box_' + basekey + '_parentBox').append(html)
	if (type == 'tootsearch') {
		tootsearch(key, data)
	} else if (type == 'bookmark') {
		console.log(key, data)
		bookmark(key, data)
	} else if (type == 'utl') {
		utl(key, data.acct, data.data)
	}
	cardCheck(key)
	ebtCheck(key)
	mediaCheck(key)
	catchCheck(key)
	voiceCheck(key)
	return true
}
function bookmark(key, data) {
	console.log(key, data)
	if (localStorage.getItem('voice_' + key)) {
		var voice = true
	} else {
		var voice = false
	}
	tl('bookmark', '', data, key, 'false', voice, '')
}
function utl(key, acct_id, data) {
	if (!data) {
		var multi = localStorage.getItem('column')
		var obj = JSON.parse(multi)
		data = obj[key].data
		acct_id = obj[key].domain
	}

	console.log(key, data)
	if (localStorage.getItem('voice_' + key)) {
		var voice = true
	} else {
		var voice = false
	}
	tl('utl', data, acct_id, key, 'false', voice, '')
}
function leftFoldSet(key) {
	var multi = localStorage.getItem('column')
	var obj = JSON.parse(multi)
	obj[key].left_fold = true
	var json = JSON.stringify(obj)
	localStorage.setItem('column', json)
	parseColumn()
}
function leftFoldRemove(key) {
	var multi = localStorage.getItem('column')
	var obj = JSON.parse(multi)
	obj[key].left_fold = false
	var json = JSON.stringify(obj)
	localStorage.setItem('column', json)
	parseColumn()
}
function resetWidth(key) {
	var multi = localStorage.getItem('column')
	var obj = JSON.parse(multi)
	obj[key].width = null
	var json = JSON.stringify(obj)
	localStorage.setItem('column', json)
	$(`#timeline_box_${key}_parentBox`).attr('style', '')
}