メールソフトみたいなコード
メールソフトみたいなコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メールソフトみたいなコード</title>
<style>
#content-container {
width:300px;
height:500px;
border:1px solid gray; padding:5px;
}
#content-top {
height:30px;
display:flex;
}
#content {
height:470px;
overflow-y:auto;
}
#content-body {
line-height:20em;
border:1px solid gray; padding:5px;
}
#content-bottom {
height:20px;
}
#button-container {
height:100px;
width:300px;
border:1px solid gray; padding:5px;
overflow-x: hidden;
overflow-y: scroll;
}
.button{
width:300px;
border-bottom:1px solid gray;
padding:5px;
}
</style>
<script>
// メールデータ（通常はサーバーから取得）
const email1 = {
subject: "一つ目",
body: '一つ目のコンテンツ１行目<br>一つ目のコンテンツ２行目<br>一つ目のコンテンツ３行目<br>',
};
const email2 = {
subject: "二つ目",
body: '二つ目のコンテンツ１行目<br>二つ目のコンテンツ２行目<br>二つ目のコンテンツ３行目<br>',
};
const email3 = {
subject: "三つ目",
body: '三つ目のコンテンツ１行目<br>三つ目のコンテンツ２行目<br>三つ目のコンテンツ３行目<br>',
};
const email4 = {
subject: "四つ目",
body: '四つ目のコンテンツ１行目<br>四つ目のコンテンツ２行目<br>四つ目のコンテンツ３行目<br>',
};
function changeContent(newContent) {
document.getElementById('content-top').textContent = "subject: "+newContent.subject;
const contentDiv = document.getElementById('content-body');
contentDiv.innerHTML = newContent.body; //最初からhtml形式
contentDiv.setAttribute("data-render", "html"); //html形式であることを示す
// contentDiv.textContent = newContent.body; //最初はtext形式
// contentDiv.setAttribute("data-render", "text"); //text形式であることを示す
// 以下はコンテンツのスクロールを一番上に戻すコード
if (navigator.userAgent.indexOf('Firefox') == -1) {
contentDiv.scrollIntoView(); //Firefoxでも使えるけれど、意図的に分けた
}else{
// contentDiv.scrollTop = 0; //誤ったコードでスクロール位置が維持されてしまう
document.getElementById('content').scrollTop = 0;
}
}
function changehtml() {
// ユーザーがsubjectをクリックしたら、メール本文をhtml形式かtext形式かに切り替えて表示
const contentDiv = document.getElementById('content-body');
if (contentDiv.getAttribute("data-render") === "html") {
contentDiv.textContent = contentDiv.innerHTML;
contentDiv.setAttribute("data-render", "text");
} else {
contentDiv.innerHTML = contentDiv.textContent;
contentDiv.setAttribute("data-render", "html");
}
}
</script>
</head>
<body>
<div id="button-container">
<div class="button" onclick="changeContent(email1)">
一つ目
</div>
<div class="button" onclick="changeContent(email2)">
二つ目
</div>
<div class="button" onclick="changeContent(email3)">
三つ目
</div>
<div class="button" onclick="changeContent(email4)">
四つ目
</div>
</div>
<div id="content-container">
<div id="content-top" onclick="changehtml()">
subject:
</div>
<div id="content">
<div id="content-body" data-render="html">
<p>上のボタンでコンテンツ変更</p>
</div>
<div id="content-bottom">
content-bottom
</div>
</div>
</div>
</body>
</html>
アップデート版
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>メールソフトみたいなコード</title>
<style>
#content-container {
width:300px;
height:500px;
border:1px solid gray; padding:5px;
}
#content-top {
height:30px;
overflow:auto;
display:flex;
justify-content: space-between;
align-items: flex-start;
}
#content-top button {
float:right;
white-space: nowrap;
}
#content {
height:470px;
overflow-y:auto;
}
#content-body {
line-height:20em;
border:1px solid gray; padding:5px;
overflow-anchor: none;
}
#content-bottom {
height:20px;
}
#button-container {
height:100px;
width:300px;
border:1px solid gray; padding:5px;
overflow-x: hidden;
overflow-y: scroll;
}
.button{
width:300px;
height:25px;
border-bottom:1px solid gray;
padding:5px;
display:flex;
justify-content: space-between;
align-items: flex-start;
}
.button div {
white-space: nowrap;
overflow:hidden;
}
.button button {
margin-right: 20px;
float:right;
white-space: nowrap;
}
.selected {
background-color: #ddd; /* 選択されたメールの背景色を灰色に設定 */
}
</style>
<script>
if (history.scrollRestoration) {
history.scrollRestoration = 'manual'; // Firefoxで、button-containerのスクロールをリセットする。
}
window.onload = function() {
// メールデータ（通常はサーバーから取得）
const emails = [
{
subject: "一つ目",
body: '一つ目のコンテンツ１行目<br>一つ目のコンテンツ２行目<br>一つ目のコンテンツ３行目<br>',
},
{
subject: "二つ目",
body: '二つ目のコンテンツ１行目<br>二つ目のコンテンツ２行目<br>二つ目のコンテンツ３行目<br>',
},
{
subject: "三つ目三つ目三つ目三つ目三つ目三つ目三つ目三つ目",
body: '三つ目のコンテンツ１行目<br>三つ目のコンテンツ２行目<br>三つ目のコンテンツ３行目<br>',
},
{
subject: "四つ目",
body: '四つ目のコンテンツ１行目<br>四つ目のコンテンツ２行目<br>四つ目のコンテンツ３行目<br>',
}
];
// button-containerを取得
const buttonContainer = document.getElementById('button-container');
// 各メールデータに対してボタンを生成
emails.forEach((email, index) => {
const button = document.createElement('div');
button.className = 'button';
const subject = document.createElement('div');
subject.textContent = email.subject;
button.appendChild(subject);
button.onclick = function() {
// すべてのメールから'selected'クラスを削除
document.querySelectorAll('.button').forEach((btn) => {
btn.classList.remove('selected');
});
// 選択されたメールに'selected'クラスを追加
this.classList.add('selected');
// コンテンツを変更
changeContent(email);
};
const deleteButton = document.createElement('button');
deleteButton.textContent = '削除';
deleteButton.onclick = function(event) {
event.stopPropagation();
const nextButton = button.nextElementSibling || button.previousElementSibling;
if (button.classList.contains('selected') && nextButton) {
nextButton.click();
}
buttonContainer.removeChild(button);
if (buttonContainer.children.length === 0) {
changeContent({subject: '', body: '空です'});
}
};
button.appendChild(deleteButton);
buttonContainer.appendChild(button);
});
};
function changeContent(newContent) {
const contenttop = document.getElementById('content-top');
contenttop.firstElementChild.textContent = "subject: "+newContent.subject;
const contentDiv = document.getElementById('content-body');
contentDiv.innerHTML = newContent.body; //最初からhtml表示（通常のレンダリング）
contentDiv.setAttribute("data-render", "html"); //html表示であることを示す
// contentDiv.textContent = newContent.body; //最初はtext表示（htmlタグも表示）
// contentDiv.setAttribute("data-render", "text"); //text表示であることを示す
// 以下はコンテンツのスクロールを一番上に戻すコード
if (navigator.userAgent.indexOf('Firefox') == -1) {
contentDiv.scrollIntoView(); //Firefoxでも使えるけれど、意図的に分けた
}else{
// contentDiv.scrollTop = 0; //誤ったコードでスクロール位置が維持されてしまう
document.getElementById('content').scrollTop = 0;
// contentDiv.scrollIntoView(); //Firefoxでも同じコードにした
}
}
function changehtml() {
// ユーザーがsubjectをクリックしたら、メール本文をhtmlかtextに切り替えて表示
const contentDiv = document.getElementById('content-body');
if (contentDiv.getAttribute("data-render") === "html") {
contentDiv.textContent = contentDiv.innerHTML;
contentDiv.setAttribute("data-render", "text");
} else {
contentDiv.innerHTML = contentDiv.textContent;
contentDiv.setAttribute("data-render", "html");
}
}
</script>
</head>
<body>
<div id="button-container">
</div>
<div id="content-container">
<div id="content-top">
<div>subject:</div>
<button onclick="changehtml()">Ｗ｜Ｔ</button>
</div>
<div id="content">
<div id="content-body" data-render="html">
<p>上のボタンでコンテンツ変更</p>
</div>
<div id="content-bottom">
content-bottom
</div>
</div>
</div>
</body>
</html>
コメント
コメントを投稿