thedesk/app/js/ui/layout.js
2019-11-24 23:53:35 +09:00

889 lines
28 KiB
JavaScript

'use strict'
//レイアウトの設定
var websocketOld = []
var websocket = []
var wsHome = []
var wsLocal = []
var websocketNotf = []
//カラム追加ボックストグル
function addColumnMenu() {
$('#left-menu div').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)
notf(key, 0)
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: '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 + '" '
}
}
console.log(acct)
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 width = localStorage.getItem('width')
if (width) {
var css = ' min-width:' + width + 'px;'
}
if (acct.width) {
var css = ' min-width:' + acct.width + 'px;max-width:' + acct.width + 'px;'
}
if (!css) {
var css = ''
}
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)
} 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 {
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" title="${lang.lang_layout_unread}">
<i class="material-icons waves-effect nex">more</i>
</a>`
var notfDomain = acct.domain
var notfKey = key
var if_tag = ''
var if_tag_btn = ''
if (acct.type == 'notf') {
var exclude =
lang.lang_excluded +
`:<br>
<label>
<input type="checkbox" class="filled-in" id="exc-reply-${key}" ${excludeCk(key, 'mention')} />
<span>
<i class="fas fa-share exc-icons"></i>
</span>
</label>
<label>
<input type="checkbox" class="filled-in" id="exc-fav-${key}" ${excludeCk(key, 'favourite')} />
<span>
<i class="fas fa-star exc-icons"></i>
</span>
</label>
<label>
<input type="checkbox" class="filled-in" id="exc-bt-${key}" ${excludeCk(key, 'reblog')} />
<span>
<i class="fas fa-retweet exc-icons"></i>
</span>
</label>
<label>
<input type="checkbox" class="filled-in" id="exc-follow-${key}" ${excludeCk(key, 'follow')} />
<span>
<i class="fas fa-users exc-icons"></i>
</span>
</label>
<label>
<input type="checkbox" class="filled-in" id="exc-poll-${key}" ${excludeCk(key, 'poll')} />
<span>
<i class="fas fa-tasks exc-icons"></i>
</span>
</label>
<button class="btn waves-effect" style="width:60px; padding:0;" onclick="exclude('${key}')">Filter</button>`
if (checkNotfFilter(key)) {
exclude =
exclude +
`<button class="btn red waves-effect" style="width:60px; padding:0;" onclick="resetNotfFilter('${key}')">
Clear all
</button>`
}
exclude = exclude + '<br>'
notfDomain = 'dummy'
notfKey = 'dummy'
} else if (acct.type == 'home') {
var exclude = `<a onclick="ebtToggle('${key}')" class="setting nex">
<i class="fas fa-retweet waves-effect nex" title="${lang.lang_layout_excludingbt}" style="font-size:24px"></i>
<span id="sta-bt-${key}">Off</span>
</a>
${lang.lang_layout_excludingbt}
<br>`
} else if (acct.type == 'tag') {
if_tag = `<div class="column-hide notf-indv-box" id="tag-box_${key}" style="padding:5px;">
Base: ${acct.data}<br>
<div id="tagManager-${key}"></div>
<button onclick="addTag('${key}')" class="btn waves-effect" style="width: 100%">Add</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 = ''
} else {
var exclude = ''
unread = ''
}
var markers = localStorage.getItem('markers')
if (markers == 'yes') {
markers = true
} else {
markers = false
}
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">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_leftFold}">view_agenda</i>
</a>
${lang.lang_layout_leftFold}<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}<br>`
}
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 = ''
}
var html = `
<div class="boxIn" id="timeline_box_${key}_box" tlid="${key}" data-acct="${acct.domain}" style="${addHeight}">
<div class="notice-box z-depth-2" id="menu_${key}" style="${insert}">
<div class="area-notice">
<i class="material-icons waves-effect ${isMisRed}" id="notice_icon_${key}" ${notf_attr}
style="font-size:40px; padding-top:25%;"
onclick="checkStr('${acct.type}','${data}','${acct.domain}', '${key}', '${delc}','${voice}',null)"
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">
<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}">notifications</i>
</a>
${unread}
${if_tag_btn}
</div>
<div class="area-sta">
<span class="new badge teal notf-reply_${acct.domain} hide" data-badge-caption="Reply">0</span>
<span class="new badge yellow black-text notf-fav_${acct.domain} hide" data-badge-caption="Fav">0</span>
<span class="new badge blue notf-bt_${acct.domain} hide" data-badge-caption="BT">0</span>
<span class="new badge orange notf-follow_${acct.domain} hide" data-badge-caption="Follow">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}>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_${notfKey}">
<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;">
${exclude}${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>
<a onclick="cardToggle('${key}')" class="setting nex">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_linkanades}">link</i>
<span id="sta-card-${key}">On</span>
</a>
${lang.lang_layout_linkana}
<br>
<a onclick="voiceToggle('${key}')" class="setting nex">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_tts}">hearing</i>
<span id="sta-voice-${key}">On</span>
</a>
${lang.lang_layout_tts}
TL<br>
<a onclick="columnReload('${key}','${acct.type}')" class="setting nex ${if_misskey_hide}">
<i class="material-icons waves-effect nex" title="${lang.lang_layout_reconnect}">refresh</i>
</a>
<span>
${lang.lang_layout_reconnect}
</span>
<br>
${lang.lang_layout_headercolor}
<br>
<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,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: lang.lang_yesno,
cancelButtonText: lang.lang_no
}).then(result => {
if (result.value) {
var multi = localStorage.getItem('column')
var obj = JSON.parse(multi)
obj.splice(tlid, 1)
var json = JSON.stringify(obj)
localStorage.setItem('column', json)
sortLoad()
$('#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) {
var 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>`
}
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}','${data}');" 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)
}
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 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()
}