From d50e36afe4304f53e166b15e83058ddce71da7e8 Mon Sep 17 00:00:00 2001 From: yumetodo Date: Fri, 10 Jan 2020 10:54:43 +0900 Subject: [PATCH] convert to ES6 module --- index.html | 12 +++--- js/common.js | 70 +++++++++++++++++++--------------- js/index.js | 103 ++++++++++++++++++++++++++++++++------------------- js/p.js | 20 +++++++--- v2/p.html | 5 +-- 5 files changed, 125 insertions(+), 85 deletions(-) diff --git a/index.html b/index.html index ee2f0ee..9af13f8 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,8 @@ - - + + @@ -23,19 +23,19 @@

mastogetter

- +

例)
012345678901234567
https://hogedon.com/web/status/012345678901234567
https://hogedon.com/@userid/012345678901234567

- +
埋め込みカードのプレビューが表示されます
使い方 - +
@@ -44,7 +44,7 @@

mastogetter

- +

diff --git a/js/common.js b/js/common.js index af8c3b8..a395211 100644 --- a/js/common.js +++ b/js/common.js @@ -1,27 +1,35 @@ -let card_list = []; +export let card_list = []; let max_index = 0; +export function ready(loaded) { + if (["interactive", "complete"].includes(document.readyState)) { + loaded(); + } else { + document.addEventListener("DOMContentLoaded", loaded); + } +} + function $(id) { return document.getElementById(id); } -const get_url_vars = (function () { +export const get_url_vars = (function() { const vars = {}; - const params = location.search.substring(1).split('&'); + const params = location.search.substring(1).split("&"); for (let i = 0; i < params.length; i++) { if (/=/.test(params[i])) { - const [key, val] = params[i].split('='); + const [key, val] = params[i].split("="); vars[key] = val; } } return vars; })(); -function deleteCard(index) { } +export function deleteCard(/*index*/) {} -function decodePermalink(get_url_vars) { +export function decodePermalink(get_url_vars) { let instance_full = get_url_vars["i"]; - if (instance_full.trim() == "") { + if (instance_full.trim() === "") { instance_full = "https://qiitadon.com"; if ($("instance") !== null) { $("instance").value = instance_full; @@ -29,7 +37,7 @@ function decodePermalink(get_url_vars) { } const instance = instance_full.split("//")[1]; const toot_id = get_url_vars["t"]; - const toot_ids = toot_id.split(','); + const toot_ids = toot_id.split(","); if (toot_ids[toot_ids.length - 1] < "1000000000000000") { // 最後の要素が 1.0+E18より小さければ、 // id の途中で url が切れたと判断して最後の項目を @@ -38,9 +46,9 @@ function decodePermalink(get_url_vars) { } return { - "instance_full": instance_full, - "instance": instance, - "toot_ids": toot_ids + instance_full: instance_full, + instance: instance, + toot_ids: toot_ids, }; } @@ -54,21 +62,21 @@ function genPermalink(toot_csv = undefined) { } } -function updatePermalinkFromCardList(){ - console.log('Updaing permalink from card_list.'); +function updatePermalinkFromCardList() { + console.log("Updaing permalink from card_list."); let permalink = "https://hidao80.github.io/mastogetter/p.html?i=" + $("instance").value + "&t="; - Object.keys(card_list).forEach(function (key) { + Object.keys(card_list).forEach(function(key) { permalink += card_list[key] + ","; }); $("permalink").value = permalink; } function addPermalink(toot_csv) { - console.log('Adding CSV to permalink.'); + console.log("Adding CSV to permalink."); $("permalink").value += toot_csv; } -function showCards(permalink_obj) { +export function showCards(permalink_obj) { const instance_full = permalink_obj["instance_full"]; const instance = permalink_obj["instance"]; const toot_ids = permalink_obj["toot_ids"]; @@ -79,11 +87,11 @@ function showCards(permalink_obj) { for (let i = 0; i < toot_ids.length; i++) { toot_url = instance_full + "/api/v1/statuses/" + toot_ids[i]; xhr.open("GET", toot_url, false); - xhr.onload = function (e) { + xhr.onload = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { const toot = JSON.parse(xhr.responseText); - const timestamp = moment(toot.created_at).format('llll'); + const timestamp = moment(toot.created_at).format("llll"); const toot_div = document.createElement("div"); toot_div.setAttribute("class", "toot"); let media = ""; @@ -97,8 +105,10 @@ function showCards(permalink_obj) {

${toot.content}

${media} `; - toot_div.setAttribute("id", max_index); - toot_div.setAttribute("ondblclick", "deleteCard('" + max_index + "')"); + toot_div.setAttribute("id", `o_${max_index}`); + toot_div.addEventListener("dblclick", () => { + deleteCard(card_list.length); + }); toot_div.setAttribute("draggable", "true"); toot_div.addEventListener("dragstart", handleDragStart, false); toot_div.addEventListener("dragover", handleDragOver, false); @@ -111,7 +121,7 @@ ${media} } } }; - xhr.onerror = function (e) { + xhr.onerror = function() { console.error(xhr.statusText); }; xhr.send(null); @@ -122,8 +132,8 @@ ${media} } function handleDragStart(e) { - e.dataTransfer.effectAllowed = 'move'; - e.dataTransfer.setData('text/plain', this.id); + e.dataTransfer.effectAllowed = "move"; + e.dataTransfer.setData("text/plain", this.id); } function handleDragOver(e) { @@ -136,13 +146,13 @@ function handleDrop(e) { if (e.preventDefault) { e.preventDefault(); } - e.dataTransfer.dropEffect = 'move'; + e.dataTransfer.dropEffect = "move"; let node = e.target; while (!node.getAttribute("ondblclick")) { node = node.parentNode; } - const src = $(e.dataTransfer.getData('text/plain')); - if (src.id == node.id) { + const src = $(e.dataTransfer.getData("text/plain")); + if (src.id === node.id) { return; } const cards = $("cards"); @@ -158,10 +168,10 @@ function handleDrop(e) { } } if (src_index < 0) { - return + return; } if (node_index < 0) { - return + return; } cards.removeChild(src); @@ -171,13 +181,13 @@ function handleDrop(e) { card_list.splice(node_index, 0, card_list[src_index]); card_list.splice(src_index, 1); } else { - const toot_id = card_list[src_index] + const toot_id = card_list[src_index]; card_list.splice(src_index, 1); card_list.splice(node_index, 0, toot_id); } genPermalink(); } -function handleDragEnd(e) { +function handleDragEnd() { console.log("drag end"); } diff --git a/js/index.js b/js/index.js index 64f05d6..901e36b 100644 --- a/js/index.js +++ b/js/index.js @@ -1,44 +1,57 @@ +import * as impl from "./common.js"; + function $(id) { return document.getElementById(id); } function showPreview() { let instance_full = $("instance").value; - if (instance_full.trim() == "") { + if (instance_full.trim() === "") { instance_full = "https://qiitadon.com"; $("instance").value = instance_full; } - const instance = instance_full.split("//")[1]; - const toot_id = $("toot-id").value.split("/").reverse()[0]; + const toot_id = $("toot-id") + .value.split("/") + .reverse()[0]; const toot_url = instance_full + "/api/v1/statuses/" + toot_id; const target_div = $("card-preview"); const xhr = new XMLHttpRequest(); xhr.open("GET", toot_url, true); - xhr.onload = function (e) { + xhr.onload = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { const toot = JSON.parse(xhr.responseText); - const timestamp = moment(toot.created_at).format('llll'); + const timestamp = moment(toot.created_at).format("llll"); let media = ""; for (let i = 0; i < toot.media_attachments.length; i++) { media += ``; } target_div.innerHTML = `
-
-
${toot.account.display_name}@${toot.account.username}@${(new URL(toot.account.url)).hostname} -${timestamp} -

${toot.content}

-${media}
-
-`; +
+ + avatar + +
+
+ + ${toot.account.display_name} + @${toot.account.username}@${new URL(toot.account.url).hostname} + + ${timestamp} +
+

${toot.content}

+
+ ${media} +
+`; } else { console.error(xhr.statusText); } } }; - xhr.onerror = function (e) { + xhr.onerror = function() { console.error(xhr.statusText); }; xhr.send(null); @@ -46,24 +59,30 @@ ${media} function addCard() { const clone = $("card-preview").firstElementChild.cloneNode(true); - clone.setAttribute("id", max_index); - clone.setAttribute("ondblclick", "deleteCard('"+ max_index +"')"); - clone.setAttribute("draggable", "true"); - clone.addEventListener("dragstart", handleDragStart, false); - clone.addEventListener("dragover", handleDragOver, false); - clone.addEventListener("drop", handleDrop, false); - clone.addEventListener("dragend", handleDragEnd, false); - card_list[max_index] = $("toot-id").value.split("/").reverse()[0]; - max_index++; + clone.setAttribute("id", `c_${impl.card_list.length}`); + clone.addEventListener("dblclick", () => { + deleteCard(impl.card_list.length); + }); + clone.setAttribute("draggable", "true"); + clone.addEventListener("dragstart", impl.handleDragStart, false); + clone.addEventListener("dragover", impl.handleDragOver, false); + clone.addEventListener("drop", impl.handleDrop, false); + clone.addEventListener("dragend", impl.handleDragEnd, false); + impl.card_list.push( + $("toot-id") + .value.split("/") + .reverse()[0] + ); $("cards").appendChild(clone); - genPermalink(); + impl.genPermalink(); } function deleteCard(index) { $("cards").removeChild($(index)); - delete card_list[index]; - genPermalink(); + impl.card_list.splice(index, 1); + delete impl.card_list[index]; + impl.genPermalink(); } function copyPermalink() { @@ -71,23 +90,18 @@ function copyPermalink() { alertUsageNoPermalink(); return false; } - genPermalink(); + impl.genPermalink(); $("permalink").select(); document.execCommand("copy"); } function loadPermalink() { const permalink = $("load").value; - const permalink_str = {"i": permalink.split("?i=")[1].split("&")[0], - "t": permalink.split("&t=")[1]}; - const permalink_obj = decodePermalink(permalink_str); - - showCards(permalink_obj); - genPermalink(permalink_obj.toot_ids.join(",")); -} + const permalink_str = { i: permalink.split("?i=")[1].split("&")[0], t: permalink.split("&t=")[1] }; + const permalink_obj = impl.decodePermalink(permalink_str); -function alertUsageGitIO() { - alert("パーマリンクがコピーされました。\nこのあと https://git.io/xxxx 形式の短縮 URL を作成するため別ウィンドウがポップアップします。開かれた先に表示された値が URL の xxxx の部分になります。"); + impl.showCards(permalink_obj); + impl.genPermalink(permalink_obj.toot_ids.join(",")); } function alertUsageNoPermalink() { @@ -95,9 +109,20 @@ function alertUsageNoPermalink() { } function isEmptyPermalink() { - return (!$("permalink").value) ? true : false; + return !$("permalink").value; } -function submitGitIO() { - $("form-gitio").submit(); -} +impl.ready(() => { + $("loadPermalink").addEventListener("click", () => { + loadPermalink(); + }); + $("showPreview").addEventListener("click", () => { + showPreview(); + }); + $("addCard").addEventListener("click", () => { + addCard(); + }); + $("copylink").addEventListener("click", () => { + copyPermalink(); + }); +}); diff --git a/js/p.js b/js/p.js index 7ad6f22..09535e9 100644 --- a/js/p.js +++ b/js/p.js @@ -1,12 +1,20 @@ -function showPreview () { - showCards(decodePermalink(get_url_vars)); - $('matomain').addEventListener('mouseover', removeAllDraggable, false); +import impl from "./common"; +function $(id) { + return document.getElementById(id); } -function removeAllDraggable () { - const elems = document.querySelectorAll('div.toot'); +function showPreview() { + impl.showCards(impl.decodePermalink(impl.get_url_vars)); + $("matomain").addEventListener("mouseover", removeAllDraggable, false); +} + +function removeAllDraggable() { + const elems = document.querySelectorAll("div.toot"); for (let i = 0; i < elems.length; i++) { - elems[i].removeAttribute('draggable'); + elems[i].removeAttribute("draggable"); } } +impl.ready(() => { + showPreview(); +}); diff --git a/v2/p.html b/v2/p.html index 876c1bc..974c57a 100644 --- a/v2/p.html +++ b/v2/p.html @@ -8,7 +8,7 @@ - + @@ -26,7 +26,4 @@

mastogetter

-