WIP: ditch jQuery and duplicated funcs

app/js/common/about.js

@@ -1,5 +1,5 @@
-//@ts-check
 //このソフトについて
 function about() {
 	postMessage(["sendSinmpleIpc", "about"], "*")
 }
+document.getElementById('onClickAbout').addEventListener('click', about)

app/js/common/api.js

@@ -0,0 +1,17 @@
+async function getJson(start) {
+    let json = {}
+    let response = null
+    response = await fetch(start, {
+        method: 'GET',
+        headers: {
+            'content-type': 'application/json'
+        }
+    })
+    if (!response.ok) {
+        response.text().then(function (text) {
+            setLog(response.url, response.status, text)
+        })
+    }
+    json = await response.json()
+    return json
+}

app/js/common/blurhash.js

@@ -1,4 +1,4 @@
-var digitCharacters = [
+const digitCharacters = [
     "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
     "A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
     "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",
@@ -10,16 +10,16 @@ var digitCharacters = [
     "|", "}", "~",
 ];
 function decode83(str) {
-    var value = 0;
+    let value = 0;
-    for (var i = 0; i < str.length; i++) {
+    for (let i = 0; i < str.length; i++) {
-        var c = str[i];
+        const c = str[i];
-        var digit = digitCharacters.indexOf(c);
+        const digit = digitCharacters.indexOf(c);
         value = value * 83 + digit;
     }
     return value;
 }
 function linearTosRGB(value) {
-    var v = Math.max(0, Math.min(1, value));
+    const v = Math.max(0, Math.min(1, value));
     if (v <= 0.0031308) {
         return Math.round(v * 12.92 * 255 + 0.5);
     }
@@ -28,7 +28,7 @@ function linearTosRGB(value) {
     }
 }
 function sRGBToLinear(value) {
-    var v = value / 255;
+    const v = value / 255;
     if (v <= 0.04045) {
         return v / 12.92;
     }
@@ -37,18 +37,18 @@ function sRGBToLinear(value) {
     }
 }
 function decodeDC(value) {
-    var intR = value >> 16;
+    const intR = value >> 16;
-    var intG = (value >> 8) & 255;
+    const intG = (value >> 8) & 255;
-    var intB = value & 255;
+    const intB = value & 255;
     return [sRGBToLinear(intR), sRGBToLinear(intG), sRGBToLinear(intB)];
 };
 function sign(n) { return (n < 0 ? -1 : 1); }
 function signPow(val, exp) { return sign(val) * Math.pow(Math.abs(val), exp); }
 function decodeDC2(value, maximumValue) {
-    var quantR = Math.floor(value / (19 * 19));
+    const quantR = Math.floor(value / (19 * 19));
-    var quantG = Math.floor(value / 19) % 19;
+    const quantG = Math.floor(value / 19) % 19;
-    var quantB = value % 19;
+    const quantB = value % 19;
-    var rgb = [
+    const rgb = [
         signPow((quantR - 9) / 9, 2.0) * maximumValue,
         signPow((quantG - 9) / 9, 2.0) * maximumValue,
         signPow((quantB - 9) / 9, 2.0) * maximumValue,
@@ -61,45 +61,45 @@ function decodeblur(blurhash, width, height, punch) {
         console.error('too short blurhash');
         return null;
     }
-    var sizeFlag = decode83(blurhash[0]);
+    const sizeFlag = decode83(blurhash[0]);
-    var numY = Math.floor(sizeFlag / 9) + 1;
+    const numY = Math.floor(sizeFlag / 9) + 1;
-    var numX = (sizeFlag % 9) + 1;
+    const numX = (sizeFlag % 9) + 1;
-    var quantisedMaximumValue = decode83(blurhash[1]);
+    const quantisedMaximumValue = decode83(blurhash[1]);
-    var maximumValue = (quantisedMaximumValue + 1) / 166;
+    const maximumValue = (quantisedMaximumValue + 1) / 166;
     if (blurhash.length !== 4 + 2 * numX * numY) {
         console.error('blurhash length mismatch', blurhash.length, 4 + 2 * numX * numY);
         return null;
     }
-    var colors = new Array(numX * numY);
+    let colors = new Array(numX * numY);
-    for (var i = 0; i < colors.length; i++) {
+    for (let i = 0; i < colors.length; i++) {
         if (i === 0) {
-            var value = decode83(blurhash.substring(2, 6));
+            const value = decode83(blurhash.substring(2, 6));
             colors[i] = decodeDC(value);
         }
         else {
-            var value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));
+            const value = decode83(blurhash.substring(4 + i * 2, 6 + i * 2));
             colors[i] = decodeDC2(value, maximumValue * punch);
         }
     }
-    var bytesPerRow = width * 4;
+    const bytesPerRow = width * 4;
-    var pixels = new Uint8ClampedArray(bytesPerRow * height);
+    let pixels = new Uint8ClampedArray(bytesPerRow * height);
     for (var y = 0; y < height; y++) {
         for (var x = 0; x < width; x++) {
             var r = 0;
             var g = 0;
             var b = 0;
-            for (var j = 0; j < numY; j++) {
+            for (let j = 0; j < numY; j++) {
-                for (var i = 0; i < numX; i++) {
+                for (let i = 0; i < numX; i++) {
-                    var basis = Math.cos(Math.PI * x * i / width) * Math.cos(Math.PI * y * j / height);
+                    let basis = Math.cos(Math.PI * x * i / width) * Math.cos(Math.PI * y * j / height);
-                    var color = colors[i + j * numX];
+                    let color = colors[i + j * numX];
                     r += color[0] * basis;
                     g += color[1] * basis;
                     b += color[2] * basis;
                 }
             }
-            var intR = linearTosRGB(r);
+            const intR = linearTosRGB(r);
-            var intG = linearTosRGB(g);
+            const intG = linearTosRGB(g);
-            var intB = linearTosRGB(b);
+            const intB = linearTosRGB(b);
             pixels[4 * x + 0 + y * bytesPerRow] = intR;
             pixels[4 * x + 1 + y * bytesPerRow] = intG;
             pixels[4 * x + 2 + y * bytesPerRow] = intB;
@@ -109,9 +109,9 @@ function decodeblur(blurhash, width, height, punch) {
     return pixels;
 }
 function parseBlur(blur) {
-    var canvas = document.getElementById('canvas');
+    const canvas = document.getElementById('canvas');
-    var ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext('2d');
-    var pixels = decodeblur(blur, 32, 32)
+    const pixels = decodeblur(blur, 32, 32)
     const imageData = new ImageData(pixels, 32, 32);
 
     ctx.putImageData(imageData, 0, 0);

app/js/common/keyshortcut.js

@@ -1,26 +1,28 @@
-selectedColumn = 0
+let selectedColumn = 0
-selectedToot = 0
+let selectedToot = 0
-$(function($) {
+$(function ($) {
 	//キーボードショートカット
-	$(window).keydown(function(e) {
+	$(window).keydown(function (e) {
-		var hasFocus = $('input').is(':focus')
+		const hasFocus = isFocused('input')
-		var hasFocus2 = $('textarea').is(':focus')
+		const hasFocus2 = isFocused('textarea')
+		const postBox = document.querySelector('#textarea')
+		let wv = false
 		if (document.getElementById('webview')) {
-			if ($('#webviewsel:checked').val()) {
+			if (document.querySelector('#webviewsel:checked').value) {
-				var wv = false
+				wv = false
 			} else {
-				var wv = true
+				wv = true
 			}
 		} else {
-			var wv = true
+			wv = true
 		}
 		//Enter
 		if (e.keyCode === 13) {
-			if ($('#src').is(':focus')) {
+			if (isFocused('#src')) {
 				src()
 				return false
 			}
-			if ($('#list-add').is(':focus')) {
+			if (isFocused('#list-add')) {
 				makeNewList()
 				return false
 			}
@@ -92,7 +94,7 @@ $(function($) {
 			}
 			//X:開閉
 			if (e.keyCode === 88) {
-				if (!$('#post-box').hasClass('appear')) {
+				if (!document.querySelector('#post-box').classList.contains('appear')) {
 					show()
 					$('textarea').focus()
 				} else {
@@ -102,10 +104,10 @@ $(function($) {
 			}
 			//N:新トゥート
 			if (e.keyCode === 78) {
-				if (!$('#post-box').hasClass('appear')) {
+				if (!document.querySelector('#post-box').classList.contains('appear')) {
 					show()
 				}
-				$('textarea').focus()
+				postBox.focus()
 				return false
 			}
 			//Ctrl+E:全ての通知未読を既読にする
@@ -153,7 +155,7 @@ $(function($) {
 			//数字:TL
 			if (event.metaKey || event.ctrlKey) {
 				if (e.keyCode >= 49 && e.keyCode <= 57) {
-					var kz = e.keyCode - 49
+					const kz = e.keyCode - 49
 					goColumn(kz)
 					return false
 				}
@@ -161,7 +163,7 @@ $(function($) {
 			//矢印:選択
 			if (e.code == 'ArrowLeft') {
 				//left
-				if ($('#imagemodal').hasClass('open')) {
+				if (document.querySelector('#imagemodal').classList.contains('open')) {
 					imgCont('prev')
 					return false
 				}
@@ -172,7 +174,7 @@ $(function($) {
 				return false
 			} else if (e.code == 'ArrowUp') {
 				//up
-				if ($('#imagemodal').hasClass('open')) {
+				if (document.querySelector('#imagemodal').classList.contains('open')) {
 					return false
 				}
 				if (selectedToot > 0) {
@@ -182,7 +184,7 @@ $(function($) {
 				return false
 			} else if (e.code == 'ArrowRight') {
 				//right
-				if ($('#imagemodal').hasClass('open')) {
+				if (document.querySelector('#imagemodal').classList.contains('open')) {
 					imgCont('next')
 					return false
 				}
@@ -193,7 +195,7 @@ $(function($) {
 				return false
 			} else if (e.code == 'ArrowDown') {
 				//down
-				if ($('#imagemodal').hasClass('open')) {
+				if (document.querySelector('#imagemodal').classList.contains('open')) {
 					return false
 				}
 				selectedToot++
@@ -210,24 +212,21 @@ $(function($) {
 				}
 			}
 			//選択時
+			const selectedId = document.querySelector('.selectedToot').getAttribute('unique-id')
+			const selectedAcctIds = document.querySelector(`#timeline_${selectedColumn}`).getAttribute('data-acct')
 			if (e.keyCode == 70) {
-				var id = $('.selectedToot').attr('unique-id')
+				fav(selectedId, selectedAcctIds, false)
-				var acct_id = $('#timeline_' + selectedColumn).attr('data-acct')
-				fav(id, acct_id, false)
 				return false
 			}
 			if (e.keyCode == 66) {
-				var id = $('.selectedToot').attr('unique-id')
+				rt(selectedId, selectedAcctIds, false)
-				var acct_id = $('#timeline_' + selectedColumn).attr('data-acct')
-				rt(id, acct_id, false)
 				return false
 			}
 			if (e.keyCode == 82) {
-				var id = $('.selectedToot').attr('unique-id')
+				const target = document.querySelector('.selectedToot .rep-btn')
-				var acct_id = $('#timeline_' + selectedColumn).attr('data-acct')
+				const ats_cm = target.getAttribute('data-men')
-				var ats_cm = $('.selectedToot .rep-btn').attr('data-men')
+				const mode = target.getAttribute('data-visen')
-				var mode = $('.selectedToot .rep-btn').attr('data-visen')
+				re(selectedId, ats_cm, selectedAcctIds, mode)
-				re(id, ats_cm, acct_id, mode)
 				return false
 			}
 		}
@@ -237,9 +236,10 @@ $(function($) {
 				//C+S+(No):ワンクリ
 				if ((event.metaKey || event.ctrlKey) && event.shiftKey) {
 					if (e.keyCode >= 49 && e.keyCode <= 51) {
-						var no = e.keyCode - 48
+						const no = e.keyCode - 48
-						if (localStorage.getItem('oks-' + no)) {
+						const oks = localStorage.getItem('oks-' + no)
-							$('#textarea').val($('#textarea').val() + localStorage.getItem('oks-' + no))
+						if (oks) {
+							postBox.value = postBox.value + oks
 						}
 						return false
 					}
@@ -248,28 +248,29 @@ $(function($) {
 		}
 	})
 	//クリアボタン
-	$('#clear').click(function() {
+	document.getElementById('clear').addEventListener('click', clear)
-		clear()
-	})
 })
 //選択する
 function tootSelector(column, toot) {
-	$('.cvo').removeClass('selectedToot')
+	const selectedToot = document.querySelector('.selectedToot')
-	$('#timeline_' + column + ' .cvo')
+	let rect = {top: 0}
-		.eq(toot)
+	if (selectedToot) {
-		.addClass('selectedToot')
+		selectedToot.classList.remove('selectedToot')
-	var scr = $('.tl-box[tlid=' + column + ']').scrollTop()
+		rect = selectedToot.getBoundingClientRect()
-	var elem = $('.selectedToot').offset().top
+	}
-	var top = elem - $('.tl-box').height() + scr
+	document.querySelectorAll(`#timeline_${column} .cvo`)[toot].classList.add('selectedToot')
+	const scr = document.querySelector(`#tlBox${column}`).scrollTop
+	const elem = rect.top + document.body.scrollTop
+	let top = elem - getHeight('.tl-box') + scr
 	if (top > 0) {
-		top = top + $('.selectedToot').height()
+		top = top + getHeight('.selectedToot')
 		if (top > scr) {
-			$('.tl-box[tlid=' + column + ']').animate({ scrollTop: top })
+			$(`#tlBox${column}`).animate({ scrollTop: top })
 		}
 	} else if (elem < 0) {
-		var to = scr + elem - $('.selectedToot').height()
+		const to = scr + elem - getHeight('.selectedToot')
 		if (to < scr) {
-			$('.tl-box[tlid=' + column + ']').animate({ scrollTop: to })
+			$(`#tlBox${column}`).animate({ scrollTop: to })
 		}
 	}
 }

app/js/common/modal.js

@@ -1,7 +1,8 @@
 //モーダル・ドロップダウンの各種設定
 $(document).ready(function () {
   // the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
-  $('.modal').modal({
+  const modals = document.querySelectorAll('.modal')
+  M.Modal.init(modals, {
     inDuration: 300,
     outDuration: 225,
     constrainWidth: false, // Does not change width of dropdown to that of the activator
@@ -10,8 +11,9 @@ $(document).ready(function () {
     belowOrigin: false, // Displays dropdown below the button
     alignment: 'left', // Displays dropdown with edge aligned to the left of button
     stopPropagation: false
-  });
+  })
-  $('.dropdown-trigger').dropdown({
+  const dropdown = document.querySelectorAll('.modal')
+  M.Dropdown.init(dropdown, {
     inDuration: 300,
     outDuration: 225,
     constrainWidth: false, // Does not change width of dropdown to that of the activator
@@ -20,10 +22,10 @@ $(document).ready(function () {
     belowOrigin: false, // Displays dropdown below the button
     alignment: 'left', // Displays dropdown with edge aligned to the left of button
     stopPropagation: false // Stops event propagation
-  }
+  })
-  );
+  M.Collapsible.init(document.querySelectorAll('.collapsible'));
-  $('.collapsible').collapsible();
+  const videoModal = document.querySelectorAll('#videomodal')
-  $('#videomodal').modal({
+  M.Modal.init(videoModal, {
     onCloseEnd: stopVideo
-  });
+  })
-});
+})

app/js/common/sha256.js

@@ -1,31 +1,31 @@
-var sha256 = function sha256(ascii) {
+const sha256 = function sha256(ascii) {
 	function rightRotate(value, amount) {
 		return (value >>> amount) | (value << (32 - amount));
 	};
 
-	var mathPow = Math.pow;
+	const mathPow = Math.pow;
-	var maxWord = mathPow(2, 32);
+	const maxWord = mathPow(2, 32);
-	var lengthProperty = 'length'
+	const lengthProperty = 'length'
-	var i, j; // Used as a counter across the whole file
+	let i, j; // Used as a counter across the whole file
-	var result = ''
+	let result = ''
 
-	var words = [];
+	let words = [];
-	var asciiBitLength = ascii[lengthProperty] * 8;
+	const asciiBitLength = ascii[lengthProperty] * 8;
 
 	//* caching results is optional - remove/add slash from front of this line to toggle
 	// Initial hash value: first 32 bits of the fractional parts of the square roots of the first 8 primes
 	// (we actually calculate the first 64, but extra values are just ignored)
-	var hash = sha256.h = sha256.h || [];
+	let hash = sha256.h = sha256.h || [];
 	// Round constants: first 32 bits of the fractional parts of the cube roots of the first 64 primes
-	var k = sha256.k = sha256.k || [];
+	let k = sha256.k = sha256.k || [];
-	var primeCounter = k[lengthProperty];
+	let primeCounter = k[lengthProperty];
 	/*/
 	var hash = [], k = [];
 	var primeCounter = 0;
 	//*/
 
-	var isComposite = {};
+	let isComposite = {};
-	for (var candidate = 2; primeCounter < 64; candidate++) {
+	for (let candidate = 2; primeCounter < 64; candidate++) {
 		if (!isComposite[candidate]) {
 			for (i = 0; i < 313; i += candidate) {
 				isComposite[i] = candidate;
@@ -47,21 +47,21 @@ var sha256 = function sha256(ascii) {
 
 	// process each chunk
 	for (j = 0; j < words[lengthProperty];) {
-		var w = words.slice(j, j += 16); // The message is expanded into 64 words as part of the iteration
+		let w = words.slice(j, j += 16); // The message is expanded into 64 words as part of the iteration
-		var oldHash = hash;
+		const oldHash = hash;
 		// This is now the undefinedworking hash", often labelled as variables a...g
 		// (we have to truncate as well, otherwise extra entries at the end accumulate
 		hash = hash.slice(0, 8);
 
 		for (i = 0; i < 64; i++) {
-			var i2 = i + j;
+			const i2 = i + j;
 			// Expand the message into 64 words
 			// Used below if 
-			var w15 = w[i - 15], w2 = w[i - 2];
+			const w15 = w[i - 15], w2 = w[i - 2];
 
 			// Iterate
-			var a = hash[0], e = hash[4];
+			const a = hash[0], e = hash[4];
-			var temp1 = hash[7]
+			const temp1 = hash[7]
 				+ (rightRotate(e, 6) ^ rightRotate(e, 11) ^ rightRotate(e, 25)) // S1
 				+ ((e & hash[5]) ^ ((~e) & hash[6])) // ch
 				+ k[i]
@@ -74,7 +74,7 @@ var sha256 = function sha256(ascii) {
 				) | 0
 				);
 			// This is only used once, so *could* be moved below, but it only saves 4 bytes and makes things unreadble
-			var temp2 = (rightRotate(a, 2) ^ rightRotate(a, 13) ^ rightRotate(a, 22)) // S0
+			const temp2 = (rightRotate(a, 2) ^ rightRotate(a, 13) ^ rightRotate(a, 22)) // S0
 				+ ((a & hash[1]) ^ (a & hash[2]) ^ (hash[1] & hash[2])); // maj
 
 			hash = [(temp1 + temp2) | 0].concat(hash); // We don't bother trimming off the extra ones, they're harmless as long as we're truncating when we do the slice()
@@ -88,7 +88,7 @@ var sha256 = function sha256(ascii) {
 
 	for (i = 0; i < 8; i++) {
 		for (j = 3; j + 1; j--) {
-			var b = (hash[i] >> (j * 8)) & 255;
+			const b = (hash[i] >> (j * 8)) & 255;
 			result += ((b < 16) ? 0 : '') + b.toString(16);
 		}
 	}

app/js/common/time.js

@@ -36,7 +36,7 @@
       return inWords($.timeago.datetime(timestamp));
     }
   };
-  var $t = $.timeago;
+  const $t = $.timeago;
   $.extend($.timeago, {
     settings: {
       refreshMillis: 60000,
@@ -72,9 +72,9 @@
         throw 'timeago allowPast and allowFuture settings can not both be set to false.';
       }
 
-      var $l = this.settings.strings;
+      const $l = this.settings.strings;
-      var prefix = $l.prefixAgo;
+      let prefix = $l.prefixAgo;
-      var suffix = $l.suffixAgo;
+      let suffix = $l.suffixAgo;
       if (this.settings.allowFuture) {
         if (distanceMillis < 0) {
           prefix = $l.prefixFromNow;
@@ -86,19 +86,19 @@
         return this.settings.strings.inPast;
       }
 
-      var seconds = Math.abs(distanceMillis) / 1000;
+      const seconds = Math.abs(distanceMillis) / 1000;
-      var minutes = seconds / 60;
+      const minutes = seconds / 60;
-      var hours = minutes / 60;
+      const hours = minutes / 60;
-      var days = hours / 24;
+      const days = hours / 24;
-      var years = days / 365;
+      const years = days / 365;
 
       function substitute(stringOrFunction, number) {
-        var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
+        const string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
-        var value = ($l.numbers && $l.numbers[number]) || number;
+        const value = ($l.numbers && $l.numbers[number]) || number;
         return string.replace(/%d/i, value);
       }
 
-      var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||
+      const words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||
         seconds < 90 && substitute($l.minute, 1) ||
         minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||
         minutes < 90 && substitute($l.hour, 1) ||
@@ -110,13 +110,13 @@
         years < 1.5 && substitute($l.year, 1) ||
         substitute($l.years, Math.round(years));
 
-      var separator = $l.wordSeparator || "";
+        const separator = $l.wordSeparator || "";
       if ($l.wordSeparator === undefined) { separator = " "; }
       return $.trim([prefix, words, suffix].join(separator));
     },
 
     parse: function (iso8601) {
-      var s = $.trim(iso8601);
+      let s = $.trim(iso8601);
       s = s.replace(/\.\d+/, ""); // remove milliseconds
       s = s.replace(/-/, "/").replace(/-/, "/");
       s = s.replace(/T/, " ").replace(/Z/, " UTC");
@@ -125,7 +125,7 @@
       return new Date(s);
     },
     datetime: function (elem) {
-      var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
+      const iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
       return $t.parse(iso8601);
     },
     isTime: function (elem) {
@@ -137,18 +137,18 @@
   // functions that can be called via $(el).timeago('action')
   // init is default when no action is given
   // functions are called with context of a single element
-  var functions = {
+  const functions = {
     init: function () {
       functions.dispose.call(this);
-      var refresh_el = $.proxy(refresh, this);
+      const refresh_el = $.proxy(refresh, this);
       refresh_el();
-      var $s = $t.settings;
+      const $s = $t.settings;
       if ($s.refreshMillis > 0) {
         this._timeagoInterval = setInterval(refresh_el, $s.refreshMillis);
       }
     },
     update: function (timestamp) {
-      var date = (timestamp instanceof Date) ? timestamp : $t.parse(timestamp);
+      const date = (timestamp instanceof Date) ? timestamp : $t.parse(timestamp);
       $(this).data('timeago', { datetime: date });
       if ($t.settings.localeTitle) {
         $(this).attr("title", date.toLocaleString());
@@ -168,7 +168,7 @@
   };
 
   $.fn.timeago = function (action, options) {
-    var fn = action ? functions[action] : functions.init;
+    const fn = action ? functions[action] : functions.init;
     if (!fn) {
       throw new Error("Unknown function name '" + action + "' for timeago");
     }
@@ -180,7 +180,7 @@
   };
 
   function refresh() {
-    var $s = $t.settings;
+    const $s = $t.settings;
 
     //check if it's still visible
     if ($s.autoDispose && !$.contains(document.documentElement, this)) {
@@ -189,7 +189,7 @@
       return this;
     }
 
-    var data = prepareData(this);
+    const data = prepareData(this);
 
     if (!isNaN(data.datetime)) {
       if ($s.cutoff === 0 || Math.abs(distance(data.datetime)) < $s.cutoff) {
@@ -207,7 +207,7 @@
     element = $(element);
     if (!element.data("timeago")) {
       element.data("timeago", { datetime: $t.datetime(element) });
-      var text = $.trim(element.text());
+      const text = $.trim(element.text());
       if ($t.settings.localeTitle) {
         element.attr("title", element.data('timeago').datetime.toLocaleString());
       } else if (text.length > 0 && !($t.isTime(element) && element.attr("title"))) {

app/js/common/version.js

@@ -1,26 +1,14 @@
 //バージョンチェッカー
-function verck(ver, jp) {
+async function verck(ver, jp) {
 	console.log('%c Welcome😊 ' + ver, 'color: red;font-size:200%;')
-	$('body').addClass(localStorage.getItem('platform'))
+	document.querySelector('body').classList.add(localStorage.getItem('platform'))
-	var date = new Date()
+	const date = new Date()
-	var showVer = false
+	let showVer = false
 	if (localStorage.getItem('ver') != ver && localStorage.getItem('winstore')) {
-		//ちょっと削除とリンク解析の都合上アレ(s)
-		//対象外のアプデ:storageが20の最初まで"Usamin (18.6.5)"
-		if (!localStorage.getItem('usamin_18_6_5_flag')) {
-			localStorage.setItem('usamin_18_6_5_flag', true)
-			var multi = localStorage.getItem('column')
-			var obj = JSON.parse(multi)
-			for (var i = 0; i < obj.length; i++) {
-				localStorage.removeItem('card_' + i)
-			}
-		}
-		//ちょっと削除とリンク解析の都合上アレ(e)
 		showVer = true
 		console.log('%c Thank you for your update🎉', 'color: red;font-size:200%;')
-		$(document).ready(function() {
 		if (localStorage.getItem('winstore') && !pwa) {
-				$('#releasenote').modal('open')
+			M.Modal.getInstance(document.querySelector('#releasenote')).open()
 		}
 		verp = ver.replace('(', '')
 		verp = verp.replace('.', '-')
@@ -31,11 +19,10 @@ function verck(ver, jp) {
 		verp = verp.replace(' ', '_')
 		console.log('%c ' + verp, 'color: red;font-size:200%;')
 		if (lang.language == 'ja') {
-				$('#release-' + verp).show()
+			showElm(`#release-${verp}`)
 		} else {
-				$('#release-en').show()
+			showElm('#release-en')
 		}
-		})
 	}
 	localStorage.setItem('ver', ver)
 	if (!showVer) {
@@ -45,88 +32,67 @@ function verck(ver, jp) {
 			!localStorage.getItem('showSupportMe')
 		) {
 			if (date.getMonth() == 11) {
-				var yrs = date.getFullYear() + 1
+				yrs = date.getFullYear() + 1
-				var nextmonth = yrs * 100 + 1
+				nextmonth = yrs * 100 + 1
 			} else {
-				var yrs = date.getFullYear() 
+				yrs = date.getFullYear()
-				var nextmonth = yrs * 100 + date.getMonth() + 2
+				nextmonth = yrs * 100 + date.getMonth() + 2
 			}
 			if (lang.language != 'ja') {
-				$('#support-btm-ja').addClass('hide')
+				document.querySelector('#support-btm-ja').classList.add('hide')
-				$('#support-btm-en').removeClass('hide')
+				document.querySelector('#support-btm-en').classList.remove('hide')
 			}
 			localStorage.setItem('showSupportMe', nextmonth)
-			$('#support-btm').removeClass('hide')
+			document.querySelector('#support-btm').classList.remove('hide')
-			$('#support-btm').animate(
+			document.querySelector('#support-btm').animate([
 				{
-					bottom: '0'
+					bottom: '-500px'
 				},
 				{
-					duration: 300
+					bottom: '0'
 				}
-			)
+			], 300);
 		}
 	}
-	var platform = localStorage.getItem('platform')
+	const platform = localStorage.getItem('platform')
 	console.log('Your platform:' + platform)
 	if (!localStorage.getItem('winstore') && !pwa) {
-		$('#start').css('display', 'flex')
+		document.querySelector('#start').style.display = 'flex'
 	}
+	let winstore = false
 	if (
 		localStorage.getItem('winstore') == 'brewcask' ||
 		localStorage.getItem('winstore') == 'snapcraft' ||
 		localStorage.getItem('winstore') == 'winstore'
 	) {
-		var winstore = true
+		winstore = true
 	} else {
-		var winstore = false
+		winstore = false
 	}
-	var l = 5
+	const l = 5
 	// 生成する文字列に含める文字セット
-	var c = 'abcdefghijklmnopqrstuvwxyz0123456789'
+	const c = 'abcdefghijklmnopqrstuvwxyz0123456789'
-	var cl = c.length
+	const cl = c.length
-	var r = ''
+	const r = ''
 	for (var i = 0; i < l; i++) {
 		r += c[Math.floor(Math.random() * cl)]
 	}
-	var start = 'https://thedesk.top/ver.json'
+	const start = 'https://thedesk.top/ver.json'
-	fetch(start, {
+	const mess = await getJson(start)
-		method: 'GET'
-	})
-		.then(function(response) {
-			if (!response.ok) {
-				response.text().then(function(text) {
-					setLog(response.url, response.status, text)
-				})
-			}
-			return response.json()
-		})
-		.catch(function(error) {
-			todo(error)
-			setLog(start, 'JSON', error)
-			setLog(start, 'JSON', error)
-			console.error(error)
-		})
-		.then(function(mess) {
 	console.table(mess)
 	if (mess) {
-				//askjp_jp_ua: 2019年10月24日、mstdn.jpによるユーザーエージェントアクセス制限
+		let newest = null
-				if (jp && mess.jp_ua && !localStorage.getItem('askjp_jp_ua')) {
-					localStorage.setItem('askjp_jp_ua', true)
-					$('#askjp_jp_ua').removeClass('hide')
-				}
-				var platform = localStorage.getItem('platform')
 		if (platform == 'darwin') {
-					var newest = mess.desk_mac
+			newest = mess.desk_mac
 		} else {
-					var newest = mess.desk
+			newest = mess.desk
 		}
 		if (newest == ver) {
 			todo(lang.lang_version_usever.replace('{{ver}}', mess.desk))
 			//betaかWinstoreならアプデチェックしない
 		} else if (ver.indexOf('beta') != -1 || winstore) {
+			//skipped
 		} else {
-					localStorage.removeItem('instance')
 			if (localStorage.getItem('new-ver-skip')) {
 				if (localStorage.getItem('next-ver') != newest) {
 					postMessage(['sendSinmpleIpc', 'update'], '*')
@@ -139,201 +105,137 @@ function verck(ver, jp) {
 			}
 		}
 	}
-		})
+	let lni = localStorage.getItem('last-notice-id')
-	if (!localStorage.getItem('last-notice-id')) {
+	if (!lni) {
 		localStorage.setItem('last-notice-id', 0)
+		lni = 0
 	}
-	var start = 'https://thedesk.top/notice/index.php?since_id=' + localStorage.getItem('last-notice-id')
+	const getNotice = 'https://thedesk.top/notice/index.php?since_id=' + lni
-	fetch(start, {
+	const notices = await getJson(getNotice)
-		method: 'GET',
+	if (notices.length < 1) {
-		cors: true
-	})
-		.then(function(response) {
-			if (!response.ok) {
-				response.text().then(function(text) {
-					setLog(response.url, response.status, text)
-				})
-			}
-			return response.json()
-		})
-		.catch(function(error) {
-			todo(error)
-			setLog(start, 'JSON', error)
-			console.error(error)
-		})
-		.then(function(mess) {
-			if (mess.length < 1) {
 		return false
 	} else {
-				var last = localStorage.getItem('last-notice-id')
+		localStorage.setItem('last-notice-id', notices[0].ID)
-				localStorage.setItem('last-notice-id', mess[0].ID)
+		for (i = 0; i < notices.length; i++) {
-				for (i = 0; i < mess.length; i++) {
+			var obj = notices[i]
-					var obj = mess[i]
+			if (obj.ID * 1 <= lni) {
-					if (obj.ID * 1 <= last) {
 				break
 			} else {
-						if (obj.type == 'textv2') {
+				toastInterpret(obj)
-							if (~obj.languages.indexOf(lang.language)) {
-								var showVer = true
-								if (obj.toot != '') {
-									var toot =
-										'<button class="btn-flat toast-action" onclick="detEx(\'' +
-										obj.toot +
-										"','main')\">Show</button>"
-								} else {
-									var toot = ''
-								}
-								if (obj.ver != '') {
-									if (obj.ver == ver) {
-										showVer = true
-									} else {
-										showVer = false
-									}
-								}
-								if (obj.domain != '') {
-									var multi = localStorage.getItem('multi')
-									if (multi) {
-										showVer = false
-										var accts = JSON.parse(multi)
-										Object.keys(accts).forEach(function(key) {
-											var acct = accts[key]
-											if (acct.domain == obj.domain) {
-												showVer = true
-											}
-										})
-									}
-								}
-								if (showVer) {
-									M.toast({
-										html:
-											escapeHTML(obj.text) +
-											toot +
-											'<span class="sml grey-text">(スライドして消去)</span>',
-										displayLength: 86400
-									})
 			}
 		}
 	}
-					}
-				}
-			}
-		})
 }
-var infostreaming = false
+let infostreaming = false
 function infowebsocket() {
 	infows = new WebSocket('wss://thedesk.top/ws/')
-	infows.onopen = function(mess) {
+	infows.onopen = function (mess) {
 		console.log([tlid, ':Connect Streaming Info:', mess])
 		infostreaming = true
 	}
-	infows.onmessage = function(mess) {
+	infows.onmessage = function (mess) {
 		console.log([tlid, ':Receive Streaming:', JSON.parse(mess.data)])
-		var obj = JSON.parse(mess.data)
+		const obj = JSON.parse(mess.data)
-		if (obj.type != 'counter') {
-			if (obj.type == 'textv2') {
-				if (~obj.languages.indexOf(lang.language)) {
 		localStorage.setItem('last-notice-id', obj.id)
-					var showVer = true
+		if (obj.type != 'counter') {
-					if (obj.toot != '') {
+			toastInterpret(obj)
-						var toot =
-							'<button class="btn-flat toast-action" onclick="detEx(\'' +
-							obj.toot +
-							"','main')\">Show</button>"
 		} else {
-						var toot = ''
+			document.querySelector('#persons').innerText = obj.text
-					}
-					if (obj.ver != '') {
-						if (obj.ver == ver) {
-							showVer = true
-						} else {
-							showVer = false
 		}
 	}
-					if (obj.domain != '') {
+	infows.onerror = function (error) {
-						var multi = localStorage.getItem('multi')
-						if (multi) {
-							showVer = false
-							var accts = JSON.parse(multi)
-							Object.keys(accts).forEach(function(key) {
-								var acct = accts[key]
-								if (acct.domain == obj.domain) {
-									showVer = true
-								}
-							})
-						}
-					}
-					if (showVer) {
-						console.log(obj.text)
-						console.log(escapeHTML(obj.text))
-						M.toast({
-							html:
-								escapeHTML(obj.text) +
-								toot +
-								'<span class="sml grey-text">(スライドして消去)</span>',
-							displayLength: 86400
-						})
-					}
-				}
-			}
-		} else {
-			$('#persons').text(obj.text)
-		}
-	}
-	infows.onerror = function(error) {
 		infostreaming = false
 		console.error('Error closing:info')
 		console.error(error)
 		return false
 	}
-	infows.onclose = function() {
+	infows.onclose = function () {
 		infostreaming = false
 		console.error('Closing:info')
 	}
 }
-setInterval(function() {
+setInterval(function () {
 	if (!infostreaming) {
 		console.log('try to connect to base-streaming')
 		infowebsocket()
 	}
 }, 10000)
-function openRN() {
+function toastInterpret(obj) {
-	$('#releasenote').modal('open')
+	if (obj.type == 'textv2') {
-	if (lang.language == 'ja') {
+		if (~obj.languages.indexOf(lang.language)) {
-		verp = ver.replace('(', '')
+			let showVer = true
-		verp = verp.replace('.', '-')
+			let toot = null
-		verp = verp.replace('.', '-')
+			if (obj.toot != '') {
-		verp = verp.replace('[', '-')
+				toot = `<button class="btn-flat toast-action" data-toot="${obj.toot}">Show</button>`
-		verp = verp.replace(']', '')
+			}
-		verp = verp.replace(')', '')
+			if (obj.ver == ver) {
-		verp = verp.replace(' ', '_')
+				showVer = true
-		$('#release-' + verp).show()
 			} else {
-		$('#release-en').show()
+				showVer = false
+			}
+			if (obj.domain != '') {
+				const multi = localStorage.getItem('multi')
+				if (multi) {
+					showVer = false
+					const accts = JSON.parse(multi)
+					const keys = Object.keys(accts)
+					for (let i = 0; i < accts.length; i++) {
+						const key = keys[i]
+						const acct = accts[key]
+						if (acct.domain == obj.domain) {
+							showVer = true
+							break
+						}
+					}
+				}
+			}
+			if (showVer) {
+				M.toast({
+					html: `${escapeHTML(obj.text)} ${toot} <span class="sml grey-text">(スライドして消去)</span>`,
+					displayLength: 86400
+				})
+				await sleep(500)
+				const targets = document.querySelectorAll('toast-action')
+				for (let j = 0; j < targets.length; i++) {
+					const target = targets[j]
+					const toot = target.getAttribute('data-toot')
+					target.addEventListener('click', detEx(toot, 'main'))
+				}
+
+			}
+		}
 	}
 }
-function closeSupport() {
+function openRN() {
-	$('#support-btm').animate(
+	M.Modal.getInstance(document.querySelector('#releasenote')).open()
+	if (lang.language == 'ja') {
+		verp = ver.replace('(', '').replace('.', '-').replace('.', '-').replace('[', '-').replace(']', '').replace(')', '').replace(' ', '_')
+		showElm(`#release-${verp}`)
+	} else {
+		showElm('#release-en')
+	}
+}
+async function closeSupport() {
+	document.querySelector('#support-btm').animate([
 		{
-			bottom: '-300px'
+			bottom: '0'
 		},
 		{
-			duration: 300,
+			bottom: '-300px'
-			complete: function() {
-				$('#support-btm').addClass('hide')
 		}
-		}
+	], 300);
-	)
+	await sleep(300)
+	document.querySelector('#support-btm').classList.add('hide')
 }
 function storeDialog(platform, ver) {
-	if($('body').hasClass('accessibility')) return false
+	if (document.querySelector('body').classList.contain('accessibility')) return false
+	let mes = false
 	if (platform == 'win32') {
-		var mes = lang.lang_version_platform
+		mes = lang.lang_version_platform
 	} else if (platform == 'linux') {
-		var mes = lang.lang_version_platform_linux
+		mes = lang.lang_version_platform_linux
 	} else if (platform == 'darwin') {
-		var mes = lang.lang_version_platform_mac
+		mes = lang.lang_version_platform_mac
-	} else {
-		var mes = false
 	}
 	if (mes) {
 		Swal.fire({
@@ -354,52 +256,22 @@ function storeDialog(platform, ver) {
 			}
 			localStorage.setItem('ver', ver)
 			showVer = true
-			if(pwa) return false
+			if (pwa) return false
 			console.log('%c Thank you for your update🎉', 'color: red;font-size:200%;')
-			$(document).ready(function() {
+			openRN()
-				$('#releasenote').modal('open')
-				verp = ver.replace('(', '')
-				verp = verp.replace('.', '-')
-				verp = verp.replace('.', '-')
-				verp = verp.replace('[', '-')
-				verp = verp.replace(']', '')
-				verp = verp.replace(')', '')
-				verp = verp.replace(' ', '_')
-				console.log('%c ' + verp, 'color: red;font-size:200%;')
-				if (lang.language == 'ja') {
-					$('#release-' + verp).show()
-				} else {
-					$('#release-en').show()
-				}
-			})
 		})
 	} else {
 		localStorage.setItem('ver', ver)
 		showVer = true
 		console.log('%c Thank you for your update🎉', 'color: red;font-size:200%;')
-			$(document).ready(function() {
+		openRN()
-				if(pwa) return false
-				$('#releasenote').modal('open')
-				verp = ver.replace('(', '')
-				verp = verp.replace('.', '-')
-				verp = verp.replace('.', '-')
-				verp = verp.replace('[', '-')
-				verp = verp.replace(']', '')
-				verp = verp.replace(')', '')
-				verp = verp.replace(' ', '_')
-				console.log('%c ' + verp, 'color: red;font-size:200%;')
-				if (lang.language == 'ja') {
-					$('#release-' + verp).show()
-				} else {
-					$('#release-en').show()
-				}
-			})
 	}
 
 }
 function closeStart() {
 	$('#start').css('display', 'none')
-	var platform = localStorage.getItem('platform')
+	document.querySelector('#start').style.display = 'none'
-	var ver = localStorage.getItem('ver')
+	const platform = localStorage.getItem('platform')
+	const ver = localStorage.getItem('ver')
 	storeDialog(platform, ver)
 }

app/js/login/instance.js

@@ -1,5 +1,5 @@
 //インスタンスリスト
-var idata = {
+const idata = {
 	"kirishima.cloud": "instance",
 	"kirishima.cloud_name": "アスタルテ",
 	"kirishima.cloud_letters": "6229",
@@ -84,5 +84,3 @@ var idata = {
 	"biwakodon.com_quote":"enabled",
 	"comm.cx_quote":"enabled"
 };
-
-localStorage.setItem("instance", JSON.stringify(idata));

app/js/login/login.js

@@ -386,8 +386,8 @@ function ckdb(acct_id) {
 	var bbcode = domain + '_bbcode'
 	var letters = domain + '_letters'
 	var quoteMarker = domain + '_quote'
-	if (localStorage.getItem('instance')) {
+	if (idata) {
-		var json = JSON.parse(localStorage.getItem('instance'))
+		var json = JSON.parse(idata)
 		if (json[quoteMarker] == 'enabled') {
 			localStorage.setItem('quoters', 'true')
 			localStorage.setItem('quote_' + acct_id, 'true')

app/js/platform/first.js

@@ -282,3 +282,28 @@ function statusModel(now) {
 		poll: null
 	}
 }
+
+function isFocused(query) {
+	const allTarget = document.querySelectorAll(query)
+	const active = document.activeElement
+	let is = false
+	for (let i = 0; i < allTarget.length; i++) {
+		if (allTarget[i] == active) {
+			is = true
+			break
+		}
+	}
+	return is
+}
+function getHeight(query) {
+	const elm = document.querySelector(query)
+	return parseFloat(getComputedStyle(elm, null).height.replace('px', ''))
+}
+function showElm(query) {
+	const allTarget = document.querySelectorAll(query)
+	for (let i = 0; i < allTarget.length; i++) {
+		const target = allTarget[i]
+		target.style.display = 'inherit'
+	}
+}
+const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));

app/js/ui/layout.js

@@ -444,7 +444,7 @@ function parseColumn(target, dontclose) {
 					<br>
 					<div id="picker_${key}" class="color-picker"></div>
 				</div>${if_tag}
-				<div class="tl-box" tlid="${key}">
+				<div class="tl-box" tlid="${key}" id="tlBox${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">
@@ -804,7 +804,7 @@ function webviewParse(url, key, insert, icnsert, css) {
 				<br>
 				<div id="picker_${key}" class="color-picker"></div>
 			</div>
-			<div class="tl-box" tlid="${key}" style="width:100%;height:100%;">
+			<div class="tl-box" tlid="${key}" style="width:100%;height:100%;" id="tlBox${key}">
 				<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>
@@ -866,7 +866,7 @@ function unstreamingTL(type, key, basekey, insert, icnsert, left_fold, css, anim
 			${lang.lang_layout_headercolor}<br>
 			<div id="picker_${key}" class="color-picker"></div>
 		</div>
-		<div class="tl-box" tlid="${key}">
+		<div class="tl-box" tlid="${key}" id="tlBox${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}

app/view/make/index.sample.html

@@ -1538,7 +1538,7 @@
 					</div>
 				</div>
 			</div>
-			<a onclick="about()" class="nex waves-effect pwa">
+			<a id="onClickAbout" class="nex waves-effect pwa">
 				<i class="material-icons" style="font-size: 1rem;">info</i>@@about@@ </a
 			>&nbsp;|&nbsp;
 			<a onclick="bottomReverse()" class="nex waves-effect">
@@ -1723,6 +1723,7 @@
 		<!--JS-->
 		<script type="text/javascript" src="../../@@node_base@@/jquery/dist/jquery.js"></script>
 		<script type="text/javascript" src="../../js/platform/first.js"></script>
+		<script type="text/javascript" src="../../js/common/api.js"></script>
 		<script type="text/javascript" src="../../@@node_base@@/grapheme-splitter/index.js"></script>
 		<script
 			type="text/javascript"

app/view/make/setting.sample.html

@@ -515,7 +515,7 @@
 	<button class="btn waves-effect red" style="width:100%; max-width:40rem;"
 		onclick="if(confirm('@@resetconfirm@@')){ localStorage.clear(); location.href='index.html'; }"><i
 			class="material-icons left">delete</i>@@reset@@</button><br><br>
-	<button class="btn waves-effect indigo pwa" onclick="about()" style="width:100%; max-width:40rem;"><i
+	<button class="btn waves-effect indigo pwa" id="onClickAbout" style="width:100%; max-width:40rem;"><i
 			class="material-icons left">info</i>@@about@@</button>
 	<a href="https://thedesk.top" class="btn waves-effect deep-purple lighten-2" style="width:100%; max-width:40rem;"><i
 			class="material-icons left">web</i>@@hp@@</a>

app/view/make/update.sample.html

@@ -83,7 +83,7 @@
 		<script type="text/javascript" src="../../@@node_base@@/jquery/dist/jquery.js"></script>
 		<script type="text/javascript" src="../../js/platform/first.js"></script>
 		<script type="text/javascript" src="../../@@node_base@@/materialize-css/dist/js/materialize.js"></script>
-		<i class="material-icons pointer waves-effect" onclick="about();">info</i>
+		<i class="material-icons pointer waves-effect" id="onClickAbout">info</i>
 		<i class="material-icons pointer waves-effect" onclick="skipper();">clear</i>
 		<!--a href="update.html">Reload</a-->
 		<div id="start">